feat: user-chosen browse views with grid/list toggle and profile sync
Build & Push Docker Image / build (push) Successful in 2m25s
Build & Push Docker Image / build (push) Successful in 2m25s
- 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
This commit is contained in:
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user