feat(sidebar): add context menus with archive/delete for threads and worktrees

tanRdev · tanRdev · commit 7dc4d5ef4d11 · 2026-04-17T03:25:46.000-04:00
- Right-click on thread or worktree rows opens context menu
- Inline confirmation flow: first click enters confirm state, second click executes
- Delete wired to existing backend handlers
- Archive callbacks plumbed through props (backend pending)
- Bump version to v0.5.0
diff --git a/apps/desktop/package.json b/apps/desktop/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pi-desktop/desktop",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "private": true,
   "productName": "Pi Desktop",
   "description": "Pi Desktop Electron desktop shell",
diff --git a/apps/desktop/src/renderer/src/components/workspace/chat/response-divider.tsx b/apps/desktop/src/renderer/src/components/workspace/chat/response-divider.tsx
@@ -40,7 +40,7 @@ export function ResponseDivider({
       : `Response · Worked for ${formatDuration(now - userTimestamp)}`;
 
   return (
-    <div className="mx-auto flex w-full max-w-3xl items-center gap-3 px-6 py-3 select-none">
+    <div className="mx-auto flex w-full max-w-3xl items-center gap-3 px-6 pt-1 pb-3 select-none">
       <div className="h-px flex-1 bg-white/[0.06]" />
       <div
         className={cn(
diff --git a/apps/desktop/src/renderer/src/components/workspace/left-sidebar.tsx b/apps/desktop/src/renderer/src/components/workspace/left-sidebar.tsx
@@ -6,6 +6,7 @@ import {
   ArrowDown,
   ArrowUp,
   Check,
+  Archive,
   Copy,
   Folder,
   GitBranch,
@@ -95,6 +96,8 @@ export interface LeftSidebarProps {
   onSelectThread: (threadId: string) => void;
   onDeleteWorktree?: (worktreeId: string) => void;
   onDeleteThread?: (threadId: string) => void;
+  onArchiveWorktree?: (worktreeId: string) => void;
+  onArchiveThread?: (threadId: string) => void;
   onAddRepository: () => void;
   onOpenFilter?: () => void;
   onNewAgent?: () => void;
@@ -256,20 +259,36 @@ interface WorktreeRowProps {
   threadLastViewedAt?: Record<string, number>;
   onSelect: (id: string) => void;
   onSelectThread: (threadId: string) => void;
+  onContextMenu?: (
+    e: React.MouseEvent,
+    worktreeId: string,
+    worktreeLabel: string,
+  ) => void;
+  onThreadContextMenu?: (
+    e: React.MouseEvent,
+    threadId: string,
+    threadTitle: string,
+  ) => void;
 }
 
 interface ThreadRowProps {
   thread: WorktreeSnapshot["threads"][number];
   isActive: boolean;
   indicatorState: IndicatorState;
   onSelect: (id: string) => void;
+  onContextMenu?: (
+    e: React.MouseEvent,
+    threadId: string,
+    threadTitle: string,
+  ) => void;
 }
 
 function ThreadRowImpl({
   thread,
   isActive,
   indicatorState,
   onSelect,
+  onContextMenu,
 }: ThreadRowProps) {
   const threadTitle = thread.title.trim() || "Untitled thread";
 
@@ -278,6 +297,11 @@ function ThreadRowImpl({
       <button
         type="button"
         onClick={() => onSelect(thread.id)}
+        onContextMenu={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          onContextMenu?.(e, thread.id, threadTitle);
+        }}
         className={cn(
           "group flex w-full min-w-0 items-center gap-2 pl-[11px] pr-2 py-1.5 text-left text-[12px]",
           "transition-colors duration-150",
@@ -306,6 +330,8 @@ function WorktreeRowImpl({
   threadLastViewedAt,
   onSelect,
   onSelectThread,
+  onContextMenu,
+  onThreadContextMenu,
 }: WorktreeRowProps) {
   const ahead = session.git.ahead ?? 0;
   const behind = session.git.behind ?? 0;
@@ -340,6 +366,11 @@ function WorktreeRowImpl({
       <button
         type="button"
         onClick={() => onSelect(session.id)}
+        onContextMenu={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          onContextMenu?.(e, session.id, session.label);
+        }}
         className={cn(
           "group flex w-full min-w-0 items-center gap-2 pl-[22px] pr-2 py-2 text-left text-[13px]",
           "transition-colors duration-150",
@@ -404,6 +435,7 @@ function WorktreeRowImpl({
                   isActive={isThreadActive}
                   indicatorState={threadIndicatorState}
                   onSelect={onSelectThread}
+                  onContextMenu={onThreadContextMenu}
                 />
               );
             })}
@@ -515,8 +547,10 @@ export function LeftSidebarImpl({
   onSelectRepository,
   onSelectWorktree,
   onSelectThread,
-  onDeleteThread: _onDeleteThread,
-  onDeleteWorktree: _onDeleteWorktree,
+  onDeleteThread,
+  onDeleteWorktree,
+  onArchiveThread,
+  onArchiveWorktree,
   onRemoveRepository,
   onCopyRepositoryPath,
   onOpenInFinder,
@@ -551,6 +585,27 @@ export function LeftSidebarImpl({
   const contextMenuRef = React.useRef<HTMLDivElement>(null);
   const [isCreatingSession, setIsCreatingSession] = React.useState(false);
 
+  // Item context menu for threads/worktrees
+  const [itemMenu, setItemMenu] = React.useState<{
+    isOpen: boolean;
+    x: number;
+    y: number;
+    type: "thread" | "worktree";
+    id: string;
+    label: string;
+    confirming: "archive" | "delete" | null;
+  }>({
+    isOpen: false,
+    x: 0,
+    y: 0,
+    type: "thread",
+    id: "",
+    label: "",
+    confirming: null,
+  });
+
+  const itemMenuRef = React.useRef<HTMLDivElement>(null);
+
   const [expandedRepositoryIds, setExpandedRepositoryIds] = React.useState<
     Set<string>
   >(() => (activeRepositoryId ? new Set([activeRepositoryId]) : new Set()));
@@ -598,6 +653,108 @@ export function LeftSidebarImpl({
     };
   }, [contextMenu.isOpen]);
 
+  React.useEffect(() => {
+    if (!itemMenu.isOpen) return;
+
+    const handleClickOutside = (e: MouseEvent) => {
+      if (
+        itemMenuRef.current &&
+        !itemMenuRef.current.contains(e.target as Node)
+      ) {
+        setItemMenu((prev) => ({ ...prev, isOpen: false, confirming: null }));
+      }
+    };
+
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        setItemMenu((prev) => ({ ...prev, isOpen: false, confirming: null }));
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("keydown", handleEscape);
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [itemMenu.isOpen]);
+
+  const closeItemMenu = React.useCallback(() => {
+    setItemMenu((prev) => ({ ...prev, isOpen: false, confirming: null }));
+  }, []);
+
+  const handleItemContextMenu = React.useCallback(
+    (
+      e: React.MouseEvent,
+      type: "thread" | "worktree",
+      id: string,
+      label: string,
+    ) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setItemMenu({
+        isOpen: true,
+        x: e.clientX,
+        y: e.clientY,
+        type,
+        id,
+        label,
+        confirming: null,
+      });
+    },
+    [],
+  );
+
+  const handleThreadContextMenu = React.useCallback(
+    (e: React.MouseEvent, threadId: string, threadTitle: string) => {
+      handleItemContextMenu(e, "thread", threadId, threadTitle);
+    },
+    [handleItemContextMenu],
+  );
+
+  const handleWorktreeContextMenu = React.useCallback(
+    (e: React.MouseEvent, worktreeId: string, worktreeLabel: string) => {
+      handleItemContextMenu(e, "worktree", worktreeId, worktreeLabel);
+    },
+    [handleItemContextMenu],
+  );
+
+  const handleItemMenuConfirmAction = React.useCallback(
+    (action: "archive" | "delete") => {
+      if (itemMenu.confirming === action) {
+        // Second click — execute
+        if (action === "delete") {
+          if (itemMenu.type === "thread") {
+            onDeleteThread?.(itemMenu.id);
+          } else {
+            onDeleteWorktree?.(itemMenu.id);
+          }
+        } else {
+          if (itemMenu.type === "thread") {
+            onArchiveThread?.(itemMenu.id);
+          } else {
+            onArchiveWorktree?.(itemMenu.id);
+          }
+        }
+        closeItemMenu();
+      } else {
+        // First click — enter confirming state
+        setItemMenu((prev) => ({ ...prev, confirming: action }));
+      }
+    },
+    [
+      itemMenu.confirming,
+      itemMenu.type,
+      itemMenu.id,
+      onDeleteThread,
+      onDeleteWorktree,
+      onArchiveThread,
+      onArchiveWorktree,
+      closeItemMenu,
+    ],
+  );
+
   const handleCreateSession = React.useCallback(async () => {
     if (isCreatingSession) return;
     setIsCreatingSession(true);
@@ -844,6 +1001,10 @@ export function LeftSidebarImpl({
                                       threadLastViewedAt={threadLastViewedAt}
                                       onSelect={onSelectWorktree}
                                       onSelectThread={onSelectThread}
+                                      onContextMenu={handleWorktreeContextMenu}
+                                      onThreadContextMenu={
+                                        handleThreadContextMenu
+                                      }
                                     />
                                   );
                                 })}
@@ -966,6 +1127,94 @@ export function LeftSidebarImpl({
               )}
             </div>
           )}
+
+          {/* Thread / Worktree Context Menu */}
+          {itemMenu.isOpen && (
+            <div
+              ref={itemMenuRef}
+              className="fixed z-[100] min-w-[180px] border border-white/[0.06] bg-[var(--color-bg-primary)] p-0 shadow-lg"
+              style={{ left: itemMenu.x, top: itemMenu.y }}
+            >
+              <div className="px-3 py-2 border-b border-white/[0.06]">
+                <span className="block truncate text-[12px] text-white/60">
+                  {itemMenu.label}
+                </span>
+                <span className="text-[10px] text-white/30">
+                  {itemMenu.type === "thread" ? "Thread" : "Worktree"}
+                </span>
+              </div>
+
+              {itemMenu.confirming === "archive" ? (
+                <div className="px-3 py-2 space-y-1.5">
+                  <p className="text-[11px] text-white/50">
+                    Archive this {itemMenu.type}?
+                  </p>
+                  <div className="flex items-center gap-2">
+                    <button
+                      type="button"
+                      onClick={() => handleItemMenuConfirmAction("archive")}
+                      className="flex-1 py-1 text-[11px] text-amber-400 hover:bg-amber-500/10 transition-colors duration-150"
+                    >
+                      Archive
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() =>
+                        setItemMenu((prev) => ({ ...prev, confirming: null }))
+                      }
+                      className="flex-1 py-1 text-[11px] text-white/40 hover:bg-white/[0.04] transition-colors duration-150"
+                    >
+                      Cancel
+                    </button>
+                  </div>
+                </div>
+              ) : itemMenu.confirming === "delete" ? (
+                <div className="px-3 py-2 space-y-1.5">
+                  <p className="text-[11px] text-white/50">
+                    Delete this {itemMenu.type}? This cannot be undone.
+                  </p>
+                  <div className="flex items-center gap-2">
+                    <button
+                      type="button"
+                      onClick={() => handleItemMenuConfirmAction("delete")}
+                      className="flex-1 py-1 text-[11px] text-rose-400 hover:bg-rose-500/10 transition-colors duration-150"
+                    >
+                      Delete
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() =>
+                        setItemMenu((prev) => ({ ...prev, confirming: null }))
+                      }
+                      className="flex-1 py-1 text-[11px] text-white/40 hover:bg-white/[0.04] transition-colors duration-150"
+                    >
+                      Cancel
+                    </button>
+                  </div>
+                </div>
+              ) : (
+                <>
+                  <button
+                    type="button"
+                    onClick={() => handleItemMenuConfirmAction("archive")}
+                    className="flex w-full items-center gap-2 px-3 py-2 text-left text-[12px] text-white/70 hover:bg-white/[0.04] transition-colors duration-150"
+                  >
+                    <Archive className="size-4" />
+                    Archive
+                  </button>
+                  <div className="my-0.5 border-t border-white/[0.06]" />
+                  <button
+                    type="button"
+                    onClick={() => handleItemMenuConfirmAction("delete")}
+                    className="flex w-full items-center gap-2 px-3 py-2 text-left text-[12px] text-rose-400 hover:bg-rose-500/10 transition-colors duration-150"
+                  >
+                    <Trash className="size-4" />
+                    Delete
+                  </button>
+                </>
+              )}
+            </div>
+          )}
         </>
       )}
     </aside>
diff --git a/apps/desktop/src/renderer/src/components/workspace/workspace-shell.tsx b/apps/desktop/src/renderer/src/components/workspace/workspace-shell.tsx
@@ -72,6 +72,8 @@ export interface WorkspaceShellProps {
   onDeleteWorktree?: (worktreeId: string) => void | Promise<void>;
   onCloseThread: (threadId: string) => void | Promise<void>;
   onDeleteThread?: (threadId: string) => void | Promise<void>;
+  onArchiveWorktree?: (worktreeId: string) => void;
+  onArchiveThread?: (threadId: string) => void;
   onOpenGit: () => void;
   onToggleTerminal: () => void;
   isTerminalVisible: boolean;
@@ -165,6 +167,8 @@ function WorkspaceShellImpl({
   onDeleteWorktree,
   onCloseThread,
   onDeleteThread,
+  onArchiveWorktree,
+  onArchiveThread,
   onOpenGit: _onOpenGit,
   onToggleTerminal,
   isTerminalVisible,
@@ -348,6 +352,8 @@ function WorkspaceShellImpl({
           onSelectThread={onSelectThread}
           onDeleteWorktree={onDeleteWorktree}
           onDeleteThread={onDeleteThread}
+          onArchiveWorktree={onArchiveWorktree}
+          onArchiveThread={onArchiveThread}
           onAddRepository={onAddRepository}
           gitPanel={gitPanel}
           filesPanel={filesPanel}
diff --git a/package.json b/package.json

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@pi-desktop/desktop",`
`3`		`- "version": "0.4.0",`
	`3`	`+ "version": "0.5.0",`
`4`	`4`	`"private": true,`
`5`	`5`	`"productName": "Pi Desktop",`
`6`	`6`	`"description": "Pi Desktop Electron desktop shell",`