feat(#17): add shortcuts

README.md

@@ -18,6 +18,7 @@
 ## Features
 ✅ Localy persisted collections.  
 ✅ Multi-tabs.  
+✅ Shrotcuts.  
 ✅ Environments.  
 
 **gRPC**  
@@ -40,6 +41,10 @@ Install the latest version for your OS from [release page](https://github.com/ge
 
 Today you can update only by manually downloading new app version and reinstalling it. I'm working on automatic updates.
 
+## Shortcuts
+
+Use `⌘+K` (macOS) or `ctrl+K`(windows/linux), just try it.
+
 ## Working with 64-bit integers
 If you want to send 64-bit integers (`int64`, `uint64`, `sint64`, `fixed64`, `sfixed64`) just wrap values in quotes.
 

package.json

@@ -46,6 +46,7 @@
     "electron-squirrel-startup": "1.0.0",
     "electron-store": "8.1.0",
     "immer": "9.0.15",
+    "kbar": "0.1.0-beta.36",
     "lodash": "4.17.21",
     "nanoid": "4.0.0",
     "re-resizable": "6.9.9",

src/app/components/index.ts

@@ -10,3 +10,4 @@ export * from './tree';
 export * from './file-input';
 export * from './notification';
 export * from './info-label';
+export * from './kbar';

src/app/components/kbar/index.ts

@@ -0,0 +1 @@
+export * from './kbar';

src/app/components/kbar/kbar.styled.ts

@@ -0,0 +1,76 @@
+import { styled } from '@nextui-org/react';
+import { KBarAnimator, KBarPositioner, KBarSearch } from 'kbar';
+
+export const StyledKBarPositioner = styled(KBarPositioner, {
+  zIndex: '$max',
+});
+
+export const StyledKBarAnimator = styled(KBarAnimator, {
+  maxWidth: '500px',
+  width: '100%',
+  background: '$backgroundContrast',
+  color: '$text',
+  borderRadius: '8px',
+  overflow: 'hidden',
+  boxShadow: '$xl',
+});
+
+export const StyledKBarSearch = styled(KBarSearch, {
+  padding: '12px 16px',
+  fontFamily: '$sans',
+  fontSize: '16px',
+  width: '100%',
+  boxSizing: 'border-box',
+  outline: 'none',
+  border: 'none',
+  background: '$backgroundContrast',
+  color: '$text',
+});
+
+export const StyledGroupName = styled('div', {
+  padding: '8px 16px',
+  fontSize: '10px',
+  textTransform: 'uppercase',
+  opacity: 0.5,
+});
+
+export const StyledResultItem = styled('div', {
+  padding: '12px 16px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  cursor: 'pointer',
+
+  variants: {
+    active: {
+      true: {
+        backgroundColor: '$accents1',
+        borderLeft: '2px solid $foreground',
+      },
+      false: {
+        backgroundColor: 'transparent',
+        borderLeft: '2px solid transparent',
+      },
+    },
+  },
+});
+
+export const StyledActionWrapper = styled('div', {
+  display: 'flex',
+  gap: '8px',
+  alignItems: 'center',
+  fontSize: 14,
+});
+
+export const StyledShortcutWrapper = styled('div', {
+  display: 'grid',
+  gridAutoFlow: 'column',
+  gap: '4px',
+});
+
+export const StyledKbd = styled('kbd', {
+  padding: '4px 6px',
+  background: 'rgba(0 0 0 / .1)',
+  borderRadius: '4px',
+  fontSize: 14,
+});