Hotkey labels

src-web/components/RequestResponse.tsx

@@ -121,22 +121,8 @@ export const RequestResponse = memo(function RequestResponse({ style }: Props) {
     [width, height, vertical, setHeight, setWidth],
   );
 
-  if (activeRequest === null && requests.length > 0) {
-    return (
-      <div className="h-full flex items-center justify-center opacity-disabled">
-        <p>No Selected Request</p>
-      </div>
-    );
-  } else if (requests.length === 0) {
-    return (
-      <HotKeyList
-        hotkeys={[
-          { action: 'request.create', label: 'New Request' },
-          { action: 'sidebar.toggle', label: 'Toggle Sidebar' },
-          { action: 'urlBar.focus', label: 'Focus URL' },
-        ]}
-      />
-    );
+  if (activeRequest === null) {
+    return <HotKeyList hotkeys={['request.create', 'sidebar.toggle']} />;
   }
 
   return (

src-web/components/ResponsePane.tsx

@@ -104,12 +104,7 @@ export const ResponsePane = memo(function ResponsePane({ style, className }: Pro
         <>
           <span />
           <HotKeyList
-            hotkeys={[
-              { action: 'request.send', label: 'Send Request' },
-              { action: 'request.create', label: 'New Request' },
-              { action: 'sidebar.toggle', label: 'Toggle Sidebar' },
-              { action: 'urlBar.focus', label: 'Focus URL' },
-            ]}
+            hotkeys={['request.send', 'request.create', 'sidebar.toggle', 'urlBar.focus']}
           />
         </>
       )}

src-web/components/core/HotKeyLabel.tsx

@@ -0,0 +1,11 @@
+import type { HotkeyAction } from '../../hooks/useHotkey';
+import { useHotKeyLabel } from '../../hooks/useHotkey';
+
+interface Props {
+  action: HotkeyAction | null;
+}
+
+export function HotKeyLabel({ action }: Props) {
+  const label = useHotKeyLabel(action);
+  return <span>{label}</span>;
+}

src-web/components/core/HotKeyList.tsx

@@ -1,21 +1,20 @@
 import React from 'react';
 import type { HotkeyAction } from '../../hooks/useHotkey';
 import { HotKey } from './HotKey';
+import { HotKeyLabel } from './HotKeyLabel';
 
 interface Props {
-  hotkeys: { action: HotkeyAction; label: string }[];
+  hotkeys: HotkeyAction[];
 }
 
 export const HotKeyList = ({ hotkeys }: Props) => {
   return (
-    <div className="mx-auto h-full flex items-center text-gray-800 text-sm">
+    <div className="mx-auto h-full flex items-center text-gray-700 text-sm">
       <div className="flex flex-col gap-1">
         {hotkeys.map((hotkey) => (
-          <div key={hotkey.action} className="grid grid-cols-2">
-            <p>{hotkey.label}</p>
-            <div className="ml-auto">
-              <HotKey action={hotkey.action} />
-            </div>
+          <div key={hotkey} className="grid grid-cols-2">
+            <HotKeyLabel action={hotkey} />
+            <HotKey className="ml-auto" action={hotkey} />
           </div>
         ))}
       </div>

src-web/hooks/useHotkey.ts

@@ -90,7 +90,28 @@ export function useAnyHotkey(
       window.removeEventListener('keydown', down);
       window.removeEventListener('keyup', up);
     };
-  }, [os]);
+  }, [options.enable, os]);
+}
+
+export function useHotKeyLabel(action: HotkeyAction | null): string {
+  switch (action) {
+    case 'request.send':
+      return 'Send Request';
+    case 'request.create':
+      return 'New Request';
+    case 'request.duplicate':
+      return 'Duplicate Request';
+    case 'sidebar.toggle':
+      return 'Toggle Sidebar';
+    case 'sidebar.focus':
+      return 'Focus Sidebar';
+    case 'urlBar.focus':
+      return 'Focus URL';
+    case 'environmentEditor.toggle':
+      return 'Edit Environments';
+    default:
+      return 'Unknown';
+  }
 }
 
 export function useFormattedHotkey(action: HotkeyAction | null): string | null {