feat: implement game listing API and integrate into frontend for display and selection.

frontend/src/PersonDetails.tsx

@@ -1,14 +1,32 @@
 import { useState, useEffect } from "react";
 import { useParams } from "react-router-dom";
-import { Person, AddOpinionRequest } from "../items";
+import { Person, AddOpinionRequest, Game, GameList } from "../items";
 import { apiFetch } from "./api";
 
 export const PersonDetails = () => {
   const { name } = useParams<{ name: string }>();
   const [person, setPerson] = useState<Person | null>(null);
+  const [games, setGames] = useState<Game[]>([]);
   const [gameTitle, setGameTitle] = useState("");
   const [wouldPlay, setWouldPlay] = useState(false);
 
+  useEffect(() => {
+    apiFetch("/api/games")
+      .then((res) => res.arrayBuffer())
+      .then((buffer) => {
+        try {
+          const list = GameList.decode(new Uint8Array(buffer));
+          setGames(list.games);
+          if (list.games.length > 0) {
+            setGameTitle(list.games[0].title);
+          }
+        } catch (e) {
+          console.error("Failed to decode games:", e);
+        }
+      })
+      .catch(console.error);
+  }, []);
+
   useEffect(() => {
     if (name) {
       apiFetch(`/api/${name}`)
@@ -76,12 +94,16 @@ export const PersonDetails = () => {
       >
         <h3>Add Opinion</h3>
         <div style={{ display: "flex", gap: "1rem", alignItems: "center" }}>
-          <input
-            type="text"
-            placeholder="Game Title"
+          <select
             value={gameTitle}
             onChange={(e) => setGameTitle(e.target.value)}
-          />
+          >
+            {games.map((g) => (
+              <option key={g.title} value={g.title}>
+                {g.title}
+              </option>
+            ))}
+          </select>
           <label>
             <input
               type="checkbox"