Separate active tabs per request

src-web/components/RequestPane.tsx

@@ -54,11 +54,13 @@ interface Props {
   activeRequest: HttpRequest;
 }
 
-const useActiveTab = createGlobalState<string>('body');
+const useActiveTab = createGlobalState<Record<string, string>>({});
+
 const TAB_BODY = 'body';
 const TAB_PARAMS = 'params';
 const TAB_HEADERS = 'headers';
 const TAB_AUTH = 'auth';
+const DEFAULT_TAB = TAB_BODY;
 
 export const RequestPane = memo(function RequestPane({
   style,
@@ -69,7 +71,7 @@ export const RequestPane = memo(function RequestPane({
   const requests = useRequests();
   const activeRequestId = activeRequest.id;
   const updateRequest = useUpdateAnyHttpRequest();
-  const [activeTab, setActiveTab] = useActiveTab();
+  const [activeTabs, setActiveTabs] = useActiveTab();
   const [forceUpdateHeaderEditorKey, setForceUpdateHeaderEditorKey] = useState<number>(0);
   const { updateKey: forceUpdateKey } = useRequestUpdateKey(activeRequest.id ?? null);
   const contentType = useContentTypeFromHeaders(activeRequest.headers);
@@ -298,6 +300,14 @@ export const RequestPane = memo(function RequestPane({
   const { updateKey } = useRequestUpdateKey(activeRequestId ?? null);
   const importCurl = useImportCurl();
 
+  const activeTab = activeTabs[activeRequestId] ?? DEFAULT_TAB;
+  const setActiveTab = useCallback(
+    (tab: string) => {
+      setActiveTabs((r) => ({ ...r, [activeRequest.id]: tab }));
+    },
+    [activeRequest.id, setActiveTabs],
+  );
+
   useRequestEditorEvent('request_pane.focus_tab', () => {
     setActiveTab(TAB_PARAMS);
   });

src-web/components/ResponsePane.tsx

@@ -1,7 +1,7 @@
 import type { HttpRequest } from '@yaakapp/api';
 import classNames from 'classnames';
 import type { CSSProperties } from 'react';
-import { memo, useMemo } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 import { createGlobalState } from 'react-use';
 import { useContentTypeFromHeaders } from '../hooks/useContentTypeFromHeaders';
 import { usePinnedHttpResponse } from '../hooks/usePinnedHttpResponse';
@@ -34,18 +34,30 @@ interface Props {
   activeRequest: HttpRequest;
 }
 
-const useActiveTab = createGlobalState<string>('body');
+const useActiveTab = createGlobalState<Record<string, string>>({});
+
+const TAB_BODY = 'body';
+const TAB_HEADERS = 'headers';
+const TAB_INFO = 'info';
+const DEFAULT_TAB = TAB_BODY;
 
 export const ResponsePane = memo(function ResponsePane({ style, className, activeRequest }: Props) {
   const { activeResponse, setPinnedResponseId, responses } = usePinnedHttpResponse(activeRequest);
   const [viewMode, setViewMode] = useResponseViewMode(activeResponse?.requestId);
-  const [activeTab, setActiveTab] = useActiveTab();
+  const [activeTabs, setActiveTabs] = useActiveTab();
   const contentType = useContentTypeFromHeaders(activeResponse?.headers ?? null);
+  const activeTab = activeTabs[activeRequest.id] ?? DEFAULT_TAB;
+  const setActiveTab = useCallback(
+    (tab: string) => {
+      setActiveTabs((r) => ({ ...r, [activeRequest.id]: tab }));
+    },
+    [activeRequest.id, setActiveTabs],
+  );
 
   const tabs = useMemo<TabItem[]>(
     () => [
       {
-        value: 'body',
+        value: TAB_BODY,
         label: 'Preview Mode',
         options: {
           value: viewMode,
@@ -57,6 +69,7 @@ export const ResponsePane = memo(function ResponsePane({ style, className, activ
         },
       },
       {
+        value: TAB_HEADERS,
         label: (
           <div className="flex items-center">
             Headers
@@ -65,11 +78,10 @@ export const ResponsePane = memo(function ResponsePane({ style, className, activ
             />
           </div>
         ),
-        value: 'headers',
       },
       {
+        value: TAB_INFO,
         label: 'Info',
-        value: 'info',
       },
     ],
     [activeResponse?.headers, contentType, setViewMode, viewMode],

src-web/components/core/Tabs/Tabs.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import type { ReactNode } from 'react';
-import { memo, useCallback, useEffect, useRef } from 'react';
+import { memo, useCallback, useRef } from 'react';
 import { Icon } from '../Icon';
 import type { RadioDropdownProps } from '../RadioDropdown';
 import { RadioDropdown } from '../RadioDropdown';
@@ -60,11 +60,6 @@ export function Tabs({
     [onChangeValue],
   );
 
-  useEffect(() => {
-    if (value === undefined) return;
-    handleTabChange(value);
-  }, [handleTabChange, value]);
-
   return (
     <div
       ref={ref}