improvement: navbar logo animation on scroll and adjust download button #1018
Conversation
|
Caution Review failedThe pull request is closed. WalkthroughAdds scroll-driven logo resizing to the site Navbar via local state and a scroll listener, updates the shared Logo component to accept viewBox and style props, and changes several button variants to "dark" while adding platform-detection and an icon to ReadyToGetStarted. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant Window as Window (scroll)
participant Navbar as Site Navbar
participant Logo as Logo (UI)
User->>Window: scroll
Window-->>Navbar: scroll event (window.scrollY)
Note over Navbar: set hideLogoName = (scrollY > 10)
Navbar->>Logo: render(props: { hideLogoName, viewBoxDimensions })
Note over Logo: uses provided viewBoxDimensions or default
Logo-->>Navbar: SVG markup (size/viewBox adjusted)
Navbar-->>User: updated navbar render
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (2)
Tip 👮 Agentic pre-merge checks are now available in preview!Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.
Please see the documentation for more information. Example: reviews:
pre_merge_checks:
custom_checks:
- name: "Undocumented Breaking Changes"
mode: "warning"
instructions: |
Pass/fail criteria: All breaking changes to public APIs, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints must be documented in the "Breaking Change" section of the PR description and in CHANGELOG.md. Exclude purely internal or private changes (e.g., code not exported from package entry points or explicitly marked as internal).Please share your feedback with us on this Discord post. 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: 3
🧹 Nitpick comments (5)
apps/web/components/pages/HomePage/RecordingModes.tsx (1)
153-161: Unify Windows download URL handling (avoid divergence from util).You special‑case Windows to "/download" while other platforms use
getDownloadUrl(). If the intent isn’t deliberate, prefer a single source of truth to prevent drift.Apply this diff if unification is desired:
- href={ - platform === "windows" - ? "/download" - : getDownloadUrl(platform, isIntel) - } + href={getDownloadUrl(platform, isIntel)}apps/web/components/ReadyToGetStarted.tsx (1)
31-38: Pricing CTA shows platform icon — confirm UX intent and add a11y.An OS icon beside “Pricing” may confuse users (icon implies a download). If intentional, OK; otherwise consider showing it on a download CTA instead. Also, mark decorative icons
aria-hidden.Two options:
- Keep icon here but hide from AT:
- {!loading && getPlatformIcon(platform)} + {!loading && <span aria-hidden="true">{getPlatformIcon(platform)}</span>}
- Or move the icon to a download button where applicable.
packages/ui/src/components/icons/Logo.tsx (1)
21-26: Prefer Tailwind sizing over inline styles where possible.Guideline says Tailwind‑only styling in shared UI. Consider exposing size variants (e.g.,
compact/default) or allow width via className, reservingstyleonly for edge cases.Would you like a follow‑up PR to add
sizeprops and Tailwind classes to replace moststyleuse?apps/web/app/(site)/Navbar.tsx (2)
121-129: Avoid sub‑pixel SVG width and prefer Tailwind sizing.
45.5can render blurry on some displays. Round to45. Also, consider toggling Tailwind width classes instead of inlinestyleif you makestyleoptional on Logo.<Logo hideLogoName={hideLogoName} className="transition-all duration-[0.2s] ease-out" viewBoxDimensions={hideLogoName ? "0 0 60 40" : "0 0 120 40"} style={{ - width: hideLogoName ? 45.5 : 90, + width: hideLogoName ? 45 : 90, height: 40, }} />
121-121: Remove unnecessarypassHref.With Next.js
Link,passHrefis unnecessary unless usinglegacyBehavior.- <Link passHref href="/home"> + <Link href="/home">
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
apps/web/app/(site)/Navbar.tsx(2 hunks)apps/web/components/ReadyToGetStarted.tsx(2 hunks)apps/web/components/pages/HomePage/RecordingModes.tsx(1 hunks)packages/ui/src/components/icons/Logo.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/components/ReadyToGetStarted.tsxapps/web/components/pages/HomePage/RecordingModes.tsxapps/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/components/ReadyToGetStarted.tsxapps/web/components/pages/HomePage/RecordingModes.tsxapps/web/app/(site)/Navbar.tsxpackages/ui/src/components/icons/Logo.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/components/ReadyToGetStarted.tsxapps/web/components/pages/HomePage/RecordingModes.tsxapps/web/app/(site)/Navbar.tsxpackages/ui/src/components/icons/Logo.tsx
**/*.{tsx,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
React/Solid components should be named using PascalCase
Files:
apps/web/components/ReadyToGetStarted.tsxapps/web/components/pages/HomePage/RecordingModes.tsxapps/web/app/(site)/Navbar.tsxpackages/ui/src/components/icons/Logo.tsx
🧬 Code graph analysis (3)
apps/web/components/ReadyToGetStarted.tsx (2)
apps/web/hooks/useDetectPlatform.ts (1)
useDetectPlatform(8-111)apps/web/utils/platform.tsx (1)
getPlatformIcon(33-49)
apps/web/components/pages/HomePage/RecordingModes.tsx (1)
apps/web/utils/platform.tsx (1)
getDownloadUrl(3-15)
apps/web/app/(site)/Navbar.tsx (1)
packages/ui/src/components/icons/Logo.tsx (1)
Logo(1-86)
⏰ 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 (x86_64-pc-windows-msvc, windows-latest)
- GitHub Check: Build Desktop (aarch64-apple-darwin, macos-latest)
- GitHub Check: Analyze (rust)
🔇 Additional comments (2)
apps/web/components/pages/HomePage/RecordingModes.tsx (1)
153-154: LGTM on variant and class adjustments.The switch to
variant="dark"and class reordering looks consistent with the rest of the PR.Also applies to: 160-161
apps/web/components/ReadyToGetStarted.tsx (1)
11-13: Platform detection/load state wiring looks good.Please confirm SSR is not involved here; this component is client‑only and safe to call
useDetectPlatform().
Summary by CodeRabbit
New Features
Style