Improve UX with merged run view, method badges, grouped encounters, and mobile nav
Merges the run dashboard into the encounters page as a unified view at /runs/:runId, adds encounter method grouping in the modal and badges on route rows, improves the home page with recent runs, adds mobile hamburger nav, and polishes empty states. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,16 +1,20 @@
|
||||
---
|
||||
# nuzlocke-tracker-qeim
|
||||
title: UX improvements pass
|
||||
status: draft
|
||||
status: completed
|
||||
type: task
|
||||
priority: normal
|
||||
created_at: 2026-02-05T14:27:17Z
|
||||
updated_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
|
||||
@@ -20,4 +24,124 @@ Areas to evaluate:
|
||||
- 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.
|
||||
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
|
||||
Reference in New Issue
Block a user