---
phase: 07-weight-unit-selection
plan: 02
subsystem: ui
tags: [weight-unit-toggle, react-hooks, settings-mutation, formatWeight]

# Dependency graph
requires:
  - phase: 07-01
    provides: "WeightUnit type, formatWeight(grams, unit), useWeightUnit() hook"
provides:
  - "Segmented g/oz/lb/kg toggle in TotalsBar with settings persistence"
  - "All weight displays across the app respect selected unit"
affects: []

# Tech tracking
tech-stack:
  added: []
  patterns: [segmented-pill-toggle, settings-mutation-via-useUpdateSetting]

key-files:
  created: []
  modified:
    - src/client/components/TotalsBar.tsx
    - src/client/components/ItemCard.tsx
    - src/client/components/CandidateCard.tsx
    - src/client/components/CategoryHeader.tsx
    - src/client/components/SetupCard.tsx
    - src/client/components/ItemPicker.tsx
    - src/client/routes/index.tsx
    - src/client/routes/setups/$setupId.tsx

key-decisions:
  - "Unit toggle placed between title and stats in TotalsBar flex container for subtle utility control placement"
  - "Biome requires type imports after value imports in destructured import statements"

patterns-established:
  - "All formatWeight calls pass unit from useWeightUnit -- no bare formatWeight(grams) in components"
  - "Settings mutation for UI preferences: useUpdateSetting().mutate({ key, value })"

requirements-completed: [UNIT-01, UNIT-02, UNIT-03]

# Metrics
duration: 3min
completed: 2026-03-16
---

# Phase 7 Plan 02: Weight Unit UI Wiring Summary

**Segmented g/oz/lb/kg toggle in TotalsBar with all 8 weight display call sites wired to user-selected unit**

## Performance

- **Duration:** 3 min
- **Started:** 2026-03-16T11:20:20Z
- **Completed:** 2026-03-16T11:23:32Z
- **Tasks:** 2 (1 auto + 1 checkpoint auto-approved)
- **Files modified:** 8

## Accomplishments
- Added segmented pill toggle (g/oz/lb/kg) to TotalsBar with persistent settings via useUpdateSetting
- Wired all 8 formatWeight call sites to pass the selected unit from useWeightUnit hook
- All 108 existing tests pass with no regressions, lint clean

## Task Commits

Each task was committed atomically:

1. **Task 1: Add unit toggle to TotalsBar and update all call sites** - `faa4378` (feat)
2. **Task 2: Verify weight unit selection end-to-end** - auto-approved (checkpoint)

## Files Created/Modified
- `src/client/components/TotalsBar.tsx` - Added unit toggle UI, useUpdateSetting mutation, and unit-aware formatWeight calls
- `src/client/components/ItemCard.tsx` - Added useWeightUnit import and unit parameter to formatWeight
- `src/client/components/CandidateCard.tsx` - Added useWeightUnit import and unit parameter to formatWeight
- `src/client/components/CategoryHeader.tsx` - Added useWeightUnit import and unit parameter to formatWeight
- `src/client/components/SetupCard.tsx` - Added useWeightUnit import and unit parameter to formatWeight
- `src/client/components/ItemPicker.tsx` - Added useWeightUnit import and unit parameter to formatWeight
- `src/client/routes/index.tsx` - Added useWeightUnit import and unit parameter to Dashboard formatWeight
- `src/client/routes/setups/$setupId.tsx` - Added useWeightUnit import and unit parameter to Setup Detail formatWeight

## Decisions Made
- Unit toggle placed between title and stats in TotalsBar's flex container, keeping it visible but non-dominant as a small utility control
- Biome requires `type` imports after value imports in destructured statements (e.g., `{ formatWeight, type WeightUnit }`)

## Deviations from Plan

### Auto-fixed Issues

**1. [Rule 1 - Bug] Fixed import order for WeightUnit type in TotalsBar.tsx**
- **Found during:** Task 1 (TotalsBar modification)
- **Issue:** Biome lint required `type WeightUnit` to come after value imports in destructured import
- **Fix:** Changed `{ type WeightUnit, formatPrice, formatWeight }` to `{ formatPrice, formatWeight, type WeightUnit }`
- **Files modified:** src/client/components/TotalsBar.tsx
- **Verification:** `bun run lint` passes clean
- **Committed in:** faa4378 (Task 1 commit)

---

**Total deviations:** 1 auto-fixed (1 bug - lint import ordering)
**Impact on plan:** Trivial import ordering fix. No scope creep.

## Issues Encountered
None

## User Setup Required
None - no external service configuration required.

## Next Phase Readiness
- Phase 7 (Weight Unit Selection) is fully complete
- All 3 requirements (UNIT-01, UNIT-02, UNIT-03) satisfied
- Ready to proceed to Phase 8 (Candidate Status & Category Icons)

---
*Phase: 07-weight-unit-selection*
*Completed: 2026-03-16*