Use side panel sub-pages for add-to-folder flow (#18872)

https://github.com/user-attachments/assets/a31b8523-2d0a-4a02-bcd9-5548c906b7cc

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Abdul Rahman
2026-03-25 03:58:40 +05:30
committed by GitHub
parent 01af7bc7fb
commit 4a099ed097
41 changed files with 289 additions and 284 deletions
@@ -10,7 +10,7 @@ import { FOLDER_ICON_DEFAULT } from '@/navigation-menu-item/common/constants/Fol
import { NavigationMenuItemType } from 'twenty-shared/types';
import { useUpdateFolderInDraft } from '@/navigation-menu-item/edit/folder/hooks/useUpdateFolderInDraft';
import { useNavigationMenuItemSectionItems } from '@/navigation-menu-item/display/hooks/useNavigationMenuItemSectionItems';
import { selectedNavigationMenuItemInEditModeState } from '@/navigation-menu-item/common/states/selectedNavigationMenuItemInEditModeState';
import { selectedNavigationMenuItemIdInEditModeState } from '@/navigation-menu-item/common/states/selectedNavigationMenuItemIdInEditModeState';
import { IconPicker } from '@/ui/input/components/IconPicker';
import { TitleInput } from '@/ui/input/components/TitleInput';
import { useAtomComponentState } from '@/ui/utilities/state/jotai/hooks/useAtomComponentState';
@@ -29,8 +29,8 @@ export const SidePanelFolderInfo = () => {
sidePanelShouldFocusTitleInputComponentState,
sidePanelPageInfo.instanceId,
);
const selectedNavigationMenuItemInEditMode = useAtomStateValue(
selectedNavigationMenuItemInEditModeState,
const selectedNavigationMenuItemIdInEditMode = useAtomStateValue(
selectedNavigationMenuItemIdInEditModeState,
);
const items = useNavigationMenuItemSectionItems();
const { updateFolderInDraft } = useUpdateFolderInDraft();
@@ -38,11 +38,11 @@ export const SidePanelFolderInfo = () => {
const defaultLabel = t`New folder`;
const placeholder = t`Folder name`;
const selectedItem = selectedNavigationMenuItemInEditMode
const selectedItem = selectedNavigationMenuItemIdInEditMode
? items.find(
(item) =>
item.type === NavigationMenuItemType.FOLDER &&
item.id === selectedNavigationMenuItemInEditMode,
item.id === selectedNavigationMenuItemIdInEditMode,
)
: undefined;
@@ -5,7 +5,7 @@ import { LinkIconWithLinkOverlay } from '@/navigation-menu-item/display/link/com
import { NavigationMenuItemType } from 'twenty-shared/types';
import { useUpdateLinkInDraft } from '@/navigation-menu-item/edit/link/hooks/useUpdateLinkInDraft';
import { useNavigationMenuItemSectionItems } from '@/navigation-menu-item/display/hooks/useNavigationMenuItemSectionItems';
import { selectedNavigationMenuItemInEditModeState } from '@/navigation-menu-item/common/states/selectedNavigationMenuItemInEditModeState';
import { selectedNavigationMenuItemIdInEditModeState } from '@/navigation-menu-item/common/states/selectedNavigationMenuItemIdInEditModeState';
import { SidePanelPageInfoLayout } from '@/side-panel/components/SidePanelPageInfoLayout';
import { sidePanelPageInfoState } from '@/side-panel/states/sidePanelPageInfoState';
import { sidePanelShouldFocusTitleInputComponentState } from '@/side-panel/states/sidePanelShouldFocusTitleInputComponentState';
@@ -21,8 +21,8 @@ export const SidePanelLinkInfo = () => {
sidePanelShouldFocusTitleInputComponentState,
sidePanelPageInfo.instanceId,
);
const selectedNavigationMenuItemInEditMode = useAtomStateValue(
selectedNavigationMenuItemInEditModeState,
const selectedNavigationMenuItemIdInEditMode = useAtomStateValue(
selectedNavigationMenuItemIdInEditModeState,
);
const items = useNavigationMenuItemSectionItems();
const { updateLinkInDraft } = useUpdateLinkInDraft();
@@ -30,11 +30,11 @@ export const SidePanelLinkInfo = () => {
const defaultLabel = t`Link label`;
const placeholder = t`Link label`;
const selectedItem = selectedNavigationMenuItemInEditMode
const selectedItem = selectedNavigationMenuItemIdInEditMode
? items.find(
(item) =>
item.type === NavigationMenuItemType.LINK &&
item.id === selectedNavigationMenuItemInEditMode,
item.id === selectedNavigationMenuItemIdInEditMode,
)
: undefined;
@@ -7,7 +7,7 @@ import {
import { NavigationMenuItemType, SidePanelPages } from 'twenty-shared/types';
import { useNavigationMenuItemSectionItems } from '@/navigation-menu-item/display/hooks/useNavigationMenuItemSectionItems';
import { selectedNavigationMenuItemInEditModeState } from '@/navigation-menu-item/common/states/selectedNavigationMenuItemInEditModeState';
import { selectedNavigationMenuItemIdInEditModeState } from '@/navigation-menu-item/common/states/selectedNavigationMenuItemIdInEditModeState';
import { SidePanelAskAIInfo } from '@/side-panel/components/SidePanelAskAIInfo';
import { SidePanelFolderInfo } from '@/side-panel/components/SidePanelFolderInfo';
import { SidePanelLinkInfo } from '@/side-panel/components/SidePanelLinkInfo';
@@ -34,8 +34,8 @@ type SidePanelPageInfoProps = {
export const SidePanelPageInfo = ({ pageChip }: SidePanelPageInfoProps) => {
const { theme } = useContext(ThemeContext);
const selectedNavigationMenuItemInEditMode = useAtomStateValue(
selectedNavigationMenuItemInEditModeState,
const selectedNavigationMenuItemIdInEditMode = useAtomStateValue(
selectedNavigationMenuItemIdInEditModeState,
);
const items = useNavigationMenuItemSectionItems();
@@ -46,7 +46,7 @@ export const SidePanelPageInfo = ({ pageChip }: SidePanelPageInfoProps) => {
const isNavigationMenuItemEditPage =
pageChip.page?.page === SidePanelPages.NavigationMenuItemEdit;
const selectedNavItem = isNavigationMenuItemEditPage
? items.find((item) => item.id === selectedNavigationMenuItemInEditMode)
? items.find((item) => item.id === selectedNavigationMenuItemIdInEditMode)
: undefined;
if (isNavigationMenuItemEditPage && isDefined(selectedNavItem)) {