Components · coach-admin
Muscle picker
PlannedPicks target muscles on a body map.
- Source
components/ui/toggle-group.tsx - Figma: not linked yet (Q13)
What it is for
Picks target muscles on a front and back body map, for workout planning and for reading a client's training load by muscle.
Built from
- An SVG body map whose regions behave like a Toggle group (multiple selection), with a list of the same muscles as a keyboard and screen reader alternative.
- Drawer for the mobile layout.
- Chart colors for load levels.
Guidelines so far
- Every region needs a text label and must be reachable without the map, through the list.
- Load levels can't rely on color alone; add a value or pattern.
Replaces in coach-admin
src/components/MusclesPicker/ (MuscleDrawer, PerformanceDetailPanel, MusclesPicker): about 370 style values, the largest single component in the audit.
From the read-only audit of coach-admin: 200 style values, 288 uses.
Classes and selectors
.muscle-drawer__deselect8.muscle-drawer8.muscle-drawer__tab4.muscle-drawer__back4.muscle-drawer__loading, .muscle-drawer__empty, .muscle-draw3.muscle-drawer__badge3.muscle-drawer__header3.muscle-drawer__closeBtn3.muscle-drawer__subtitle2.muscle-body-label2.muscle-drawer__content2.musclesPicker2
Files
src/components/MusclesPicker/MuscleDrawer.scss167src/components/MusclesPicker/PerformanceDetailPanel.scss70src/components/MusclesPicker/MusclesPicker.scss41src/components/MusclesPicker/MusclesPicker.tsx10src/components/MusclesPicker/hooks/useMusclesPickerHook.js8src/components/MusclesPicker/assets/femaleFront.js4src/components/MusclesPicker/PerformanceDetailPanel.tsx4src/components/MusclesPicker/assets/femaleBack.js1src/components/MusclesPicker/assets/maleBack.js1src/components/MusclesPicker/assets/maleFront.js1
The inventory lists the first 12 locations of each value, so file counts are a lower bound.