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/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 { 
-  useListTools, 
+import { useState, useEffect, useRef, useMemo } from "react";
+import {
+  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) => {
-    e.preventDefault();
-    setSearch(searchInput);
-  };
+  const { data: tools, isLoading: loadingTools } = useListTools(queryParams);
+  const allTools = tools ?? [];
+
+  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 
-              placeholder="Search tools..." 
+            <Input
+              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) => (
-                  <SelectItem key={c} value={c}>{c}</SelectItem>
-                ))}
+                {!loadingCategories &&
+                  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>
-                <SelectItem value={ListToolsSort.top_rated}>Top Rated</SelectItem>
-                <SelectItem value={ListToolsSort.most_reviewed}>Most Reviewed</SelectItem>
+                {Object.values(ListToolsSort).map((v) => (
+                  <SelectItem key={v} value={v}>
+                    {SORT_LABELS[v]}
+                  </SelectItem>
+                ))}
               </SelectContent>
             </Select>
-            
-            {hasFilters && (
-              <Button variant="ghost" size="icon" onClick={clearFilters} className="shrink-0" title="Clear filters">
-                <X className="w-4 h-4" />
-              </Button>
+          </div>
+        </div>
+
+        {hasFilters && (
+          <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>
-          <div className="flex items-center text-sm text-muted-foreground mb-4">
-            <SlidersHorizontal className="w-4 h-4 mr-2" />
-            {loadingTools ? "Loading tools..." : `Showing ${tools?.length || 0} tools`}
-          </div>
-
-          {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) => (
+        {loadingTools ? (
+          <Skeletons view={view} density={density} />
+        ) : allTools.length > 0 ? (
+          view === "grid" ? (
+            <div className={cn("grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4", gridPad)}>
+              {allTools.map((tool) => (
                 <ToolCard key={tool.id} tool={tool} />
               ))}
             </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>
+          ) : view === "rows" ? (
+            <div ref={rowsParentRef} className="overflow-auto max-h-[72vh]">
+              <div className="relative" style={{ height: rowsVirtualizer.getTotalSize() }}>
+                {rowsVirtualizer.getVirtualItems().map((vi) => (
+                  <div
+                    key={allTools[vi.index].id}
+                    ref={rowsVirtualizer.measureElement}
+                    data-index={vi.index}
+                    className="absolute top-0 left-0 w-full"
+                    style={{ transform: `translateY(${vi.start}px)` }}
+                  >
+                    <ToolCardWide tool={allTools[vi.index]} density={density} />
+                  </div>
+                ))}
               </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>
+  );
+}