pretty much ready to 'ship'

frontend/src/pages/Picker.jsx

@@ -4,6 +4,7 @@ import { useAuth } from '../context/AuthContext';
 import api from '../api/axios';
 import GamePoolModal from '../components/GamePoolModal';
 import { formatLocalTime } from '../utils/dateUtils';
+import PopularityBadge from '../components/PopularityBadge';
 
 function Picker() {
   const { isAuthenticated, loading: authLoading } = useAuth();
@@ -15,6 +16,7 @@ function Picker() {
   const [loading, setLoading] = useState(true);
   const [picking, setPicking] = useState(false);
   const [error, setError] = useState('');
+  const [showPopularity, setShowPopularity] = useState(true);
 
   // Filters
   const [playerCount, setPlayerCount] = useState('');
@@ -542,12 +544,22 @@ function Picker() {
                   <span className="font-semibold text-gray-700 dark:text-gray-300">Play Count:</span>
                   <span className="ml-2 text-gray-600 dark:text-gray-400">{selectedGame.play_count}</span>
                 </div>
-                <div>
-                  <span className="font-semibold text-gray-700 dark:text-gray-300">Popularity:</span>
-                  <span className="ml-2 text-gray-600 dark:text-gray-400">
-                    {selectedGame.popularity_score > 0 ? '+' : ''}
-                    {selectedGame.popularity_score}
+                <div className="flex items-center gap-2">
+                  <span 
+                    className="font-semibold text-gray-700 dark:text-gray-300"
+                    title="Cumulative popularity across all sessions"
+                  >
+                    Popularity:
                   </span>
+                  <PopularityBadge 
+                    upvotes={selectedGame.upvotes || 0}
+                    downvotes={selectedGame.downvotes || 0}
+                    popularityScore={selectedGame.popularity_score || 0}
+                    size="md"
+                    showCounts={true}
+                    showNet={true}
+                    showRatio={true}
+                  />
                 </div>
               </div>
 
@@ -645,6 +657,7 @@ function SessionInfo({ sessionId, onGamesUpdate }) {
   const [games, setGames] = useState([]);
   const [loading, setLoading] = useState(true);
   const [confirmingRemove, setConfirmingRemove] = useState(null);
+  const [showPopularity, setShowPopularity] = useState(true);
 
   useEffect(() => {
     loadGames();
@@ -714,9 +727,20 @@ function SessionInfo({ sessionId, onGamesUpdate }) {
 
   return (
     <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 sm:p-6">
-      <h3 className="text-lg sm:text-xl font-semibold mb-4 text-gray-800 dark:text-gray-100">
-        Games Played This Session ({games.length})
-      </h3>
+      <div className="flex justify-between items-center mb-4">
+        <h3 className="text-lg sm:text-xl font-semibold text-gray-800 dark:text-gray-100">
+          Games Played This Session ({games.length})
+        </h3>
+        <label className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 cursor-pointer">
+          <input
+            type="checkbox"
+            checked={showPopularity}
+            onChange={(e) => setShowPopularity(e.target.checked)}
+            className="w-4 h-4 rounded border-gray-300 dark:border-gray-600 text-indigo-600 focus:ring-indigo-500 dark:bg-gray-700 cursor-pointer"
+          />
+          <span className="whitespace-nowrap">Show Popularity</span>
+        </label>
+      </div>
       {loading ? (
         <p className="text-gray-500 dark:text-gray-400">Loading...</p>
       ) : games.length === 0 ? (
@@ -752,6 +776,17 @@ function SessionInfo({ sessionId, onGamesUpdate }) {
                         Manual
                       </span>
                     )}
+                    {showPopularity && (
+                      <PopularityBadge 
+                        upvotes={game.upvotes || 0}
+                        downvotes={game.downvotes || 0}
+                        popularityScore={game.popularity_score || 0}
+                        size="sm"
+                        showCounts={true}
+                        showNet={true}
+                        showRatio={false}
+                      />
+                    )}
                   </div>
                   <div className="text-xs sm:text-sm text-gray-500 dark:text-gray-400 mt-1">
                     {game.pack_name} • {formatLocalTime(game.played_at)}