feat: New pinned sidenav (#481)

Author: k11kirky

apps/array/src/renderer/features/sidebar/components/PinnedView.tsx

@@ -0,0 +1,105 @@
+import { useTaskExecutionStore } from "@features/task-detail/stores/taskExecutionStore";
+import { PushPin } from "@phosphor-icons/react";
+import { Flex } from "@radix-ui/themes";
+import { useWorkspaceStore } from "@/renderer/features/workspace/stores/workspaceStore";
+import type { PinnedData, TaskData } from "../hooks/useSidebarData";
+import { TaskItem } from "./items/TaskItem";
+
+interface PinnedViewProps {
+  pinnedData: PinnedData;
+  activeTaskId: string | null;
+  onTaskClick: (taskId: string) => void;
+  onTaskContextMenu: (taskId: string, e: React.MouseEvent) => void;
+  onTaskDelete: (taskId: string) => void;
+  onTaskTogglePin: (taskId: string) => void;
+}
+
+function PinnedTaskItem({
+  task,
+  isActive,
+  onClick,
+  onContextMenu,
+  onDelete,
+  onTogglePin,
+}: {
+  task: TaskData;
+  isActive: boolean;
+  onClick: () => void;
+  onContextMenu: (e: React.MouseEvent) => void;
+  onDelete: () => void;
+  onTogglePin: () => void;
+}) {
+  const workspaces = useWorkspaceStore.use.workspaces();
+  const taskStates = useTaskExecutionStore((state) => state.taskStates);
+
+  const workspace = workspaces[task.id];
+  const taskState = taskStates[task.id];
+
+  return (
+    <TaskItem
+      id={task.id}
+      label={task.title}
+      isActive={isActive}
+      worktreeName={workspace?.worktreeName ?? undefined}
+      worktreePath={workspace?.worktreePath ?? workspace?.folderPath}
+      workspaceMode={taskState?.workspaceMode}
+      lastActivityAt={task.lastActivityAt}
+      isGenerating={task.isGenerating}
+      isUnread={task.isUnread}
+      isPinned={task.isPinned}
+      onClick={onClick}
+      onContextMenu={onContextMenu}
+      onDelete={onDelete}
+      onTogglePin={onTogglePin}
+    />
+  );
+}
+
+export function PinnedView({
+  pinnedData,
+  activeTaskId,
+  onTaskClick,
+  onTaskContextMenu,
+  onTaskDelete,
+  onTaskTogglePin,
+}: PinnedViewProps) {
+  const { tasks } = pinnedData;
+
+  if (tasks.length === 0) {
+    return (
+      <Flex
+        direction="column"
+        align="center"
+        justify="center"
+        gap="2"
+        py="6"
+        className="text-gray-10"
+      >
+        <PushPin size={24} />
+        <span className="text-[12px]">No pinned tasks</span>
+        <span className="px-4 text-center text-[11px] text-gray-9">
+          Pin tasks from any view to quickly access them here
+        </span>
+      </Flex>
+    );
+  }
+
+  return (
+    <Flex direction="column">
+      <div className="px-2 py-1 font-medium font-mono text-[10px] text-gray-10 uppercase tracking-wide">
+        Pinned ({tasks.length})
+      </div>
+      {tasks.map((task) => (
+        <PinnedTaskItem
+          key={task.id}
+          task={task}
+          isActive={activeTaskId === task.id}
+          onClick={() => onTaskClick(task.id)}
+          onContextMenu={(e) => onTaskContextMenu(task.id, e)}
+          onDelete={() => onTaskDelete(task.id)}
+          onTogglePin={() => onTaskTogglePin(task.id)}
+        />
+      ))}
+    </Flex>
+  );
+}

apps/array/src/renderer/features/sidebar/components/SidebarFooter.tsx

@@ -23,7 +23,7 @@ export function SidebarFooter() {
     navigateToTaskInput();
   }, [navigateToTaskInput]);
 
-  const isHistoryView = viewMode === "history";
+  const showNewTaskButton = viewMode !== "folders";
 
   return (
     <Box
@@ -38,7 +38,7 @@ export function SidebarFooter() {
       }}
     >
       <Flex align="center" gap="2" justify="between">
-        {isHistoryView ? (
+        {showNewTaskButton ? (
           <Button size="1" variant="ghost" color="gray" onClick={handleNewTask}>
             <Plus size={14} weight="bold" />
             New task

apps/array/src/renderer/features/sidebar/components/SidebarMenu.tsx

@@ -22,6 +22,7 @@ import { HistoryView } from "./HistoryView";
 import { HomeItem } from "./items/HomeItem";
 import { NewTaskItem } from "./items/NewTaskItem";
 import { TaskItem } from "./items/TaskItem";
+import { PinnedView } from "./PinnedView";
 import { SidebarFooter } from "./SidebarFooter";
 import { SortableFolderSection } from "./SortableFolderSection";
 import { ViewModeSelector } from "./ViewModeSelector";
@@ -205,7 +206,7 @@ function SidebarMenuComponent() {
 
             <div className="mx-2 my-2 border-gray-6 border-t" />
 
-            {viewMode === "history" ? (
+            {viewMode === "history" && (
               <HistoryView
                 historyData={sidebarData.historyData}
                 activeTaskId={sidebarData.activeTaskId}
@@ -214,7 +215,20 @@ function SidebarMenuComponent() {
                 onTaskDelete={handleTaskDelete}
                 onTaskTogglePin={handleTaskTogglePin}
               />
-            ) : (
+            )}
+
+            {viewMode === "pinned" && (
+              <PinnedView
+                pinnedData={sidebarData.pinnedData}
+                activeTaskId={sidebarData.activeTaskId}
+                onTaskClick={handleTaskClick}
+                onTaskContextMenu={handleTaskContextMenu}
+                onTaskDelete={handleTaskDelete}
+                onTaskTogglePin={handleTaskTogglePin}
+              />
+            )}
+
+            {viewMode === "folders" && (
               <DragDropProvider
                 onDragOver={handleDragOver}
                 sensors={[

apps/array/src/renderer/features/sidebar/components/ViewModeSelector.tsx

@@ -1,10 +1,11 @@
-import { ClockCounterClockwise, Folder } from "@phosphor-icons/react";
+import { ClockCounterClockwise, Folder, PushPin } from "@phosphor-icons/react";
 import { Select, Text } from "@radix-ui/themes";
 import { type SidebarViewMode, useSidebarStore } from "../stores/sidebarStore";
 
 const VIEW_OPTIONS = [
-  { value: "folders" as const, label: "Repositories", Icon: Folder },
   { value: "history" as const, label: "History", Icon: ClockCounterClockwise },
+  { value: "pinned" as const, label: "Pinned", Icon: PushPin },
+  { value: "folders" as const, label: "Repositories", Icon: Folder },
 ];
 
 export function ViewModeSelector() {

apps/array/src/renderer/features/sidebar/hooks/useSidebarData.ts

@@ -58,6 +58,10 @@ export interface HistoryData {
   hasMore: boolean;
 }
 
+export interface PinnedData {
+  tasks: TaskData[];
+}
+
 export interface SidebarData {
   userName: string;
   isHomeActive: boolean;
@@ -69,6 +73,7 @@ export interface SidebarData {
   folders: FolderData[];
   activeTaskId: string | null;
   historyData: HistoryData;
+  pinnedData: PinnedData;
 }
 
 interface ViewState {
@@ -253,6 +258,54 @@ function buildHistoryData(
   };
 }
 
+function buildPinnedData(
+  allTasks: Task[],
+  sessions: Record<string, AgentSession>,
+  lastViewedAt: Record<string, number>,
+  localActivityAt: Record<string, number>,
+  pinnedTaskIds: Set<string>,
+  activeTaskId: string | null,
+): PinnedData {
+  const getSessionForTask = (taskId: string): AgentSession | undefined => {
+    return Object.values(sessions).find((s) => s.taskId === taskId);
+  };
+
+  // Filter to only pinned tasks
+  const pinnedTasks = allTasks.filter((task) => pinnedTaskIds.has(task.id));
+
+  // Transform to TaskData
+  const tasks: TaskData[] = pinnedTasks.map((task) => {
+    const session = getSessionForTask(task.id);
+
+    const apiUpdatedAt = new Date(task.updated_at).getTime();
+    const localActivity = localActivityAt[task.id];
+    const lastActivityAt = localActivity
+      ? Math.max(apiUpdatedAt, localActivity)
+      : apiUpdatedAt;
+
+    const taskLastViewedAt = lastViewedAt[task.id];
+    const isCurrentlyViewing = activeTaskId === task.id;
+    const isUnread =
+      !isCurrentlyViewing &&
+      taskLastViewedAt !== undefined &&
+      lastActivityAt > taskLastViewedAt;
+
+    return {
+      id: task.id,
+      title: task.title,
+      lastActivityAt,
+      isGenerating: session?.isPromptPending ?? false,
+      isUnread,
+      isPinned: true,
+    };
+  });
+
+  // Sort by activity
+  tasks.sort((a, b) => (b.lastActivityAt ?? 0) - (a.lastActivityAt ?? 0));
+
+  return { tasks };
+}
+
 export function useSidebarData({
   activeView,
   activeFilters,
@@ -367,6 +420,15 @@ export function useSidebarData({
     historyVisibleCount,
   );
 
+  const pinnedData = buildPinnedData(
+    allTasks,
+    sessions,
+    lastViewedAt,
+    localActivityAt,
+    pinnedTaskIds,
+    activeTaskId,
+  );
+
   return {
     userName,
     isHomeActive,
@@ -378,5 +440,6 @@ export function useSidebarData({
     folders: folderData,
     activeTaskId,
     historyData,
+    pinnedData,
   };
 }

apps/array/src/renderer/features/sidebar/stores/sidebarStore.ts

@@ -1,7 +1,7 @@
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
 
-export type SidebarViewMode = "folders" | "history";
+export type SidebarViewMode = "folders" | "history" | "pinned";
 
 interface SidebarStoreState {
   open: boolean;