feat: show my tasks by default (#106)

Author: joshsny

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

@@ -1,22 +1,21 @@
 import { SidebarTreeItem } from "@components/ui/sidebar/SidebarTreeItem";
 import { useSidebarMenuData } from "@components/ui/sidebar/UseSidebarMenuData";
 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 { useMeQuery } from "@hooks/useMeQuery";
 import { ArrowsInSimpleIcon, ArrowsOutSimpleIcon } from "@phosphor-icons/react";
 import { Box, Flex, IconButton, Tooltip } from "@radix-ui/themes";
 import type { Task } from "@shared/types";
 import { useLayoutStore } from "@stores/layoutStore";
 import { useSidebarStore } from "@stores/sidebarStore";
 import { useTabStore } from "@stores/tabStore";
 import type React from "react";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 
 export const SidebarContent: React.FC = () => {
-  const { client } = useAuthStore();
   const { tabs, createTab, setActiveTab, activeTabId } = useTabStore();
   const expandedNodesArray = useSidebarStore((state) => state.expandedNodes);
   const { toggleNode, expandAll, collapseAll } = useSidebarStore();
@@ -26,26 +25,12 @@ export const SidebarContent: React.FC = () => {
   const { isLoading } = useTasks();
   const activeFilters = useTaskStore((state) => state.activeFilters);
   const setActiveFilters = useTaskStore((state) => state.setActiveFilters);
-  const [userName, setUserName] = useState<string>("Loading...");
+  const { data: currentUser } = useMeQuery();
   const [hoveredLineIndex, setHoveredLineIndex] = useState<number | null>(null);
 
   const expandedNodes = new Set(expandedNodesArray);
   const activeTab = tabs.find((tab) => tab.id === activeTabId);
-
-  useEffect(() => {
-    async function fetchUser() {
-      if (client) {
-        try {
-          const user = await client.getCurrentUser();
-          setUserName(user.first_name || user.email || "Account");
-        } catch (error) {
-          console.error("Failed to fetch user:", error);
-          setUserName("Account");
-        }
-      }
-    }
-    fetchUser();
-  }, [client]);
+  const userName = currentUser?.first_name || currentUser?.email || "Account";
 
   const handleNavigate = (
     type: "task-list" | "recordings" | "notetaker" | "settings",
@@ -106,6 +91,8 @@ export const SidebarContent: React.FC = () => {
     activeTab,
     isLoading,
     activeFilters,
+    currentUser,
+    setActiveFilters,
     onNavigate: handleNavigate,
     onTaskClick: handleTaskClick,
     onCreateTask: handleCreateTask,

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

@@ -1,24 +1,33 @@
+import type { Schemas } from "@api/generated";
 import type { TreeNode } from "@components/ui/sidebar/Types";
 import { useTasks } from "@features/tasks/hooks/useTasks";
 import type { ActiveFilters } from "@features/tasks/stores/taskStore";
+import { getUserDisplayName } from "@hooks/useUsers";
+import { filtersMatch } from "@lib/filters";
 import {
   CheckCircleIcon,
   CircleIcon,
   FolderIcon,
   GearIcon,
   ListNumbersIcon,
   PlusIcon,
-  SquaresFourIcon,
   VideoIcon,
   XCircleIcon,
 } from "@phosphor-icons/react";
 import type { TabState, Task } from "@shared/types";
 
+interface TaskView {
+  label: string;
+  filters: ActiveFilters;
+}
+
 interface UseSidebarMenuDataProps {
   userName: string;
   activeTab: TabState | undefined;
   isLoading: boolean;
   activeFilters: ActiveFilters;
+  currentUser: Schemas.User | undefined;
+  setActiveFilters: (filters: ActiveFilters) => void;
   onNavigate: (
     type: "task-list" | "recordings" | "notetaker" | "settings",
     title: string,
@@ -58,6 +67,8 @@ export function useSidebarMenuData({
   activeTab,
   isLoading,
   activeFilters,
+  currentUser,
+  setActiveFilters,
   onNavigate,
   onTaskClick,
   onCreateTask,
@@ -89,22 +100,44 @@ export function useSidebarMenuData({
       ? activeRepositoryFilters[0].value
       : null;
 
+  const views: TaskView[] = [];
+
+  if (currentUser) {
+    const userDisplayName = getUserDisplayName(currentUser);
+    views.push({
+      label: "My tasks",
+      filters: {
+        creator: [{ value: userDisplayName, operator: "is" }],
+      },
+    });
+  }
+
+  views.push({
+    label: "All tasks",
+    filters: {},
+  });
+
   return {
     label: userName,
     children: [
-      {
-        label: "My tasks",
-        icon: (
-          <ListNumbersIcon
-            size={12}
-            weight={activeTab?.type === "task-list" ? "fill" : "regular"}
-          />
-        ),
-        action: () => onNavigate("task-list", "Tasks"),
-        isActive: activeTab?.type === "task-list",
-        hoverAction: onCreateTask,
-        hoverIcon: <PlusIcon size={12} />,
-      },
+      ...views.map((view): TreeNode => {
+        const isActive =
+          activeTab?.type === "task-list" &&
+          filtersMatch(activeFilters, view.filters);
+        return {
+          label: view.label,
+          icon: (
+            <ListNumbersIcon size={12} weight={isActive ? "fill" : "regular"} />
+          ),
+          action: () => {
+            setActiveFilters(view.filters);
+            onNavigate("task-list", "Tasks");
+          },
+          isActive,
+          hoverAction: onCreateTask,
+          hoverIcon: <PlusIcon size={12} />,
+        };
+      }),
       {
         label: "Notetaker",
         icon: (
@@ -155,11 +188,6 @@ export function useSidebarMenuData({
             },
           ]
         : []),
-      {
-        label: "Views",
-        icon: <SquaresFourIcon size={12} />,
-        children: [{ label: "Work in progress" }],
-      },
       {
         label: "Projects",
         icon: <FolderIcon size={12} />,

src/renderer/lib/filters.ts

@@ -0,0 +1,20 @@
+import type { ActiveFilters } from "@features/tasks/stores/taskStore";
+
+const normalizeFilters = (filters: ActiveFilters) => {
+  const sorted: Record<string, Array<{ value: string; operator: string }>> = {};
+  for (const [key, values] of Object.entries(filters)) {
+    if (values && values.length > 0) {
+      sorted[key] = [...values].sort((a, b) =>
+        `${a.value}:${a.operator}`.localeCompare(`${b.value}:${b.operator}`),
+      );
+    }
+  }
+  return JSON.stringify(sorted);
+};
+
+export function filtersMatch(
+  filters1: ActiveFilters,
+  filters2: ActiveFilters,
+): boolean {
+  return normalizeFilters(filters1) === normalizeFilters(filters2);
+}

tsconfig.json

@@ -27,7 +27,8 @@
       "@components/*": ["renderer/components/*"],
       "@stores/*": ["renderer/stores/*"],
       "@hooks/*": ["renderer/hooks/*"],
-      "@utils/*": ["renderer/utils/*"]
+      "@utils/*": ["renderer/utils/*"],
+      "@lib/*": ["renderer/lib/*"]
     },
     "resolveJsonModule": true,
     "skipLibCheck": true,