Feat/onboarding and theme#86
Conversation
📝 WalkthroughWalkthroughThis PR adds an interactive onboarding experience for new admin users by introducing a guided walkthrough modal, dark/light theme toggle, improved empty states and copy, comprehensive styling, and documentation. The theme system bootstraps early with persistent localStorage state. The walkthrough modal syncs with tab navigation, supports keyboard controls, and remembers dismissal. Topbar gains theme and tour buttons. AuthScreen and FleetPanel improve their copy and empty states to guide new users. ChangesOnboarding and Theme Customization
Sequence Diagram(s)sequenceDiagram
participant User
participant main as main.tsx
participant ThemeToggle as ThemeToggle System
participant localStorage
participant DOM as document Element
participant App
participant Walkthrough as Walkthrough Modal
User->>main: Load admin UI
main->>ThemeToggle: initTheme()
ThemeToggle->>localStorage: read stored theme mode
ThemeToggle->>DOM: apply data-theme attribute
main->>App: render React app
App->>App: useEffect: if authed & not dismissed, tourOpen = true
App->>Walkthrough: render with open={tourOpen}
User->>Walkthrough: navigate steps via arrows/buttons
Walkthrough->>App: onTabChange to active step's target
User->>Walkthrough: press Escape or click Finish
Walkthrough->>App: onClose({ dontShowAgain: true })
App->>localStorage: walkthroughStorage.setDismissed(true)
App->>App: tourOpen = false, close Walkthrough
User->>App: click Topbar theme toggle
App->>DOM: apply new data-theme attribute
App->>localStorage: persist theme choice
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ESLint skipped: no ESLint configuration detected in root package.json. To enable, add Tip 💬 Introducing Slack Agent: The best way for teams to turn conversations into code.Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.
Built for teams:
One agent for your entire SDLC. Right inside Slack. 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (2)
apps/gateway/ui/src/components/Walkthrough.tsx (1)
124-175: ⚡ Quick winConsider using native
<dialog>element for consistency.The codebase uses native
<dialog>elements elsewhere (e.g., FleetPanel), but the walkthrough renders a custom div-based modal. Using<dialog>would provide built-in focus management, Escape key handling, and backdrop behavior, reducing manual event wiring while maintaining consistency with the rest of the codebase.♻️ Refactor to use native dialog
The refactor would involve replacing the backdrop div with a
<dialog>element, callingshowModal()/close()in auseEffect, and relying on the nativeonCloseevent instead of manual keyboard handling for Escape.🤖 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 `@apps/gateway/ui/src/components/Walkthrough.tsx` around lines 124 - 175, The Walkthrough component uses a custom div-based modal/backdrop; switch it to a native <dialog> to match other components (e.g., FleetPanel) so you can leverage built-in focus, Escape, and backdrop behavior. Replace the outer <div className="walkthrough__backdrop"> with a <dialog> element, add a ref and a useEffect that calls dialogRef.current.showModal() when mounted and dialogRef.current.close() when unmounting or onFinish, and wire the dialog's onClose to call the existing onClose({ dontShowAgain: true }) where appropriate; keep inner content, stepIdx state, setStepIdx, isLast logic and action button handlers (Back/Next/Finish) unchanged so functionality remains identical. Ensure aria-label, role/aria-modal attributes are moved or removed as appropriate and that the dialog has the same CSS classes for styling.apps/gateway/ui/src/styles.css (1)
7-76: 💤 Low valueAddress stylelint formatting violations.
Static analysis flagged several formatting issues: missing whitespace before comment closing (line 11), missing empty lines before declarations (lines 33, 54, 75), and incorrect font-name casing for
BlinkMacSystemFont(line 31). While these don't affect functionality, fixing them improves code consistency.🤖 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 `@apps/gateway/ui/src/styles.css` around lines 7 - 76, Fix stylelint formatting: add a space before the block comment closing in the file header comment (ensure "*/" is preceded by a space), add a single empty line before the declaration blocks for the `@media` rule's inner selector (html:not([data-theme]) within `@media`) and before the html[data-theme="dark"] rule so there is a blank line separating blocks, and normalize the font token value in --font to use the correct BlinkMacSystemFont casing (ensure "BlinkMacSystemFont" is spelled with the standard capitalization) inside the :root declaration.
🤖 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.
Nitpick comments:
In `@apps/gateway/ui/src/components/Walkthrough.tsx`:
- Around line 124-175: The Walkthrough component uses a custom div-based
modal/backdrop; switch it to a native <dialog> to match other components (e.g.,
FleetPanel) so you can leverage built-in focus, Escape, and backdrop behavior.
Replace the outer <div className="walkthrough__backdrop"> with a <dialog>
element, add a ref and a useEffect that calls dialogRef.current.showModal() when
mounted and dialogRef.current.close() when unmounting or onFinish, and wire the
dialog's onClose to call the existing onClose({ dontShowAgain: true }) where
appropriate; keep inner content, stepIdx state, setStepIdx, isLast logic and
action button handlers (Back/Next/Finish) unchanged so functionality remains
identical. Ensure aria-label, role/aria-modal attributes are moved or removed as
appropriate and that the dialog has the same CSS classes for styling.
In `@apps/gateway/ui/src/styles.css`:
- Around line 7-76: Fix stylelint formatting: add a space before the block
comment closing in the file header comment (ensure "*/" is preceded by a space),
add a single empty line before the declaration blocks for the `@media` rule's
inner selector (html:not([data-theme]) within `@media`) and before the
html[data-theme="dark"] rule so there is a blank line separating blocks, and
normalize the font token value in --font to use the correct BlinkMacSystemFont
casing (ensure "BlinkMacSystemFont" is spelled with the standard capitalization)
inside the :root declaration.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 43456387-3460-4223-907e-935500b29cfc
📒 Files selected for processing (9)
apps/gateway/ui/src/App.tsxapps/gateway/ui/src/components/AuthScreen.tsxapps/gateway/ui/src/components/FleetPanel.tsxapps/gateway/ui/src/components/ThemeToggle.tsxapps/gateway/ui/src/components/Topbar.tsxapps/gateway/ui/src/components/Walkthrough.tsxapps/gateway/ui/src/main.tsxapps/gateway/ui/src/styles.cssdocs/getting-started.md
1 participant
Summary by CodeRabbit
Release Notes
New Features
Style
Documentation