fix(deps): update react monorepo

frontend/src/App.tsx

@@ -172,7 +172,7 @@ function App() {
         </div>
         <ShaderBackground theme={theme} />
         <Routes>
-          <Route path="/" element={<PersonList people={people} onShowToast={addToast} />} />
+          <Route path="/" element={<PersonList people={people} loading={isLoading} onShowToast={addToast} />} />
           <Route path="/games" element={<GameList onShowToast={addToast} />} />
           <Route path="/filter" element={<GameFilter />} />
           <Route path="/person/:name" element={<PersonDetails />} />

frontend/src/ErrorBoundary.tsx

@@ -0,0 +1,48 @@
+import { Component, type ErrorInfo, type ReactNode } from "react";
+import { ErrorState } from "./components/EmptyState";
+
+interface Props {
+  children: ReactNode;
+  fallback?: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  public state: State = {
+    hasError: false,
+    error: null
+  };
+
+  public static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error("ErrorBoundary caught an error:", error, errorInfo);
+  }
+
+  public handleReset = () => {
+    this.setState({ hasError: false, error: null });
+  };
+
+  public render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+
+      return (
+        <ErrorState
+          message={this.state.error?.message || "An unexpected error occurred"}
+          onRetry={this.handleReset}
+        />
+      );
+    }
+
+    return this.props.children;
+  }
+}

frontend/src/GameDetails.tsx

@@ -2,6 +2,7 @@ import { useState, useEffect } from "react";
 import { useParams, useNavigate } from "react-router-dom";
 import { Game, Source } from "../items";
 import { apiFetch, get_is_admin } from "./api";
+import { LoadingState, EmptyState, ErrorState } from "./components/EmptyState";
 
 interface Props {
   onShowToast?: (message: string, type?: "success" | "error" | "info") => void;
@@ -11,26 +12,32 @@ export function GameDetails({ onShowToast }: Props) {
   const { title } = useParams<{ title: string }>();
   const navigate = useNavigate();
   const [game, setGame] = useState<Game | null>(null);
-  const [loading, setLoading] = useState(true);
+  const [loading, setLoading] = useState(!!title);
+  const [error, setError] = useState<string | null>(title ? null : "Game title is missing");
 
   const isAdmin = get_is_admin();
 
   useEffect(() => {
     if (!title) return;
 
-    apiFetch(`/api/game/${encodeURIComponent(title)}`)
+    (async () => {
-      .then(async (res) => {
+      try {
-        if (!res.ok) throw new Error("Game not found");
+        const res = await apiFetch(`/api/game/${encodeURIComponent(title)}`);
-        return Game.decode(new Uint8Array(await res.arrayBuffer()));
+        if (!res.ok) {
-      })
+          if (res.status === 404) {
-      .then((data) => {
+            throw new Error("Game not found");
-        setGame(data);
+          }
-        setLoading(false);
+          throw new Error("Failed to load game");
-      })
+        }
-      .catch((err) => {
+        const buffer = await res.arrayBuffer();
+        setGame(Game.decode(new Uint8Array(buffer)));
+      } catch (err) {
         console.error(err);
+        setError(err instanceof Error ? err.message : "Failed to load game");
+      } finally {
         setLoading(false);
-      });
+      }
+    })();
   }, [title]);
 
   const handleDelete = async () => {
@@ -59,8 +66,9 @@ export function GameDetails({ onShowToast }: Props) {
     }
   };
 
-  if (loading) return <div>Loading...</div>;
+  if (loading) return <LoadingState message="Loading game details..." />;
-  if (!game) return <div>Game not found</div>;
+  if (error) return <ErrorState message={error} onRetry={() => window.location.reload()} />;
+  if (!game) return <EmptyState icon="🎮" title="Game not found" description="This game doesn't exist or has been deleted" />;
 
   const getExternalLink = () => {
     if (game.source === Source.STEAM) {

frontend/src/GameFilter.tsx

@@ -5,9 +5,11 @@ import "./GameFilter.css";
 import { useGameFilter } from "./hooks/useGameFilter";
 import { PersonSelector } from "./components/PersonSelector";
 import { FilteredGamesList } from "./components/FilteredGamesList";
+import { LoadingState } from "./components/EmptyState";
 
 export function GameFilter() {
   const [people, setPeople] = useState<Person[]>([]);
+  const [loading, setLoading] = useState(true);
   const [selectedPeople, setSelectedPeople] = useState<Set<string>>(new Set());
 
   const { filteredGames, gameToPositive } = useGameFilter(
@@ -16,15 +18,22 @@ export function GameFilter() {
   );
 
   useEffect(() => {
-    apiFetch("/api")
+    (async () => {
-      .then((res) => res.arrayBuffer())
+      try {
-      .then((buffer) => {
+        const res = await apiFetch("/api");
+        const buffer = await res.arrayBuffer();
         const list = PersonListProto.decode(new Uint8Array(buffer));
         setPeople(list.person);
-      })
+      } catch (err) {
-      .catch((err) => console.error("Failed to fetch people:", err));
+        console.error("Failed to fetch people:", err);
+      } finally {
+        setLoading(false);
+      }
+    })();
   }, []);
 
+  if (loading) return <LoadingState message="Loading people..." />;
+
   const togglePerson = (name: string) => {
     const newSelected = new Set(selectedPeople);
     if (newSelected.has(name)) {

frontend/src/GameList.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useMemo, useCallback } from "react";
 import {
   Game,
   Source,
@@ -12,6 +12,7 @@ import { Link, useLocation } from "react-router-dom";
 import { apiFetch, get_auth_status } from "./api";
 import { GameImage } from "./GameImage";
 import type { ToastType } from "./Toast";
+import { EmptyState } from "./components/EmptyState";
 
 interface Props {
   onShowToast?: (message: string, type?: ToastType) => void;
@@ -26,10 +27,22 @@ export function GameList({ onShowToast }: Props) {
   const [price, setPrice] = useState(0);
   const [remoteId, setRemoteId] = useState(0);
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const [titleError, setTitleError] = useState("");
+  const [playersError, setPlayersError] = useState("");
   const [remoteIdError, setRemoteIdError] = useState("");
   const [opinions, setOpinions] = useState<Opinion[]>([]);
+  const [gamesLoading, setGamesLoading] = useState(true);
+  const [searchQuery, setSearchQuery] = useState("");
 
-  const fetchGames = () => {
+  const filteredGames = useMemo(() => {
+    if (!searchQuery) return games;
+    return games.filter(game =>
+      game.title.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+  }, [games, searchQuery]);
+
+  const fetchGames = useCallback(() => {
+    setGamesLoading(true);
     apiFetch("/api/games")
       .then((res) => res.arrayBuffer())
       .then((buffer) => {
@@ -38,10 +51,15 @@ export function GameList({ onShowToast }: Props) {
           setGames(list.games);
         } catch (e) {
           console.error("Failed to decode games:", e);
+          onShowToast?.("Failed to load games", "error");
         }
       })
-      .catch(console.error);
+      .catch((err) => {
-  };
+        console.error(err);
+        onShowToast?.("Failed to fetch games", "error");
+      })
+      .finally(() => setGamesLoading(false));
+  }, [onShowToast]);
 
   useEffect(() => {
     get_auth_status().then((user) => {
@@ -76,20 +94,42 @@ export function GameList({ onShowToast }: Props) {
 
   useEffect(() => {
     fetchGames();
-  }, []);
+  }, [fetchGames]);
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
 
-    if (remoteId === 0) {
+    setTitleError("");
-      setRemoteIdError("Remote ID must be greater than 0");
+    setPlayersError("");
-      return;
+    setRemoteIdError("");
+
+    let hasErrors = false;
+
+    if (!title.trim()) {
+      setTitleError("Game title is required");
+      hasErrors = true;
     }
 
-    setRemoteIdError("");
+    if (minPlayers < 1) {
+      setPlayersError("Minimum players must be at least 1");
+      hasErrors = true;
+    }
+
+    if (maxPlayers < minPlayers) {
+      setPlayersError("Maximum players cannot be less than minimum players");
+      hasErrors = true;
+    }
+
+    if (remoteId === 0) {
+      setRemoteIdError("Remote ID must be greater than 0");
+      hasErrors = true;
+    }
+
+    if (hasErrors) return;
+
     setIsSubmitting(true);
     const game = {
-      title,
+      title: title.trim(),
       source,
       minPlayers,
       maxPlayers,
@@ -109,14 +149,11 @@ export function GameList({ onShowToast }: Props) {
 
       if (res.ok) {
         onShowToast?.("Game added successfully!", "success");
-        setTitle("");
+        clearForm();
-        setMinPlayers(1);
-        setMaxPlayers(1);
-        setPrice(0);
-        setRemoteId(0);
         fetchGames();
       } else {
-        onShowToast?.("Failed to add game. Please try again.", "error");
+        const errorText = await res.text();
+        onShowToast?.(errorText || "Failed to add game. Please try again.", "error");
       }
     } catch (err) {
       console.error(err);
@@ -126,6 +163,17 @@ export function GameList({ onShowToast }: Props) {
     }
   };
 
+  const clearForm = () => {
+    setTitle("");
+    setMinPlayers(1);
+    setMaxPlayers(1);
+    setPrice(0);
+    setRemoteId(0);
+    setTitleError("");
+    setPlayersError("");
+    setRemoteIdError("");
+  };
+
   const formCardStyles: React.CSSProperties = {
     background:
       "linear-gradient(135deg, var(--secondary-bg) 0%, var(--secondary-alt-bg) 100%)",
@@ -307,12 +355,23 @@ export function GameList({ onShowToast }: Props) {
                 <input
                   type="text"
                   value={title}
-                  onChange={(e) => setTitle(e.target.value)}
+                  onChange={(e) => {
+                    setTitle(e.target.value);
+                    if (titleError) setTitleError("");
+                  }}
                   required
                   placeholder="Enter game title..."
-                  style={inputStyles}
+                  style={{
+                    ...inputStyles,
+                    borderColor: titleError ? "#f44336" : undefined
+                  }}
                   className="add-game-input"
                 />
+                {titleError && (
+                  <div style={{ color: "#f44336", fontSize: "0.75rem", marginTop: "0.25rem" }}>
+                    {titleError}
+                  </div>
+                )}
               </div>
 
               <div style={inputGroupStyles}>
@@ -352,9 +411,15 @@ export function GameList({ onShowToast }: Props) {
                   <input
                     type="number"
                     value={minPlayers}
-                    onChange={(e) => setMinPlayers(Number(e.target.value))}
+                    onChange={(e) => {
+                      setMinPlayers(Number(e.target.value));
+                      if (playersError) setPlayersError("");
+                    }}
                     min="1"
-                    style={inputStyles}
+                    style={{
+                      ...inputStyles,
+                      borderColor: playersError ? "#f44336" : undefined
+                    }}
                     className="add-game-input"
                   />
                 </div>
@@ -363,13 +428,24 @@ export function GameList({ onShowToast }: Props) {
                   <input
                     type="number"
                     value={maxPlayers}
-                    onChange={(e) => setMaxPlayers(Number(e.target.value))}
+                    onChange={(e) => {
+                      setMaxPlayers(Number(e.target.value));
+                      if (playersError) setPlayersError("");
+                    }}
                     min="1"
-                    style={inputStyles}
+                    style={{
+                      ...inputStyles,
+                      borderColor: playersError ? "#f44336" : undefined
+                    }}
                     className="add-game-input"
                   />
                 </div>
               </div>
+              {playersError && (
+                <div style={{ color: "#f44336", fontSize: "0.75rem", marginTop: "0.25rem" }}>
+                  {playersError}
+                </div>
+              )}
             </div>
 
             <div style={dividerStyles}></div>
@@ -425,33 +501,47 @@ export function GameList({ onShowToast }: Props) {
               </div>
             </div>
 
-            <button
+            <div style={{ display: "flex", gap: "0.75rem", marginTop: "1rem" }}>
-              type="submit"
+              <button
-              disabled={isSubmitting}
+                type="button"
-              style={submitButtonStyles}
+                onClick={clearForm}
-              className="submit-btn"
+                disabled={isSubmitting || (!title && minPlayers === 1 && maxPlayers === 1 && price === 0 && remoteId === 0)}
-            >
+                style={{
-              {isSubmitting ? (
+                  ...submitButtonStyles,
-                <>
+                  background: "var(--tertiary-bg)",
-                  <span
+                  flex: 1
-                    style={{
+                }}
-                      width: "18px",
+              >
-                      height: "18px",
+                Clear
-                      border: "2px solid rgba(255,255,255,0.3)",
+              </button>
-                      borderTopColor: "white",
+              <button
-                      borderRadius: "50%",
+                type="submit"
-                      animation: "spin 0.8s linear infinite",
+                disabled={isSubmitting}
-                    }}
+                style={submitButtonStyles}
-                  ></span>
+                className="submit-btn"
-                  Adding Game...
+              >
-                </>
+                {isSubmitting ? (
-              ) : (
+                  <>
-                <>
+                    <span
-                  <span style={{ fontSize: "1.1rem" }}>➕</span>
+                      style={{
-                  Add Game to Collection
+                        width: "18px",
-                </>
+                        height: "18px",
-              )}
+                        border: "2px solid rgba(255,255,255,0.3)",
-            </button>
+                        borderTopColor: "white",
+                        borderRadius: "50%",
+                        animation: "spin 0.8s linear infinite",
+                      }}
+                    ></span>
+                    Adding Game...
+                  </>
+                ) : (
+                  <>
+                    <span style={{ fontSize: "1.1rem" }}>➕</span>
+                    Add Game to Collection
+                  </>
+                )}
+              </button>
+            </div>
           </form>
         </div>
       </div>
@@ -465,16 +555,89 @@ export function GameList({ onShowToast }: Props) {
       </style>
 
       <div style={{ marginTop: "3rem" }}>
-        <h3
+        <div
-          id="existing-games"
           style={{
-            scrollMarginBottom: "0",
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            marginBottom: "1rem",
+            flexWrap: "wrap",
+            gap: "1rem"
           }}
         >
-          Existing Games
+          <h3
-        </h3>
+            id="existing-games"
-        <ul className="grid-container">
+            style={{
-          {games.map((game) => {
+              scrollMarginBottom: "0",
+              margin: 0
+            }}
+          >
+            Existing Games {filteredGames.length > 0 && <span style={{ fontSize: "0.7em", color: "var(--text-muted)" }}>({filteredGames.length})</span>}
+          </h3>
+          <input
+            type="text"
+            placeholder="🔍 Search games..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            style={{
+              padding: "0.5rem 1rem",
+              fontSize: "0.9rem",
+              minWidth: "200px"
+            }}
+          />
+        </div>
+        {gamesLoading ? (
+          <div className="grid-container">
+            {Array.from({ length: 6 }).map((_, i) => (
+              <div
+                key={i}
+                style={{
+                  backgroundColor: "var(--secondary-alt-bg)",
+                  border: "1px solid var(--border-color)",
+                  borderRadius: "5px",
+                  padding: "1rem",
+                  minHeight: "100px",
+                  animation: "shimmer 1.5s infinite"
+                }}
+              >
+                <div
+                  style={{
+                    width: "70%",
+                    height: "20px",
+                    backgroundColor: "var(--tertiary-bg)",
+                    borderRadius: "4px",
+                    marginBottom: "0.75rem",
+                    animation: "shimmer 1.5s infinite"
+                  }}
+                ></div>
+                <div
+                  style={{
+                    width: "40%",
+                    height: "40px",
+                    backgroundColor: "var(--tertiary-bg)",
+                    borderRadius: "8px",
+                    marginTop: "0.5rem",
+                    animation: "shimmer 1.5s infinite 0.2s"
+                  }}
+                ></div>
+              </div>
+            ))}
+            <style>{`
+              @keyframes shimmer {
+                0%, 100% { opacity: 0.5; }
+                50% { opacity: 1; }
+              }
+            `}</style>
+          </div>
+        ) : filteredGames.length === 0 ? (
+          <EmptyState
+            icon="🎮"
+            title={searchQuery ? "No games found" : "No games yet"}
+            description={searchQuery ? "Try a different search term" : "Add your first game to get started"}
+          />
+        ) : (
+          <ul className="grid-container">
+          {filteredGames.map((game) => {
             const opinion = opinions.find((op) => op.title === game.title);
             function handleOpinion(title: string, number: number): void {
               if (number == 2) {
@@ -628,6 +791,7 @@ export function GameList({ onShowToast }: Props) {
             );
           })}
         </ul>
+        )}
       </div>
     </div>
   );

frontend/src/Login.tsx

@@ -9,13 +9,27 @@ export function Login({ onLogin }: LoginProps) {
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
   const [error, setError] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [fieldErrors, setFieldErrors] = useState<{ username?: string, password?: string }>({});
+
+  const validateForm = () => {
+    const errors: { username?: string, password?: string } = {};
+    if (!username.trim()) errors.username = "Username is required";
+    if (!password) errors.password = "Password is required";
+    setFieldErrors(errors);
+    return Object.keys(errors).length === 0;
+  };
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setError("");
 
+    if (!validateForm()) return;
+
+    setIsSubmitting(true);
+
     try {
-      const req = LoginRequest.create({ username, password });
+      const req = LoginRequest.create({ username: username.trim(), password });
       const body = LoginRequest.encode(req).finish();
 
       const res = await fetch("/auth/login", {
@@ -32,45 +46,109 @@ export function Login({ onLogin }: LoginProps) {
       if (response.success) {
         onLogin(response.token);
       } else {
-        setError(response.message);
+        setError(response.message || "Login failed");
       }
     } catch (err) {
       console.error("Login error:", err);
-      setError("Failed to login");
+      setError("An unexpected error occurred. Please try again.");
+    } finally {
+      setIsSubmitting(false);
     }
   };
 
   return (
     <div className="card" style={{ maxWidth: "400px", margin: "4rem auto" }}>
-      <h2 style={{ textAlign: "center", marginBottom: "2rem" }}>Login</h2>
+      <h2 style={{ textAlign: "center", marginBottom: "2rem" }}>🎮 Login</h2>
       <form onSubmit={handleSubmit} className="form-group">
         <div className="form-group">
           <label>Username</label>
           <input
             type="text"
             value={username}
-            onChange={(e) => setUsername(e.target.value)}
+            onChange={(e) => {
+              setUsername(e.target.value);
+              if (fieldErrors.username) setFieldErrors({ ...fieldErrors, username: undefined });
+            }}
             placeholder="Enter your username"
+            style={{
+              borderColor: fieldErrors.username ? "#f44336" : undefined,
+              borderWidth: fieldErrors.username ? "2px" : undefined
+            }}
           />
+          {fieldErrors.username && (
+            <span style={{ color: "#f44336", fontSize: "0.85rem", marginTop: "0.25rem", display: "block" }}>
+              {fieldErrors.username}
+            </span>
+          )}
         </div>
         <div className="form-group">
           <label>Password</label>
           <input
             type="password"
             value={password}
-            onChange={(e) => setPassword(e.target.value)}
+            onChange={(e) => {
+              setPassword(e.target.value);
+              if (fieldErrors.password) setFieldErrors({ ...fieldErrors, password: undefined });
+            }}
             placeholder="Enter your password"
+            style={{
+              borderColor: fieldErrors.password ? "#f44336" : undefined,
+              borderWidth: fieldErrors.password ? "2px" : undefined
+            }}
           />
+          {fieldErrors.password && (
+            <span style={{ color: "#f44336", fontSize: "0.85rem", marginTop: "0.25rem", display: "block" }}>
+              {fieldErrors.password}
+            </span>
+          )}
         </div>
-        <button type="submit" style={{ marginTop: "1rem" }}>
+        <button
-          Login
+          type="submit"
+          style={{ marginTop: "1rem", width: "100%", opacity: isSubmitting ? 0.7 : 1, cursor: isSubmitting ? "not-allowed" : "pointer" }}
+          disabled={isSubmitting}
+        >
+          {isSubmitting ? (
+            <>
+              <span
+                style={{
+                  width: "14px",
+                  height: "14px",
+                  border: "2px solid rgba(255,255,255,0.3)",
+                  borderTopColor: "white",
+                  borderRadius: "50%",
+                  animation: "spin 0.8s linear infinite",
+                  display: "inline-block",
+                  marginRight: "0.5rem"
+                }}
+              ></span>
+              Logging in...
+            </>
+          ) : (
+            "Login"
+          )}
         </button>
       </form>
       {error && (
-        <p style={{ color: "#ff6b6b", marginTop: "1rem", textAlign: "center" }}>
+        <div
-          {error}
+          style={{
-        </p>
+            backgroundColor: "rgba(244, 67, 54, 0.1)",
+            border: "1px solid rgba(244, 67, 54, 0.3)",
+            color: "#ff6b6b",
+            padding: "1rem",
+            borderRadius: "8px",
+            marginTop: "1rem",
+            textAlign: "center",
+            fontSize: "0.9rem"
+          }}
+        >
+          ⚠️ {error}
+        </div>
       )}
+      <style>{`
+        @keyframes spin {
+          to { transform: rotate(360deg); }
+        }
+      `}</style>
     </div>
   );
 }

frontend/src/PersonDetails.tsx

@@ -3,53 +3,71 @@ import { Link, useParams } from "react-router-dom";
 import { Person } from "../items";
 import { apiFetch } from "./api";
 import { GameImage } from "./GameImage";
+import { LoadingState, EmptyState } from "./components/EmptyState";
 
 export const PersonDetails = () => {
   const { name } = useParams<{ name: string }>();
   const [person, setPerson] = useState<Person | null>(null);
+  const [loading, setLoading] = useState(!!name);
+  const [error, setError] = useState<string | null>(name ? null : "Person name is missing");
 
   useEffect(() => {
-    if (name) {
+    if (!name) return;
-      apiFetch(`/api/${name}`)
+
-        .then((res) => res.arrayBuffer())
+    (async () => {
-        .then((buffer) => {
+      try {
-          try {
+        const res = await apiFetch(`/api/${name}`);
-            setPerson(Person.decode(new Uint8Array(buffer)));
+        if (!res.ok) {
-          } catch (e) {
+          throw new Error("Person not found");
-            console.error("Failed to decode person:", e);
+        }
-          }
+        const buffer = await res.arrayBuffer();
-        })
+        setPerson(Person.decode(new Uint8Array(buffer)));
-        .catch(console.error);
+      } catch (e) {
-    }
+        console.error("Failed to decode person:", e);
+        setError(e instanceof Error ? e.message : "Failed to load person data");
+      } finally {
+        setLoading(false);
+      }
+    })();
   }, [name]);
 
-  if (!person) return <div>Loading...</div>;
+  if (loading) return <LoadingState message="Loading person details..." />;
+  if (error) return <EmptyState icon="⚠️" title="Error" description={error} />;
+  if (!person) return <EmptyState icon="👤" title="Person not found" description="This person doesn't exist" />;
 
   return (
     <div>
       <div style={{ marginBottom: "2rem" }}>
         <h2>{person.name}</h2>
-        <ul className="grid-container">
+        {person.opinion.length === 0 ? (
-          {person.opinion.map((op, i) => (
+          <EmptyState
-            <Link
+            icon="🎮"
-              to={`/game/${encodeURIComponent(op.title)}`}
+            title="No opinions yet"
-              key={i}
+            description={`${person.name} hasn't shared any game opinions`}
-              className="list-item"
+          />
-              style={{
+        ) : (
-                textDecoration: "none",
+          <ul className="grid-container">
-                color: "inherit",
+            {person.opinion.map((op, i) => (
-                display: "flex",
+              <Link
-                justifyContent: "space-between",
+                to={`/game/${encodeURIComponent(op.title)}`}
-                alignItems: "center",
+                key={i}
-                borderColor: op.wouldPlay ? "#4caf50" : "#f44336",
+                className="list-item"
-              }}
+                style={{
-            >
+                  textDecoration: "none",
-              <strong>{op.title}</strong>
+                  color: "inherit",
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                  borderColor: op.wouldPlay ? "#4caf50" : "#f44336",
+                }}
+              >
+                <strong>{op.title}</strong>
 
-              <GameImage game={op.title} />
+                <GameImage game={op.title} />
-            </Link>
+              </Link>
-          ))}
+            ))}
-        </ul>
+          </ul>
+        )}
       </div>
     </div>
   );

frontend/src/PersonList.tsx

@@ -1,24 +1,36 @@
 import { Person } from "../items";
 import { Link } from "react-router-dom";
-import { useState } from "react";
+import { useState, useEffect, useMemo } from "react";
 import { get_auth_status, refresh_state, get_is_admin } from "./api";
 import type { ToastType } from "./Toast";
+import { EmptyState } from "./components/EmptyState";
 import "./PersonList.css"
 
 interface Props {
   people: Person[];
+  loading?: boolean;
   onShowToast?: (message: string, type?: ToastType) => void;
 }
 
-export const PersonList = ({ people, onShowToast }: Props) => {
+export const PersonList = ({ people, loading = false, onShowToast }: Props) => {
   const [current_user, set_current_user] = useState<string>("");
   const [isRefreshing, setIsRefreshing] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
 
-  get_auth_status().then((res) => {
+  useEffect(() => {
-    if (res) {
+    get_auth_status().then((res) => {
-      set_current_user(res.username);
+      if (res) {
-    }
+        set_current_user(res.username);
-  });
+      }
+    });
+  }, []);
+
+  const filteredPeople = useMemo(() => {
+    if (!searchQuery) return people;
+    return people.filter(person =>
+      person.name.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+  }, [people, searchQuery]);
 
   const handleRefresh = async () => {
     setIsRefreshing(true);
@@ -44,53 +56,136 @@ export const PersonList = ({ people, onShowToast }: Props) => {
           justifyContent: "space-between",
           alignItems: "center",
           marginBottom: "1rem",
+          flexWrap: "wrap",
+          gap: "1rem"
         }}
       >
-        <h2>People List</h2>
+        <h2>People List {filteredPeople.length > 0 && <span style={{ fontSize: "0.8em", color: "var(--text-muted)" }}>({filteredPeople.length})</span>}</h2>
-        {isAdmin && (
+        <div style={{ display: "flex", gap: "0.75rem", alignItems: "center" }}>
-          <button
+          <input
-            onClick={handleRefresh}
+            type="text"
-            disabled={isRefreshing}
+            placeholder="🔍 Search people..."
-            className="btn-secondary"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
             style={{
               padding: "0.5rem 1rem",
               fontSize: "0.9rem",
-              display: "flex",
+              minWidth: "200px"
-              alignItems: "center",
-              gap: "0.5rem",
-              opacity: isRefreshing ? 0.7 : 1,
-              cursor: isRefreshing ? "not-allowed" : "pointer",
             }}
-          >
+          />
-            {isRefreshing ? (
+          {isAdmin && (
-              <>
+            <button
-                <span
+              onClick={handleRefresh}
-                  style={{
+              disabled={isRefreshing}
-                    width: "14px",
+              className="btn-secondary"
-                    height: "14px",
+              style={{
-                    border: "2px solid rgba(255,255,255,0.3)",
+                padding: "0.5rem 1rem",
-                    borderTopColor: "currentColor",
+                fontSize: "0.9rem",
-                    borderRadius: "50%",
+                display: "flex",
-                    animation: "spin 0.8s linear infinite",
+                alignItems: "center",
-                  }}
+                gap: "0.5rem",
-                ></span>
+                opacity: isRefreshing ? 0.7 : 1,
-                Refreshing...
+                cursor: isRefreshing ? "not-allowed" : "pointer",
-              </>
+              }}
-            ) : (
+            >
-              <>
+              {isRefreshing ? (
-                <span>🔄</span>
+                <>
-                Refresh from File
+                  <span
-              </>
+                    style={{
-            )}
+                      width: "14px",
-          </button>
+                      height: "14px",
-        )}
+                      border: "2px solid rgba(255,255,255,0.3)",
+                      borderTopColor: "currentColor",
+                      borderRadius: "50%",
+                      animation: "spin 0.8s linear infinite",
+                    }}
+                  ></span>
+                  Refreshing...
+                </>
+              ) : (
+                <>
+                  <span>🔄</span>
+                  Refresh from File
+                </>
+              )}
+            </button>
+          )}
+        </div>
       </div>
-      <div className="grid-container">
+      {loading ? (
-        {people.map((person, index) => {
+        <div className="grid-container">
-          if (person.name.toLowerCase() === current_user.toLowerCase()) {
+          {Array.from({ length: 6 }).map((_, i) => (
+            <div
+              key={i}
+              style={{
+                backgroundColor: "var(--secondary-alt-bg)",
+                border: "1px solid var(--border-color)",
+                borderRadius: "5px",
+                padding: "10px",
+                minHeight: "60px",
+                animation: "shimmer 1.5s infinite"
+              }}
+            >
+              <div
+                style={{
+                  width: "60%",
+                  height: "20px",
+                  backgroundColor: "var(--tertiary-bg)",
+                  borderRadius: "4px",
+                  marginBottom: "0.5rem",
+                  animation: "shimmer 1.5s infinite"
+                }}
+              ></div>
+              <div
+                style={{
+                  width: "40%",
+                  height: "16px",
+                  backgroundColor: "var(--tertiary-bg)",
+                  borderRadius: "4px",
+                  animation: "shimmer 1.5s infinite 0.2s"
+                }}
+              ></div>
+            </div>
+          ))}
+          <style>{`
+            @keyframes shimmer {
+              0%, 100% { opacity: 0.5; }
+              50% { opacity: 1; }
+            }
+          `}</style>
+        </div>
+      ) : filteredPeople.length === 0 ? (
+        <EmptyState
+          icon="👥"
+          title={searchQuery ? "No people found" : "No people in list"}
+          description={searchQuery ? "Try a different search term" : "Add people to get started"}
+        />
+      ) : (
+        <div className="grid-container">
+          {filteredPeople.map((person, index) => {
+            if (person.name.toLowerCase() === current_user.toLowerCase()) {
+              return (
+                <Link
+                  to={`/games#existing-games`}
+                  key={index}
+                  className="list-item"
+                  style={{
+                    textDecoration: "none",
+                    color: "inherit",
+                    display: "block",
+                  }}
+                >
+                  <h3>{person.name}</h3>
+                  <div style={{ fontSize: "0.85em", color: "var(--text-muted)", marginTop: "0.25rem" }}>
+                    {person.opinion.length} opinion(s)
+                  </div>
+                </Link>
+              );
+            }
+
             return (
               <Link
-                to={`/games#existing-games`}
+                to={`/person/${person.name}`}
                 key={index}
                 className="list-item"
                 style={{
@@ -100,26 +195,14 @@ export const PersonList = ({ people, onShowToast }: Props) => {
                 }}
               >
                 <h3>{person.name}</h3>
+                <div style={{ fontSize: "0.85em", color: "var(--text-muted)", marginTop: "0.25rem" }}>
+                  {person.opinion.length} opinion(s)
+                </div>
               </Link>
             );
-          }
+          })}
-
+        </div>
-          return (
+      )}
-            <Link
-              to={`/person/${person.name}`}
-              key={index}
-              className="list-item"
-              style={{
-                textDecoration: "none",
-                color: "inherit",
-                display: "block",
-              }}
-            >
-              <h3>{person.name}</h3>
-            </Link>
-          );
-        })}
-      </div>
     </div>
   );
 };

frontend/src/components/EmptyState.tsx

@@ -0,0 +1,91 @@
+import type { ReactNode } from "react";
+
+interface EmptyStateProps {
+  icon?: string;
+  title: string;
+  description?: string;
+  action?: ReactNode;
+}
+
+export function EmptyState({ icon = "📭", title, description, action }: EmptyStateProps) {
+  return (
+    <div
+      style={{
+        padding: "3rem 2rem",
+        textAlign: "center",
+        background: "var(--secondary-alt-bg)",
+        borderRadius: "16px",
+        border: "1px dashed var(--border-color)",
+        color: "var(--text-muted)"
+      }}
+    >
+      <div style={{ fontSize: "3rem", marginBottom: "1rem" }}>{icon}</div>
+      <h3 style={{ margin: "0 0 0.5rem 0", color: "var(--text-color)" }}>{title}</h3>
+      {description && <p style={{ margin: "0 0 1.5rem 0", fontSize: "0.95rem" }}>{description}</p>}
+      {action}
+    </div>
+  );
+}
+
+export function LoadingState({ message = "Loading..." }: { message?: string }) {
+  return (
+    <div
+      style={{
+        padding: "3rem 2rem",
+        textAlign: "center"
+      }}
+    >
+      <div
+        style={{
+          width: "40px",
+          height: "40px",
+          border: "4px solid rgba(255, 255, 255, 0.2)",
+          borderTopColor: "currentColor",
+          borderRadius: "50%",
+          animation: "spin 0.8s linear infinite",
+          margin: "0 auto 1rem"
+        }}
+      ></div>
+      <p style={{ color: "var(--text-muted)", margin: 0 }}>{message}</p>
+      <style>{`
+        @keyframes spin {
+          to { transform: rotate(360deg); }
+        }
+      `}</style>
+    </div>
+  );
+}
+
+export function ErrorState({ message, onRetry }: { message: string, onRetry?: () => void }) {
+  return (
+    <div
+      style={{
+        padding: "3rem 2rem",
+        textAlign: "center",
+        background: "rgba(244, 67, 54, 0.1)",
+        borderRadius: "16px",
+        border: "1px solid rgba(244, 67, 54, 0.3)"
+      }}
+    >
+      <div style={{ fontSize: "3rem", marginBottom: "1rem" }}>⚠️</div>
+      <h3 style={{ margin: "0 0 0.5rem 0", color: "var(--text-color)" }}>Something went wrong</h3>
+      <p style={{ margin: "0 0 1.5rem 0", color: "var(--text-muted)", fontSize: "0.95rem" }}>{message}</p>
+      {onRetry && (
+        <button
+          onClick={onRetry}
+          style={{
+            background: "var(--accent-color)",
+            border: "none",
+            padding: "0.75rem 1.5rem",
+            borderRadius: "8px",
+            color: "white",
+            fontWeight: 600,
+            cursor: "pointer"
+          }}
+        >
+          🔄 Try Again
+        </button>
+      )}
+    </div>
+  );
+}

frontend/src/components/FilteredGamesList.tsx

@@ -1,5 +1,6 @@
 import { Link } from "react-router-dom";
 import { GameImage } from "../GameImage";
+import { EmptyState } from "./EmptyState";
 
 interface FilteredGamesListProps {
   filteredGames: string[];
@@ -12,7 +13,15 @@ export function FilteredGamesList({
   gameToPositive,
   selectedPeopleCount,
 }: FilteredGamesListProps) {
-  if (selectedPeopleCount === 0) return null;
+  if (selectedPeopleCount === 0) {
+    return (
+      <EmptyState
+        icon="👥"
+        title="Select people to find games"
+        description="Choose one or more people from the list above to see games they would play"
+      />
+    );
+  }
 
   return (
     <div>
@@ -66,29 +75,12 @@ export function FilteredGamesList({
           })}
         </ul>
       ) : (
-        <EmptyState />
+        <EmptyState
+          icon="🔍"
+          title="No games found"
+          description="Try selecting fewer people or adding more opinions"
+        />
       )}
     </div>
   );
 }
-
-function EmptyState() {
-  return (
-    <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>
-  );
-}

frontend/src/components/LoadingSpinner.tsx

@@ -0,0 +1,28 @@
+export function LoadingSpinner({ size = "medium", text }: { size?: "small" | "medium" | "large", text?: string }) {
+  const sizeMap = {
+    small: "16px",
+    medium: "24px",
+    large: "32px"
+  };
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "1rem" }}>
+      <div
+        style={{
+          width: sizeMap[size],
+          height: sizeMap[size],
+          border: `${parseInt(sizeMap[size]) / 4}px solid rgba(255, 255, 255, 0.2)`,
+          borderTopColor: "currentColor",
+          borderRadius: "50%",
+          animation: "spin 0.8s linear infinite"
+        }}
+      ></div>
+      {text && <span style={{ color: "var(--text-muted)", fontSize: "0.9rem" }}>{text}</span>}
+      <style>{`
+        @keyframes spin {
+          to { transform: rotate(360deg); }
+        }
+      `}</style>
+    </div>
+  );
+}

frontend/src/components/SkeletonLoader.tsx

@@ -0,0 +1,65 @@
+export function SkeletonLoader({ width, height, count = 1 }: { width?: string | number, height?: string | number, count?: number }) {
+  return (
+    <>
+      {Array.from({ length: count }).map((_, i) => (
+        <div
+          key={i}
+          style={{
+            width: width || "100%",
+            height: height || "60px",
+            backgroundColor: "var(--secondary-alt-bg)",
+            borderRadius: "8px",
+            animation: "shimmer 1.5s infinite",
+            marginBottom: count > 1 ? "1rem" : undefined
+          }}
+        ></div>
+      ))}
+      <style>{`
+        @keyframes shimmer {
+          0%, 100% { opacity: 0.5; }
+          50% { opacity: 1; }
+        }
+      `}</style>
+    </>
+  );
+}
+
+export function CardSkeleton() {
+  return (
+    <div
+      style={{
+        backgroundColor: "var(--secondary-alt-bg)",
+        border: "1px solid var(--border-color)",
+        borderRadius: "5px",
+        padding: "10px",
+        minHeight: "80px"
+      }}
+    >
+      <div
+        style={{
+          width: "60%",
+          height: "20px",
+          backgroundColor: "var(--tertiary-bg)",
+          borderRadius: "4px",
+          marginBottom: "0.5rem",
+          animation: "shimmer 1.5s infinite"
+        }}
+      ></div>
+      <div
+        style={{
+          width: "40%",
+          height: "16px",
+          backgroundColor: "var(--tertiary-bg)",
+          borderRadius: "4px",
+          animation: "shimmer 1.5s infinite 0.2s"
+        }}
+      ></div>
+      <style>{`
+        @keyframes shimmer {
+          0%, 100% { opacity: 0.5; }
+          50% { opacity: 1; }
+        }
+      `}</style>
+    </div>
+  );
+}

frontend/src/main.tsx

@@ -2,9 +2,12 @@ import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
 import App from './App.tsx'
+import { ErrorBoundary } from './ErrorBoundary'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <App />
+    <ErrorBoundary>
+      <App />
+    </ErrorBoundary>
   </StrictMode>,
 )