diff --git a/apps/desktop/src/renderer/screens/main/components/WorkspaceSidebar/ProjectSection/ProjectSection.tsx b/apps/desktop/src/renderer/screens/main/components/WorkspaceSidebar/ProjectSection/ProjectSection.tsx index 3a28eac2a80..308d1625130 100644 --- a/apps/desktop/src/renderer/screens/main/components/WorkspaceSidebar/ProjectSection/ProjectSection.tsx +++ b/apps/desktop/src/renderer/screens/main/components/WorkspaceSidebar/ProjectSection/ProjectSection.tsx @@ -64,11 +64,25 @@ export function ProjectSection({ () => ({ type: PROJECT_TYPE, item: { projectId, index, originalIndex: index }, + end: (item, monitor) => { + if (!item) return; + if (monitor.didDrop()) return; + if (item.originalIndex !== item.index) { + reorderProjects.mutate( + { fromIndex: item.originalIndex, toIndex: item.index }, + { + onError: (error) => + toast.error(`Failed to reorder: ${error.message}`), + onSettled: () => utils.workspaces.getAllGrouped.invalidate(), + }, + ); + } + }, collect: (monitor) => ({ isDragging: monitor.isDragging(), }), }), - [projectId, index], + [projectId, index, reorderProjects], ); const [, drop] = useDrop({ @@ -100,8 +114,10 @@ export function ProjectSection({ { onError: (error) => toast.error(`Failed to reorder: ${error.message}`), + onSettled: () => utils.workspaces.getAllGrouped.invalidate(), }, ); + return { reordered: true }; } }, }); diff --git a/apps/desktop/src/renderer/screens/main/components/WorkspaceSidebar/WorkspaceListItem/WorkspaceListItem.tsx b/apps/desktop/src/renderer/screens/main/components/WorkspaceSidebar/WorkspaceListItem/WorkspaceListItem.tsx index 0ffbff2c9f0..9afe861ca98 100644 --- a/apps/desktop/src/renderer/screens/main/components/WorkspaceSidebar/WorkspaceListItem/WorkspaceListItem.tsx +++ b/apps/desktop/src/renderer/screens/main/components/WorkspaceSidebar/WorkspaceListItem/WorkspaceListItem.tsx @@ -206,30 +206,74 @@ export function WorkspaceListItem({ const [{ isDragging }, drag] = useDrag( () => ({ type: WORKSPACE_TYPE, - item: { id, projectId, index }, + item: { id, projectId, index, originalIndex: index }, + end: (item, monitor) => { + if (!item || monitor.didDrop()) return; + if (item.originalIndex !== item.index) { + reorderWorkspaces.mutate( + { + projectId: item.projectId, + fromIndex: item.originalIndex, + toIndex: item.index, + }, + { + onError: (error) => + toast.error(`Failed to reorder workspace: ${error.message}`), + onSettled: () => utils.workspaces.getAllGrouped.invalidate(), + }, + ); + } + }, collect: (monitor) => ({ isDragging: monitor.isDragging(), }), }), - [id, projectId, index], + [id, projectId, index, reorderWorkspaces], ); const [, drop] = useDrop({ accept: WORKSPACE_TYPE, - hover: (item: { id: string; projectId: string; index: number }) => { + hover: (item: { + id: string; + projectId: string; + index: number; + originalIndex: number; + }) => { if (item.projectId === projectId && item.index !== index) { + utils.workspaces.getAllGrouped.setData(undefined, (oldData) => { + if (!oldData) return oldData; + return oldData.map((group) => { + if (group.project.id !== projectId) return group; + const workspaces = [...group.workspaces]; + const [moved] = workspaces.splice(item.index, 1); + workspaces.splice(index, 0, moved); + return { ...group, workspaces }; + }); + }); + item.index = index; + } + }, + drop: (item: { + id: string; + projectId: string; + index: number; + originalIndex: number; + }) => { + if (item.projectId !== projectId) return; + if (item.originalIndex !== item.index) { reorderWorkspaces.mutate( { projectId, - fromIndex: item.index, - toIndex: index, + fromIndex: item.originalIndex, + toIndex: item.index, }, { onError: (error) => toast.error(`Failed to reorder workspace: ${error.message}`), + onSettled: () => utils.workspaces.getAllGrouped.invalidate(), }, ); - item.index = index; + return { reordered: true }; } }, });