Improve run creation workflow with filters, local box art, and sticky nav

Use local /boxart/{slug}.png images instead of database boxArtUrl with
color-swatch fallback. Add region filter pills and run-status checkboxes
(hide active/completed) to GameGrid. Move the Next button into a sticky
top bar showing selected game summary so it's always visible. Capitalize
region names in all display locations.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/pages/NewRun.tsx

@@ -2,13 +2,16 @@ import { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { GameGrid, RulesConfiguration, StepIndicator } from '../components'
 import { useGames } from '../hooks/useGames'
-import { useCreateRun } from '../hooks/useRuns'
+import { useCreateRun, useRuns } from '../hooks/useRuns'
 import type { Game, NuzlockeRules } from '../types'
 import { DEFAULT_RULES } from '../types'
 
+const DEFAULT_COLOR = '#6366f1'
+
 export function NewRun() {
   const navigate = useNavigate()
   const { data: games, isLoading, error } = useGames()
+  const { data: runs } = useRuns()
   const createRun = useCreateRun()
 
   const [step, setStep] = useState(1)
@@ -55,6 +58,44 @@ export function NewRun() {
             Choose a Game
           </h2>
 
+          <div className="sticky top-0 z-10 bg-gray-50 dark:bg-gray-900 py-3 mb-4 border-b border-gray-200 dark:border-gray-700">
+            {selectedGame ? (
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-3">
+                  <SelectedGameThumb game={selectedGame} />
+                  <div>
+                    <p className="font-medium text-gray-900 dark:text-gray-100">
+                      {selectedGame.name}
+                    </p>
+                    <p className="text-sm text-gray-500 dark:text-gray-400">
+                      {selectedGame.region.charAt(0).toUpperCase() + selectedGame.region.slice(1)}
+                    </p>
+                  </div>
+                </div>
+                <button
+                  type="button"
+                  onClick={() => setStep(2)}
+                  className="px-6 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors"
+                >
+                  Next
+                </button>
+              </div>
+            ) : (
+              <div className="flex items-center justify-between">
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Select a game to continue
+                </p>
+                <button
+                  type="button"
+                  disabled
+                  className="px-6 py-2 bg-blue-600 text-white rounded-lg font-medium disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                >
+                  Next
+                </button>
+              </div>
+            )}
+          </div>
+
           {isLoading && (
             <div className="flex items-center justify-center py-12">
               <div className="w-8 h-8 border-4 border-blue-600 border-t-transparent rounded-full animate-spin" />
@@ -72,19 +113,9 @@ export function NewRun() {
               games={games}
               selectedId={selectedGame?.id ?? null}
               onSelect={handleGameSelect}
+              runs={runs}
             />
           )}
-
-          <div className="mt-6 flex justify-end">
-            <button
-              type="button"
-              disabled={!selectedGame}
-              onClick={() => setStep(2)}
-              className="px-6 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-            >
-              Next
-            </button>
-          </div>
         </div>
       )}
 
@@ -149,7 +180,7 @@ export function NewRun() {
                 <div className="flex justify-between">
                   <dt className="text-gray-600 dark:text-gray-400">Region</dt>
                   <dd className="text-gray-900 dark:text-gray-100 font-medium">
-                    {selectedGame?.region}
+                    {selectedGame && (selectedGame.region.charAt(0).toUpperCase() + selectedGame.region.slice(1))}
                   </dd>
                 </div>
                 <div className="flex justify-between">
@@ -190,3 +221,30 @@ export function NewRun() {
     </div>
   )
 }
+
+function SelectedGameThumb({ game }: { game: Game }) {
+  const [imgError, setImgError] = useState(false)
+  const backgroundColor = game.color ?? DEFAULT_COLOR
+
+  if (imgError) {
+    return (
+      <div
+        className="w-10 h-10 rounded flex items-center justify-center flex-shrink-0"
+        style={{ backgroundColor }}
+      >
+        <span className="text-white text-xs font-bold drop-shadow-md">
+          {game.name.replace('Pokemon ', '').slice(0, 3)}
+        </span>
+      </div>
+    )
+  }
+
+  return (
+    <img
+      src={`/boxart/${game.slug}.png`}
+      alt={game.name}
+      className="w-10 h-10 rounded object-cover flex-shrink-0"
+      onError={() => setImgError(true)}
+    />
+  )
+}