[pruthvi-builds]

Summary

At the end of a workout, users can now generate and share a social-friendly summary image straight from the session-complete screen, next to the existing "Go to my profile" button.

Why

Closes #54. Boosts motivation and gives users something worth posting after a workout, per the issue.

How

• ShareWorkoutCard: the visual card — date, muscle groups worked (reusing the existing getAttributeValueLabel translation helper), number of exercises completed, and workout.cool branding (the same logo used in the header). Rendered at a fixed 600×750 size for a clean social-ratio export.
• ShareWorkoutButton: renders the card off-screen (position: fixed; left: -9999px, not display: none, so it stays measurable/paintable), captures it as a PNG via html-to-image's toBlob (2x pixel ratio for crisp output), then:
  • Uses the native Web Share API (navigator.share with a File) when supported — this is the primary path on mobile, per the issue's "mobile focus."
  • Falls back to a plain client-side download otherwise.
• Wired into WorkoutSessionSets' congrats screen, reusing data already present in the session store (session.muscles, session.exercises, session.startedAt) — no backend or schema changes needed.
• Added html-to-image as a new dependency (as suggested in the issue itself). Nothing else added.

Card design: a blue-to-emerald gradient, the workout.cool logo + wordmark top-left, a trophy emoji, "Workout Complete!" heading, the formatted date, muscle-group pill badges (consistent semi-transparent white, chosen after an earlier per-muscle-tinted version had contrast issues against parts of the gradient), an exercises-completed stat pill with a dumbbell icon, and a "workout.cool — Free & Open Source" footer.

On translations: I added the new UI strings to locales/en.ts only. I'm not confident enough in Spanish/French/Portuguese/Russian/Chinese to add accurate translations myself, and didn't want to introduce low-quality machine-translated copy — the app falls back to English for missing keys (verified this is already the case elsewhere in the codebase, e.g. en.ts and fr.ts don't have identical key sets today). Happy to add translations if you'd rather have them from day one, or leave it for a translation-focused follow-up.

Testing

• pnpm exec tsc --noEmit — clean.
• pnpm exec eslint on the changed files — clean.
• pnpm exec vitest run — all 28 existing tests still pass (no relevant unit-testable pure logic was introduced here — the existing test suite is small and focused on pure calculation/formatting functions elsewhere in the app, which this feature doesn't have; happy to add tests if you'd like a specific approach).
• pnpm run build — full production build succeeds.
• I don't have Docker/a local Postgres available in this environment, so I wasn't able to run the app end-to-end or pnpm test:e2e to click through the actual share/download flow. I visually verified the card's design (colors, contrast, layout at the target 600×750 size) by rendering the exact markup standalone before wiring it in, but I can't attach that image here from my current setup. Would appreciate a maintainer double-checking the live share/download behavior, especially the navigator.share path on an actual mobile device — happy to iterate on the design based on what it actually looks like running.

Related Issue

Closes #54

[vercel]

@pruthvi-builds is attempting to deploy a commit to the Workoutcool Team Team on Vercel.

A member of the Team first needs to authorize it.