feat: add command bar #2815
feat: add command bar #2815
Conversation
| name: 'Flags', | ||
| description: 'Manage feature flags', | ||
| route: '/flags', | ||
| keywords: ['flags', 'flags', 'feature'] |
There was a problem hiding this comment.
| keywords: ['flags', 'flags', 'feature'] | |
| keywords: ['flags', 'flag', 'feature'] |
There was a problem hiding this comment.
Probably flag could be deleted as it will be covered with flags
| } | ||
| ]; | ||
|
|
||
| const items = [ |
There was a problem hiding this comment.
Could prob move these outside the component. Not sure the impact though
There was a problem hiding this comment.
Probably it will be good but not critical.
There was a problem hiding this comment.
Just wonder if we could add namespaces here to have a quicker switcher. Something like flags production or segments staging
There was a problem hiding this comment.
const namespacedItems = useMemo(() => {
const namespaces = listNamespaces.data?.namespaces || [];
return namespaces.flatMap((namespace) => [
{
name: 'Flags ' + namespace.name,
description: 'Manage feature flags',
route: namespace.key + '/flags',
keywords: ['flags', 'feature']
},
{
name: 'Segments ' + namespace.name,
description: 'Manage segments',
route: namespace.key + '/segments',
keywords: ['segments']
},
{
name: 'Console ' + namespace.name,
description: 'Debug and test flags and segments',
route: namespace.key + '/console',
keywords: ['console', 'debug', 'test']
}
]);
}, [listNamespaces]);
Looks not such great but moving between is faster
| <Dialog | ||
| open={open} | ||
| onClose={setOpen} | ||
| className="fixed inset-0 z-10 overflow-y-auto p-4 pt-[15vh]" |
There was a problem hiding this comment.
| className="fixed inset-0 z-10 overflow-y-auto p-4 pt-[15vh]" | |
| className="fixed inset-0 z-20 overflow-y-auto p-4 pt-[15vh]" |
| onClose={setOpen} | ||
| className="fixed inset-0 z-10 overflow-y-auto p-4 pt-[15vh]" | ||
| > | ||
| <Dialog.Overlay className="fixed inset-0 backdrop-blur-[2px]" /> |
There was a problem hiding this comment.
| <Dialog.Overlay className="fixed inset-0 backdrop-blur-[2px]" /> | |
| <Dialog.Overlay className="bg-gray-500 fixed inset-0 bg-opacity-75" /> |
Just to have similar design as Flipt has for modal dialog.
|
@erka I made most of the changes requested and also added the ability to switch namespaces from the command bar. lmk what you think |
I like 'Switch Namespaces' a lot. Great idea! It looks minimalistic and works majestic. |
…mmand-k * 'command-k' of https://github.com/flipt-io/flipt: chore(deps): bump github.com/XSAM/otelsql from 0.27.0 to 0.29.0 (#2819) chore(deps): bump cuelang.org/go from 0.7.0 to 0.7.1 (#2820) chore(deps): bump go.opentelemetry.io/otel/exporters/zipkin (#2816) chore(deps): bump github.com/redis/go-redis/v9 from 9.4.0 to 9.5.1 (#2818) chore(deps): bump github.com/go-jose/go-jose/v3 from 3.0.1 to 3.0.2 (#2817)
Adds Command Bar to quickly jump around the app via
cmd+korctrl+kUses: https://cmdk.paco.me/
Currently supports navigating to:
In the future we could maybe extend this to support 'paging' so that you select
Flagsthen maybe it pops up with the last 5-10 last updated flags you can chose to quickly navigate to. Or maybe we add the ability to quickly toggle lightmode/darkmode for example.Either way this greatly increases the speed in which you can navigate through the app
Here's how it looks in darkmode:
