Skip to content

[UI/UX Design] Design a Command Palette grouped-results and recent-actions section #499

Description

@thlpkee20-wq

Description

The command palette benefits from grouped result sections (Navigate, Actions, Settings, Recent). Design the grouped result rendering with section headers, per-section result limits, and a Recent Actions section that surfaces the user's five most-recent commands.

Requirements and context

  • Must be accessible (WCAG 2.1 AA), responsive, and documented in the design system
  • Should be consistent with existing patterns and easy to review
  • Relevant code: src/components/KeyboardShortcutsOverlay
  • Recent actions must be per-user and cleared on sign-out

Suggested execution

  • Fork the repo and create a branch
  • git checkout -b uiux/command-palette-grouped-results
  • Implement changes
    • Design section header anatomy and result row states
    • Specify recent-actions limit and clear-history control
    • Draft empty-query state that emphasizes recents
  • Validate accessibility and responsive assumptions

Test and commit

  • Run checks
    • npm run lint and component/visual tests
  • Cover edge cases
    • No recent history, high query result count, RTL layout
  • Include screenshots/before-after and accessibility (axe) notes

Example commit message

design: command palette grouped results

Guidelines

  • Minimum 95 percent test coverage
  • Clear documentation
  • Timeframe: 96 hours

Metadata

Metadata

Assignees

Labels

Stellar WaveStellar Wave issue batch

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions