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

artifacts/api-server/src/routes/auth.ts

@@ -2,6 +2,7 @@ import { Router, type IRouter, type Request } from "express";
 import { Issuer, generators, type Client } from "openid-client";
 import bcrypt from "bcryptjs";
 import { eq } from "drizzle-orm";
+import { z } from "zod";
 import { db, usersTable } from "@workspace/db";
 import { logger } from "../lib/logger";
 import { getEntitlements } from "../middleware/feature";
@@ -278,4 +279,61 @@ router.get("/auth/me", async (req, res): Promise<void> => {
   });
 });
 
+type SessionUser = NonNullable<import("express-session").SessionData["user"]>;
+
+async function resolveDbUser(u: SessionUser) {
+  if (u.isLocal) {
+    const id = Number(u.sub);
+    if (Number.isFinite(id)) {
+      const [byId] = await db.select().from(usersTable).where(eq(usersTable.id, id)).limit(1);
+      if (byId) return byId;
+    }
+    if (u.preferred_username) {
+      const [byName] = await db.select().from(usersTable).where(eq(usersTable.username, u.preferred_username)).limit(1);
+      if (byName) return byName;
+    }
+    return null;
+  }
+  const [byProvider] = await db.select().from(usersTable).where(eq(usersTable.authProviderId, u.sub)).limit(1);
+  return byProvider ?? null;
+}
+
+const PreferenceSchema = z.object({
+  view: z.enum(["grid", "table", "rows"]).optional(),
+  density: z.enum(["cozy", "compact"]).optional(),
+});
+
+router.get("/auth/me/preferences", async (req, res): Promise<void> => {
+  if (!req.session.user) {
+    res.status(401).json({ error: "Not authenticated" });
+    return;
+  }
+  const dbUser = await resolveDbUser(req.session.user);
+  if (!dbUser) {
+    res.status(401).json({ error: "User not found" });
+    return;
+  }
+  res.json(dbUser.preferences ?? {});
+});
+
+router.put("/auth/me/preferences", async (req, res): Promise<void> => {
+  if (!req.session.user) {
+    res.status(401).json({ error: "Not authenticated" });
+    return;
+  }
+  const parsed = PreferenceSchema.safeParse(req.body);
+  if (!parsed.success) {
+    res.status(400).json({ error: parsed.error.message });
+    return;
+  }
+  const dbUser = await resolveDbUser(req.session.user);
+  if (!dbUser) {
+    res.status(401).json({ error: "User not found" });
+    return;
+  }
+  const merged = { ...(dbUser.preferences ?? {}), ...parsed.data };
+  await db.update(usersTable).set({ preferences: merged }).where(eq(usersTable.id, dbUser.id));
+  res.json(merged);
+});
+
 export default router;

artifacts/api-server/src/routes/tools.ts

@@ -87,6 +87,12 @@ router.get("/tools", async (req, res): Promise<void> => {
     result = result.sort((a, b) => (b.avgCombined ?? 0) - (a.avgCombined ?? 0));
   } else if (sort === "most_reviewed") {
     result = result.sort((a, b) => b.ratingCount - a.ratingCount);
+  } else if (sort === "name_asc") {
+    result = result.sort((a, b) => a.name.localeCompare(b.name, undefined, { sensitivity: "base" }));
+  } else if (sort === "name_desc") {
+    result = result.sort((a, b) => b.name.localeCompare(a.name, undefined, { sensitivity: "base" }));
+  } else if (sort === "recently_updated") {
+    result = result.sort((a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime());
   }
 
   res.json(result);

artifacts/toolrate/package.json

@@ -44,6 +44,7 @@
     "@tailwindcss/typography": "^0.5.15",
     "@tailwindcss/vite": "catalog:",
     "@tanstack/react-query": "catalog:",
+    "@tanstack/react-virtual": "catalog:",
     "@types/node": "catalog:",
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",

artifacts/toolrate/src/components/density-toggle.tsx

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

artifacts/toolrate/src/components/tool-card-wide.tsx

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

artifacts/toolrate/src/components/tool-row.tsx

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

artifacts/toolrate/src/components/view-toggle.tsx

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

artifacts/toolrate/src/hooks/use-browse-preferences.ts

@@ -0,0 +1,89 @@
+import { useState, useRef, useEffect } from "react";
+import { useAuth } from "@/hooks/use-auth";
+import {
+  useGetMePreferences,
+  useUpdateMePreferences,
+  getGetMePreferencesQueryKey,
+  type UserPreferences,
+} from "@workspace/api-client-react";
+
+export type ViewMode = "grid" | "table" | "rows";
+export type Density = "cozy" | "compact";
+
+const LS_KEY = "toolrate:browse-preferences";
+const VIEWS = new Set<string>(["grid", "table", "rows"]);
+const DENSITIES = new Set<string>(["cozy", "compact"]);
+
+export function isViewMode(v: string | null): v is ViewMode {
+  return v !== null && VIEWS.has(v);
+}
+
+export function isDensity(v: string | null): v is Density {
+  return v !== null && DENSITIES.has(v);
+}
+
+function readLocal(): Partial<UserPreferences> {
+  try {
+    const raw = window.localStorage.getItem(LS_KEY);
+    if (!raw) return {};
+    const parsed = JSON.parse(raw) as Record<string, unknown>;
+    return {
+      ...(isViewMode(typeof parsed.view === "string" ? parsed.view : null) ? { view: parsed.view as ViewMode } : {}),
+      ...(isDensity(typeof parsed.density === "string" ? parsed.density : null) ? { density: parsed.density as Density } : {}),
+    };
+  } catch {
+    return {};
+  }
+}
+
+function writeLocal(prefs: Partial<UserPreferences>) {
+  try {
+    window.localStorage.setItem(LS_KEY, JSON.stringify(prefs));
+  } catch {
+    /* ignore */
+  }
+}
+
+export function useBrowsePreferences() {
+  const { isAuthenticated } = useAuth();
+  const [localPrefs, setLocalPrefs] = useState(readLocal);
+  const syncTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const { data: serverPrefs } = useGetMePreferences({
+    query: {
+      queryKey: getGetMePreferencesQueryKey(),
+      enabled: isAuthenticated,
+      retry: false,
+      staleTime: 5 * 60 * 1000,
+    },
+  });
+  const { mutate: updatePrefs } = useUpdateMePreferences();
+
+  function persist(view: ViewMode, density: Density) {
+    const prefs: Partial<UserPreferences> = { view, density };
+    setLocalPrefs(prefs);
+    writeLocal(prefs);
+    if (isAuthenticated) {
+      if (syncTimer.current) clearTimeout(syncTimer.current);
+      syncTimer.current = setTimeout(() => updatePrefs({ data: prefs }), 400);
+    }
+  }
+
+  useEffect(
+    () => () => {
+      if (syncTimer.current) clearTimeout(syncTimer.current);
+    },
+    [],
+  );
+
+  const serverView = isViewMode(serverPrefs?.view ?? null) ? serverPrefs!.view : undefined;
+  const serverDensity = isDensity(serverPrefs?.density ?? null) ? serverPrefs!.density : undefined;
+
+  return {
+    serverView,
+    serverDensity,
+    localView: localPrefs.view,
+    localDensity: localPrefs.density,
+    persist,
+  };
+}

artifacts/toolrate/src/pages/tools-browse.tsx

@@ -1,25 +1,77 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef, useMemo } from "react";
-import { 
+import {
-  useListTools, 
+  useListTools,
   useListCategories,
-  ListToolsSort
+  ListToolsSort,
 } from "@workspace/api-client-react";
+import { useVirtualizer } from "@tanstack/react-virtual";
 import { Layout } from "@/components/layout";
 import { ToolCard } from "@/components/tool-card";
+import { ToolCardWide } from "@/components/tool-card-wide";
+import { ToolRow, TABLE_GRID } from "@/components/tool-row";
+import { ViewToggle, type ViewMode } from "@/components/view-toggle";
+import { DensityToggle, type Density } from "@/components/density-toggle";
+import { useBrowsePreferences, isViewMode, isDensity } from "@/hooks/use-browse-preferences";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Skeleton } from "@/components/ui/skeleton";
-import { Search, Wrench, SlidersHorizontal, X } from "lucide-react";
+import { Search, Wrench, X, ArrowUp, ArrowDown, ArrowUpDown, SlidersHorizontal } from "lucide-react";
 import { Link, useLocation, useSearch } from "wouter";
+import { cn } from "@/lib/utils";
 
-const SORT_VALUES = new Set<string>([ListToolsSort.newest, ListToolsSort.top_rated, ListToolsSort.most_reviewed]);
+const SORT_VALUES = new Set<string>(Object.values(ListToolsSort));
+
+const SORT_LABELS: Record<string, string> = {
+  [ListToolsSort.newest]: "Newest",
+  [ListToolsSort.top_rated]: "Top Rated",
+  [ListToolsSort.most_reviewed]: "Most Reviewed",
+  [ListToolsSort.name_asc]: "Name (A–Z)",
+  [ListToolsSort.name_desc]: "Name (Z–A)",
+  [ListToolsSort.recently_updated]: "Recently Updated",
+};
+
+function SortHeader({
+  active,
+  direction,
+  onClick,
+  children,
+  align = "left",
+}: {
+  active: boolean;
+  direction?: "asc" | "desc";
+  onClick: () => void;
+  children: React.ReactNode;
+  align?: "left" | "right";
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={cn(
+        "inline-flex items-center gap-1 text-xs font-semibold uppercase tracking-wide hover:text-foreground transition-colors",
+        active ? "text-foreground" : "text-muted-foreground",
+        align === "right" && "w-full justify-end",
+      )}
+    >
+      {children}
+      {active && direction === "asc" ? (
+        <ArrowUp className="w-3.5 h-3.5" />
+      ) : active && direction === "desc" ? (
+        <ArrowDown className="w-3.5 h-3.5" />
+      ) : (
+        <ArrowUpDown className="w-3.5 h-3.5 opacity-50" />
+      )}
+    </button>
+  );
+}
 
 export default function ToolsBrowse() {
   const [, navigate] = useLocation();
   const urlSearch = useSearch();
 
-  const initialParams = new URLSearchParams(urlSearch);
+  const initialParams = useMemo(() => new URLSearchParams(urlSearch), [urlSearch]);
   const initialSearch = initialParams.get("search") ?? "";
   const initialCategory = initialParams.get("category") ?? "all";
   const initialSortParam = initialParams.get("sort") ?? "";
@@ -27,34 +79,76 @@ export default function ToolsBrowse() {
     ? (initialSortParam as ListToolsSort)
     : ListToolsSort.newest;
 
+  const { serverView, serverDensity, localView, localDensity, persist } = useBrowsePreferences();
+
   const [search, setSearch] = useState(initialSearch);
   const [searchInput, setSearchInput] = useState(initialSearch);
   const [category, setCategory] = useState<string>(initialCategory);
   const [sort, setSort] = useState<ListToolsSort>(initialSort);
+  const [overrideView, setOverrideView] = useState<ViewMode | null>(null);
+  const [overrideDensity, setOverrideDensity] = useState<Density | null>(null);
+
+  const urlView = initialParams.get("view");
+  const urlDensity = initialParams.get("density");
+  const view: ViewMode =
+    (isViewMode(urlView) ? urlView : null) ?? overrideView ?? serverView ?? localView ?? "grid";
+  const density: Density =
+    (isDensity(urlDensity) ? urlDensity : null) ?? overrideDensity ?? serverDensity ?? localDensity ?? "cozy";
 
   useEffect(() => {
     const p = new URLSearchParams();
     if (search) p.set("search", search);
     if (category && category !== "all") p.set("category", category);
     if (sort && sort !== ListToolsSort.newest) p.set("sort", sort);
+    if (view !== "grid") p.set("view", view);
+    if (density !== "cozy") p.set("density", density);
     const qs = p.toString();
     navigate(qs ? `/tools?${qs}` : "/tools", { replace: true });
-  }, [search, category, sort]);
+  }, [search, category, sort, view, density, navigate]);
+
+  useEffect(() => {
+    const t = setTimeout(() => setSearch(searchInput), 300);
+    return () => clearTimeout(t);
+  }, [searchInput]);
+
+  const searchInputRef = useRef<HTMLInputElement>(null);
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      const target = e.target as HTMLElement;
+      const isTyping =
+        target.tagName === "INPUT" ||
+        target.tagName === "TEXTAREA" ||
+        target.tagName === "SELECT" ||
+        target.isContentEditable;
+      if (e.key === "/" && !isTyping) {
+        e.preventDefault();
+        searchInputRef.current?.focus();
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, []);
 
   const { data: categories, isLoading: loadingCategories } = useListCategories();
-  
+
   const queryParams = {
     ...(search ? { search } : {}),
     ...(category && category !== "all" ? { category } : {}),
-    ...(sort ? { sort } : {})
+    ...(sort ? { sort } : {}),
   };
-  
-  const { data: tools, isLoading: loadingTools } = useListTools(queryParams);
 
-  const handleSearch = (e: React.FormEvent) => {
+  const { data: tools, isLoading: loadingTools } = useListTools(queryParams);
-    e.preventDefault();
+  const allTools = tools ?? [];
-    setSearch(searchInput);
+
-  };
+  function setView(v: ViewMode) {
+    setOverrideView(v);
+    persist(v, density);
+  }
+
+  function setDensity(d: Density) {
+    setOverrideDensity(d);
+    persist(view, d);
+  }
 
   const clearFilters = () => {
     setSearch("");
@@ -65,6 +159,34 @@ export default function ToolsBrowse() {
 
   const hasFilters = search !== "" || category !== "all" || sort !== ListToolsSort.newest;
 
+  function toggleNameSort() {
+    setSort(sort === ListToolsSort.name_asc ? ListToolsSort.name_desc : ListToolsSort.name_asc);
+  }
+
+  // ---- virtualization ----
+  const tableParentRef = useRef<HTMLDivElement>(null);
+  const rowsParentRef = useRef<HTMLDivElement>(null);
+
+  const tableVirtualizer = useVirtualizer({
+    count: allTools.length,
+    getScrollElement: () => tableParentRef.current,
+    estimateSize: () => (density === "compact" ? 44 : 64),
+    overscan: 8,
+  });
+
+  const rowsVirtualizer = useVirtualizer({
+    count: allTools.length,
+    getScrollElement: () => rowsParentRef.current,
+    estimateSize: () => (density === "compact" ? 72 : 116),
+    overscan: 4,
+  });
+
+  const gridPad = density === "compact" ? "gap-3" : "gap-4";
+
+  const sortActive = (v: ListToolsSort) => sort === v;
+  const nameDir: "asc" | "desc" | undefined =
+    sort === ListToolsSort.name_asc ? "asc" : sort === ListToolsSort.name_desc ? "desc" : undefined;
+
   return (
     <Layout>
       <div className="space-y-6 pb-8">
@@ -80,17 +202,18 @@ export default function ToolsBrowse() {
 
         {/* Filters */}
         <div className="bg-card border rounded-xl p-4 flex flex-col md:flex-row gap-4">
-          <form onSubmit={handleSearch} className="flex-1 relative">
+          <div className="relative flex-1">
             <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
-            <Input 
+            <Input
-              placeholder="Search tools..." 
+              ref={searchInputRef}
+              placeholder='Search tools… (press "/" to focus)'
               className="pl-9 w-full"
               value={searchInput}
               onChange={(e) => setSearchInput(e.target.value)}
               data-testid="input-search"
             />
-          </form>
+          </div>
-          
+
           <div className="flex flex-wrap sm:flex-nowrap gap-4 shrink-0">
             <Select value={category} onValueChange={setCategory}>
               <SelectTrigger className="w-full sm:w-[180px]" data-testid="select-category">
@@ -98,73 +221,208 @@ export default function ToolsBrowse() {
               </SelectTrigger>
               <SelectContent>
                 <SelectItem value="all">All Categories</SelectItem>
-                {!loadingCategories && categories?.map((c) => (
+                {!loadingCategories &&
-                  <SelectItem key={c} value={c}>{c}</SelectItem>
+                  categories?.map((c) => (
-                ))}
+                    <SelectItem key={c} value={c}>
+                      {c}
+                    </SelectItem>
+                  ))}
               </SelectContent>
             </Select>
 
             <Select value={sort} onValueChange={(val) => setSort(val as ListToolsSort)}>
               <SelectTrigger className="w-full sm:w-[180px]" data-testid="select-sort">
-                <SelectValue placeholder="Sort By" />
+                <SelectValue />
               </SelectTrigger>
               <SelectContent>
-                <SelectItem value={ListToolsSort.newest}>Newest</SelectItem>
+                {Object.values(ListToolsSort).map((v) => (
-                <SelectItem value={ListToolsSort.top_rated}>Top Rated</SelectItem>
+                  <SelectItem key={v} value={v}>
-                <SelectItem value={ListToolsSort.most_reviewed}>Most Reviewed</SelectItem>
+                    {SORT_LABELS[v]}
+                  </SelectItem>
+                ))}
               </SelectContent>
             </Select>
-            
+          </div>
-            {hasFilters && (
+        </div>
-              <Button variant="ghost" size="icon" onClick={clearFilters} className="shrink-0" title="Clear filters">
+
-                <X className="w-4 h-4" />
+        {hasFilters && (
-              </Button>
+          <div className="flex flex-wrap items-center gap-2 -mt-2">
+            {search && (
+              <Badge variant="secondary" className="gap-1 pl-2.5 pr-1.5 py-1">
+                “{search}”
+                <button
+                  onClick={() => {
+                    setSearch("");
+                    setSearchInput("");
+                  }}
+                  className="rounded-sm hover:bg-muted p-0.5"
+                  aria-label="Remove search"
+                >
+                  <X className="w-3.5 h-3.5" />
+                </button>
+              </Badge>
             )}
+            {category !== "all" && (
+              <Badge variant="secondary" className="gap-1 pl-2.5 pr-1.5 py-1">
+                {category}
+                <button
+                  onClick={() => setCategory("all")}
+                  className="rounded-sm hover:bg-muted p-0.5"
+                  aria-label="Remove category"
+                >
+                  <X className="w-3.5 h-3.5" />
+                </button>
+              </Badge>
+            )}
+            {sort !== ListToolsSort.newest && (
+              <Badge variant="secondary" className="gap-1 pl-2.5 pr-1.5 py-1">
+                {SORT_LABELS[sort]}
+                <button
+                  onClick={() => setSort(ListToolsSort.newest)}
+                  className="rounded-sm hover:bg-muted p-0.5"
+                  aria-label="Reset sort"
+                >
+                  <X className="w-3.5 h-3.5" />
+                </button>
+              </Badge>
+            )}
+            <Button variant="link" size="sm" className="px-1 text-muted-foreground" onClick={clearFilters}>
+              Clear all
+            </Button>
+          </div>
+        )}
+
+        {/* Results toolbar */}
+        <div className="flex flex-wrap items-center justify-between gap-3">
+          <div className="flex items-center text-sm text-muted-foreground">
+            <SlidersHorizontal className="w-4 h-4 mr-2" />
+            {loadingTools ? "Loading tools…" : `Showing ${allTools.length} tool${allTools.length === 1 ? "" : "s"}`}
+          </div>
+          <div className="flex items-center gap-3">
+            <DensityToggle value={density} onValueChange={setDensity} />
+            <ViewToggle value={view} onValueChange={setView} />
           </div>
         </div>
 
         {/* Results */}
-        <div>
+        {loadingTools ? (
-          <div className="flex items-center text-sm text-muted-foreground mb-4">
+          <Skeletons view={view} density={density} />
-            <SlidersHorizontal className="w-4 h-4 mr-2" />
+        ) : allTools.length > 0 ? (
-            {loadingTools ? "Loading tools..." : `Showing ${tools?.length || 0} tools`}
+          view === "grid" ? (
-          </div>
+            <div className={cn("grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4", gridPad)}>
-
+              {allTools.map((tool) => (
-          {loadingTools ? (
-            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
-              {[1, 2, 3, 4, 5, 6, 7, 8].map(i => (
-                <Skeleton key={`sk-tools-${i}`} className="h-[200px] w-full rounded-xl" />
-              ))}
-            </div>
-          ) : tools && tools.length > 0 ? (
-            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
-              {tools.map((tool) => (
                 <ToolCard key={tool.id} tool={tool} />
               ))}
             </div>
-          ) : (
+          ) : view === "rows" ? (
-            <div className="bg-muted/30 border border-dashed rounded-xl py-24 flex flex-col items-center justify-center text-center">
+            <div ref={rowsParentRef} className="overflow-auto max-h-[72vh]">
-              <div className="bg-muted p-4 rounded-full mb-4">
+              <div className="relative" style={{ height: rowsVirtualizer.getTotalSize() }}>
-                <Wrench className="w-8 h-8 text-muted-foreground" />
+                {rowsVirtualizer.getVirtualItems().map((vi) => (
-              </div>
+                  <div
-              <h3 className="text-xl font-medium mb-2">No tools found</h3>
+                    key={allTools[vi.index].id}
-              <p className="text-muted-foreground max-w-md mx-auto mb-6">
+                    ref={rowsVirtualizer.measureElement}
-                We couldn't find any tools matching your current filters. Try adjusting your search criteria or add a new tool.
+                    data-index={vi.index}
-              </p>
+                    className="absolute top-0 left-0 w-full"
-              <div className="flex gap-4">
+                    style={{ transform: `translateY(${vi.start}px)` }}
-                {hasFilters && (
+                  >
-                  <Button variant="outline" onClick={clearFilters}>
+                    <ToolCardWide tool={allTools[vi.index]} density={density} />
-                    Clear Filters
+                  </div>
-                  </Button>
+                ))}
-                )}
-                <Button asChild>
-                  <Link href="/tools/new">Add Tool</Link>
-                </Button>
               </div>
             </div>
-          )}
+          ) : (
-        </div>
+            <div ref={tableParentRef} className="overflow-auto max-h-[72vh] rounded-xl border bg-background">
+              <div className={cn("grid items-center gap-3 border-b bg-muted sticky top-0 z-10 px-4", TABLE_GRID)}>
+                <div className="py-2.5">
+                  <SortHeader active={sortActive(ListToolsSort.name_asc) || sortActive(ListToolsSort.name_desc)} direction={nameDir} onClick={toggleNameSort}>
+                    Tool
+                  </SortHeader>
+                </div>
+                <div className="py-2.5 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                  Category
+                </div>
+                <div className="py-2.5">
+                  <SortHeader active={sortActive(ListToolsSort.top_rated)} onClick={() => setSort(ListToolsSort.top_rated)} align="right">
+                    Rating
+                  </SortHeader>
+                </div>
+                <div className="py-2.5">
+                  <SortHeader active={sortActive(ListToolsSort.most_reviewed)} onClick={() => setSort(ListToolsSort.most_reviewed)} align="right">
+                    Reviews
+                  </SortHeader>
+                </div>
+              </div>
+              <div className="relative px-4" style={{ height: tableVirtualizer.getTotalSize() }}>
+                {tableVirtualizer.getVirtualItems().map((vi) => {
+                  const tool = allTools[vi.index];
+                  return (
+                    <div
+                      key={tool.id}
+                      ref={tableVirtualizer.measureElement}
+                      data-index={vi.index}
+                      className="absolute top-0 left-0 w-full"
+                      style={{ transform: `translateY(${vi.start}px)` }}
+                    >
+                      <ToolRow tool={tool} density={density} />
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          )
+        ) : (
+          <div className="bg-muted/30 border border-dashed rounded-xl py-24 flex flex-col items-center justify-center text-center">
+            <div className="bg-muted p-4 rounded-full mb-4">
+              <Wrench className="w-8 h-8 text-muted-foreground" />
+            </div>
+            <h3 className="text-xl font-medium mb-2">No tools found</h3>
+            <p className="text-muted-foreground max-w-md mx-auto mb-6">
+              We couldn't find any tools matching your current filters. Try adjusting your search criteria or add a
+              new tool.
+            </p>
+            <div className="flex gap-4">
+              {hasFilters && (
+                <Button variant="outline" onClick={clearFilters}>
+                  Clear Filters
+                </Button>
+              )}
+              <Button asChild>
+                <Link href="/tools/new">Add Tool</Link>
+              </Button>
+            </div>
+          </div>
+        )}
       </div>
     </Layout>
   );
 }
+
+function Skeletons({ view, density }: { view: ViewMode; density: Density }) {
+  const compact = density === "compact";
+  if (view === "grid") {
+    return (
+      <div className={cn("grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4", compact ? "gap-3" : "gap-4")}>
+        {[1, 2, 3, 4, 5, 6, 7, 8].map((i) => (
+          <Skeleton key={`sk-grid-${i}`} className="h-[200px] w-full rounded-xl" />
+        ))}
+      </div>
+    );
+  }
+  if (view === "rows") {
+    return (
+      <div className={cn("space-y-3")}>
+        {[1, 2, 3, 4, 5].map((i) => (
+          <Skeleton key={`sk-rows-${i}`} className={cn("w-full rounded-xl", compact ? "h-16" : "h-[104px]")} />
+        ))}
+      </div>
+    );
+  }
+  return (
+    <div className="rounded-xl border overflow-hidden">
+      <Skeleton className="h-10 w-full rounded-none" />
+      {[1, 2, 3, 4, 5].map((i) => (
+        <Skeleton key={`sk-table-${i}`} className={cn("w-full rounded-none border-t border-border/40", compact ? "h-11" : "h-16")} />
+      ))}
+    </div>
+  );
+}

lib/api-client-react/src/generated/api.schemas.ts

@@ -308,6 +308,28 @@ export interface AuthUser {
   isLocal?: boolean;
 }
 
+export type UserPreferencesView = typeof UserPreferencesView[keyof typeof UserPreferencesView];
+
+
+export const UserPreferencesView = {
+  grid: 'grid',
+  table: 'table',
+  rows: 'rows',
+} as const;
+
+export type UserPreferencesDensity = typeof UserPreferencesDensity[keyof typeof UserPreferencesDensity];
+
+
+export const UserPreferencesDensity = {
+  cozy: 'cozy',
+  compact: 'compact',
+} as const;
+
+export interface UserPreferences {
+  view?: UserPreferencesView;
+  density?: UserPreferencesDensity;
+}
+
 export interface ErrorResponse {
   error: string;
 }
@@ -325,6 +347,9 @@ export const ListToolsSort = {
   newest: 'newest',
   top_rated: 'top_rated',
   most_reviewed: 'most_reviewed',
+  name_asc: 'name_asc',
+  name_desc: 'name_desc',
+  recently_updated: 'recently_updated',
 } as const;
 
 export type ListTrashedToolsParams = {

lib/api-client-react/src/generated/api.ts

@@ -47,6 +47,7 @@ import type {
   TrashToolsInput,
   User,
   UserCreateInput,
+  UserPreferences,
   UserRoleUpdate,
   VersionInfo
 } from './api.schemas';
@@ -1887,6 +1888,154 @@ export function useGetMe<TData = Awaited<ReturnType<typeof getMe>>, TError = Err
 
 
 
+export const getGetMePreferencesUrl = () => {
+
+
+
+
+  return `/api/auth/me/preferences`
+}
+
+/**
+ * @summary Get current user's browse preferences
+ */
+export const getMePreferences = async ( options?: RequestInit): Promise<UserPreferences> => {
+
+  return customFetch<UserPreferences>(getGetMePreferencesUrl(),
+  {
+    ...options,
+    method: 'GET'
+
+
+  }
+);}
+
+
+
+
+
+export const getGetMePreferencesQueryKey = () => {
+    return [
+    `/api/auth/me/preferences`
+    ] as const;
+    }
+
+
+export const getGetMePreferencesQueryOptions = <TData = Awaited<ReturnType<typeof getMePreferences>>, TError = ErrorType<ErrorResponse>>( options?: { query?:UseQueryOptions<Awaited<ReturnType<typeof getMePreferences>>, TError, TData>, request?: SecondParameter<typeof customFetch>}
+) => {
+
+const {query: queryOptions, request: requestOptions} = options ?? {};
+
+  const queryKey =  queryOptions?.queryKey ?? getGetMePreferencesQueryKey();
+
+
+
+    const queryFn: QueryFunction<Awaited<ReturnType<typeof getMePreferences>>> = ({ signal }) => getMePreferences({ signal, ...requestOptions });
+
+
+
+
+
+   return  { queryKey, queryFn, ...queryOptions} as UseQueryOptions<Awaited<ReturnType<typeof getMePreferences>>, TError, TData> & { queryKey: QueryKey }
+}
+
+export type GetMePreferencesQueryResult = NonNullable<Awaited<ReturnType<typeof getMePreferences>>>
+export type GetMePreferencesQueryError = ErrorType<ErrorResponse>
+
+
+/**
+ * @summary Get current user's browse preferences
+ */
+
+export function useGetMePreferences<TData = Awaited<ReturnType<typeof getMePreferences>>, TError = ErrorType<ErrorResponse>>(
+  options?: { query?:UseQueryOptions<Awaited<ReturnType<typeof getMePreferences>>, TError, TData>, request?: SecondParameter<typeof customFetch>}
+
+ ):  UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+
+  const queryOptions = getGetMePreferencesQueryOptions(options)
+
+  const query = useQuery(queryOptions) as  UseQueryResult<TData, TError> & { queryKey: QueryKey };
+
+  return { ...query, queryKey: queryOptions.queryKey };
+}
+
+
+
+
+
+
+
+export const getUpdateMePreferencesUrl = () => {
+
+
+
+
+  return `/api/auth/me/preferences`
+}
+
+/**
+ * @summary Update current user's browse preferences
+ */
+export const updateMePreferences = async (userPreferences: UserPreferences, options?: RequestInit): Promise<UserPreferences> => {
+
+  return customFetch<UserPreferences>(getUpdateMePreferencesUrl(),
+  {
+    ...options,
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json', ...options?.headers },
+    body: JSON.stringify(
+      userPreferences,)
+  }
+);}
+
+
+
+
+export const getUpdateMePreferencesMutationOptions = <TError = ErrorType<ErrorResponse>,
+    TContext = unknown>(options?: { mutation?:UseMutationOptions<Awaited<ReturnType<typeof updateMePreferences>>, TError,{data: BodyType<UserPreferences>}, TContext>, request?: SecondParameter<typeof customFetch>}
+): UseMutationOptions<Awaited<ReturnType<typeof updateMePreferences>>, TError,{data: BodyType<UserPreferences>}, TContext> => {
+
+const mutationKey = ['updateMePreferences'];
+const {mutation: mutationOptions, request: requestOptions} = options ?
+      options.mutation && 'mutationKey' in options.mutation && options.mutation.mutationKey ?
+      options
+      : {...options, mutation: {...options.mutation, mutationKey}}
+      : {mutation: { mutationKey, }, request: undefined};
+
+
+
+
+      const mutationFn: MutationFunction<Awaited<ReturnType<typeof updateMePreferences>>, {data: BodyType<UserPreferences>}> = (props) => {
+          const {data} = props ?? {};
+
+          return  updateMePreferences(data,requestOptions)
+        }
+
+
+
+
+
+
+  return  { mutationFn, ...mutationOptions }}
+
+    export type UpdateMePreferencesMutationResult = NonNullable<Awaited<ReturnType<typeof updateMePreferences>>>
+    export type UpdateMePreferencesMutationBody = BodyType<UserPreferences>
+    export type UpdateMePreferencesMutationError = ErrorType<ErrorResponse>
+
+    /**
+ * @summary Update current user's browse preferences
+ */
+export const useUpdateMePreferences = <TError = ErrorType<ErrorResponse>,
+    TContext = unknown>(options?: { mutation?:UseMutationOptions<Awaited<ReturnType<typeof updateMePreferences>>, TError,{data: BodyType<UserPreferences>}, TContext>, request?: SecondParameter<typeof customFetch>}
+ ): UseMutationResult<
+        Awaited<ReturnType<typeof updateMePreferences>>,
+        TError,
+        {data: BodyType<UserPreferences>},
+        TContext
+      > => {
+      return useMutation(getUpdateMePreferencesMutationOptions(options));
+    }
+
 export const getListUsersUrl = () => {
 
 

lib/api-spec/openapi.yaml

@@ -72,7 +72,7 @@ paths:
           required: false
           schema:
             type: string
-            enum: [newest, top_rated, most_reviewed]
+            enum: [newest, top_rated, most_reviewed, name_asc, name_desc, recently_updated]
       responses:
         "200":
           description: List of tools
@@ -533,6 +533,48 @@ paths:
               schema:
                 $ref: "#/components/schemas/ErrorResponse"
 
+  /auth/me/preferences:
+    get:
+      operationId: getMePreferences
+      tags: [auth]
+      summary: Get current user's browse preferences
+      responses:
+        "200":
+          description: User preferences
+          content:
+            application/json:
+              schema:
+                $ref: "#/components/schemas/UserPreferences"
+        "401":
+          description: Not authenticated
+          content:
+            application/json:
+              schema:
+                $ref: "#/components/schemas/ErrorResponse"
+    put:
+      operationId: updateMePreferences
+      tags: [auth]
+      summary: Update current user's browse preferences
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              $ref: "#/components/schemas/UserPreferences"
+      responses:
+        "200":
+          description: Updated preferences
+          content:
+            application/json:
+              schema:
+                $ref: "#/components/schemas/UserPreferences"
+        "401":
+          description: Not authenticated
+          content:
+            application/json:
+              schema:
+                $ref: "#/components/schemas/ErrorResponse"
+
   /users:
     get:
       operationId: listUsers
@@ -1047,6 +1089,16 @@ components:
         isLocal:
           type: boolean
 
+    UserPreferences:
+      type: object
+      properties:
+        view:
+          type: string
+          enum: [grid, table, rows]
+        density:
+          type: string
+          enum: [cozy, compact]
+
     ErrorResponse:
       type: object
       required: [error]

lib/api-zod/src/generated/api.ts

@@ -35,7 +35,7 @@ export const GetVersionResponse = zod.object({
 export const ListToolsQueryParams = zod.object({
   "category": zod.coerce.string().optional(),
   "search": zod.coerce.string().optional(),
-  "sort": zod.enum(['newest', 'top_rated', 'most_reviewed']).optional()
+  "sort": zod.enum(['newest', 'top_rated', 'most_reviewed', 'name_asc', 'name_desc', 'recently_updated']).optional()
 })
 
 export const ListToolsResponseItem = zod.object({
@@ -429,6 +429,29 @@ export const GetMeResponse = zod.object({
 })
 
 
+/**
+ * @summary Get current user's browse preferences
+ */
+export const GetMePreferencesResponse = zod.object({
+  "view": zod.enum(['grid', 'table', 'rows']).optional(),
+  "density": zod.enum(['cozy', 'compact']).optional()
+})
+
+
+/**
+ * @summary Update current user's browse preferences
+ */
+export const UpdateMePreferencesBody = zod.object({
+  "view": zod.enum(['grid', 'table', 'rows']).optional(),
+  "density": zod.enum(['cozy', 'compact']).optional()
+})
+
+export const UpdateMePreferencesResponse = zod.object({
+  "view": zod.enum(['grid', 'table', 'rows']).optional(),
+  "density": zod.enum(['cozy', 'compact']).optional()
+})
+
+
 /**
  * @summary List all local users (admin only)
  */

lib/api-zod/src/generated/types/index.ts

@@ -41,6 +41,9 @@ export * from './user';
 export * from './userCreateInput';
 export * from './userCreateInputRole';
 export * from './userCreateInputTier';
+export * from './userPreferences';
+export * from './userPreferencesDensity';
+export * from './userPreferencesView';
 export * from './userRole';
 export * from './userRoleUpdate';
 export * from './userRoleUpdateRole';

lib/api-zod/src/generated/types/listToolsSort.ts

@@ -13,4 +13,7 @@ export const ListToolsSort = {
   newest: 'newest',
   top_rated: 'top_rated',
   most_reviewed: 'most_reviewed',
+  name_asc: 'name_asc',
+  name_desc: 'name_desc',
+  recently_updated: 'recently_updated',
 } as const;

lib/api-zod/src/generated/types/userPreferences.ts

@@ -0,0 +1,14 @@
+/**
+ * Generated by orval v8.9.1 🍺
+ * Do not edit manually.
+ * Api
+ * ToolRate API — Tool listing and rating platform
+ * OpenAPI spec version: 0.1.0
+ */
+import type { UserPreferencesDensity } from './userPreferencesDensity';
+import type { UserPreferencesView } from './userPreferencesView';
+
+export interface UserPreferences {
+  view?: UserPreferencesView;
+  density?: UserPreferencesDensity;
+}

lib/api-zod/src/generated/types/userPreferencesDensity.ts

@@ -0,0 +1,15 @@
+/**
+ * Generated by orval v8.9.1 🍺
+ * Do not edit manually.
+ * Api
+ * ToolRate API — Tool listing and rating platform
+ * OpenAPI spec version: 0.1.0
+ */
+
+export type UserPreferencesDensity = typeof UserPreferencesDensity[keyof typeof UserPreferencesDensity];
+
+
+export const UserPreferencesDensity = {
+  cozy: 'cozy',
+  compact: 'compact',
+} as const;

lib/api-zod/src/generated/types/userPreferencesView.ts

@@ -0,0 +1,16 @@
+/**
+ * Generated by orval v8.9.1 🍺
+ * Do not edit manually.
+ * Api
+ * ToolRate API — Tool listing and rating platform
+ * OpenAPI spec version: 0.1.0
+ */
+
+export type UserPreferencesView = typeof UserPreferencesView[keyof typeof UserPreferencesView];
+
+
+export const UserPreferencesView = {
+  grid: 'grid',
+  table: 'table',
+  rows: 'rows',
+} as const;

lib/db/src/schema/users.ts

@@ -1,7 +1,12 @@
-import { pgTable, text, serial, timestamp } from "drizzle-orm/pg-core";
+import { pgTable, text, serial, timestamp, jsonb } from "drizzle-orm/pg-core";
 import { createInsertSchema } from "drizzle-zod";
 import { z } from "zod/v4";
 
+export type UserPreferences = {
+  view?: "grid" | "table" | "rows";
+  density?: "cozy" | "compact";
+};
+
 export const usersTable = pgTable("users", {
   id: serial("id").primaryKey(),
   username: text("username").notNull().unique(),
@@ -12,6 +17,7 @@ export const usersTable = pgTable("users", {
   authProvider: text("auth_provider").notNull().default("local"),
   authProviderId: text("auth_provider_id"),
   displayName: text("display_name"),
+  preferences: jsonb("preferences").$type<UserPreferences>().notNull().default({}),
   createdAt: timestamp("created_at", { withTimezone: true }).notNull().defaultNow(),
 });
 

package.json

@@ -15,8 +15,19 @@
   },
   "pnpm": {
     "supportedArchitectures": {
-      "os": ["current", "linux"],
+      "os": [
-      "cpu": ["current", "x64"]
+        "current",
+        "linux"
+      ],
+      "cpu": [
+        "current",
+        "x64"
+      ]
     }
+  },
+  "optionalDependencies": {
+    "@rollup/rollup-darwin-arm64": "^4.62.4",
+    "@tailwindcss/oxide-darwin-arm64": "^4.3.3",
+    "lightningcss-darwin-arm64": "^1.33.0"
   }
 }

pnpm-lock.yaml

@@ -21,6 +21,9 @@ catalogs:
     '@tanstack/react-query':
       specifier: ^5.90.21
       version: 5.100.9
+    '@tanstack/react-virtual':
+      specifier: ^3.13.6
+      version: 3.14.9
     '@types/node':
       specifier: ^25.3.3
       version: 25.6.2
@@ -164,6 +167,16 @@ importers:
       typescript:
         specifier: ~5.9.3
         version: 5.9.3
+    optionalDependencies:
+      '@rollup/rollup-darwin-arm64':
+        specifier: ^4.62.4
+        version: 4.62.4
+      '@tailwindcss/oxide-darwin-arm64':
+        specifier: ^4.3.3
+        version: 4.3.3
+      lightningcss-darwin-arm64:
+        specifier: ^1.33.0
+        version: 1.33.0
 
   artifacts/api-server:
     dependencies:
@@ -528,6 +541,9 @@ importers:
       '@tanstack/react-query':
         specifier: 'catalog:'
         version: 5.100.9(react@19.1.0)
+      '@tanstack/react-virtual':
+        specifier: 'catalog:'
+        version: 3.14.9(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@types/node':
         specifier: 'catalog:'
         version: 25.6.2
@@ -1534,6 +1550,11 @@ packages:
   '@rolldown/pluginutils@1.0.0-rc.3':
     resolution: {integrity: sha512-eybk3TjzzzV97Dlj5c+XrBFW57eTNhzod66y9HrBlzJ6NsCrWCp/2kaPS3K9wJmurBC0Tdw4yPjXKZqlznim3Q==}
 
+  '@rollup/rollup-darwin-arm64@4.62.4':
+    resolution: {integrity: sha512-krw5uS2STmvJ02x0uTXHbqQNuz+9eZ1iw+qXk9dmW2gvV4jV7O2hEoOnuhFrpOPiel1mBFtqbxYZZtC46hXLOw==}
+    cpu: [arm64]
+    os: [darwin]
+
   '@rollup/rollup-linux-x64-gnu@4.60.3':
     resolution: {integrity: sha512-DAZDBHQfG2oQuhY7mc6I3/qB4LU2fQCjRvxbDwd/Jdvb9fypP4IJ4qmtu6lNjes6B531AI8cg1aKC2di97bUxA==}
     cpu: [x64]
@@ -1597,6 +1618,12 @@ packages:
   '@tailwindcss/node@4.3.0':
     resolution: {integrity: sha512-aFb4gUhFOgdh9AXo4IzBEOzBkkAxm9VigwDJnMIYv3lcfXCJVesNfbEaBl4BNgVRyid92AmdviqwBUBRKSeY3g==}
 
+  '@tailwindcss/oxide-darwin-arm64@4.3.3':
+    resolution: {integrity: sha512-BiaWatpBcERQFDlOjRDpIVXuFK5PJez5SA4JMg6VYZdBYU+qKfV/vqjcIs+IYmtitf1xYQZTwXvU/8y4lfZUGw==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [darwin]
+
   '@tailwindcss/oxide-linux-x64-gnu@4.3.0':
     resolution: {integrity: sha512-DRNdQRpSGzRGfARVuVkxvM8Q12nh19l4BF/G7zGA1oe+9wcC6saFBHTISrpIcKzhiXtSrlSrluCfvMuledoCTQ==}
     engines: {node: '>= 20'}
@@ -1638,6 +1665,15 @@ packages:
     peerDependencies:
       react: ^18 || ^19
 
+  '@tanstack/react-virtual@3.14.9':
+    resolution: {integrity: sha512-qZyr0FZDP8rDC4WBhsryIZmAd9bveJvFGUJJtskWaew6/0dTRS6wZxnR6VQ5bY2KwL3LjerrHqQLk3a0GKcPXQ==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  '@tanstack/virtual-core@3.17.7':
+    resolution: {integrity: sha512-bp+v10y65sp2H7WpWfIMyxTNfl8ZVfxFTLRjPIFRryi6FV/J33z4IS53WO4pTk36KlvJ4iLiQz+oaydDC1xbcA==}
+
   '@types/babel__core@7.20.5':
     resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
 
@@ -2456,6 +2492,12 @@ packages:
     resolution: {integrity: sha512-KZ9W9nWDT7rF7Dazg8xyLHGLrmpgq2nVNFUckhqdW3szVP6YhCpp/RAnpmVExA9JvrMynjwSLVrEj3AepHR6ew==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
+  lightningcss-darwin-arm64@1.33.0:
+    resolution: {integrity: sha512-Sciaz8eenNTKn9b3t7+xr0ipTp9YxKQY4npwQ3mrRuL0BAVHBLyZxofhaKBAVtzmtRZ/zTyo0/to4B1uWG/Djg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
   lightningcss-linux-x64-gnu@1.32.0:
     resolution: {integrity: sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==}
     engines: {node: '>= 12.0.0'}
@@ -3065,6 +3107,7 @@ packages:
   tsconfck@3.1.6:
     resolution: {integrity: sha512-ks6Vjr/jEw0P1gmOVwutM3B7fWxoWBL2KRDb1JfqGVawBmO5UsvmWOQFGHBPl5yxYz4eERr19E6L7NMv+Fej4w==}
     engines: {node: ^18 || >=20}
+    deprecated: unmaintained
     hasBin: true
     peerDependencies:
       typescript: ^5.0.0
@@ -4274,6 +4317,9 @@ snapshots:
 
   '@rolldown/pluginutils@1.0.0-rc.3': {}
 
+  '@rollup/rollup-darwin-arm64@4.62.4':
+    optional: true
+
   '@rollup/rollup-linux-x64-gnu@4.60.3':
     optional: true
 
@@ -4348,6 +4394,9 @@ snapshots:
       source-map-js: 1.2.1
       tailwindcss: 4.3.0
 
+  '@tailwindcss/oxide-darwin-arm64@4.3.3':
+    optional: true
+
   '@tailwindcss/oxide-linux-x64-gnu@4.3.0':
     optional: true
 
@@ -4378,6 +4427,14 @@ snapshots:
       '@tanstack/query-core': 5.100.9
       react: 19.1.0
 
+  '@tanstack/react-virtual@3.14.9(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@tanstack/virtual-core': 3.17.7
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+
+  '@tanstack/virtual-core@3.17.7': {}
+
   '@types/babel__core@7.20.5':
     dependencies:
       '@babel/parser': 7.29.3
@@ -5098,6 +5155,9 @@ snapshots:
 
   leven@4.1.0: {}
 
+  lightningcss-darwin-arm64@1.33.0:
+    optional: true
+
   lightningcss-linux-x64-gnu@1.32.0:
     optional: true
 

pnpm-workspace.yaml

@@ -46,6 +46,7 @@ catalog:
   '@replit/vite-plugin-runtime-error-modal': ^0.0.6
   '@tailwindcss/vite': ^4.1.14
   '@tanstack/react-query': ^5.90.21
+  '@tanstack/react-virtual': ^3.13.6
   '@types/node': ^25.3.3
   '@types/react': ^19.2.0
   '@types/react-dom': ^19.2.0