# Phase 3: Setups and Dashboard - Context

**Gathered:** 2026-03-15
**Status:** Ready for planning

<domain>
## Phase Boundary

Named loadouts composed from collection items with live weight/cost totals, plus a dashboard home page with summary cards linking to collection, threads, and setups. No setup enhancements (weight classification, charts) — those are v2. No thread or collection changes beyond navigation restructure.

</domain>

<decisions>
## Implementation Decisions

### Setup Item Selection
- Checklist picker in a SlideOutPanel showing all collection items
- Items grouped by category with emoji headers (same grouping as collection view)
- Toggle items on/off via checkboxes — "Done" button to confirm
- Items can belong to multiple setups (shared, not exclusive)

### Setup Creation
- Inline name input + create button at top of setups list
- Same pattern as thread creation in Phase 2 (text input + button)
- No description field or extra metadata — just a name

### Setup Display
- Card grid layout grouped by category, reusing ItemCard component
- Same visual pattern as collection view for consistency
- Each item card gets a small × remove icon to remove from setup (not from collection)
- No confirmation dialog for removal — non-destructive action
- Per-category subtotals in CategoryHeader (weight/cost within this setup)

### Setup Totals
- Sticky bar at top of setup detail page showing setup name, item count, total weight, total cost
- Reuses TotalsBar pattern — contextual stats for the current setup
- Totals computed live from current item data

### Dashboard Card Design
- Three equal-width cards side by side on desktop, stacking vertically on mobile
- Collection card: item count, total weight, total cost
- Planning card: active thread count
- Setups card: setup count
- Summary stats on each card — at-a-glance overview before clicking in
- Empty state: same cards with zeros, Collection card says "Get started"

### Dashboard Page Header
- "GearBox" title only on dashboard (stats already on cards, no redundancy)
- No welcome message or greeting — clean and minimal

### Navigation & URL Structure
- `/` = Dashboard (three summary cards)
- `/collection` = Gear | Planning tabs (moved from current `/`)
- `/collection?tab=planning` = Planning tab
- `/threads/:id` = Thread detail (unchanged)
- `/setups` = Setups list
- `/setups/:id` = Setup detail
- "GearBox" title in TotalsBar is always a clickable link back to dashboard
- No breadcrumbs or back arrows — GearBox title link is the only back navigation
- Sub-pages show contextual stats in TotalsBar; dashboard shows title only

### Claude's Discretion
- Setup list card design (what stats/info to show per setup card beyond name and totals)
- Exact Tailwind styling, spacing, and transitions for dashboard cards
- Setup detail page layout specifics beyond the card grid + sticky totals
- How the checklist picker handles a large number of items (scroll behavior)
- Error states and loading skeletons

</decisions>

<specifics>
## Specific Ideas

- Dashboard should feel like a clean entry point — "GearBox" title, three cards, lots of whitespace
- Setup detail should visually mirror the collection view (same card grid, category headers, tag chips) so it feels like a filtered subset of your gear
- Removal × on cards should be subtle — don't clutter the visual consistency with collection
- Thread creation pattern (inline input + button) is the reference for setup creation

</specifics>

<code_context>
## Existing Code Insights

### Reusable Assets
- `SlideOutPanel.tsx`: Right-side slide panel — reuse for checklist item picker
- `ItemCard.tsx`: Card with tag chips — reuse directly in setup detail view (add × icon variant)
- `CategoryHeader.tsx`: Category section with emoji + subtotals — reuse in setup detail
- `TotalsBar.tsx`: Sticky bar with stats — adapt for contextual stats per page
- `ThreadCard.tsx`: Card with pill tags — pattern reference for setup list cards
- `ConfirmDialog.tsx`: Confirmation modal — reuse for setup deletion
- `ThreadTabs.tsx`: Tab component — reuse for gear/planning tabs on /collection

### Established Patterns
- Service layer with DB injection (`item.service.ts`, `thread.service.ts`)
- Hono routes with Zod validation via `@hono/zod-validator`
- TanStack Query hooks for data fetching
- Zustand store for UI state (`uiStore.ts`)
- API client utilities (`apiGet`, `apiPost`, `apiPut`, `apiDelete`)
- Shared Zod schemas in `src/shared/schemas.ts`
- Weight in grams, price in cents (integer math)
- URL search params for tab state

### Integration Points
- Database: New `setups` and `setup_items` tables in `src/db/schema.ts`
- Shared schemas: Setup Zod schemas in `src/shared/schemas.ts`
- Server: New setup routes in `src/server/routes/`, mounted in `src/server/index.ts`
- Client: New `/collection` and `/setups` routes, refactor current `/` to dashboard
- TotalsBar: Needs to become route-aware (different stats per page)
- Totals service: New setup totals endpoint or compute client-side from items

</code_context>

<deferred>
## Deferred Ideas

None — discussion stayed within phase scope

</deferred>

---

*Phase: 03-setups-and-dashboard*
*Context gathered: 2026-03-15*