gravl/.planning/phases/01-input-ux/01-02-PLAN.md

phase, plan, type, wave, depends_on, files_modified, autonomous, must_haves

phase	plan	type	wave	depends_on	files_modified	autonomous	must_haves
01-input-ux	02	execute	2	01-01	frontend/src/pages/WorkoutPage.jsx	true	truths artifacts key_links Each set row in WorkoutPage shows a WeightInput (- button, value, kg, + button) instead of a bare input Each set row shows a RepsInput (- button, value, + button) instead of a bare input Tapping + on weight increments by 2.5; tapping - decrements by 2.5 Tapping + on reps increments by 1; tapping - decrements by 1 Typing a negative weight or reps value is blocked — value stays at 0 The kg suffix is visible next to the weight value inside the stepper path provides contains frontend/src/pages/WorkoutPage.jsx Updated ExerciseCard using stepper inputs WeightInput from to via pattern frontend/src/pages/WorkoutPage.jsx frontend/src/components/WeightInput.jsx import WeightInput import WeightInput from to via pattern frontend/src/pages/WorkoutPage.jsx frontend/src/components/RepsInput.jsx import RepsInput import RepsInput

Replace the two bare `` elements inside ExerciseCard's set-row with WeightInput and RepsInput components. Remove the now-unused .weight-input and .reps-input CSS rules.

Purpose: Users logging weight and reps now see +/- steppers with validation and the kg suffix — satisfying INP-01 through INP-03 and INP-06/INP-07. Output: Updated WorkoutPage.jsx. The bare inputs are gone; stepper components are in.

<execution_context> @/home/intense/.claude/get-shit-done/workflows/execute-plan.md @/home/intense/.claude/get-shit-done/templates/summary.md </execution_context>

@.planning/PROJECT.md @.planning/ROADMAP.md @frontend/src/pages/WorkoutPage.jsx @frontend/src/App.css @.planning/phases/01-input-ux/01-01-SUMMARY.md Task 1: Integrate WeightInput and RepsInput into ExerciseCard frontend/src/pages/WorkoutPage.jsx In frontend/src/pages/WorkoutPage.jsx, make these targeted changes:

1. Add two import statements at the top of the file (after the existing Icon import):

   import WeightInput from '../components/WeightInput'
   import RepsInput from '../components/RepsInput'
   

2. Inside the ExerciseCard component, find the set-row rendering block (around lines 321-343). Replace the two bare <input> elements and the separator span with:

   <WeightInput
     value={input.weight}
     onChange={(val) => handleInputChange(setNum, 'weight', val)}
   />
   <span className="input-separator">×</span>
   <RepsInput
     value={input.reps}
     onChange={(val) => handleInputChange(setNum, 'reps', val)}
   />
   

   The handleInputChange function signature already accepts a plain string value (second arg is field name, third is value string) — the new components pass the string directly via onChange, which matches.

3. Update the .set-inputs CSS in App.css. Find the .set-inputs rule and change align-items: center to align-items: flex-start so the taller stepper containers align correctly at the top of the row. Also ensure .set-row uses align-items: flex-start rather than center (the complete-btn can stay aligned via its own styling).

   In App.css, update:

   .set-inputs {
     flex: 1;
     display: flex;
     align-items: flex-start;
     gap: 0.75rem;
   }
   
   .set-row {
     display: flex;
     align-items: flex-start;
     gap: 0.75rem;
     padding: 0.75rem;
     background: var(--bg-secondary);
     border-radius: 8px;
     transition: all 0.2s;
   }
   

4. Remove the now-redundant .weight-input and .reps-input rules from App.css. Search for:

   .weight-input,
   .reps-input {
   

   and delete that entire rule block (approximately 8 lines). Also delete the mobile override block:

   .weight-input,
   .reps-input {
     width: 60px;
     padding: 0.5rem;
   }
   

   inside the @media (max-width: 480px) section.

Do NOT change any other part of WorkoutPage.jsx (warmup logic, progression hints, complete-btn, finish-workout-btn, etc.).

1. grep -n "WeightInput|RepsInput" frontend/src/pages/WorkoutPage.jsx
2. grep -n "weight-input|reps-input" frontend/src/App.css (should return nothing — rules deleted)
3. cd /workspace/gravl/frontend && npm run build 2>&1 | tail -20

• WorkoutPage.jsx imports and uses WeightInput and RepsInput in set rows
• .weight-input and .reps-input CSS rules are removed
• Build passes with no new errors

Manual check: open the app in a browser, navigate to a workout, expand an exercise. Each set row should show: [ - ] [ value ] [ kg ] [ × ] [ - ] [ value ] [ + ] [ complete ] Tap + on weight: increments by 2.5. Tap - on reps: decrements by 1. Try typing -5 in weight: stays at 0.

<success_criteria>

• Set rows use WeightInput and RepsInput, not bare inputs
• Weight increments by 2.5 per tap; reps increments by 1 per tap
• Negative values are blocked
• "kg" suffix is visible inside the weight stepper
• Build passes </success_criteria>

After completion, create `.planning/phases/01-input-ux/01-02-SUMMARY.md` using the summary template.