fix(deps): update react monorepo to v19.2.3

backend/src/main.rs

@@ -44,6 +44,19 @@ async fn get_game(
     games.iter().find(|g| g.title == title).cloned()
 }
 
+#[post("/games/batch", data = "<req>")]
+async fn get_games_batch(
+    _token: auth::Token,
+    game_list: &rocket::State<Mutex<Vec<Game>>>,
+    req: proto_utils::Proto<items::GetGameInfoRequest>,
+) -> items::GameList {
+    let games = game_list.lock().await;
+    let req = req.into_inner();
+    let mut games = games.clone();
+    games.retain(|g| req.games.contains(&g.title));
+    items::GameList { games }
+}
+
 #[get("/games")]
 async fn get_games(
     _token: auth::Token,
@@ -319,7 +332,8 @@ async fn main() -> Result<(), std::io::Error> {
                 add_opinion,
                 remove_opinion,
                 add_game,
-                get_game_thumbnail
+                get_game_thumbnail,
+                get_games_batch
             ],
         )
         .mount(

frontend/items.ts

@@ -116,6 +116,14 @@ export interface RemoveOpinionRequest {
   gameTitle: string;
 }
 
+export interface GetGameInfoRequest {
+  games: string[];
+}
+
+export interface GameInfoResponse {
+  games: Game[];
+}
+
 function createBasePerson(): Person {
   return { name: "", opinion: [] };
 }
@@ -1213,6 +1221,122 @@ export const RemoveOpinionRequest: MessageFns<RemoveOpinionRequest> = {
   },
 };
 
+function createBaseGetGameInfoRequest(): GetGameInfoRequest {
+  return { games: [] };
+}
+
+export const GetGameInfoRequest: MessageFns<GetGameInfoRequest> = {
+  encode(message: GetGameInfoRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    for (const v of message.games) {
+      writer.uint32(10).string(v!);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): GetGameInfoRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseGetGameInfoRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.games.push(reader.string());
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): GetGameInfoRequest {
+    return { games: globalThis.Array.isArray(object?.games) ? object.games.map((e: any) => globalThis.String(e)) : [] };
+  },
+
+  toJSON(message: GetGameInfoRequest): unknown {
+    const obj: any = {};
+    if (message.games?.length) {
+      obj.games = message.games;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<GetGameInfoRequest>, I>>(base?: I): GetGameInfoRequest {
+    return GetGameInfoRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<GetGameInfoRequest>, I>>(object: I): GetGameInfoRequest {
+    const message = createBaseGetGameInfoRequest();
+    message.games = object.games?.map((e) => e) || [];
+    return message;
+  },
+};
+
+function createBaseGameInfoResponse(): GameInfoResponse {
+  return { games: [] };
+}
+
+export const GameInfoResponse: MessageFns<GameInfoResponse> = {
+  encode(message: GameInfoResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    for (const v of message.games) {
+      Game.encode(v!, writer.uint32(10).fork()).join();
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): GameInfoResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseGameInfoResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.games.push(Game.decode(reader, reader.uint32()));
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): GameInfoResponse {
+    return { games: globalThis.Array.isArray(object?.games) ? object.games.map((e: any) => Game.fromJSON(e)) : [] };
+  },
+
+  toJSON(message: GameInfoResponse): unknown {
+    const obj: any = {};
+    if (message.games?.length) {
+      obj.games = message.games.map((e) => Game.toJSON(e));
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<GameInfoResponse>, I>>(base?: I): GameInfoResponse {
+    return GameInfoResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<GameInfoResponse>, I>>(object: I): GameInfoResponse {
+    const message = createBaseGameInfoResponse();
+    message.games = object.games?.map((e) => Game.fromPartial(e)) || [];
+    return message;
+  },
+};
+
 /** Authentication service */
 export interface AuthService {
   Login(request: LoginRequest): Promise<LoginResponse>;
@@ -1255,6 +1379,7 @@ export interface MainService {
   GetGames(request: GetGamesRequest): Promise<GameList>;
   AddGame(request: Game): Promise<Game>;
   AddOpinion(request: AddOpinionRequest): Promise<Person>;
+  GetGameInfo(request: GetGameInfoRequest): Promise<GameInfoResponse>;
 }
 
 export const MainServiceServiceName = "items.MainService";
@@ -1268,6 +1393,7 @@ export class MainServiceClientImpl implements MainService {
     this.GetGames = this.GetGames.bind(this);
     this.AddGame = this.AddGame.bind(this);
     this.AddOpinion = this.AddOpinion.bind(this);
+    this.GetGameInfo = this.GetGameInfo.bind(this);
   }
   GetGame(request: GameRequest): Promise<Game> {
     const data = GameRequest.encode(request).finish();
@@ -1292,6 +1418,12 @@ export class MainServiceClientImpl implements MainService {
     const promise = this.rpc.request(this.service, "AddOpinion", data);
     return promise.then((data) => Person.decode(new BinaryReader(data)));
   }
+
+  GetGameInfo(request: GetGameInfoRequest): Promise<GameInfoResponse> {
+    const data = GetGameInfoRequest.encode(request).finish();
+    const promise = this.rpc.request(this.service, "GetGameInfo", data);
+    return promise.then((data) => GameInfoResponse.decode(new BinaryReader(data)));
+  }
 }
 
 interface Rpc {

frontend/pnpm-lock.yaml

@@ -16,13 +16,13 @@ importers:
         version: 2.10.1
       react:
         specifier: ^19.2.1
-        version: 19.2.1
+        version: 19.2.3
       react-dom:
         specifier: ^19.2.1
-        version: 19.2.1(react@19.2.1)
+        version: 19.2.3(react@19.2.3)
       react-router-dom:
         specifier: ^7.10.1
-        version: 7.10.1(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+        version: 7.10.1(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
     devDependencies:
       '@eslint/js':
         specifier: ^9.39.1
@@ -425,7 +425,7 @@ packages:
     resolution: {integrity: sha512-EcA07pHJouywpzsoTUqNh5NwGayl2PPVEJKUSinGGSxFGYn+shYbqMGBg6FXDqgXum9Ou/ecb+411ssw8HImJQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     peerDependencies:
-      vite: ^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0
+      vite: npm:rolldown-vite@7.2.5
 
   acorn-jsx@5.3.2:
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
@@ -863,10 +863,10 @@ packages:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
 
-  react-dom@19.2.1:
-    resolution: {integrity: sha512-ibrK8llX2a4eOskq1mXKu/TGZj9qzomO+sNfO98M6d9zIPOEhlBkMkBUBLd1vgS0gQsLDBzA+8jJBVXDnfHmJg==}
+  react-dom@19.2.3:
+    resolution: {integrity: sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==}
     peerDependencies:
-      react: ^19.2.1
+      react: ^19.2.3
 
   react-refresh@0.18.0:
     resolution: {integrity: sha512-QgT5//D3jfjJb6Gsjxv0Slpj23ip+HtOpnNgnb2S5zU3CB26G/IDPGoy4RJB42wzFE46DRsstbW6tKHoKbhAxw==}
@@ -889,8 +889,8 @@ packages:
       react-dom:
         optional: true
 
-  react@19.2.1:
-    resolution: {integrity: sha512-DGrYcCWK7tvYMnWh79yrPHt+vdx9tY+1gPZa7nJQtO/p8bLTDaHp4dzwEhQB7pZ4Xe3ok4XKuEPrVuc+wlpkmw==}
+  react@19.2.3:
+    resolution: {integrity: sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==}
     engines: {node: '>=0.10.0'}
 
   resolve-from@4.0.0:
@@ -1845,28 +1845,28 @@ snapshots:
 
   punycode@2.3.1: {}
 
-  react-dom@19.2.1(react@19.2.1):
+  react-dom@19.2.3(react@19.2.3):
     dependencies:
-      react: 19.2.1
+      react: 19.2.3
       scheduler: 0.27.0
 
   react-refresh@0.18.0: {}
 
-  react-router-dom@7.10.1(react-dom@19.2.1(react@19.2.1))(react@19.2.1):
+  react-router-dom@7.10.1(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
     dependencies:
-      react: 19.2.1
-      react-dom: 19.2.1(react@19.2.1)
-      react-router: 7.10.1(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+      react-router: 7.10.1(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
 
-  react-router@7.10.1(react-dom@19.2.1(react@19.2.1))(react@19.2.1):
+  react-router@7.10.1(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
     dependencies:
       cookie: 1.1.1
-      react: 19.2.1
+      react: 19.2.3
       set-cookie-parser: 2.7.2
     optionalDependencies:
-      react-dom: 19.2.1(react@19.2.1)
+      react-dom: 19.2.3(react@19.2.3)
 
-  react@19.2.1: {}
+  react@19.2.3: {}
 
   resolve-from@4.0.0: {}
 

frontend/src/App.css

@@ -34,47 +34,108 @@
   transition: color 0.2s;
 }
 
-.nav-link:hover, .nav-link.active {
-  color: var(--accent-color);
+.nav-link.active {
+  color: var(--text-color);
+  border-bottom: 2px solid var(--accent-color);
 }
 
-.form-group {
+/* Toast Styles */
+.toast-container {
+  position: fixed;
+  top: 2rem;
+  right: 2rem;
+  z-index: 1000;
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
-  margin-bottom: 1rem;
+  gap: 1rem;
 }
 
-.form-group label {
-  font-size: 0.9rem;
+.toast {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 1rem 1.5rem;
+  border-radius: 12px;
+  background-color: var(--secondary-bg);
+  border: 1px solid var(--border-color);
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
+  min-width: 300px;
+  animation: slideInRight 0.3s ease forwards;
+}
+
+.toast-success { border-left: 4px solid #4caf50; }
+.toast-error { border-left: 4px solid #f44336; }
+.toast-info { border-left: 4px solid var(--accent-color); }
+
+.toast-icon { font-size: 1.2rem; }
+.toast-message { flex: 1; font-weight: 500; }
+.toast-close {
+  background: none;
+  border: none;
   color: var(--text-muted);
+  cursor: pointer;
+  font-size: 1.5rem;
+  padding: 0;
+  line-height: 1;
 }
 
-.btn-secondary {
-  background-color: var(--secondary-alt-bg);
+@keyframes slideInRight {
+  from { transform: translateX(100%); opacity: 0; }
+  to { transform: translateX(0); opacity: 1; }
+}
+
+/* Loading Bar */
+.loading-bar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 3px;
+  background: linear-gradient(90deg, var(--accent-color), #4da3ff);
+  z-index: 2000;
+  transition: width 0.3s ease;
+}
+
+/* Theme Switcher */
+.theme-switcher {
+  display: flex;
+  gap: 0.5rem;
+  background: var(--secondary-alt-bg);
+  padding: 0.25rem;
+  border-radius: 20px;
   border: 1px solid var(--border-color);
 }
 
-.btn-secondary:hover {
-  background-color: var(--border-color);
-}
-
-.list-item {
-  background-color: var(--secondary-alt-bg);
-  padding: 1rem;
-  border-radius: 8px;
-  margin-bottom: 1rem;
-  border: 1px solid var(--border-color);
+.theme-btn:not(.game-btn) {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  border: 2px solid transparent;
+  cursor: pointer;
   transition: transform 0.2s;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.list-item:hover {
-  transform: translateY(-2px);
-  border-color: var(--accent-color);
+.theme-btn:hover { transform: scale(1.1); }
+.theme-btn.active { border-color: var(--text-color); }
+
+.theme-default { background: #23283d; }
+.theme-blackhole { background: #000000; }
+.theme-star { background: #0a0a2a; }
+.theme-ball { background: #1a1a1a; }
+.theme-reflect { background: #333333; }
+.theme-clouds { background: #23283d; }
+
+.game-entry {
+  gap: 0.5rem;
+  background-color: var(--secondary-alt-bg);
+  margin-bottom: 10px;
+  border-radius: 5px;
+  padding: 1rem;
 }
 
-.grid-container {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: 1.5rem;
+.game-entry:hover {
+  background-color: var(--primary-bg);
 }

frontend/src/App.tsx

@@ -7,9 +7,17 @@ import { GameList } from "./GameList";
 import { GameFilter } from "./GameFilter";
 import { GameDetails } from "./GameDetails";
 import { ShaderBackground } from "./ShaderBackground";
-import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
+import { BrowserRouter, Routes, Route, NavLink } from "react-router-dom";
 import "./App.css";
 import { apiFetch } from "./api";
+import { Toast } from "./Toast";
+import type { ToastType } from "./Toast";
+
+interface ToastMessage {
+  id: number;
+  message: string;
+  type: ToastType;
+}
 
 function App() {
   const [people, setPeople] = useState<Person[]>([]);
@@ -17,6 +25,8 @@ function App() {
     localStorage.getItem("token") || ""
   );
   const [theme, setTheme] = useState<string>("default");
+  const [toasts, setToasts] = useState<ToastMessage[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
 
   useEffect(() => {
     if (theme !== "default") {
@@ -26,8 +36,18 @@ function App() {
     }
   }, [theme]);
 
+  const addToast = (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));
+  };
+
   const fetchPeople = () => {
     if (!token) return;
+    setIsLoading(true);
 
     apiFetch("/api")
       .then((res) => res.arrayBuffer())
@@ -35,7 +55,11 @@ function App() {
         const list = PersonListProto.decode(new Uint8Array(buffer));
         setPeople(list.person);
       })
-      .catch((err) => console.error("Failed to fetch people:", err));
+      .catch((err) => {
+        console.error("Failed to fetch people:", err);
+        addToast("Failed to fetch people list", "error");
+      })
+      .finally(() => setIsLoading(false));
   };
 
   useEffect(() => {
@@ -46,49 +70,80 @@ function App() {
   const handleLogin = (newToken: string) => {
     setToken(newToken);
     localStorage.setItem("token", newToken);
+    addToast("Welcome back!", "success");
   };
 
   const handleLogout = () => {
     setToken("");
     setPeople([]);
     localStorage.removeItem("token");
+    addToast("Logged out successfully", "info");
   };
 
   if (!token) {
     return <Login onLogin={handleLogin} />;
   }
 
+  const themes = [
+    { id: "default", label: "Default", icon: "🏠" },
+    { id: "blackhole", label: "Blackhole", icon: "🕳️" },
+    { id: "star", label: "Star", icon: "⭐" },
+    { id: "ball", label: "Ball", icon: "⚽" },
+    { id: "reflect", label: "Reflect", icon: "🪞" },
+    { id: "clouds", label: "Clouds", icon: "☁️" },
+  ];
+
   return (
     <BrowserRouter>
+      {isLoading && <div className="loading-bar" style={{ width: "50%" }} />}
+      <div className="toast-container">
+        {toasts.map((toast) => (
+          <Toast
+            key={toast.id}
+            message={toast.message}
+            type={toast.type}
+            onClose={() => removeToast(toast.id)}
+          />
+        ))}
+      </div>
       <div className="card">
         <div className="navbar">
           <div className="nav-links">
-            <Link to="/" className="nav-link">
-              People List
-            </Link>
-            <Link to="/games" className="nav-link">
+            <NavLink to="/" className="nav-link">
+              People
+            </NavLink>
+            <NavLink to="/games" className="nav-link">
               Games
-            </Link>
-            <Link to="/filter" className="nav-link">
+            </NavLink>
+            <NavLink to="/filter" className="nav-link">
               Filter
-            </Link>
+            </NavLink>
+          </div>
+
+          <div style={{ display: "flex", alignItems: "center", gap: "1.5rem" }}>
+            <div className="theme-switcher">
+              {themes.map((t) => (
+                <button
+                  key={t.id}
+                  className={`theme-btn theme-${t.id} ${
+                    theme === t.id ? "active" : ""
+                  }`}
+                  onClick={() => setTheme(t.id)}
+                  title={t.label}
+                >
+                  {t.icon}
+                </button>
+              ))}
             </div>
             <button onClick={handleLogout} className="btn-secondary">
               Logout
             </button>
-          <select value={theme} onChange={(e) => setTheme(e.target.value)}>
-            <option value="default">Default Theme</option>
-            <option value="blackhole">Blackhole Theme</option>
-            <option value="star">Star Theme</option>
-            <option value="ball">Universe Ball Theme</option>
-            <option value="reflect">Ball Cage Theme</option>
-            <option value="clouds">Clouds Theme</option>
-          </select>
+          </div>
         </div>
         <ShaderBackground theme={theme} />
         <Routes>
           <Route path="/" element={<PersonList people={people} />} />
-          <Route path="/games" element={<GameList />} />
+          <Route path="/games" element={<GameList onShowToast={addToast} />} />
           <Route path="/filter" element={<GameFilter />} />
           <Route path="/person/:name" element={<PersonDetails />} />
           <Route path="/game/:title" element={<GameDetails />} />

frontend/src/GameFilter.css

@@ -0,0 +1,14 @@
+.gamefilter-entry {
+    border-radius: 5px;
+    border: 1px solid var(--border-color);
+    background-color: var(--secondary-alt-bg);
+    margin-bottom: 10px;
+    padding: 10px;
+    width: 30%;
+    text-align: center;
+    user-select: none;
+}
+
+.gamefilter-entry:hover {
+    background-color: var(--primary-bg);
+}

frontend/src/GameFilter.tsx

@@ -3,10 +3,13 @@ import {
   Person,
   PersonList as PersonListProto,
   Game as GameProto,
+  GetGameInfoRequest,
+  GameInfoResponse,
 } from "../items";
 import { apiFetch } from "./api";
 import { Link } from "react-router-dom";
 import { GameImage } from "./GameImage";
+import "./GameFilter.css"
 
 export function GameFilter() {
   const [people, setPeople] = useState<Person[]>([]);
@@ -71,22 +74,29 @@ export function GameFilter() {
       .filter(([, players]) => players.size === 0)
       .map(([game]) => game);
 
-    const games = game_titles.map(async (title) => {
-      if (metaData[title]) {
-        console.log("returned cached metadata");
-        return metaData[title];
-      }
-      return await apiFetch(`/api/game/${encodeURIComponent(title)}`)
+    let games = game_titles.filter((title) => metaData[title]).map((title) => metaData[title]);
+    const gamesToFetch = GetGameInfoRequest.encode(
+      GetGameInfoRequest.create({
+        games: game_titles.filter((title) => !metaData[title]),
+      })
+    ).finish();
+
+    apiFetch("/api/games/batch", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/octet-stream",
+      },
+      body: gamesToFetch,
+    })
       .then((res) => res.arrayBuffer())
       .then((buffer) => {
-          const game = GameProto.decode(new Uint8Array(buffer)) as GameProto;
-          metaData[title] = game;
-          return game;
-        })
-        .catch((err) => console.error("Failed to fetch game:", err));
+        const list = GameInfoResponse.decode(new Uint8Array(buffer));
+        games = games.concat(list.games);
+
+        games.forEach((game) => {
+          metaData[game.title] = game;
         });
 
-    Promise.all(games).then((games) => {
         const filteredGames = games.filter((g) => {
           const game = g as GameProto;
           return (
@@ -117,28 +127,27 @@ export function GameFilter() {
 
       <div style={{ marginBottom: "3rem" }}>
         <h3>Select People</h3>
-        <div className="grid-container">
+        <div
+          className="grid-container"
+          style={{
+            display: "flex",
+            flexWrap: "wrap",
+            gap: "1rem",
+            justifyContent: "center",
+          }}
+        >
           {people.map((person) => (
             <div
               key={person.name}
-              className="list-item"
+              className="list-item gamefilter-entry"
               style={{
                 borderColor: selectedPeople.has(person.name)
                   ? "var(--accent-color)"
                   : "var(--border-color)",
-                cursor: "pointer",
               }}
               onClick={() => togglePerson(person.name)}
             >
-              <div
-                style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}
-              >
-                <input
-                  type="checkbox"
-                  checked={selectedPeople.has(person.name)}
-                  onChange={() => togglePerson(person.name)}
-                  style={{ cursor: "pointer" }}
-                />
+              <div style={{ gap: "0.5rem" }}>
                 <strong>{person.name}</strong>
               </div>
               <div
@@ -164,7 +173,7 @@ export function GameFilter() {
                 <Link
                   to={`/game/${encodeURIComponent(game)}`}
                   key={game}
-                  className="list-item"
+                  className="list-item game-entry"
                   style={{
                     textDecoration: "none",
                     color: "inherit",
@@ -182,7 +191,8 @@ export function GameFilter() {
                         marginTop: "0.5rem",
                       }}
                     >
-                      ✓ {gameToPositive.get(game)!.size} selected would play
+                      <span>✓</span> {gameToPositive.get(game)!.size} selected
+                      would play
                     </div>
                     {selectedPeople.size - gameToPositive.get(game)!.size >
                       0 && (
@@ -193,8 +203,13 @@ export function GameFilter() {
                           marginTop: "0.3rem",
                         }}
                       >
-                        ? {selectedPeople.size - gameToPositive.get(game)!.size}{" "}
-                        {(selectedPeople.size - gameToPositive.get(game)!.size) > 1 ? "are" : "is"} neutral
+                        <span>?</span>{" "}
+                        {selectedPeople.size - gameToPositive.get(game)!.size}{" "}
+                        {selectedPeople.size - gameToPositive.get(game)!.size >
+                        1
+                          ? "are"
+                          : "is"}{" "}
+                        neutral
                       </div>
                     )}
                   </div>
@@ -203,9 +218,22 @@ export function GameFilter() {
               ))}
             </ul>
           ) : (
-            <p style={{ color: "var(--text-muted)", fontStyle: "italic" }}>
-              No games found where all selected people would play
+            <div
+              style={{
+                padding: "3rem",
+                textAlign: "center",
+                background: "var(--secondary-alt-bg)",
+                borderRadius: "16px",
+                border: "1px dashed var(--border-color)",
+                color: "var(--text-muted)",
+              }}
+            >
+              <div style={{ fontSize: "2rem", marginBottom: "1rem" }}>🔍</div>
+              <p>No games found where all selected people would play.</p>
+              <p style={{ fontSize: "0.9rem" }}>
+                Try selecting fewer people or adding more opinions!
               </p>
+            </div>
           )}
         </div>
       )}

frontend/src/GameList.tsx

@@ -11,8 +11,13 @@ import {
 import { Link, useLocation } from "react-router-dom";
 import { apiFetch, get_auth_status } from "./api";
 import { GameImage } from "./GameImage";
+import type { ToastType } from "./Toast";
 
-export function GameList() {
+interface Props {
+  onShowToast?: (message: string, type?: ToastType) => void;
+}
+
+export function GameList({ onShowToast }: Props) {
   const [games, setGames] = useState<Game[]>([]);
   const [title, setTitle] = useState("");
   const [source, setSource] = useState<Source>(Source.STEAM);
@@ -20,7 +25,6 @@ export function GameList() {
   const [maxPlayers, setMaxPlayers] = useState(1);
   const [price, setPrice] = useState(0);
   const [remoteId, setRemoteId] = useState(0);
-  const [message, setMessage] = useState("");
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [opinions, setOpinions] = useState<Opinion[]>([]);
 
@@ -96,22 +100,19 @@ export function GameList() {
       });
 
       if (res.ok) {
-        setMessage("success");
+        onShowToast?.("Game added successfully!", "success");
         setTitle("");
         setMinPlayers(1);
         setMaxPlayers(1);
         setPrice(0);
         setRemoteId(0);
         fetchGames();
-        setTimeout(() => setMessage(""), 3000);
       } else {
-        setMessage("error");
-        setTimeout(() => setMessage(""), 3000);
+        onShowToast?.("Failed to add game. Please try again.", "error");
       }
     } catch (err) {
       console.error(err);
-      setMessage("error");
-      setTimeout(() => setMessage(""), 3000);
+      onShowToast?.("An error occurred while adding the game.", "error");
     } finally {
       setIsSubmitting(false);
     }
@@ -128,7 +129,8 @@ export function GameList() {
   };
 
   const formHeaderStyles: React.CSSProperties = {
-    background: "linear-gradient(135deg, var(--accent-color) 0%, var(--secondary-accent) 100%)",
+    background:
+      "linear-gradient(135deg, var(--accent-color) 0%, var(--secondary-accent) 100%)",
     padding: "1.5rem 2rem",
     display: "flex",
     alignItems: "center",
@@ -195,7 +197,8 @@ export function GameList() {
   const submitButtonStyles: React.CSSProperties = {
     width: "100%",
     padding: "1rem",
-    background: "linear-gradient(135deg, var(--accent-color) 0%, var(--secondary-accent) 100%)",
+    background:
+      "linear-gradient(135deg, var(--accent-color) 0%, var(--secondary-accent) 100%)",
     border: "none",
     borderRadius: "12px",
     color: "white",
@@ -211,26 +214,6 @@ export function GameList() {
     transform: isSubmitting ? "none" : undefined,
   };
 
-  const messageStyles: React.CSSProperties = {
-    padding: "1rem",
-    borderRadius: "12px",
-    marginBottom: "1.5rem",
-    display: "flex",
-    alignItems: "center",
-    gap: "0.75rem",
-    animation: "slideIn 0.3s ease",
-    backgroundColor:
-      message === "success"
-        ? "rgba(76, 175, 80, 0.15)"
-        : "rgba(244, 67, 54, 0.15)",
-    border: `1px solid ${
-      message === "success"
-        ? "rgba(76, 175, 80, 0.3)"
-        : "rgba(244, 67, 54, 0.3)"
-    }`,
-    color: message === "success" ? "#4caf50" : "#f44336",
-  };
-
   return (
     <div>
       <style>
@@ -303,19 +286,6 @@ export function GameList() {
         </div>
 
         <div style={formBodyStyles}>
-          {message && (
-            <div style={messageStyles}>
-              <span style={{ fontSize: "1.2rem" }}>
-                {message === "success" ? "✓" : "✕"}
-              </span>
-              <span style={{ fontWeight: 500 }}>
-                {message === "success"
-                  ? "Game added successfully!"
-                  : "Failed to add game. Please try again."}
-              </span>
-            </div>
-          )}
-
           <form onSubmit={handleSubmit}>
             {/* Basic Info Section */}
             <div style={sectionStyles}>
@@ -489,7 +459,7 @@ export function GameList() {
                     "Content-Type": "application/octet-stream",
                   },
                   body: RemoveOpinionRequest.encode(
-                    AddOpinionRequest.create({
+                    RemoveOpinionRequest.create({
                       gameTitle: title,
                     })
                   ).finish(),
@@ -501,9 +471,11 @@ export function GameList() {
                     );
 
                     setOpinions(response.opinion);
+                    onShowToast?.(`Updated opinion for ${title}`, "info");
                   })
                   .catch((err) => {
                     console.error(err);
+                    onShowToast?.("Failed to update opinion", "error");
                   });
                 return;
               }
@@ -527,9 +499,11 @@ export function GameList() {
                   );
 
                   setOpinions(response.opinion);
+                  onShowToast?.(`Updated opinion for ${title}`, "info");
                 })
                 .catch((err) => {
                   console.error(err);
+                  onShowToast?.("Failed to update opinion", "error");
                 });
             }
 
@@ -556,7 +530,7 @@ export function GameList() {
                       ? opinion.wouldPlay
                         ? "#4caf50" // would play (green)
                         : "#f44336" // would not play (red)
-                      : "#191f2e", // no opinion (bg-2)
+                      : "#ffff00", // no opinion (yellow)
                   }}
                 >
                   <strong
@@ -565,7 +539,7 @@ export function GameList() {
                         ? opinion.wouldPlay
                           ? "0 0 10px #4caf50" // would play (green)
                           : "0 0 10px #f44336" // would not play (red)
-                        : "none", // no opinion (bg-2)
+                        : "0 0 10px #ffff00", // no opinion (yellow)
                     }}
                   >
                     {game.title}
@@ -582,30 +556,47 @@ export function GameList() {
                 >
                   <button
                     onClick={() => handleOpinion(game.title, 1)}
+                    className="theme-btn game-btn"
                     style={{
-                      width: "50%",
-                      borderColor: "#4caf50",
+                      width: "33%",
+                      borderColor: opinion?.wouldPlay
+                        ? "#4caf50"
+                        : "transparent",
+                      background: "rgba(76, 175, 80, 0.1)",
+                      fontSize: "1.2rem",
                     }}
+                    title="Would Play"
                   >
-                    Would Play
+                    👍
                   </button>
                   <button
                     onClick={() => handleOpinion(game.title, 2)}
+                    className="theme-btn game-btn"
                     style={{
-                      width: "50%",
-                      borderColor: "#ffff00",
+                      width: "33%",
+                      borderColor: !opinion ? "#ffff00" : "transparent",
+                      background: "rgba(255, 255, 0, 0.1)",
+                      fontSize: "1.2rem",
                     }}
+                    title="Neutral"
                   >
-                    Neutral
+                    😐
                   </button>
                   <button
                     onClick={() => handleOpinion(game.title, 0)}
+                    className="theme-btn game-btn"
                     style={{
-                      width: "50%",
-                      borderColor: "#f44336",
+                      width: "33%",
+                      borderColor:
+                        opinion && !opinion.wouldPlay
+                          ? "#f44336"
+                          : "transparent",
+                      background: "rgba(244, 67, 54, 0.1)",
+                      fontSize: "1.2rem",
                     }}
+                    title="Would Not Play"
                   >
-                    Would Not Play
+                    👎
                   </button>
                 </div>
               </div>

frontend/src/PersonList.css

@@ -0,0 +1,19 @@
+.list-item {
+    border-radius: 5px;
+    border: 1px solid var(--border-color);
+    background-color: var(--secondary-alt-bg);
+    margin-bottom: 10px;
+    padding: 10px;
+    text-align: center;
+    user-select: none;
+}
+
+.list-item:hover {
+    background-color: var(--primary-bg);
+}
+
+.grid-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 1rem;
+}

frontend/src/PersonList.tsx

@@ -2,6 +2,7 @@ import { Person } from "../items";
 import { Link } from "react-router-dom";
 import { useState } from "react";
 import { get_auth_status } from "./api";
+import "./PersonList.css"
 
 interface Props {
   people: Person[];

frontend/src/Toast.tsx

@@ -0,0 +1,45 @@
+import React, { useEffect } from "react";
+
+export type ToastType = "success" | "error" | "info";
+
+interface ToastProps {
+  message: string;
+  type: ToastType;
+  onClose: () => void;
+  duration?: number;
+}
+
+export const Toast: React.FC<ToastProps> = ({
+  message,
+  type,
+  onClose,
+  duration = 3000,
+}) => {
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      onClose();
+    }, duration);
+    return () => clearTimeout(timer);
+  }, [onClose, duration]);
+
+  const getIcon = () => {
+    switch (type) {
+      case "success":
+        return "✓";
+      case "error":
+        return "✕";
+      default:
+        return "ℹ";
+    }
+  };
+
+  return (
+    <div className={`toast toast-${type}`}>
+      <span className="toast-icon">{getIcon()}</span>
+      <span className="toast-message">{message}</span>
+      <button className="toast-close" onClick={onClose}>
+        &times;
+      </button>
+    </div>
+  );
+};

frontend/src/index.css

@@ -82,11 +82,17 @@ input, select {
   border-radius: 6px;
   font-size: 1em;
   font-family: inherit;
+  transition: all 0.2s ease;
 }
 
 input:focus, select:focus {
-  outline: 2px solid var(--accent-color);
-  border-color: transparent;
+  outline: none;
+  border-color: var(--accent-color);
+  box-shadow: 0 0 0 2px rgba(9, 109, 192, 0.2);
+}
+
+* {
+  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
 }
 
 

protobuf/items.proto

@@ -28,6 +28,7 @@ enum Source {
 }
 
 message PersonList { repeated Person person = 1; }
+
 message GameList { repeated Game games = 1; }
 
 // Authentication messages
@@ -65,6 +66,7 @@ service AuthService {
 }
 
 message GameRequest { string title = 1; }
+
 message GetGamesRequest {}
 
 message AddOpinionRequest {
@@ -74,9 +76,18 @@ message AddOpinionRequest {
 
 message RemoveOpinionRequest { string game_title = 1; }
 
+message GetGameInfoRequest {
+  repeated string games = 1;
+}
+
+message GameInfoResponse {
+  repeated Game games = 1;
+}
+
 service MainService {
   rpc GetGame(GameRequest) returns (Game);
   rpc GetGames(GetGamesRequest) returns (GameList);
   rpc AddGame(Game) returns (Game);
   rpc AddOpinion(AddOpinionRequest) returns (Person);
+  rpc GetGameInfo(GetGameInfoRequest) returns (GameInfoResponse);
 }