feat(ui): drag-to-reorder sidebar projects with persistent order

Add drag-and-drop reordering to sidebar project list using dnd-kit, persisted per-user via localStorage. Use consistent project order in issue properties, new issue dialog, and issue detail mention options. Move projects section below Work section in sidebar. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-02 14:20:49 -06:00
parent cabf09e7b1
commit f54f30cb90
7 changed files with 337 additions and 48 deletions
--- a/ui/src/components/IssueProperties.tsx
+++ b/ui/src/components/IssueProperties.tsx
@@ -8,6 +8,7 @@ import { issuesApi } from "../api/issues";
 import { projectsApi } from "../api/projects";
 import { useCompany } from "../context/CompanyContext";
 import { queryKeys } from "../lib/queryKeys";
+import { useProjectOrder } from "../hooks/useProjectOrder";
 import { StatusIcon } from "./StatusIcon";
 import { PriorityIcon } from "./PriorityIcon";
 import { Identity } from "./Identity";
@@ -125,6 +126,11 @@ export function IssueProperties({ issue, onUpdate, inline }: IssuePropertiesProp
    queryFn: () => projectsApi.list(companyId!),
    enabled: !!companyId,
  });
+  const { orderedProjects } = useProjectOrder({
+    projects: projects ?? [],
+    companyId,
+    userId: currentUserId,
+  });

  const { data: labels } = useQuery({
    queryKey: queryKeys.issues.labels(companyId!),
@@ -165,8 +171,8 @@ export function IssueProperties({ issue, onUpdate, inline }: IssuePropertiesProp
  };

  const projectName = (id: string | null) => {
-    if (!id || !projects) return id?.slice(0, 8) ?? "None";
-    const project = projects.find((p) => p.id === id);
+    if (!id) return id?.slice(0, 8) ?? "None";
+    const project = orderedProjects.find((p) => p.id === id);
    return project?.name ?? id.slice(0, 8);
  };

@@ -359,7 +365,7 @@ export function IssueProperties({ issue, onUpdate, inline }: IssuePropertiesProp
    <>
      <span
        className="shrink-0 h-3 w-3 rounded-sm"
-        style={{ backgroundColor: projects?.find((p) => p.id === issue.projectId)?.color ?? "#6366f1" }}
+        style={{ backgroundColor: orderedProjects.find((p) => p.id === issue.projectId)?.color ?? "#6366f1" }}
      />
      <span className="text-sm truncate">{projectName(issue.projectId)}</span>
    </>
@@ -389,7 +395,7 @@ export function IssueProperties({ issue, onUpdate, inline }: IssuePropertiesProp
        >
          No project
        </button>
-        {(projects ?? [])
+        {orderedProjects
          .filter((p) => {
            if (!projectSearch.trim()) return true;
            const q = projectSearch.toLowerCase();
--- a/ui/src/components/NewIssueDialog.tsx
+++ b/ui/src/components/NewIssueDialog.tsx
@@ -6,8 +6,10 @@ import { useToast } from "../context/ToastContext";
 import { issuesApi } from "../api/issues";
 import { projectsApi } from "../api/projects";
 import { agentsApi } from "../api/agents";
+import { authApi } from "../api/auth";
 import { assetsApi } from "../api/assets";
 import { queryKeys } from "../lib/queryKeys";
+import { useProjectOrder } from "../hooks/useProjectOrder";
 import {
  Dialog,
  DialogContent,
@@ -195,6 +197,16 @@ export function NewIssueDialog() {
    queryFn: () => projectsApi.list(effectiveCompanyId!),
    enabled: !!effectiveCompanyId && newIssueOpen,
  });
+  const { data: session } = useQuery({
+    queryKey: queryKeys.auth.session,
+    queryFn: () => authApi.getSession(),
+  });
+  const currentUserId = session?.user?.id ?? session?.session?.userId ?? null;
+  const { orderedProjects } = useProjectOrder({
+    projects: projects ?? [],
+    companyId: effectiveCompanyId,
+    userId: currentUserId,
+  });

  const assigneeAdapterType = (agents ?? []).find((agent) => agent.id === assigneeId)?.adapterType ?? null;
  const supportsAssigneeOverrides = Boolean(
@@ -212,8 +224,7 @@ export function NewIssueDialog() {
        kind: "agent",
      });
    }
-    const sortedProjects = [...(projects ?? [])].sort((a, b) => a.name.localeCompare(b.name));
-    for (const project of sortedProjects) {
+    for (const project of orderedProjects) {
      options.push({
        id: `project:${project.id}`,
        name: project.name,
@@ -223,7 +234,7 @@ export function NewIssueDialog() {
      });
    }
    return options;
-  }, [agents, projects]);
+  }, [agents, orderedProjects]);

  const { data: assigneeAdapterModels } = useQuery({
    queryKey: ["adapter-models", assigneeAdapterType],
@@ -434,7 +445,7 @@ export function NewIssueDialog() {
  const currentStatus = statuses.find((s) => s.value === status) ?? statuses[1]!;
  const currentPriority = priorities.find((p) => p.value === priority);
  const currentAssignee = (agents ?? []).find((a) => a.id === assigneeId);
-  const currentProject = (projects ?? []).find((p) => p.id === projectId);
+  const currentProject = orderedProjects.find((project) => project.id === projectId);
  const assigneeOptionsTitle =
    assigneeAdapterType === "claude_local"
      ? "Claude options"
@@ -458,12 +469,12 @@ export function NewIssueDialog() {
  );
  const projectOptions = useMemo<InlineEntityOption[]>(
    () =>
-      (projects ?? []).map((project) => ({
+      orderedProjects.map((project) => ({
        id: project.id,
        label: project.name,
        searchText: project.description ?? "",
      })),
-    [projects],
+    [orderedProjects],
  );
  const modelOverrideOptions = useMemo<InlineEntityOption[]>(
    () =>
@@ -663,7 +674,7 @@ export function NewIssueDialog() {
                }
                renderOption={(option) => {
                  if (!option.id) return <span className="truncate">{option.label}</span>;
-                  const project = (projects ?? []).find((item) => item.id === option.id);
+                  const project = orderedProjects.find((item) => item.id === option.id);
                  return (
                    <>
                      <span
--- a/ui/src/components/Sidebar.tsx
+++ b/ui/src/components/Sidebar.tsx
@@ -88,13 +88,13 @@ export function Sidebar() {
            />
          </div>

-          <SidebarProjects />
-
          <SidebarSection label="Work">
            <SidebarNavItem to="/issues" label="Issues" icon={CircleDot} />
            <SidebarNavItem to="/goals" label="Goals" icon={Target} />
          </SidebarSection>

+          <SidebarProjects />
+
          <SidebarAgents />

          <SidebarSection label="Company">
--- a/ui/src/components/SidebarProjects.tsx
+++ b/ui/src/components/SidebarProjects.tsx
@@ -1,13 +1,25 @@
-import { useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { NavLink, useLocation } from "react-router-dom";
 import { useQuery } from "@tanstack/react-query";
 import { ChevronRight, Plus } from "lucide-react";
+import {
+  DndContext,
+  PointerSensor,
+  closestCenter,
+  type DragEndEvent,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import { SortableContext, arrayMove, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
 import { useCompany } from "../context/CompanyContext";
 import { useDialog } from "../context/DialogContext";
 import { useSidebar } from "../context/SidebarContext";
+import { authApi } from "../api/auth";
 import { projectsApi } from "../api/projects";
 import { queryKeys } from "../lib/queryKeys";
 import { cn } from "../lib/utils";
+import { useProjectOrder } from "../hooks/useProjectOrder";
 import {
  Collapsible,
  CollapsibleContent,
@@ -15,6 +27,60 @@ import {
 } from "@/components/ui/collapsible";
 import type { Project } from "@paperclip/shared";

+function SortableProjectItem({
+  activeProjectId,
+  isMobile,
+  project,
+  setSidebarOpen,
+}: {
+  activeProjectId: string | null;
+  isMobile: boolean;
+  project: Project;
+  setSidebarOpen: (open: boolean) => void;
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: project.id });
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={{
+        transform: CSS.Transform.toString(transform),
+        transition,
+        zIndex: isDragging ? 10 : undefined,
+      }}
+      className={cn(isDragging && "opacity-80")}
+      {...attributes}
+      {...listeners}
+    >
+      <NavLink
+        to={`/projects/${project.id}/issues`}
+        onClick={() => {
+          if (isMobile) setSidebarOpen(false);
+        }}
+        className={cn(
+          "flex items-center gap-2.5 px-3 py-1.5 text-[13px] font-medium transition-colors",
+          activeProjectId === project.id
+            ? "bg-accent text-foreground"
+            : "text-foreground/80 hover:bg-accent/50 hover:text-foreground",
+        )}
+      >
+        <span
+          className="shrink-0 h-3.5 w-3.5 rounded-sm"
+          style={{ backgroundColor: project.color ?? "#6366f1" }}
+        />
+        <span className="flex-1 truncate">{project.name}</span>
+      </NavLink>
+    </div>
+  );
+}
+
 export function SidebarProjects() {
  const [open, setOpen] = useState(true);
  const { selectedCompanyId } = useCompany();
@@ -27,15 +93,45 @@ export function SidebarProjects() {
    queryFn: () => projectsApi.list(selectedCompanyId!),
    enabled: !!selectedCompanyId,
  });
+  const { data: session } = useQuery({
+    queryKey: queryKeys.auth.session,
+    queryFn: () => authApi.getSession(),
+  });

-  // Filter out archived projects
-  const visibleProjects = (projects ?? []).filter(
-    (p: Project) => !p.archivedAt
+  const currentUserId = session?.user?.id ?? session?.session?.userId ?? null;
+
+  const visibleProjects = useMemo(
+    () => (projects ?? []).filter((project: Project) => !project.archivedAt),
+    [projects],
  );
+  const { orderedProjects, persistOrder } = useProjectOrder({
+    projects: visibleProjects,
+    companyId: selectedCompanyId,
+    userId: currentUserId,
+  });

-  // Extract current projectId from URL
  const projectMatch = location.pathname.match(/^\/projects\/([^/]+)/);
  const activeProjectId = projectMatch?.[1] ?? null;
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: { distance: 8 },
+    }),
+  );
+
+  const handleDragEnd = useCallback(
+    (event: DragEndEvent) => {
+      const { active, over } = event;
+      if (!over || active.id === over.id) return;
+
+      const ids = orderedProjects.map((project) => project.id);
+      const oldIndex = ids.indexOf(active.id as string);
+      const newIndex = ids.indexOf(over.id as string);
+      if (oldIndex === -1 || newIndex === -1) return;
+
+      persistOrder(arrayMove(ids, oldIndex, newIndex));
+    },
+    [orderedProjects, persistOrder],
+  );

  return (
    <Collapsible open={open} onOpenChange={setOpen}>
@@ -66,31 +162,28 @@ export function SidebarProjects() {
      </div>

      <CollapsibleContent>
-        <div className="flex flex-col gap-0.5 mt-0.5">
-          {visibleProjects.map((project: Project) => (
-            <NavLink
-              key={project.id}
-              to={`/projects/${project.id}/issues`}
-              onClick={() => {
-                if (isMobile) setSidebarOpen(false);
-              }}
-              className={cn(
-                "flex items-center gap-2.5 px-3 py-1.5 text-[13px] font-medium transition-colors",
-                activeProjectId === project.id
-                  ? "bg-accent text-foreground"
-                  : "text-foreground/80 hover:bg-accent/50 hover:text-foreground"
-              )}
-            >
-              <span
-                className="shrink-0 h-3.5 w-3.5 rounded-sm"
-                style={{
-                  backgroundColor: project.color ?? "#6366f1",
-                }}
-              />
-              <span className="flex-1 truncate">{project.name}</span>
-            </NavLink>
-          ))}
-        </div>
+        <DndContext
+          sensors={sensors}
+          collisionDetection={closestCenter}
+          onDragEnd={handleDragEnd}
+        >
+          <SortableContext
+            items={orderedProjects.map((project) => project.id)}
+            strategy={verticalListSortingStrategy}
+          >
+            <div className="flex flex-col gap-0.5 mt-0.5">
+              {orderedProjects.map((project: Project) => (
+                <SortableProjectItem
+                  key={project.id}
+                  activeProjectId={activeProjectId}
+                  isMobile={isMobile}
+                  project={project}
+                  setSidebarOpen={setSidebarOpen}
+                />
+              ))}
+            </div>
+          </SortableContext>
+        </DndContext>
      </CollapsibleContent>
    </Collapsible>
  );
--- a/ui/src/hooks/useProjectOrder.ts
+++ b/ui/src/hooks/useProjectOrder.ts
@@ -0,0 +1,105 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import type { Project } from "@paperclip/shared";
+import {
+  getProjectOrderStorageKey,
+  PROJECT_ORDER_UPDATED_EVENT,
+  readProjectOrder,
+  sortProjectsByStoredOrder,
+  writeProjectOrder,
+} from "../lib/project-order";
+
+type UseProjectOrderParams = {
+  projects: Project[];
+  companyId: string | null | undefined;
+  userId: string | null | undefined;
+};
+
+type ProjectOrderUpdatedDetail = {
+  storageKey: string;
+  orderedIds: string[];
+};
+
+function areEqual(a: string[], b: string[]) {
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i += 1) {
+    if (a[i] !== b[i]) return false;
+  }
+  return true;
+}
+
+function buildOrderIds(projects: Project[], orderedIds: string[]) {
+  return sortProjectsByStoredOrder(projects, orderedIds).map((project) => project.id);
+}
+
+export function useProjectOrder({ projects, companyId, userId }: UseProjectOrderParams) {
+  const storageKey = useMemo(() => {
+    if (!companyId) return null;
+    return getProjectOrderStorageKey(companyId, userId);
+  }, [companyId, userId]);
+
+  const [orderedIds, setOrderedIds] = useState<string[]>(() => {
+    if (!storageKey) return projects.map((project) => project.id);
+    return buildOrderIds(projects, readProjectOrder(storageKey));
+  });
+
+  useEffect(() => {
+    const nextIds = storageKey
+      ? buildOrderIds(projects, readProjectOrder(storageKey))
+      : projects.map((project) => project.id);
+    setOrderedIds((current) => (areEqual(current, nextIds) ? current : nextIds));
+  }, [projects, storageKey]);
+
+  useEffect(() => {
+    if (!storageKey) return;
+
+    const syncFromIds = (ids: string[]) => {
+      const nextIds = buildOrderIds(projects, ids);
+      setOrderedIds((current) => (areEqual(current, nextIds) ? current : nextIds));
+    };
+
+    const onStorage = (event: StorageEvent) => {
+      if (event.key !== storageKey) return;
+      syncFromIds(readProjectOrder(storageKey));
+    };
+    const onCustomEvent = (event: Event) => {
+      const detail = (event as CustomEvent<ProjectOrderUpdatedDetail>).detail;
+      if (!detail || detail.storageKey !== storageKey) return;
+      syncFromIds(detail.orderedIds);
+    };
+
+    window.addEventListener("storage", onStorage);
+    window.addEventListener(PROJECT_ORDER_UPDATED_EVENT, onCustomEvent);
+    return () => {
+      window.removeEventListener("storage", onStorage);
+      window.removeEventListener(PROJECT_ORDER_UPDATED_EVENT, onCustomEvent);
+    };
+  }, [projects, storageKey]);
+
+  const orderedProjects = useMemo(
+    () => sortProjectsByStoredOrder(projects, orderedIds),
+    [projects, orderedIds],
+  );
+
+  const persistOrder = useCallback(
+    (ids: string[]) => {
+      const idSet = new Set(projects.map((project) => project.id));
+      const filtered = ids.filter((id) => idSet.has(id));
+      for (const project of projects) {
+        if (!filtered.includes(project.id)) filtered.push(project.id);
+      }
+
+      setOrderedIds((current) => (areEqual(current, filtered) ? current : filtered));
+      if (storageKey) {
+        writeProjectOrder(storageKey, filtered);
+      }
+    },
+    [projects, storageKey],
+  );
+
+  return {
+    orderedProjects,
+    orderedIds,
+    persistOrder,
+  };
+}
+
--- a/ui/src/lib/project-order.ts
+++ b/ui/src/lib/project-order.ts
@@ -0,0 +1,70 @@
+import type { Project } from "@paperclip/shared";
+
+export const PROJECT_ORDER_UPDATED_EVENT = "paperclip:project-order-updated";
+const PROJECT_ORDER_STORAGE_PREFIX = "paperclip.projectOrder";
+const ANONYMOUS_USER_ID = "anonymous";
+
+type ProjectOrderUpdatedDetail = {
+  storageKey: string;
+  orderedIds: string[];
+};
+
+function normalizeIdList(value: unknown): string[] {
+  if (!Array.isArray(value)) return [];
+  return value.filter((item): item is string => typeof item === "string" && item.length > 0);
+}
+
+function resolveUserId(userId: string | null | undefined): string {
+  if (!userId) return ANONYMOUS_USER_ID;
+  const trimmed = userId.trim();
+  return trimmed.length > 0 ? trimmed : ANONYMOUS_USER_ID;
+}
+
+export function getProjectOrderStorageKey(companyId: string, userId: string | null | undefined): string {
+  return `${PROJECT_ORDER_STORAGE_PREFIX}:${companyId}:${resolveUserId(userId)}`;
+}
+
+export function readProjectOrder(storageKey: string): string[] {
+  try {
+    const raw = localStorage.getItem(storageKey);
+    if (!raw) return [];
+    return normalizeIdList(JSON.parse(raw));
+  } catch {
+    return [];
+  }
+}
+
+export function writeProjectOrder(storageKey: string, orderedIds: string[]) {
+  const normalized = normalizeIdList(orderedIds);
+  try {
+    localStorage.setItem(storageKey, JSON.stringify(normalized));
+  } catch {
+    // Ignore storage write failures in restricted browser contexts.
+  }
+  if (typeof window !== "undefined") {
+    window.dispatchEvent(
+      new CustomEvent<ProjectOrderUpdatedDetail>(PROJECT_ORDER_UPDATED_EVENT, {
+        detail: { storageKey, orderedIds: normalized },
+      }),
+    );
+  }
+}
+
+export function sortProjectsByStoredOrder(projects: Project[], orderedIds: string[]): Project[] {
+  if (projects.length === 0) return [];
+  if (orderedIds.length === 0) return projects;
+
+  const byId = new Map(projects.map((project) => [project.id, project]));
+  const sorted: Project[] = [];
+
+  for (const id of orderedIds) {
+    const project = byId.get(id);
+    if (!project) continue;
+    sorted.push(project);
+    byId.delete(id);
+  }
+  for (const project of byId.values()) {
+    sorted.push(project);
+  }
+  return sorted;
+}
--- a/ui/src/pages/IssueDetail.tsx
+++ b/ui/src/pages/IssueDetail.tsx
@@ -12,6 +12,7 @@ import { useToast } from "../context/ToastContext";
 import { usePanel } from "../context/PanelContext";
 import { useBreadcrumbs } from "../context/BreadcrumbContext";
 import { queryKeys } from "../lib/queryKeys";
+import { useProjectOrder } from "../hooks/useProjectOrder";
 import { relativeTime, cn, formatTokens } from "../lib/utils";
 import { InlineEditor } from "../components/InlineEditor";
 import { CommentThread } from "../components/CommentThread";
@@ -228,6 +229,12 @@ export function IssueDetail() {
    queryFn: () => projectsApi.list(selectedCompanyId!),
    enabled: !!selectedCompanyId,
  });
+  const currentUserId = session?.user?.id ?? session?.session?.userId ?? null;
+  const { orderedProjects } = useProjectOrder({
+    projects: projects ?? [],
+    companyId: selectedCompanyId,
+    userId: currentUserId,
+  });

  const agentMap = useMemo(() => {
    const map = new Map<string, Agent>();
@@ -247,8 +254,7 @@ export function IssueDetail() {
        kind: "agent",
      });
    }
-    const sortedProjects = [...(projects ?? [])].sort((a, b) => a.name.localeCompare(b.name));
-    for (const project of sortedProjects) {
+    for (const project of orderedProjects) {
      options.push({
        id: `project:${project.id}`,
        name: project.name,
@@ -258,7 +264,7 @@ export function IssueDetail() {
      });
    }
    return options;
-  }, [agents, projects]);
+  }, [agents, orderedProjects]);

  const childIssues = useMemo(() => {
    if (!allIssues || !issue) return [];
@@ -267,8 +273,6 @@ export function IssueDetail() {
      .sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime());
  }, [allIssues, issue]);

-  const currentUserId = session?.user?.id ?? session?.session?.userId ?? null;
-
  const canReassignFromComment = Boolean(
    issue?.assigneeUserId &&
    (issue.assigneeUserId === "local-board" || (currentUserId && issue.assigneeUserId === currentUserId)),