---
# nuzlocke-tracker-qeim
title: UX improvements pass
status: completed
type: task
priority: normal
created_at: 2026-02-05T14:27:17Z
updated_at: 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:
```tsx
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

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