diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/DashboardSidebar/components/DashboardSidebarWorkspaceItem/components/DashboardSidebarWorkspaceContextMenu/DashboardSidebarWorkspaceContextMenu.tsx b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/DashboardSidebar/components/DashboardSidebarWorkspaceItem/components/DashboardSidebarWorkspaceContextMenu/DashboardSidebarWorkspaceContextMenu.tsx index 29e5e6d1d94..49dba6a2d97 100644 --- a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/DashboardSidebar/components/DashboardSidebarWorkspaceItem/components/DashboardSidebarWorkspaceContextMenu/DashboardSidebarWorkspaceContextMenu.tsx +++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/DashboardSidebar/components/DashboardSidebarWorkspaceItem/components/DashboardSidebarWorkspaceContextMenu/DashboardSidebarWorkspaceContextMenu.tsx @@ -97,33 +97,35 @@ export function DashboardSidebarWorkspaceContextMenu({ )} - - - - Move to Section - - - - - New Section - - {sections.length > 0 && } - {sections.map((section) => ( - onMoveToSection(section.id)} - > - {section.color && ( - - )} - {section.name} - - ))} - - + + + Create Section Below + + {(sections.length > 0 || isInSection) && } + {sections.length > 0 && ( + + + + Move to Section + + + {sections.map((section) => ( + onMoveToSection(section.id)} + > + {section.color && ( + + )} + {section.name} + + ))} + + + )} {isInSection && ( onMoveToSection(null)}> diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/DashboardSidebar/components/DashboardSidebarWorkspaceItem/hooks/useDashboardSidebarWorkspaceItemActions/useDashboardSidebarWorkspaceItemActions.ts b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/DashboardSidebar/components/DashboardSidebarWorkspaceItem/hooks/useDashboardSidebarWorkspaceItemActions/useDashboardSidebarWorkspaceItemActions.ts index eedc58a5daa..a9296ede735 100644 --- a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/DashboardSidebar/components/DashboardSidebarWorkspaceItem/hooks/useDashboardSidebarWorkspaceItemActions/useDashboardSidebarWorkspaceItemActions.ts +++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/DashboardSidebar/components/DashboardSidebarWorkspaceItem/hooks/useDashboardSidebarWorkspaceItemActions/useDashboardSidebarWorkspaceItemActions.ts @@ -99,8 +99,9 @@ export function useDashboardSidebarWorkspaceItemActions({ }; const handleCreateSection = () => { - const newSectionId = createSection(projectId); - moveWorkspaceToSection(workspaceId, projectId, newSectionId); + createSection(projectId, { + insertAfterWorkspaceId: workspaceId, + }); }; const resolveWorktreePath = async (): Promise => { diff --git a/apps/desktop/src/renderer/routes/_authenticated/hooks/useDashboardSidebarState/useDashboardSidebarState.ts b/apps/desktop/src/renderer/routes/_authenticated/hooks/useDashboardSidebarState/useDashboardSidebarState.ts index 83aee1ce847..8cc31ea07b9 100644 --- a/apps/desktop/src/renderer/routes/_authenticated/hooks/useDashboardSidebarState/useDashboardSidebarState.ts +++ b/apps/desktop/src/renderer/routes/_authenticated/hooks/useDashboardSidebarState/useDashboardSidebarState.ts @@ -182,25 +182,71 @@ export function useDashboardSidebarState() { ); const createSection = useCallback( - (projectId: string, name = "New Section") => { + ( + projectId: string, + options: { name?: string; insertAfterWorkspaceId?: string } = {}, + ) => { + const { name = "New Section", insertAfterWorkspaceId } = options; ensureSidebarProjectRecord(collections, projectId); const sectionId = crypto.randomUUID(); - const sectionOrders = Array.from( - collections.v2SidebarSections.state.values(), - ).filter((item) => item.projectId === projectId); - const randomColor = PROJECT_CUSTOM_COLORS[ Math.floor(Math.random() * PROJECT_CUSTOM_COLORS.length) ].value; + let tabOrder: number; + if (insertAfterWorkspaceId) { + const anchorWorkspace = collections.v2WorkspaceLocalState.get( + insertAfterWorkspaceId, + ); + const anchorTabOrder = anchorWorkspace?.sidebarState.sectionId + ? (collections.v2SidebarSections.get( + anchorWorkspace.sidebarState.sectionId, + )?.tabOrder ?? 0) + : (anchorWorkspace?.sidebarState.tabOrder ?? 0); + + for (const workspace of collections.v2WorkspaceLocalState.state.values()) { + if ( + workspace.sidebarState.projectId === projectId && + workspace.sidebarState.sectionId === null && + workspace.sidebarState.tabOrder > anchorTabOrder + ) { + const nextOrder = workspace.sidebarState.tabOrder + 1; + collections.v2WorkspaceLocalState.update( + workspace.workspaceId, + (draft) => { + draft.sidebarState.tabOrder = nextOrder; + }, + ); + } + } + for (const section of collections.v2SidebarSections.state.values()) { + if ( + section.projectId === projectId && + section.tabOrder > anchorTabOrder + ) { + const nextOrder = section.tabOrder + 1; + collections.v2SidebarSections.update(section.sectionId, (draft) => { + draft.tabOrder = nextOrder; + }); + } + } + + tabOrder = anchorTabOrder + 1; + } else { + const sectionOrders = Array.from( + collections.v2SidebarSections.state.values(), + ).filter((item) => item.projectId === projectId); + tabOrder = getNextTabOrder(sectionOrders); + } + collections.v2SidebarSections.insert({ sectionId, projectId, name, createdAt: new Date(), - tabOrder: getNextTabOrder(sectionOrders), + tabOrder, isCollapsed: false, color: randomColor, });