Flatten migrations, kvs lib, fix tabs

src-web/components/App.tsx

@@ -5,10 +5,11 @@ import { listen } from '@tauri-apps/api/event';
 import { MotionConfig } from 'framer-motion';
 import { HelmetProvider } from 'react-helmet-async';
 import { matchPath } from 'react-router-dom';
-import { keyValueQueryKey } from '../hooks/useKeyValues';
+import { keyValueQueryKey } from '../hooks/useKeyValue';
 import { requestsQueryKey } from '../hooks/useRequests';
 import { responsesQueryKey } from '../hooks/useResponses';
 import { DEFAULT_FONT_SIZE } from '../lib/constants';
+import { extractKeyValue } from '../lib/keyValueStore';
 import type { HttpRequest, HttpResponse, KeyValue } from '../lib/models';
 import { convertDates } from '../lib/models';
 import { AppRouter, WORKSPACE_REQUEST_PATH } from './AppRouter';
@@ -16,7 +17,7 @@ import { AppRouter, WORKSPACE_REQUEST_PATH } from './AppRouter';
 const queryClient = new QueryClient();
 
 await listen('updated_key_value', ({ payload: keyValue }: { payload: KeyValue }) => {
-  queryClient.setQueryData(keyValueQueryKey(keyValue), keyValue);
+  queryClient.setQueryData(keyValueQueryKey(keyValue), extractKeyValue(keyValue));
 });
 
 await listen('updated_request', ({ payload: request }: { payload: HttpRequest }) => {

src-web/components/RequestPane.tsx

@@ -1,7 +1,8 @@
 import classnames from 'classnames';
+import { act } from 'react-dom/test-utils';
 import { useActiveRequest } from '../hooks/useActiveRequest';
 import { useIsResponseLoading } from '../hooks/useIsResponseLoading';
-import { useKeyValues } from '../hooks/useKeyValues';
+import { useKeyValue } from '../hooks/useKeyValue';
 import { useSendRequest } from '../hooks/useSendRequest';
 import { useUpdateRequest } from '../hooks/useUpdateRequest';
 import { tryFormatJson } from '../lib/formatters';
@@ -21,7 +22,7 @@ export function RequestPane({ fullHeight, className }: Props) {
   const updateRequest = useUpdateRequest(activeRequest);
   const sendRequest = useSendRequest(activeRequest);
   const responseLoading = useIsResponseLoading();
-  const activeTab = useKeyValues({
+  const activeTab = useKeyValue<string>({
     key: ['active_request_body_tab', activeRequest?.id ?? 'n/a'],
     initialValue: 'body',
   });
@@ -61,7 +62,6 @@ export function RequestPane({ fullHeight, className }: Props) {
           { value: 'auth', label: 'Auth' },
         ]}
         className="mt-2"
-        defaultValue="body"
         label="Request body"
       >
         <TabContent value="headers">

src-web/components/Sidebar.tsx

@@ -3,10 +3,11 @@ import React, { useRef, useState } from 'react';
 import { useActiveRequest } from '../hooks/useActiveRequest';
 import { useCreateRequest } from '../hooks/useCreateRequest';
 import { useDeleteRequest } from '../hooks/useDeleteRequest';
-import { useKeyValues } from '../hooks/useKeyValues';
+import { useKeyValue } from '../hooks/useKeyValue';
 import { useRequests } from '../hooks/useRequests';
 import { useTheme } from '../hooks/useTheme';
 import { useUpdateRequest } from '../hooks/useUpdateRequest';
+import { clamp } from '../lib/clamp';
 import type { HttpRequest } from '../lib/models';
 import { Button } from './core/Button';
 import { Dropdown, DropdownMenuTrigger } from './core/Dropdown';
@@ -19,11 +20,12 @@ interface Props {
   className?: string;
 }
 
-const MIN_WIDTH = 130;
+const MIN_WIDTH = 110;
+const MAX_WIDTH = 500;
 
 export function Sidebar({ className }: Props) {
   const [isDragging, setIsDragging] = useState<boolean>(false);
-  const width = useKeyValues<number>({ key: 'sidebar_width', initialValue: 200 });
+  const width = useKeyValue<number>({ key: 'sidebar_width', initialValue: 200 });
   const requests = useRequests();
   const activeRequest = useActiveRequest();
   const createRequest = useCreateRequest({ navigateAfter: true });
@@ -43,7 +45,7 @@ export function Sidebar({ className }: Props) {
     const startWidth = width.value;
     moveState.current = {
       move: (e: MouseEvent) => {
-        const newWidth = Math.max(MIN_WIDTH, startWidth + (e.clientX - mouseStartX));
+        const newWidth = clamp(startWidth + (e.clientX - mouseStartX), MIN_WIDTH, MAX_WIDTH);
         width.set(newWidth);
       },
       up: () => {
@@ -73,8 +75,8 @@ export function Sidebar({ className }: Props) {
       >
         <div
           className={classnames(
-            'transition-colors w-[1px] group-hover:bg-white/10 h-full pointer-events-none',
-            isDragging && '!bg-white/20',
+            'transition-colors w-[1px] group-hover:bg-gray-300 h-full pointer-events-none',
+            isDragging && '!bg-blue-500/70',
           )}
         />
       </div>

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

@@ -10,7 +10,6 @@ import { HStack } from '../Stacks';
 import './Tabs.css';
 
 interface Props {
-  defaultValue?: string;
   label: string;
   onChangeValue: (value: string) => void;
   value: string;
@@ -31,7 +30,6 @@ interface Props {
 export function Tabs({
   value,
   onChangeValue,
-  defaultValue,
   label,
   children,
   tabs,
@@ -40,7 +38,7 @@ export function Tabs({
 }: Props) {
   return (
     <T.Root
-      defaultValue={defaultValue}
+      value={value}
       onValueChange={onChangeValue}
       className={classnames(className, 'h-full grid grid-rows-[auto_minmax(0,1fr)] grid-cols-1')}
     >