we're about to port the chrome-extension. everything else mostly works

frontend/src/components/GamePoolModal.jsx

@@ -0,0 +1,101 @@
+import React from 'react';
+
+function GamePoolModal({ games, onClose }) {
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+      <div className="bg-white dark:bg-gray-800 rounded-lg max-w-4xl w-full max-h-[90vh] overflow-hidden flex flex-col">
+        <div className="flex justify-between items-center p-4 sm:p-6 border-b dark:border-gray-700">
+          <div>
+            <h2 className="text-xl sm:text-2xl font-bold dark:text-gray-100">Available Game Pool</h2>
+            <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
+              {games.length} {games.length === 1 ? 'game' : 'games'} match your filters
+            </p>
+          </div>
+          <button
+            onClick={onClose}
+            className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 text-2xl"
+          >
+            ×
+          </button>
+        </div>
+        
+        <div className="overflow-y-auto p-4 sm:p-6">
+          {games.length === 0 ? (
+            <p className="text-gray-500 dark:text-gray-400 text-center py-8">
+              No games match your current filters. Try adjusting the filters or enabling more games.
+            </p>
+          ) : (
+            <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+              {games.map((game) => {
+                // Determine border color based on favor bias
+                const getBorderStyle = () => {
+                  if (game.favor_bias === 1) {
+                    return 'border-green-300 dark:border-green-700 bg-green-50 dark:bg-green-900/10';
+                  }
+                  if (game.favor_bias === -1) {
+                    return 'border-red-300 dark:border-red-700 bg-red-50 dark:bg-red-900/10';
+                  }
+                  return 'border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700';
+                };
+                
+                return (
+                <div
+                  key={game.id}
+                  className={`border rounded-lg p-3 sm:p-4 ${getBorderStyle()}`}
+                >
+                  <div className="flex items-start justify-between gap-2 mb-1">
+                    <h3 className="font-semibold text-sm sm:text-base dark:text-gray-100 flex-1">
+                      {game.title}
+                    </h3>
+                    {/* Show favor indicator */}
+                    {game.favor_bias === 1 && (
+                      <span className="text-xs font-semibold bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 px-2 py-0.5 rounded whitespace-nowrap">
+                        Favored
+                      </span>
+                    )}
+                    {game.favor_bias === -1 && (
+                      <span className="text-xs font-semibold bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200 px-2 py-0.5 rounded whitespace-nowrap">
+                        Disfavored
+                      </span>
+                    )}
+                  </div>
+                  <p className="text-xs text-gray-600 dark:text-gray-400 mb-2">
+                    {game.pack_name}
+                  </p>
+                  <div className="flex flex-wrap gap-2 text-xs">
+                    <span className="bg-indigo-100 dark:bg-indigo-900 text-indigo-800 dark:text-indigo-200 px-2 py-1 rounded">
+                      {game.min_players}-{game.max_players} players
+                    </span>
+                    {game.game_type && (
+                      <span className="bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-300 px-2 py-1 rounded">
+                        {game.game_type}
+                      </span>
+                    )}
+                    {game.play_count > 0 && (
+                      <span className="bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 px-2 py-1 rounded">
+                        {game.play_count} plays
+                      </span>
+                    )}
+                  </div>
+                </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+        
+        <div className="border-t dark:border-gray-700 p-4 sm:p-6">
+          <button
+            onClick={onClose}
+            className="w-full bg-indigo-600 dark:bg-indigo-700 text-white py-2 sm:py-3 rounded-lg hover:bg-indigo-700 dark:hover:bg-indigo-800 transition"
+          >
+            Close
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default GamePoolModal;
+