better errors and refactoring

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>
-  );
-}