Add keyboard shortcuts to action items

[ComputelessComputer]

No description provided.

[netlify]

✅ Deploy Preview for hyprnote-storybook ready!

Name	Link
🔨 Latest commit	dde81f3
🔍 Latest deploy log	https://app.netlify.com/projects/hyprnote-storybook/deploys/69469fa0af6ce00008e4d7fa
😎 Deploy Preview	https://deploy-preview-2440--hyprnote-storybook.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[netlify]

✅ Deploy Preview for hyprnote ready!

Name	Link
🔨 Latest commit	dde81f3
🔍 Latest deploy log	https://app.netlify.com/projects/hyprnote/deploys/69469f9f0be4270008bc85be
😎 Deploy Preview	https://deploy-preview-2440--hyprnote.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

📝 Walkthrough

Walkthrough

Replaced custom Kbd/KbdGroup components in the EmptyView with native <kbd> and per-key <span> elements, added keyboard shortcut badges for Calendar (⌘+⇧+C) and Contacts (⌘+⇧+O), and added a group class to ActionItem buttons for group-hover/group-active styling.

Changes

Cohort / File(s)	Summary
EmptyView keyboard shortcut rendering apps/desktop/src/components/main/body/empty/index.tsx	Removed Kbd/KbdGroup imports; replaced Kbd/KbdGroup usage with native <kbd> and per-key <span> markup; added shortcut badges for Calendar (⌘+⇧+C) and Contacts (⌘+⇧+O); added group class to ActionItem button container to enable group-hover/group-active styles.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Single-file UI change with a consistent replacement pattern.
• Check keyboard accessibility, focus/high-contrast styles, and that click handlers remain unchanged.

Possibly related PRs

• Add keyboard shortcut badges to sidebar menu items #2419 — Same pattern: replace Kbd/KbdGroup with native <kbd> badges and add group CSS classes.
• feat(ui): Add quick access items to empty state actions #2282 — Adjusts Calendar and Contacts action items in the same EmptyView file.
• Enhancing task fixes with validation and retry #1630 — Also modifies keyboard shortcut rendering in apps/desktop/src/components/main/body/empty/index.tsx.

Suggested reviewers

• yujonglee

Pre-merge checks and finishing touches

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.
Description check	❓ Inconclusive	No description was provided by the author; the pull request is missing this context.	Add a description explaining the motivation, implementation details, and any testing performed for the keyboard shortcuts feature.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: adding keyboard shortcuts to action items in the UI component.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/add-keyboard-shortcuts-action-items

---

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5eb07eb and dde81f3.

📒 Files selected for processing (1)

• apps/desktop/src/components/main/body/empty/index.tsx (3 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• apps/desktop/src/components/main/body/empty/index.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). (4)

• GitHub Check: Redirect rules - hyprnote
• GitHub Check: desktop_ci (linux, depot-ubuntu-24.04-8)
• GitHub Check: desktop_ci (linux, depot-ubuntu-22.04-8)
• GitHub Check: fmt

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between d0b4a45 and 29e0656.

📒 Files selected for processing (1)

• apps/desktop/src/components/main/body/empty/index.tsx (3 hunks)

🧰 Additional context used

📓 Path-based instructions (4)

**/*

📄 CodeRabbit inference engine (AGENTS.md)

Format using dprint fmt from the root. Do not use cargo fmt.

Files:

• apps/desktop/src/components/main/body/empty/index.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. Use useForm from tanstack-form and useQuery/useMutation from tanstack-query for 99% cases.

Files:

• apps/desktop/src/components/main/body/empty/index.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/empty/index.tsx

**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (AGENTS.md)

**/*.{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.
Use motion/react instead of framer-motion.

Files:

• apps/desktop/src/components/main/body/empty/index.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/body/empty/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/body/empty/index.tsx

🧬 Code graph analysis (1)

apps/desktop/src/components/main/body/empty/index.tsx (1)

packages/utils/src/cn.ts (1)

• cn (20-22)

⏰ 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
• GitHub Check: Header rules - hyprnote
• GitHub Check: Pages changed - hyprnote
• GitHub Check: Redirect rules - hyprnote-storybook
• GitHub Check: Header rules - hyprnote-storybook
• GitHub Check: Pages changed - hyprnote-storybook
• 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 (3)

apps/desktop/src/components/main/body/empty/index.tsx (3)

123-123: LGTM!

The "group" class correctly enables the group-hover and group-active effects on the kbd element below.

---

132-149: Nice implementation of the custom kbd component.

The inline kbd implementation with group-hover and group-active effects is well-crafted. The use of cn with logical grouping follows the coding guidelines, and the visual design with shadows and transitions provides good user feedback.

---

74-83: The keyboard shortcuts for Calendar (Cmd+Shift+C) and Contacts (Cmd+Shift+O) are properly registered and functional in the parent component using react-hotkeys-hook. The ActionItem component correctly displays these shortcuts as UI metadata. No action needed.