ux improvements

frontend/src/GameDetails.tsx

@@ -2,6 +2,7 @@ import { useState, useEffect } from "react";
 import { useParams, useNavigate } from "react-router-dom";
 import { Game, Source } from "../items";
 import { apiFetch, get_is_admin } from "./api";
+import { LoadingState, EmptyState, ErrorState } from "./components/EmptyState";
 
 interface Props {
   onShowToast?: (message: string, type?: "success" | "error" | "info") => void;
@@ -12,25 +13,37 @@ export function GameDetails({ onShowToast }: Props) {
   const navigate = useNavigate();
   const [game, setGame] = useState<Game | null>(null);
   const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
 
   const isAdmin = get_is_admin();
 
   useEffect(() => {
-    if (!title) return;
+    if (!title) {
+      setError("Game title is missing");
+      setLoading(false);
+      return;
+    }
 
+    setLoading(true);
+    setError(null);
     apiFetch(`/api/game/${encodeURIComponent(title)}`)
       .then(async (res) => {
-        if (!res.ok) throw new Error("Game not found");
+        if (!res.ok) {
+          if (res.status === 404) {
+            throw new Error("Game not found");
+          }
+          throw new Error("Failed to load game");
+        }
         return Game.decode(new Uint8Array(await res.arrayBuffer()));
       })
       .then((data) => {
         setGame(data);
-        setLoading(false);
       })
       .catch((err) => {
         console.error(err);
-        setLoading(false);
-      });
+        setError(err.message || "Failed to load game");
+      })
+      .finally(() => setLoading(false));
   }, [title]);
 
   const handleDelete = async () => {
@@ -59,8 +72,9 @@ export function GameDetails({ onShowToast }: Props) {
     }
   };
 
-  if (loading) return <div>Loading...</div>;
-  if (!game) return <div>Game not found</div>;
+  if (loading) return <LoadingState message="Loading game details..." />;
+  if (error) return <ErrorState message={error} onRetry={() => window.location.reload()} />;
+  if (!game) return <EmptyState icon="🎮" title="Game not found" description="This game doesn't exist or has been deleted" />;
 
   const getExternalLink = () => {
     if (game.source === Source.STEAM) {