Skip to content

feat(mobile): workout session fullscreen + series testids — PRD-5#182

Merged
EmiyaKiritsugu3 merged 2 commits into
mainfrom
feat/workout-session-mobile
Jul 6, 2026
Merged

feat(mobile): workout session fullscreen + series testids — PRD-5#182
EmiyaKiritsugu3 merged 2 commits into
mainfrom
feat/workout-session-mobile

Conversation

@EmiyaKiritsugu3

@EmiyaKiritsugu3 EmiyaKiritsugu3 commented Jul 6, 2026

Copy link
Copy Markdown
Owner

PRD-5 — Workout Session Mobile Fullscreen

Spec: docs/superpowers/specs/2026-07-07-workout-session-fullscreen-design.md

Changes

  • 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, scrollable CardContent + sticky CardFooter backdrop-blur. Series row data-testid="series-row", buttons data-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-up added to utilities layer.
  • src/components/WorkoutSession.test.tsx — Button mock filterDomProps passes data-*/aria-*/className through. Toggle test swaps fragile svg/data-variant filter → getByTestId('serie-check-0').
  • tests/e2e/specs/workout-session.spec.tsdiv.grid-cols-4 selector → getByTestId('serie-check-0') (2 occurrences).

Success Criteria

  1. ✅ Mobile: session opens fullscreen, no header/bottom nav visible during workout.
  2. ✅ Desktop: session inline as before (md:static).
  3. ✅ E2E: getByTestId('serie-check-0') stable, no div.grid-cols-4 selector.
  4. ✅ Series buttons ≥44px touch target (.touch-target).
  5. ✅ Sticky footer with timer + next above URL bar on iOS (sticky bottom-0 backdrop-blur).
  6. prefers-reduced-motion: slide-up disabled (motion-reduce:animate-none).
  7. ✅ All 4 gates green (typecheck 0, lint clean on touched files, 1133/1133 vitest, format). E2E ran on staging.

Gates

  • npm run typecheck — 0 errors
  • npm run lint — clean on touched files (1 pre-existing no-require-imports warning 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

    • Mobile: fullscreen overlay with slide-up animation (@keyframes slide-up in globals.css), disabled by prefers-reduced-motion.
    • Sticky footer (timer + navigation) with backdrop-blur that stays above the iOS URL bar.
    • Series buttons now have 44px touch targets and aria-labels; added data-testid="series-row" and data-testid="serie-check-N".
    • Desktop layout remains inline via md:* classes.
  • Refactors

    • Tests now target getByTestId('serie-check-0') instead of brittle layout selectors.
    • Unit test button mock forwards data-* and aria-* props to support reliable queries.
    • Docs: updated docs/CURRENT-STATE.md to reflect PRD-5 status and test ID changes.

Written for commit 308b8f9. Summary will update on new commits.

Review in cubic

- 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>
@vercel

vercel Bot commented Jul 6, 2026

Copy link
Copy Markdown
Contributor

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
smartmanagementsystem Ready Ready Preview, Comment Jul 6, 2026 1:57pm

@ecc-tools

ecc-tools Bot commented Jul 6, 2026

Copy link
Copy Markdown
Contributor

ECC bundle files are already tracked in this repository. Skipping generation of another bundle PR.

Co-Authored-By: Claude <noreply@anthropic.com>
@ecc-tools

ecc-tools Bot commented Jul 6, 2026

Copy link
Copy Markdown
Contributor

ECC bundle files are already tracked in this repository. Skipping generation of another bundle PR.

@coderabbitai

coderabbitai Bot commented Jul 6, 2026

Copy link
Copy Markdown

Review Change Stack

Warning

Review limit reached

@EmiyaKiritsugu3, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 57 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

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 configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 748de987-705c-4383-a9b3-ecb8884df64e

📥 Commits

Reviewing files that changed from the base of the PR and between ecaf5bb and 308b8f9.

📒 Files selected for processing (5)
  • docs/CURRENT-STATE.md
  • src/app/globals.css
  • src/components/WorkoutSession.test.tsx
  • src/components/WorkoutSession.tsx
  • tests/e2e/specs/workout-session.spec.ts
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/workout-session-mobile

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@cubic-dev-ai cubic-dev-ai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Comment thread docs/CURRENT-STATE.md

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

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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>

@sonarqubecloud

sonarqubecloud Bot commented Jul 6, 2026

Copy link
Copy Markdown

@cubic-dev-ai cubic-dev-ai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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">

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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>

@EmiyaKiritsugu3 EmiyaKiritsugu3 merged commit 005f66e into main Jul 6, 2026
14 checks passed
@EmiyaKiritsugu3 EmiyaKiritsugu3 deleted the feat/workout-session-mobile branch July 6, 2026 15:53
EmiyaKiritsugu3 added a commit that referenced this pull request Jul 6, 2026
…#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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant