feat(web): add command palette fuzzy search #702
+1,503
−17
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Hey there! awesome repo, just hopped on opencode and stumbled across this 🙌🏻
Noticed there was a search models functionality and thought it could use some enhancements by adding a command palette with search, actions, grouping, etc to help with navigating through the list of models and providers
Previews:
(Grouping & Search by model in parent/child directories)
- Tap/Click & Responsive
- Fixed Search Icon Alignment in later commit
(Github External link & How to Use)
(Works with current theme handling)
Command Palette Features:
- Shortcut:
cmd+k/ctrl+k- Navigate into Browse Models/Providers to drill down
- Click/tap responsive
- Dark mode support
- Dynamically adjusts to displays
- Current section highlighted
- Click/tap to navigate
- Backspace to go back
- Enter to select/go forward
- esc/click off screen to close
- Browse Providers: Independent grouping of providers
- Models.Dev section: (external link to GitHub & how to use)
- Actions Section:
- Clear search: clears search query/param
- Clear sort: clears sort and order
- Reset Search: clears both search and sort
- Sort by: menu for sorting by columns on table with options for ascending/descending based on column
- Does not interfere with existing functionality
- No hardcoded values for models, providers, columns (for grouping and sorting menus)
- Dynamically adjusts to codebase changes
- Sort menu updates dynamically as columns are added/removed
Changes (5 files):
-
command-palette.ts-
command-palette-element.ts- Search icon for mobile added
- Relevant file(s):
index.css- Only displays search icon based on device width
- Relevant file(s):
render.tsx,index.ts,index.css- No new package dependencies
- Reuses existing styles and sort functionalities
- Reuses provider data/SVGs for logos in command palette
- Relevant Icon SVGs added for command palette (no tree-shaking icon packages used)
Thanks! 🙏🏻