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>
+  );
+}
@@ -0,0 +1,119 @@
+import { useListAllTags, useListAllFeatures } from "@workspace/api-client-react";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+import { Slider } from "@/components/ui/slider";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { SlidersHorizontal, X } from "lucide-react";
+
+export function FilterPopover({
+  tags,
+  features,
+  minRating,
+  onChange,
+  onClear,
+  activeCount,
+}: {
+  tags: string[];
+  features: string[];
+  minRating: number | null;
+  onChange: (patch: { tags?: string[]; features?: string[]; minRating?: number | null }) => void;
+  onClear: () => void;
+  activeCount: number;
+}) {
+  const { data: allTags } = useListAllTags();
+  const { data: allFeatures } = useListAllFeatures();
+
+  function toggle(list: string[], value: string): string[] {
+    return list.includes(value) ? list.filter((v) => v !== value) : [...list, value];
+  }
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="outline" size="sm" className="gap-2" data-testid="button-filters">
+          <SlidersHorizontal className="w-4 h-4" />
+          Filters
+          {activeCount > 0 && (
+            <span className="rounded-full bg-primary text-primary-foreground text-[10px] font-medium px-1.5 py-0.5 min-w-[1.25rem] text-center">
+              {activeCount}
+            </span>
+          )}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[340px]" align="start">
+        <div className="space-y-4">
+          {allTags && allTags.length > 0 && (
+            <div>
+              <h4 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-2">Tags</h4>
+              <ScrollArea className="h-40">
+                <div className="space-y-1.5 pr-2">
+                  {allTags.map((t) => (
+                    <Label key={t} className="flex items-center gap-2 text-sm font-normal cursor-pointer">
+                      <Checkbox
+                        checked={tags.includes(t)}
+                        onCheckedChange={() => onChange({ tags: toggle(tags, t) })}
+                      />
+                      {t}
+                    </Label>
+                  ))}
+                </div>
+              </ScrollArea>
+            </div>
+          )}
+          {allFeatures && allFeatures.length > 0 && (
+            <div>
+              <h4 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-2">Features</h4>
+              <ScrollArea className="h-40">
+                <div className="space-y-1.5 pr-2">
+                  {allFeatures.map((f) => (
+                    <Label key={f} className="flex items-center gap-2 text-sm font-normal cursor-pointer">
+                      <Checkbox
+                        checked={features.includes(f)}
+                        onCheckedChange={() => onChange({ features: toggle(features, f) })}
+                      />
+                      {f}
+                    </Label>
+                  ))}
+                </div>
+              </ScrollArea>
+            </div>
+          )}
+          <div>
+            <div className="flex items-center justify-between mb-2">
+              <h4 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Min. rating</h4>
+              {minRating != null && (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-6 px-1 text-xs text-muted-foreground"
+                  onClick={() => onChange({ minRating: null })}
+                >
+                  <X className="w-3 h-3" />
+                </Button>
+              )}
+            </div>
+            <div className="flex items-center gap-3">
+              <Slider
+                className="flex-1"
+                min={0}
+                max={5}
+                step={0.5}
+                value={[minRating ?? 0]}
+                onValueChange={([v]) => onChange({ minRating: v })}
+                aria-label="Minimum rating"
+              />
+              <span className="text-sm tabular-nums w-8 text-right text-muted-foreground">
+                {minRating != null ? `${minRating.toFixed(1)}+` : "Any"}
+              </span>
+            </div>
+          </div>
+          <Button variant="outline" size="sm" className="w-full" onClick={onClear}>
+            Clear filters
+          </Button>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
@@ -5,6 +5,7 @@ import { useGetVersion, getGetVersionQueryKey } from "@workspace/api-client-reac
 import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
 import { ThemeToggle } from "@/components/theme-toggle";
+import { CommandPalette } from "@/components/command-palette";

 export function Layout({ children }: { children: React.ReactNode }) {
  const [location] = useLocation();
@@ -29,6 +30,7 @@ export function Layout({ children }: { children: React.ReactNode }) {

  return (
    <div className="flex min-h-screen bg-background text-foreground">
+      <CommandPalette />
      <aside className="w-64 border-r bg-card flex flex-col hidden md:flex">
        <div className="p-6 border-b">
          <Link href="/" className="flex items-center gap-2 text-primary font-bold text-xl">
@@ -0,0 +1,73 @@
+import { cn } from "@/lib/utils";
+
+function pct(v: number | null | undefined): number {
+  if (v == null) return 0;
+  return Math.max(0, Math.min(5, v)) / 5 * 100;
+}
+
+export function MiniBars({
+  usefulness,
+  usability,
+  className,
+}: {
+  usefulness: number | null | undefined;
+  usability: number | null | undefined;
+  className?: string;
+}) {
+  const rows = [
+    { label: "Usefulness", value: usefulness },
+    { label: "Usability", value: usability },
+  ];
+  return (
+    <div className={cn("space-y-1 w-full", className)}>
+      {rows.map(({ label, value }) => (
+        <div
+          key={label}
+          className="flex items-center gap-2"
+          title={`${label}: ${value != null ? value.toFixed(1) : "N/A"} / 5`}
+        >
+          <span className="text-[10px] uppercase tracking-wide text-muted-foreground w-[3.5rem] shrink-0">
+            {label}
+          </span>
+          <div className="flex-1 h-1.5 rounded-full bg-muted overflow-hidden">
+            <div
+              className="h-full rounded-full bg-primary/70"
+              style={{ width: `${pct(value)}%` }}
+            />
+          </div>
+          <span className="text-[10px] text-muted-foreground tabular-nums w-7 text-right shrink-0">
+            {value != null ? value.toFixed(1) : "–"}
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function MiniBarStack({
+  usefulness,
+  usability,
+  className,
+}: {
+  usefulness: number | null | undefined;
+  usability: number | null | undefined;
+  className?: string;
+}) {
+  return (
+    <div
+      className={cn("h-1.5 w-16 rounded-full bg-muted overflow-hidden flex", className)}
+      title={`Usefulness ${usefulness != null ? usefulness.toFixed(1) : "N/A"} / Usability ${
+        usability != null ? usability.toFixed(1) : "N/A"
+      } (of 5)`}
+    >
+      <div
+        className="h-full bg-primary/80"
+        style={{ width: `${pct(usefulness)}%` }}
+      />
+      <div
+        className="h-full bg-primary/40"
+        style={{ width: `${pct(usability)}%` }}
+      />
+    </div>
+  );
+}
@@ -3,6 +3,7 @@ import { Card } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Star, MessageSquare, Wrench, ChevronRight } from "lucide-react";
 import { ToolWithStats } from "@workspace/api-client-react";
+import { MiniBarStack } from "@/components/mini-bars";

 export function ToolCardWide({ tool, density }: { tool: ToolWithStats; density: "cozy" | "compact" }) {
  const compact = density === "compact";
@@ -46,18 +47,21 @@ export function ToolCardWide({ tool, density }: { tool: ToolWithStats; density:
            </div>
          )}
        </div>
-        <div className="shrink-0 flex items-center gap-4 text-sm text-muted-foreground">
-          <div className="flex items-center gap-1">
-            <Star className="w-4 h-4 fill-primary text-primary" />
-            <span className="font-medium text-foreground">
-              {tool.avgCombined ? tool.avgCombined.toFixed(1) : "N/A"}
-            </span>
+        <div className="shrink-0 flex flex-col items-end gap-2 text-sm text-muted-foreground">
+          <div className="flex items-center gap-4">
+            <div className="flex items-center gap-1">
+              <Star className="w-4 h-4 fill-primary text-primary" />
+              <span className="font-medium text-foreground">
+                {tool.avgCombined ? tool.avgCombined.toFixed(1) : "N/A"}
+              </span>
+            </div>
+            <div className="flex items-center gap-1">
+              <MessageSquare className="w-4 h-4" />
+              <span>{tool.ratingCount}</span>
+            </div>
+            <ChevronRight className="w-4 h-4" />
          </div>
-          <div className="flex items-center gap-1">
-            <MessageSquare className="w-4 h-4" />
-            <span>{tool.ratingCount}</span>
-          </div>
-          <ChevronRight className="w-4 h-4" />
+          {!compact && <MiniBarStack usefulness={tool.avgUsefulness} usability={tool.avgUsability} />}
        </div>
      </Link>
    </Card>
@@ -3,6 +3,7 @@ import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter }
 import { Badge } from "@/components/ui/badge";
 import { Star, MessageSquare, Wrench } from "lucide-react";
 import { Link } from "wouter";
+import { MiniBars } from "@/components/mini-bars";

 export function ToolCard({ tool }: { tool: ToolWithStats }) {
  return (
@@ -47,19 +48,22 @@ export function ToolCard({ tool }: { tool: ToolWithStats }) {
            )}
          </div>
        </CardContent>
-        <CardFooter className="pt-0 flex justify-between items-center text-sm text-muted-foreground border-t p-4 mt-auto">
-          <div className="flex items-center gap-4">
-            <div className="flex items-center gap-1">
-              <Star className="w-4 h-4 fill-primary text-primary" />
-              <span className="font-medium text-foreground">
-                {tool.avgCombined ? tool.avgCombined.toFixed(1) : "N/A"}
-              </span>
-            </div>
-            <div className="flex items-center gap-1">
-              <MessageSquare className="w-4 h-4" />
-              <span>{tool.ratingCount}</span>
+        <CardFooter className="pt-0 flex flex-col gap-3 border-t p-4 mt-auto">
+          <div className="flex items-center justify-between text-sm text-muted-foreground">
+            <div className="flex items-center gap-4">
+              <div className="flex items-center gap-1">
+                <Star className="w-4 h-4 fill-primary text-primary" />
+                <span className="font-medium text-foreground">
+                  {tool.avgCombined ? tool.avgCombined.toFixed(1) : "N/A"}
+                </span>
+              </div>
+              <div className="flex items-center gap-1">
+                <MessageSquare className="w-4 h-4" />
+                <span>{tool.ratingCount}</span>
+              </div>
            </div>
          </div>
+          <MiniBars usefulness={tool.avgUsefulness} usability={tool.avgUsability} />
        </CardFooter>
      </Link>
    </Card>
@@ -3,6 +3,7 @@ import { Badge } from "@/components/ui/badge";
 import { Star, MessageSquare, Wrench } from "lucide-react";
 import { ToolWithStats } from "@workspace/api-client-react";
 import { cn } from "@/lib/utils";
+import { MiniBarStack } from "@/components/mini-bars";

 export const TABLE_GRID =
  "grid-cols-[minmax(0,2fr)_minmax(0,1fr)_80px_80px]";
@@ -56,8 +57,13 @@ export function ToolRow({
        </Badge>
      </div>
      <div className="flex items-center justify-end gap-1">
-        <Star className="w-4 h-4 fill-primary text-primary" />
-        <span className="font-medium">{tool.avgCombined ? tool.avgCombined.toFixed(1) : "N/A"}</span>
+        <div className="flex flex-col items-end gap-0.5">
+          <div className="flex items-center gap-1">
+            <Star className="w-4 h-4 fill-primary text-primary" />
+            <span className="font-medium">{tool.avgCombined ? tool.avgCombined.toFixed(1) : "N/A"}</span>
+          </div>
+          {!compact && <MiniBarStack usefulness={tool.avgUsefulness} usability={tool.avgUsability} />}
+        </div>
      </div>
      <div className="flex items-center justify-end gap-1 text-muted-foreground">
        <MessageSquare className="w-4 h-4" />