web: settings ui & const for settings type options

web/src/components/buttons/SettingsCheckbox.svelte

@@ -11,11 +11,14 @@
     export let settingContext: Context;
     export let settingId: Id;
 
+    export let title: string;
+    export let description: string = "";
+
     $: setting = $settings[settingContext][settingId];
     $: isChecked = !!setting;
 </script>
 
-<div>
+<div class="checkbox-container">
     <input
         type="checkbox"
         id="setting-button-{settingContext}-{String(settingId)}"
@@ -27,5 +30,29 @@
                 },
             })}
     />
-    <slot></slot>
+    <div class="checkbox-text">
+        <h4 class="checkbox-title">{title}</h4>
+
+        {#if description.length > 0}
+            <div class="subtext checkbox-description">{description}</div>
+        {/if}
+    </div>
 </div>
+
+<style>
+    .checkbox-container {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 10px;
+    }
+
+    .checkbox-text {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .checkbox-description {
+        font-size: 12px;
+    }
+</style>

web/src/components/buttons/Switcher.svelte

@@ -1,4 +1,8 @@
-<div id="switcher-container" class="switcher">
+<script lang="ts">
+    export let big: boolean = false;
+</script>
+
+<div id="switcher-container" class="switcher" class:big={big}>
     <slot></slot>
 </div>
 
@@ -23,6 +27,11 @@
         border-bottom-left-radius: 0;
     }
 
+    .switcher.big :global(.button) {
+        width: 100%;
+        height: 40px;
+    }
+
     .switcher > :global(:not(.button:first-child):not(.button:last-child)) {
         border-radius: 0;
     }