From 7dbf3772dfed5eec2fff09c2b4691974a1df318d Mon Sep 17 00:00:00 2001
From: Julian Tabel <juliantabel.jt@gmail.com>
Date: Sat, 7 Feb 2026 21:29:14 +0100
Subject: [PATCH] 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>
---
 ...-o7il--improve-run-creation-workflow-ux.md |  21 +++
 frontend/src/components/GameCard.tsx          |  10 +-
 frontend/src/components/GameGrid.tsx          | 124 ++++++++++++++----
 frontend/src/pages/NewRun.tsx                 |  84 ++++++++++--
 frontend/src/pages/RunDashboard.tsx           |   2 +-
 frontend/src/pages/RunEncounters.tsx          |   2 +-
 frontend/src/pages/admin/AdminGameDetail.tsx  |   2 +-
 7 files changed, 199 insertions(+), 46 deletions(-)
 create mode 100644 .beans/nuzlocke-tracker-o7il--improve-run-creation-workflow-ux.md

diff --git a/.beans/nuzlocke-tracker-o7il--improve-run-creation-workflow-ux.md b/.beans/nuzlocke-tracker-o7il--improve-run-creation-workflow-ux.md
new file mode 100644
index 0000000..cf1492b
--- /dev/null
+++ b/.beans/nuzlocke-tracker-o7il--improve-run-creation-workflow-ux.md
@@ -0,0 +1,21 @@
+---
+# nuzlocke-tracker-o7il
+title: Improve run creation workflow UX
+status: completed
+type: feature
+priority: normal
+created_at: 2026-02-07T20:26:26Z
+updated_at: 2026-02-07T20:27:46Z
+---
+
+Box art from local files, capitalize regions everywhere, add region filter + run-status filters to GameGrid, sticky top bar with selected game summary + Next button in NewRun step 1.
+
+## Checklist
+- [ ] GameCard: box art from /boxart/{slug}.png with color fallback, capitalize region
+- [ ] GameGrid: add runs prop, region filter pills, run-status checkboxes, capitalize regions
+- [ ] NewRun: add useRuns(), pass runs to GameGrid, sticky top bar with game summary + Next button
+- [ ] RunEncounters: capitalize region display
+- [ ] RunDashboard: capitalize region display
+- [ ] AdminGameDetail: capitalize region display
+- [ ] NewRun step 3 summary: capitalize region display
+- [ ] Verify: npx tsc --noEmit clean compile
\ No newline at end of file
diff --git a/frontend/src/components/GameCard.tsx b/frontend/src/components/GameCard.tsx
index dfb4d73..5d96e27 100644
--- a/frontend/src/components/GameCard.tsx
+++ b/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">
diff --git a/frontend/src/components/GameGrid.tsx b/frontend/src/components/GameGrid.tsx
index dcfc29d..01f3339 100644
--- a/frontend/src/components/GameGrid.tsx
+++ b/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 }) => (
diff --git a/frontend/src/pages/NewRun.tsx b/frontend/src/pages/NewRun.tsx
index 3b8a04e..51e05e0 100644
--- a/frontend/src/pages/NewRun.tsx
+++ b/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)}
+    />
+  )
+}
diff --git a/frontend/src/pages/RunDashboard.tsx b/frontend/src/pages/RunDashboard.tsx
index 843c181..024ca32 100644
--- a/frontend/src/pages/RunDashboard.tsx
+++ b/frontend/src/pages/RunDashboard.tsx
@@ -82,7 +82,7 @@ export function RunDashboard() {
               {run.name}
             </h1>
             <p className="text-gray-600 dark:text-gray-400 mt-1">
-              {run.game.name} &middot; {run.game.region} &middot; Started{' '}
+              {run.game.name} &middot; {run.game.region.charAt(0).toUpperCase() + run.game.region.slice(1)} &middot; Started{' '}
               {new Date(run.startedAt).toLocaleDateString(undefined, {
                 year: 'numeric',
                 month: 'short',
diff --git a/frontend/src/pages/RunEncounters.tsx b/frontend/src/pages/RunEncounters.tsx
index 919e8f9..5a44402 100644
--- a/frontend/src/pages/RunEncounters.tsx
+++ b/frontend/src/pages/RunEncounters.tsx
@@ -580,7 +580,7 @@ export function RunEncounters() {
               {run.name}
             </h1>
             <p className="text-gray-600 dark:text-gray-400 mt-1">
-              {run.game.name} &middot; {run.game.region} &middot; Started{' '}
+              {run.game.name} &middot; {run.game.region.charAt(0).toUpperCase() + run.game.region.slice(1)} &middot; Started{' '}
               {new Date(run.startedAt).toLocaleDateString(undefined, {
                 year: 'numeric',
                 month: 'short',
diff --git a/frontend/src/pages/admin/AdminGameDetail.tsx b/frontend/src/pages/admin/AdminGameDetail.tsx
index e307175..e8e3a00 100644
--- a/frontend/src/pages/admin/AdminGameDetail.tsx
+++ b/frontend/src/pages/admin/AdminGameDetail.tsx
@@ -152,7 +152,7 @@ export function AdminGameDetail() {
       <div className="mb-6">
         <h2 className="text-xl font-semibold">{game.name}</h2>
         <p className="text-sm text-gray-500 dark:text-gray-400">
-          {game.region} &middot; Gen {game.generation}
+          {game.region.charAt(0).toUpperCase() + game.region.slice(1)} &middot; Gen {game.generation}
           {game.releaseYear ? ` \u00b7 ${game.releaseYear}` : ''}
         </p>
       </div>