feat: Add a button to archive sessions from the sidebar (#570)

- add an `Archive` action to sidebar session rows
- reuse a shared archive dialog between the sidebar and the session page
  - add `archiveSession` as the shared archive helper
  - keep sidebar state in sync after archiving
  - add/update focused sidebar coverage for the archive flow

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
  * Archive sessions directly from the session sidebar.
  * Confirmation dialog when archiving sessions.
  * Mobile-optimized archive workflow via long-press.
* Archived sessions are removed from the sidebar immediately; archive
action is disabled while processing.

* **Tests**
* Added coverage for the mobile archive flow and confirmation/workflow
behavior.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Kartikye <kartikye@dots.dev>

Author: kartikye

packages/web/src/app/(app)/session/[id]/page.tsx

@@ -28,6 +28,7 @@ import { Group as PanelGroup, Panel, Separator as PanelResizeHandle } from "reac
 import { TerminalPanel } from "@/components/terminal-panel";
 import { ActionBar } from "@/components/action-bar";
 import { copyToClipboard, formatModelNameLower } from "@/lib/format";
+import { archiveSession } from "@/lib/archive-session";
 import { SHORTCUT_LABELS } from "@/lib/keyboard-shortcuts";
 import { SIDEBAR_SESSIONS_KEY } from "@/lib/session-list";
 import { useMediaQuery } from "@/hooks/use-media-query";
@@ -210,21 +211,6 @@ function SessionPageContent() {
     [searchParams]
   );
 
-  const { trigger: triggerArchive } = useSWRMutation(
-    `/api/sessions/${sessionId}/archive`,
-    (url: string) =>
-      fetch(url, { method: "POST" }).then((r) => {
-        if (r.ok) {
-          mutate(SIDEBAR_SESSIONS_KEY);
-          return true;
-        }
-
-        console.error("Failed to archive session");
-        return false;
-      }),
-    { throwOnError: false }
-  );
-
   const { trigger: triggerRename } = useSWRMutation(
     `/api/sessions/${sessionId}/title`,
     (url: string, { arg }: { arg: { title: string } }) =>
@@ -241,11 +227,11 @@ function SessionPageContent() {
   );
 
   const handleArchive = useCallback(async () => {
-    const didArchive = await triggerArchive();
+    const didArchive = await archiveSession(sessionId);
     if (didArchive) {
       router.push("/");
     }
-  }, [router, triggerArchive]);
+  }, [router, sessionId]);
 
   const renameSession = useCallback(
     async (title: string) => {

packages/web/src/components/action-bar.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from "react";
 import { toast } from "sonner";
+import { ArchiveSessionDialog } from "@/components/archive-session-dialog";
 import type { Artifact } from "@/types/session";
 import {
   GlobeIcon,
@@ -12,16 +13,6 @@ import {
   GitHubIcon,
 } from "@/components/ui/icons";
 import { Button } from "@/components/ui/button";
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from "@/components/ui/alert-dialog";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -154,21 +145,11 @@ export function ActionBar({
         </DropdownMenu>
       </div>
 
-      <AlertDialog open={showArchiveDialog} onOpenChange={setShowArchiveDialog}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Archive session</AlertDialogTitle>
-            <AlertDialogDescription>
-              Archive this session? You can restore archived sessions from Settings &gt; Data
-              Controls.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
-            <AlertDialogAction onClick={handleConfirmArchive}>Archive</AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
+      <ArchiveSessionDialog
+        open={showArchiveDialog}
+        onOpenChange={setShowArchiveDialog}
+        onConfirm={handleConfirmArchive}
+      />
     </>
   );
 }

packages/web/src/components/archive-session-dialog.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+
+interface ArchiveSessionDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onConfirm: () => void | Promise<void>;
+}
+
+export function ArchiveSessionDialog({ open, onOpenChange, onConfirm }: ArchiveSessionDialogProps) {
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Archive session</AlertDialogTitle>
+          <AlertDialogDescription>
+            Archive this session? You can restore archived sessions from Settings &gt; Data
+            Controls.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction onClick={onConfirm}>Archive</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

packages/web/src/components/session-sidebar.test.tsx

@@ -14,6 +14,10 @@ const { mockUseIsMobile } = vi.hoisted(() => ({
   mockUseIsMobile: vi.fn(() => false),
 }));
 
+const { mockPush } = vi.hoisted(() => ({
+  mockPush: vi.fn(),
+}));
+
 vi.mock("next-auth/react", () => ({
   useSession: () => ({
     data: {
@@ -28,6 +32,7 @@ vi.mock("next-auth/react", () => ({
 
 vi.mock("next/navigation", () => ({
   usePathname: () => "/",
+  useRouter: () => ({ push: mockPush }),
 }));
 
 vi.mock("next/link", () => ({
@@ -47,6 +52,7 @@ afterEach(() => {
   vi.restoreAllMocks();
   vi.useRealTimers();
   mockUseIsMobile.mockReturnValue(false);
+  mockPush.mockReset();
 });
 
 function createSession(index: number) {
@@ -207,5 +213,47 @@ describe("SessionSidebar", () => {
     });
 
     expect(screen.getByText("Rename")).toBeInTheDocument();
+    expect(screen.getByText("Archive")).toBeInTheDocument();
+  });
+
+  it("archives a session from the sidebar actions menu", async () => {
+    mockUseIsMobile.mockReturnValue(true);
+
+    const fetchMock = vi.fn(async (input: RequestInfo | URL, init?: RequestInit) => {
+      if (String(input) === "/api/sessions/session-1/archive" && init?.method === "POST") {
+        return jsonResponse({ ok: true });
+      }
+
+      throw new Error(`Unexpected fetch for ${String(input)}`);
+    });
+
+    vi.stubGlobal("fetch", fetchMock);
+
+    render(
+      <SWRConfig
+        value={{
+          fallback: { [SIDEBAR_SESSIONS_KEY]: { sessions: [createSession(1)], hasMore: false } },
+          dedupingInterval: 0,
+          revalidateOnFocus: false,
+        }}
+      >
+        <SessionSidebar />
+      </SWRConfig>
+    );
+
+    const link = await screen.findByRole("link", { name: /session 1/i });
+    vi.useFakeTimers();
+    fireEvent.touchStart(link, { touches: [{ clientX: 20, clientY: 20 }] });
+    act(() => {
+      vi.advanceTimersByTime(MOBILE_LONG_PRESS_MS);
+    });
+    vi.useRealTimers();
+
+    fireEvent.click(screen.getByText("Archive"));
+    fireEvent.click(await screen.findByRole("button", { name: "Archive" }));
+
+    await waitFor(() => {
+      expect(fetchMock).toHaveBeenCalledWith("/api/sessions/session-1/archive", { method: "POST" });
+    });
   });
 });