feat(desktop): add drag-and-drop reordering for projects in sidebar

apps/desktop/src/renderer/react-query/projects/index.ts

@@ -1,2 +1,3 @@
 export { useOpenNew } from "./useOpenNew";
+export { useReorderProjects } from "./useReorderProjects";
 export { useUpdateProject } from "./useUpdateProject";

apps/desktop/src/renderer/react-query/projects/useReorderProjects.ts

@@ -0,0 +1,20 @@
+import { trpc } from "renderer/lib/trpc";
+
+/**
+ * Mutation hook for reordering projects
+ * Automatically invalidates workspace and project queries on success
+ */
+export function useReorderProjects(
+	options?: Parameters<typeof trpc.projects.reorder.useMutation>[0],
+) {
+	const utils = trpc.useUtils();
+
+	return trpc.projects.reorder.useMutation({
+		...options,
+		onSuccess: async (...args) => {
+			await utils.workspaces.getAllGrouped.invalidate();
+			await utils.projects.getRecents.invalidate();
+			await options?.onSuccess?.(...args);
+		},
+	});
+}

apps/desktop/src/renderer/screens/main/components/WorkspaceSidebar/ProjectSection/ProjectSection.tsx

@@ -1,9 +1,16 @@
+import { toast } from "@superset/ui/sonner";
+import { cn } from "@superset/ui/utils";
 import { AnimatePresence, motion } from "framer-motion";
+import { useDrag, useDrop } from "react-dnd";
+import { trpc } from "renderer/lib/trpc";
+import { useReorderProjects } from "renderer/react-query/projects";
 import { useWorkspaceSidebarStore } from "renderer/stores";
 import { useOpenNewWorkspaceModal } from "renderer/stores/new-workspace-modal";
 import { WorkspaceListItem } from "../WorkspaceListItem";
 import { ProjectHeader } from "./ProjectHeader";
 
+const PROJECT_TYPE = "PROJECT";
+
 interface Workspace {
 	id: string;
 	projectId: string;
@@ -25,6 +32,8 @@ interface ProjectSectionProps {
 	activeWorkspaceId: string | null;
 	/** Base index for keyboard shortcuts (0-based) */
 	shortcutBaseIndex: number;
+	/** Index for drag-and-drop reordering */
+	index: number;
 	/** Whether the sidebar is in collapsed mode */
 	isCollapsed?: boolean;
 }
@@ -38,22 +47,79 @@ export function ProjectSection({
 	workspaces,
 	activeWorkspaceId,
 	shortcutBaseIndex,
+	index,
 	isCollapsed: isSidebarCollapsed = false,
 }: ProjectSectionProps) {
 	const { isProjectCollapsed, toggleProjectCollapsed } =
 		useWorkspaceSidebarStore();
 	const openModal = useOpenNewWorkspaceModal();
+	const reorderProjects = useReorderProjects();
+	const utils = trpc.useUtils();
 
 	const isCollapsed = isProjectCollapsed(projectId);
 
 	const handleNewWorkspace = () => {
 		openModal(projectId);
 	};
 
-	// When sidebar is collapsed, show compact view with just thumbnail and workspace icons
+	const [{ isDragging }, drag] = useDrag(
+		() => ({
+			type: PROJECT_TYPE,
+			item: { projectId, index, originalIndex: index },
+			collect: (monitor) => ({
+				isDragging: monitor.isDragging(),
+			}),
+		}),
+		[projectId, index],
+	);
+
+	const [, drop] = useDrop({
+		accept: PROJECT_TYPE,
+		hover: (item: {
+			projectId: string;
+			index: number;
+			originalIndex: number;
+		}) => {
+			if (item.index !== index) {
+				utils.workspaces.getAllGrouped.setData(undefined, (oldData) => {
+					if (!oldData) return oldData;
+					const newGroups = [...oldData];
+					const [moved] = newGroups.splice(item.index, 1);
+					newGroups.splice(index, 0, moved);
+					return newGroups;
+				});
+				item.index = index;
+			}
+		},
+		drop: (item: {
+			projectId: string;
+			index: number;
+			originalIndex: number;
+		}) => {
+			if (item.originalIndex !== item.index) {
+				reorderProjects.mutate(
+					{ fromIndex: item.originalIndex, toIndex: item.index },
+					{
+						onError: (error) =>
+							toast.error(`Failed to reorder: ${error.message}`),
+					},
+				);
+			}
+		},
+	});
+
 	if (isSidebarCollapsed) {
 		return (
-			<div className="flex flex-col items-center py-2 border-b border-border last:border-b-0">
+			<div
+				ref={(node) => {
+					drag(drop(node));
+				}}
+				className={cn(
+					"flex flex-col items-center py-2 border-b border-border last:border-b-0",
+					isDragging && "opacity-30",
+				)}
+				style={{ cursor: isDragging ? "grabbing" : "grab" }}
+			>
 				<ProjectHeader
 					projectId={projectId}
 					projectName={projectName}
@@ -76,7 +142,7 @@ export function ProjectSection({
 							className="overflow-hidden w-full"
 						>
 							<div className="flex flex-col items-center gap-1 pt-1">
-								{workspaces.map((workspace, index) => (
+								{workspaces.map((workspace, wsIndex) => (
 									<WorkspaceListItem
 										key={workspace.id}
 										id={workspace.id}
@@ -87,8 +153,8 @@ export function ProjectSection({
 										type={workspace.type}
 										isActive={workspace.id === activeWorkspaceId}
 										isUnread={workspace.isUnread}
-										index={index}
-										shortcutIndex={shortcutBaseIndex + index}
+										index={wsIndex}
+										shortcutIndex={shortcutBaseIndex + wsIndex}
 										isCollapsed={isSidebarCollapsed}
 									/>
 								))}
@@ -101,7 +167,16 @@ export function ProjectSection({
 	}
 
 	return (
-		<div className="border-b border-border last:border-b-0">
+		<div
+			ref={(node) => {
+				drag(drop(node));
+			}}
+			className={cn(
+				"border-b border-border last:border-b-0",
+				isDragging && "opacity-30",
+			)}
+			style={{ cursor: isDragging ? "grabbing" : "grab" }}
+		>
 			<ProjectHeader
 				projectId={projectId}
 				projectName={projectName}
@@ -125,7 +200,7 @@ export function ProjectSection({
 						className="overflow-hidden"
 					>
 						<div className="pb-1">
-							{workspaces.map((workspace, index) => (
+							{workspaces.map((workspace, wsIndex) => (
 								<WorkspaceListItem
 									key={workspace.id}
 									id={workspace.id}
@@ -136,8 +211,8 @@ export function ProjectSection({
 									type={workspace.type}
 									isActive={workspace.id === activeWorkspaceId}
 									isUnread={workspace.isUnread}
-									index={index}
-									shortcutIndex={shortcutBaseIndex + index}
+									index={wsIndex}
+									shortcutIndex={shortcutBaseIndex + wsIndex}
 								/>
 							))}
 						</div>

apps/desktop/src/renderer/screens/main/components/WorkspaceSidebar/WorkspaceSidebar.tsx

@@ -43,6 +43,7 @@ export function WorkspaceSidebar({
 						workspaces={group.workspaces}
 						activeWorkspaceId={activeWorkspaceId}
 						shortcutBaseIndex={projectShortcutIndices[index]}
+						index={index}
 						isCollapsed={isCollapsed}
 					/>
 				))}