clawd/gravl
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feature/03-design-polish #1

Merged
sphinxen merged 9 commits from feature/03-design-polish into main 2026-03-02 09:08:10 +01:00
Conversation 0 Commits 9 Files Changed 21
+3591 -810
sphinxen commented 2026-03-01 21:15:34 +01:00
Contributor
Copy Link
Copy Source
No description provided.
sphinxen added 42 commits 2026-03-01 21:15:35 +01:00
docs: map existing codebase 348330af4b
Add comprehensive UX/feature research for Gravl 4581e215d4 
Research compiled from Exa AI search covering:
- Market overview (2024-2032 projections)
- UX best practices and common mistakes
- User feedback from Reddit communities
- Competitor analysis (Strong, Hevy, FITBOD, etc.)
- Gamification strategies
- AI coaching trends
- Prioritized recommendations for Gravl
Add exercise database research fc6a500c9f 
Comprehensive analysis of exercise data sources:
- ExerciseDB API (1,300+ exercises with GIFs)
- wger (open source, self-hostable)
- free-exercise-db (public domain)
- MusclesWorked, API Ninjas

Includes:
- Data structure recommendations
- Exercise substitution patterns
- Import script examples
- License summary
docs: initialize project 23cf2e3eef
chore: add project config 58479807ec
docs: complete domain research 1041235449
docs: define v1 requirements cc010b3ed5
docs: create roadmap (3 phases) bd59e5e381
docs(01-input-ux): research mobile input UX patterns 055dc93c89 
Comprehensive research on implementing Phase 1: Input UX for fitness app.
Documents standard stack (React 18 + CSS custom properties), architecture
patterns (stepper components with 44px touch targets, validation), common
pitfalls (iOS auto-zoom, negative values), and verified code examples.

Key findings:
- Mobile touch target minimum 44px (iOS HIG, Material Design, WCAG 2.1)
- iOS auto-zoom prevented with font-size >= 16px on inputs
- Negative value validation in onChange handlers (not just HTML min attr)
- Custom stepper buttons recommended over native browser spinners
- Plain React state sufficient for Phase 1 (no form libraries needed)
- Weight input: 2.5kg steps; Reps input: 1 rep steps
- Includes reusable StepperInput component, WeightInput, RepsInput

All patterns verified against official docs (MDN, Apple HIG, Material Design,
WCAG 2.1) and industry best practices (NN/G, Chakra UI, Material Design).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
docs(01-input-ux): create phase plan f23a4902e6
feat(01-input-ux-01): create StepperInput controlled component 912bd5dd31 
- Reusable stepper with +/- buttons flanking a number input
- Handles min clamping, max constraint, decimal steps
- Controlled component (no internal state): value/onChange props
- 44px touch targets, 16px font, aria-labels present
- Rejects non-numeric input silently
feat(01-input-ux-01): add WeightInput, RepsInput wrappers + stepper CSS 9fb8543cc6 
- WeightInput: wraps StepperInput with step=2.5, suffix=kg
- RepsInput: wraps StepperInput with step=1, no suffix
- App.css: appended stepper styles (.stepper-wrapper, .stepper-btn, etc.)
- Buttons min 44x44px touch targets, font-size 16px on input
- No existing CSS removed; block appended at end
docs(01-input-ux-01): complete stepper input components plan e940103d70 
- SUMMARY.md: documents StepperInput, WeightInput, RepsInput creation
- STATE.md: advanced to plan 1/3, added component decisions
docs(01-03): complete touch target audit plan d37336eebd 
- 01-03-SUMMARY.md: audit confirmed all 44px targets already in place from 01-01
- STATE.md: advanced to plan 3/3, updated metrics and decisions

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
feat(01-02): integrate WeightInput and RepsInput into ExerciseCard set rows 18ecf06833 
- Import WeightInput and RepsInput in WorkoutPage.jsx
- Replace bare <input type="number"> elements with stepper components
- Update .set-inputs alignment to flex-start for taller steppers
- Update .set-row alignment to flex-start
- Remove now-redundant .weight-input and .reps-input CSS rules (main + mobile)
docs(01-02): complete stepper integration plan — summary and state update cb6f41ce3c 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
docs(phase-1): complete phase execution 9ad11c3398
docs(02): capture phase context 1f960dd0d2
docs(phase-02): research flexible sets phase 14cda2322e 
Researched:
- Dropset conventions: 20-25% weight reduction per step (HIGH confidence, strength training literature)
- React array management: Use filter() for immutable removals (HIGH confidence, official React docs)
- Mobile delete UX: Combine inline icons + optional swipe, 48px touch targets (HIGH confidence, WCAG + NN/G)
- Lightweight modal: Plain CSS overlay pattern without component library (MEDIUM confidence, verified with community)
- Backend set numbering: Recommend frontend renumbering before save to handle gaps (MEDIUM confidence, needs verification)

Key deliverables:
- Standard Stack: React 18 + plain CSS (no new dependencies)
- Architecture Patterns: Dynamic array management, lightweight modal, inline delete with optional confirmation
- Don't Hand-Roll: Array mutations (use filter), modal dialog (CSS is simpler than library), set calculations
- Common Pitfalls: Set numbering gaps, missing reps defaults, arbitrary weight reductions, last-set deletion
- Code Examples: Add/remove sets, dropset calculations, delete patterns with renumbering

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
feat(02-01): refactor ExerciseCard to dynamic setList with add-set modal and delete-set af80f16790 
- Replace fixed setInputs object with setList array state
- Add showAddModal state and set-type chooser modal (Vanligt set / Dropset)
- handleAddNormal: append one set pre-filled from last row's weight and reps
- handleAddDropset: append 3 sets at 100%/80%/60% weight (rounded to 2.5kg), 10 reps
- handleDeleteSet: remove by index with last-set guard (no delete when only 1 remains)
- handleComplete and handleInputChange updated to use array index (idx+1 as set_number)
- Progress badge and all-done class use setList.length instead of exercise.sets
- onDeleteSet prop added (optional stub for backend wiring in plan 02)
- Add trash icon SVG to Icons.jsx (outline trash can, consistent with icon library)
feat(02-01): add CSS for add-set button, delete-set button, and set-type modal 3d8a29cb21 
- .add-set-btn: full-width dashed border button, 44px touch target, accent hover
- .delete-set-btn: 36px wide inline button, subtle opacity, red on hover, disabled state
- .set-type-modal-overlay: fixed fullscreen overlay with semi-transparent dark background
- .set-type-modal: bottom-sheet card (border-radius top only), max-width 600px
- .set-type-option: full-width option card with label/description layout, 56px tall
- .set-type-option.dropset: accent-colored title for dropset option
- .set-type-cancel: borderless cancel button, 44px touch target
- Uses existing dark theme variables: --bg-card, --bg-secondary, --border, --accent, --text-primary, --text-secondary
docs(02-01): complete flexible sets plan 01 — summary and state update f09eb66fb4 
- 02-01-SUMMARY.md: dynamic setList refactor, add-set modal, delete-set with last-set guard
- STATE.md: advance to phase 2 plan 2, record decisions, update metrics and session

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
feat(02-02): add DELETE /api/logs endpoint to backend f9eb6ccc65 
- DELETE /api/logs accepts user_id, program_exercise_id, date, set_number in request body
- Deletes matching workout_logs row by composite key
- Returns 200 + deleted id on success, 404 if row not found
- Consistent with existing POST /api/logs (no auth middleware, user_id from body)
feat(02-02): wire deleteLog through App.jsx and WorkoutPage to ExerciseCard 175434f5c8 
- Added deleteLog function in App.jsx: calls DELETE /api/logs and removes entry from local logs state
- Passed onDeleteSet={deleteLog} to WorkoutPage in workout view render
- Updated WorkoutPage function signature to accept onDeleteSet prop
- Passed onDeleteSet through to each ExerciseCard (ExerciseCard already calls it in handleDeleteSet)
- Non-logged sets (404 from backend) silently ignored via catch block
docs: add Stop hook design doc 086dcbf7fb 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
docs(02-02): complete DELETE logs endpoint plan — summary and state update 3808ef531b 
- 02-02-SUMMARY.md: backend DELETE endpoint + frontend deleteLog wiring
- STATE.md: phase 2 marked complete, decisions added, position advanced to phase 3 ready
docs: add Stop hook implementation plan 52a0ba0da0 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
docs(phase-02): complete phase execution 03c76cb316
docs: add phase 3 design polish planning, update progress 3493ffdf44
docs: add TDD coding conventions 419e85222b 
Red/Green/Refactor cycle is now mandatory for all development
design: WorkoutPage Hevy-style redesign + AlternativeModal + backend API 8301803a6f 
- Add GET /api/exercises/:id/alternatives endpoint
- Add GET /api/exercises/:id/last-workout endpoint
- New AlternativeModal component for swapping exercises
- WorkoutPage: single-tap logging, +/- buttons, rest timer
- Updated Icons with new workout icons
- Polish: card shadows, borders, micro-interactions
- Tasks directory for project management
feat(onboarding): add conversational ChatOnboarding component 0ce9d546cf
checkpoint: mark 03-01-login-onboarding-polish as completed 2f9929bf50
feat(auth): polish login/register with logo, gradients and animations 7ed9219ffd
feat(dashboard): polish header logo, stat cards, calendar and animations db32277fb1 
- Replace gravl icon text with Logo component in dashboard header
- Stat cards: gradient depth + per-card colour accent (orange/green/amber)
- Calendar today: pulsing glow animation; workout days get subtle brand tint
- Arrow nudge animation on today-workout-card hover
- Section stagger fade-in on page load (calendar → coach → stats)
- Larger stat-value font (3xl) with tighter letter-spacing
- Consistent gap spacing in dashboard-main (space-6)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
03-03: Workout Experience Polish - enhanced exercise cards, progress badges, rest timer, KLART button, warmup styling f6b1379a73
checkpoint: mark phase 3 complete (03-01, 03-02, 03-03) 524b6ab504
feat(infra): add staging environment setup with docker-compose and scripts 6e7d545d70
feat(staging): add Traefik-based staging with automatic subdomains c35156ca25
fix(staging): fix Traefik service linking with explicit service labels 07e3b8fc13
feat(phase-4): Backend API for custom workouts baf85fdcbf 
- Add custom_workouts and custom_workout_exercises tables (schema)
- New endpoints:
  - GET /api/exercises - List all exercises for picker
  - POST /api/custom-workouts - Fork program workout
  - GET /api/custom-workouts - List user's custom workouts
  - GET /api/custom-workouts/:id - Get workout with exercises
  - PUT /api/custom-workouts/:id - Update workout exercises
  - DELETE /api/custom-workouts/:id - Delete custom workout
- Updated endpoints for source_type support:
  - GET /api/logs - Filter by source_type and custom_workout_id
  - POST /api/logs - Save with source_type and custom_workout_id
  - DELETE /api/logs - Support custom workout log deletion
- Adds Phase 4 planning overview

Completes: 04-01-schema-migration, 04-02-backend-api
Next: 04-03-frontend-workout-edit
test(e2e): add Playwright with browser tests for login, logo, dashboard b2db29946f
clawd added 6 commits 2026-03-02 08:20:52 +01:00
feat(04-03-partial): ExercisePicker and WorkoutEditPage components - swap/add/remove exercises with sets/reps editing 71d450bdae
feat(04-04-visual-distinction): Add custom vs program workout badges on WorkoutSelectPage af919b3741 
- Fetch custom workouts for authenticated user
- Display 'Anpassad' (custom) or 'Program' badge on each workout card
- Add badge component with orange accent for custom, muted color for program
- Badge positioned bottom-right of workout icon
- Responsive styling consistent with Gravl dark theme
- All build checks pass
04-05: Reset to Original feature - custom workouts can be reverted to program versions 4ff87105a4 
- Added reset button (refresh icon) to custom workout cards
- Implemented confirmation dialog to prevent accidental resets
- Integrated with DELETE /api/custom-workouts/:id endpoint
- Added CSS styling: reset button, success message, modal dialog
- Added refresh icon to SVG library
- Frontend build successful

Changes:
- frontend/src/pages/WorkoutSelectPage.jsx (reset flow logic)
- frontend/src/App.css (170 new lines for reset/modal styling)
- frontend/src/components/Icons.jsx (refresh icon)
- Checkpoint updated with task completion metadata
04-06: Plan persistence improvements and implement draft persistence 345cbed6d2 
- Created 04-06-PLAN.md outlining persistence improvements phases
- Phase 04-06-01: Draft persistence via localStorage
  - Added useDraftWorkout hook for auto-saving/loading drafts
  - Integrated hook into WorkoutEditPage
  - Added draft recovery prompt UI
  - Drafts cleared after successful save
- Phase 04-06-02: Save error handling & retry (scaffolding)
  - Added error state and syncStatus tracking
  - Added handleRetry() for failed saves
  - Error banner with retry button
- Phase 04-06-03: Sync status UI (scaffolding)
  - Added visual feedback for save progress
  - Status indicators: saving, saved, error
  - Disabled UI during save to prevent conflicts
- Created comprehensive styles for new UI components

Status: 04-06-01 complete and integrated. Ready for testing.
04-06-02: Save error handling & retry logic deea3a1b85 
- Added specific error type differentiation:
  * Network errors → 'Anslutning misslyckades'
  * Validation (400) → 'Ogiltiga ändringar'
  * Auth (401/403) → 'Saknar behörighet'
  * Server (500+) → 'Serverfel'
  * Generic fallback messages

- Implemented retry tracking:
  * retryCount state for monitoring attempts
  * lastSavePayload storage for potential retry (future feature)
  * Console logging with context for debugging

- Enhanced error handling:
  * getErrorMessage() function for error classification
  * Comprehensive error logging with workout/exercise context
  * Draft preserved on all error types (no data loss)

- Improved UI/UX:
  * Error banner with specific, actionable messages
  * 'Försök igen' button with retry tracking
  * Sync status feedback (idle/saving/saved/error)
  * Success checkmark animation (2s duration)
  * Spinner animation during save

- CSS Enhancements:
  * @keyframes spin for loading spinner
  * @keyframes slideInCheckmark for success feedback
  * Mobile-responsive error banner (flex column on <480px)
  * Smooth animations for state transitions

Tests: npm run build ✓ (no syntax errors)
Files modified:
  - frontend/src/pages/WorkoutEditPage.jsx
  - frontend/src/pages/WorkoutEditPage.css
chore: add .gitignore and clean up repository b9e82de194 
- Added comprehensive .gitignore for node_modules, dist, env files
- Removed node_modules from git history (keep locally)
- Removed empty/placeholder files (EOF, PLANEOF, create-staging.py)
- Repository now clean for public sharing
clawd added 1 commit 2026-03-02 08:22:33 +01:00
chore: remove all node_modules directories from repo be42a8178f
clawd force-pushed feature/03-design-polish from be42a8178f to 53ddb53e9e 2026-03-02 08:27:02 +01:00 Compare
clawd force-pushed feature/03-design-polish from 53ddb53e9e to 86f2baef44 2026-03-02 08:42:17 +01:00 Compare
clawd added 1 commit 2026-03-02 08:46:30 +01:00
docs: add CLAUDE.md — agent development guidelines f4df4f7490 
- Core principles for autonomous agents with verification
- Checkpoint-based self-monitoring patterns
- Generalized agent workflow (no project-specific agents)
- Single source of truth in ~/clawd/claude-agents-skills/
- PM autonomy and cron job configuration
- Verification protocol to prevent hallucinations
- Together with CODING-CONVENTIONS.md, foundation for agent development
clawd added 1 commit 2026-03-02 08:47:33 +01:00
docs: integrate coding conventions into CLAUDE.md 6b05b88bf1 
- Merged CODING-CONVENTIONS.md content into single authoritative document
- Part 1: Agent development principles (autonomy, verification, PM pattern)
- Part 2: Coding conventions (Red/Green/Refactor TDD, naming, commit patterns)
- Part 3: Operations (cron jobs, repo structure)
- Part 4: Agent/skill development workflow
- CLAUDE.md is now the single source of truth for agent development
clawd added 1 commit 2026-03-02 08:49:20 +01:00
docs: remove CODING-CONVENTIONS.md (content merged into CLAUDE.md) d35cbeac5b 
All coding conventions, TDD patterns, and development guidelines
are now consolidated in CLAUDE.md
clawd added 1 commit 2026-03-02 08:52:44 +01:00
docs: add git hygiene guidelines to CLAUDE.md d3ccbf5c8c 
- No 'fix' commits for typos/syntax errors
- Use interactive rebase to keep history clean
- Examples: squash, amend, reorder commits
- Keep one logical change per commit
clawd added 1 commit 2026-03-02 08:56:35 +01:00
docs: add branching strategy - one feature per branch bca4057d14 
- Each phase gets its own branch
- Branch from previous phase to inherit work
- Rebase onto main before creating PR
- Keeps history clean and reviews focused
clawd force-pushed feature/03-design-polish from bca4057d14 to 4e73d17fb3 2026-03-02 09:00:09 +01:00 Compare
clawd force-pushed feature/03-design-polish from 4e73d17fb3 to 362f4eed49 2026-03-02 09:07:15 +01:00 Compare
sphinxen merged commit 15d7aff096 into main 2026-03-02 09:08:10 +01:00
Sign in to join this conversation.
Reviewers
No Reviewers
Labels
No items
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
clawd
No Assignees
2 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: clawd/gravl#1
Delete Branch "feature/03-design-polish"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?