feat: reorganize dropdown menu footer for better UX - Move Toggle The…#2010
Conversation
…me, Help, Logout, and Privacy/Terms to footer section - Address issue Mail-0#1998
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. Important Review skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the WalkthroughReorganized NavUser menu items: removed theme toggle, support, logout, and privacy/terms from the collapsed dropdown; added them to the expanded dropdown under a new section with a separator. Implemented theme toggle icon logic and added links for Discord support, logout action, and privacy/terms. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant NavUser as NavUser Dropdown
participant Theme as Theme Manager
participant Router as Router/Links
participant Auth as Auth Handler
rect rgb(240,245,250)
note over User,NavUser: Collapsed menu
User->>NavUser: Open collapsed dropdown
NavUser-->>User: Show basic items (no theme/support/logout)
end
rect rgb(238,250,240)
note over User,NavUser: Expanded menu
User->>NavUser: Open expanded dropdown
NavUser-->>User: Show items incl. Theme, Support, Logout, Privacy/Terms
alt Toggle theme
User->>NavUser: Click Theme Toggle
NavUser->>Theme: handleThemeToggle()
Theme-->>NavUser: New theme state
NavUser-->>User: Update icon (Sun/Moon)
end
alt Open support
User->>Router: Navigate to https://discord.gg/mail0
end
alt Logout
User->>NavUser: Click Logout
NavUser->>Auth: handleLogout()
Auth-->>User: Session cleared / redirect
end
end
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
✨ Finishing Touches🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
apps/mail/components/ui/nav-user.tsx(2 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{css,js,ts,jsx,tsx,mdx}
📄 CodeRabbit inference engine (.cursor/rules/tailwind-css-v4.mdc)
**/*.{css,js,ts,jsx,tsx,mdx}: Chain variants together for composable variants (e.g.,group-has-data-potato:opacity-100).
Use new variants such asstarting,not-*,inert,nth-*,in-*,open(for:popover-open), and**for all descendants.
Do not use deprecated utilities likebg-opacity-*,text-opacity-*,border-opacity-*, anddivide-opacity-*; use the new syntax (e.g.,bg-black/50).
Use renamed utilities:shadow-smis nowshadow-xs,shadowis nowshadow-sm,drop-shadow-smis nowdrop-shadow-xs,drop-shadowis nowdrop-shadow-sm,blur-smis nowblur-xs,bluris nowblur-sm,rounded-smis nowrounded-xs,roundedis nowrounded-sm,outline-noneis nowoutline-hidden.
Usebg-(--brand-color)syntax for CSS variables in arbitrary values instead ofbg-[--brand-color].
Stacked variants now apply left-to-right instead of right-to-left.
Files:
apps/mail/components/ui/nav-user.tsx
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (AGENT.md)
**/*.{js,jsx,ts,tsx}: Use 2-space indentation
Use single quotes
Limit lines to 100 characters
Semicolons are required
Files:
apps/mail/components/ui/nav-user.tsx
**/*.{js,jsx,ts,tsx,css}
📄 CodeRabbit inference engine (AGENT.md)
Use Prettier with sort-imports and Tailwind plugins
Files:
apps/mail/components/ui/nav-user.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENT.md)
Enable TypeScript strict mode
Files:
apps/mail/components/ui/nav-user.tsx
🧬 Code graph analysis (1)
apps/mail/components/ui/nav-user.tsx (1)
apps/mail/components/ui/dropdown-menu.tsx (2)
DropdownMenuSeparator(176-176)DropdownMenuItem(172-172)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: cubic · AI code reviewer
🔇 Additional comments (1)
apps/mail/components/ui/nav-user.tsx (1)
335-335: Good move. Footer placement reads better.Separator + grouping are in the right spot in both menus. Nice UX upgrade.
Also applies to: 586-586
|
please got through the coderabbit recommendations |
…elect instead of onClick for better accessibility - Use resolvedTheme for more accurate theme detection - Add asChild prop for proper link handling - Improve security with noopener noreferrer
Done sir! @ahmetskilinc |
2 participants
Theme, Help, Logout, and Privacy/Terms to footer section - Address issue #1998
Description
Please provide a clear description of your changes.
Type of Change
Areas Affected
Testing Done
Checklist
Screenshots/Recordings
Add screenshots or recordings here if applicable.
2025-08-28.17-56-38.mp4
By submitting this pull request, I confirm that my contribution is made under the terms of the project's license.
Summary by cubic
Reorganized the user dropdown to move Theme toggle, Help, Logout, and Privacy/Terms into a footer section for clearer hierarchy and consistency. Aligns with issue #1998 by making the dark/light mode toggle easier to find without cluttering primary actions.
Summary by CodeRabbit