fix bugs

frontend/src/App.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback } from "react";
 import { Person, PersonList as PersonListProto } from "../items";
 import { Login } from "./Login";
 import { PersonList } from "./PersonList";
@@ -62,10 +62,21 @@ function App() {
     }
   }, [theme]);
 
-  const addToast = (message: string, type: ToastType = "info") => {
+  useEffect(() => {
+    const handleUnauthorized = () => {
+      setToken("");
+      setPeople([]);
+      addToast("Session expired. Please log in again.", "info");
+    };
+
+    window.addEventListener("unauthorized", handleUnauthorized);
+    return () => window.removeEventListener("unauthorized", handleUnauthorized);
+  }, [addToast]);
+
+  const addToast = useCallback((message: string, type: ToastType = "info") => {
     const id = Date.now();
     setToasts((prev) => [...prev, { id, message, type }]);
-  };
+  }, []);
 
   const removeToast = (id: number) => {
     setToasts((prev) => prev.filter((t) => t.id !== id));

frontend/src/GameDetails.tsx

@@ -67,7 +67,7 @@ export function GameDetails({ onShowToast }: Props) {
   };
 
   if (loading) return <LoadingState message="Loading game details..." />;
-  if (error) return <ErrorState message={error} onRetry={() => window.location.reload()} />;
+  if (error) return <ErrorState message={error} onRetry={() => navigate(0)} />;
   if (!game) return <EmptyState icon="🎮" title="Game not found" description="This game doesn't exist or has been deleted" />;
 
   const getExternalLink = () => {

frontend/src/api.ts

@@ -22,7 +22,7 @@ export const apiFetch = async (
     if (response.status == 401) {
       localStorage.removeItem("token");
       localStorage.removeItem("isAdmin");
-      window.location.href = "/";
+      window.dispatchEvent(new CustomEvent("unauthorized"));
     }
     throw new Error(`Request failed with status ${response.status}`);
   }

frontend/src/hooks/useGameFilter.ts

@@ -17,6 +17,12 @@ export function useGameFilter(
   const [fetchedTitles, setFetchedTitles] = useState<string[]>([]);
   const metaDataRef = useRef<{ [key: string]: GameProto }>({});
 
+  useEffect(() => {
+    return () => {
+      metaDataRef.current = {};
+    };
+  }, []);
+
   const { gameToNegative, gameToPositiveOpinion } = useMemo(() => {
     const gameToNegative = new Map<string, Set<string>>();
     const gameToPositiveOpinion = new Map<string, Set<string>>();
@@ -108,7 +114,7 @@ export function useGameFilter(
 
   const gamesMap = useMemo(() => {
     return new Map(Object.entries(metaDataRef.current));
-  }, [fetchedTitles]);
+  }, []);
 
   return { filteredGames, gameToPositive: gameToPositiveOpinion, games: gamesMap };
 }