feat: replace left nav rail with draggable floating nav fab - #101
Conversation
Transform the shell navigation from a fixed left-edge rail into a bottom-left floating action button that expands to show tab options and can be dragged anywhere on screen for faster repositioning. Co-authored-by: Youri Bontekoe <YKDBontekoe@users.noreply.github.com>
Use immediate drag start behavior and opaque hit testing so the floating nav can be repositioned reliably with mouse and touch. Co-authored-by: Youri Bontekoe <YKDBontekoe@users.noreply.github.com>
|
Warning Review limit reached
Next review available in: 49 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: Repository UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
📝 WalkthroughWalkthroughThe app shell replaces its left navigation rail with a draggable floating navigation control. Layout tokens now share a floating-nav size, coach settings open an inference settings sheet, and app-settings actions are removed from dashboard and page-header controls. ChangesFloating navigation and settings flow
Estimated code review effort: 4 (Complex) | ~45 minutes Sequence Diagram(s)sequenceDiagram
participant User
participant KynosFloatingNav
participant ShellPage
participant NavigationShell
User->>KynosFloatingNav: Select a tab
KynosFloatingNav->>ShellPage: Call onSelected(index)
ShellPage->>NavigationShell: Call goBranch(index)
NavigationShell->>ShellPage: Update active branch
Possibly related PRs
Suggested labels: Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
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 |
Add Settings as an expandable action on the draggable floating nav and remove duplicate settings buttons from page headers and the coach menu. Co-authored-by: Youri Bontekoe <YKDBontekoe@users.noreply.github.com>
Co-authored-by: Youri Bontekoe <YKDBontekoe@users.noreply.github.com>
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (2)
lib/shared/widgets/kynos_floating_nav.dart (2)
50-52: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winDuplicated magic number instead of the shared layout token.
_fabSize = 52duplicatesLayoutTokens.shellFloatingNavSizeintroduced inlib/core/theme/layout.dart, whose doc comment explicitly calls it out as the diameter for "the draggable shell floating navigation button." Referencing the token here avoids the two values silently drifting apart later.♻️ Proposed fix referencing the shared token
- static const double _fabSize = 52; + static const double _fabSize = LayoutTokens.shellFloatingNavSize;🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@lib/shared/widgets/kynos_floating_nav.dart` around lines 50 - 52, Update the _fabSize constant in the floating navigation widget to reference LayoutTokens.shellFloatingNavSize instead of duplicating the literal 52. Keep _itemSize and _dragThreshold unchanged.
1-477: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚖️ Poor tradeoffFile exceeds the ~250-line guideline for hand-written Dart files.
At roughly 476 lines this is nearly double the limit. Consider extracting
_FloatingNavControl,_NavOption, and_NavActionOptionintopresentation/widgets/as their own files.As per coding guidelines, "Keep hand-written files under about 250 lines; split larger UI code into
presentation/widgets/."🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@lib/shared/widgets/kynos_floating_nav.dart` around lines 1 - 477, Split the oversized Kynos floating navigation implementation into focused files under presentation/widgets/. Move _FloatingNavControl, _NavOption, and _NavActionOption into separate widget files, preserving their existing APIs and behavior; leave KynosFloatingNav and its state in the primary file and update imports/references as needed.Source: Coding guidelines
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@lib/shared/widgets/kynos_floating_nav.dart`:
- Around line 323-357: Add accessible semantics and a tooltip to the primary FAB
GestureDetector that invokes onFabTap, using a clear label describing the
navigation expand/collapse action. Preserve the existing visual structure and
tap behavior, adjusting only the surrounding wrappers and closing brackets as
needed.
- Around line 157-178: Update _clampPosition to use math.max when calculating
maxLeft and maxBottom so each clamp range remains valid on small layouts. In the
selected-item access, handle an empty items collection before applying
selectedIndex.clamp or indexing, while preserving the existing selection
behavior for non-empty items.
- Around line 309-317: Update the separator logic in the widget’s
actions-rendering loop to track whether any menu element has already been
rendered, inserting a Gap before every subsequent item or action regardless of
whether items is empty. Keep the first rendered element gap-free and align the
rendered separator count with the _stackHeight calculation.
---
Nitpick comments:
In `@lib/shared/widgets/kynos_floating_nav.dart`:
- Around line 50-52: Update the _fabSize constant in the floating navigation
widget to reference LayoutTokens.shellFloatingNavSize instead of duplicating the
literal 52. Keep _itemSize and _dragThreshold unchanged.
- Around line 1-477: Split the oversized Kynos floating navigation
implementation into focused files under presentation/widgets/. Move
_FloatingNavControl, _NavOption, and _NavActionOption into separate widget
files, preserving their existing APIs and behavior; leave KynosFloatingNav and
its state in the primary file and update imports/references as needed.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 91b182ae-c44c-46df-bab5-2fc407012299
📒 Files selected for processing (11)
CODEMAP.mdlib/app/shell_page.dartlib/core/theme/layout.dartlib/features/coach_chat/presentation/widgets/coach_chat_app_bar.dartlib/features/dashboard/presentation/widgets/dashboard_header_sliver.dartlib/shared/widgets/kynos_floating_nav.dartlib/shared/widgets/kynos_nav_rail.dartlib/shared/widgets/kynos_page_header.dartlib/shared/widgets/widgets.darttest/shared/widgets/kynos_floating_nav_test.darttest/shared/widgets/kynos_nav_rail_test.dart
💤 Files with no reviewable changes (3)
- lib/shared/widgets/kynos_nav_rail.dart
- test/shared/widgets/kynos_nav_rail_test.dart
- lib/features/coach_chat/presentation/widgets/coach_chat_app_bar.dart
Harden clamp bounds on small layouts, fix action separator gaps, add FAB semantics label, and guard empty tab item lists. Co-authored-by: Youri Bontekoe <YKDBontekoe@users.noreply.github.com>
2 participants
Summary
Replaces the fixed left-edge navigation rail with a draggable floating action button anchored to the bottom-left by default. Tapping the FAB expands a liquid-glass menu with Coach, Health, and Journey destinations; dragging repositions the control anywhere on screen for faster access.
Changes
KynosFloatingNav— expandable, draggable floating shell navigationShellPageto overlay the FAB on full-width tab content (no left rail inset)KynosNavRailwidget and testsVisual proof
Collapsed floating nav on coach tab
Expanded navigation options
Floating nav after drag reposition
Checklist
flutter analyze— zero issuesflutter test— zero failuresdart run tool/generate_codemap.dart— CODEMAP.md updatedbash scripts/check_design_system.sh— passesbash scripts/check_architecture.sh— passesflutter build web— succeedsAgent notes
Cloud agent run monitoring review feedback.
To show artifacts inline, enable in settings.
Summary by CodeRabbit
New Features
Updates
Tests