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