add extra filters

frontend/src/components/FilteredGamesList.tsx

@@ -1,17 +1,20 @@
 import { Link } from "react-router-dom";
 import { GameImage } from "../GameImage";
 import { EmptyState } from "./EmptyState";
+import { Game as GameProto } from "../../items";
 
 interface FilteredGamesListProps {
   filteredGames: string[];
   gameToPositive: Map<string, Set<string>>;
   selectedPeopleCount: number;
+  games: Map<string, GameProto>;
 }
 
 export function FilteredGamesList({
   filteredGames,
   gameToPositive,
   selectedPeopleCount,
+  games,
 }: FilteredGamesListProps) {
   if (selectedPeopleCount === 0) {
     return (
@@ -31,6 +34,8 @@ export function FilteredGamesList({
           {filteredGames.map((game) => {
             const positiveCount = gameToPositive.get(game)?.size || 0;
             const neutralCount = selectedPeopleCount - positiveCount;
+            const gameData = games.get(game);
+            const price = gameData?.price ?? 0;
 
             return (
               <Link
@@ -68,6 +73,21 @@ export function FilteredGamesList({
                       {neutralCount > 1 ? "are" : "is"} neutral
                     </div>
                   )}
+                  <div
+                    className="price-badge"
+                    style={{
+                      fontSize: "0.85em",
+                      marginTop: "0.5rem",
+                      padding: "0.2rem 0.6rem",
+                      borderRadius: "4px",
+                      display: "inline-block",
+                      backgroundColor: price === 0 ? "rgba(76, 175, 80, 0.2)" : "rgba(255, 152, 0, 0.2)",
+                      color: price === 0 ? "#4caf50" : "#ff9800",
+                      fontWeight: 600,
+                    }}
+                  >
+                    ${price === 0 ? "0 (Free)" : price}
+                  </div>
                 </div>
                 <GameImage game={game} />
               </Link>