fix(nav): restore sidebar collapse state from cookie; cmd+k search shows tools only while typing; mobile header search

artifacts/toolrate/src/components/command-palette.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect } from "react";
 import { useLocation } from "wouter";
 import { useListTools, getListToolsQueryKey } from "@workspace/api-client-react";
 import {
@@ -22,6 +22,7 @@ import {
   Wrench,
   Star,
   History,
+  Search,
 } from "lucide-react";
 
 const openRequesters = new Set<() => void>();
@@ -37,7 +38,6 @@ export function CommandPalette() {
   const [open, setOpen] = useState(false);
   const [search, setSearch] = useState("");
   const [recent, setRecent] = useState(() => getRecentTools());
-  const searchTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   useEffect(() => {
     const request = () => setOpen(true);
@@ -66,12 +66,14 @@ export function CommandPalette() {
     }
   }, [open]);
 
+  const searching = search.trim().length > 0;
+
   const { data: tools } = useListTools(
-    search ? { search } : undefined,
+    searching ? { search } : undefined,
     {
       query: {
-        queryKey: getListToolsQueryKey(search ? { search } : undefined),
-        enabled: open && search.trim().length > 0,
+        queryKey: getListToolsQueryKey(searching ? { search } : undefined),
+        enabled: open && searching,
         staleTime: 30_000,
       },
     },
@@ -84,67 +86,68 @@ export function CommandPalette() {
 
   const showTrash = hasFeature("trash") || isAdmin;
   const showWatchlist = (hasFeature("watchlist") || isAdmin) && isAuthenticated;
-  const searching = search.trim().length > 0;
 
   return (
     <CommandDialog open={open} onOpenChange={setOpen}>
       <CommandInput
+        autoFocus
         placeholder={`${t("common.search")}…`}
         value={search}
-        onValueChange={(v) => {
-          setSearch(v);
-          if (searchTimer.current) clearTimeout(searchTimer.current);
-        }}
+        onValueChange={setSearch}
       />
       <CommandList>
         <CommandEmpty>
           {searching ? t("command.noResults", { query: search }) : t("command.startTyping")}
         </CommandEmpty>
 
-        {!searching && recent.length > 0 && (
-          <CommandGroup heading={t("command.recent")}>
-            {recent.map((tool) => (
-              <CommandItem key={tool.id} onSelect={() => go(`/tools/${tool.id}`)}>
-                <History className="mr-2 h-4 w-4 text-muted-foreground" />
-                <span className="truncate">{tool.name}</span>
+        {!searching && (
+          <>
+            {recent.length > 0 && (
+              <CommandGroup heading={t("command.recent")}>
+                {recent.map((tool) => (
+                  <CommandItem key={tool.id} onSelect={() => go(`/tools/${tool.id}`)}>
+                    <History className="mr-2 h-4 w-4 text-muted-foreground" />
+                    <span className="truncate">{tool.name}</span>
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            )}
+            <CommandGroup heading={t("command.navigate")}>
+              <CommandItem onSelect={() => go("/tools")}>
+                <Compass className="mr-2 h-4 w-4" /> {t("nav.browseTools")}
               </CommandItem>
-            ))}
-          </CommandGroup>
+              <CommandItem onSelect={() => go("/tools/new")}>
+                <PlusCircle className="mr-2 h-4 w-4" /> {t("nav.addTool")}
+              </CommandItem>
+              <CommandItem onSelect={() => go("/analytics")}>
+                <BarChart3 className="mr-2 h-4 w-4" /> {t("nav.analytics")}
+              </CommandItem>
+              {showWatchlist && (
+                <CommandItem onSelect={() => go("/watchlist")}>
+                  <Star className="mr-2 h-4 w-4" /> {t("nav.watchlist")}
+                </CommandItem>
+              )}
+              {showTrash && (
+                <CommandItem onSelect={() => go("/trash")}>
+                  <Trash2 className="mr-2 h-4 w-4" /> {t("nav.trash")}
+                </CommandItem>
+              )}
+              {isAdmin && (
+                <CommandItem onSelect={() => go("/admin")}>
+                  <ShieldCheck className="mr-2 h-4 w-4" /> {t("nav.admin")}
+                </CommandItem>
+              )}
+            </CommandGroup>
+          </>
         )}
 
-        <CommandGroup heading={t("command.navigate")}>
-          <CommandItem onSelect={() => go("/tools")}>
-            <Compass className="mr-2 h-4 w-4" /> {t("nav.browseTools")}
-          </CommandItem>
-          <CommandItem onSelect={() => go("/tools/new")}>
-            <PlusCircle className="mr-2 h-4 w-4" /> {t("nav.addTool")}
-          </CommandItem>
-          <CommandItem onSelect={() => go("/analytics")}>
-            <BarChart3 className="mr-2 h-4 w-4" /> {t("nav.analytics")}
-          </CommandItem>
-          {showWatchlist && (
-            <CommandItem onSelect={() => go("/watchlist")}>
-              <Star className="mr-2 h-4 w-4" /> {t("nav.watchlist")}
-            </CommandItem>
-          )}
-          {showTrash && (
-            <CommandItem onSelect={() => go("/trash")}>
-              <Trash2 className="mr-2 h-4 w-4" /> {t("nav.trash")}
-            </CommandItem>
-          )}
-          {isAdmin && (
-            <CommandItem onSelect={() => go("/admin")}>
-              <ShieldCheck className="mr-2 h-4 w-4" /> {t("nav.admin")}
-            </CommandItem>
-          )}
-        </CommandGroup>
         {searching && (
           <>
             <CommandSeparator />
             <CommandGroup heading={t("command.tools")}>
               {(tools ?? []).slice(0, 10).map((tool) => (
                 <CommandItem key={tool.id} onSelect={() => go(`/tools/${tool.id}`)}>
-                  <Wrench className="mr-2 h-4 w-4 shrink-0 text-muted-foreground" />
+                  <Search className="mr-2 h-4 w-4 shrink-0 text-muted-foreground" />
                   <span className="truncate">{tool.name}</span>
                   <span className="ml-auto text-xs text-muted-foreground shrink-0">
                     {tool.avgCombined ? `${tool.avgCombined.toFixed(1)}★` : ""}