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 84d32dc193..67567b2ef9 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,7 +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'; +import { useMemo, useState } from 'react'; const StyledNoKanbanFieldAvailableContainer = styled.div` color: ${({ theme }) => theme.font.color.light}; @@ -41,7 +41,7 @@ const StyledNoKanbanFieldAvailableContainer = styled.div` `; export const ViewPickerContentCreateMode = () => { - const { setViewPickerMode } = useViewPickerMode(); + const { viewPickerMode, setViewPickerMode } = useViewPickerMode(); const [hasManuallySelectedIcon, setHasManuallySelectedIcon] = useState(false); const [viewPickerInputName, setViewPickerInputName] = @@ -92,9 +92,20 @@ export const ViewPickerContentCreateMode = () => { const defaultIcon = viewPickerType === ViewType.Kanban ? 'IconLayoutKanban' : 'IconTable'; - const selectedIcon = hasManuallySelectedIcon - ? viewPickerSelectedIcon - : defaultIcon; + const selectedIcon = useMemo(() => { + if (hasManuallySelectedIcon) { + return viewPickerSelectedIcon; + } + if (viewPickerMode === 'create-from-current') { + return viewPickerSelectedIcon || defaultIcon; + } + return defaultIcon; + }, [ + hasManuallySelectedIcon, + viewPickerSelectedIcon, + viewPickerMode, + defaultIcon, + ]); const onIconChange = ({ iconKey }: { iconKey: string }) => { setViewPickerIsDirty(true); diff --git a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerContentEffect.tsx b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerContentEffect.tsx index 78742065cf..767f3cf687 100644 --- a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerContentEffect.tsx +++ b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerContentEffect.tsx @@ -4,7 +4,9 @@ import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/ import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2'; import { useGetCurrentView } from '@/views/hooks/useGetCurrentView'; +import { ViewType } from '@/views/types/ViewType'; import { useGetAvailableFieldsForKanban } from '@/views/view-picker/hooks/useGetAvailableFieldsForKanban'; +import { useViewPickerMode } from '@/views/view-picker/hooks/useViewPickerMode'; import { viewPickerInputNameComponentState } from '@/views/view-picker/states/viewPickerInputNameComponentState'; import { viewPickerIsDirtyComponentState } from '@/views/view-picker/states/viewPickerIsDirtyComponentState'; import { viewPickerIsPersistingComponentState } from '@/views/view-picker/states/viewPickerIsPersistingComponentState'; @@ -21,11 +23,12 @@ export const ViewPickerContentEffect = () => { const setViewPickerInputName = useSetRecoilComponentStateV2( viewPickerInputNameComponentState, ); + const { viewPickerMode } = useViewPickerMode(); const [viewPickerKanbanFieldMetadataId, setViewPickerKanbanFieldMetadataId] = useRecoilComponentStateV2(viewPickerKanbanFieldMetadataIdComponentState); - const setViewPickerType = useSetRecoilComponentStateV2( + const [viewPickerType, setViewPickerType] = useRecoilComponentStateV2( viewPickerTypeComponentState, ); @@ -54,7 +57,13 @@ export const ViewPickerContentEffect = () => { !viewPickerIsPersisting && !viewPickerIsDirty ) { - setViewPickerSelectedIcon(referenceView.icon); + const defaultIcon = + viewPickerType === ViewType.Kanban ? 'IconLayoutKanban' : 'IconTable'; + if (viewPickerMode === 'create-empty') { + setViewPickerSelectedIcon(defaultIcon); + } else { + setViewPickerSelectedIcon(referenceView.icon); + } setViewPickerInputName(referenceView.name); setViewPickerType(referenceView.type); } @@ -65,6 +74,8 @@ export const ViewPickerContentEffect = () => { setViewPickerType, viewPickerIsPersisting, viewPickerIsDirty, + viewPickerMode, + viewPickerType, ]); useEffect(() => {