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:
@@ -1,7 +1,14 @@
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { LogOut, Menu } from "lucide-react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Link, NavLink, Outlet, useLocation, useNavigationType } from "react-router-dom";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import {
|
||||
Link,
|
||||
NavLink,
|
||||
Outlet,
|
||||
useLocation,
|
||||
useNavigate,
|
||||
useNavigationType,
|
||||
} from "react-router-dom";
|
||||
|
||||
import { CommandPalette } from "@/components/CommandPalette";
|
||||
import { ConfirmDialog } from "@/components/ConfirmDialog";
|
||||
@@ -21,12 +28,23 @@ export function AppShell() {
|
||||
const toggleSidebar = useUi((state) => state.toggleSidebar);
|
||||
const loadE621 = useE621((state) => state.load);
|
||||
const location = useLocation();
|
||||
const navigate = useNavigate();
|
||||
const [paletteOpen, setPaletteOpen] = useState(false);
|
||||
const landingApplied = useRef(false);
|
||||
|
||||
useEffect(() => {
|
||||
void loadE621();
|
||||
}, [loadE621]);
|
||||
|
||||
// Open on the preferred landing page, but only for the initial "/" visit.
|
||||
useEffect(() => {
|
||||
if (landingApplied.current || !user) return;
|
||||
landingApplied.current = true;
|
||||
const landing = user.preferences?.landing_page ?? "library";
|
||||
if (landing === "library" || location.pathname !== "/") return;
|
||||
navigate(landing === "pools" ? "/pools" : `/${landing}`, { replace: true });
|
||||
}, [user, location.pathname, navigate]);
|
||||
|
||||
const statusQuery = useQuery({
|
||||
queryKey: ["status"],
|
||||
queryFn: () => api<SystemStatus>("/api/status/"),
|
||||
|
||||
Reference in New Issue
Block a user