From ab24f99b90a73646b8fa480e757ea77eecae394f Mon Sep 17 00:00:00 2001
From: opencode <opencode@kubebase.de>
Date: Sun, 2 Aug 2026 15:08:37 +0200
Subject: [PATCH] fix(nav): restore sidebar collapse state from cookie; cmd+k
 search shows tools only while typing; mobile header search

---
 .../src/components/command-palette.tsx        | 93 ++++++++++---------
 artifacts/toolrate/src/components/layout.tsx  | 14 ++-
 .../toolrate/src/components/ui/sidebar.tsx    | 14 ++-
 3 files changed, 73 insertions(+), 48 deletions(-)

diff --git a/artifacts/toolrate/src/components/command-palette.tsx b/artifacts/toolrate/src/components/command-palette.tsx
index 0b5eda2..7f4e39c 100644
--- a/artifacts/toolrate/src/components/command-palette.tsx
+++ b/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)}★` : ""}
diff --git a/artifacts/toolrate/src/components/layout.tsx b/artifacts/toolrate/src/components/layout.tsx
index b871be7..acd96ac 100644
--- a/artifacts/toolrate/src/components/layout.tsx
+++ b/artifacts/toolrate/src/components/layout.tsx
@@ -1,11 +1,11 @@
 import { Link, useLocation } from "wouter";
-import { LayoutDashboard, Wrench, PlusCircle, BarChart3, LogIn, LogOut, ShieldCheck, AlertTriangle, Trash2, Bookmark } from "lucide-react";
+import { LayoutDashboard, Wrench, PlusCircle, BarChart3, LogIn, LogOut, ShieldCheck, AlertTriangle, Trash2, Bookmark, Search } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import { useAuth } from "@/hooks/use-auth";
 import { useGetVersion, getGetVersionQueryKey } from "@workspace/api-client-react";
 import { Button } from "@/components/ui/button";
 import { ThemeToggle } from "@/components/theme-toggle";
-import { CommandPalette } from "@/components/command-palette";
+import { CommandPalette, requestOpenCommandPalette } from "@/components/command-palette";
 import { LanguageSwitcher } from "@/components/language-switcher";
 import { UserMenu } from "@/components/user-menu";
 import { Breadcrumbs } from "@/components/breadcrumbs";
@@ -149,6 +149,16 @@ export function Layout({ children }: { children: React.ReactNode }) {
           </div>
           <div className="flex items-center gap-1.5 shrink-0">
             <HeaderSearch />
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-9 w-9 md:hidden"
+              onClick={requestOpenCommandPalette}
+              aria-label={t("nav.search")}
+              data-testid="button-search-mobile"
+            >
+              <Search className="w-4 h-4" />
+            </Button>
             <LanguageSwitcher />
             <ThemeToggle />
             {!isLoading && (
diff --git a/artifacts/toolrate/src/components/ui/sidebar.tsx b/artifacts/toolrate/src/components/ui/sidebar.tsx
index 41362f6..1bd0a82 100644
--- a/artifacts/toolrate/src/components/ui/sidebar.tsx
+++ b/artifacts/toolrate/src/components/ui/sidebar.tsx
@@ -53,6 +53,15 @@ function useSidebar() {
   return context
 }
 
+function getSidebarCookie(): boolean | null {
+  if (typeof document === "undefined") return null;
+  const match = document.cookie.match(
+    new RegExp(`(?:^|; )${SIDEBAR_COOKIE_NAME}=([^;]*)`)
+  );
+  if (!match) return null;
+  return match[1] === "true";
+}
+
 function SidebarProvider({
   defaultOpen = true,
   open: openProp,
@@ -71,7 +80,10 @@ function SidebarProvider({
 
   // This is the internal state of the sidebar.
   // We use openProp and setOpenProp for control from outside the component.
-  const [_open, _setOpen] = React.useState(defaultOpen)
+  const [_open, _setOpen] = React.useState(() => {
+    const stored = getSidebarCookie()
+    return stored !== null ? stored : defaultOpen
+  })
   const open = openProp ?? _open
   const setOpen = React.useCallback(
     (value: boolean | ((value: boolean) => boolean)) => {