#446 - Enhance tab management and global hotkeys functionality

giemic8 · giemic8 · commit 9f6eec431109 · 2025-10-08T22:38:54.000+02:00
diff --git a/src/renderer/components/mainWindow/MainBody.tsx b/src/renderer/components/mainWindow/MainBody.tsx
@@ -1,11 +1,39 @@
 import { InputTabs } from '@/components/mainWindow/bodyTabs/InputTabs/InputTabs';
 import { OutputTabs } from '@/components/mainWindow/bodyTabs/OutputTabs';
+import { useState, useCallback } from 'react';
+import { useGlobalHotkeys } from '@/hooks/useGlobalHotkeys';
 
 export function MainBody() {
+  const [activeRequestTab, setActiveRequestTab] = useState<number | undefined>();
+  const [activeResponseTab, setActiveResponseTab] = useState<number | undefined>();
+
+  const handleRequestTabSwitch = useCallback((tabIndex: number) => {
+    setActiveRequestTab(tabIndex);
+    setTimeout(() => setActiveRequestTab(undefined), 100);
+  }, []);
+
+  const handleResponseTabSwitch = useCallback((tabIndex: number) => {
+    setActiveResponseTab(tabIndex);
+    setTimeout(() => setActiveResponseTab(undefined), 100);
+  }, []);
+
+  useGlobalHotkeys({
+    onSwitchRequestTab: handleRequestTabSwitch,
+    onSwitchResponseTab: handleResponseTabSwitch,
+  });
+
   return (
     <div className="grid h-full grid-rows-[48%_48%] gap-6 xl:grid-cols-2 xl:grid-rows-1">
-      <InputTabs className="min-h-0 min-w-0" />
-      <OutputTabs className="min-h-0 min-w-0" />
+      <InputTabs
+        className="min-h-0 min-w-0"
+        activeTab={activeRequestTab}
+        onTabChange={() => setActiveRequestTab(undefined)}
+      />
+      <OutputTabs
+        className="min-h-0 min-w-0"
+        activeTab={activeResponseTab}
+        onTabChange={() => setActiveResponseTab(undefined)}
+      />
     </div>
   );
 }
diff --git a/src/renderer/components/mainWindow/MainTopBar.tsx b/src/renderer/components/mainWindow/MainTopBar.tsx
@@ -12,17 +12,25 @@ import { useResponseActions } from '@/state/responseStore';
 import { ArrowRight, Loader2 } from 'lucide-react';
 import { showError } from '@/error/errorHandler';
 import { REQUEST_MODEL } from '@/lib/monaco/models';
+import { useGlobalHotkeys } from '@/hooks/useGlobalHotkeys';
+import { NamingModal } from '@/components/sidebar/SidebarRequestList/Nav/Dropdown/modals/NamingModal';
+import { Collection } from 'shim/objects/collection';
 
 const httpService = HttpService.instance;
 const eventService = RendererEventService.instance;
 
 export function MainTopBar() {
   const [hasError, setHasError] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
+  const [modalState, setModalState] = useState({
+    isOpen: false,
+    type: 'request' as 'request' | 'folder',
+  });
 
   const { updateRequest } = useCollectionActions();
   const { addResponse } = useResponseActions();
   const request = useCollectionStore(selectRequest);
+  const collection = useCollectionStore((state) => state.collection);
   const selectedHttpMethod = request?.method;
   const url = request?.url;
 
@@ -62,57 +70,54 @@ export function MainTopBar() {
     useErrorHandler(async () => {
       if (request == null) return;
 
-      // save request draft with the current editor content
       console.info('Saving request:', request);
       await eventService.saveRequest(request, REQUEST_MODEL.getValue());
-
-      // override existing request with the saved draft
       updateRequest(await eventService.saveChanges(request), true);
     }),
     [request]
   );
 
-  // useEffect to reset error state when URL and method are valid
+  const openRequestModal = () => setModalState({ isOpen: true, type: 'request' });
+
+  useGlobalHotkeys({
+    onSendRequest: sendRequest,
+    onSaveRequest: saveRequest,
+    onCreateNewRequest: openRequestModal,
+  });
+
   useEffect(() => {
     if (request?.url && request?.method) {
       setHasError(false);
     }
   }, [request]);
 
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      //isSaveShortcut is true if save combination is recorded
-      const isSaveShortcut = (event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 's';
-      //if save combination is pressed and request is in draft mode, perform save
-      if (isSaveShortcut && request?.draft) {
-        event.preventDefault();
-        saveRequest();
-      }
-    };
-    //add keyboard event listener
-    window.addEventListener('keydown', handleKeyDown);
-    //cleanup
-    return () => {
-      window.removeEventListener('keydown', handleKeyDown);
-    };
-  }, [saveRequest]);
-
   return (
-    <div className="mb-[24px] flex gap-6">
-      <div className="relative flex w-full">
-        <HttpMethodSelect
-          selectedHttpMethod={selectedHttpMethod}
-          onHttpMethodChange={handleHttpMethodChange}
-        />
-
-        <UrlInput url={url} onUrlChange={handleUrlChange} hasError={hasError} />
-
-        <SaveButton isDisabled={!request?.draft} onClick={saveRequest} />
+    <>
+      <div className="mb-[24px] flex gap-6">
+        <div className="relative flex w-full">
+          <HttpMethodSelect
+            selectedHttpMethod={selectedHttpMethod}
+            onHttpMethodChange={handleHttpMethodChange}
+          />
+
+          <UrlInput url={url} onUrlChange={handleUrlChange} hasError={hasError} />
+
+          <SaveButton isDisabled={!request?.draft} onClick={saveRequest} />
+        </div>
+
+        <SendButton onClick={sendRequest} disabled={isLoading}>
+          {isLoading ? <Loader2 className="h-5 w-5 animate-spin" /> : <ArrowRight />}
+        </SendButton>
       </div>
 
-      <SendButton onClick={sendRequest} disabled={isLoading}>
-        {isLoading ? <Loader2 className="h-5 w-5 animate-spin" /> : <ArrowRight />}
-      </SendButton>
-    </div>
+      {modalState.isOpen && (
+        <NamingModal
+          isOpen={modalState.isOpen}
+          trufosObject={collection as Collection}
+          createType={modalState.type}
+          setOpen={(open) => setModalState({ isOpen: open, type: modalState.type })}
+        />
+      )}
+    </>
   );
 }
diff --git a/src/renderer/components/mainWindow/bodyTabs/InputTabs/InputTabs.tsx b/src/renderer/components/mainWindow/bodyTabs/InputTabs/InputTabs.tsx
@@ -1,5 +1,5 @@
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { useMemo } from 'react';
+import { useMemo, useState, useEffect } from 'react';
 import { selectRequest, useCollectionStore } from '@/state/collectionStore';
 import { HeaderTab } from '@/components/mainWindow/bodyTabs/InputTabs/tabs/HeaderTab/HeaderTab';
 import { BodyTab } from '@/components/mainWindow/bodyTabs/InputTabs/tabs/BodyTab';
@@ -8,10 +8,15 @@ import { AuthorizationTab } from '@/components/mainWindow/bodyTabs/InputTabs/tab
 
 interface InputTabsProps {
   className: string;
+  activeTab?: number;
+  onTabChange?: (tabIndex: number) => void;
 }
 
+const TAB_VALUES = ['body', 'queryParams', 'headers', 'authorization'];
+
 export function InputTabs(props: Readonly<InputTabsProps>) {
-  const { className } = props;
+  const { className, activeTab, onTabChange } = props;
+  const [currentTab, setCurrentTab] = useState('body');
 
   const headers = useCollectionStore((state) => selectRequest(state).headers);
 
@@ -20,8 +25,23 @@ export function InputTabs(props: Readonly<InputTabsProps>) {
     [headers]
   );
 
+  // Handle programmatic tab changes
+  useEffect(() => {
+    if (activeTab !== undefined && TAB_VALUES[activeTab]) {
+      setCurrentTab(TAB_VALUES[activeTab]);
+    }
+  }, [activeTab]);
+
+  const handleTabChange = (value: string) => {
+    setCurrentTab(value);
+    const tabIndex = TAB_VALUES.indexOf(value);
+    if (tabIndex !== -1) {
+      onTabChange?.(tabIndex);
+    }
+  };
+
   return (
-    <Tabs className={className} defaultValue="body">
+    <Tabs className={className} value={currentTab} onValueChange={handleTabChange}>
       <TabsList>
         <TabsTrigger value="body">Body</TabsTrigger>
         <TabsTrigger value="queryParams">Params</TabsTrigger>
diff --git a/src/renderer/components/mainWindow/bodyTabs/OutputTabs.tsx b/src/renderer/components/mainWindow/bodyTabs/OutputTabs.tsx
@@ -46,15 +46,20 @@ function getContentType(headers?: HttpHeaders) {
 
 interface OutputTabsProps {
   className: string;
+  activeTab?: number;
+  onTabChange?: (tabIndex: number) => void;
 }
 
-export function OutputTabs({ className }: OutputTabsProps) {
+const OUTPUT_TAB_VALUES = ['body', 'header'];
+
+export function OutputTabs({ className, activeTab, onTabChange }: OutputTabsProps) {
   const { setResponseEditor, formatResponseEditorText } = useResponseActions();
   const editor = useResponseStore((state) => state.editor);
   const requestId = useCollectionStore((state) => selectRequest(state)?.id);
   const response = useResponseStore((state) => selectResponse(state, requestId));
 
   const [editorLanguage, setEditorLanguage] = useState<string | undefined>();
+  const [currentTab, setCurrentTab] = useState('body');
 
   const mimeType = useMemo(() => {
     const contentType = getContentType(response?.headers);
@@ -98,8 +103,23 @@ export function OutputTabs({ className }: OutputTabsProps) {
     }
   }, [requestId, canFormatResponseBody, formatResponseEditorText]);
 
+  // Handle programmatic tab changes
+  useEffect(() => {
+    if (activeTab !== undefined && OUTPUT_TAB_VALUES[activeTab]) {
+      setCurrentTab(OUTPUT_TAB_VALUES[activeTab]);
+    }
+  }, [activeTab]);
+
+  const handleTabChange = (value: string) => {
+    setCurrentTab(value);
+    const tabIndex = OUTPUT_TAB_VALUES.indexOf(value);
+    if (tabIndex !== -1) {
+      onTabChange?.(tabIndex);
+    }
+  };
+
   return (
-    <Tabs className={className} defaultValue="body">
+    <Tabs className={className} value={currentTab} onValueChange={handleTabChange}>
       <TabsList className="flex items-center justify-between">
         <div className="flex">
           <TabsTrigger value="body">Response Body</TabsTrigger>
diff --git a/src/renderer/hooks/useGlobalHotkeys.ts b/src/renderer/hooks/useGlobalHotkeys.ts
