From 61ddbe9f010e018fbd947f8254c27b89c5301fb5 Mon Sep 17 00:00:00 2001
From: Adam Bowker <adam.b@posthog.com>
Date: Mon, 6 Apr 2026 14:11:42 -0700
Subject: [PATCH] feat(code): add sort and filter to archived tasks view

---
 .../components/ArchivedTasksView.stories.tsx  |  21 +-
 .../archive/components/ArchivedTasksView.tsx  | 329 ++++++++++++++++--
 apps/code/src/renderer/styles/globals.css     |   8 +
 3 files changed, 321 insertions(+), 37 deletions(-)

diff --git a/apps/code/src/renderer/features/archive/components/ArchivedTasksView.stories.tsx b/apps/code/src/renderer/features/archive/components/ArchivedTasksView.stories.tsx
index ce1638638..bf8e72277 100644
--- a/apps/code/src/renderer/features/archive/components/ArchivedTasksView.stories.tsx
+++ b/apps/code/src/renderer/features/archive/components/ArchivedTasksView.stories.tsx
@@ -74,7 +74,7 @@ const meta: Meta<typeof ArchivedTasksViewPresentation> = {
     isLoading: false,
     branchNotFound: null,
     onUnarchive: () => {},
-    onDelete: (_taskId: string, _taskTitle: string) => {},
+    onDelete: (_taskId: string) => {},
     onContextMenu: () => {},
     onBranchNotFoundClose: () => {},
     onRecreateBranch: () => {},
@@ -147,3 +147,22 @@ export const LongLabels: Story = {
     ],
   },
 };
+
+export const MixedModes: Story = {
+  args: {
+    items: [
+      {
+        archived: { ...createArchivedTask("t1", 1), mode: "cloud" },
+        task: createTask("t1", "Cloud deploy pipeline", 10, "infra"),
+      },
+      {
+        archived: { ...createArchivedTask("t2", 5), mode: "local" },
+        task: createTask("t2", "Local debugging session", 3, "frontend"),
+      },
+      {
+        archived: { ...createArchivedTask("t3", 0), mode: "worktree" },
+        task: createTask("t3", "Worktree refactor", 20, "backend"),
+      },
+    ],
+  },
+};
diff --git a/apps/code/src/renderer/features/archive/components/ArchivedTasksView.tsx b/apps/code/src/renderer/features/archive/components/ArchivedTasksView.tsx
index eca4a8f01..39c1e202d 100644
--- a/apps/code/src/renderer/features/archive/components/ArchivedTasksView.tsx
+++ b/apps/code/src/renderer/features/archive/components/ArchivedTasksView.tsx
@@ -4,11 +4,25 @@ import { useTasks } from "@features/tasks/hooks/useTasks";
 import { useSetHeaderContent } from "@hooks/useSetHeaderContent";
 import type { WorkspaceMode } from "@main/services/workspace/schemas";
 import {
+  CaretDown,
+  CaretUp,
+  Check,
   Cloud as CloudIcon,
   GitBranch as GitBranchIcon,
   Laptop as LaptopIcon,
+  MagnifyingGlass,
 } from "@phosphor-icons/react";
-import { Box, Button, Dialog, Flex, Table, Text } from "@radix-ui/themes";
+import {
+  AlertDialog,
+  Box,
+  Button,
+  Dialog,
+  Flex,
+  Popover,
+  Table,
+  Text,
+  TextField,
+} from "@radix-ui/themes";
 import { trpcClient, useTRPC } from "@renderer/trpc";
 import type { Task } from "@shared/types";
 import type { ArchivedTask } from "@shared/types/archive";
@@ -83,6 +97,117 @@ function ModeIcon({ mode }: { mode: WorkspaceMode }) {
   );
 }
 
+type SortColumn = "created" | "archived";
+type SortDirection = "asc" | "desc";
+
+interface SortState {
+  column: SortColumn;
+  direction: SortDirection;
+}
+
+function SortableColumnHeader({
+  column,
+  label,
+  sort,
+  onSort,
+  width,
+}: {
+  column: SortColumn;
+  label: string;
+  sort: SortState;
+  onSort: (column: SortColumn) => void;
+  width?: string;
+}) {
+  const isActive = sort.column === column;
+  return (
+    <Table.ColumnHeaderCell
+      className="font-normal text-[13px] text-gray-11"
+      style={width ? { width } : undefined}
+    >
+      <button
+        type="button"
+        className="inline-flex items-center gap-0.5 text-gray-11 transition-colors hover:text-gray-12"
+        onClick={() => onSort(column)}
+      >
+        {label}
+        {isActive &&
+          (sort.direction === "asc" ? (
+            <CaretUp size={10} weight="fill" />
+          ) : (
+            <CaretDown size={10} weight="fill" />
+          ))}
+      </button>
+    </Table.ColumnHeaderCell>
+  );
+}
+
+const filterItemClassName =
+  "flex w-full items-center justify-between rounded-sm px-1.5 py-1 text-left text-[13px] text-gray-12 transition-colors hover:bg-gray-3";
+
+function RepositoryFilterHeader({
+  repos,
+  selectedRepo,
+  onSelect,
+}: {
+  repos: string[];
+  selectedRepo: string | null;
+  onSelect: (repo: string | null) => void;
+}) {
+  return (
+    <Table.ColumnHeaderCell
+      className="font-normal text-[13px] text-gray-11"
+      style={{ width: "20%" }}
+    >
+      <Popover.Root>
+        <Popover.Trigger>
+          <button
+            type="button"
+            className="inline-flex items-center gap-1 text-gray-11 transition-colors hover:text-gray-12"
+          >
+            Repository
+            <CaretDown size={10} />
+            {selectedRepo !== null && (
+              <span className="inline-block h-1.5 w-1.5 rounded-full bg-accent-9" />
+            )}
+          </button>
+        </Popover.Trigger>
+        <Popover.Content
+          align="start"
+          side="bottom"
+          sideOffset={4}
+          style={{ padding: 6, minWidth: 180 }}
+        >
+          <Flex direction="column" gap="0">
+            <button
+              type="button"
+              className={filterItemClassName}
+              onClick={() => onSelect(null)}
+            >
+              <span>All repositories</span>
+              {selectedRepo === null && (
+                <Check size={12} className="text-gray-12" />
+              )}
+            </button>
+            {repos.map((repo) => (
+              <button
+                key={repo}
+                type="button"
+                className={filterItemClassName}
+                onClick={() => onSelect(repo)}
+              >
+                <span className="max-w-[200px] truncate">{repo}</span>
+                {selectedRepo === repo && (
+                  <Check size={12} className="text-gray-12" />
+                )}
+              </button>
+            ))}
+          </Flex>
+        </Popover.Content>
+      </Popover.Root>
+    </Table.ColumnHeaderCell>
+  );
+}
+
 interface BranchNotFoundPrompt {
   taskId: string;
   branchName: string;
@@ -98,7 +223,7 @@ export interface ArchivedTasksViewPresentationProps {
   isLoading: boolean;
   branchNotFound: BranchNotFoundPrompt | null;
   onUnarchive: (taskId: string) => void;
-  onDelete: (taskId: string, taskTitle: string) => void;
+  onDelete: (taskId: string) => void;
   onContextMenu: (item: ArchivedTaskWithDetails, e: React.MouseEvent) => void;
   onBranchNotFoundClose: () => void;
   onRecreateBranch: () => void;
@@ -114,9 +239,92 @@ export function ArchivedTasksViewPresentation({
   onBranchNotFoundClose,
   onRecreateBranch,
 }: ArchivedTasksViewPresentationProps) {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [sort, setSort] = useState<SortState>({
+    column: "archived",
+    direction: "desc",
+  });
+  const [repoFilter, setRepoFilter] = useState<string | null>(null);
+  const [deleteTargetId, setDeleteTargetId] = useState<string | null>(null);
+
+  const handleSort = (column: SortColumn) => {
+    setSort((prev) =>
+      prev.column === column
+        ? { column, direction: prev.direction === "asc" ? "desc" : "asc" }
+        : { column, direction: "desc" },
+    );
+  };
+
+  const itemsWithRepo = useMemo(
+    () =>
+      items.map((item) => ({
+        ...item,
+        repoName: getRepoName(item.task?.repository),
+      })),
+    [items],
+  );
+
+  const uniqueRepos = useMemo(() => {
+    const repos = new Set<string>();
+    for (const item of itemsWithRepo) {
+      if (item.repoName !== "—") repos.add(item.repoName);
+    }
+    return [...repos].sort((a, b) => a.localeCompare(b));
+  }, [itemsWithRepo]);
+
+  const filteredItems = useMemo(() => {
+    let result = itemsWithRepo;
+
+    const query = searchQuery.trim().toLowerCase();
+    if (query) {
+      result = result.filter((item) =>
+        (item.task?.title?.toLowerCase() ?? "").includes(query),
+      );
+    }
+
+    if (repoFilter) {
+      result = result.filter((item) => item.repoName === repoFilter);
+    }
+
+    const dir = sort.direction === "asc" ? 1 : -1;
+
+    return [...result].sort((a, b) => {
+      const aTime =
+        sort.column === "created"
+          ? a.task?.created_at
+            ? new Date(a.task.created_at).getTime()
+            : 0
+          : new Date(a.archived.archivedAt).getTime();
+      const bTime =
+        sort.column === "created"
+          ? b.task?.created_at
+            ? new Date(b.task.created_at).getTime()
+            : 0
+          : new Date(b.archived.archivedAt).getTime();
+      return dir * (aTime - bTime);
+    });
+  }, [itemsWithRepo, searchQuery, repoFilter, sort]);
+
   return (
     <Flex direction="column" height="100%">
-      <Box className="flex-1 overflow-y-auto">
+      <Box
+        className="flex-1 overflow-y-auto"
+        style={{ scrollbarGutter: "stable" }}
+      >
+        <Box px="3" pt="3" pb="2">
+          <TextField.Root
+            size="2"
+            placeholder="Search archived tasks..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="text-[13px]"
+          >
+            <TextField.Slot>
+              <MagnifyingGlass size={14} />
+            </TextField.Slot>
+          </TextField.Root>
+        </Box>
+
         {isLoading ? (
           <Flex align="center" justify="center" gap="2" py="8">
             <DotsCircleSpinner size={16} className="text-gray-10" />
@@ -124,31 +332,49 @@ export function ArchivedTasksViewPresentation({
               Loading archived tasks...
             </Text>
           </Flex>
-        ) : items.length === 0 ? (
+        ) : filteredItems.length === 0 ? (
           <Flex align="center" justify="center" py="8">
-            <Text className="text-[13px] text-gray-10">No archived tasks</Text>
+            <Text className="text-[13px] text-gray-10">
+              {items.length === 0 ? "No archived tasks" : "No matching tasks"}
+            </Text>
           </Flex>
         ) : (
           <Table.Root
             size="1"
-            className="[&_td]:!py-1.5 [&_th]:!py-1.5 [&_tbody_tr:hover]:bg-gray-4 [&_td]:align-middle [&_th]:align-middle"
+            className="[&_td]:!py-1.5 [&_th]:!py-1.5 [&_table]:w-full [&_table]:table-fixed [&_tbody_tr:hover]:bg-gray-4 [&_td]:overflow-hidden [&_td]:align-middle [&_th]:align-middle"
           >
             <Table.Header>
               <Table.Row>
-                <Table.ColumnHeaderCell className="font-normal text-[13px] text-gray-11">
+                <Table.ColumnHeaderCell
+                  className="font-normal text-[13px] text-gray-11"
+                  style={{ width: "40%" }}
+                >
                   Title
                 </Table.ColumnHeaderCell>
-                <Table.ColumnHeaderCell className="font-normal text-[13px] text-gray-11">
-                  Created
-                </Table.ColumnHeaderCell>
-                <Table.ColumnHeaderCell className="font-normal text-[13px] text-gray-11">
-                  Repository
-                </Table.ColumnHeaderCell>
-                <Table.ColumnHeaderCell />
+                <SortableColumnHeader
+                  column="created"
+                  label="Created"
+                  sort={sort}
+                  onSort={handleSort}
+                  width="15%"
+                />
+                <SortableColumnHeader
+                  column="archived"
+                  label="Archived"
+                  sort={sort}
+                  onSort={handleSort}
+                  width="15%"
+                />
+                <RepositoryFilterHeader
+                  repos={uniqueRepos}
+                  selectedRepo={repoFilter}
+                  onSelect={setRepoFilter}
+                />
+                <Table.ColumnHeaderCell style={{ width: 160 }} />
               </Table.Row>
             </Table.Header>
             <Table.Body>
-              {items.map((item) => (
+              {filteredItems.map((item) => (
                 <Table.Row
                   key={item.archived.taskId}
                   onContextMenu={(e) => onContextMenu(item, e)}
@@ -157,7 +383,7 @@ export function ArchivedTasksViewPresentation({
                   <Table.Cell>
                     <Flex align="center" gap="2">
                       <ModeIcon mode={item.archived.mode} />
-                      <Text className="block max-w-[600px] truncate text-[13px]">
+                      <Text className="block truncate text-[13px]">
                         {item.task?.title ?? "Unknown task"}
                       </Text>
                     </Flex>
@@ -168,11 +394,16 @@ export function ArchivedTasksViewPresentation({
                     </Text>
                   </Table.Cell>
                   <Table.Cell>
-                    <Text className="block max-w-[300px] truncate text-[13px] text-gray-11">
-                      {getRepoName(item.task?.repository)}
+                    <Text className="block whitespace-nowrap text-[13px] text-gray-11">
+                      {formatRelativeDate(item.archived.archivedAt)}
                     </Text>
                   </Table.Cell>
                   <Table.Cell>
+                    <Text className="block truncate text-[13px] text-gray-11">
+                      {item.repoName}
+                    </Text>
+                  </Table.Cell>
+                  <Table.Cell style={{ overflow: "visible" }}>
                     <Flex gap="2" className="invisible group-hover:visible">
                       <Button
                         variant="outline"
@@ -186,12 +417,7 @@ export function ArchivedTasksViewPresentation({
                         variant="outline"
                         color="red"
                         size="1"
-                        onClick={() =>
-                          onDelete(
-                            item.archived.taskId,
-                            item.task?.title ?? "Unknown task",
-                          )
-                        }
+                        onClick={() => setDeleteTargetId(item.archived.taskId)}
                       >
                         Delete
                       </Button>
@@ -233,6 +459,47 @@ export function ArchivedTasksViewPresentation({
           </Flex>
         </Dialog.Content>
       </Dialog.Root>
+
+      <AlertDialog.Root
+        open={deleteTargetId !== null}
+        onOpenChange={(open) => {
+          if (!open) setDeleteTargetId(null);
+        }}
+      >
+        <AlertDialog.Content maxWidth="420px" size="1">
+          <AlertDialog.Title size="2">Delete archived task</AlertDialog.Title>
+          <AlertDialog.Description size="1">
+            <Text size="1" color="gray">
+              Permanently delete{" "}
+              <Text size="1" weight="medium">
+                {items.find((i) => i.archived.taskId === deleteTargetId)?.task
+                  ?.title ?? "Unknown task"}
+              </Text>
+              ? This cannot be undone.
+            </Text>
+          </AlertDialog.Description>
+          <Flex justify="end" gap="3" mt="3">
+            <AlertDialog.Cancel>
+              <Button variant="soft" color="gray" size="1">
+                Cancel
+              </Button>
+            </AlertDialog.Cancel>
+            <AlertDialog.Action>
+              <Button
+                variant="solid"
+                color="red"
+                size="1"
+                onClick={() => {
+                  if (deleteTargetId) onDelete(deleteTargetId);
+                  setDeleteTargetId(null);
+                }}
+              >
+                Delete
+              </Button>
+            </AlertDialog.Action>
+          </Flex>
+        </AlertDialog.Content>
+      </AlertDialog.Root>
     </Flex>
   );
 }
@@ -303,7 +570,7 @@ export function ArchivedTasksView() {
   const executeDelete = async (taskId: string) => {
     try {
       await trpcClient.archive.delete.mutate({ taskId });
-      invalidateArchiveQueries();
+      await invalidateArchiveQueries();
       toast.success("Task deleted");
     } catch (error) {
       const message = error instanceof Error ? error.message : String(error);
@@ -311,16 +578,6 @@ export function ArchivedTasksView() {
     }
   };
 
-  const handleDelete = async (taskId: string, taskTitle: string) => {
-    const { confirmed } =
-      await trpcClient.contextMenu.confirmDeleteArchivedTask.mutate({
-        taskTitle,
-      });
-    if (!confirmed) return;
-
-    await executeDelete(taskId);
-  };
-
   const handleContextMenu = async (
     item: ArchivedTaskWithDetails,
     e: React.MouseEvent,
@@ -387,7 +644,7 @@ export function ArchivedTasksView() {
       isLoading={isLoading}
       branchNotFound={branchNotFound}
       onUnarchive={handleUnarchive}
-      onDelete={handleDelete}
+      onDelete={executeDelete}
       onContextMenu={handleContextMenu}
       onBranchNotFoundClose={() => setBranchNotFound(null)}
       onRecreateBranch={handleRecreateBranch}
diff --git a/apps/code/src/renderer/styles/globals.css b/apps/code/src/renderer/styles/globals.css
index ae2b62c0f..a9c0ca22a 100644
--- a/apps/code/src/renderer/styles/globals.css
+++ b/apps/code/src/renderer/styles/globals.css
@@ -159,6 +159,14 @@
 }
 
 .radix-themes {
+  --cursor-button: pointer;
+  --cursor-checkbox: pointer;
+  --cursor-menu-item: pointer;
+  --cursor-radio: pointer;
+  --cursor-switch: pointer;
+  --cursor-slider-thumb: pointer;
+  --cursor-slider-thumb-active: grab;
+
   /* Font families */
   --default-font-family:
     -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,