feat(web): add mobile drawer layout for about and brand pages#2008
feat(web): add mobile drawer layout for about and brand pages#2008ComputelessComputer merged 2 commits intomainfrom
Conversation
🤖 Devin AI EngineerI'll be helping with this pull request! Here's what you should know: ✅ I will automatically:
Note: I can only respond to comments from users who have write access to this repository. ⚙️ Control Options:
|
✅ Deploy Preview for hyprnote-storybook ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Caution Review failedThe pull request is closed. 📝 WalkthroughWalkthroughAdds mobile-specific navigation and detail flows to About and Brand views: introduces a mobile drawer (animated via AnimatePresence/motion), mobile detail components, a Menu trigger in MockWindow prefixIcons, and conditional rendering that preserves desktop layouts. Changes
Sequence Diagram(s)mermaid Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
Suggested reviewers
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
📜 Recent review detailsConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro 📒 Files selected for processing (2)
Comment |
✅ Deploy Preview for hyprnote ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
ComputelessComputer
force-pushed
the
devin/1764483580-about-brand-mobile-drawer
branch
from
28e82c6 to
99eb43c
Compare
Co-Authored-By: john@hyprnote.com <john@hyprnote.com>
Replace Iconify icons with lucide-react Menu and X icons in about and brand views to unify the drawer icon implementation and remove the @iconify-icon/react dependency. This updates imports and swaps Icon components for <Menu /> when opening the drawer and <X /> when closing it, adjusting classes to match sizing and styling.
![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 (2)
apps/web/src/routes/_view/brand.tsx (1)
2-2: Standardize close icon usage for consistency.Both
XandXIconare imported and used throughout the file (X at line 386, XIcon at lines 674, 706, 792). These refer to the same icon. Standardize on one to improve consistency.Apply this diff to use
Xconsistently:-import { Menu, X, XIcon } from "lucide-react"; +import { Menu, X } from "lucide-react";Then replace
XIconwithXat lines 674, 706, and 792:- <XIcon size={16} /> + <X size={16} />apps/web/src/routes/_view/about.tsx (1)
2-2: Consider using consistent icon styling.Both
XandXIconare imported and used, but with different styling patterns. Line 462 uses<X className="w-4 h-4" />while lines 734, 858, 964 use<XIcon size={16} />. Consider standardizing on one approach for consistency.</comment_end -->
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/web/src/routes/_view/about.tsx(3 hunks)apps/web/src/routes/_view/brand.tsx(3 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/routes/_view/about.tsxapps/web/src/routes/_view/brand.tsx
🧠 Learnings (1)
📚 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/about.tsxapps/web/src/routes/_view/brand.tsx
🧬 Code graph analysis (2)
apps/web/src/routes/_view/about.tsx (2)
packages/ui/src/hooks/use-mobile.tsx (1)
useIsMobile(5-19)apps/web/src/components/mock-window.tsx (1)
MockWindow(4-62)
apps/web/src/routes/_view/brand.tsx (2)
packages/ui/src/hooks/use-mobile.tsx (1)
useIsMobile(5-19)apps/web/src/components/mock-window.tsx (1)
MockWindow(4-62)
⏰ 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). (5)
- 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 (10)
apps/web/src/routes/_view/brand.tsx (6)
3-3: LGTM!Correct usage of
motion/reactas specified in coding guidelines.Based on coding guidelines and learnings.
164-165: LGTM!Clean state management for responsive UI. The
useIsMobilehook properly handles device detection, anddrawerOpenstate appropriately controls the drawer visibility.
170-185: LGTM!The conditional rendering of the mobile menu button is well-implemented. Proper accessibility with
aria-label, appropriate conditional logic (isMobile && selectedItem), and clean hover states.
186-208: LGTM!Clean conditional rendering logic that properly separates mobile and desktop experiences. The
relativepositioning on the container correctly enables absolute positioning for the drawer overlay.
347-417: LGTM!The mobile drawer implementation is solid:
- Proper animation using
motion/reactwith smooth spring transitions- Correct z-index layering (overlay at z-40, drawer at z-50)
- Good UX: drawer closes when an item is selected (lines 393-394, 400-401, 407-408)
- Reuses existing sidebar components effectively
- Inline prop types follow coding guidelines
Based on coding guidelines.
419-448: LGTM!Clean component that effectively reuses existing detail components for the mobile view. Inline prop types follow coding guidelines, and the conditional rendering based on
selectedItem.typeis clear and maintainable.Based on coding guidelines.
apps/web/src/routes/_view/about.tsx (4)
228-229: LGTM - Mobile state management is appropriate.The
useIsMobile()hook anddrawerOpenstate are correctly implemented for managing mobile-specific UI behavior.</review_comment_end -->
234-249: LGTM - Mobile menu button is well integrated.The
prefixIconsprop correctly shows the menu button only on mobile when viewing a detail, with proper accessibility attributes.</review_comment_end -->
250-272: LGTM - Conditional rendering logic is clean.The three-way conditional correctly handles grid view, mobile detail view with drawer, and desktop resizable panel layout.
</review_comment_end -->
495-521: LGTM - Excellent code reuse.The
AboutDetailContentcomponent appropriately reuses the existingStoryDetail,FounderDetail, andPhotoDetailcomponents, ensuring consistent behavior between mobile and desktop views without duplication.</review_comment_end -->
ComputelessComputer
force-pushed
the
devin/1764483580-about-brand-mobile-drawer
branch
from
99eb43c to
abbec26
Compare
ComputelessComputer
deleted the
devin/1764483580-about-brand-mobile-drawer
branch
1 participant
Summary
Adds mobile drawer navigation to the about and brand pages, matching the existing pattern used in the changelog page. On mobile devices, when viewing item details, users can now tap a menu button to open a slide-in drawer for navigation instead of the desktop ResizablePanelGroup layout.
Changes:
MobileSidebarDrawercomponent to both pages with animated slide-in/out using motion/reactAboutDetailContentandBrandDetailContentcomponents for mobile detail view renderingReview & Testing Checklist for Human
/aboutand/brandpages on a mobile device or using browser dev tools mobile emulation. Select an item and verify the drawer opens/closes correctly.Recommended test plan: Use Chrome DevTools device emulation to test at various mobile breakpoints (375px, 414px). Navigate to both
/aboutand/brand, select items, open the drawer, and switch between items.Notes
apps/web/src/routes/_view/changelog/$slug.tsx