🎨 Palette: Keyboard Shortcut for Search Discoverability - #307
Conversation
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. |
📝 WalkthroughWalkthroughA global keyboard shortcut (Ctrl+K on Windows/Linux, Cmd+K on macOS) now focuses the main search input. The implementation detects client mount and platform, registers a keydown listener, and displays a platform-aware visual hint with SSR-safe conditional rendering. ChangesGlobal Keyboard Shortcut for Search
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
src/app/page.tsxOops! Something went wrong! :( ESLint: 9.39.4 ESLint couldn't find the plugin "eslint-plugin-react-hooks". (The package "eslint-plugin-react-hooks" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-react-hooks" was referenced from the config file in " » eslint-config-next/core-web-vitals » /node_modules/.pnpm/eslint-config-next@15.3.5_eslint@9.39.4_typescript@5.9.3/node_modules/eslint-config-next/index.js". If you still can't figure out the problem, please see https://eslint.org/docs/latest/use/troubleshooting. 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: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/app/page.tsx`:
- Around line 65-74: The shortcut handler in useEffect (handleKeyDown) compares
e.key case-sensitively so it fails with Caps Lock on; update the condition to be
case-insensitive (e.g., compare e.key.toLowerCase() === 'k') or use the physical
key code (e.code === 'KeyK') to detect the K key regardless of Caps Lock, then
keep the existing e.preventDefault() and searchInputRef.current?.focus()
behavior.
🪄 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: f27fd30a-0a54-4e91-b79d-11536f2b022d
📒 Files selected for processing (2)
.Jules/palette.mdsrc/app/page.tsx
| useEffect(() => { | ||
| const handleKeyDown = (e: KeyboardEvent) => { | ||
| if ((e.ctrlKey || e.metaKey) && e.key === 'k') { | ||
| e.preventDefault() | ||
| searchInputRef.current?.focus() | ||
| } | ||
| } | ||
| window.addEventListener('keydown', handleKeyDown) | ||
| return () => window.removeEventListener('keydown', handleKeyDown) | ||
| }, []) |
There was a problem hiding this comment.
Keyboard shortcut fails when Caps Lock is enabled.
The condition e.key === 'k' is case-sensitive. When Caps Lock is on, e.key will be 'K' (uppercase), causing the shortcut to be ignored.
⌨️ Proposed fix
useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
- if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
+ if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'k') {
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.ctrlKey || e.metaKey) && e.key === 'k') { | |
| e.preventDefault() | |
| searchInputRef.current?.focus() | |
| } | |
| } | |
| window.addEventListener('keydown', handleKeyDown) | |
| return () => window.removeEventListener('keydown', handleKeyDown) | |
| }, []) | |
| useEffect(() => { | |
| const handleKeyDown = (e: KeyboardEvent) => { | |
| if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'k') { | |
| e.preventDefault() | |
| searchInputRef.current?.focus() | |
| } | |
| } | |
| window.addEventListener('keydown', handleKeyDown) | |
| return () => window.removeEventListener('keydown', handleKeyDown) | |
| }, []) |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/app/page.tsx` around lines 65 - 74, The shortcut handler in useEffect
(handleKeyDown) compares e.key case-sensitively so it fails with Caps Lock on;
update the condition to be case-insensitive (e.g., compare e.key.toLowerCase()
=== 'k') or use the physical key code (e.code === 'KeyK') to detect the K key
regardless of Caps Lock, then keep the existing e.preventDefault() and
searchInputRef.current?.focus() behavior.
1 participant
What: Added a global keyboard shortcut (
Ctrl+K/Cmd+K) to focus the main search input on the Security Dashboard. Included a visual<kbd>hint inside the input box that adapts to the user's operating system (showing⌘on Mac andCtrlelsewhere).Why: Search inputs without a quick keyboard shortcut force users to navigate away from the keyboard to use the mouse to click into the search field. This reduces efficiency, especially for power users scanning through the security dashboard.
Before/After:
Accessibility: Added the
aria-keyshortcutsattribute to the search<Input>so screen readers can properly announce the available shortcut (e.g., "Meta+K" or "Control+K"). Next.js hydration mismatches were avoided by executing the OS detection strictly on the client side after the component mounts.PR created automatically by Jules for task 3979666548622218178 started by @corebrimtech
Summary by CodeRabbit