Store appearance in k/v

src-web/components/RequestPane.tsx

@@ -1,6 +1,7 @@
 import classnames from 'classnames';
 import { useActiveRequest } from '../hooks/useActiveRequest';
 import { useIsResponseLoading } from '../hooks/useIsResponseLoading';
+import { useKeyValues } from '../hooks/useKeyValues';
 import { useSendRequest } from '../hooks/useSendRequest';
 import { useUpdateRequest } from '../hooks/useUpdateRequest';
 import { tryFormatJson } from '../lib/formatters';
@@ -20,6 +21,10 @@ export function RequestPane({ fullHeight, className }: Props) {
   const updateRequest = useUpdateRequest(activeRequest);
   const sendRequest = useSendRequest(activeRequest);
   const responseLoading = useIsResponseLoading();
+  const activeTab = useKeyValues({
+    key: ['active_request_body_tab', activeRequest?.id ?? 'n/a'],
+    initialValue: 'body',
+  });
 
   if (activeRequest === null) return null;
 
@@ -35,6 +40,8 @@ export function RequestPane({ fullHeight, className }: Props) {
         loading={responseLoading}
       />
       <Tabs
+        value={activeTab.value}
+        onChangeValue={activeTab.set}
         tabs={[
           {
             value: 'body',

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

@@ -1,7 +1,6 @@
 import * as T from '@radix-ui/react-tabs';
 import classnames from 'classnames';
 import type { ReactNode } from 'react';
-import { useState } from 'react';
 import { Button } from '../Button';
 import type { DropdownMenuRadioItem, DropdownMenuRadioProps } from '../Dropdown';
 import { DropdownMenuRadio, DropdownMenuTrigger } from '../Dropdown';
@@ -13,6 +12,8 @@ import './Tabs.css';
 interface Props {
   defaultValue?: string;
   label: string;
+  onChangeValue: (value: string) => void;
+  value: string;
   tabs: {
     value: string;
     label: string;
@@ -27,12 +28,20 @@ interface Props {
   children: ReactNode;
 }
 
-export function Tabs({ defaultValue, label, children, tabs, className, tabListClassName }: Props) {
-  const [value, setValue] = useState(defaultValue);
+export function Tabs({
+  value,
+  onChangeValue,
+  defaultValue,
+  label,
+  children,
+  tabs,
+  className,
+  tabListClassName,
+}: Props) {
   return (
     <T.Root
       defaultValue={defaultValue}
-      onValueChange={setValue}
+      onValueChange={onChangeValue}
       className={classnames(className, 'h-full grid grid-rows-[auto_minmax(0,1fr)] grid-cols-1')}
     >
       <T.List