🎨 Palette: [UX improvement] Add keyboard shortcut for global search - #210
🎨 Palette: [UX improvement] Add keyboard shortcut for global search#210mkk2026 wants to merge 1 commit into
Conversation
Added `Cmd+K` / `Ctrl+K` keyboard shortcut to focus the global search input on the dashboard. This enhancement significantly improves keyboard navigation. It correctly uses the `isMounted` pattern to display the OS-specific modifier key hint without causing SSR hydration mismatches, and dynamically sets the `aria-keyshortcuts` attribute to announce the shortcut correctly to screen readers. Co-authored-by: corebrimtech <175357468+corebrimtech@users.noreply.github.com>
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthroughThis PR adds keyboard shortcut support (Cmd+K/Ctrl+K) to focus the search input on the security dashboard. Implementation includes an Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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 |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 908744f0b8
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| <div className="absolute right-14 top-1/2 -translate-y-1/2 pointer-events-none flex gap-1"> | ||
| <kbd className="hidden sm:inline-flex h-5 items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100"> | ||
| <span className="text-xs">{navigator.platform.includes('Mac') ? '⌘' : 'Ctrl'}</span>K |
There was a problem hiding this comment.
The new <kbd> hint is absolutely positioned inside the search field, but the input still uses the old right padding, so typed text can render underneath the hint (and becomes more cramped when the clear button is also shown). This is visible on longer queries and makes the search value harder to read/edit; increase the input’s right padding or hide the hint when content is present.
Useful? React with 👍 / 👎.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In @.Jules/palette.md:
- Around line 26-28: The journal entry date "2026-10-27" in .Jules/palette.md is
inconsistent with this PR (created April 13, 2026); update that date to the
correct PR date (e.g., 2026-04-13) so the journal entry matches the PR timeline,
ensuring the header line beginning "## 2026-10-27 - Keyboard Shortcuts for
Search" is edited to the corrected date string.
In `@src/app/page.tsx`:
- Around line 63-74: The keydown handler currently treats Cmd and Ctrl
interchangeably; update the useEffect's handleKeyDown so it enforces the
platform-specific modifier: detect macOS (e.g., via navigator.platform or
navigator.userAgent includes "Mac") and require e.metaKey (and not e.ctrlKey)
for Mac, otherwise require e.ctrlKey (and not e.metaKey) for non‑Mac, then call
e.preventDefault() and focus searchInputRef.current?.focus() only when the
correct modifier + 'k' is pressed; keep the same event
registration/unregistration in useEffect.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 444d2019-64d5-45b5-92aa-51a52d7bc380
📒 Files selected for processing (2)
.Jules/palette.mdsrc/app/page.tsx
| ## 2026-10-27 - Keyboard Shortcuts for Search | ||
| **Learning:** Adding keyboard shortcuts (like Cmd+K or Ctrl+K) for primary search inputs significantly improves keyboard navigation. Using an `isMounted` state prevents hydration mismatches when conditionally rendering OS-specific modifiers based on `navigator.platform`. It's also important to dynamically set `aria-keyshortcuts` to improve screen reader context. | ||
| **Action:** Always implement a keyboard shortcut (Cmd+K/Ctrl+K) for global search inputs and use the `isMounted` pattern for OS detection to ensure SSR compatibility. |
There was a problem hiding this comment.
Journal date appears inconsistent with this PR timeline.
Line [26] says 2026-10-27, but this PR was created on April 13, 2026. If this entry documents this PR’s work, the date should be corrected to avoid timeline confusion.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In @.Jules/palette.md around lines 26 - 28, The journal entry date "2026-10-27"
in .Jules/palette.md is inconsistent with this PR (created April 13, 2026);
update that date to the correct PR date (e.g., 2026-04-13) so the journal entry
matches the PR timeline, ensuring the header line beginning "## 2026-10-27 -
Keyboard Shortcuts for Search" is edited to the corrected date string.
| useEffect(() => { | ||
| const handleKeyDown = (e: KeyboardEvent) => { | ||
| // Check for Cmd+K (Mac) or Ctrl+K (Windows/Linux) | ||
| if ((e.metaKey || e.ctrlKey) && e.key === 'k') { | ||
| e.preventDefault() | ||
| searchInputRef.current?.focus() | ||
| } | ||
| } | ||
|
|
||
| window.addEventListener('keydown', handleKeyDown) | ||
| return () => window.removeEventListener('keydown', handleKeyDown) | ||
| }, []) |
There was a problem hiding this comment.
Shortcut behavior doesn’t match the platform-specific hint/ARIA contract.
Line [66] currently allows Cmd+K or Ctrl+K on all platforms, but Line [370] and Line [379] advertise only one modifier per OS. On macOS, this means Ctrl+K is unintentionally captured too.
🔧 Suggested fix
useEffect(() => {
+ const isMac = navigator.platform.includes('Mac')
+
const handleKeyDown = (e: KeyboardEvent) => {
- // Check for Cmd+K (Mac) or Ctrl+K (Windows/Linux)
- if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+ const matchesModifier = isMac
+ ? e.metaKey && !e.ctrlKey
+ : e.ctrlKey && !e.metaKey
+
+ if (matchesModifier && e.key.toLowerCase() === 'k') {
e.preventDefault()
searchInputRef.current?.focus()
}
}Also applies to: 370-379
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/app/page.tsx` around lines 63 - 74, The keydown handler currently treats
Cmd and Ctrl interchangeably; update the useEffect's handleKeyDown so it
enforces the platform-specific modifier: detect macOS (e.g., via
navigator.platform or navigator.userAgent includes "Mac") and require e.metaKey
(and not e.ctrlKey) for Mac, otherwise require e.ctrlKey (and not e.metaKey) for
non‑Mac, then call e.preventDefault() and focus searchInputRef.current?.focus()
only when the correct modifier + 'k' is pressed; keep the same event
registration/unregistration in useEffect.
1 participant
💡 What: Added a
Cmd+K(Mac) orCtrl+K(Windows/Linux) keyboard shortcut to focus the global search input. A visual hint (⌘KorCtrl K) is also displayed inside the input field.🎯 Why: To improve keyboard navigation and usability for power users.
📸 Before/After: The search input now displays a keyboard shortcut hint on the right side.
♿ Accessibility: Added
aria-keyshortcutsto dynamically announce the correct shortcut to screen readers based on the OS. Evaluates the modifier client-side usingisMountedto prevent SSR hydration errors.PR created automatically by Jules for task 15643281697570949716 started by @corebrimtech
Summary by CodeRabbit