From 4565cff38b2832fa046e3380d4bc6a6179eb009c Mon Sep 17 00:00:00 2001
From: code002lover <code002lover@ipost.rocks>
Date: Fri, 5 Dec 2025 15:01:43 +0100
Subject: [PATCH] feat: Add deep linking and auto-scrolling to the existing
 games section on the game list page.

---
 frontend/src/GameList.tsx   | 15 +++++++++++++--
 frontend/src/PersonList.tsx |  2 +-
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/frontend/src/GameList.tsx b/frontend/src/GameList.tsx
index 0cc00df..2e17f9a 100644
--- a/frontend/src/GameList.tsx
+++ b/frontend/src/GameList.tsx
@@ -8,7 +8,7 @@ import {
   AddOpinionRequest,
   RemoveOpinionRequest,
 } from "../items";
-import { Link } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
 import { apiFetch, get_auth_status } from "./api";
 import { GameImage } from "./GameImage";
 
@@ -54,6 +54,17 @@ export function GameList() {
     });
   }, []);
 
+  // Scroll to Existing Games section if hash is present
+  const location = useLocation();
+  useEffect(() => {
+    if (location.hash === "#existing-games") {
+      const el = document.getElementById("existing-games");
+      if (el) {
+        el.scrollIntoView({ behavior: "smooth" });
+      }
+    }
+  }, [location]);
+
   useEffect(() => {
     fetchGames();
   }, []);
@@ -455,7 +466,7 @@ export function GameList() {
       </style>
 
       <div style={{ marginTop: "3rem" }}>
-        <h3>Existing Games</h3>
+        <h3 id="existing-games">Existing Games</h3>
         <ul className="grid-container">
           {games.map((game) => {
             const opinion = opinions.find((op) => op.title === game.title);
diff --git a/frontend/src/PersonList.tsx b/frontend/src/PersonList.tsx
index b55af32..1be3c02 100644
--- a/frontend/src/PersonList.tsx
+++ b/frontend/src/PersonList.tsx
@@ -31,7 +31,7 @@ export const PersonList = ({ people }: Props) => {
           if (person.name == current_user) {
             return (
               <Link
-                to={`/games`}
+                to={`/games#existing-games`}
                 key={index}
                 className="list-item"
                 style={{