Add keyboard shortcut badges to sidebar menu items#2419
Add keyboard shortcut badges to sidebar menu items#2419ComputelessComputer merged 2 commits intomainfrom
Conversation
✅ Deploy Preview for hyprnote ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Warning Rate limit exceeded@ComputelessComputer has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 2 minutes and 41 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📒 Files selected for processing (2)
📝 WalkthroughWalkthroughThe changes enhance the desktop sidebar profile menu component by introducing keyboard shortcut badges to menu items. A new optional Changes
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)
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-storybook ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
ComputelessComputer
force-pushed
the
feat/add-keyboard-shortcut-badges
branch
from
35c361e to
17bf9a9
Compare
![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 (1)
apps/desktop/src/components/main/sidebar/profile/index.tsx (1)
154-221: Consider extracting badge creation logic.The badge rendering is duplicated across all menu items. You could optionally extract this into a helper function to reduce repetition.
🔎 Example refactor
+ const createKbdBadge = (keys: string[]) => ( + <kbd className={kbdClass}> + {keys.map((key, i) => + key === "⌘" || key === "⇧" ? ( + <span key={i} className="text-xs">{key}</span> + ) : ( + <span key={i}>{key}</span> + ) + )} + </kbd> + ); + const menuItems = [ { icon: FolderOpenIcon, label: "Folders", onClick: handleClickFolders, - badge: ( - <kbd className={kbdClass}> - <span className="text-xs">⌘</span> - <span className="text-xs">⇧</span>D - </kbd> - ), + badge: createKbdBadge(["⌘", "⇧", "D"]), }, // ... repeat for other items ];
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/desktop/src/components/main/sidebar/profile/index.tsx(1 hunks)apps/desktop/src/components/main/sidebar/profile/shared.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
**/*
📄 CodeRabbit inference engine (AGENTS.md)
Format using
dprint fmtfrom the root. Do not usecargo fmt.
Files:
apps/desktop/src/components/main/sidebar/profile/index.tsxapps/desktop/src/components/main/sidebar/profile/shared.tsx
**/*.{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.
Never do manual state management for form/mutation. UseuseFormfrom tanstack-form anduseQuery/useMutationfrom tanstack-query for 99% cases.
Files:
apps/desktop/src/components/main/sidebar/profile/index.tsxapps/desktop/src/components/main/sidebar/profile/shared.tsx
**/*.{ts,tsx,rs,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
By default, avoid writing comments at all. If you write one, it should be about 'Why', not 'What'.
Files:
apps/desktop/src/components/main/sidebar/profile/index.tsxapps/desktop/src/components/main/sidebar/profile/shared.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx,js,jsx}: If there are many classNames with conditional logic, usecn(import from@hypr/utils). Always pass an array and split by logical grouping.
Usemotion/reactinstead offramer-motion.
Files:
apps/desktop/src/components/main/sidebar/profile/index.tsxapps/desktop/src/components/main/sidebar/profile/shared.tsx
🧠 Learnings (2)
📚 Learning: 2025-12-16T07:24:35.987Z
Learnt from: CR
Repo: fastrepl/hyprnote PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-16T07:24:35.987Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : If there are many classNames with conditional logic, use `cn` (import from `hypr/utils`). Always pass an array and split by logical grouping.
Applied to files:
apps/desktop/src/components/main/sidebar/profile/shared.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} : If there are many classNames with conditional logic, use `cn` (import from `hypr/utils`), similar to `clsx`. Always pass an array and split by logical grouping.
Applied to files:
apps/desktop/src/components/main/sidebar/profile/shared.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). (10)
- 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: desktop_ci (linux, depot-ubuntu-22.04-8)
- GitHub Check: desktop_ci (macos, depot-macos-14)
- GitHub Check: desktop_ci (linux, depot-ubuntu-24.04-8)
- GitHub Check: fmt
🔇 Additional comments (1)
apps/desktop/src/components/main/sidebar/profile/shared.tsx (1)
20-20: LGTM! Enables hover effects for badge animations.The "group" class addition enables the keyboard shortcut badges to animate on hover and active states via group-based pseudo-classes.
1 participant
No description provided.