insane nice typechecking here

packages/desktop/src/components/KeyboardShortcutLabel.tsx

@@ -1,9 +1,14 @@
 import { Box, Paper, Typography } from '@mui/material';
 
+import { KeyboardShortcuts } from '../util/keyboard';
 import React from 'react';
 import { blueGrey } from '@mui/material/colors';
 
-export default function KeyboardShortcutLabel({ label }: { label: string }) {
+export default function KeyboardShortcutLabel({
+  label,
+}: {
+  label: keyof typeof KeyboardShortcuts;
+}) {
   return (
     <Paper
       elevation={0}

packages/desktop/src/components/Navbar.tsx

@@ -41,7 +41,7 @@ const Navbar = ({
     if (searchRef?.current) searchRef.current.focus();
   }, [searchRef]);
 
-  useKeyPressEvent(KeyboardShortcuts.search, onSearchFocus);
+  useKeyPressEvent(KeyboardShortcuts.search.shortcutKey, onSearchFocus);
 
   const rendersCount = useRendersCount();
   console.warn('RENDER COUNT | NAVBAR | ', rendersCount);
@@ -87,7 +87,7 @@ const Navbar = ({
 
         {isSearching && <CircularProgress size={20} />}
 
-        <KeyboardShortcutLabel label={KeyboardShortcuts.search} />
+        <KeyboardShortcutLabel label={KeyboardShortcuts.search.label} />
       </Stack>
 
       <Tooltip title={'Group conversation'}>

packages/desktop/src/util/keyboard.ts

@@ -1,3 +1,12 @@
-export enum KeyboardShortcuts {
-  search = '/',
-}
+type Shortcut = { label: string; shortcutKey: string };
+
+export const KeyboardShortcuts: Record<string, Shortcut> = {
+  search: {
+    label: '/',
+    shortcutKey: '/',
+  },
+  escape: {
+    shortcutKey: 'Escape',
+    label: 'esc',
+  },
+};