feat(mobile): workout session fullscreen + series testids — PRD-5#182
Conversation
- WorkoutSession mobile fullscreen overlay (fixed inset z-50 bg-background)
desktop inline (md:static md:bg-transparent)
- slide-up keyframe in globals.css utilities layer
motion-reduce:animate-none gates animation
- series row data-testid series-row, buttons serie-check-N + aria-label
touch-target (44px min) on check buttons for thumb reach
- sticky footer: backdrop-blur bg-background, timer + next/finish above URL bar
- E2E: div.grid-cols-4 selector swapped to getByTestId('serie-check-0')
- unit: Button mock filterDomProps passes data-* through, toggle test uses testid
Co-Authored-By: Claude <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
ECC bundle files are already tracked in this repository. Skipping generation of another bundle PR. |
Co-Authored-By: Claude <noreply@anthropic.com>
|
ECC bundle files are already tracked in this repository. Skipping generation of another bundle PR. |
|
Warning Review limit reached
Next review available in: 57 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (5)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
1 issue found across 1 file (changes from recent commits).
Prompt for AI agents (unresolved issues)
Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.
<file name="docs/CURRENT-STATE.md">
<violation number="1" location="docs/CURRENT-STATE.md:18">
P3: docs/CURRENT-STATE.md: duplicate `### PRD-4` heading. The new `merged #181` heading was added but the old `PR #181 (open)` heading was left in place. Remove the stale duplicate so the PRD-4 feature description lives under a single heading.</violation>
</file>
Reply with feedback, questions, or to request a fix.
Re-trigger cubic
|
|
||
| Unit `src/components/WorkoutSession.test.tsx`: Button mock `filterDomProps` passa `data-*`/`aria-*`/`className`. Toggle test sai de svg/`data-variant` filter frágil → `getByTestId('serie-check-0')`. 15/15 pass, 1133/1133 suite. | ||
|
|
||
| ### PRD-4 — Meus Treinos Kebab + Primary Action — merged #181 |
There was a problem hiding this comment.
P3: docs/CURRENT-STATE.md: duplicate ### PRD-4 heading. The new merged #181 heading was added but the old PR #181 (open) heading was left in place. Remove the stale duplicate so the PRD-4 feature description lives under a single heading.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At docs/CURRENT-STATE.md, line 18:
<comment>docs/CURRENT-STATE.md: duplicate `### PRD-4` heading. The new `merged #181` heading was added but the old `PR #181 (open)` heading was left in place. Remove the stale duplicate so the PRD-4 feature description lives under a single heading.</comment>
<file context>
@@ -2,8 +2,20 @@
+
+Unit `src/components/WorkoutSession.test.tsx`: Button mock `filterDomProps` passa `data-*`/`aria-*`/`className`. Toggle test sai de svg/`data-variant` filter frágil → `getByTestId('serie-check-0')`. 15/15 pass, 1133/1133 suite.
+
+### PRD-4 — Meus Treinos Kebab + Primary Action — merged #181
### PRD-4 — Meus Treinos Kebab + Primary Action — PR #181 (open)
</file context>
|
There was a problem hiding this comment.
1 issue found and verified against the latest diff
Prompt for AI agents (unresolved issues)
Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.
<file name="src/components/WorkoutSession.tsx">
<violation number="1" location="src/components/WorkoutSession.tsx:231">
P3: The slide-up animation plays on desktop too, which may cause visual overlap with adjacent page content during the 0.3s mount animation. Since the desktop layout is intended to be inline (`md:static`), consider adding `md:animate-none` to suppress the animation on desktop.</violation>
</file>
Reply with feedback, questions, or to request a fix.
Re-trigger cubic
| size="icon" | ||
| variant={serie.concluido ? 'default' : 'outline'} | ||
| onClick={() => handleSerieToggle(serie.id)} | ||
| <div className="fixed inset-x-0 top-0 z-50 flex h-dvh flex-col bg-background md:static md:z-auto md:h-auto md:bg-transparent animate-[slide-up_0.3s_ease-out] motion-reduce:animate-none"> |
There was a problem hiding this comment.
P3: The slide-up animation plays on desktop too, which may cause visual overlap with adjacent page content during the 0.3s mount animation. Since the desktop layout is intended to be inline (md:static), consider adding md:animate-none to suppress the animation on desktop.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At src/components/WorkoutSession.tsx, line 231:
<comment>The slide-up animation plays on desktop too, which may cause visual overlap with adjacent page content during the 0.3s mount animation. Since the desktop layout is intended to be inline (`md:static`), consider adding `md:animate-none` to suppress the animation on desktop.</comment>
<file context>
@@ -226,89 +226,98 @@ export function WorkoutSession({ treino, onFinish, onCancel }: Readonly<WorkoutS
- size="icon"
- variant={serie.concluido ? 'default' : 'outline'}
- onClick={() => handleSerieToggle(serie.id)}
+ <div className="fixed inset-x-0 top-0 z-50 flex h-dvh flex-col bg-background md:static md:z-auto md:h-auto md:bg-transparent animate-[slide-up_0.3s_ease-out] motion-reduce:animate-none">
+ <Card className="flex h-full w-full flex-col md:max-w-2xl md:mx-auto md:h-auto">
+ <CardHeader className="shrink-0">
</file context>
…#184) * fix(aluno): hint when finish button disabled by zero checks CardTreino footer ganha <p> condicional data-testid finish-hint quando completedCount === 0 e sem feedback loading. Sinaliza pre-condicao (marque exercicios) para o botao Finalizar e Avaliar Treino que parecia morto quando disabled. Test: stateful mock useWorkoutTracker para toggle. 15/15 card-treino, 1134/1134 suite. Co-Authored-By: Claude <noreply@anthropic.com> * fix(workout): clamp duracaoMinutos to min 1 for Zod schema HistoricoTreinoBaseSchema requires duracaoMinutos >= 1. Quick workouts (<30s) rounded to 0, failing save and surfacing "ocorreu um erro inesperado ao salvar no histórico" toast. Co-Authored-By: Claude <noreply@anthropic.com> * fix(aluno): address cubic P2 — aria-live, duration test, simpler mock - card-treino.tsx: finish-hint gains aria-live="polite" so AT announces reappearance when user unchecks last completed exercise. - WorkoutSession.test.tsx: new test asserting onFinish receives duracaoMinutos >= 1 even on sub-minute session (regression guard for the Math.max(1, ...) clamp). - card-treino.test.tsx: simplify "hides finish hint" test per cubic — set mockReturnValue directly to { 'ex-1': true } + rerender; drop mutable let, callback re-mock, fireEvent.click, silent no-op path. Co-Authored-By: Claude <noreply@anthropic.com> --------- Co-authored-by: Emiya Kiritsugu <emiyakiritsugu3@users.noreply.github.com> Co-authored-by: Claude <noreply@anthropic.com>



PRD-5 — Workout Session Mobile Fullscreen
Spec:
docs/superpowers/specs/2026-07-07-workout-session-fullscreen-design.mdChanges
src/components/WorkoutSession.tsx— mobile fullscreen overlay (fixed inset-x-0 top-0 z-50 h-dvh bg-background), desktop inline (md:static md:bg-transparent). Card flips to flex column, scrollableCardContent+ stickyCardFooterbackdrop-blur. Series rowdata-testid="series-row", buttonsdata-testid={serie-check-${idx}}+aria-label+.touch-target(44px).animate-[slide-up_0.3s_ease-out] motion-reduce:animate-none.src/app/globals.css—@keyframes slide-upadded to utilities layer.src/components/WorkoutSession.test.tsx— Button mockfilterDomPropspassesdata-*/aria-*/classNamethrough. Toggle test swaps fragile svg/data-variantfilter →getByTestId('serie-check-0').tests/e2e/specs/workout-session.spec.ts—div.grid-cols-4selector →getByTestId('serie-check-0')(2 occurrences).Success Criteria
md:static).getByTestId('serie-check-0')stable, nodiv.grid-cols-4selector..touch-target).sticky bottom-0 backdrop-blur).prefers-reduced-motion: slide-up disabled (motion-reduce:animate-none).Gates
npm run typecheck— 0 errorsnpm run lint— clean on touched files (1 pre-existingno-require-importswarning elsewhere untouched)npm test— 1133/1133 (15/15 WorkoutSession)npm run format:check— clean on touched files🤖 Generated with Claude Code
Summary by cubic
Implements PRD-5 by making the workout session fullscreen on mobile with a slide-up entry and sticky footer, while keeping desktop inline. Adds stable test IDs and larger touch targets to improve usability and test reliability.
New Features
@keyframes slide-upinglobals.css), disabled byprefers-reduced-motion.aria-labels; addeddata-testid="series-row"anddata-testid="serie-check-N".md:*classes.Refactors
getByTestId('serie-check-0')instead of brittle layout selectors.data-*andaria-*props to support reliable queries.docs/CURRENT-STATE.mdto reflect PRD-5 status and test ID changes.Written for commit 308b8f9. Summary will update on new commits.