feat(mobile): bottom navigation bar for mobile (aluno + dashboard) — PRD-3#179
Conversation
…— PRD-3 - New src/components/bottom-nav.tsx: shared mobile-only BottomNav (md:hidden), 44pt touch-target, safe-area pb, reduced-motion-safe transitions, lucide iconName string union avoids ReactNode serialization across server/client - Wire BottomNav into aluno layout (2 items) + dashboard layout via DashboardBottomNav client wrapper (usePathname + getNavItems, role-filtered; dev item stays sidebar-only) - Extract getNavItems(role) from DashboardNav into reusable selector; sidebar + bottom bar share one source of role-filtered nav truth - Remove redundant md:hidden nav block from aluno UserMenu dropdown (primary nav now bottom bar); drop unused navLinks prop from UserMenu - pb-16/pb-20 on main content reserves space above fixed bottom bar - Tests: bottom-nav.test.tsx (6), updated aluno-header.test.tsx (drop removed prop); dashboard-nav.test.tsx unchanged (14 green) Refs: PRD-3 mobile-navigation-design, builds on PRD-1 foundation (#176) 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. |
|
Warning Review limit reached
Next review available in: 40 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 (11)
✨ 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 |
Co-Authored-By: Claude <noreply@anthropic.com>
|
ECC bundle files are already tracked in this repository. Skipping generation of another bundle PR. |
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
5 issues 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/app/dashboard/_components/dashboard-bottom-nav.tsx">
<violation number="1" location="src/app/dashboard/_components/dashboard-bottom-nav.tsx:7">
P3: The dev route string `/dashboard/dev` is duplicated here and in the `DEV_ITEM` definition inside `dashboard-nav.tsx`. If someone changes one without the other, the filter silently stops excluding the dev item from the bottom bar. Consider exporting a shared constant (e.g. `DEV_HREF`) from `dashboard-nav.tsx` and reusing it here.</violation>
<violation number="2" location="src/app/dashboard/_components/dashboard-bottom-nav.tsx:12">
P2: Custom agent: **Enforce Pragmatic Test Coverage**
The new `DashboardBottomNav` wrapper implements a specific user-visible business rule (excluding the `/dashboard/dev` route from the mobile bottom nav), yet it has no test coverage. While the shared `BottomNav` component is tested, this dashboard-specific behavior — including role-based filtering via `getNavItems` and the `DEV_HREF` exclusion — could break silently if the nav item structure changes or the filter is accidentally removed. Consider adding tests that mount `DashboardBottomNav` and assert the returned items contain the expected routes for each role while omitting the dev route.</violation>
</file>
<file name="src/app/dashboard/layout.tsx">
<violation number="1" location="src/app/dashboard/layout.tsx:123">
P3: Minor: `DashboardBottomNav` is rendered inside `<SidebarInset>`, which is a `<main>` element. This places the primary page navigation landmark inside the main content region. The aluno layout keeps its `BottomNav` outside `<main>` — moving this one out of `SidebarInset` aligns both portals and avoids nesting a nav landmark inside main. Since the nav is `fixed`, the DOM move won't affect visuals.</violation>
</file>
<file name="src/components/dashboard-nav.tsx">
<violation number="1" location="src/components/dashboard-nav.tsx:68">
P3: The `DashboardNavItem` type alias is exported but never consumed anywhere in the codebase. Since `NavItemDef` is already exported directly and used by all callers, this re-export adds no value and creates a stale symbol that future maintainers might think is used. Consider removing the `export type DashboardNavItem = NavItemDef;` line to keep the public API surface minimal and avoid confusion.</violation>
</file>
<file name="src/components/bottom-nav.tsx">
<violation number="1" location="src/components/bottom-nav.tsx:32">
P2: Custom agent: **Enforce Strict Maintainability Standards**
The `isActive` matching logic is duplicated from `dashboard-nav.tsx` (the PR comment even notes it "mirrors dashboard-nav isActive"). While `getNavItems` was extracted as a shared helper, `isActive` was not. Extracting this as a single parameterized pure function would remove the duplication and ensure navigation matching behavior stays consistent across components.</violation>
</file>
Reply with feedback, questions, or to request a fix.
Re-trigger cubic
There was a problem hiding this comment.
1 issue found across 1 file (changes from recent commits).
Reply with feedback, questions, or to request a fix.
Re-trigger cubic
- Extract isNavActive() pure fn to bottom-nav.tsx, reuse in DashboardNav (P2: was duplicated isActive logic) - Export DEV_HREF from dashboard-nav, import in DashboardBottomNav wrapper (P3: dev route string duplicated) - Move DashboardBottomNav out of SidebarInset (<main>) into parent div (P3: nav landmark nested inside main — aluno layout already kept nav outside main) - Remove dead DashboardNavItem type alias (P3: exported never consumed) - Add dashboard-bottom-nav.test.tsx: 4 tests asserting role filtering (GERENTE 5 items, FINANCIAL_ROUTES excludes Financeiro+Planos for INSTRUTOR), DEV_HREF exclusion, bottom-nav-limit ≤5 (P2: no test coverage) - Add FolderKanban to dashboard-nav.test.tsx lucide mock (now imported via bottom-nav real module chain) Gates: typecheck ✅, lint ✅, 1129/1129 tests ✅. Co-Authored-By: Claude <noreply@anthropic.com>
|
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. |
|
1 participant
What
Mobile bottom navigation bar across both portals. Replaces dropdown-hidden primary nav (aluno) and drawer-buried destinations (dashboard) with a fixed mobile-only
BottomNav.Builds on PRD-1 mobile-first foundation (#176): uses
.touch-target(44pt),pb-[env(safe-area-inset-bottom)], reduced-motion-safetransition-colors.Changes
src/components/bottom-nav.tsxNavIconNamestring union avoids ReactNode serialization across server/client boundary.md:hidden— desktop unchanged.src/app/dashboard/_components/dashboard-bottom-nav.tsxusePathname+getNavItems). Dev item filtered out — stays sidebar Sheet-only.src/components/dashboard-nav.tsxgetNavItems(role)— single source of role-filtered nav truth shared by sidebar + bottom bar.DashboardNav/DashboardNavBottomsignatures unchanged.src/app/aluno/layout.tsxBottomNav(2 items),pb-16 md:pb-0on main.src/app/dashboard/layout.tsxDashboardBottomNavafter main,pb-20 md:pb-8on main.src/app/aluno/aluno-header.tsxmd:hiddennav block fromUserMenudropdown (primary nav now bottom bar); drop unusednavLinksprop.src/components/bottom-nav.test.tsxsrc/app/aluno/aluno-header.test.tsxnavLinks={[]}prop from UserMenu tests.Behavior
layout-dashboard), Meus Treinos (folder-kanban). Active highlightedtext-primary border-t-2 border-primary+aria-current=page.md:hidden).pb-[env(safe-area-inset-bottom)]clears iPhone home indicator (PRD-1viewportFit: cover).Gates
npm run typecheck✅ cleannpm run lint✅ changed files clean (pre-existing baseline errors in commitlint/coverage artifacts untouched)prettier --check✅npm test✅ 1125/1125 passing (109 files; +6 bottom-nav tests)Spec
docs/superpowers/specs/2026-07-07-mobile-navigation-design.md(PRD-3). Constitution v1.0.2 — Dual-Portal (sharedsrc/components/), Type Safety (typed props + union), Test-Gated.Out of scope (post-MVP per spec)
🤖 Generated with Claude Code
Summary by cubic
Add a mobile-only bottom navigation bar to both
alunoanddashboard, replacing hidden/dropdown nav on small screens while keeping desktop unchanged. Implements PRD-3 by making primary actions clear and reachable on mobile and addressing review feedback on active state and landmarks.New Features
BottomNavwith 44pt touch targets, safe-area padding, reduced-motion transitions, andmd:hidden.aluno(2 items: Dashboard, Meus Treinos) anddashboardviaDashboardBottomNav; active state uses root exact-match and subpath prefix;aria-current=page.dashboard: GERENTE (5), INSTRUTOR/RECEPCIONISTA (3); dev link excluded from bottom bar and stays in the sidebar.pb-16/pb-20) to clear the fixed bar.Refactors
getNavItems(role)andisNavActive(); reuse indashboard-navto unify filtering and active logic.DEV_HREFand used it inDashboardBottomNav; movedDashboardBottomNavoutside<main>to avoid landmark nesting.AlunoHeaderdropdown and dropped thenavLinksprop.bottom-nav(6) anddashboard-bottom-nav(4); updatedaluno-header. Updateddocs/CURRENT-STATE.mdfor PRD-3 and corrected the test count to 1129.Written for commit 0c65bf4. Summary will update on new commits.