feat: display game thumbnails using GameImage component across game and person detail lists.

frontend/src/GameFilter.tsx

@@ -142,9 +142,7 @@ export function GameFilter() {
                       ✓ All {selectedPeople.size} selected would play
                     </div>
                   </div>
-                  <div style={{ width: "100px", marginLeft: "1rem" }}>
                   <GameImage game={game} />
-                  </div>
                 </Link>
               ))}
             </ul>

frontend/src/GameImage.tsx

@@ -9,6 +9,7 @@ export function GameImage({ game }: GameImageProps) {
 
   if (error) {
     return (
+      <div style={{ width: "100px", marginLeft: "1rem" }}>
         <div
           style={{
             width: "100%",
@@ -24,10 +25,12 @@ export function GameImage({ game }: GameImageProps) {
         >
           No Image Available
         </div>
+      </div>
     );
   }
 
   return (
+    <div style={{ width: "100px", marginLeft: "1rem" }}>
       <img
         src={`/api/game_thumbnail/${encodeURIComponent(game)}`}
         alt={`${game} cover`}
@@ -40,5 +43,6 @@ export function GameImage({ game }: GameImageProps) {
           objectFit: "cover",
         }}
       />
+    </div>
   );
 }

frontend/src/GameList.tsx

@@ -2,6 +2,7 @@ import { useState, useEffect } from "react";
 import { Game, Source, GameList as GameListProto } from "../items";
 import { Link } from "react-router-dom";
 import { apiFetch } from "./api";
+import { GameImage } from "./GameImage";
 
 export function GameList() {
   const [games, setGames] = useState<Game[]>([]);
@@ -439,19 +440,13 @@ export function GameList() {
               style={{
                 textDecoration: "none",
                 color: "inherit",
-                display: "block",
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
               }}
             >
               <strong>{game.title}</strong>
-              <div
+              <GameImage game={game.title} />
-                style={{
-                  fontSize: "0.9em",
-                  color: "var(--text-muted)",
-                  marginTop: "0.5rem",
-                }}
-              >
-                {game.source === Source.STEAM ? "Steam" : "Roblox"}
-              </div>
             </Link>
           ))}
         </ul>

frontend/src/PersonDetails.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import { useParams } from "react-router-dom";
+import { Link, useParams } from "react-router-dom";
 import {
   Person,
   AddOpinionRequest,
@@ -9,6 +9,7 @@ import {
   AuthStatusResponse,
 } from "../items";
 import { apiFetch } from "./api";
+import { GameImage } from "./GameImage";
 
 export const PersonDetails = () => {
   const { name } = useParams<{ name: string }>();
@@ -116,21 +117,23 @@ export const PersonDetails = () => {
         <h2>{person.name}</h2>
         <ul className="grid-container">
           {person.opinion.map((op, i) => (
-            <li
+            <Link
+              to={`/game/${encodeURIComponent(op.title)}`}
               key={i}
               className="list-item"
-              style={{ borderColor: op.wouldPlay ? "#4caf50" : "#f44336" }}
-            >
-              <strong>{op.title}</strong>
-              <div
               style={{
-                  color: op.wouldPlay ? "#4caf50" : "#f44336",
+                textDecoration: "none",
-                  marginTop: "0.5rem",
+                color: "inherit",
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+                borderColor: op.wouldPlay ? "#4caf50" : "#f44336",
               }}
             >
-                {op.wouldPlay ? "Would Play" : "Would Not Play"}
+              <strong>{op.title}</strong>
-              </div>
+
-            </li>
+              <GameImage game={op.title} />
+            </Link>
           ))}
         </ul>
       </div>
@@ -192,6 +195,23 @@ export const PersonDetails = () => {
               Add
             </button>
           </div>
+          <div style={{ marginTop: "1rem" }}>
+            <Link
+              to={`/game/${encodeURIComponent(gameTitle)}`}
+              key={gameTitle}
+              className="list-item"
+              style={{
+                textDecoration: "none",
+                color: "inherit",
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+              }}
+            >
+              <strong>{gameTitle}</strong>
+              <GameImage game={gameTitle} />
+            </Link>
+          </div>
         </div>
       )}
     </div>