add edit/delete game capabilities

frontend/src/GameDetails.tsx

@@ -1,13 +1,20 @@
 import { useState, useEffect } from "react";
-import { useParams } from "react-router-dom";
+import { useParams, useNavigate } from "react-router-dom";
 import { Game, Source } from "../items";
-import { apiFetch } from "./api";
+import { apiFetch, get_is_admin } from "./api";
 
-export function GameDetails() {
+interface Props {
+  onShowToast?: (message: string, type?: "success" | "error" | "info") => void;
+}
+
+export function GameDetails({ onShowToast }: Props) {
   const { title } = useParams<{ title: string }>();
+  const navigate = useNavigate();
   const [game, setGame] = useState<Game | null>(null);
   const [loading, setLoading] = useState(true);
 
+  const isAdmin = get_is_admin();
+
   useEffect(() => {
     if (!title) return;
 
@@ -26,6 +33,32 @@ export function GameDetails() {
       });
   }, [title]);
 
+  const handleDelete = async () => {
+    if (
+      !confirm(
+        `Are you sure you want to delete "${game?.title}"? This action cannot be undone.`
+      )
+    ) {
+      return;
+    }
+
+    try {
+      const res = await apiFetch(`/api/game/${encodeURIComponent(title || "")}`, {
+        method: "DELETE",
+      });
+
+      if (res.ok) {
+        onShowToast?.(`"${game?.title}" deleted successfully`, "success");
+        navigate("/games");
+      } else {
+        onShowToast?.("Failed to delete game", "error");
+      }
+    } catch (err) {
+      console.error(err);
+      onShowToast?.("An error occurred while deleting the game", "error");
+    }
+  };
+
   if (loading) return <div>Loading...</div>;
   if (!game) return <div>Game not found</div>;
 
@@ -40,7 +73,39 @@ export function GameDetails() {
 
   return (
     <div className="card" style={{ maxWidth: "600px", margin: "0 auto" }}>
-      <h2>{game.title}</h2>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          marginBottom: "1rem",
+        }}
+      >
+        <h2 style={{ margin: 0 }}>{game.title}</h2>
+        {isAdmin && (
+          <div style={{ display: "flex", gap: "0.5rem" }}>
+            <button
+              onClick={() => navigate(`/game/${encodeURIComponent(game.title)}/edit`)}
+              className="btn-secondary"
+              style={{ padding: "0.5rem 1rem", fontSize: "0.9rem" }}
+            >
+              ✏️ Edit
+            </button>
+            <button
+              onClick={handleDelete}
+              className="btn-primary"
+              style={{
+                padding: "0.5rem 1rem",
+                fontSize: "0.9rem",
+                background: "#f44336",
+                border: "none",
+              }}
+            >
+              🗑️ Delete
+            </button>
+          </div>
+        )}
+      </div>
       <div style={{ display: "grid", gap: "1rem", marginTop: "1rem" }}>
         <div>
           <strong>Source:</strong>{" "}