Migrated Kbd component to a centralized implementation #2475
Conversation
✅ 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. |
📝 WalkthroughWalkthroughSix files across desktop and web applications are refactored to replace native Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 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 ignored due to path filters (1)
📒 Files selected for processing (6)
🧰 Additional context used📓 Path-based instructions (4)**/*📄 CodeRabbit inference engine (AGENTS.md)
Files:
**/*.{ts,tsx}📄 CodeRabbit inference engine (AGENTS.md)
Files:
**/*.{ts,tsx,rs,js,jsx}📄 CodeRabbit inference engine (AGENTS.md)
Files:
**/*.{ts,tsx,js,jsx}📄 CodeRabbit inference engine (AGENTS.md)
Files:
🧠 Learnings (3)📚 Learning: 2025-11-24T16:32:19.706ZApplied to files:
📚 Learning: 2025-12-16T07:24:36.000ZApplied to files:
📚 Learning: 2025-11-24T16:32:19.706ZApplied to files:
🧬 Code graph analysis (6)apps/desktop/src/components/main/body/sessions/note-input/raw.tsx (1)
apps/desktop/src/components/main/body/search.tsx (1)
apps/desktop/src/components/main/body/empty/index.tsx (2)
apps/web/src/components/search.tsx (2)
apps/desktop/src/components/main/sidebar/profile/index.tsx (1)
apps/desktop/src/components/main/body/shared.tsx (1)
⏰ 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). (7)
🔇 Additional comments (6)
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: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/desktop/src/components/main/body/sessions/note-input/raw.tsx (1)
118-118: Inconsistent: Native<kbd>element not migrated to centralizedKbdcomponent.This file still uses a native
<kbd>element on Line 118, which is inconsistent with the PR's stated objective of migrating to a centralized Kbd component implementation. All other files in this PR have replaced native<kbd>elements with theKbdcomponent from@hypr/ui/components/ui/kbd.🔎 Suggested fix to align with PR objectives
Add the import at the top of the file:
+import { Kbd } from "@hypr/ui/components/ui/kbd";Then update the placeholder:
return ( <p className="text-[#e5e5e5]"> - Take notes or press <kbd>/</kbd> for commands. + Take notes or press <Kbd>/</Kbd> for commands. </p> );
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
packages/ui/src/components/ui/kbd.tsxis excluded by!packages/ui/src/components/ui/**
📒 Files selected for processing (6)
apps/desktop/src/components/main/body/empty/index.tsxapps/desktop/src/components/main/body/search.tsxapps/desktop/src/components/main/body/sessions/note-input/raw.tsxapps/desktop/src/components/main/body/shared.tsxapps/desktop/src/components/main/sidebar/profile/index.tsxapps/web/src/components/search.tsx
🧰 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/body/sessions/note-input/raw.tsxapps/desktop/src/components/main/body/search.tsxapps/desktop/src/components/main/body/empty/index.tsxapps/web/src/components/search.tsxapps/desktop/src/components/main/sidebar/profile/index.tsxapps/desktop/src/components/main/body/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/body/sessions/note-input/raw.tsxapps/desktop/src/components/main/body/search.tsxapps/desktop/src/components/main/body/empty/index.tsxapps/web/src/components/search.tsxapps/desktop/src/components/main/sidebar/profile/index.tsxapps/desktop/src/components/main/body/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/body/sessions/note-input/raw.tsxapps/desktop/src/components/main/body/search.tsxapps/desktop/src/components/main/body/empty/index.tsxapps/web/src/components/search.tsxapps/desktop/src/components/main/sidebar/profile/index.tsxapps/desktop/src/components/main/body/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/body/sessions/note-input/raw.tsxapps/desktop/src/components/main/body/search.tsxapps/desktop/src/components/main/body/empty/index.tsxapps/web/src/components/search.tsxapps/desktop/src/components/main/sidebar/profile/index.tsxapps/desktop/src/components/main/body/shared.tsx
🧠 Learnings (3)
📚 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} : Avoid creating a bunch of types/interfaces if they are not shared. Especially for function props. Just inline them.
Applied to files:
apps/desktop/src/components/main/body/sessions/note-input/raw.tsx
📚 Learning: 2025-12-16T07:24:36.000Z
Learnt from: CR
Repo: fastrepl/hyprnote PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-16T07:24:36.000Z
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/index.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/index.tsx
🧬 Code graph analysis (6)
apps/desktop/src/components/main/body/sessions/note-input/raw.tsx (1)
packages/tiptap/src/editor/index.tsx (1)
JSONContent(30-30)
apps/desktop/src/components/main/body/search.tsx (1)
extensions/shared/types/hypr-extension.d.ts (1)
Kbd(337-337)
apps/desktop/src/components/main/body/empty/index.tsx (2)
extensions/shared/types/hypr-extension.d.ts (1)
Kbd(337-337)packages/utils/src/cn.ts (1)
cn(20-22)
apps/web/src/components/search.tsx (2)
extensions/shared/types/hypr-extension.d.ts (1)
Kbd(337-337)packages/utils/src/cn.ts (1)
cn(20-22)
apps/desktop/src/components/main/sidebar/profile/index.tsx (1)
extensions/shared/types/hypr-extension.d.ts (1)
Kbd(337-337)
apps/desktop/src/components/main/body/shared.tsx (1)
extensions/shared/types/hypr-extension.d.ts (1)
Kbd(337-337)
⏰ 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). (7)
- GitHub Check: desktop_ci (linux, depot-ubuntu-22.04-8)
- GitHub Check: desktop_ci (linux, depot-ubuntu-24.04-8)
- GitHub Check: ci
- GitHub Check: fmt
- GitHub Check: Redirect rules - hyprnote
- GitHub Check: Header rules - hyprnote
- GitHub Check: Pages changed - hyprnote
🔇 Additional comments (6)
apps/desktop/src/components/main/body/sessions/note-input/raw.tsx (1)
69-69: Type annotation appears unrelated to PR objectives.This type annotation change doesn't align with the stated PR objectives of migrating the Kbd component to a centralized implementation. While the annotation itself is correct and may improve type safety, it seems to be an unrelated change that should ideally be in a separate commit or PR.
apps/desktop/src/components/main/body/search.tsx (1)
5-5: LGTM! Clean migration to centralized Kbd component.The change successfully migrates from
KbdGroupwith separateKbdelements to a singleKbdcomponent displaying the combined shortcut. This aligns perfectly with the PR objectives and simplifies the rendering logic.Also applies to: 174-174
apps/desktop/src/components/main/body/empty/index.tsx (1)
4-4: LGTM! Effective simplification of keyboard shortcut rendering.The migration replaces the previous pattern of mapping over shortcut arrays with a single
Kbdcomponent that renders the joined string. The hover and active state animations are preserved through theclassNameprop, and the logic is cleaner and more maintainable.Also applies to: 134-142
apps/desktop/src/components/main/sidebar/profile/index.tsx (1)
14-14: LGTM! Successful migration with simplified styling.The migration to the centralized
Kbdcomponent is well-executed. ThekbdClasshas been appropriately simplified to retain only the transition and interactive effects (hover/active shadows), while the base keyboard styling is now handled by theKbdcomponent itself. This promotes consistency and reduces duplication.Also applies to: 131-167
apps/desktop/src/components/main/body/shared.tsx (1)
4-4: LGTM! Clean consolidation of keyboard shortcut rendering.The change successfully removes the
KbdGroupwrapper and consolidates the shortcut display into a singleKbdcomponent with an interpolated string. This aligns with the PR's centralization objectives and simplifies the component structure.Also applies to: 152-152
apps/web/src/components/search.tsx (1)
21-21: LGTM! Excellent simplification across all search variants.The migration successfully replaces native
<kbd>elements and their associated styling complexity with the centralizedKbdcomponent across all three search trigger variants (sidebar, header, and default). This significantly reduces code duplication and ensures consistent keyboard shortcut rendering throughout the web application.Also applies to: 115-124, 160-169, 189-189
Merge activity
|
## Description - Updated Kbd component styles and markup - Migrated Kbd component to a centralized implementation
Description