feat: New history based side nav (#480)

Author: k11kirky

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

@@ -0,0 +1,136 @@
+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 { useSidebarStore } from "../stores/sidebarStore";
+import { TaskItem } from "./items/TaskItem";
+
+interface HistoryViewProps {
+  historyData: HistoryData;
+  activeTaskId: string | null;
+  onTaskClick: (taskId: string) => void;
+  onTaskContextMenu: (taskId: string, e: React.MouseEvent) => void;
+  onTaskDelete: (taskId: string) => void;
+  onTaskTogglePin: (taskId: string) => void;
+}
+
+function HistorySectionLabel({ label }: { label: string }) {
+  return (
+    <div className="px-2 py-1 font-medium font-mono text-[10px] text-gray-10 uppercase tracking-wide">
+      {label}
+    </div>
+  );
+}
+
+interface HistoryTaskItemProps {
+  task: HistoryTaskData;
+  isActive: boolean;
+  onClick: () => void;
+  onContextMenu: (e: React.MouseEvent) => void;
+  onDelete: () => void;
+  onTogglePin: () => void;
+}
+
+function HistoryTaskItem({
+  task,
+  isActive,
+  onClick,
+  onContextMenu,
+  onDelete,
+  onTogglePin,
+}: HistoryTaskItemProps) {
+  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,
+  activeTaskId,
+  onTaskClick,
+  onTaskContextMenu,
+  onTaskDelete,
+  onTaskTogglePin,
+}: HistoryViewProps) {
+  const loadMoreHistory = useSidebarStore((state) => state.loadMoreHistory);
+  const { activeTasks, recentTasks, hasMore } = historyData;
+
+  const hasActiveTasks = activeTasks.length > 0;
+  const hasRecentTasks = recentTasks.length > 0;
+
+  return (
+    <Flex direction="column">
+      {hasActiveTasks && (
+        <>
+          <HistorySectionLabel label="Active" />
+          {activeTasks.map((task) => (
+            <HistoryTaskItem
+              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)}
+            />
+          ))}
+          {hasRecentTasks && (
+            <div className="mx-2 my-2 border-gray-6 border-t" />
+          )}
+        </>
+      )}
+
+      {hasRecentTasks && (
+        <>
+          <HistorySectionLabel label="Recent" />
+          {recentTasks.map((task) => (
+            <HistoryTaskItem
+              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)}
+            />
+          ))}
+        </>
+      )}
+
+      {hasMore && (
+        <div className="px-2 py-2">
+          <Button
+            size="1"
+            variant="ghost"
+            color="gray"
+            onClick={loadMoreHistory}
+            style={{ width: "100%" }}
+          >
+            Show more
+          </Button>
+        </div>
+      )}
+    </Flex>
+  );
+}

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

@@ -5,10 +5,12 @@ import { useRegisteredFoldersStore } from "@renderer/stores/registeredFoldersSto
 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 } = useNavigationStore();
+  const { toggleSettings, navigateToTaskInput } = useNavigationStore();
+  const viewMode = useSidebarStore((state) => state.viewMode);
 
   const handleAddRepository = useCallback(async () => {
     const selectedPath = await trpcVanilla.os.selectDirectory.query();
@@ -17,6 +19,12 @@ export function SidebarFooter() {
     }
   }, [addFolder]);
 
+  const handleNewTask = useCallback(() => {
+    navigateToTaskInput();
+  }, [navigateToTaskInput]);
+
+  const isHistoryView = viewMode === "history";
+
   return (
     <Box
       style={{
@@ -30,15 +38,22 @@ export function SidebarFooter() {
       }}
     >
       <Flex align="center" gap="2" justify="between">
-        <Button
-          size="1"
-          variant="ghost"
-          color="gray"
-          onClick={handleAddRepository}
-        >
-          <Plus size={14} weight="bold" />
-          Add repository
-        </Button>
+        {isHistoryView ? (
+          <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>
+        )}
 
         <IconButton
           size="1"

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

@@ -18,11 +18,13 @@ import { useSidebarData } from "../hooks/useSidebarData";
 import { usePinnedTasksStore } from "../stores/pinnedTasksStore";
 import { useSidebarStore } from "../stores/sidebarStore";
 import { useTaskViewedStore } from "../stores/taskViewedStore";
+import { HistoryView } from "./HistoryView";
 import { HomeItem } from "./items/HomeItem";
 import { NewTaskItem } from "./items/NewTaskItem";
 import { TaskItem } from "./items/TaskItem";
 import { SidebarFooter } from "./SidebarFooter";
 import { SortableFolderSection } from "./SortableFolderSection";
+import { ViewModeSelector } from "./ViewModeSelector";
 
 function SidebarMenuComponent() {
   const {
@@ -41,6 +43,7 @@ function SidebarMenuComponent() {
   const toggleSection = useSidebarStore((state) => state.toggleSection);
   const folderOrder = useSidebarStore((state) => state.folderOrder);
   const reorderFolders = useSidebarStore((state) => state.reorderFolders);
+  const viewMode = useSidebarStore((state) => state.viewMode);
   const workspaces = useWorkspaceStore.use.workspaces();
   const taskStates = useTaskExecutionStore((state) => state.taskStates);
   const markAsViewed = useTaskViewedStore((state) => state.markAsViewed);
@@ -196,87 +199,104 @@ function SidebarMenuComponent() {
               onClick={handleHomeClick}
             />
 
+            <div className="px-2 py-1">
+              <ViewModeSelector />
+            </div>
+
             <div className="mx-2 my-2 border-gray-6 border-t" />
 
-            <DragDropProvider
-              onDragOver={handleDragOver}
-              sensors={[
-                PointerSensor.configure({
-                  activationConstraints: {
-                    distance: { value: 5 },
-                  },
-                }),
-              ]}
-            >
-              {sidebarData.folders.map((folder, index) => {
-                const isExpanded = !collapsedSections.has(folder.id);
-                return (
-                  <div key={folder.id}>
-                    {index > 0 && (
-                      <div className="mx-2 my-2 border-gray-6 border-t" />
-                    )}
-                    <SortableFolderSection
-                      id={folder.id}
-                      index={index}
-                      label={folder.name}
-                      icon={
-                        isExpanded ? (
-                          <FolderOpenIcon size={14} weight="regular" />
-                        ) : (
-                          <FolderIcon size={14} weight="regular" />
-                        )
-                      }
-                      isExpanded={isExpanded}
-                      onToggle={() => toggleSection(folder.id)}
-                      onSettingsClick={() => handleFolderSettings(folder.id)}
-                      onContextMenu={(e) =>
-                        handleFolderContextMenu(folder.id, e)
-                      }
-                    >
-                      <NewTaskItem
-                        onClick={() => handleFolderNewTask(folder.id)}
-                      />
-                      {folder.tasks.map((task) => (
-                        <TaskItem
-                          key={task.id}
-                          id={task.id}
-                          label={task.title}
-                          isActive={sidebarData.activeTaskId === task.id}
-                          worktreeName={
-                            workspaces[task.id]?.worktreeName ?? undefined
-                          }
-                          worktreePath={
-                            workspaces[task.id]?.worktreePath ??
-                            workspaces[task.id]?.folderPath
-                          }
-                          workspaceMode={taskStates[task.id]?.workspaceMode}
-                          lastActivityAt={task.lastActivityAt}
-                          isGenerating={task.isGenerating}
-                          isUnread={task.isUnread}
-                          isPinned={task.isPinned}
-                          onClick={() => handleTaskClick(task.id)}
-                          onContextMenu={(e) =>
-                            handleTaskContextMenu(task.id, e)
-                          }
-                          onDelete={() => handleTaskDelete(task.id)}
-                          onTogglePin={() => handleTaskTogglePin(task.id)}
+            {viewMode === "history" ? (
+              <HistoryView
+                historyData={sidebarData.historyData}
+                activeTaskId={sidebarData.activeTaskId}
+                onTaskClick={handleTaskClick}
+                onTaskContextMenu={handleTaskContextMenu}
+                onTaskDelete={handleTaskDelete}
+                onTaskTogglePin={handleTaskTogglePin}
+              />
+            ) : (
+              <DragDropProvider
+                onDragOver={handleDragOver}
+                sensors={[
+                  PointerSensor.configure({
+                    activationConstraints: {
+                      distance: { value: 5 },
+                    },
+                  }),
+                ]}
+              >
+                {sidebarData.folders.map((folder, index) => {
+                  const isExpanded = !collapsedSections.has(folder.id);
+                  return (
+                    <div key={folder.id}>
+                      {index > 0 && (
+                        <div className="mx-2 my-2 border-gray-6 border-t" />
+                      )}
+                      <SortableFolderSection
+                        id={folder.id}
+                        index={index}
+                        label={folder.name}
+                        icon={
+                          isExpanded ? (
+                            <FolderOpenIcon size={14} weight="regular" />
+                          ) : (
+                            <FolderIcon size={14} weight="regular" />
+                          )
+                        }
+                        isExpanded={isExpanded}
+                        onToggle={() => toggleSection(folder.id)}
+                        onSettingsClick={() => handleFolderSettings(folder.id)}
+                        onContextMenu={(e) =>
+                          handleFolderContextMenu(folder.id, e)
+                        }
+                      >
+                        <NewTaskItem
+                          onClick={() => handleFolderNewTask(folder.id)}
                         />
-                      ))}
-                    </SortableFolderSection>
-                  </div>
-                );
-              })}
-              <DragOverlay>
-                {(source) =>
-                  source?.type === "folder" ? (
-                    <div className="flex w-full items-center gap-1 rounded bg-gray-2 px-2 py-1 font-mono text-[12px] text-gray-11 shadow-lg">
-                      <FolderIcon size={14} weight="regular" />
-                      <span className="font-medium">{source.data?.label}</span>
+                        {folder.tasks.map((task) => (
+                          <TaskItem
+                            key={task.id}
+                            id={task.id}
+                            label={task.title}
+                            isActive={sidebarData.activeTaskId === task.id}
+                            worktreeName={
+                              workspaces[task.id]?.worktreeName ?? undefined
+                            }
+                            worktreePath={
+                              workspaces[task.id]?.worktreePath ??
+                              workspaces[task.id]?.folderPath
+                            }
+                            workspaceMode={taskStates[task.id]?.workspaceMode}
+                            lastActivityAt={task.lastActivityAt}
+                            isGenerating={task.isGenerating}
+                            isUnread={task.isUnread}
+                            isPinned={task.isPinned}
+                            onClick={() => handleTaskClick(task.id)}
+                            onContextMenu={(e) =>
+                              handleTaskContextMenu(task.id, e)
+                            }
+                            onDelete={() => handleTaskDelete(task.id)}
+                            onTogglePin={() => handleTaskTogglePin(task.id)}
+                          />
+                        ))}
+                      </SortableFolderSection>
                     </div>
-                  ) : null
-                }
-              </DragOverlay>
-            </DragDropProvider>
+                  );
+                })}
+                <DragOverlay>
+                  {(source) =>
+                    source?.type === "folder" ? (
+                      <div className="flex w-full items-center gap-1 rounded bg-gray-2 px-2 py-1 font-mono text-[12px] text-gray-11 shadow-lg">
+                        <FolderIcon size={14} weight="regular" />
+                        <span className="font-medium">
+                          {source.data?.label}
+                        </span>
+                      </div>
+                    ) : null
+                  }
+                </DragOverlay>
+              </DragDropProvider>
+            )}
           </Flex>
         </Box>
         <SidebarFooter />