diff --git a/packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx b/packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx index f1f7cff90..b0e8278b8 100644 --- a/packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx +++ b/packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx @@ -1,5 +1,5 @@ -import { useMemo, useState } from 'react'; import styled from '@emotion/styled'; +import { useMemo, useState } from 'react'; import { useRecoilValue } from 'recoil'; import { IconApps, IconComponent, useIcons } from 'twenty-ui'; @@ -147,6 +147,8 @@ export const IconPicker = ({ [matchingSearchIconKeys], ); + const icon = selectedIconKey ? getIcon(selectedIconKey) : IconApps; + return (
} diff --git a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerContentCreateMode.tsx b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerContentCreateMode.tsx index 1d4fad308..c3ce24018 100644 --- a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerContentCreateMode.tsx +++ b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerContentCreateMode.tsx @@ -30,6 +30,7 @@ import { viewPickerIsPersistingComponentState } from '@/views/view-picker/states import { viewPickerKanbanFieldMetadataIdComponentState } from '@/views/view-picker/states/viewPickerKanbanFieldMetadataIdComponentState'; import { viewPickerSelectedIconComponentState } from '@/views/view-picker/states/viewPickerSelectedIconComponentState'; import { viewPickerTypeComponentState } from '@/views/view-picker/states/viewPickerTypeComponentState'; +import { useState } from 'react'; const StyledNoKanbanFieldAvailableContainer = styled.div` color: ${({ theme }) => theme.font.color.light}; @@ -41,6 +42,7 @@ const StyledNoKanbanFieldAvailableContainer = styled.div` export const ViewPickerContentCreateMode = () => { const { setViewPickerMode } = useViewPickerMode(); + const [hasManuallySelectedIcon, setHasManuallySelectedIcon] = useState(false); const [viewPickerInputName, setViewPickerInputName] = useRecoilComponentStateV2(viewPickerInputNameComponentState); @@ -87,9 +89,17 @@ export const ViewPickerContentCreateMode = () => { ViewsHotkeyScope.ListDropdown, ); + const defaultIcon = + viewPickerType === ViewType.Kanban ? 'IconLayoutKanban' : 'IconTable'; + + const selectedIcon = hasManuallySelectedIcon + ? viewPickerSelectedIcon + : defaultIcon; + const onIconChange = ({ iconKey }: { iconKey: string }) => { setViewPickerIsDirty(true); setViewPickerSelectedIcon(iconKey); + setHasManuallySelectedIcon(true); }; const handleClose = async () => { @@ -106,7 +116,7 @@ export const ViewPickerContentCreateMode = () => { setHotkeyScope(ViewsHotkeyScope.ListDropdown)} /> diff --git a/packages/twenty-ui/src/display/icon/hooks/useIcons.ts b/packages/twenty-ui/src/display/icon/hooks/useIcons.ts index c07d0a38a..981fae839 100644 --- a/packages/twenty-ui/src/display/icon/hooks/useIcons.ts +++ b/packages/twenty-ui/src/display/icon/hooks/useIcons.ts @@ -12,7 +12,10 @@ export const useIcons = () => { }; const getIcon = (iconKey?: string | null) => { - if (!iconKey) return defaultIcon; + if (!iconKey) { + return defaultIcon; + } + return icons[iconKey] ?? defaultIcon; };