Many hotkey improvements

src-web/components/DialogContext.tsx

@@ -20,7 +20,7 @@ interface Actions {
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const DialogContext = createContext<State>({} as any);
+const DialogContext = createContext<State>({} as State);
 
 export const DialogProvider = ({ children }: { children: React.ReactNode }) => {
   const [dialogs, setDialogs] = useState<State['dialogs']>([]);

src-web/components/GrpcConnectionSetupPane.tsx

@@ -119,6 +119,11 @@ export function GrpcConnectionSetupPane({
     onGo();
   }, [activeRequest, onGo]);
 
+  const handleSend = useCallback(async () => {
+    if (activeRequest == null) return;
+    onSend({ message: activeRequest.message });
+  }, [activeRequest, onGo]);
+
   const tabs: TabItem[] = useMemo(
     () => [
       { value: 'message', label: 'Message' },
@@ -212,52 +217,52 @@ export function GrpcConnectionSetupPane({
               {select.options.find((o) => o.value === select.value)?.label ?? 'No Schema'}
             </Button>
           </RadioDropdown>
-          {!isStreaming && (
+          {methodType === 'client_streaming' || methodType === 'streaming' ? (
+            <>
+              {isStreaming && (
+                <>
+                  <IconButton
+                    className="border border-highlight"
+                    size="sm"
+                    title="Cancel"
+                    onClick={onCancel}
+                    icon="x"
+                  />
+                  <IconButton
+                    className="border border-highlight"
+                    size="sm"
+                    title="Commit"
+                    onClick={onCommit}
+                    icon="check"
+                  />
+                </>
+              )}
+              <IconButton
+                className="border border-highlight"
+                size="sm"
+                title={isStreaming ? 'Connect' : 'Send'}
+                hotkeyAction="grpc_request.send"
+                onClick={isStreaming ? handleSend : handleConnect}
+                icon={isStreaming ? 'sendHorizontal' : 'arrowUpDown'}
+              />
+            </>
+          ) : (
             <IconButton
               className="border border-highlight"
               size="sm"
               title={methodType === 'unary' ? 'Send' : 'Connect'}
               hotkeyAction="grpc_request.send"
-              onClick={handleConnect}
+              onClick={isStreaming ? onCancel : handleConnect}
               disabled={methodType === 'no-schema' || methodType === 'no-method'}
               icon={
                 isStreaming
-                  ? 'refresh'
+                  ? 'x'
                   : methodType.includes('streaming')
                   ? 'arrowUpDown'
                   : 'sendHorizontal'
               }
             />
           )}
-          {isStreaming && (
-            <IconButton
-              className="border border-highlight"
-              size="sm"
-              title="Cancel"
-              onClick={onCancel}
-              icon="x"
-              disabled={!isStreaming}
-            />
-          )}
-          {(methodType === 'client_streaming' || methodType === 'streaming') && isStreaming && (
-            <>
-              <IconButton
-                className="border border-highlight"
-                size="sm"
-                title="to-do"
-                onClick={onCommit}
-                icon="check"
-              />
-              <IconButton
-                className="border border-highlight"
-                size="sm"
-                title="to-do"
-                hotkeyAction="grpc_request.send"
-                onClick={() => onSend({ message: activeRequest.message ?? '' })}
-                icon="sendHorizontal"
-              />
-            </>
-          )}
         </HStack>
       </div>
       <Tabs

src-web/components/Sidebar.tsx

@@ -90,13 +90,17 @@ export function Sidebar({ className }: Props) {
     namespace: NAMESPACE_NO_SYNC,
   });
 
-  useHotKey('http_request.duplicate', async () => {
-    if (activeRequest?.model === 'http_request') {
-      await duplicateHttpRequest.mutateAsync();
-    } else {
-      await duplicateGrpcRequest.mutateAsync();
-    }
-  });
+  useHotKey(
+    'http_request.duplicate',
+    async () => {
+      if (activeRequest?.model === 'http_request') {
+        await duplicateHttpRequest.mutateAsync();
+      } else {
+        await duplicateGrpcRequest.mutateAsync();
+      }
+    },
+    { enable: !hidden },
+  );
 
   const isCollapsed = useCallback(
     (id: string) => collapsed.value?.[id] ?? false,
@@ -242,25 +246,29 @@ export function Sidebar({ className }: Props) {
   useKeyPressEvent('Backspace', handleDeleteKey);
   useKeyPressEvent('Delete', handleDeleteKey);
 
-  useHotKey('sidebar.focus', async () => {
-    // Hide the sidebar if it's already focused
-    if (!hidden && hasFocus) {
-      await hide();
-      return;
-    }
+  useHotKey(
+    'sidebar.focus',
+    async () => {
+      // Hide the sidebar if it's already focused
+      if (!hidden && hasFocus) {
+        await hide();
+        return;
+      }
 
-    // Show the sidebar if it's hidden
-    if (hidden) {
-      await show();
-    }
+      // Show the sidebar if it's hidden
+      if (hidden) {
+        await show();
+      }
 
-    // Select 0 index on focus if none selected
-    focusActiveRequest(
-      selectedTree != null && selectedId != null
-        ? { forced: { id: selectedId, tree: selectedTree } }
-        : undefined,
-    );
-  });
+      // Select 0 index on focus if none selected
+      focusActiveRequest(
+        selectedTree != null && selectedId != null
+          ? { forced: { id: selectedId, tree: selectedTree } }
+          : undefined,
+      );
+    },
+    { enable: !hidden },
+  );
 
   useKeyPressEvent('Enter', (e) => {
     if (!hasFocus) return;