From defcb0e0bcf0beef69c7f94f683878a666140326 Mon Sep 17 00:00:00 2001
From: code002lover <code002lover@ipost.rocks>
Date: Thu, 4 Dec 2025 19:13:17 +0100
Subject: [PATCH] feat: display game thumbnails using GameImage component
 across game and person detail lists.

---
 frontend/src/GameFilter.tsx    |  4 +--
 frontend/src/GameImage.tsx     | 56 ++++++++++++++++++----------------
 frontend/src/GameList.tsx      | 15 +++------
 frontend/src/PersonDetails.tsx | 44 ++++++++++++++++++--------
 4 files changed, 68 insertions(+), 51 deletions(-)

diff --git a/frontend/src/GameFilter.tsx b/frontend/src/GameFilter.tsx
index 83252a3..c4f97c8 100644
--- a/frontend/src/GameFilter.tsx
+++ b/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>
+                  <GameImage game={game} />
                 </Link>
               ))}
             </ul>
diff --git a/frontend/src/GameImage.tsx b/frontend/src/GameImage.tsx
index d53e96b..affbd9b 100644
--- a/frontend/src/GameImage.tsx
+++ b/frontend/src/GameImage.tsx
@@ -9,36 +9,40 @@ export function GameImage({ game }: GameImageProps) {
 
   if (error) {
     return (
-      <div
-        style={{
-          width: "100%",
-          height: "150px",
-          background: "#ddd",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          color: "#666",
-          borderRadius: "8px",
-          marginTop: "0.5rem",
-        }}
-      >
-        No Image Available
+      <div style={{ width: "100px", marginLeft: "1rem" }}>
+        <div
+          style={{
+            width: "100%",
+            height: "150px",
+            background: "#ddd",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            color: "#666",
+            borderRadius: "8px",
+            marginTop: "0.5rem",
+          }}
+        >
+          No Image Available
+        </div>
       </div>
     );
   }
 
   return (
-    <img
-      src={`/api/game_thumbnail/${encodeURIComponent(game)}`}
-      alt={`${game} cover`}
-      onError={() => setError(true)}
-      style={{
-        width: "100%",
-        height: "auto",
-        borderRadius: "8px",
-        marginTop: "0.5rem",
-        objectFit: "cover",
-      }}
-    />
+    <div style={{ width: "100px", marginLeft: "1rem" }}>
+      <img
+        src={`/api/game_thumbnail/${encodeURIComponent(game)}`}
+        alt={`${game} cover`}
+        onError={() => setError(true)}
+        style={{
+          width: "100%",
+          height: "auto",
+          borderRadius: "8px",
+          marginTop: "0.5rem",
+          objectFit: "cover",
+        }}
+      />
+    </div>
   );
 }
diff --git a/frontend/src/GameList.tsx b/frontend/src/GameList.tsx
index 95e56aa..f4aba16 100644
--- a/frontend/src/GameList.tsx
+++ b/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
-                style={{
-                  fontSize: "0.9em",
-                  color: "var(--text-muted)",
-                  marginTop: "0.5rem",
-                }}
-              >
-                {game.source === Source.STEAM ? "Steam" : "Roblox"}
-              </div>
+              <GameImage game={game.title} />
             </Link>
           ))}
         </ul>
diff --git a/frontend/src/PersonDetails.tsx b/frontend/src/PersonDetails.tsx
index e022669..ce67ffc 100644
--- a/frontend/src/PersonDetails.tsx
+++ b/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" }}
+              style={{
+                textDecoration: "none",
+                color: "inherit",
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+                borderColor: op.wouldPlay ? "#4caf50" : "#f44336",
+              }}
             >
               <strong>{op.title}</strong>
-              <div
-                style={{
-                  color: op.wouldPlay ? "#4caf50" : "#f44336",
-                  marginTop: "0.5rem",
-                }}
-              >
-                {op.wouldPlay ? "Would Play" : "Would Not Play"}
-              </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>