Add basic GameView with Dynamic Segments React Router

Author: Yelo420

src/components/GameCard.tsx

@@ -1,7 +1,8 @@
+import { GamevaultGame } from "@/api/models/GamevaultGame";
 import { Media } from "@/components/Media";
 import { useAuth } from "@/context/AuthContext";
 import { useDownloads } from "@/context/DownloadContext";
-import { Game, getGameCoverMediaId } from "@/hooks/useGames";
+import { getGameCoverMediaId } from "@/hooks/useGames";
 import { CloudArrowDownIcon } from "@heroicons/react/16/solid";
 import { Button } from "@tw/button";
 import {
@@ -13,23 +14,15 @@ import {
 } from "@tw/dropdown";
 import clsx from "clsx";
 import { useCallback } from "react";
+import { useNavigate } from "react-router";
 
-export function GameCard({ game }: { game: Game }) {
+export function GameCard({ game }: { game: GamevaultGame }) {
   const coverId = getGameCoverMediaId(game);
   const { serverUrl } = useAuth();
   const { startDownload } = useDownloads() as any;
 
-  const filename = (() => {
-    const p = game.path || (game as any).Path;
-    if (!p) return `${game.title}.zip`;
-    // Derive filename similar to Path.GetFileName
-    try {
-      const parts = p.split(/\\|\//);
-      const last = parts[parts.length - 1];
-      return last || `${game.title}.zip`;
-    } catch {
-      return `${game.title}.zip`;
-    }
+  const filename = (() => { 
+  return `${game.title}.zip`;  
   })();
 
   const rawSize = (game as any).size;
@@ -71,14 +64,15 @@ export function GameCard({ game }: { game: Game }) {
     [game.id],
   );
 
-  const handleClientOpen = useCallback(
+  const navigate = useNavigate();
+
+  const handleOpenGameView = useCallback(
     (e: React.MouseEvent) => {
       e.preventDefault();
       e.stopPropagation();
-      const url = `gamevault://show?gameid=${game.id}`;
-      window.location.href = url;
+      navigate(`/library/${game.id}`);
     },
-    [game.id],
+    [navigate, game.id],
   );
 
   return (
@@ -97,10 +91,10 @@ export function GameCard({ game }: { game: Game }) {
             className="h-full w-full object-contain rounded-none"
             square
             alt={game.title}
-            onClick={handleClientOpen}
+            onClick={handleOpenGameView}
           />
         ) : (
-          <div onClick={handleClientOpen} className="text-xs text-fg-muted">
+          <div onClick={handleOpenGameView} className="text-xs text-fg-muted">
             No Cover
           </div>
         )}
@@ -130,7 +124,7 @@ export function GameCard({ game }: { game: Game }) {
         <h3 className="text-sm font-medium truncate" title={game.title}>
           {game.metadata?.title || game.title}
         </h3>
-        {game.sort_title && game.sort_title !== game.title && (
+        {game.sortTitle && game.sortTitle !== game.title && (
           <p
             className="mt-0.5 text-xs text-fg-muted truncate"
             title={game.title}

src/hooks/useGames.ts

@@ -1,25 +1,7 @@
+import { GamevaultGame } from "@/api/models/GamevaultGame";
 import { useAuth } from "@/context/AuthContext";
 import { useCallback, useEffect, useRef, useState } from "react";
 
-export interface GameMediaRef {
-  id: number | string;
-}
-export interface GameMetadata {
-  cover?: GameMediaRef | { ID?: number | string };
-  title?: string;
-}
-export interface Game {
-  id: number;
-  title: string;
-  sort_title?: string;
-  metadata?: GameMetadata | null;
-  // Optional file system path provided by backend (used for deriving download filename)
-  path?: string;
-  Path?: string; // legacy / PascalCase variant just in case
-  // Size of the game in bytes (optional, provided by backend if available)
-  size?: number;
-  Size?: number; // legacy / alternate casing safeguard
-}
 
 interface PaginatedData<T> {
   data: T[];
@@ -42,7 +24,7 @@ export function useGames({
 }: UseGamesOptions) {
   const { serverUrl, authFetch } = useAuth();
   const [count, setCount] = useState(0);
-  const [games, setGames] = useState<Game[]>([]);
+  const [games, setGames] = useState<GamevaultGame[]>([]);
   const [next, setNext] = useState<string | null>(null);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -64,7 +46,7 @@ export function useGames({
       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})`);
-      const json: PaginatedData<Game> = await res.json();
+      const json: PaginatedData<GamevaultGame> = await res.json();
       setCount(json.meta.totalItems);
       setGames(json.data || []);
       setNext(json.links?.next || null);
@@ -92,7 +74,7 @@ export function useGames({
       }
       const res = await authFetch(url, { method: "GET" });
       if (!res.ok) throw new Error(`Games fetch failed (${res.status})`);
-      const json: PaginatedData<Game> = await res.json();
+      const json: PaginatedData<GamevaultGame> = await res.json();
       setGames((prev) => [...prev, ...(json.data || [])]);
       setNext(json.links?.next || null);
     } catch (e: any) {
@@ -118,7 +100,7 @@ export function useGames({
   };
 }
 
-export function getGameCoverMediaId(game: Game): number | string | null {
+export function getGameCoverMediaId(game: GamevaultGame): number | string | null {
   const id =
     (game.metadata as any)?.cover?.id ?? (game.metadata as any)?.cover?.ID;
   return id ?? null;

src/main.tsx

@@ -17,6 +17,7 @@ import { PermissionRole } from "@/types/api";
 import ProtectedRoute from "./guards/ProtectedRoute";
 import Community from "./pages/Community";
 import Library from "./pages/Library";
+import GameView from "./pages/GameView";
 import NotFound from "./pages/NotFound";
 import Settings from "./pages/Settings";
 
@@ -37,6 +38,7 @@ createRoot(document.getElementById("root")!).render(
 
               <Route element={<DashboardLayout />}>
                 <Route index path="library" element={<Library />} />
+                <Route path="library/:id" element={<GameView />} />
                 <Route path="community" element={<Community />} />
                 <Route path="settings" element={<Settings />} />
                 <Route

src/pages/GameView.tsx

@@ -0,0 +1,80 @@
+import { useParams } from "react-router";
+import { useAuth } from "@/context/AuthContext";
+import { useEffect, useState } from "react";
+import { Heading, Subheading } from "@tw/heading";
+import { Divider } from "@tw/divider";
+import { Media } from "@/components/Media";
+import { Button } from "@tw/button";
+import { GamevaultGame } from "@/api/models/GamevaultGame";
+
+
+export default function GameView() {
+  const { id } = useParams<{ id: string }>();
+  const numericId = Number(id);
+  const { serverUrl, authFetch } = useAuth();
+  const [game, setGame] = useState<GamevaultGame | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!serverUrl || !numericId || Number.isNaN(numericId)) return;
+    let cancelled = false;
+    (async () => {
+      try {
+        setLoading(true);
+        setError(null);
+        const base = serverUrl.replace(/\/+$/, "");
+        const res = await authFetch(`${base}/api/games/${numericId}`, { method: 'GET' });
+        if (!res.ok) throw new Error(`Failed to load game (${res.status})`);
+        const json = await res.json();
+        if (!cancelled) setGame(json);
+      } catch (e: any) {
+        if (!cancelled) setError(e?.message || 'Failed to load game');
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    })();
+    return () => { cancelled = true; };
+  }, [serverUrl, authFetch, numericId]);
+
+  const coverId = (game?.metadata as any)?.cover?.id;
+  const title = game?.metadata?.title || game?.title;
+  const description = (game as any)?.metadata?.description || null;
+
+  return (
+    <div className="flex flex-col h-full overflow-auto pb-12">
+      <Heading>{title}</Heading>
+      <Divider />
+      {loading && (
+        <div className="p-6 text-sm text-fg-muted">Loading game…</div>
+      )}
+      {error && (
+        <div className="p-6 text-sm text-red-500 bg-red-500/10 rounded-md max-w-xl">{error}</div>
+      )}
+      {!loading && !error && game && (
+        <div className="p-2 max-w-4xl space-y-6">
+          <div className="flex flex-col md:flex-row gap-6">
+            <div className="w-56 md:w-64 shrink-0">
+              {coverId ? (
+                <Media media={{ id: coverId } as any} size={256} className="w-full aspect-[3/4]" square alt={title} />
+              ) : (
+                <div className="w-full aspect-[3/4] flex items-center justify-center rounded-xl bg-zinc-200 dark:bg-zinc-800 text-xs text-fg-muted">No Cover</div>
+              )}
+            </div>
+            <div className="flex-1 min-w-0 space-y-4">
+              <Subheading level={2}>Description</Subheading>
+              {description ? (
+                <p className="text-sm leading-relaxed whitespace-pre-line text-fg-muted">{description}</p>
+              ) : (
+                <p className="text-sm italic text-fg-muted/70">No description available.</p>
+              )}
+              <div>
+                <Button color="indigo" onClick={() => window.history.back()} className="mt-2">Back</Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}