feat(desktop): drag-and-drop reordering for v2 sidebar

apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/DashboardSidebar/DashboardSidebar.tsx

@@ -1,34 +1,188 @@
+import {
+	closestCenter,
+	DndContext,
+	type DragEndEvent,
+	DragOverlay,
+	KeyboardSensor,
+	MeasuringStrategy,
+	MouseSensor,
+	TouchSensor,
+	useSensor,
+	useSensors,
+} from "@dnd-kit/core";
+import {
+	arrayMove,
+	SortableContext,
+	sortableKeyboardCoordinates,
+	useSortable,
+	verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { createPortal } from "react-dom";
+import { useDashboardSidebarState } from "renderer/routes/_authenticated/hooks/useDashboardSidebarState";
 import { DashboardSidebarHeader } from "./components/DashboardSidebarHeader";
 import { DashboardSidebarProjectSection } from "./components/DashboardSidebarProjectSection";
 import { useDashboardSidebarData } from "./hooks/useDashboardSidebarData";
 import { useDashboardSidebarShortcuts } from "./hooks/useDashboardSidebarShortcuts";
+import type { DashboardSidebarProject } from "./types";
 
 interface DashboardSidebarProps {
 	isCollapsed?: boolean;
 }
 
+function SortableProjectWrapper({
+	project,
+	isCollapsed,
+	isDraggingProject,
+	workspaceShortcutLabels,
+	onWorkspaceHover,
+	onToggleCollapse,
+}: {
+	project: DashboardSidebarProject;
+	isCollapsed: boolean;
+	isDraggingProject: boolean;
+	workspaceShortcutLabels: Map<string, string>;
+	onWorkspaceHover: (workspaceId: string) => void | Promise<void>;
+	onToggleCollapse: (projectId: string) => void;
+}) {
+	const {
+		attributes,
+		listeners,
+		setNodeRef,
+		transform,
+		transition,
+		isDragging,
+	} = useSortable({ id: project.id });
+
+	return (
+		<div
+			ref={setNodeRef}
+			style={{
+				transform: CSS.Translate.toString(transform),
+				transition,
+				opacity: isDragging ? 0.5 : undefined,
+			}}
+		>
+			<DashboardSidebarProjectSection
+				project={project}
+				isSidebarCollapsed={isCollapsed}
+				isDraggingProject={isDraggingProject}
+				workspaceShortcutLabels={workspaceShortcutLabels}
+				onWorkspaceHover={onWorkspaceHover}
+				onToggleCollapse={onToggleCollapse}
+				dragHandleListeners={listeners}
+				dragHandleAttributes={attributes}
+			/>
+		</div>
+	);
+}
+
 export function DashboardSidebar({
 	isCollapsed = false,
 }: DashboardSidebarProps) {
 	const { groups, refreshWorkspacePullRequest, toggleProjectCollapsed } =
 		useDashboardSidebarData();
 	const workspaceShortcutLabels = useDashboardSidebarShortcuts(groups);
+	const { reorderProjects } = useDashboardSidebarState();
+
+	const sensors = useSensors(
+		useSensor(MouseSensor, { activationConstraint: { distance: 8 } }),
+		useSensor(TouchSensor, {
+			activationConstraint: { delay: 200, tolerance: 5 },
+		}),
+		useSensor(KeyboardSensor, {
+			coordinateGetter: sortableKeyboardCoordinates,
+		}),
+	);
+
+	const [activeProject, setActiveProject] =
+		useState<DashboardSidebarProject | null>(null);
+
+	// Local project order — syncs from groups, updated on drag end
+	const [projectOrder, setProjectOrder] = useState(() =>
+		groups.map((p) => p.id),
+	);
+	useEffect(() => {
+		setProjectOrder(groups.map((p) => p.id));
+	}, [groups]);
+
+	const orderedGroups = useMemo(() => {
+		const byId = new Map(groups.map((g) => [g.id, g]));
+		return projectOrder
+			.map((id) => byId.get(id))
+			.filter((g): g is DashboardSidebarProject => g != null);
+	}, [groups, projectOrder]);
+
+	const handleDragEnd = useCallback(
+		({ active, over }: DragEndEvent) => {
+			if (over && active.id !== over.id) {
+				const oldIndex = projectOrder.indexOf(String(active.id));
+				const newIndex = projectOrder.indexOf(String(over.id));
+				if (oldIndex !== -1 && newIndex !== -1) {
+					const reordered = arrayMove(projectOrder, oldIndex, newIndex);
+					setProjectOrder(reordered);
+					reorderProjects(reordered);
+				}
+			}
+			setActiveProject(null);
+		},
+		[projectOrder, reorderProjects],
+	);
 
 	return (
 		<div className="flex h-full flex-col border-r border-border bg-muted/45 dark:bg-muted/35">
 			<DashboardSidebarHeader isCollapsed={isCollapsed} />
 
 			<div className="flex-1 overflow-y-auto hide-scrollbar">
-				{groups.map((project) => (
-					<DashboardSidebarProjectSection
-						key={project.id}
-						project={project}
-						isSidebarCollapsed={isCollapsed}
-						workspaceShortcutLabels={workspaceShortcutLabels}
-						onWorkspaceHover={refreshWorkspacePullRequest}
-						onToggleCollapse={toggleProjectCollapsed}
-					/>
-				))}
+				<DndContext
+					sensors={sensors}
+					collisionDetection={closestCenter}
+					measuring={{
+						droppable: { strategy: MeasuringStrategy.Always },
+					}}
+					onDragStart={({ active }) => {
+						const project = groups.find((p) => p.id === active.id);
+						setActiveProject(project ?? null);
+					}}
+					onDragEnd={handleDragEnd}
+					onDragCancel={() => setActiveProject(null)}
+				>
+					<SortableContext
+						items={projectOrder}
+						strategy={verticalListSortingStrategy}
+					>
+						{orderedGroups.map((project) => (
+							<SortableProjectWrapper
+								key={project.id}
+								project={project}
+								isCollapsed={isCollapsed}
+								isDraggingProject={activeProject != null}
+								workspaceShortcutLabels={workspaceShortcutLabels}
+								onWorkspaceHover={refreshWorkspacePullRequest}
+								onToggleCollapse={toggleProjectCollapsed}
+							/>
+						))}
+					</SortableContext>
+
+					{createPortal(
+						<DragOverlay dropAnimation={null}>
+							{activeProject && (
+								<div className="bg-background shadow-lg border-b border-border">
+									<DashboardSidebarProjectSection
+										project={activeProject}
+										isSidebarCollapsed={isCollapsed}
+										isDraggingProject
+										workspaceShortcutLabels={workspaceShortcutLabels}
+										onWorkspaceHover={() => {}}
+										onToggleCollapse={() => {}}
+									/>
+								</div>
+							)}
+						</DragOverlay>,
+						document.body,
+					)}
+				</DndContext>
 			</div>
 		</div>
 	);

apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/DashboardSidebar/components/DashboardSidebarProjectSection/DashboardSidebarProjectSection.tsx

@@ -1,10 +1,12 @@
+import type {
+	DraggableAttributes,
+	DraggableSyntheticListeners,
+} from "@dnd-kit/core";
 import { cn } from "@superset/ui/utils";
+import { AnimatePresence, motion } from "framer-motion";
 import { useMemo } from "react";
 import type { DashboardSidebarProject } from "../../types";
-import {
-	getProjectChildrenSections,
-	getProjectChildrenWorkspaces,
-} from "../../utils/projectChildren";
+import { getProjectChildrenWorkspaces } from "../../utils/projectChildren";
 import { DashboardSidebarCollapsedProjectContent } from "./components/DashboardSidebarCollapsedProjectContent";
 import { DashboardSidebarExpandedProjectContent } from "./components/DashboardSidebarExpandedProjectContent";
 import { DashboardSidebarProjectContextMenu } from "./components/DashboardSidebarProjectContextMenu";
@@ -14,23 +16,24 @@ import { useDashboardSidebarProjectSectionActions } from "./hooks/useDashboardSi
 interface DashboardSidebarProjectSectionProps {
 	project: DashboardSidebarProject;
 	isSidebarCollapsed?: boolean;
+	isDraggingProject?: boolean;
 	workspaceShortcutLabels: Map<string, string>;
 	onWorkspaceHover: (workspaceId: string) => void | Promise<void>;
 	onToggleCollapse: (projectId: string) => void;
+	dragHandleListeners?: DraggableSyntheticListeners;
+	dragHandleAttributes?: DraggableAttributes;
 }
 
 export function DashboardSidebarProjectSection({
 	project,
 	isSidebarCollapsed = false,
+	isDraggingProject = false,
 	workspaceShortcutLabels,
 	onWorkspaceHover,
 	onToggleCollapse,
+	dragHandleListeners,
+	dragHandleAttributes,
 }: DashboardSidebarProjectSectionProps) {
-	const allSections = useMemo(
-		() => getProjectChildrenSections(project.children),
-		[project.children],
-	);
-
 	const flattenedCollapsedWorkspaces = useMemo(
 		() => getProjectChildrenWorkspaces(project.children),
 		[project.children],
@@ -104,19 +107,33 @@ export function DashboardSidebarProjectSection({
 					onStartRename={startRename}
 					onToggleCollapse={() => onToggleCollapse(project.id)}
 					onNewWorkspace={handleNewWorkspace}
+					{...(dragHandleAttributes ?? {})}
+					{...(dragHandleListeners ?? {})}
 				/>
 			</DashboardSidebarProjectContextMenu>
 
-			<DashboardSidebarExpandedProjectContent
-				isCollapsed={project.isCollapsed}
-				projectChildren={project.children}
-				allSections={allSections}
-				workspaceShortcutLabels={workspaceShortcutLabels}
-				onWorkspaceHover={onWorkspaceHover}
-				onDeleteSection={deleteSection}
-				onRenameSection={renameSection}
-				onToggleSectionCollapse={toggleSectionCollapsed}
-			/>
+			<AnimatePresence initial={false}>
+				{!isDraggingProject && (
+					<motion.div
+						initial={{ height: 0, opacity: 0 }}
+						animate={{ height: "auto", opacity: 1 }}
+						exit={{ height: 0, opacity: 0 }}
+						transition={{ duration: 0.15, ease: "easeOut" }}
+						className="overflow-hidden"
+					>
+						<DashboardSidebarExpandedProjectContent
+							projectId={project.id}
+							isCollapsed={project.isCollapsed}
+							projectChildren={project.children}
+							workspaceShortcutLabels={workspaceShortcutLabels}
+							onWorkspaceHover={onWorkspaceHover}
+							onDeleteSection={deleteSection}
+							onRenameSection={renameSection}
+							onToggleSectionCollapse={toggleSectionCollapsed}
+						/>
+					</motion.div>
+				)}
+			</AnimatePresence>
 		</div>
 	);
 }