Summary
Session rows (in History, Home's last-session card, and any other list that surfaces sessions) currently show summary data — date, gym class, muscle chips — but do not let the user drill into the individual exercises that made up the session without entering edit mode. The user wants to tap/click a session row and see the exact list of exercises (name, sets, reps, primary/secondary muscles) for that session in a read-only view, so they can quickly recall what they actually did. This improves recall when planning the next session and avoids the friction of opening edit mode just to look.
Priority
Medium
UI spec (Carbon g100)
- Session rows in
History.jsx (and the last-session card on Home.jsx) become clickable / focusable
- Clicking a row toggles an expanded read-only exercise list inline below the row (accordion pattern, no navigation away from the page)
- Caret icon (
ChevronDown / ChevronUp from @carbon/icons-react) on the right side of the row indicating expand state
- Smooth height transition; only one row expanded at a time per list (clicking another row collapses the previous)
- Keyboard:
Enter / Space toggles; row has role="button" and aria-expanded
- Expanded panel content (read-only):
- Each exercise rendered as a sub-row with the same visual language as
ExerciseRow but non-editable: 3px var(--accent) left strip, name in IBM Plex Sans Condensed 700, mono sets × reps to the right, AccentChip row for primary muscles below
- Disabled exercises (
enabled = false) hidden in the read-only view
- Background
var(--cds-layer-02) so the expansion is visually nested under the row's var(--cds-layer-01)
- 16px vertical padding, 0px border-radius (per Carbon hard rules)
- Edit mode entry point unchanged — the existing edit affordance still opens the full editor; the expansion is purely read-only
- Translated labels in
nb / en / fa; e.g. history.expandSession, history.collapseSession for aria-label
- No layout shift on the rest of the list when a row expands (parent container handles the height growth)
Data model
No schema changes. Existing session_exercises + muscle_activations joins already provide everything needed. If the History query does not currently fetch exercises eagerly for every session, add a lazy fetch on first expand:
fetchSessionExercises(sessionId) // returns [{ id, name, sets, reps, primary[], secondary[], enabled }]
Cache the result on the session object in component state so re-expanding the same row is instant.
Acceptance criteria
Out of scope
- Editing exercises from the expanded view (existing edit mode still owns this)
- Reordering / deleting exercises from the expanded view
- Session-level actions (delete, duplicate) — handled elsewhere
- Templates and Planlegger session previews (this issue is scoped to logged sessions only)
Summary
Session rows (in History, Home's last-session card, and any other list that surfaces sessions) currently show summary data — date, gym class, muscle chips — but do not let the user drill into the individual exercises that made up the session without entering edit mode. The user wants to tap/click a session row and see the exact list of exercises (name, sets, reps, primary/secondary muscles) for that session in a read-only view, so they can quickly recall what they actually did. This improves recall when planning the next session and avoids the friction of opening edit mode just to look.
Priority
Medium
UI spec (Carbon g100)
History.jsx(and the last-session card onHome.jsx) become clickable / focusableChevronDown/ChevronUpfrom@carbon/icons-react) on the right side of the row indicating expand stateEnter/Spacetoggles; row hasrole="button"andaria-expandedExerciseRowbut non-editable: 3pxvar(--accent)left strip, name in IBM Plex Sans Condensed 700, monosets × repsto the right,AccentChiprow for primary muscles belowenabled = false) hidden in the read-only viewvar(--cds-layer-02)so the expansion is visually nested under the row'svar(--cds-layer-01)nb/en/fa; e.g.history.expandSession,history.collapseSessionforaria-labelData model
No schema changes. Existing
session_exercises+muscle_activationsjoins already provide everything needed. If the History query does not currently fetch exercises eagerly for every session, add a lazy fetch on first expand:Cache the result on the session object in component state so re-expanding the same row is instant.
Acceptance criteria
History.jsxare clickable and expand to show exercises inlineHome.jsxsupports the same expand interactionChevronDownandChevronUpbased on expand stateEnter/Spacetoggles, focus ring respected)aria-expandedreflects state for screen readersnb,en, andfa(RTL safe)Out of scope