[New Feature] Command Bar in Docs

[leecalcote]

Current Behavior

Layer5 has a number of products. Each product has many resources. Each project site has a site search for that specific project. Visitors cannot search across all products at the same time. time.

Desired Behavior

In MeshMap, there needs to be a command palette to search through all the possible available resources and MeshMap, that can be designs, filters and applications, that also can be components on the MeshMap from any number of registered components, that could be components from Visualizer.

Priority: start with Designer, move to Visualizer.

Implementation

1. Research the following two open source libraries:

• https://github.com/timc1/kbar (https://kbar.vercel.app)
• https://github.com/pacocoursey/cmdk (https://cmdk.paco.me/)

1. Support the following resources in Designer:
   (Resource type: what to display in the search preview)
   1. Meshery Catalog Design filenames: display owner and last modified date
   2. Meshery Catalog WASM Filter names: display owner and last modified date
   3. Meshery Integrations Models Names: display first portion of description
   4. Meshery Integrations Model Component Names: display first portion of description
   5. Meshery Integrations Model Policy Names: display first portion of description

Acceptance Criteria

1. Light and dark modes are supported.
2. On press of hotkey CMD+K (mac), CTL+K (win / lnx), the command bar is surfaced and displayed to the user.

Reference Implementations

• Spotlight search on Mac (CMD+spacebar)
• Google Drive's desktop app (OPTION+ALT+G)
• Search bar on Linux (alt+spacebar)
• ClickUp command bar (CMD+K)
• GitHub Command Palette (CMD+K)

---

Contributor Guide

• 🎨 Wireframes and designs for Layer5 site in Figma (open invite)