Per-user browse preferences
Adds a preferences JSON field on the user plus GET/POST /api/auth/preferences/ (merge semantics, validated keys), surfaced in /auth/me/ and typed on the frontend. The Account page gains a Browsing preferences card: landing page, default rating filter, default sort, items per page and thumbnail size. Signed-in users also sync these while browsing (the Library sidebar's rating/sort/per-page controls and the new thumbnail slider), debounced; on load the account's values seed the local UI state, so settings follow the user across browsers. Guests keep the existing localStorage behaviour. The thumbnail size drives the media grids (Library, Online, pool detail) between 140 and 320px columns. Verified the API against the dev server: merge keeps untouched keys, invalid values 400, values round-trip through /auth/me/.
This commit is contained in:
@@ -0,0 +1,181 @@
|
||||
import { useState } from "react";
|
||||
|
||||
import { Button, Field, inputClass } from "@/components/ui";
|
||||
import { errorMessage } from "@/lib/api";
|
||||
import { perPageOptions, ratingFilters, sortOptions } from "@/lib/browse";
|
||||
import { cn } from "@/lib/cn";
|
||||
import { applyPreferences, savePreferences } from "@/lib/preferences";
|
||||
import type { UserPreferences } from "@/lib/types";
|
||||
import { useAuth } from "@/store/auth";
|
||||
import { toast } from "@/store/toasts";
|
||||
|
||||
const LANDING_OPTIONS: { value: NonNullable<UserPreferences["landing_page"]>; label: string }[] = [
|
||||
{ value: "library", label: "Library" },
|
||||
{ value: "online", label: "Online" },
|
||||
{ value: "pools", label: "Pools" },
|
||||
{ value: "followed", label: "Followed" },
|
||||
];
|
||||
|
||||
export function PreferencesCard() {
|
||||
const user = useAuth((state) => state.user);
|
||||
const loadUser = useAuth((state) => state.loadUser);
|
||||
const [values, setValues] = useState<UserPreferences>({
|
||||
landing_page: user?.preferences?.landing_page ?? "library",
|
||||
ratings: user?.preferences?.ratings ?? [],
|
||||
ordering: user?.preferences?.ordering ?? "-created_at",
|
||||
per_page: user?.preferences?.per_page ?? 48,
|
||||
zoom: user?.preferences?.zoom ?? 190,
|
||||
});
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
if (!user) return null;
|
||||
|
||||
const ratings = values.ratings ?? [];
|
||||
|
||||
function toggleRating(value: string) {
|
||||
const next = ratings.includes(value)
|
||||
? ratings.filter((rating) => rating !== value)
|
||||
: [...ratings, value];
|
||||
setValues((current) => ({ ...current, ratings: next }));
|
||||
}
|
||||
|
||||
async function handleSave() {
|
||||
setSaving(true);
|
||||
try {
|
||||
const saved = await savePreferences(values);
|
||||
applyPreferences(saved);
|
||||
await loadUser();
|
||||
toast.ok("Browsing preferences saved.");
|
||||
} catch (error) {
|
||||
toast.error(errorMessage(error));
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="rounded-lg border border-ctp-surface0 bg-ctp-base p-5">
|
||||
<h2 className="text-sm font-semibold text-ctp-subtext1">
|
||||
Browsing preferences
|
||||
</h2>
|
||||
<p className="mt-1 text-xs text-ctp-overlay0">
|
||||
Saved to your account, so they follow you to any browser. Changing the
|
||||
filters while browsing updates them as well.
|
||||
</p>
|
||||
|
||||
<div className="mt-4 flex flex-col gap-4">
|
||||
<Field label="Landing page">
|
||||
<select
|
||||
className={inputClass}
|
||||
value={values.landing_page}
|
||||
onChange={(event) =>
|
||||
setValues((current) => ({
|
||||
...current,
|
||||
landing_page: event.target
|
||||
.value as UserPreferences["landing_page"],
|
||||
}))
|
||||
}
|
||||
>
|
||||
{LANDING_OPTIONS.map((option) => (
|
||||
<option key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</Field>
|
||||
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<span className="text-xs font-medium uppercase tracking-wide text-ctp-overlay1">
|
||||
Default rating filter
|
||||
</span>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{ratingFilters.map((option) => (
|
||||
<button
|
||||
key={option.value}
|
||||
type="button"
|
||||
onClick={() => toggleRating(option.value)}
|
||||
className={cn(
|
||||
"rounded-full border px-2.5 py-1 text-xs font-medium transition",
|
||||
ratings.includes(option.value)
|
||||
? option.active
|
||||
: "border-ctp-surface1 text-ctp-subtext0 hover:border-ctp-surface2 hover:text-ctp-text",
|
||||
)}
|
||||
>
|
||||
{option.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-[11px] text-ctp-overlay0">
|
||||
No selection shows every rating.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<Field label="Default sort">
|
||||
<select
|
||||
className={inputClass}
|
||||
value={values.ordering}
|
||||
onChange={(event) =>
|
||||
setValues((current) => ({
|
||||
...current,
|
||||
ordering: event.target.value,
|
||||
}))
|
||||
}
|
||||
>
|
||||
{sortOptions.map((option) => (
|
||||
<option key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</Field>
|
||||
|
||||
<Field label="Items per page">
|
||||
<select
|
||||
className={inputClass}
|
||||
value={values.per_page}
|
||||
onChange={(event) =>
|
||||
setValues((current) => ({
|
||||
...current,
|
||||
per_page: Number(event.target.value),
|
||||
}))
|
||||
}
|
||||
>
|
||||
{perPageOptions.map((option) => (
|
||||
<option key={option} value={option}>
|
||||
{option}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</Field>
|
||||
</div>
|
||||
|
||||
<label className="flex flex-col gap-1.5">
|
||||
<span className="text-xs font-medium uppercase tracking-wide text-ctp-overlay1">
|
||||
Thumbnail size
|
||||
</span>
|
||||
<input
|
||||
type="range"
|
||||
min={140}
|
||||
max={320}
|
||||
step={10}
|
||||
value={values.zoom}
|
||||
onChange={(event) =>
|
||||
setValues((current) => ({
|
||||
...current,
|
||||
zoom: Number(event.target.value),
|
||||
}))
|
||||
}
|
||||
className="accent-ctp-mauve"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<div>
|
||||
<Button onClick={() => void handleSave()} disabled={saving}>
|
||||
{saving ? "Saving…" : "Save preferences"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user