Skip to content

Conversation

@krishna9358
Copy link
Contributor

Summary

Issue

The selection highlight in the Spotlight (Command Palette) was previously too subtle, relying only on a faint background change (bg-accent). This made it difficult for users to distinguish the currently selected item, particularly in light mode or on screens with lower contrast.

Solution

This PR improves the visual feedback for the selected item in the Command Palette by:

  • Background Tint: Applying a primary/10 background color to the selected row, providing a clear but non-overwhelming highlight.
  • Left Border Indicator: Adding a 2px solid primary-colored left border (border-l-2) to the selected item, creating a distinct visual anchor.
  • Icon Highlighting: Changing the color of the leading icon and the trailing arrow to the primary color when selected.
  • Layout Stability: Ensuring unselected items maintain a transparent border to prevent any layout shifts when navigating through the list.

These changes ensure that the user's focus is immediately apparent even when quickly navigating the command palette.

Testing

  • bun run test
  • bun run lint
  • bun run typecheck
  • Additional notes:

Documentation

  • Updated the relevant doc(s) (see docs/guide.md) or checked that no updates are needed.
  • Recorded contract/architecture changes in both public docs and .ai logs when applicable.

Signed-off-by: Krishna Mohan <krishanmohank974@gmail.com>
@chatgpt-codex-connector
Copy link

Codex usage limits have been reached for code reviews. Please check with the admins of this repo to increase the limits by adding credits.
Credits must be used to enable repository wide code reviews.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants