feat: user-chosen browse views with grid/list toggle and profile sync

- view modes grid | table | rows + density cozy/compact, persisted via localStorage and shareable ?view=?density= URL params (URL wins) - table view: sortable columns (name, rating, reviews), new sort options name_asc/name_desc/recently_updated (backend enum + handler) - live debounced search, removable filter chips, '/' focuses search - virtualization via @tanstack/react-virtual for table and rows views - profile sync: users.preferences jsonb + GET/PUT /api/auth/me/preferences; preference precedence URL > server profile > localStorage > default - add local rollup/lightningcss/tailwindcss oxide native binaries for macos dev
2026-08-02 09:34:53 +02:00
parent bcc74328d6
commit 78244c3197
22 changed files with 1061 additions and 73 deletions
@@ -0,0 +1,28 @@
+import { Slider } from "@/components/ui/slider";
+import { Maximize2, Minimize2 } from "lucide-react";
+
+export type Density = "cozy" | "compact";
+
+export function DensityToggle({
+  value,
+  onValueChange,
+}: {
+  value: Density;
+  onValueChange: (d: Density) => void;
+}) {
+  return (
+    <div className="flex items-center gap-2" title={`Density: ${value === "compact" ? "Compact" : "Comfortable"}`}>
+      <Maximize2 className="w-4 h-4 text-muted-foreground" aria-hidden />
+      <Slider
+        className="w-16"
+        min={0}
+        max={1}
+        step={1}
+        value={[value === "compact" ? 1 : 0]}
+        onValueChange={([v]) => onValueChange(v === 1 ? "compact" : "cozy")}
+        aria-label="List density"
+      />
+      <Minimize2 className="w-4 h-4 text-muted-foreground" aria-hidden />
+    </div>
+  );
+}
@@ -0,0 +1,65 @@
+import { Link } from "wouter";
+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";
+
+export function ToolCardWide({ tool, density }: { tool: ToolWithStats; density: "cozy" | "compact" }) {
+  const compact = density === "compact";
+  return (
+    <Card className="hover-elevate transition-all cursor-pointer hover:border-primary/50">
+      <Link href={`/tools/${tool.id}`} className="flex items-center gap-4 p-4">
+        <div className="shrink-0 w-10 h-10 rounded-md border bg-muted flex items-center justify-center overflow-hidden">
+          {tool.iconUrl ? (
+            <img
+              src={tool.iconUrl}
+              alt=""
+              className="w-full h-full object-contain p-0.5"
+              onError={(e) => {
+                (e.target as HTMLImageElement).style.display = "none";
+              }}
+            />
+          ) : (
+            <Wrench className="w-5 h-5 text-muted-foreground" />
+          )}
+        </div>
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2 flex-wrap">
+            <span className="font-semibold truncate">{tool.name}</span>
+            <Badge variant="outline" className="text-xs shrink-0">
+              {tool.category}
+            </Badge>
+          </div>
+          {!compact && <p className="text-sm text-muted-foreground line-clamp-2">{tool.description}</p>}
+          {!compact && tool.tags && tool.tags.length > 0 && (
+            <div className="flex flex-wrap gap-1 mt-1.5">
+              {tool.tags.slice(0, 3).map((tag) => (
+                <Badge key={tag} variant="secondary" className="text-xs px-1.5 py-0">
+                  {tag}
+                </Badge>
+              ))}
+              {tool.tags.length > 3 && (
+                <Badge variant="secondary" className="text-xs px-1.5 py-0 text-muted-foreground">
+                  +{tool.tags.length - 3}
+                </Badge>
+              )}
+            </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>
+          <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>
+      </Link>
+    </Card>
+  );
+}
@@ -0,0 +1,68 @@
+import { Link } from "wouter";
+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";
+
+export const TABLE_GRID =
+  "grid-cols-[minmax(0,2fr)_minmax(0,1fr)_80px_80px]";
+
+export function ToolRow({
+  tool,
+  density,
+  className,
+}: {
+  tool: ToolWithStats;
+  density: "cozy" | "compact";
+  className?: string;
+}) {
+  const compact = density === "compact";
+  return (
+    <div
+      className={cn(
+        "grid items-center gap-3 border-b border-border/60 hover:bg-muted/40 cursor-pointer",
+        TABLE_GRID,
+        compact ? "py-1.5" : "py-3",
+        className,
+      )}
+    >
+      <div className="flex items-center gap-3 min-w-0">
+        <div className="shrink-0 w-8 h-8 rounded-md border bg-muted flex items-center justify-center overflow-hidden">
+          {tool.iconUrl ? (
+            <img
+              src={tool.iconUrl}
+              alt=""
+              className="w-full h-full object-contain p-0.5"
+              onError={(e) => {
+                (e.target as HTMLImageElement).style.display = "none";
+              }}
+            />
+          ) : (
+            <Wrench className="w-4 h-4 text-muted-foreground" />
+          )}
+        </div>
+        <div className="min-w-0">
+          <Link href={`/tools/${tool.id}`} className="font-medium hover:text-primary hover:underline truncate block">
+            {tool.name}
+          </Link>
+          {!compact && (
+            <div className="text-xs text-muted-foreground truncate max-w-[32rem]">{tool.description}</div>
+          )}
+        </div>
+      </div>
+      <div>
+        <Badge variant="outline" className="text-xs">
+          {tool.category}
+        </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>
+      <div className="flex items-center justify-end gap-1 text-muted-foreground">
+        <MessageSquare className="w-4 h-4" />
+        <span>{tool.ratingCount}</span>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,37 @@
+import { LayoutGrid, List, Rows3 } from "lucide-react";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+
+export type ViewMode = "grid" | "table" | "rows";
+
+const OPTIONS: { value: ViewMode; label: string; Icon: typeof LayoutGrid }[] = [
+  { value: "grid", label: "Grid", Icon: LayoutGrid },
+  { value: "table", label: "Table", Icon: List },
+  { value: "rows", label: "Rows", Icon: Rows3 },
+];
+
+export function ViewToggle({
+  value,
+  onValueChange,
+}: {
+  value: ViewMode;
+  onValueChange: (v: ViewMode) => void;
+}) {
+  return (
+    <ToggleGroup
+      type="single"
+      value={value}
+      onValueChange={(v) => {
+        if (v) onValueChange(v as ViewMode);
+      }}
+      variant="outline"
+      size="sm"
+      aria-label="View mode"
+    >
+      {OPTIONS.map(({ value: v, label, Icon }) => (
+        <ToggleGroupItem key={v} value={v} aria-label={label} title={label} data-testid={`view-${v}`}>
+          <Icon className="w-4 h-4" />
+        </ToggleGroupItem>
+      ))}
+    </ToggleGroup>
+  );
+}