Components · coach-admin
Exercise picker
PlannedSearches and picks exercises from the library.
- Source
components/ui/command.tsx - Figma: not linked yet (Q13)
What it is for
Searches the exercise library and adds exercises to a workout: filter by muscle group or equipment, preview the exercise video, and pick one or several.
Built from
- Command or Combobox for search with keyboard selection.
- Sheet on desktop and Drawer on mobile for the library panel.
- Toggle group for muscle and equipment filters.
- Card for exercise results, with a thumbnail and the Avatar fallback pattern.
Guidelines so far
- Searching works in English and Arabic exercise names.
- Video previews keep their media controls left to right in RTL.
Replaces in coach-admin
The exercise library panel in src/components/ExerciseLibrary/ (129 style values) with its own search, cards and expand states.
From the read-only audit of coach-admin: 119 style values, 138 uses.
Classes and selectors
.exercise-card11.exercise-library10.exercise-card__image-wrapper9.exercise-library__header-button6.exercise-card__play-button5.exercise-card__name4.exercises-list__card-placeholder4.exercise-library__content4.exercise-library__card-placeholder3.exercise-library__grid, .exercises-list__grid3.exercise-actions3.exercises-list__grid3
Files
src/components/ExerciseLibrary/exercise-library.scss92
The inventory lists the first 12 locations of each value, so file counts are a lower bound.
SCSS variables in these styles
$fade-easingnot a color: spacing, size or layout$fade-out-durationnot a color: spacing, size or layout$title-container-heightnot a color: spacing, size or layout$blacknot a color: spacing, size or layout$scale-transition-durationnot a color: spacing, size or layout$premium-easingnot a color: spacing, size or layout$fade-in-durationnot a color: spacing, size or layout$border-color→--border