feat: add admin games management page

- Game list with search and pagination
- Source and sync status badges
- View on site link and delete action
- Uses existing games CRUD API

app/(admin)/admin/games/games-client.tsx

@@ -0,0 +1,288 @@
+"use client"
+
+import { useEffect, useRef, useState } from "react"
+import Image from "next/image"
+import Link from "next/link"
+import {
+  Loader2,
+  SearchIcon,
+  ExternalLinkIcon,
+  TrashIcon,
+  Gamepad2Icon,
+} from "lucide-react"
+
+interface Game {
+  id: string
+  steamAppId: number | null
+  title: string
+  description: string | null
+  developer: string | null
+  publisher: string | null
+  genres: string[] | null
+  headerImage: string | null
+  capsuleImage: string | null
+  storeUrl: string | null
+  source: "steam" | "manual" | "gog" | "epic"
+  lastSync: string | null
+  syncStatus: string | null
+  createdAt: string
+  updatedAt: string
+}
+
+interface GamesApiResponse {
+  data: Game[]
+  total: number
+  limit: number
+  offset: number
+}
+
+const LIMIT = 50
+
+export function GamesClient() {
+  const [games, setGames] = useState<Game[]>([])
+  const [total, setTotal] = useState(0)
+  const [loading, setLoading] = useState(true)
+  const [search, setSearch] = useState("")
+  const [offset, setOffset] = useState(0)
+  const [deletingIds, setDeletingIds] = useState<Set<string>>(new Set())
+
+  const isSearchChangeRef = useRef(false)
+
+  const handleSearchChange = (value: string) => {
+    setSearch(value)
+    setOffset(0)
+    isSearchChangeRef.current = true
+  }
+
+  const handlePrev = () => {
+    setOffset((prev) => Math.max(0, prev - LIMIT))
+    isSearchChangeRef.current = false
+  }
+
+  const handleNext = () => {
+    setOffset((prev) => prev + LIMIT)
+    isSearchChangeRef.current = false
+  }
+
+  useEffect(() => {
+    const delay = isSearchChangeRef.current ? 300 : 0
+    isSearchChangeRef.current = false
+
+    let cancelled = false
+    const timer = setTimeout(async () => {
+      setLoading(true)
+      try {
+        const res = await fetch(
+          `/api/games?limit=${LIMIT}&offset=${offset}&search=${encodeURIComponent(search)}`
+        )
+        if (res.ok && !cancelled) {
+          const json = (await res.json()) as GamesApiResponse
+          setGames(json.data)
+          setTotal(json.total)
+        }
+      } catch {
+        // ignore
+      } finally {
+        if (!cancelled) setLoading(false)
+      }
+    }, delay)
+
+    return () => {
+      cancelled = true
+      clearTimeout(timer)
+    }
+  }, [search, offset])
+
+  const handleDelete = async (game: Game) => {
+    if (!confirm(`Are you sure you want to delete "${game.title}"?`)) return
+    setDeletingIds((prev) => new Set(prev).add(game.id))
+    try {
+      const res = await fetch(`/api/games/${game.id}`, { method: "DELETE" })
+      if (res.ok) {
+        setGames((prev) => prev.filter((g) => g.id !== game.id))
+        setTotal((prev) => Math.max(0, prev - 1))
+      }
+    } finally {
+      setDeletingIds((prev) => {
+        const next = new Set(prev)
+        next.delete(game.id)
+        return next
+      })
+    }
+  }
+
+  const hasMore = offset + games.length < total
+
+  return (
+    <div className="space-y-4">
+      {/* Search */}
+      <div className="relative">
+        <SearchIcon className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-text/40" />
+        <input
+          type="text"
+          value={search}
+          onChange={(e) => handleSearchChange(e.target.value)}
+          placeholder="Search games..."
+          className="w-full pl-9 pr-4 py-2 rounded-md bg-text/5 border border-border text-sm text-text placeholder:text-text/40 focus:outline-none focus:border-primary/60 transition-colors"
+        />
+      </div>
+
+      {/* Table */}
+      <div className="rounded-xl border border-border overflow-hidden">
+        <table className="w-full text-sm">
+          <thead className="bg-text/[0.03]">
+            <tr>
+              <th className="text-left px-4 py-3 text-xs font-medium uppercase tracking-wider text-text/50 w-14">
+                Cover
+              </th>
+              <th className="text-left px-4 py-3 text-xs font-medium uppercase tracking-wider text-text/50">
+                Title
+              </th>
+              <th className="text-left px-4 py-3 text-xs font-medium uppercase tracking-wider text-text/50">
+                Developer
+              </th>
+              <th className="text-left px-4 py-3 text-xs font-medium uppercase tracking-wider text-text/50">
+                Source
+              </th>
+              <th className="text-left px-4 py-3 text-xs font-medium uppercase tracking-wider text-text/50">
+                Sync
+              </th>
+              <th className="text-left px-4 py-3 text-xs font-medium uppercase tracking-wider text-text/50">
+                Actions
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {loading ? (
+              <tr>
+                <td colSpan={6} className="px-4 py-8 text-center text-text/50">
+                  <Loader2 className="h-5 w-5 animate-spin mx-auto" />
+                </td>
+              </tr>
+            ) : games.length === 0 ? (
+              <tr>
+                <td colSpan={6} className="px-4 py-8 text-center text-text/50">
+                  No games found.
+                </td>
+              </tr>
+            ) : (
+              games.map((game) => (
+                <tr
+                  key={game.id}
+                  className="border-t border-border hover:bg-text/[0.02] transition-colors"
+                >
+                  <td className="px-4 py-3">
+                    <div className="h-10 w-10 rounded overflow-hidden bg-text/5 flex items-center justify-center">
+                      {game.capsuleImage || game.headerImage ? (
+                        <Image
+                          src={game.capsuleImage || game.headerImage || ""}
+                          alt={game.title}
+                          width={40}
+                          height={40}
+                          className="h-10 w-10 object-cover"
+                          unoptimized
+                        />
+                      ) : (
+                        <Gamepad2Icon className="h-4 w-4 text-text/40" />
+                      )}
+                    </div>
+                  </td>
+                  <td className="px-4 py-3">
+                    <p className="font-medium text-text truncate max-w-[200px]">
+                      {game.title}
+                    </p>
+                  </td>
+                  <td className="px-4 py-3">
+                    <p className="text-text/50 truncate max-w-[150px]">
+                      {game.developer || "—"}
+                    </p>
+                  </td>
+                  <td className="px-4 py-3">
+                    <span
+                      className={`inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-medium uppercase tracking-wider ${
+                        game.source === "steam"
+                          ? "bg-blue-500/10 text-blue-400"
+                          : game.source === "manual"
+                            ? "bg-text/5 text-text/50"
+                            : "bg-text/5 text-text/50"
+                      }`}
+                    >
+                      {game.source}
+                    </span>
+                  </td>
+                  <td className="px-4 py-3">
+                    <span
+                      className={`inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-[10px] font-medium uppercase tracking-wider ${
+                        game.syncStatus === "synced"
+                          ? "bg-green-500/10 text-green-400"
+                          : "bg-yellow-500/10 text-yellow-400"
+                      }`}
+                    >
+                      <span
+                        className={`h-1.5 w-1.5 rounded-full ${
+                          game.syncStatus === "synced"
+                            ? "bg-green-400"
+                            : "bg-yellow-400"
+                        }`}
+                      />
+                      {game.syncStatus === "synced" ? "Synced" : "Stale"}
+                    </span>
+                  </td>
+                  <td className="px-4 py-3">
+                    <div className="flex items-center gap-2">
+                      <Link
+                        href={`/game/${game.id}`}
+                        className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-xs font-medium bg-text/5 text-text hover:bg-text/10 transition-colors"
+                      >
+                        <ExternalLinkIcon className="h-3.5 w-3.5" />
+                        View
+                      </Link>
+                      <button
+                        onClick={() => handleDelete(game)}
+                        disabled={deletingIds.has(game.id)}
+                        className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-xs font-medium bg-red-500/10 text-red-400 hover:bg-red-500/20 transition-colors cursor-pointer disabled:opacity-50"
+                      >
+                        {deletingIds.has(game.id) ? (
+                          <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                        ) : (
+                          <TrashIcon className="h-3.5 w-3.5" />
+                        )}
+                        Delete
+                      </button>
+                    </div>
+                  </td>
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+      </div>
+
+      {/* Pagination */}
+      {games.length > 0 && (
+        <div className="flex items-center justify-between">
+          <p className="text-xs text-text/50">
+            Showing {offset + 1}–{Math.min(offset + games.length, total)} of{" "}
+            {total}
+          </p>
+          <div className="flex items-center gap-2">
+            <button
+              onClick={handlePrev}
+              disabled={offset === 0 || loading}
+              className="px-3 py-1.5 rounded-md text-xs font-medium bg-text/5 text-text hover:bg-text/10 transition-colors disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer"
+            >
+              Previous
+            </button>
+            <button
+              onClick={handleNext}
+              disabled={!hasMore || loading}
+              className="px-3 py-1.5 rounded-md text-xs font-medium bg-text/5 text-text hover:bg-text/10 transition-colors disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer"
+            >
+              Next
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

app/(admin)/admin/games/page.tsx

@@ -0,0 +1,10 @@
+import type { Metadata } from "next"
+import { GamesClient } from "./games-client"
+
+export const metadata: Metadata = {
+  title: "Games",
+}
+
+export default function GamesPage() {
+  return <GamesClient />
+}