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,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>
+  );
+}