chore: make login a button instead #1013
Conversation
|
Caution Review failedThe pull request is closed. WalkthroughMoved the unauthenticated “Log In” nav item out of the main navigation into the header’s right-side Suspense block as a small gray button; added an UpgradeToPro CTA with Rive hover animations and made ProArt accept a className prop. Several HomePage CTA buttons were replaced with the new UpgradeToPro component and MobileMenu/ReadyToGetStarted adjusted styling and auth action layout. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Navbar
participant AuthState as Auth State
participant HeaderRight as Header Right (Suspense)
User->>Navbar: Request page
Navbar->>AuthState: Read auth state
alt Authenticated
Navbar->>HeaderRight: Render LoginOrDashboard → Dashboard
Navbar-->>User: Show main nav + dashboard entry
else Not authenticated
Navbar->>HeaderRight: Render LoginOrDashboard → Sign Up
HeaderRight->>User: Render gray Login button (/login, sm)
Navbar-->>User: Show main nav + Sign Up + Login
end
sequenceDiagram
participant User
participant UpgradeToPro
participant RiveEngine as Rive instance
participant Router
User->>UpgradeToPro: Hover enter (mouseEnter)
UpgradeToPro->>RiveEngine: stop() then play("items-coming-out")
User->>UpgradeToPro: Hover leave (mouseLeave)
UpgradeToPro->>RiveEngine: stop() then play("items-coming-in")
User->>UpgradeToPro: Click
UpgradeToPro->>Router: navigate to /pricing
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (6)
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.
Actionable comments posted: 0
🧹 Nitpick comments (5)
apps/web/app/(site)/Navbar.tsx (5)
172-181: Login CTA addition: looks goodMeets the PR goal and fits the header layout.
Copy nit: consider “Log in” (verb) to match “Sign up” style.
96-101: Avoid double suspense/fetch for auth; compute once and pass downNavbar already calls
use(useAuthContext().user);LoginOrDashboardcalls it again, causing extra suspense/flicker. Compute a boolean here and pass it to the child.export const Navbar = () => { const pathname = usePathname(); const [showMobileMenu, setShowMobileMenu] = useState(false); const auth = use(useAuthContext().user); + const isAuthed = Boolean(auth); return (
182-183: Pass auth state to child to remove nesteduse()Prevents a second suspend and avoids duplicate user reads.
- <LoginOrDashboard /> + <LoginOrDashboard isAuthed={isAuthed} />
230-243: MakeLoginOrDashboarda pure component driven by propsRemoves the nested
use()and aligns with strict TS prop-driven components.-function LoginOrDashboard() { - const auth = use(useAuthContext().user); +type LoginOrDashboardProps = { isAuthed: boolean }; +function LoginOrDashboard({ isAuthed }: LoginOrDashboardProps) { return ( <Button variant="dark" - href={auth ? "/dashboard" : "/signup"} + href={isAuthed ? "/dashboard" : "/signup"} size="sm" className="w-full font-medium sm:w-auto" > - {auth ? "Dashboard" : "Sign Up"} + {isAuthed ? "Dashboard" : "Sign Up"} </Button> ); }
1-1: Filename styleRepo guideline prefers kebab-case for TS/TSX filenames. Consider renaming
Navbar.tsx→navbar.tsxin a follow-up to avoid churn in this PR.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/web/app/(site)/Navbar.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
apps/web/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
apps/web/**/*.{ts,tsx}: Use TanStack Query v5 for client-side server state and data fetching in the web app
Mutations should call Server Actions and perform precise cache updates with setQueryData/setQueriesData, avoiding broad invalidations
Prefer Server Components for initial data and pass initialData to client components for React Query hydration
Files:
apps/web/app/(site)/Navbar.tsx
{apps/web,packages/ui}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
{apps/web,packages/ui}/**/*.{ts,tsx}: Use Tailwind CSS exclusively for styling in the web app and shared React UI components
Component naming: React components in PascalCase; hooks in camelCase starting with 'use'
Files:
apps/web/app/(site)/Navbar.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Use strict TypeScript and avoid any; prefer shared types from packages
**/*.{ts,tsx}: Use Biome to format/lint TypeScript with a 2-space indent
TypeScript file names should be kebab-case (e.g., user-menu.tsx)
Files:
apps/web/app/(site)/Navbar.tsx
**/*.{tsx,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
React/Solid components should be named using PascalCase
Files:
apps/web/app/(site)/Navbar.tsx
⏰ 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). (3)
- GitHub Check: Build Desktop (aarch64-apple-darwin, macos-latest)
- GitHub Check: Build Desktop (x86_64-pc-windows-msvc, windows-latest)
- GitHub Check: Analyze (rust)
🔇 Additional comments (1)
apps/web/app/(site)/Navbar.tsx (1)
223-226: Mobile parity: Login present in MobileMenuMobileMenu exposes a Login button linking to /login for unauthenticated users — apps/web/components/ui/MobileMenu.tsx lines 95–102.
Summary by CodeRabbit
New Features
Style
UI