tabs in settings modal

packages/web/src/settings/SettingsModal.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import _ from 'lodash';
   import FormStyledButton from '../buttons/FormStyledButton.svelte';
+  import TabControl from '../elements/TabControl.svelte';
 
   import FormCheckboxField from '../forms/FormCheckboxField.svelte';
   import FormTextField from '../forms/FormTextField.svelte';
@@ -11,17 +12,24 @@
   import ModalBase from '../modals/ModalBase.svelte';
   import { closeCurrentModal } from '../modals/modalTools';
   import getElectron from '../utility/getElectron';
-  import { showSnackbarInfo } from '../utility/snackbar';
 
   const electron = getElectron();
   let restartWarning = false;
 </script>
 
 <SettingsFormProvider>
-  <ModalBase {...$$restProps}>
+  <ModalBase {...$$restProps} noPadding>
     <div slot="header">Settings</div>
 
     <FormValues let:values>
+      <TabControl
+        isInline
+        tabs={[
+          { label: 'General', slot: 1 },
+          { label: 'Themes', slot: 2 },
+        ]}
+      >
+        <svelte:fragment slot="1">
           {#if electron}
             <div class="heading">Appearance</div>
             <FormCheckboxField
@@ -61,6 +69,8 @@
             defaultValue="30"
             disabled={values['connection.autoRefresh'] === false}
           />
+        </svelte:fragment>
+      </TabControl>
     </FormValues>
 
     <div slot="footer">
@@ -74,5 +84,7 @@
   .heading {
     font-size: 20px;
     margin: 5px;
+    margin-left: var(--dim-large-form-margin);
+    margin-top: var(--dim-large-form-margin);
   }
 </style>