Move request-related settings to workspace

src-web/components/SettingsDialog.tsx

@@ -1,75 +1,73 @@
 import classNames from 'classnames';
+import { useActiveWorkspace } from '../hooks/useActiveWorkspace';
 import { useSettings } from '../hooks/useSettings';
-import { useTheme } from '../hooks/useTheme';
 import { useUpdateSettings } from '../hooks/useUpdateSettings';
-import type { Appearance } from '../lib/theme/window';
+import { useUpdateWorkspace } from '../hooks/useUpdateWorkspace';
 import { Checkbox } from './core/Checkbox';
 import { Input } from './core/Input';
-import { VStack } from './core/Stacks';
+import { HStack, VStack } from './core/Stacks';
 
 export const SettingsDialog = () => {
-  const { appearance, setAppearance } = useTheme();
+  const workspace = useActiveWorkspace();
+  const updateWorkspace = useUpdateWorkspace(workspace?.id ?? null);
   const settings = useSettings();
   const updateSettings = useUpdateSettings();
 
-  if (settings == null) {
+  if (settings == null || workspace == null) {
     return null;
   }
-  console.log('SETTINGS', settings);
 
   return (
     <VStack space={2}>
-      <div className="w-full gap-2 grid grid-cols-[auto_1fr] gap-x-6 auto-rows-[2rem] items-center">
+      <VStack className="w-full" space={3}>
         <Checkbox
-          className="col-span-full"
-          checked={settings.validateCertificates}
+          checked={workspace.settingValidateCertificates}
           title="Validate TLS Certificates"
-          onChange={(validateCertificates) =>
-            updateSettings.mutateAsync({ ...settings, validateCertificates })
+          onChange={(settingValidateCertificates) =>
+            updateWorkspace.mutateAsync({ settingValidateCertificates })
           }
         />
 
         <Checkbox
-          className="col-span-full"
-          checked={settings.followRedirects}
+          checked={workspace.settingFollowRedirects}
           title="Follow Redirects"
-          onChange={(followRedirects) =>
-            updateSettings.mutateAsync({ ...settings, followRedirects })
+          onChange={(settingFollowRedirects) =>
+            updateWorkspace.mutateAsync({ settingFollowRedirects })
           }
         />
 
-        <div>Request Timeout (ms)</div>
-        <div>
-          <Input
-            size="sm"
-            name="requestTimeout"
-            label="Request Timeout (ms)"
-            containerClassName="col-span-2"
-            hideLabel
-            defaultValue={`${settings.requestTimeout}`}
-            validate={(value) => parseInt(value) >= 0}
-            onChange={(v) =>
-              updateSettings.mutateAsync({ ...settings, requestTimeout: parseInt(v) || 0 })
-            }
-          />
-        </div>
+        <Input
+          size="xs"
+          name="requestTimeout"
+          label="Request Timeout (ms)"
+          labelPosition="left"
+          labelClassName="w-1/3"
+          containerClassName="col-span-2"
+          defaultValue={`${workspace.settingRequestTimeout}`}
+          validate={(value) => parseInt(value) >= 0}
+          onChange={(v) => updateWorkspace.mutateAsync({ settingRequestTimeout: parseInt(v) || 0 })}
+        />
 
-        <div>Appearance</div>
-        <select
-          value={settings.appearance}
-          style={selectBackgroundStyles}
-          onChange={(e) => updateSettings.mutateAsync({ ...settings, appearance: e.target.value })}
-          className={classNames(
-            'border w-full px-2 outline-none bg-transparent',
-            'border-highlight focus:border-focus',
-            'h-sm',
-          )}
-        >
-          <option value="system">Match System</option>
-          <option value="light">Light</option>
-          <option value="dark">Dark</option>
-        </select>
-      </div>
+        <HStack alignItems="center" space={2}>
+          <div className="w-1/3">Appearance</div>
+          <select
+            value={settings.appearance}
+            style={selectBackgroundStyles}
+            onChange={(e) =>
+              updateSettings.mutateAsync({ ...settings, appearance: e.target.value })
+            }
+            className={classNames(
+              'font-mono text-xs border w-full px-2 outline-none bg-transparent',
+              'border-highlight focus:border-focus',
+              'h-xs',
+            )}
+          >
+            <option value="system">Match System</option>
+            <option value="light">Light</option>
+            <option value="dark">Dark</option>
+          </select>
+        </HStack>
+      </VStack>
       {/*<Checkbox checked={appearance === 'dark'} title="Dark Mode" onChange={toggleAppearance} />*/}
     </VStack>
   );