search

phasehq / console

Application secrets and configuration management for developers.
https://phase.dev
Other
459 stars 25 forks source link

Command palette (Ctrl + K) #304

Closed rohan-chaturvedi closed 1 month ago

rohan-chaturvedi commented 2 months ago

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:

Additional context

A native implementation using the headlessui dialog is preferred, but an external library such as react-cmdk could be used as well.

nishaaannnt commented 2 months ago

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 commented 2 months ago

@nishaaannnt it's all yours!

nishaaannnt commented 2 months ago

@rohan-chaturvedi image

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

rohan-chaturvedi commented 2 months ago

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?

nishaaannnt commented 2 months ago

@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.

nishaaannnt commented 2 months ago

@rohan-chaturvedi

https://github.com/user-attachments/assets/39d2c9d2-5749-49cb-855b-e8a67238862d

  1. Small ui changes are pending
  2. Some functionality is pending

Do this and let you know. But how does this look so far?

rohan-chaturvedi commented 2 months ago

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.

nishaaannnt commented 2 months ago

I think this looks better. Will start with the app navigation functionality

Screenshot 2024-07-28 at 12 41 44 PM Screenshot 2024-07-28 at 12 42 00 PM
nishaaannnt commented 2 months ago

@rohan-chaturvedi image

matched the ui and finished with the functionality. Let me know your thoughts