Global command palette (⌘K)#64
Conversation
Spotlight search mounted app-wide: ⌘K or the sidebar Search button opens a palette that searches pages, clips, and assets, with keyboard nav.
|
Warning Review limit reached
Next review available in: 49 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughThis PR adds a new ChangesCommand Palette
Estimated code review effort: 2 (Simple) | ~15 minutes Sequence Diagram(s)sequenceDiagram
participant User
participant Layout
participant CommandPalette
participant HistoryAPI as "/history"
participant AssetsAPI as "/assets"
User->>Layout: Click Search button or Ctrl/Cmd+K
Layout->>CommandPalette: dispatch open-command-palette event
CommandPalette->>HistoryAPI: fetch /history?limit=100
CommandPalette->>AssetsAPI: fetch /assets
HistoryAPI-->>CommandPalette: clip history data
AssetsAPI-->>CommandPalette: asset entries
CommandPalette->>CommandPalette: build grouped Cmd results
User->>CommandPalette: type query / arrow keys / Enter
CommandPalette->>CommandPalette: filter, navigate, execute command
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ 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
🧹 Nitpick comments (2)
src/ui/client/CommandPalette.tsx (1)
111-158: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winAdd dialog ARIA semantics for the overlay.
The palette acts as a modal but lacks
role="dialog"/aria-modal="true"and an accessible label for the input, so screen readers won't announce it properly when opened.♿ Proposed ARIA additions
<div className="cmdk-overlay" onClick={close}> - <div className="cmdk" onClick={(e) => e.stopPropagation()}> + <div className="cmdk" role="dialog" aria-modal="true" aria-label="Command palette" onClick={(e) => e.stopPropagation()}> <div className="cmdk-head"> <Search size={17} className="cmdk-search-icon" /> <input ref={inputRef} + aria-label="Search pages, clips, and assets" value={query}🤖 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/ui/client/CommandPalette.tsx` around lines 111 - 158, The command palette overlay is functioning as a modal, but the root element returned by CommandPalette lacks dialog semantics and the input is unlabeled for assistive tech. Update the createPortal markup in CommandPalette to add role="dialog" and aria-modal="true" on the .cmdk container (or the modal root), and provide an accessible name via aria-label or aria-labelledby tied to the existing header/search area. Also add an explicit label for the input in the cmdk-head section so screen readers announce what the field is for.src/ui/client/Layout.tsx (1)
54-59: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueAdd ARIA attributes for the search trigger.
The button opens a modal-like command palette but lacks
aria-haspopup/aria-expanded, and the⌘Khint is hardcoded regardless of platform (Windows/Linux users use Ctrl+K). Neither is a functional blocker but both affect accessibility/UX polish for a command palette meant to be used app-wide.♻️ Suggested improvement
- <button className="sidebar-search" onClick={() => window.dispatchEvent(new Event("open-command-palette"))}> + <button + className="sidebar-search" + aria-haspopup="dialog" + onClick={() => window.dispatchEvent(new Event("open-command-palette"))} + > <Search className="ico" strokeWidth={1.8} size={15} /> <span>Search</span> - <kbd>⌘K</kbd> + <kbd>{navigator.platform.includes("Mac") ? "⌘K" : "Ctrl K"}</kbd> </button>🤖 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/ui/client/Layout.tsx` around lines 54 - 59, The sidebar search trigger in Layout should expose proper command-palette accessibility state and a platform-appropriate shortcut hint. Update the button in Layout to include ARIA metadata such as aria-haspopup and aria-expanded, wiring the expanded state to the command palette visibility or open event source, and replace the hardcoded “⌘K” display with a platform-aware shortcut label that shows Ctrl+K on Windows/Linux and Cmd+K on macOS. Keep the changes localized to the search button markup and any helper used to detect the current platform.
🤖 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/ui/client/CommandPalette.tsx`:
- Line 73: The highlighted item in CommandPalette can get out of sync because
active is only reset when query changes, not when the results list updates as
clips/assets finish loading. Update the CommandPalette selection logic so active
is reset or clamped whenever the underlying results change, not just on query,
and adjust the related effect/order around the results rendering logic in
CommandPalette to keep the highlighted and Enter-selected item aligned with the
current list.
- Around line 64-71: The CommandPalette useEffect is marking loaded.current true
before the /history and /assets requests succeed, so a failed fetch permanently
prevents Clips/Assets from loading. Update the CommandPalette logic so each
source can retry when it fails: only set the loaded flag after successful
resolution, or track separate success/error state for the history and assets
requests in the useEffect callback. Also avoid swallowing errors silently so
reopen attempts can trigger another fetch.
---
Nitpick comments:
In `@src/ui/client/CommandPalette.tsx`:
- Around line 111-158: The command palette overlay is functioning as a modal,
but the root element returned by CommandPalette lacks dialog semantics and the
input is unlabeled for assistive tech. Update the createPortal markup in
CommandPalette to add role="dialog" and aria-modal="true" on the .cmdk container
(or the modal root), and provide an accessible name via aria-label or
aria-labelledby tied to the existing header/search area. Also add an explicit
label for the input in the cmdk-head section so screen readers announce what the
field is for.
In `@src/ui/client/Layout.tsx`:
- Around line 54-59: The sidebar search trigger in Layout should expose proper
command-palette accessibility state and a platform-appropriate shortcut hint.
Update the button in Layout to include ARIA metadata such as aria-haspopup and
aria-expanded, wiring the expanded state to the command palette visibility or
open event source, and replace the hardcoded “⌘K” display with a platform-aware
shortcut label that shows Ctrl+K on Windows/Linux and Cmd+K on macOS. Keep the
changes localized to the search button markup and any helper used to detect the
current platform.
🪄 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: defaults
Review profile: CHILL
Plan: Pro
Run ID: c1f4ab13-5bb5-424c-8b01-e867b0c0dae2
📒 Files selected for processing (3)
src/ui/client/CommandPalette.tsxsrc/ui/client/Layout.tsxsrc/ui/public/css/styles.css
1 participant
A spotlight-style global search across the studio, replacing the page-scoped Assets search. Press ⌘K (or the sidebar Search button) on any page to search Pages, Clips, and Assets, with arrow-key navigation and Enter to jump. Built with the existing design tokens.
Summary by CodeRabbit