🎨 Palette: Add Cmd+K search shortcut and visual hint - #73
Conversation
- Adds a global keyboard shortcut (Cmd+K / Ctrl+K) to focus the search input. - Adds a visual "⌘K" hint to the search input that automatically hides when the user types. - Adds `aria-keyshortcuts` attribute for accessibility. - Ensures the hint does not overlap with the clear button or input text. - Updates `.jules/palette.md` with a journal entry about search input shortcuts. 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.
|
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
📝 WalkthroughWalkthroughThis PR introduces keyboard shortcut support for search input focus and adds documentation for the feature. Changes include a new specification file and implementation of Cmd+K/Ctrl+K listener with visual hint in the search component. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 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 |
![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 `@src/app/page.tsx`:
- Around line 370-374: Detect the user platform client-side and render the
correct shortcut label instead of always showing "⌘K": add a state like isMac in
the component (initialize to false to avoid SSR/hydration issues) and set it
inside a useEffect by checking navigator.platform / navigator.userAgent for Mac
identifiers; then update the JSX that currently renders the kbd (the block gated
by !searchQuery) to show "⌘K" when isMac is true and "Ctrl+K" otherwise (or
similar localized text), keeping the rest of the kbd styling intact.
- Around line 58-67: The global keyboard handler handleKeyDown inside the
useEffect is hijacking native Cmd/Ctrl+K behavior in editable fields; update
handleKeyDown to first ignore events originating from editable elements by
checking the event target (e.g., if target is an INPUT, TEXTAREA, or has
isContentEditable true) and early-return in those cases, then proceed to detect
the k + meta/ctrl combo and focus searchInputRef; keep the existing
addEventListener/removeEventListener logic in the useEffect and only change the
handler body to include this editable-target guard.
| useEffect(() => { | ||
| const handleKeyDown = (e: KeyboardEvent) => { | ||
| if (e.key.toLowerCase() === 'k' && (e.metaKey || e.ctrlKey)) { | ||
| e.preventDefault() | ||
| searchInputRef.current?.focus() | ||
| } | ||
| } | ||
|
|
||
| document.addEventListener('keydown', handleKeyDown) | ||
| return () => document.removeEventListener('keydown', handleKeyDown) |
There was a problem hiding this comment.
Don’t hijack Cmd/Ctrl+K while the user is editing text.
On macOS, Cmd+K deletes to end of line in inputs; this listener currently prevents that (and can interfere in other editable fields). Consider ignoring events from editable targets.
🛠️ Suggested guard to preserve native editing
const handleKeyDown = (e: KeyboardEvent) => {
+ const target = e.target as HTMLElement | null
+ const isEditable =
+ target &&
+ (target.isContentEditable || ['INPUT', 'TEXTAREA', 'SELECT'].includes(target.tagName))
+ if (isEditable) return
if (e.key.toLowerCase() === 'k' && (e.metaKey || e.ctrlKey)) {
e.preventDefault()
searchInputRef.current?.focus()
}
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| useEffect(() => { | |
| const handleKeyDown = (e: KeyboardEvent) => { | |
| if (e.key.toLowerCase() === 'k' && (e.metaKey || e.ctrlKey)) { | |
| e.preventDefault() | |
| searchInputRef.current?.focus() | |
| } | |
| } | |
| document.addEventListener('keydown', handleKeyDown) | |
| return () => document.removeEventListener('keydown', handleKeyDown) | |
| useEffect(() => { | |
| const handleKeyDown = (e: KeyboardEvent) => { | |
| const target = e.target as HTMLElement | null | |
| const isEditable = | |
| target && | |
| (target.isContentEditable || ['INPUT', 'TEXTAREA', 'SELECT'].includes(target.tagName)) | |
| if (isEditable) return | |
| if (e.key.toLowerCase() === 'k' && (e.metaKey || e.ctrlKey)) { | |
| e.preventDefault() | |
| searchInputRef.current?.focus() | |
| } | |
| } | |
| document.addEventListener('keydown', handleKeyDown) | |
| return () => document.removeEventListener('keydown', handleKeyDown) |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/app/page.tsx` around lines 58 - 67, The global keyboard handler
handleKeyDown inside the useEffect is hijacking native Cmd/Ctrl+K behavior in
editable fields; update handleKeyDown to first ignore events originating from
editable elements by checking the event target (e.g., if target is an INPUT,
TEXTAREA, or has isContentEditable true) and early-return in those cases, then
proceed to detect the k + meta/ctrl combo and focus searchInputRef; keep the
existing addEventListener/removeEventListener logic in the useEffect and only
change the handler body to include this editable-target guard.
| {!searchQuery && ( | ||
| <div className="absolute right-4 top-1/2 transform -translate-y-1/2 pointer-events-none"> | ||
| <kbd className="inline-flex h-5 select-none items-center gap-1 rounded border border-slate-200 bg-slate-100 px-1.5 font-mono text-[10px] font-medium text-slate-500 opacity-100 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-400"> | ||
| <span className="text-xs">⌘</span>K | ||
| </kbd> |
There was a problem hiding this comment.
Show the correct shortcut hint on non‑mac platforms.
Right now Windows/Linux users still see ⌘K. Consider a platform-aware label (Ctrl+K) to avoid misleading guidance.
💡 Example rendering tweak
- <kbd className="inline-flex h-5 select-none items-center gap-1 rounded border border-slate-200 bg-slate-100 px-1.5 font-mono text-[10px] font-medium text-slate-500 opacity-100 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-400">
- <span className="text-xs">⌘</span>K
- </kbd>
+ <kbd className="inline-flex h-5 select-none items-center gap-1 rounded border border-slate-200 bg-slate-100 px-1.5 font-mono text-[10px] font-medium text-slate-500 opacity-100 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-400">
+ {isMac ? <span className="text-xs">⌘</span> : <span className="text-[10px]">Ctrl</span>}
+ <span className="text-[10px]">{isMac ? 'K' : '+K'}</span>
+ </kbd>You can derive isMac in a useEffect to avoid SSR/hydration mismatches.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/app/page.tsx` around lines 370 - 374, Detect the user platform
client-side and render the correct shortcut label instead of always showing
"⌘K": add a state like isMac in the component (initialize to false to avoid
SSR/hydration issues) and set it inside a useEffect by checking
navigator.platform / navigator.userAgent for Mac identifiers; then update the
JSX that currently renders the kbd (the block gated by !searchQuery) to show
"⌘K" when isMac is true and "Ctrl+K" otherwise (or similar localized text),
keeping the rest of the kbd styling intact.
1 participant
Implemented a
Cmd+K(orCtrl+K) keyboard shortcut for the main search input in the security dashboard. This improves accessibility and power-user navigation.Key Changes:
useRefanduseEffecttosrc/app/page.tsxto handle the keydown event.⌘Kbadge inside the search input that is conditionally rendered when the input is empty.aria-keyshortcuts="Control+K Meta+K"to the input element.PR created automatically by Jules for task 16483960964175090890 started by @corebrimtech
Summary by CodeRabbit