feat: improve command menu and fix session view theming (#264)

Co-authored-by: Claude <[email protected]>

Author: jonathanlab

apps/array/src/renderer/features/command/components/CommandMenu.tsx

@@ -1,10 +1,19 @@
 import { Command } from "@features/command/components/Command";
 import { CommandKeyHints } from "@features/command/components/CommandKeyHints";
-import { useTasks } from "@features/tasks/hooks/useTasks";
-import { FileTextIcon, ListBulletIcon } from "@radix-ui/react-icons";
+import { useRightSidebarStore } from "@features/right-sidebar";
+import { useSidebarStore } from "@features/sidebar/stores/sidebarStore";
+import {
+  FileTextIcon,
+  GearIcon,
+  HomeIcon,
+  MoonIcon,
+  SunIcon,
+  ViewVerticalIcon,
+} from "@radix-ui/react-icons";
 import { Flex, Text } from "@radix-ui/themes";
-import type { Task } from "@shared/types";
 import { useNavigationStore } from "@stores/navigationStore";
+import { useRegisteredFoldersStore } from "@stores/registeredFoldersStore";
+import { useThemeStore } from "@stores/themeStore";
 import { useCallback, useEffect, useRef } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 
@@ -14,38 +23,45 @@ interface CommandMenuProps {
 }
 
 export function CommandMenu({ open, onOpenChange }: CommandMenuProps) {
-  const { navigateToTaskList, navigateToTask, navigateToTaskInput } =
-    useNavigationStore();
-  const { data: tasks = [] } = useTasks();
+  const { navigateToTaskInput, navigateToSettings } = useNavigationStore();
+  const { folders } = useRegisteredFoldersStore();
+  const { isDarkMode, toggleDarkMode } = useThemeStore();
+  const toggleLeftSidebar = useSidebarStore((state) => state.toggle);
+  const toggleRightSidebar = useRightSidebarStore((state) => state.toggle);
   const commandRef = useRef<HTMLDivElement>(null);
 
-  // Close handlers
-  const handleClose = useCallback(() => {
-    onOpenChange(false);
-  }, [onOpenChange]);
+  const close = useCallback(() => onOpenChange(false), [onOpenChange]);
 
-  useHotkeys("escape", handleClose, {
+  const runAndClose = useCallback(
+    <T extends unknown[]>(fn: (...args: T) => void) =>
+      (...args: T) => {
+        fn(...args);
+        close();
+      },
+    [close],
+  );
+
+  useHotkeys("escape", close, {
     enabled: open,
     enableOnContentEditable: true,
     enableOnFormTags: true,
     preventDefault: true,
   });
 
-  useHotkeys("mod+k", handleClose, {
+  useHotkeys("mod+k", close, {
     enabled: open,
     enableOnContentEditable: true,
     enableOnFormTags: true,
     preventDefault: true,
   });
 
-  useHotkeys("mod+p", handleClose, {
+  useHotkeys("mod+p", close, {
     enabled: open,
     enableOnContentEditable: true,
     enableOnFormTags: true,
     preventDefault: true,
   });
 
-  // Handle click outside
   useEffect(() => {
     if (!open) return;
 
@@ -54,30 +70,13 @@ export function CommandMenu({ open, onOpenChange }: CommandMenuProps) {
         commandRef.current &&
         !commandRef.current.contains(event.target as Node)
       ) {
-        onOpenChange(false);
+        close();
       }
     };
 
     document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [open, onOpenChange]);
-
-  const handleNavigateToTasks = () => {
-    navigateToTaskList();
-    onOpenChange(false);
-  };
-
-  const handleCreateTask = () => {
-    navigateToTaskInput();
-    onOpenChange(false);
-  };
-
-  const handleNavigateToTaskClick = (task: Task) => {
-    navigateToTask(task);
-    onOpenChange(false);
-  };
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [open, close]);
 
   if (!open) return null;
 
@@ -95,7 +94,7 @@ export function CommandMenu({ open, onOpenChange }: CommandMenuProps) {
         <Command.Root className="min-h-0 flex-1">
           <div className="flex items-center border-gray-6 border-b px-3">
             <Command.Input
-              placeholder="Search for tasks, navigate to sections..."
+              placeholder="Search commands..."
               autoFocus={true}
               style={{ fontSize: "12px" }}
               className="w-full bg-transparent py-3 outline-none placeholder:text-gray-9"
@@ -105,43 +104,70 @@ export function CommandMenu({ open, onOpenChange }: CommandMenuProps) {
           <Command.List style={{ maxHeight: "400px" }}>
             <Command.Empty>No results found.</Command.Empty>
 
-            <Command.Group heading="Actions">
-              <Command.Item value="Create new task" onSelect={handleCreateTask}>
-                <FileTextIcon className="mr-3 h-3 w-3 text-gray-11" />
-                <Text size="1">Create new task</Text>
+            <Command.Group heading="Navigation">
+              <Command.Item
+                value="Home"
+                onSelect={runAndClose(navigateToTaskInput)}
+              >
+                <HomeIcon className="mr-3 h-3 w-3 text-gray-11" />
+                <Text size="1">Home</Text>
+              </Command.Item>
+              <Command.Item
+                value="Settings"
+                onSelect={runAndClose(navigateToSettings)}
+              >
+                <GearIcon className="mr-3 h-3 w-3 text-gray-11" />
+                <Text size="1">Settings</Text>
               </Command.Item>
             </Command.Group>
 
-            <Command.Group heading="Navigation">
+            <Command.Group heading="Actions">
               <Command.Item
-                value="Go to tasks"
-                onSelect={handleNavigateToTasks}
+                value="Toggle theme dark light mode"
+                onSelect={runAndClose(toggleDarkMode)}
               >
-                <ListBulletIcon className="mr-3 h-3 w-3 text-gray-11" />
-                <Text size="1">Go to tasks</Text>
+                {isDarkMode ? (
+                  <SunIcon className="mr-3 h-3 w-3 text-gray-11" />
+                ) : (
+                  <MoonIcon className="mr-3 h-3 w-3 text-gray-11" />
+                )}
+                <Text size="1">Toggle theme</Text>
+              </Command.Item>
+              <Command.Item
+                value="Toggle left sidebar"
+                onSelect={runAndClose(toggleLeftSidebar)}
+              >
+                <ViewVerticalIcon className="mr-3 h-3 w-3 text-gray-11" />
+                <Text size="1">Toggle left sidebar</Text>
+              </Command.Item>
+              <Command.Item
+                value="Toggle right sidebar"
+                onSelect={runAndClose(toggleRightSidebar)}
+              >
+                <ViewVerticalIcon className="mr-3 h-3 w-3 rotate-180 text-gray-11" />
+                <Text size="1">Toggle right sidebar</Text>
+              </Command.Item>
+              <Command.Item
+                value="Create new task"
+                onSelect={runAndClose(navigateToTaskInput)}
+              >
+                <FileTextIcon className="mr-3 h-3 w-3 text-gray-11" />
+                <Text size="1">New task</Text>
               </Command.Item>
             </Command.Group>
 
-            {tasks.length > 0 && (
-              <Command.Group heading="Tasks">
-                {tasks.map((task) => (
+            {folders.length > 0 && (
+              <Command.Group heading="New task in folder">
+                {folders.map((folder) => (
                   <Command.Item
-                    key={task.id}
-                    value={`${task.id} ${task.title}`}
-                    onSelect={() => handleNavigateToTaskClick(task)}
-                    className="items-start"
+                    key={folder.id}
+                    value={`New task in ${folder.name} folder ${folder.path}`}
+                    onSelect={runAndClose(() => navigateToTaskInput(folder.id))}
                   >
-                    <FileTextIcon className="mt-0.5 mr-3 h-4 w-4 flex-shrink-0 text-gray-11" />
-                    <Flex direction="column" flexGrow="1" className="min-w-0">
-                      <Text size="1" weight="medium" className="truncate">
-                        {task.title}
-                      </Text>
-                      {task.description && (
-                        <Text size="1" color="gray" className="mt-1 truncate">
-                          {task.description}
-                        </Text>
-                      )}
-                    </Flex>
+                    <FileTextIcon className="mr-3 h-3 w-3 text-gray-11" />
+                    <Text size="1">
+                      New task in <Text weight="bold">{folder.name}</Text>
+                    </Text>
                   </Command.Item>
                 ))}
               </Command.Group>

apps/array/src/renderer/features/sessions/components/ConversationView.tsx

@@ -60,7 +60,7 @@ export function ConversationView({
   return (
     <div
       ref={scrollRef}
-      className="scrollbar-hide flex-1 overflow-auto bg-blackA-5 p-2 pb-16"
+      className="scrollbar-hide flex-1 overflow-auto bg-white p-2 pb-16 dark:bg-gray-1"
     >
       <div className="flex flex-col gap-3">
         {turns.map((turn) => (