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/components/GameCard.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react'
 import type { Game } from '../types'
 
 const DEFAULT_COLOR = '#6366f1' // indigo-500
@@ -10,6 +11,8 @@ interface GameCardProps {
 
 export function GameCard({ game, selected, onSelect }: GameCardProps) {
   const backgroundColor = game.color ?? DEFAULT_COLOR
+  const [imgError, setImgError] = useState(false)
+  const boxArtSrc = `/boxart/${game.slug}.png`
 
   return (
     <button
@@ -19,11 +22,12 @@ export function GameCard({ game, selected, onSelect }: GameCardProps) {
         selected ? 'ring-2 ring-blue-500 scale-105 shadow-lg' : 'shadow'
       }`}
     >
-      {game.boxArtUrl ? (
+      {!imgError ? (
         <img
-          src={game.boxArtUrl}
+          src={boxArtSrc}
           alt={game.name}
           className="w-full h-48 object-cover"
+          onError={() => setImgError(true)}
         />
       ) : (
         <div
@@ -41,7 +45,7 @@ export function GameCard({ game, selected, onSelect }: GameCardProps) {
         </h3>
         <div className="flex items-center gap-2 mt-1">
           <span className="text-xs px-2 py-0.5 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400">
-            {game.region}
+            {game.region.charAt(0).toUpperCase() + game.region.slice(1)}
           </span>
           {game.releaseYear && (
             <span className="text-xs text-gray-500 dark:text-gray-400">

frontend/src/components/GameGrid.tsx

@@ -1,5 +1,5 @@
 import { useState, useMemo } from 'react'
-import type { Game } from '../types'
+import type { Game, NuzlockeRun } from '../types'
 import { GameCard } from './GameCard'
 
 const GENERATION_LABELS: Record<number, string> = {
@@ -18,19 +18,43 @@ interface GameGridProps {
   games: Game[]
   selectedId: number | null
   onSelect: (game: Game) => void
+  runs?: NuzlockeRun[]
 }
 
-export function GameGrid({ games, selectedId, onSelect }: GameGridProps) {
+export function GameGrid({ games, selectedId, onSelect, runs }: GameGridProps) {
   const [filter, setFilter] = useState<number | null>(null)
+  const [regionFilter, setRegionFilter] = useState<string | null>(null)
+  const [hideWithActiveRun, setHideWithActiveRun] = useState(false)
+  const [hideCompleted, setHideCompleted] = useState(false)
 
   const generations = useMemo(
     () => [...new Set(games.map((g) => g.generation))].sort(),
     [games],
   )
 
-  const filtered = filter
-    ? games.filter((g) => g.generation === filter)
-    : games
+  const regions = useMemo(
+    () => [...new Set(games.map((g) => g.region))].sort(),
+    [games],
+  )
+
+  const activeRunGameIds = useMemo(() => {
+    if (!runs) return new Set<number>()
+    return new Set(runs.filter((r) => r.status === 'active').map((r) => r.gameId))
+  }, [runs])
+
+  const completedRunGameIds = useMemo(() => {
+    if (!runs) return new Set<number>()
+    return new Set(runs.filter((r) => r.status === 'completed').map((r) => r.gameId))
+  }, [runs])
+
+  const filtered = useMemo(() => {
+    let result = games
+    if (filter) result = result.filter((g) => g.generation === filter)
+    if (regionFilter) result = result.filter((g) => g.region === regionFilter)
+    if (hideWithActiveRun) result = result.filter((g) => !activeRunGameIds.has(g.id))
+    if (hideCompleted) result = result.filter((g) => !completedRunGameIds.has(g.id))
+    return result
+  }, [games, filter, regionFilter, hideWithActiveRun, hideCompleted, activeRunGameIds, completedRunGameIds])
 
   const grouped = useMemo(() => {
     const groups: Record<number, Game[]> = {}
@@ -42,34 +66,80 @@ export function GameGrid({ games, selectedId, onSelect }: GameGridProps) {
       .sort((a, b) => a.generation - b.generation)
   }, [filtered])
 
+  const pillClass = (active: boolean) =>
+    `px-3 py-1.5 text-sm font-medium rounded-full transition-colors ${
+      active
+        ? 'bg-blue-600 text-white'
+        : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'
+    }`
+
   return (
     <div className="space-y-6">
-      <div className="flex items-center gap-2">
-        <button
-          type="button"
-          onClick={() => setFilter(null)}
-          className={`px-3 py-1.5 text-sm font-medium rounded-full transition-colors ${
-            filter === null
-              ? 'bg-blue-600 text-white'
-              : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'
-          }`}
-        >
-          All
-        </button>
-        {generations.map((gen) => (
+      <div className="space-y-3">
+        <div className="flex flex-wrap items-center gap-2">
+          <span className="text-xs font-medium text-gray-500 dark:text-gray-400 mr-1">Gen:</span>
           <button
-            key={gen}
             type="button"
-            onClick={() => setFilter(gen)}
-            className={`px-3 py-1.5 text-sm font-medium rounded-full transition-colors ${
-              filter === gen
-                ? 'bg-blue-600 text-white'
-                : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'
-            }`}
+            onClick={() => setFilter(null)}
+            className={pillClass(filter === null)}
           >
-            Gen {gen}
+            All
           </button>
-        ))}
+          {generations.map((gen) => (
+            <button
+              key={gen}
+              type="button"
+              onClick={() => setFilter(gen)}
+              className={pillClass(filter === gen)}
+            >
+              Gen {gen}
+            </button>
+          ))}
+        </div>
+
+        <div className="flex flex-wrap items-center gap-2">
+          <span className="text-xs font-medium text-gray-500 dark:text-gray-400 mr-1">Region:</span>
+          <button
+            type="button"
+            onClick={() => setRegionFilter(null)}
+            className={pillClass(regionFilter === null)}
+          >
+            All
+          </button>
+          {regions.map((region) => (
+            <button
+              key={region}
+              type="button"
+              onClick={() => setRegionFilter(region)}
+              className={pillClass(regionFilter === region)}
+            >
+              {region.charAt(0).toUpperCase() + region.slice(1)}
+            </button>
+          ))}
+        </div>
+
+        {runs && (
+          <div className="flex flex-wrap items-center gap-4">
+            <label className="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300 cursor-pointer">
+              <input
+                type="checkbox"
+                checked={hideWithActiveRun}
+                onChange={(e) => setHideWithActiveRun(e.target.checked)}
+                className="rounded border-gray-300 dark:border-gray-600 text-blue-600 focus:ring-blue-500"
+              />
+              Hide games with active run
+            </label>
+            <label className="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300 cursor-pointer">
+              <input
+                type="checkbox"
+                checked={hideCompleted}
+                onChange={(e) => setHideCompleted(e.target.checked)}
+                className="rounded border-gray-300 dark:border-gray-600 text-blue-600 focus:ring-blue-500"
+              />
+              Hide completed games
+            </label>
+          </div>
+        )}
       </div>
 
       {grouped.map(({ generation, games }) => (