ci: dev version includes UTC time (dev-YYYYMMDD-HHmm)

Phase 1: browse power-up - faceted filters: tags + features (array containment) and min rating on listTools; new ?tags=?features=?minRating= URL params with chips - global Cmd+K command palette (cmdk) with tool search + navigation - mini usefulness/usability bars on grid cards, wide cards and table rows
2026-08-02 11:51:25 +02:00
parent 461eca9a0a
commit 0c27982098
14 changed files with 504 additions and 29 deletions
@@ -0,0 +1,124 @@
+import { useState, useEffect, useRef } from "react";
+import { useLocation } from "wouter";
+import { useListTools, getListToolsQueryKey } from "@workspace/api-client-react";
+import {
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandSeparator,
+} from "@/components/ui/command";
+import { useAuth } from "@/hooks/use-auth";
+import {
+  Compass,
+  PlusCircle,
+  BarChart3,
+  Trash2,
+  ShieldCheck,
+  Wrench,
+  Star,
+} from "lucide-react";
+
+export function CommandPalette() {
+  const [, navigate] = useLocation();
+  const { isAuthenticated, isAdmin, hasFeature } = useAuth();
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState("");
+  const searchTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if (e.key.toLowerCase() === "k" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        setOpen((o) => !o);
+      }
+    };
+    window.addEventListener("keydown", down);
+    return () => window.removeEventListener("keydown", down);
+  }, []);
+
+  useEffect(() => {
+    if (!open) setSearch("");
+  }, [open]);
+
+  const { data: tools } = useListTools(
+    search ? { search } : undefined,
+    {
+      query: {
+        queryKey: getListToolsQueryKey(search ? { search } : undefined),
+        enabled: open && search.trim().length > 0,
+        staleTime: 30_000,
+      },
+    },
+  );
+
+  function go(path: string) {
+    setOpen(false);
+    navigate(path);
+  }
+
+  const showTrash = hasFeature("trash") || isAdmin;
+  const showWatchlist = (hasFeature("watchlist") || isAdmin) && isAuthenticated;
+
+  return (
+    <CommandDialog open={open} onOpenChange={setOpen}>
+      <CommandInput
+        placeholder="Search tools or jump to…"
+        value={search}
+        onValueChange={(v) => {
+          setSearch(v);
+          if (searchTimer.current) clearTimeout(searchTimer.current);
+        }}
+      />
+      <CommandList>
+        <CommandEmpty>
+          {search ? `No tools found for "${search}".` : "Start typing to search tools."}
+        </CommandEmpty>
+        <CommandGroup heading="Navigate">
+          <CommandItem onSelect={() => go("/tools")}>
+            <Compass className="mr-2 h-4 w-4" /> Browse Tools
+          </CommandItem>
+          <CommandItem onSelect={() => go("/tools/new")}>
+            <PlusCircle className="mr-2 h-4 w-4" /> Add a Tool
+          </CommandItem>
+          <CommandItem onSelect={() => go("/analytics")}>
+            <BarChart3 className="mr-2 h-4 w-4" /> Analytics
+          </CommandItem>
+          {showWatchlist && (
+            <CommandItem onSelect={() => go("/watchlist")}>
+              <Star className="mr-2 h-4 w-4" /> My Watchlist
+            </CommandItem>
+          )}
+          {showTrash && (
+            <CommandItem onSelect={() => go("/trash")}>
+              <Trash2 className="mr-2 h-4 w-4" /> Trash
+            </CommandItem>
+          )}
+          {isAdmin && (
+            <CommandItem onSelect={() => go("/admin")}>
+              <ShieldCheck className="mr-2 h-4 w-4" /> Admin
+            </CommandItem>
+          )}
+        </CommandGroup>
+        {search.trim().length > 0 && (
+          <>
+            <CommandSeparator />
+            <CommandGroup heading="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" />
+                  <span className="truncate">{tool.name}</span>
+                  <span className="ml-auto text-xs text-muted-foreground shrink-0">
+                    {tool.avgCombined ? `${tool.avgCombined.toFixed(1)}★` : ""}
+                  </span>
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </>
+        )}
+      </CommandList>
+    </CommandDialog>
+  );
+}