web/settings: replace checkbox with toggle

- equal font size & padding for all subtexts in settings
- equal padding & border radius for all settings components

it just looks way better now

web/src/components/buttons/SettingsCheckbox.svelte

@@ -1,100 +0,0 @@
-<script
-    lang="ts"
-    generics="
-        Context extends Exclude<keyof CobaltSettings, 'schemaVersion'>,
-        Id extends keyof CobaltSettings[Context]
-    "
->
-    import settings, { updateSetting } from "$lib/settings";
-    import type { CobaltSettings } from "$lib/types/settings";
-
-    import IconCheck from "@tabler/icons-svelte/IconCheck.svelte";
-
-    export let settingContext: Context;
-    export let settingId: Id;
-
-    export let title: string;
-    export let description: string = "";
-
-    $: setting = $settings[settingContext][settingId];
-    $: isChecked = !!setting;
-</script>
-
-<button
-    id="setting-button-{settingContext}-{String(settingId)}"
-    class="checkbox-container"
-    on:click={() =>
-        updateSetting({
-            [settingContext]: {
-                [settingId]: !isChecked,
-            },
-        })
-    }
->
-    <div class="checkbox" class:checked={isChecked}>
-        <div class="checkbox-icon">
-            <IconCheck />
-        </div>
-    </div>
-    <div class="checkbox-text">
-        <h4 class="checkbox-title">{title}</h4>
-
-        {#if description.length > 0}
-            <div class="subtext checkbox-description">{description}</div>
-        {/if}
-    </div>
-</button>
-
-<style>
-    .checkbox-container {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        gap: 12px;
-        justify-content: start;
-        text-align: left;
-        transform: none;
-        padding: 6px 12px;
-    }
-
-    .checkbox-text {
-        display: flex;
-        flex-direction: column;
-    }
-
-    .checkbox {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        padding: 1px;
-        aspect-ratio: 1/1;
-        border-radius: 5px;
-        box-shadow: 0 0 0 2px var(--secondary);
-    }
-
-    .checkbox-icon {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        opacity: 0;
-    }
-
-    .checkbox-icon :global(svg) {
-        height: 18px;
-        width: 18px;
-        stroke: var(--primary);
-        stroke-width: 2px;
-    }
-
-    .checkbox.checked {
-        background: var(--secondary);
-    }
-
-    .checkbox.checked .checkbox-icon {
-        opacity: 1;
-    }
-
-    .checkbox-description {
-        font-size: 12px;
-    }
-</style>

web/src/components/buttons/SettingsToggle.svelte

@@ -0,0 +1,72 @@
+<script
+    lang="ts"
+    generics="
+        Context extends Exclude<keyof CobaltSettings, 'schemaVersion'>,
+        Id extends keyof CobaltSettings[Context]
+    "
+>
+    import settings, { updateSetting } from "$lib/settings";
+    import type { CobaltSettings } from "$lib/types/settings";
+
+    import Toggle from "$components/misc/Toggle.svelte";
+
+    export let settingContext: Context;
+    export let settingId: Id;
+
+    export let title: string;
+    export let description: string = "";
+
+    $: setting = $settings[settingContext][settingId];
+    $: isEnabled = !!setting;
+</script>
+
+<div id="setting-toggle-{settingContext}-{String(settingId)}" class="toggle-parent">
+    <button
+        class="toggle-container"
+        on:click={() =>
+            updateSetting({
+                [settingContext]: {
+                    [settingId]: !isEnabled,
+                },
+            })
+        }
+    >
+        <div class="toggle-text">
+            <h4 class="toggle-title">{title}</h4>
+        </div>
+        <Toggle enabled={isEnabled} />
+    </button>
+    <!--
+        description is repeated here because there may be several toggles per settings category,
+        and each of them needs its own description. this is intended. don't "clean it up".
+    -->
+    {#if description}
+        <div class="subtext toggle-description">{description}</div>
+    {/if}
+</div>
+
+<style>
+    .toggle-parent {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+    }
+
+    .toggle-container {
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: var(--padding);
+        justify-content: space-between;
+        text-align: left;
+        transform: none;
+        padding: 8px 16px;
+        border-radius: var(--border-radius);
+    }
+
+    .toggle-text {
+        display: flex;
+        flex-direction: column;
+    }
+</style>

web/src/components/buttons/Switcher.svelte

@@ -28,16 +28,15 @@
     }
 
     .switcher.big {
-        --switcher-inner-padding: 4px;
-        border-radius: calc(var(--border-radius) + var(--switcher-inner-padding));
         background: var(--button);
         box-shadow: var(--button-box-shadow);
-        padding: var(--switcher-inner-padding);
+        padding: var(--sidebar-inner-padding);
     }
 
     .switcher.big :global(.button) {
         width: 100%;
-        height: calc(40px - var(--switcher-inner-padding));
+        height: calc(40px - var(--sidebar-inner-padding));
+        border-radius: calc(var(--border-radius) - var(--sidebar-inner-padding));;
     }
 
     .switcher.big :global(.button:not(:focus-visible)) {

web/src/components/misc/Toggle.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+    export let enabled;
+</script>
+
+<div class="toggle" class:enabled={enabled}>
+    <div class="toggle-switcher"></div>
+</div>
+
+<style>
+    .toggle {
+        --base-size: 20px;
+        --ratio-factor: 0.9;
+
+        display: flex;
+        justify-content: start;
+        align-items: center;
+        min-width: calc(var(--base-size) * (1 + var(--ratio-factor)));
+        padding: 2px;
+        aspect-ratio: 2/1;
+        border-radius: 5px;
+        border-radius: 100px;
+        background: var(--toggle-bg);
+        transition: background 0.2s;
+    }
+
+    .toggle-switcher {
+        height: var(--base-size);
+        width: var(--base-size);
+        background: var(--white);
+        border-radius: 100px;
+        transform: translateX(0%);
+        transition: transform 0.2s;
+    }
+
+    .toggle.enabled {
+        background: var(--toggle-bg-enabled);
+    }
+
+    .toggle.enabled .toggle-switcher {
+        transform: translateX(calc(100% * var(--ratio-factor)));
+    }
+</style>

web/src/routes/+layout.svelte

@@ -2,11 +2,10 @@
     import "@fontsource/ibm-plex-mono/400.css";
     import "@fontsource/ibm-plex-mono/500.css";
 
+    import device from "$lib/device";
     import currentTheme, { statusBarColors } from "$lib/state/theme";
 
     import Sidebar from "$components/sidebar/Sidebar.svelte";
-
-    import device from "$lib/device";
 </script>
 
 <svelte:head>
@@ -45,7 +44,10 @@
         --sidebar-highlight: #ffffff;
         --sidebar-hover: rgba(255, 255, 255, 0.1);
 
-        --input-border: #8d8d95;
+        --input-border: var(--gray);
+
+        --toggle-bg: var(--input-border);
+        --toggle-bg-enabled: var(--secondary);
 
         --padding: 12px;
         --border-radius: 11px;
@@ -85,6 +87,9 @@
 
         --input-border: #383838;
 
+        --toggle-bg: var(--input-border);
+        --toggle-bg-enabled: #777777;
+
         --sidebar-mobile-gradient: linear-gradient(
             90deg,
             rgba(16, 16, 16, 0.9) 0%,
@@ -217,9 +222,10 @@
     }
 
     :global(.subtext) {
-        font-size: 13px;
+        font-size: 12px;
         color: var(--gray);
         line-height: 1.4;
+        padding: 0 var(--padding);
     }
 
     #cobalt {

web/src/routes/settings/general/appearance/+page.svelte

@@ -2,7 +2,7 @@
     import SettingsCategory from "$components/settings/SettingsCategory.svelte";
     import Switcher from "$components/buttons/Switcher.svelte";
     import SettingsButton from "$components/buttons/SettingsButton.svelte";
-    import SettingsCheckbox from "$components/buttons/SettingsCheckbox.svelte";
+    import SettingsToggle from "$components/buttons/SettingsToggle.svelte";
 
     import { themeOptions } from "$lib/types/settings";
 </script>
@@ -18,13 +18,13 @@
 </SettingsCategory>
 
 <SettingsCategory title="accessibility">
-    <SettingsCheckbox
+    <SettingsToggle
         settingContext="accessibility"
         settingId="reduceTransparency"
         title="reduce visual transparency"
         description="disables blur effects and reduces transparency of surfaces."
     />
-    <SettingsCheckbox
+    <SettingsToggle
         settingContext="accessibility"
         settingId="reduceAnimations"
         title="reduce animations"

web/src/routes/settings/save/audio/+page.svelte

@@ -2,7 +2,7 @@
     import SettingsCategory from "$components/settings/SettingsCategory.svelte";
     import Switcher from "$components/buttons/Switcher.svelte";
     import SettingsButton from "$components/buttons/SettingsButton.svelte";
-    import SettingsCheckbox from "$components/buttons/SettingsCheckbox.svelte";
+    import SettingsToggle from "$components/buttons/SettingsToggle.svelte";
 
     import { audioFormatOptions } from "$lib/types/settings";
 
@@ -24,7 +24,7 @@
 </SettingsCategory>
 
 <SettingsCategory title="youtube">
-    <SettingsCheckbox
+    <SettingsToggle
         settingContext="save"
         settingId="youtubeDubBrowserLang"
         title="use browser language for dubbed videos"
@@ -33,7 +33,7 @@
 </SettingsCategory>
 
 <SettingsCategory title="tiktok">
-    <SettingsCheckbox
+    <SettingsToggle
         settingContext="save"
         settingId="tiktokFullAudio"
         title="use original sound"

web/src/routes/settings/save/metadata/+page.svelte

@@ -2,7 +2,7 @@
     import SettingsCategory from "$components/settings/SettingsCategory.svelte";
     import Switcher from "$components/buttons/Switcher.svelte";
     import SettingsButton from "$components/buttons/SettingsButton.svelte";
-    import SettingsCheckbox from "$components/buttons/SettingsCheckbox.svelte";
+    import SettingsToggle from "$components/buttons/SettingsToggle.svelte";
 
     import { filenameStyleOptions } from "$lib/types/settings";
 </script>
@@ -22,7 +22,7 @@
 </SettingsCategory>
 
 <SettingsCategory title="file metadata">
-    <SettingsCheckbox
+    <SettingsToggle
         settingContext="save"
         settingId="disableMetadata"
         title="disable file metadata"
@@ -31,7 +31,7 @@
 </SettingsCategory>
 
 <SettingsCategory title="saving method">
-    <SettingsCheckbox
+    <SettingsToggle
         settingContext="save"
         settingId="downloadPopup"
         title="ask how to save"

web/src/routes/settings/save/video/+page.svelte

@@ -2,7 +2,7 @@
     import SettingsCategory from "$components/settings/SettingsCategory.svelte";
     import Switcher from "$components/buttons/Switcher.svelte";
     import SettingsButton from "$components/buttons/SettingsButton.svelte";
-    import SettingsCheckbox from "$components/buttons/SettingsCheckbox.svelte";
+    import SettingsToggle from "$components/buttons/SettingsToggle.svelte";
 
     import { videoQualityOptions } from "$lib/types/settings";
     import { youtubeVideoCodecOptions } from "$lib/types/settings";
@@ -40,7 +40,7 @@
 </SettingsCategory>
 
 <SettingsCategory title="twitter">
-    <SettingsCheckbox
+    <SettingsToggle
         settingContext="save"
         settingId="twitterGif"
         title="convert looping videos to GIF"
@@ -49,7 +49,7 @@
 </SettingsCategory>
 
 <SettingsCategory title="tiktok">
-    <SettingsCheckbox
+    <SettingsToggle
         settingContext="save"
         settingId="tiktokH265"
         title="prefer HEVC/H265 format"