feat: improve command menu and fix session view theming

Command Menu improvements:
- Remove tasks list (was showing other users' tasks)
- Remove "Go to tasks" navigation option
- Add Navigation group with Home and Settings
- Add Actions group with theme toggle, sidebar toggles, and new task
- Add folder search - typing a folder name shows "New task in folder" options
- Clean up code by replacing repetitive callbacks with runAndClose helper

Session View:
- Fix light mode background (was dark, now white in light mode)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

Author: jonathanlab

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

@@ -1,11 +1,20 @@
 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 { useCallback, useEffect, useRef } from "react";
+import { useRegisteredFoldersStore } from "@stores/registeredFoldersStore";
+import { useThemeStore } from "@stores/themeStore";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 
 interface CommandMenuProps {
@@ -14,38 +23,52 @@ 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);
+  const [searchQuery, setSearchQuery] = useState("");
 
-  // 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],
+  );
+
+  useEffect(() => {
+    if (!open) {
+      setSearchQuery("");
+    }
+  }, [open]);
+
+  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 +77,21 @@ 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);
-  };
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [open, close]);
 
-  const handleNavigateToTaskClick = (task: Task) => {
-    navigateToTask(task);
-    onOpenChange(false);
-  };
+  const matchingFolders = useMemo(() => {
+    if (!searchQuery.trim()) return [];
+    const query = searchQuery.toLowerCase();
+    return folders.filter((folder) =>
+      folder.name.toLowerCase().includes(query),
+    );
+  }, [folders, searchQuery]);
 
   if (!open) return null;
 
@@ -95,53 +109,81 @@ 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"
+              onValueChange={setSearchQuery}
             />
           </div>
 
           <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) => (
+            {matchingFolders.length > 0 && (
+              <Command.Group heading="New task in folder">
+                {matchingFolders.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`}
+                    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({
         <TurnView turn={turn} repoPath={repoPath} isCloud={isCloud} />
       )}
       autoScrollToBottom
-      className="flex-1 bg-blackA-5 p-2 pb-16"
+      className="flex-1 bg-white p-2 pb-16 dark:bg-gray-1"
       gap={12}
       footer={
         <SessionFooter