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;
     }

web/src/components/settings/SettingsCategory.svelte

@@ -1,55 +1,21 @@
 <script lang="ts">
-    import { page } from "$app/stores";
-
-    export let categoryName: string;
-    export let categoryLink: string;
-    export let iconColor: "gray" | "blue" | "green" = "gray";
-
-    $: isActive = $page.url.pathname === `/settings/${categoryLink}`;
+    export let title: string;
+    export let description: string = "";
 </script>
 
-<a
-    id="settings-category"
-    href="/settings/{categoryLink}"
-    class:active={isActive}
->
-    <div id="category-icon" style="background: var(--{iconColor})">
-        <slot></slot>
-    </div>
-    <span>{categoryName}</span>
-</a>
+<div class="settings-content">
+    <h3 class="settings-content-title">{title}</h3>
+    <slot></slot>
+
+    {#if description.length > 0}
+        <div class="settings-content-description subtext">{description}</div>
+    {/if}
+</div>
 
 <style>
-    #settings-category {
+    .settings-content {
         display: flex;
-        flex-direction: row;
-        align-items: center;
-        gap: 10px;
-        padding: 8px;
-        font-weight: 500;
-        background: var(--primary);
-        color: var(--button-text);
-        border-radius: var(--border-radius);
-    }
-
-    #settings-category:hover {
-        background: var(--button-hover-transparent);
-    }
-
-    #settings-category span {
-        font-size: 14.5px;
-    }
-
-    #category-icon {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        padding: 5px;
-        border-radius: 5px;
-    }
-
-    #settings-category.active {
-        background: var(--secondary);
-        color: var(--primary);
+        flex-direction: column;
+        gap: 16px;
     }
 </style>

web/src/components/settings/SettingsTab.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+    import { page } from "$app/stores";
+
+    export let categoryName: string;
+    export let categoryLink: string;
+    export let iconColor: "gray" | "blue" | "green" = "gray";
+
+    $: isActive = $page.url.pathname === `/settings/${categoryLink}`;
+</script>
+
+<a
+    id="settings-category"
+    href="/settings/{categoryLink}"
+    class:active={isActive}
+>
+    <div id="category-icon" style="background: var(--{iconColor})">
+        <slot></slot>
+    </div>
+    <span>{categoryName}</span>
+</a>
+
+<style>
+    #settings-category {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 10px;
+        padding: 8px;
+        font-weight: 500;
+        background: var(--primary);
+        color: var(--button-text);
+        border-radius: var(--border-radius);
+    }
+
+    #settings-category:hover {
+        background: var(--button-hover-transparent);
+    }
+
+    #settings-category span {
+        font-size: 14.5px;
+    }
+
+    #category-icon {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 5px;
+        border-radius: 5px;
+    }
+
+    #settings-category.active {
+        background: var(--secondary);
+        color: var(--primary);
+    }
+</style>