feat(sidebar): reorder projects with press-and-move

Replace the 400ms long-press delay with an 8px movement threshold so
dragging a project title matches ChatGPT-style desktop lists. Clicks
still collapse; an insertion line shows drop placement.

Author: vastsa

apps/desktop/src/components/Sidebar.tsx

@@ -44,10 +44,9 @@ import {
   hasComposerFileDrag,
 } from "../lib/composer-drop";
 import {
-  PROJECT_REORDER_LONG_PRESS_MS,
   projectGroupKeyFromPoint,
   projectReorderInsertAfter,
-  projectReorderMovedTooFar,
+  projectReorderShouldArm,
   sameProjectReorderBucket,
 } from "../lib/sidebar-project-reorder";
 import {
@@ -145,10 +144,10 @@ type ProjectReorderPointerState = {
   lastX: number;
   lastY: number;
   armed: boolean;
-  timer: number | null;
   dropKey: string | null;
   dropTop: number;
   dropHeight: number;
+  insertAfter: boolean;
   onMove: (event: PointerEvent) => void;
   onUp: (event: PointerEvent) => void;
   onCancel: (event: PointerEvent) => void;
@@ -319,7 +318,7 @@ export function Sidebar({
   const [projectsDropActive, setProjectsDropActive] = useState(false);
   const [sidebarResizing, setSidebarResizing] = useState(false);
   const [draggingProjectKey, setDraggingProjectKey] = useState<string | null>(null);
-  const [dropTargetProjectKey, setDropTargetProjectKey] = useState<string | null>(null);
+  const [dropIndicator, setDropIndicator] = useState<{ key: string; insertAfter: boolean } | null>(null);
   const menuTriggerRef = useRef<HTMLButtonElement | null>(null);
   const menuFirstItemRef = useRef<HTMLButtonElement | null>(null);
   const sessionPrefetchTimerRef = useRef<number | undefined>(undefined);
@@ -784,15 +783,14 @@ export function Sidebar({
   const finishProjectReorderPress = useCallback((opts?: { keepClickSuppressed?: boolean }) => {
     const state = projectReorderRef.current;
     if (state) {
-      if (state.timer != null) window.clearTimeout(state.timer);
       window.removeEventListener("pointermove", state.onMove, true);
       window.removeEventListener("pointerup", state.onUp, true);
       window.removeEventListener("pointercancel", state.onCancel, true);
       projectReorderRef.current = null;
     }
     if (!opts?.keepClickSuppressed) suppressProjectTitleClickRef.current = false;
     setDraggingProjectKey(null);
-    setDropTargetProjectKey(null);
+    setDropIndicator(null);
     document.documentElement.removeAttribute("data-project-reordering");
   }, []);
 
@@ -833,7 +831,9 @@ export function Sidebar({
 
   const beginProjectReorderPress = useCallback(
     (event: ReactPointerEvent<HTMLButtonElement>, projectKey: string) => {
-      if (event.button !== 0 || projectReorderRef.current) return;
+      if (event.button !== 0 || event.pointerType === "touch" || projectReorderRef.current) {
+        return;
+      }
 
       const onMove = (moveEvent: PointerEvent) => {
         const current = projectReorderRef.current;
@@ -842,14 +842,17 @@ export function Sidebar({
         current.lastY = moveEvent.clientY;
         if (!current.armed) {
           if (
-            projectReorderMovedTooFar(
+            !projectReorderShouldArm(
               moveEvent.clientX - current.startX,
               moveEvent.clientY - current.startY,
             )
           ) {
-            finishProjectReorderPress();
+            return;
           }
-          return;
+          current.armed = true;
+          suppressProjectTitleClickRef.current = true;
+          document.documentElement.setAttribute("data-project-reordering", "true");
+          setDraggingProjectKey(current.projectKey);
         }
         moveEvent.preventDefault();
         const target = projectGroupKeyFromPoint(moveEvent.clientX, moveEvent.clientY);
@@ -864,13 +867,19 @@ export function Sidebar({
           target.key !== current.projectKey &&
           sameProjectReorderBucket(source.meta, destination.meta)
         ) {
+          const insertAfter = projectReorderInsertAfter(
+            moveEvent.clientY,
+            target.top,
+            target.height,
+          );
           current.dropKey = target.key;
           current.dropTop = target.top;
           current.dropHeight = target.height;
-          setDropTargetProjectKey(target.key);
+          current.insertAfter = insertAfter;
+          setDropIndicator({ key: target.key, insertAfter });
         } else {
           current.dropKey = null;
-          setDropTargetProjectKey(null);
+          setDropIndicator(null);
         }
       };
 
@@ -883,7 +892,7 @@ export function Sidebar({
             reorderProjectEntriesRef.current(
               current.projectKey,
               current.dropKey,
-              projectReorderInsertAfter(current.lastY, current.dropTop, current.dropHeight),
+              current.insertAfter,
             );
           }
           finishProjectReorderPress({ keepClickSuppressed: true });
@@ -906,23 +915,14 @@ export function Sidebar({
         lastX: event.clientX,
         lastY: event.clientY,
         armed: false,
-        timer: null,
         dropKey: null,
         dropTop: 0,
         dropHeight: 0,
+        insertAfter: false,
         onMove,
         onUp,
         onCancel,
       };
-      state.timer = window.setTimeout(() => {
-        const current = projectReorderRef.current;
-        if (current !== state) return;
-        current.armed = true;
-        current.timer = null;
-        suppressProjectTitleClickRef.current = true;
-        document.documentElement.setAttribute("data-project-reordering", "true");
-        setDraggingProjectKey(current.projectKey);
-      }, PROJECT_REORDER_LONG_PRESS_MS);
       projectReorderRef.current = state;
       window.addEventListener("pointermove", onMove, true);
       window.addEventListener("pointerup", onUp, true);
@@ -1663,7 +1663,7 @@ export function Sidebar({
     return (
       <section
         key={entry.key}
-        className={`sidebar-session-group project-group ${entry.active ? "active" : ""} ${entry.meta.archived ? "archived" : ""} ${dropProjectKey === entry.key ? "is-drop-target" : ""} ${draggingProjectKey === entry.key ? "is-dragging" : ""} ${dropTargetProjectKey === entry.key ? "is-drop-target" : ""}`}
+        className={`sidebar-session-group project-group ${entry.active ? "active" : ""} ${entry.meta.archived ? "archived" : ""} ${dropProjectKey === entry.key ? "is-drop-target" : ""} ${draggingProjectKey === entry.key ? "is-dragging" : ""} ${dropIndicator?.key === entry.key ? (dropIndicator.insertAfter ? "is-drop-after" : "is-drop-before") : ""}`}
         aria-labelledby={projectId}
         data-sidebar-project-group={entry.key}
         onDragOver={(event) => {

apps/desktop/src/lib/sidebar-project-reorder.ts

@@ -1,12 +1,10 @@
-/** Long-press delay before a project title starts a reorder drag. */
-export const PROJECT_REORDER_LONG_PRESS_MS = 400;
-/** Pointer travel that cancels a pending long-press (scroll / click jitter). */
-export const PROJECT_REORDER_MOVE_CANCEL_PX = 8;
+/** Pointer travel that arms a title drag (click vs ChatGPT-style press-and-move). */
+export const PROJECT_REORDER_ARM_PX = 8;
 
-export function projectReorderMovedTooFar(
+export function projectReorderShouldArm(
   dx: number,
   dy: number,
-  thresholdPx = PROJECT_REORDER_MOVE_CANCEL_PX,
+  thresholdPx = PROJECT_REORDER_ARM_PX,
 ): boolean {
   return dx * dx + dy * dy > thresholdPx * thresholdPx;
 }

apps/desktop/src/styles/sidebar-threads.css

@@ -66,6 +66,10 @@
   min-width: 0;
 }
 
+.sidebar-session-group.project-group {
+  position: relative;
+}
+
 .sidebar-session-group-header {
   display: flex;
   min-height: 28px;
@@ -78,16 +82,40 @@
   opacity: 0.5;
 }
 
+.sidebar-session-group-title.project-toggle {
+  cursor: grab;
+}
+
 .project-group.is-dragging .sidebar-session-group-title {
   cursor: grabbing;
 }
 
+.project-group.is-drop-before::before,
+.project-group.is-drop-after::after {
+  position: absolute;
+  right: 8px;
+  left: 8px;
+  z-index: 1;
+  height: 2px;
+  border-radius: 1px;
+  background: var(--ds-accent);
+  content: "";
+  pointer-events: none;
+}
+
+.project-group.is-drop-before::before {
+  top: -1px;
+}
+
+.project-group.is-drop-after::after {
+  bottom: -1px;
+}
+
 .project-group.is-drop-target > .sidebar-session-group-header {
   outline: 1px solid var(--ds-accent);
   outline-offset: -1px;
   background: color-mix(in oklab, var(--ds-accent) 12%, transparent);
 }
-
 .sidebar-session-group-title {
   display: flex;
   min-width: 0;

apps/desktop/test/app-store-sidebar.test.mjs

@@ -95,15 +95,17 @@ test("global search stays on the conversation topbar, not the sidebar header", (
   assert.match(topbarSource, /ariaLabel=\{t\("nav\.search"\)\}/);
 });
 
-test("project rows expose long-press title drag and keyboard reorder behavior", () => {
+test("project rows expose press-and-move title drag and keyboard reorder behavior", () => {
   assert.doesNotMatch(sidebarSource, /sidebar-project-drag-handle/);
   assert.doesNotMatch(sidebarSource, /IconGripVertical/);
   assert.doesNotMatch(sidebarSource, /PROJECT_DRAG_MIME/);
-  assert.match(sidebarSource, /PROJECT_REORDER_LONG_PRESS_MS/);
+  assert.doesNotMatch(sidebarSource, /PROJECT_REORDER_LONG_PRESS_MS/);
+  assert.match(sidebarSource, /projectReorderShouldArm/);
   assert.match(sidebarSource, /beginProjectReorderPress\(event, entry\.key\)/);
   assert.match(sidebarSource, /onKeyDown=\{\(event\) => moveProjectWithKeyboard/);
   assert.match(sidebarSource, /aria-grabbed=\{draggingProjectKey === entry.key\}/);
   assert.match(sidebarSource, /className="sidebar-session-group-title project-toggle"/);
+  assert.match(sidebarSource, /is-drop-before/);
   assert.match(storeSource, /reorderProjects: \(paths\) =>/);
   assert.match(storeSource, /projectSort: "manual"/);
   assert.match(storeSource, /persistCurrentSidebar\(get\)/);

apps/desktop/test/sidebar-project-reorder.test.mjs

@@ -1,25 +1,20 @@
 import assert from "node:assert/strict";
 import test from "node:test";
 import {
-  PROJECT_REORDER_LONG_PRESS_MS,
-  PROJECT_REORDER_MOVE_CANCEL_PX,
+  PROJECT_REORDER_ARM_PX,
   projectGroupKeyFromPoint,
   projectReorderInsertAfter,
-  projectReorderMovedTooFar,
+  projectReorderShouldArm,
   sameProjectReorderBucket,
 } from "../src/lib/sidebar-project-reorder.ts";
 
-test("project title reorder uses a long-press delay rather than immediate drag", () => {
-  assert.equal(PROJECT_REORDER_LONG_PRESS_MS, 400);
-  assert.equal(PROJECT_REORDER_MOVE_CANCEL_PX, 8);
-});
-
-test("pending long-press cancels after a small pointer movement", () => {
-  assert.equal(projectReorderMovedTooFar(0, 0), false);
-  assert.equal(projectReorderMovedTooFar(4, 4), false);
-  assert.equal(projectReorderMovedTooFar(8, 0), false);
-  assert.equal(projectReorderMovedTooFar(9, 0), true);
-  assert.equal(projectReorderMovedTooFar(0, 9), true);
+test("project title reorder arms after a small pointer movement, not a time delay", () => {
+  assert.equal(PROJECT_REORDER_ARM_PX, 8);
+  assert.equal(projectReorderShouldArm(0, 0), false);
+  assert.equal(projectReorderShouldArm(4, 4), false);
+  assert.equal(projectReorderShouldArm(8, 0), false);
+  assert.equal(projectReorderShouldArm(9, 0), true);
+  assert.equal(projectReorderShouldArm(0, 9), true);
 });
 
 test("drop inserts after the target when the pointer is in the lower half", () => {

docs/adr/0228-long-press-project-title-reorder.md

@@ -1,6 +1,6 @@
 # ADR 0228: Long-press the project title to reorder
 
-- Status: Accepted
+- Status: Accepted (amended by 0229)
 - Date: 2026-09-11
 - Amends: [ADR 0227](0227-project-group-manual-ordering.md)
 - Related: [D402](../spec/08-meta/decisions-log.md) · [Component spec](../spec/04-ux/08-component-spec.md) · E2E-253

docs/adr/0229-press-and-move-project-title-reorder.md

@@ -0,0 +1,38 @@
+# ADR 0229: Press-and-move project title reorder
+
+- Status: Accepted
+- Date: 2026-09-11
+- Amends: [ADR 0228](0228-long-press-project-title-reorder.md)
+- Related: [D403](../spec/08-meta/decisions-log.md) · [Component spec](../spec/04-ux/08-component-spec.md) · E2E-253
+
+## Context
+
+ADR 0228 removed the reorder grip and armed a drag after a 400ms still
+press. That delay is a mobile long-press pattern. On a desktop sidebar it
+makes reorder slower than ChatGPT, Claude, and similar product lists, where
+grabbing a row and moving it starts the drag immediately.
+
+## Decision
+
+The project title remains the reorder control, with no grip. Pointer
+disambiguation is movement, not time:
+
+- Mouse and pen: an 8px move while pressed arms the drag. A click with no
+  qualifying movement still selects the project and toggles collapse.
+- Touch presses do not start a reorder, so a one-finger pan can scroll the
+  list. Keyboard ArrowUp/ArrowDown on the focused title remains available.
+- While dragging, an accent insertion line on the target group shows
+  before/after placement from the pointer's vertical midpoint. Escape
+  cancels. Persistence and pin/archive buckets are unchanged.
+
+## Consequences
+
+- Desktop reorder matches common sidebar lists: press, move, drop.
+- Touch scrolling is not stolen by an accidental 8px pan on a title.
+- The 400ms still-press contract in ADR 0228 is replaced.
+
+## References
+
+- `apps/desktop/src/components/Sidebar.tsx`
+- `apps/desktop/src/lib/sidebar-project-reorder.ts`
+- `apps/desktop/test/sidebar-project-reorder.test.mjs`

docs/adr/README.md

@@ -245,4 +245,5 @@ Each ADR includes:
 | 0225 | Restore deferred tools from effective session context | Accepted (issue #225) |
 | 0226 | Reserve chat width for composer controls | Accepted |
 | 0227 | Project group manual ordering | Accepted (amended by 0228) |
-| 0228 | Long-press the project title to reorder | Accepted (amends 0227) |
+| 0228 | Long-press the project title to reorder | Accepted (amended by 0229) |
+| 0229 | Press-and-move project title reorder | Accepted (amends 0228) |

docs/spec/03-runtime/04-data-storage.md

@@ -243,7 +243,7 @@ type SidebarPreferences = {
 - Project keys and retained paths use normalized full paths; session keys use
   durable session ids. Duplicate/slash-variant paths are discarded on load.
 - `projectSort: "manual"` and `projectMeta[*].order` store renderer-local
-  project presentation order. Long-pressing a project title or using ArrowUp
+  project presentation order. Dragging a project title or using ArrowUp
   and ArrowDown on that title writes contiguous order values for the visible normalized paths.
   Missing or invalid values fall back to stable path order; pinned and archived
   priority remains applied before manual order. Session `manual`/`order` remain

docs/spec/04-ux/01-ui-ia.md

@@ -167,8 +167,8 @@ destination, chat as the home surface, tools and permissions inline.
   overflow menu. The directory title is one full-row disclosure target;
   collapse/expand affects only child visibility, and adjacent groups form one
   dense tree rather than detached cards. Hovering or focusing the project title
-  reveals the full project path. A 400ms still press on the title reorders the
-  group.
+  reveals the full project path. Pressing the title and moving 8px reorders
+  the group.
 - **Project actions**: open folder reveals the project directory; rename edits
   the renderer-local display name while the normalized path remains the
   project identity; pin/unpin changes presentation priority; archive/restore
@@ -182,7 +182,7 @@ destination, chat as the home surface, tools and permissions inline.
   conversation action.
 - **Sort**: user-facing modes are Recently updated, Created date, Oldest
   first, and Name. Pinned rows precede unpinned rows. Project groups switch
-  to `manual` by long-pressing a title or using ArrowUp/ArrowDown on that
+  to `manual` by dragging a title or using ArrowUp/ArrowDown on that
   title. Session `manual` remains a compatibility value.
 - **Conversation list**: each group shows the ten most-recent sessions in the
   active sort order by default; the remainder folds behind a **Load N more…**