feat: remove sidebar options, go for history only and pin

Author: k11kirky

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

@@ -1,12 +1,18 @@
 import { useTaskExecutionStore } from "@features/task-detail/stores/taskExecutionStore";
 import { Button, Flex } from "@radix-ui/themes";
 import { useWorkspaceStore } from "@/renderer/features/workspace/stores/workspaceStore";
-import type { HistoryData, HistoryTaskData } from "../hooks/useSidebarData";
+import type {
+  HistoryData,
+  HistoryTaskData,
+  PinnedData,
+  TaskData,
+} from "../hooks/useSidebarData";
 import { useSidebarStore } from "../stores/sidebarStore";
 import { TaskItem } from "./items/TaskItem";
 
 interface HistoryViewProps {
   historyData: HistoryData;
+  pinnedData: PinnedData;
   activeTaskId: string | null;
   onTaskClick: (taskId: string) => void;
   onTaskContextMenu: (taskId: string, e: React.MouseEvent) => void;
@@ -65,8 +71,52 @@ function HistoryTaskItem({
   );
 }
 
+interface PinnedTaskItemProps {
+  task: TaskData;
+  isActive: boolean;
+  onClick: () => void;
+  onContextMenu: (e: React.MouseEvent) => void;
+  onDelete: () => void;
+  onTogglePin: () => void;
+}
+
+function PinnedTaskItem({
+  task,
+  isActive,
+  onClick,
+  onContextMenu,
+  onDelete,
+  onTogglePin,
+}: PinnedTaskItemProps) {
+  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 HistoryView({
   historyData,
+  pinnedData,
   activeTaskId,
   onTaskClick,
   onTaskContextMenu,
@@ -76,11 +126,32 @@ export function HistoryView({
   const loadMoreHistory = useSidebarStore((state) => state.loadMoreHistory);
   const { activeTasks, recentTasks, hasMore } = historyData;
 
+  const hasPinnedTasks = pinnedData.tasks.length > 0;
   const hasActiveTasks = activeTasks.length > 0;
   const hasRecentTasks = recentTasks.length > 0;
 
   return (
     <Flex direction="column">
+      {hasPinnedTasks && (
+        <>
+          <HistorySectionLabel label="Pinned" />
+          {pinnedData.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)}
+            />
+          ))}
+          {(hasActiveTasks || hasRecentTasks) && (
+            <div className="mx-2 my-2 border-gray-6 border-t" />
+          )}
+        </>
+      )}
+
       {hasActiveTasks && (
         <>
           <HistorySectionLabel label="Active" />

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

@@ -1,30 +1,16 @@
 import { Plus } from "@phosphor-icons/react";
 import { GearIcon } from "@radix-ui/react-icons";
 import { Box, Button, Flex, IconButton } from "@radix-ui/themes";
-import { useRegisteredFoldersStore } from "@renderer/stores/registeredFoldersStore";
-import { trpcVanilla } from "@renderer/trpc";
 import { useNavigationStore } from "@stores/navigationStore";
 import { useCallback } from "react";
-import { useSidebarStore } from "../stores/sidebarStore";
 
 export function SidebarFooter() {
-  const addFolder = useRegisteredFoldersStore((state) => state.addFolder);
   const { toggleSettings, navigateToTaskInput } = useNavigationStore();
-  const viewMode = useSidebarStore((state) => state.viewMode);
-
-  const handleAddRepository = useCallback(async () => {
-    const selectedPath = await trpcVanilla.os.selectDirectory.query();
-    if (selectedPath) {
-      await addFolder(selectedPath);
-    }
-  }, [addFolder]);
 
   const handleNewTask = useCallback(() => {
     navigateToTaskInput();
   }, [navigateToTaskInput]);
 
-  const showNewTaskButton = viewMode !== "folders";
-
   return (
     <Box
       style={{
@@ -38,22 +24,10 @@ export function SidebarFooter() {
       }}
     >
       <Flex align="center" gap="2" justify="between">
-        {showNewTaskButton ? (
-          <Button size="1" variant="ghost" color="gray" onClick={handleNewTask}>
-            <Plus size={14} weight="bold" />
-            New task
-          </Button>
-        ) : (
-          <Button
-            size="1"
-            variant="ghost"
-            color="gray"
-            onClick={handleAddRepository}
-          >
-            <Plus size={14} weight="bold" />
-            Add repository
-          </Button>
-        )}
+        <Button size="1" variant="ghost" color="gray" onClick={handleNewTask}>
+          <Plus size={14} weight="bold" />
+          New task
+        </Button>
 
         <IconButton
           size="1"