feat: filter by project in sidebar (#101)

Author: jonathanlab

src/renderer/components/ui/sidebar/SidebarContent.tsx

@@ -4,6 +4,8 @@ import { buildTreeLines, getAllNodeIds } from "@components/ui/sidebar/Utils";
 import { useAuthStore } from "@features/auth/stores/authStore";
 import { useAudioRecorder } from "@features/recordings/hooks/useAudioRecorder";
 import { useRecordings } from "@features/recordings/hooks/useRecordings";
+import { useTasks } from "@features/tasks/hooks/useTasks";
+import { useTaskStore } from "@features/tasks/stores/taskStore";
 import { ArrowsInSimpleIcon, ArrowsOutSimpleIcon } from "@phosphor-icons/react";
 import { Box, Flex, IconButton, Tooltip } from "@radix-ui/themes";
 import type { Task } from "@shared/types";
@@ -21,6 +23,9 @@ export const SidebarContent: React.FC = () => {
   const { setCliMode } = useLayoutStore();
   const { saveRecording } = useRecordings();
   const { startRecording, stopRecording } = useAudioRecorder(saveRecording);
+  const { isLoading } = useTasks();
+  const activeFilters = useTaskStore((state) => state.activeFilters);
+  const setActiveFilters = useTaskStore((state) => state.setActiveFilters);
   const [userName, setUserName] = useState<string>("Loading...");
   const [hoveredLineIndex, setHoveredLineIndex] = useState<number | null>(null);
 
@@ -89,14 +94,24 @@ export const SidebarContent: React.FC = () => {
     setCliMode("task");
   };
 
+  const handleProjectClick = (repository: string) => {
+    const newActiveFilters = { ...activeFilters };
+    newActiveFilters.repository = [{ value: repository, operator: "is" }];
+    setActiveFilters(newActiveFilters);
+    handleNavigate("task-list", "Tasks");
+  };
+
   const menuData = useSidebarMenuData({
     userName,
     activeTab,
+    isLoading,
+    activeFilters,
     onNavigate: handleNavigate,
     onTaskClick: handleTaskClick,
     onCreateTask: handleCreateTask,
     onStartRecording: handleStartRecording,
     onStopRecording: handleStopRecording,
+    onProjectClick: handleProjectClick,
   });
 
   const treeLines = buildTreeLines([menuData], "", "", expandedNodes, 0);

src/renderer/components/ui/sidebar/UseSidebarMenuData.tsx

@@ -1,5 +1,6 @@
 import type { TreeNode } from "@components/ui/sidebar/Types";
 import { useTasks } from "@features/tasks/hooks/useTasks";
+import type { ActiveFilters } from "@features/tasks/stores/taskStore";
 import {
   CheckCircleIcon,
   CircleIcon,
@@ -16,6 +17,8 @@ import type { TabState, Task } from "@shared/types";
 interface UseSidebarMenuDataProps {
   userName: string;
   activeTab: TabState | undefined;
+  isLoading: boolean;
+  activeFilters: ActiveFilters;
   onNavigate: (
     type: "task-list" | "recordings" | "notetaker" | "settings",
     title: string,
@@ -24,6 +27,7 @@ interface UseSidebarMenuDataProps {
   onCreateTask: () => void;
   onStartRecording: () => void;
   onStopRecording: () => void;
+  onProjectClick: (repository: string) => void;
 }
 
 function getStatusIcon(status?: string) {
@@ -52,9 +56,12 @@ function getStatusIcon(status?: string) {
 export function useSidebarMenuData({
   userName,
   activeTab,
+  isLoading,
+  activeFilters,
   onNavigate,
   onTaskClick,
   onCreateTask,
+  onProjectClick,
 }: UseSidebarMenuDataProps): TreeNode {
   const { data: allTasks = [] } = useTasks();
   const relevantTasks = allTasks
@@ -64,6 +71,24 @@ export function useSidebarMenuData({
     )
     .slice(0, 10);
 
+  const repositoryMap = new Map<string, { fullPath: string; name: string }>();
+  for (const task of allTasks) {
+    const { organization, repository } = task.repository_config || {};
+    if (organization && repository) {
+      const fullPath = `${organization}/${repository}`;
+      repositoryMap.set(fullPath, { fullPath, name: repository });
+    }
+  }
+
+  const repositories = Array.from(repositoryMap.values()).sort((a, b) =>
+    a.name.localeCompare(b.name),
+  );
+  const activeRepositoryFilters = activeFilters.repository || [];
+  const activeRepositoryValue =
+    activeRepositoryFilters.length === 1
+      ? activeRepositoryFilters[0].value
+      : null;
+
   return {
     label: userName,
     children: [
@@ -138,11 +163,17 @@ export function useSidebarMenuData({
       {
         label: "Projects",
         icon: <FolderIcon size={12} />,
-        children: [
-          { label: "Array" },
-          { label: "posthog" },
-          { label: "agent" },
-        ],
+        children: isLoading
+          ? [{ label: "Loading..." }]
+          : repositories.length > 0
+            ? repositories.map(
+                (repo): TreeNode => ({
+                  label: repo.name,
+                  action: () => onProjectClick(repo.fullPath),
+                  isActive: activeRepositoryValue === repo.fullPath,
+                }),
+              )
+            : [{ label: "No projects found" }],
       },
     ],
   };