feat: remove sidebar options, go for history only and pin (#506)

### TL;DR

Simplified the sidebar by consolidating pinned tasks into the history view and removing the folder/repository view.

### What changed?

- Removed the view mode selector and consolidated all views into a single unified view
- Integrated pinned tasks directly into the History view as a separate section at the top
- Removed the standalone `PinnedView` component and merged its functionality into `HistoryView`
- Removed repository/folder-related components and functionality:
  - Deleted `SortableFolderSection.tsx`
  - Deleted `ViewModeSelector.tsx`
  - Deleted `NewTaskItem.tsx`
- Simplified the sidebar footer to only show the "New task" button (removed the "Add repository" button)
- Updated the sidebar data handling to filter out pinned tasks from the regular history sections

### How to test?

1. Open the application and check that the sidebar now shows a unified view with pinned tasks at the top (if any exist)
2. Pin a task and verify it appears in the "Pinned" section at the top of the sidebar
3. Unpin a task and verify it moves back to the appropriate history section
4. Create a new task and verify it appears in the history view
5. Verify that the sidebar footer consistently shows the "New task" button

### Why make this change?

This change simplifies the user interface by consolidating multiple views into a single, more intuitive view. By removing the separate modes (history, pinned, folders) and integrating pinned tasks directly into the main view, the sidebar becomes more straightforward and requires fewer clicks to navigate between different types of tasks. This streamlined approach improves usability by keeping important tasks visible and accessible at all times.

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"