This document outlines the feature gaps between the Workout Tracker app (localhost:3000) and RP Hypertrophy (training.rpstrength.com) specifically related to the Exercise Library functionality. It provides detailed instructions for Claude Code to implement feature parity.
-
Exercise Library Page (
/exercises) -
- Shows 223 exercises grouped by muscle group
-
- Filter pills for muscle groups (All, Chest, Back, Shoulders, etc.) -
- Search bar for exercises -
- "+ New" button opens "Create Custom Exercise" modal -
- Exercise cards display: Name, Equipment Type (Dumbbell, Barbell, Cable, Machine, etc.) -
- "View all X exercises" link to expand each muscle group -
Create Custom Exercise Modal
-
- Exercise Name field
-
- Muscle Group dropdown -
- Equipment dropdown -
- YouTube Video ID field (optional) -
- Cancel/Create buttons -
Today's Workout Page
-
- Exercises displayed with info icon (i) that opens exercise detail modal
-
- Exercise Detail Modal has: -
- History tab (shows "No history yet" if empty) -
- Notes tab (text input to add notes)
-
Separate "Custom exercises" Navigation Tab
-
- Dedicated page for user-created exercises only
-
- Lists custom exercises with: -
- Muscle group + Equipment type header (e.g., "SHOULDERS - DUMBBELL") -
- Exercise name -
- **"Last performed" date** with icon (e.g., "Last performed 12/27/2025") -
- Three-dot menu with options: Edit exercise, Add exercise note, Delete exercise -
- "+ NEW" button to create new custom exercises -
Exercise Detail Modal (accessed via info icon on workout page)
-
- Two tabs: "Detail" and "History"
-
- **Detail Tab:** -
- Muscle group + Equipment type header -
- **Embedded YouTube video** player -
- "View video on YouTube" link -
- "Pinned notes" section -
- **History Tab:** -
- Grouped by Mesocycle name (e.g., "CHEST AND BACK FOCUS (ROUND 3) - 4 WEEKS") -
- Each entry shows: Weight Reps, Week/Day info, Date performed -
- DELOAD labels where applicable -
System vs Custom Exercise Separation
-
- System default exercises are non-editable by users
-
- Users can only add notes to system exercises -
- Custom exercises are fully editable
| Feature | RP Hypertrophy | Localhost | Gap |
|---|---|---|---|
| Clickable exercises in Exercise Library | N/A (only custom exercises page) | No click action | Need to add modal on click |
| Exercise Detail Modal with Video | YouTube embed | Missing | Critical - Add video embed |
| "Last performed" date on exercise list | On custom exercises | Missing | Add to exercise cards |
| Separate Custom Exercises nav tab | Dedicated page | Mixed with system | Add navigation tab |
| System exercises (non-editable) | Can only add notes | Not distinguished | Implement distinction |
| Exercise History by Mesocycle | Grouped display | Partial (needs mesocycle grouping) | Enhance grouping |
| Video embedded in modal | YouTube player | Only video ID field | Add player embed |
Task: Make exercises in the Exercise Library clickable to open a detail modal.
Steps:
- In the Exercise Library component, add
onClickhandler to each exercise card -
- Create/reuse an
ExerciseDetailModalcomponent with three tabs:
- Create/reuse an
-
- Video tab: Embed YouTube video if
youtubeVideoIdexists
- Video tab: Embed YouTube video if
-
- **History** tab: Show exercise history grouped by mesocycle -
- **Notes** tab: Allow adding/viewing notes
Code Location: src/components/exercises/ or similar
Modal Structure:
interface ExerciseDetailModalProps {
exercise: Exercise;
isOpen: boolean;
onClose: () => void;
}
// Tabs: Video | History | Notes
// Video tab shows embedded YouTube player
// History shows past performance grouped by mesocycle
// Notes allows adding/pinning notes
```
### Priority 2: Add YouTube Video Embedding
**Task:** Embed YouTube videos in the exercise detail modal.
**Steps:**
1. Use the existing `youtubeVideoId` field from exercises
2. Create a YouTube embed component:
```tsx
const YouTubeEmbed = ({ videoId }: { videoId: string }) => (
<div className="aspect-video w-full">
<iframe
src={`https://www.youtube.com/embed/${videoId}`}
title="Exercise demonstration"
className="w-full h-full rounded-lg"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
/>
</div>
);
```
3. Add "View video on YouTube" link below the embed
**Data Requirement:** Ensure system exercises have YouTube video IDs populated. The user mentioned using the same videos as RP - these need to be mapped to each exercise.
### Priority 3: Separate Custom Exercises Navigation
**Task:** Create a dedicated "Custom Exercises" navigation tab/page.
**Steps:**
1. Add "Custom Exercises" link to the sidebar navigation (between "Exercises" and "Templates")
2. Create `/custom-exercises` page that:
- Shows only user-created exercises
- Displays: Muscle group, Equipment type, Name, "Last performed" date
- Has three-dot menu with: Edit, Add note, Delete options
- Has "+ New" button to create custom exercises
**Navigation Update:**
```tsx
// Sidebar navigation items
- Today's Workout
- Mesocycles
- Exercises (system/default exercises - read-only)
- Custom Exercises (new - user exercises - editable)
- Templates
- Settings
```
### Priority 4: Add "Last Performed" Date
**Task:** Track and display when an exercise was last performed.
**Steps:**
1. Query the workout history to find the most recent date each exercise was used
2. Display on exercise cards: Icon + "Last performed MM/DD/YYYY"
3. Show on both Exercise Library and Custom Exercises pages
**Query Logic:**
```typescript
// Get last performed date for an exercise
const getLastPerformed = async (exerciseId: string): Promise<Date | null> => {
// Query logged sets for this exercise, order by date desc, limit 1
// Return the workout date of the most recent logged set
};
```
### Priority 5: Distinguish System vs Custom Exercises
**Task:** Implement clear distinction between system (default) and custom exercises.
**Steps:**
1. Add `isCustom` or `source: 'system' | 'custom'` field to Exercise model
2. System exercises:
- Cannot be edited or deleted by users
- Can have notes added
- Can view history and video
3. Custom exercises:
- Fully editable (name, muscle group, equipment, video)
- Can be deleted
- Shown in separate "Custom Exercises" page
### Priority 6: Enhance Exercise History Display
**Task:** Group exercise history by mesocycle with proper formatting.
**Steps:**
1. Query exercise history including the mesocycle information
2. Group results by mesocycle
3. Display format:
```
MESOCYCLE NAME - X WEEKS
30 lbs 12, 10, 8 WEEK 2 - DAY 1 Dec 22, 2025
25 lbs 10, 10 WEEK 1 - DAY 3 Dec 18, 2025
DELOAD
...
PREVIOUS MESOCYCLE NAME - X WEEKS
...
```
---
## Accessibility Issues Found
### Issue 1: Exercise Cards Not Interactive
- **Problem:** Exercise cards in Exercise Library have no visual affordance indicating they're clickable (because they currently aren't)
- **Fix:** Add hover states, cursor pointer, and make them clickable to open detail modal
### Issue 2: Modal Scrolling
- **Problem:** If exercise history is long, need to ensure modal content scrolls properly
- **Fix:** Add `overflow-y-auto` and `max-h-[80vh]` to modal content container
### Issue 3: Console Hydration Error
- **Problem:** Next.js hydration mismatch error appears (related to dark mode/browser extensions)
- **Fix:** Use `suppressHydrationWarning` on html element or implement proper dark mode handling with next-themes
### Issue 4: Low Contrast Text
- **Problem:** Some secondary text (like equipment type labels) may have low contrast on dark background
- **Fix:** Ensure text meets WCAG AA contrast ratio (4.5:1 for normal text)
- **Check:** Equipment type labels under exercise names
### Issue 5: Missing Focus States
- **Problem:** Interactive elements should have visible focus indicators for keyboard navigation
- **Fix:** Add `focus:ring-2 focus:ring-offset-2 focus:ring-primary` to clickable elements
---
## Database/Schema Considerations
### Exercise Model Updates
```typescript
interface Exercise {
id: string;
name: string;
muscleGroup: MuscleGroup;
equipmentType: EquipmentType;
youtubeVideoId?: string;
isCustom: boolean; // or source: 'system' | 'custom'
createdBy?: string; // user ID if custom
createdAt: Date;
updatedAt: Date;
}
```
### Exercise Note Model
```typescript
interface ExerciseNote {
id: string;
exerciseId: string;
userId: string;
content: string;
isPinned: boolean;
createdAt: Date;
updatedAt: Date;
}
```
---
## YouTube Video IDs for System Exercises
The app should use the same YouTube videos as RP Hypertrophy for system exercises. During implementation:
1. Extract video IDs from RP for each matching exercise
2. Create a seed file or migration to populate `youtubeVideoId` for all system exercises
3. Example mapping needed:
- "Dumbbell Lateral Raise" RP video ID
- "Incline Dumbbell Flye" RP video ID
- etc.
**Note:** This requires identifying the YouTube video IDs used by RP for each exercise. Consider creating a mapping file or database seed.
---
## Testing Checklist
- [ ] Exercise cards in Library are clickable and open detail modal
- [ ] Detail modal shows YouTube video (if available)
- [ ] Detail modal shows exercise history grouped by mesocycle
- [ ] Detail modal allows adding/viewing notes
- [ ] Custom Exercises page shows only user-created exercises
- [ ] Custom exercises can be edited and deleted
- [ ] System exercises cannot be edited (only notes can be added)
- [ ] "Last performed" date displays correctly
- [ ] All modals scroll properly with long content
- [ ] Keyboard navigation works (Tab, Enter, Escape)
- [ ] Focus states are visible on all interactive elements
- [ ] Color contrast meets WCAG AA standards
---
## Summary
The main gaps to address are:
1. **Critical:** Add clickable exercise cards detail modal with video embed
2. **High:** Create separate Custom Exercises navigation/page
3. **Medium:** Add "Last performed" date tracking
4. **Medium:** Implement system vs custom exercise distinction
5. **Low:** Enhance history display with mesocycle grouping
6. **Ongoing:** Address accessibility issues throughout