feat/add-prefix-icons-and-mobile-sidebar#1959
Conversation
📝 WalkthroughWalkthroughThis PR adds mobile-responsive UI to the changelog view with a drawer-based sidebar navigation for small screens, and extends the MockWindow component with an optional Changes
Sequence DiagramsequenceDiagram
participant User
participant Mobile as Mobile UI Layer
participant Drawer as MobileSidebarDrawer
participant Sidebar as ChangelogSidebar
participant Content as ChangelogContent
User->>Mobile: Load changelog (mobile viewport)
activate Mobile
Mobile->>Mobile: useIsMobile detects mobile
Mobile->>Drawer: Render drawer (closed, hidden)
Mobile->>Sidebar: Render menu button
deactivate Mobile
User->>Sidebar: Click menu button
activate Sidebar
Sidebar->>Mobile: Toggle drawerOpen state
Mobile->>Drawer: Render with AnimatePresence
Drawer->>Drawer: Overlay & panel slide in
deactivate Sidebar
User->>Sidebar: Click version link in drawer
activate Sidebar
Sidebar->>Sidebar: Invoke onNavigate callback
Mobile->>Mobile: Close drawer (drawerOpen = false)
Drawer->>Drawer: Animate panel slide out
Content->>User: Display selected changelog
deactivate Sidebar
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
Suggested reviewers
Pre-merge checks and finishing touches❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
✅ Deploy Preview for hyprnote ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for hyprnote-storybook ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
![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 (1)
apps/web/src/routes/_view/changelog/$slug.tsx (1)
274-274: Consider extracting the header height to avoid magic numbers.The
49pxvalue is derived from the header's padding and content height. If the header styling changes, this calculation could break silently.+const DRAWER_HEADER_HEIGHT = 49; // px-4 py-3 + content + function MobileSidebarDrawer({ // ... }) { return ( <AnimatePresence> {open && ( <> {/* ... */} <motion.div className="..."> <div className="flex items-center justify-between px-4 py-3 ..."> {/* header content */} </div> - <div className="h-[calc(100%-49px)] overflow-hidden"> + <div className={`h-[calc(100%-${DRAWER_HEADER_HEIGHT}px)] overflow-hidden`}> <ChangelogSidebar ... /> </div> </motion.div> </> )} </AnimatePresence> ); }Alternatively, use
flex-1with a flex column layout to avoid the calculation entirely.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/web/src/components/mock-window.tsx(2 hunks)apps/web/src/routes/_view/changelog/$slug.tsx(7 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx}: Avoid creating a bunch of types/interfaces if they are not shared. Especially for function props, just inline them instead.
Never do manual state management for form/mutation. Use useForm (from tanstack-form) and useQuery/useMutation (from tanstack-query) instead for 99% of cases. Avoid patterns like setError.
If there are many classNames with conditional logic, usecn(import from@hypr/utils). It is similar toclsx. Always pass an array and split by logical grouping.
Usemotion/reactinstead offramer-motion.
Files:
apps/web/src/components/mock-window.tsxapps/web/src/routes/_view/changelog/$slug.tsx
🧠 Learnings (4)
📓 Common learnings
Learnt from: CR
Repo: fastrepl/hyprnote PR: 0
File: apps/web/content/changelog/AGENTS.md:0-0
Timestamp: 2025-11-24T16:32:30.770Z
Learning: Applies to apps/web/content/changelog/** : Only include desktop-related changes in the changelog when reading through commits and diffs
Learnt from: CR
Repo: fastrepl/hyprnote PR: 0
File: apps/web/content/changelog/AGENTS.md:0-0
Timestamp: 2025-11-24T16:32:29.314Z
Learning: Applies to apps/web/content/changelog/** : Only keep desktop-related changes when maintaining changelog entries from commits and diffs
📚 Learning: 2025-11-24T16:32:30.770Z
Learnt from: CR
Repo: fastrepl/hyprnote PR: 0
File: apps/web/content/changelog/AGENTS.md:0-0
Timestamp: 2025-11-24T16:32:30.770Z
Learning: Applies to apps/web/content/changelog/** : Only include desktop-related changes in the changelog when reading through commits and diffs
Applied to files:
apps/web/src/routes/_view/changelog/$slug.tsx
📚 Learning: 2025-11-24T16:32:29.314Z
Learnt from: CR
Repo: fastrepl/hyprnote PR: 0
File: apps/web/content/changelog/AGENTS.md:0-0
Timestamp: 2025-11-24T16:32:29.314Z
Learning: Applies to apps/web/content/changelog/** : Only keep desktop-related changes when maintaining changelog entries from commits and diffs
Applied to files:
apps/web/src/routes/_view/changelog/$slug.tsx
📚 Learning: 2025-11-24T16:32:19.706Z
Learnt from: CR
Repo: fastrepl/hyprnote PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-24T16:32:19.706Z
Learning: Applies to **/*.{ts,tsx} : Use `motion/react` instead of `framer-motion`.
Applied to files:
apps/web/src/routes/_view/changelog/$slug.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). (8)
- GitHub Check: Redirect rules - hyprnote-storybook
- GitHub Check: Header rules - hyprnote-storybook
- GitHub Check: Pages changed - hyprnote-storybook
- GitHub Check: Redirect rules - hyprnote
- GitHub Check: Header rules - hyprnote
- GitHub Check: Pages changed - hyprnote
- GitHub Check: ci (macos, macos-14)
- GitHub Check: fmt
🔇 Additional comments (5)
apps/web/src/components/mock-window.tsx (1)
9-16: LGTM!Clean extension of the
MockWindowcomponent. TheprefixIconsprop is well-positioned after the window controls, and the fixed height ensures consistent header dimensions regardless of content.Also applies to: 29-38
apps/web/src/routes/_view/changelog/$slug.tsx (4)
4-4: LGTM!Correctly imports from
motion/reactas per coding guidelines.Also applies to: 13-13
120-120: LGTM!Good responsive typography adjustment for smaller screens.
166-204: LGTM!Good mobile-responsive implementation with proper separation between mobile drawer and desktop split view. The
useStatefor drawer visibility is appropriate here as it's local UI state, not form/mutation state. The menu button includes proper accessibility labeling.
310-317: LGTM!Clean callback pattern. The optional
onNavigateprop allows the mobile drawer to close on navigation while keeping the desktop usage unchanged.Also applies to: 361-361
|
The latest updates on your projects. Learn more about Argos notifications ↗︎
|
ComputelessComputer
deleted the
feat/add-prefix-icons-and-mobile-sidebar
branch
1 participant
No description provided.