phasehq
Command palette (Ctrl + K)
Is your feature request related to a problem?
The UI navigation for performing certain actions sometimes requires multiple clicks and page loads.
Describe the solution you'd like
A command palette, such as the one in Linear. Pressing Ctrl + K (or ⌘ + K on Mac) should bring up a list of commands, with an autocomplete search bar.
Screencast from 07-26-2024 08:34:07 PM.webm
The commands should include common actions, as well as navigation to resources within the current workspace:
- Create an App
- Navigate to an App
- Navigate to an Environment
- Open Integrations
- Create a new Integration
- View logs
- Invite a User
- Manage Organisation Users
- Navigate to Settings
- Toggle dark / light theme
Additional context
A native implementation using the headlessui dialog is preferred, but an external library such as react-cmdk could be used as well.
Hello, @rohan-chaturvedi , we would like to work on this issue under Fosshack 2024. Me and my teammate @viku3150 are well versed with the tech stack and the codebase and hence would like to take this forward. Please assign us for the same. Thank you.
@rohan-chaturvedi
Wanted to know about the navigations. But what do you think of this right now. I researched about the CSS and found no way to change its style
Functionality looks awesome, but not too sure about the UI. Is it feasible to use a native implementation, using either the GenericDialog component or atleast the headlessui Dialog with our own design language?
@rohan-chaturvedi maybe i will be using this . Custom style is possible in this
EDIT: The package is not maintained so not going with that. Follow this video with headless ui and custom CSS.
@rohan-chaturvedi
https://github.com/user-attachments/assets/39d2c9d2-5749-49cb-855b-e8a67238862d
- Small ui changes are pending
- Some functionality is pending
Do this and let you know. But how does this look so far?
Coming along well! We can fine tune the UI a bit once you have a PR. Check out the search on our docs for a good baseline on colors, spacing etc.
I think this looks better. Will start with the app navigation functionality
@rohan-chaturvedi
matched the ui and finished with the functionality. Let me know your thoughts