Skip to content

As a user I want to click on a session row to see the exercises inside that session so I can review exactly what was trained #144

@ChristopherRotnes

Description

@ChristopherRotnes

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

  • Session rows in History.jsx are clickable and expand to show exercises inline
  • Last-session card on Home.jsx supports the same expand interaction
  • Expanded view is read-only — name, sets × reps, primary muscle chips visible
  • Caret icon flips between ChevronDown and ChevronUp based on expand state
  • Only one row expanded at a time per list
  • Keyboard accessible (Enter / Space toggles, focus ring respected)
  • aria-expanded reflects state for screen readers
  • Translated to nb, en, and fa (RTL safe)
  • Edit mode entry point still works as before
  • Verified by developer on dev/qa/prod before the issue is closed

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)

Metadata

Metadata

Labels

enhancementNew feature or request

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions