refactor: move press-kit routes to directory structure #2098
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. |
📝 WalkthroughWalkthroughRemoved a placeholder route file and added a new directory-based press-kit route implementing an interactive "App Screenshots" gallery with URL-synced selection, responsive/resizable panels, and mobile drawer navigation. Also updated the press-kit index route path to include a trailing slash and removed JSX comments. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Possibly related PRs
Suggested reviewers
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro 📒 Files selected for processing (3)
💤 Files with no reviewable changes (1)
🚧 Files skipped from review as they are similar to previous changes (1)
🧰 Additional context used📓 Path-based instructions (1)**/*.{ts,tsx}📄 CodeRabbit inference engine (AGENTS.md)
Files:
⏰ 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)
🔇 Additional comments (1)
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 |
✅ Deploy Preview for hyprnote 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: 1
🧹 Nitpick comments (2)
apps/web/src/routes/_view/press-kit/app.tsx (2)
186-186: Consider extracting the repeated height constant.The
h-[480px]value appears on lines 186, 223, and 275. Extracting this to a shared constant would improve maintainability if the height needs to change.const CONTENT_HEIGHT = "h-[480px]"; // or const CONTENT_HEIGHT_CLASS = "h-[480px]";
331-331: Magic number49pxties implicitly to header height.The calculation
h-[calc(100%-49px)]assumes the header height. If the header padding or border changes, this will break silently. Consider using a CSS variable or flex layout to avoid the magic number.- <div className="h-[calc(100%-49px)] overflow-y-auto p-4"> + <div className="flex-1 overflow-y-auto p-4">This would require adding
flex flex-colto the parentmotion.divcontainer:- className="absolute left-0 top-0 bottom-0 z-50 w-72 bg-white border-r border-neutral-200 shadow-lg" + className="absolute left-0 top-0 bottom-0 z-50 w-72 bg-white border-r border-neutral-200 shadow-lg flex flex-col"
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
apps/web/src/routes/_view/press-kit.app.tsx(0 hunks)apps/web/src/routes/_view/press-kit/app.tsx(1 hunks)apps/web/src/routes/_view/press-kit/index.tsx(1 hunks)
💤 Files with no reviewable changes (1)
- apps/web/src/routes/_view/press-kit.app.tsx
🧰 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/press-kit/app.tsxapps/web/src/routes/_view/press-kit/index.tsx
🧬 Code graph analysis (2)
apps/web/src/routes/_view/press-kit/app.tsx (4)
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/components/image.tsx (1)
Image(4-24)packages/utils/src/cn.ts (1)
cn(20-22)
apps/web/src/routes/_view/press-kit/index.tsx (1)
apps/web/src/routes/_view/press-kit/app.tsx (1)
Route(22-39)
⏰ 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). (6)
- GitHub Check: Redirect rules - hyprnote
- GitHub Check: Header rules - hyprnote
- GitHub Check: Pages changed - hyprnote
- GitHub Check: ci
- GitHub Check: Devin
- GitHub Check: fmt
🔇 Additional comments (4)
apps/web/src/routes/_view/press-kit/index.tsx (1)
11-11: LGTM!The trailing slash in the route path correctly reflects the directory-based routing structure where this file is now
press-kit/index.tsx.apps/web/src/routes/_view/press-kit/app.tsx (3)
1-4: LGTM!Imports are clean, correctly using
motion/reactas per coding guidelines, and properly organizing dependencies.
100-123: LGTM!The URL-driven state management pattern is well-implemented. The bidirectional sync between URL search params and component state is appropriate for this use case (UI selection state, not form data).
22-39: LGTM!Route definition with
validateSearchproperly validates URL search params, and head metadata is correctly configured for SEO.
- Move press-kit.tsx to press-kit/index.tsx - Rename press-kit.app.tsx to press-kit/app.tsx - Update app.tsx to replicate about.tsx behavior with grid/detail views Co-Authored-By: john@hyprnote.com <john@hyprnote.com>
ComputelessComputer
force-pushed
the
devin/1764760700-press-kit-restructure
branch
from
8d2476b to
e135a1f
Compare
ComputelessComputer
deleted the
devin/1764760700-press-kit-restructure
branch
refactor: move press-kit routes to directory structure
Summary
Restructured the press-kit routes from flat files to a directory structure and implemented a full-featured app screenshots page:
press-kit.tsx→press-kit/index.tsx(route path updated from/_view/press-kitto/_view/press-kit/)press-kit.app.tsxwithpress-kit/app.tsxthat replicates theabout.tsxpatternReview & Testing Checklist for Human
screenshotsarray references 9 image URLs (e.g.,/api/images/hyprnote/float-compact.jpg). I did not verify these images actually exist on the server./press-kitand/press-kit/appto confirm routing works after the directory restructure/press-kit/app?type=screenshot&id=float-compactand verify the correct screenshot is selectedRecommended test plan: Visit
/press-kit, click the "App" folder, browse screenshots in grid view, click one to see detail view, test the download button, resize the sidebar panel, and test on mobile viewport.Notes