11 KiB
11 KiB
phase, plan, type, wave, depends_on, files_modified, autonomous, requirements, must_haves
| phase | plan | type | wave | depends_on | files_modified | autonomous | requirements | must_haves | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 07-weight-unit-selection | 02 | execute | 2 |
|
|
false |
|
|
Purpose: Deliver the complete user-facing feature. After this plan, users can select g/oz/lb/kg and see all weights update instantly across collection, planning, setups, and dashboard. Output: Fully functional weight unit selection with persistent preference.
<execution_context> @/home/jlmak/.claude/get-shit-done/workflows/execute-plan.md @/home/jlmak/.claude/get-shit-done/templates/summary.md </execution_context>
@.planning/PROJECT.md @.planning/ROADMAP.md @.planning/STATE.md @.planning/phases/07-weight-unit-selection/07-RESEARCH.md @.planning/phases/07-weight-unit-selection/07-01-SUMMARY.mdFrom src/client/lib/formatters.ts (after Plan 01):
export type WeightUnit = "g" | "oz" | "lb" | "kg";
export function formatWeight(grams: number | null | undefined, unit?: WeightUnit): string;
export function formatPrice(cents: number | null | undefined): string;
From src/client/hooks/useWeightUnit.ts (after Plan 01):
export function useWeightUnit(): WeightUnit;
From src/client/hooks/useSettings.ts (existing):
export function useUpdateSetting(): UseMutationResult<Setting, Error, { key: string; value: string }>;
Usage pattern for every component:
import { useWeightUnit } from "../hooks/useWeightUnit";
// ...
const unit = useWeightUnit();
// ...
{formatWeight(weightGrams, unit)}
1. Import `useWeightUnit` from `../hooks/useWeightUnit`, `useUpdateSetting` from `../hooks/useSettings`, and `WeightUnit` type from `../lib/formatters`
2. Inside the component function, call `const unit = useWeightUnit()` and `const updateSetting = useUpdateSetting()`
3. Define `const UNITS: WeightUnit[] = ["g", "oz", "lb", "kg"]`
4. Add a segmented pill toggle to the right side of the TotalsBar, between the title and the stats. The toggle should be a `div` with `flex items-center gap-1 bg-gray-100 rounded-full px-1 py-0.5` containing a button per unit:
```
<button
key={u}
onClick={() => updateSetting.mutate({ key: "weightUnit", value: u })}
className={`px-2 py-0.5 text-xs rounded-full transition-colors ${
unit === u
? "bg-white text-gray-700 shadow-sm font-medium"
: "text-gray-400 hover:text-gray-600"
}`}
>
{u}
</button>
```
5. Update the default stats construction (the `data?.global` branch) to pass `unit` to both `formatWeight` calls:
- `formatWeight(data.global.totalWeight, unit)` and `formatWeight(null, unit)`
6. Position the toggle: place it in the flex container between the title and stats, using a wrapper div that pushes stats to the right. The toggle should be visible but not dominant -- it's a small utility control.
**ItemCard.tsx** -- 3-line change:
1. Add import: `import { useWeightUnit } from "../hooks/useWeightUnit";`
2. Inside component: `const unit = useWeightUnit();`
3. Change `{formatWeight(weightGrams)}` to `{formatWeight(weightGrams, unit)}`
**CandidateCard.tsx** -- Same 3-line pattern as ItemCard:
1. Add import: `import { useWeightUnit } from "../hooks/useWeightUnit";`
2. Inside component: `const unit = useWeightUnit();`
3. Change `{formatWeight(weightGrams)}` to `{formatWeight(weightGrams, unit)}`
**CategoryHeader.tsx** -- Same 3-line pattern:
1. Add import: `import { useWeightUnit } from "../hooks/useWeightUnit";`
2. Inside component: `const unit = useWeightUnit();`
3. Change `{formatWeight(totalWeight)}` to `{formatWeight(totalWeight, unit)}`
**SetupCard.tsx** -- Same 3-line pattern:
1. Add import: `import { useWeightUnit } from "../hooks/useWeightUnit";`
2. Inside component: `const unit = useWeightUnit();`
3. Change `{formatWeight(totalWeight)}` to `{formatWeight(totalWeight, unit)}`
**ItemPicker.tsx** -- Same 3-line pattern:
1. Add import: `import { useWeightUnit } from "../hooks/useWeightUnit";`
2. Inside component: `const unit = useWeightUnit();`
3. Change `formatWeight(item.weightGrams)` to `formatWeight(item.weightGrams, unit)`
**routes/index.tsx** (Dashboard) -- Same 3-line pattern:
1. Add import: `import { useWeightUnit } from "../hooks/useWeightUnit";`
2. Inside `DashboardPage`: `const unit = useWeightUnit();`
3. Change `formatWeight(global?.totalWeight ?? null)` to `formatWeight(global?.totalWeight ?? null, unit)`
**routes/setups/$setupId.tsx** (Setup Detail) -- Same 3-line pattern:
1. Add import: `import { useWeightUnit } from "../../hooks/useWeightUnit";`
2. Inside `SetupDetailPage`: `const unit = useWeightUnit();`
3. Change `{formatWeight(totalWeight)}` to `{formatWeight(totalWeight, unit)}`
**Completeness check:** After all changes, grep for `formatWeight(` across `src/client/` -- every call must have a second `unit` argument EXCEPT the function definition itself in `formatters.ts`.
Start the dev servers: `bun run dev:client` and `bun run dev:server`
Open http://localhost:5173 in a browser and walk through the verification steps below.
<success_criteria>
- UNIT-01: User can select g/oz/lb/kg from the TotalsBar toggle -- visible and functional
- UNIT-02: Every weight display (ItemCard, CandidateCard, CategoryHeader, SetupCard, ItemPicker, Dashboard, Setup Detail, TotalsBar) reflects the selected unit
- UNIT-03: Weight unit persists across sessions via the existing settings API (PUT/GET /api/settings/weightUnit) </success_criteria>