nuzlocke-tracker/.beans/nuzlocke-tracker-qeim--ux-improvements-pass.md

title, status, type, priority, created_at, updated_at

title	status	type	priority	created_at	updated_at
UX improvements pass	completed	task	normal	2026-02-05T14:27:17Z	2026-02-07T13:05:14Z

The current encounter tracking and run dashboard UX is clunky. Do a holistic UX review and propose improvements.

Areas to evaluate:

• Encounter logging flow (too many clicks? modal vs inline?)
  • Encounter logging should be the default view for runs
  • Team overview is not really needed
  • Logging encounters should show the type of encounter (grass, surfing, fishing, ...)
• Route list readability and navigation (long lists)
• Route grouping UX polish (auto-expand unvisited groups, remember expand state, visual hierarchy for parent vs child)
• Run dashboard information density
• Mobile usability
• Navigation between run dashboard and encounters
• Empty states and onboarding flow
• Visual feedback for actions (success/error toasts, optimistic updates)
• It is unintuitive to not be able to deselect a game on the new run page

Produce a concrete plan with specific UI/UX changes to implement.

---

Concrete UX Improvement Plan

1. Make encounters the default run view — merge dashboard into encounters

Problem: The run dashboard (/runs/:runId) and encounter log (/runs/:runId/encounters) are separate pages. Users must click "Log Encounter" to get to the actual tracker. The dashboard shows team/graveyard but that's secondary to the encounter flow.

Change: Merge the dashboard into the encounters page as a unified view:

• /runs/:runId shows the encounter list directly (current RunEncounters content)
• Move stats + team/graveyard into a collapsible sidebar or header summary on the same page
• Specifically: put the 4 stat cards in a compact row at the top, above the route list
• Team and graveyard move to a slide-out panel or collapsible section below the stats
• Remove the separate RunDashboard page; redirect /runs/:runId to the merged view
• Keep "End Run" as a button in the header area

Files: RunDashboard.tsx, RunEncounters.tsx, App.tsx (routing)

2. Show encounter method in the route list (not just the modal)

Problem: Users can't see what encounter methods are available on a route until they click it. For Nuzlocke tracking, knowing whether a route has grass, surf, fishing, etc. is important for planning.

Change: Show small method badges on each route row in the encounters list:

• Fetch route encounter data summary (distinct methods) and show as tiny icons or text badges
• e.g. "Route 1" shows 🌿 walk | "Pallet Town" shows 🏄 surf 🎣 fishing ⭐ starter
• Use the same EncounterMethodBadge component from the modal, but also add badges for wild methods (walk, surf, old-rod, good-rod, super-rod, rock-smash, headbutt)
• Show badges in a row below the route name

Files: RunEncounters.tsx, EncounterModal.tsx (extract shared badge component)

2b. Group Pokemon by encounter method in the EncounterModal

Problem: The Pokemon selection grid in the EncounterModal shows all Pokemon in a flat list. On routes with many encounter methods (walk, surf, old-rod, good-rod, super-rod, etc.) it's a jumbled mess — the user can't tell which Pokemon come from grass vs. fishing.

Change: Group the Pokemon grid by encounter method with labeled sections and spacers:

• Group routePokemon by encounterMethod before rendering
• Render each group with a header label (e.g. "Grass", "Surfing", "Old Rod", "Good Rod", "Super Rod") and the Pokemon grid underneath
• Add a visual spacer/divider between groups (e.g. a thin horizontal line or margin gap)
• Method display order: starter, gift, fossil, trade, walk, headbutt, surf, rock-smash, old-rod, good-rod, super-rod
• Use friendly labels: walk → "Grass", surf → "Surfing", old-rod → "Old Rod", etc.
• If a route only has one method, skip the grouping header (no visual noise)
• Time-of-day differences: these are already aggregated in our encounter data (same "walk" method, rates summed). If time-based filtering is added later, use tabs above the grid to switch day/morning/night rather than creating separate groups.

Files: EncounterModal.tsx

3. Route grouping polish

Problem: All route groups start collapsed. Users have to manually expand each one. No visual distinction between visited and unvisited groups.

Changes:

• Auto-expand the first unvisited group on page load (guides the player to the next location)
• Persist expand/collapse state in localStorage keyed by runId
• Add a subtle left border color to groups based on status (green = caught, red = fainted, etc.)
• Show route count badges: "3/5 areas" for groups

Files: RunEncounters.tsx

4. Allow game deselection in NewRun wizard

Problem: Once you select a game, you can't deselect it — clicking the same game again does nothing. This is unintuitive.

Change: Toggle selection — clicking an already-selected game deselects it:

const handleGameSelect = (game: Game) => {
  if (selectedGame?.id === game.id) {
    setSelectedGame(null)
    return
  }
  // ... existing logic
}

Files: NewRun.tsx

5. Improve Home page with recent runs + clear CTA

Problem: Home page is just a title and tagline. No way to quickly resume a run or start one.

Change:

• Show "Continue Run" card for the most recent active run (if any)
• Show "Start New Run" prominent CTA button
• Show recent runs list (last 3-5) with quick links
• If no runs exist, show onboarding message

Files: Home.tsx, useRuns.ts

6. Mobile nav improvements

Problem: Nav links crowd on small screens. No hamburger menu.

Change:

• Add hamburger menu on small screens (< sm breakpoint)
• Collapse nav links into dropdown
• Ensure all touch targets are minimum 44px

Files: Layout.tsx

7. Better empty states

Problem: Several pages have minimal empty states ("No pokemon caught yet", etc.) without guiding the user.

Changes:

• RunEncounters with no encounters: "Click a route to log your first encounter"
• RunDashboard/merged view with no alive pokemon: "Catch your first Pokemon to build your team!"
• RunList with no runs: Already has CTA, but add illustration or more welcoming text

Files: Various page components

Checklist

• Merge dashboard into encounters page (unified run view)
• Show encounter method badges on route rows
• Group Pokemon by encounter method in EncounterModal with headers and spacers
• Auto-expand first unvisited route group
• Persist route group expand/collapse state in localStorage
• Allow game deselection in NewRun wizard
• Improve Home page with recent runs + CTA
• Add mobile hamburger nav menu
• Improve empty states with helpful guidance text