Added advanced filters to library + bookmarked filter + bookmark on game card

Author: Yelo420

src/components/GameCard.tsx

@@ -4,6 +4,8 @@ import { useAuth } from "@/context/AuthContext";
 import { useDownloads } from "@/context/DownloadContext";
 import { getGameCoverMediaId } from "@/hooks/useGames";
 import { CloudArrowDownIcon } from "@heroicons/react/16/solid";
+import { StarIcon as StarSolid } from "@heroicons/react/24/solid";
+import { StarIcon as StarOutline } from "@heroicons/react/24/outline";
 import { Button } from "@tw/button";
 import {
   Dropdown,
@@ -13,13 +15,46 @@ import {
   DropdownMenu,
 } from "@tw/dropdown";
 import clsx from "clsx";
-import { useCallback } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { useNavigate } from "react-router";
 
 export function GameCard({ game }: { game: GamevaultGame }) {
-  const coverId = getGameCoverMediaId(game);
-  const { serverUrl } = useAuth();
-  const { startDownload } = useDownloads();
+  const coverId = getGameCoverMediaId(game) as number | string | null;
+  const { serverUrl, user, authFetch } = useAuth();
+  // Derive initial bookmarked state from raw API shape (bookmarked_users or bookmarkedUsers)
+  const currentUserId = (user as any)?.id ?? (user as any)?.ID;
+  const initialBookmarked = useMemo(() => {
+    if (!currentUserId) return false;
+    const raw = (game as any).bookmarked_users || (game as any).bookmarkedUsers;
+    if (!Array.isArray(raw)) return false;
+    return raw.some((u: any) => (u?.id ?? u?.ID) === currentUserId);
+  }, [game, currentUserId]);
+  const [bookmarked, setBookmarked] = useState<boolean>(initialBookmarked);
+  const [bookmarkBusy, setBookmarkBusy] = useState(false);
+
+  const toggleBookmark = useCallback(
+    async (e: React.MouseEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (!serverUrl || !currentUserId || bookmarkBusy) return;
+      const base = serverUrl.replace(/\/+$/, "");
+      const url = `${base}/api/users/me/bookmark/${game.id}`;
+      const next = !bookmarked;
+      setBookmarked(next); // optimistic
+      setBookmarkBusy(true);
+      try {
+        const res = await authFetch(url, { method: next ? "POST" : "DELETE" });
+        if (!res.ok) throw new Error(`Bookmark toggle failed (${res.status})`);
+      } catch (err) {
+        // rollback on error
+        setBookmarked(!next);
+      } finally {
+        setBookmarkBusy(false);
+      }
+    },
+    [serverUrl, currentUserId, bookmarkBusy, authFetch, game.id, bookmarked],
+  );
+  const { startDownload } = useDownloads() as any;
 
   const filename = (() => {
     return `${game.title}.zip`;
@@ -86,7 +121,11 @@ export function GameCard({ game }: { game: GamevaultGame }) {
       <div className="relative aspect-[3/4] w-full bg-bg-muted flex items-center justify-center overflow-hidden">
         {coverId ? (
           <Media
-            media={{ id: coverId }}
+            media={{
+              id: typeof coverId === 'number' ? coverId : Number(coverId) || 0,
+              created_at: new Date(0),
+              entity_version: 0,
+            } as any}
             size={300}
             className="h-full w-full object-contain rounded-none"
             square
@@ -98,6 +137,27 @@ export function GameCard({ game }: { game: GamevaultGame }) {
             No Cover
           </div>
         )}
+        {/* Top-right bookmark toggle */}
+        <button
+          type="button"
+          onClick={toggleBookmark}
+            aria-label={bookmarked ? "Remove bookmark" : "Add bookmark"}
+            aria-pressed={bookmarked}
+          disabled={!currentUserId || bookmarkBusy}
+          className={clsx(
+            "absolute top-1 right-1 h-8 w-8 flex items-center justify-center rounded-md border shadow-sm backdrop-blur-sm transition-colors",
+            "disabled:opacity-50 disabled:cursor-not-allowed",
+            bookmarked
+              ? "bg-yellow-400/20 border-yellow-400"
+              : "bg-zinc-900/40 dark:bg-zinc-700/50 border-white/20 hover:bg-zinc-800/60 dark:hover:bg-zinc-600/60",
+          )}
+        >
+          {bookmarked ? (
+            <StarSolid className="h-5 w-5 text-yellow-400" />
+          ) : (
+            <StarOutline className="h-5 w-5 text-white" />
+          )}
+        </button>
         {/* Bottom-right download actions */}
         <div className="absolute bottom-0 right-0 p-1 z-10 flex justify-end opacity-85">
           <Dropdown>
@@ -124,7 +184,7 @@ export function GameCard({ game }: { game: GamevaultGame }) {
         <h3 className="text-sm font-medium truncate" title={game.title}>
           {game.metadata?.title || game.title}
         </h3>
-        {game.sortTitle && game.sortTitle !== game.title && (
+        {(game as any).sort_title && (game as any).sort_title !== game.title && (
           <p
             className="mt-0.5 text-xs text-fg-muted truncate"
             title={game.title}

src/components/Sidebar.tsx

@@ -67,7 +67,7 @@ export function Sidebar() {
     setBadgeVisible(false);
   };
 
-  const roleVal = user.role;
+  const roleVal = user?.role;
   const isAdmin = roleVal === GamevaultUserRoleEnum.NUMBER_3;
 
   return (

src/components/admin/RegisterUserModal.tsx

@@ -15,7 +15,7 @@ import { GamevaultUser } from "../../api";
 
 interface Props {
   onClose: () => void;
-  onRegistered: (u: User) => void;
+  onRegistered: (u: GamevaultUser) => void;
 }
 
 export function RegisterUserModal({ onClose, onRegistered }: Props) {

src/components/admin/UserEditorModal.tsx

@@ -24,7 +24,7 @@ interface Props {
     password?: string;
     birth_date: string | null;
   }) => Promise<{ ok: boolean; message?: string }>;
-  onUserUpdated?: (u: User) => void;
+  onUserUpdated?: (u: GamevaultUser) => void;
   /** If true, treat this editor as editing the current logged-in user (affects endpoints) */
   self?: boolean;
 }

src/guards/ProtectedRoute.tsx

@@ -22,7 +22,7 @@ export default function ProtectedRoute({
   if (!auth) return <Navigate to="/" replace />;
 
   if (requiredRole !== undefined) {
-    const roleVal = user.role;
+  const roleVal = user?.role;
     if (roleVal == null || roleVal < requiredRole) {
       return <Navigate to="/library" replace />;
     }

src/hooks/useAdminUsers.ts

@@ -1,5 +1,7 @@
 import { useAuth } from "@/context/AuthContext";
 import { useCallback, useEffect, useRef, useState } from "react";
+// Local helper to normalize user objects if backend changes shape; currently identity
+function normalizeUser<T>(u: T): T { return u; }
 import { GamevaultUser, GamevaultUserRoleEnum } from "../api";
 
 export interface UseAdminUsersResult {

src/hooks/useGames.ts

@@ -13,15 +13,18 @@ export interface UseGamesOptions {
   sortBy: string; // e.g. sort_title, size
   order: "ASC" | "DESC";
   limit?: number;
+  // If true, only return games bookmarked by the current user
+  bookmarkedOnly?: boolean;
 }
 
 export function useGames({
   search,
   sortBy,
   order,
   limit = 50,
+  bookmarkedOnly = false,
 }: UseGamesOptions) {
-  const { serverUrl, authFetch } = useAuth();
+  const { serverUrl, authFetch, user } = useAuth();
   const [count, setCount] = useState(0);
   const [games, setGames] = useState<GamevaultGame[]>([]);
   const [next, setNext] = useState<string | null>(null);
@@ -42,6 +45,12 @@ export function useGames({
       if (search) params.set("search", search);
       if (sortBy) params.set("sortBy", `${sortBy}:${order}`);
       if (limit) params.set("limit", String(limit));
+      // Advanced filter: bookmarked by current user
+      const userId = (user as any)?.id ?? (user as any)?.ID;
+      if (bookmarkedOnly && userId != null) {
+        // Backend expects: filter.bookmarked_users.id=$eq:<userId>
+        params.set("filter.bookmarked_users.id", `$eq:${userId}`);
+      }
       const url = `${base}/api/games?${params.toString()}`;
       const res = await authFetch(url, { method: "GET", signal: ac.signal });
       if (!res.ok) throw new Error(`Games fetch failed (${res.status})`);
@@ -55,7 +64,7 @@ export function useGames({
     } finally {
       setLoading(false);
     }
-  }, [serverUrl, authFetch, search, sortBy, order, limit]);
+  }, [serverUrl, authFetch, search, sortBy, order, limit, bookmarkedOnly, user]);
 
   const loadMore = useCallback(async () => {
     if (!serverUrl || !next || loading) return;

src/pages/Administration.tsx

@@ -397,7 +397,11 @@ export default function Administration() {
                 user={currentEditingUser}
                 onClose={() => setEditingUserId(null)}
                 onSave={async (payload) =>
-                  updateUser(currentEditingUser, payload)
+                  updateUser(currentEditingUser, {
+                    ...payload,
+                    // Convert birth_date string|null to Date if present, otherwise undefined to satisfy typing
+                    birth_date: payload.birth_date ? new Date(payload.birth_date) : undefined,
+                  })
                 }
                 onUserUpdated={(updated) => {
                   setUsers((prev) =>

src/pages/Library.tsx

@@ -6,6 +6,10 @@ import { Heading } from "@tw/heading";
 import { Input } from "@tw/input";
 import { Listbox, ListboxLabel, ListboxOption } from "@tw/listbox";
 import { useDeferredValue, useEffect, useRef, useState } from "react";
+import { StarIcon } from "@heroicons/react/24/solid";
+import { StarIcon as StarOutlineIcon } from "@heroicons/react/24/outline";
+import Card from "@/components/Card";
+import { Button } from "@/components/tailwind/button";
 import { Badge } from "../components/tailwind/badge";
 
 const SORT_BY: { label: string; value: string }[] = [
@@ -28,34 +32,12 @@ const LIB_SORT_KEY = 'app_library_sort';
 const LIB_ORDER_KEY = 'app_library_order';
 
 export default function Library() {
-  const { serverUrl } = useAuth();
+  const { serverUrl, user } = useAuth();
   const [search, setSearch] = useState("");
-  const [sortBy, setSortBy] = useState(() => {
-    try {
-      if (localStorage.getItem(RETAIN_KEY) === '1') {
-        return localStorage.getItem(LIB_SORT_KEY) || 'sort_title';
-      }
-    } catch {}
-    return 'sort_title';
-  });
-  const [order, setOrder] = useState<"ASC" | "DESC">(() => {
-    try {
-      if (localStorage.getItem(RETAIN_KEY) === '1') {
-        const v = localStorage.getItem(LIB_ORDER_KEY) as 'ASC' | 'DESC' | null;
-        if (v === 'ASC' || v === 'DESC') return v;
-      }
-    } catch {}
-    return 'ASC';
-  });
-  // Persist when changed if retention enabled
-  useEffect(() => {
-    try {
-      if (localStorage.getItem(RETAIN_KEY) === '1') {
-        localStorage.setItem(LIB_SORT_KEY, sortBy);
-        localStorage.setItem(LIB_ORDER_KEY, order);
-      }
-    } catch {}
-  }, [sortBy, order]);
+  const [sortBy, setSortBy] = useState("sort_title");
+  const [order, setOrder] = useState<"ASC" | "DESC">("ASC");
+  const [showAdvanced, setShowAdvanced] = useState(false);
+  const [bookmarkedOnly, setBookmarkedOnly] = useState(false);
   // Defer search to avoid spamming requests while user types quickly
   const deferredSearch = useDeferredValue(search);
   const { count, games, loading, error, loadMore, hasMore, refetch } = useGames(
@@ -64,13 +46,32 @@ export default function Library() {
       sortBy,
       order,
       limit: 50,
+      bookmarkedOnly,
     },
   );
 
   // Reset to first page when filters change (search, sortBy, order)
   useEffect(() => {
     refetch();
-  }, [deferredSearch, sortBy, order, refetch]);
+  }, [deferredSearch, sortBy, order, bookmarkedOnly, refetch]);
+
+  // Sync bookmark filter in URL search params for shareable links
+  useEffect(() => {
+    const url = new URL(window.location.href);
+    if (bookmarkedOnly) {
+      url.searchParams.set("bookmarked", "1");
+    } else {
+      url.searchParams.delete("bookmarked");
+    }
+    // We intentionally do not push to history each keystroke of search for cleanliness
+    window.history.replaceState({}, "", url.toString());
+  }, [bookmarkedOnly]);
+
+  // Initialize from URL (first render)
+  useEffect(() => {
+    const params = new URL(window.location.href).searchParams;
+    if (params.get("bookmarked") === "1") setBookmarkedOnly(true);
+  }, []);
 
   const sentinelRef = useRef<HTMLDivElement | null>(null);
   useEffect(() => {
@@ -144,7 +145,40 @@ export default function Library() {
             ))}
           </Listbox>
         </div>
+        <div className="flex flex-col w-40">
+          <label className="block text-xs font-medium text-fg-muted mb-1 invisible">
+            Advanced Filters
+          </label>
+          <Button
+            outline
+            className="w-full justify-center h-9 text-sm items-center"
+            onClick={() => setShowAdvanced((s) => !s)}
+          >
+            {showAdvanced ? "Hide Filters" : "Advanced Filters"}
+          </Button>
+        </div>
       </div>
+      {showAdvanced && (
+        <Card title="Advanced Filters" className="gap-4 !mb-6">
+          <div className="flex items-center gap-3 flex-wrap text-xs">
+            <Button
+              aria-pressed={bookmarkedOnly}
+              disabled={!user}
+              onClick={() => user && setBookmarkedOnly((v) => !v)}
+              {...(bookmarkedOnly ? { color: "yellow" } : { outline: true })}
+              className="text-sm h-9 px-3 flex items-center gap-1"
+            >
+              {bookmarkedOnly ? (
+                <StarIcon data-slot="icon" className="h-4 w-4" />
+              ) : (
+                <StarOutlineIcon data-slot="icon" className="h-4 w-4" />
+              )}
+              Bookmarked
+            </Button>
+          </div>
+          {/* Placeholder for future filters */}
+        </Card>
+      )}
       <div className="flex-1 overflow-auto">
         {!serverUrl && (
           <div className="p-8 text-sm text-fg-muted">