web/settings: move switcher description to correct component

web/src/components/buttons/SettingsToggle.svelte

@@ -49,7 +49,7 @@
     .toggle-parent {
         display: flex;
         flex-direction: column;
-        gap: 10px;
+        gap: 8px;
         overflow: hidden;
     }
 

web/src/components/buttons/Switcher.svelte

@@ -1,12 +1,24 @@
 <script lang="ts">
     export let big: boolean = false;
+    export let description: string = "";
 </script>
 
-<div id="switcher-container" class="switcher" class:big={big} role="listbox">
+<div class="switcher-parent">
-    <slot></slot>
+    <div class="switcher" class:big={big} role="listbox">
+        <slot></slot>
+    </div>
+    {#if description}
+        <div class="settings-content-description subtext">{description}</div>
+    {/if}
 </div>
 
 <style>
+    .switcher-parent {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+    }
+
     .switcher {
         display: flex;
         width: auto;

web/src/components/settings/SettingsCategory.svelte

@@ -3,7 +3,6 @@
 
     export let sectionId: string;
     export let title: string;
-    export let description: string = "";
 
     let animate = false;
 
@@ -21,17 +20,13 @@
 >
     <h3 class="settings-content-title">{title}</h3>
     <slot></slot>
-
-    {#if description.length > 0}
-        <div class="settings-content-description subtext">{description}</div>
-    {/if}
 </section>
 
 <style>
     .settings-content {
         display: flex;
         flex-direction: column;
-        gap: 10px;
+        gap: var(--padding);
         padding: calc(var(--settings-padding) / 2);
         border-radius: 18px;
     }

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

@@ -12,12 +12,8 @@
     import LanguageAutoToggle from "$components/settings/LanguageAutoToggle.svelte";
 </script>
 
-<SettingsCategory
+<SettingsCategory sectionId="theme" title={$t("settings.theme")}>
-    sectionId="theme"
+    <Switcher big={true} description={$t("settings.theme.description")}>
-    title={$t("settings.theme")}
-    description={$t("settings.theme.description")}
->
-    <Switcher big={true}>
         {#each themeOptions as value}
             <SettingsButton
                 settingContext="appearance"

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

@@ -9,12 +9,8 @@
     import SettingsToggle from "$components/buttons/SettingsToggle.svelte";
 </script>
 
-<SettingsCategory
+<SettingsCategory sectionId="audio-format" title={$t("settings.audio.format")}>
-    sectionId="audio-format"
+    <Switcher big={true} description={$t("settings.audio.format.description")}>
-    title={$t("settings.audio.format")}
-    description={$t("settings.audio.format.description")}
->
-    <Switcher big={true}>
         {#each audioFormatOptions as value}
             <SettingsButton
                 settingContext="save"

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

@@ -9,12 +9,11 @@
     import SettingsToggle from "$components/buttons/SettingsToggle.svelte";
 </script>
 
-<SettingsCategory
+<SettingsCategory sectionId="filename" title={$t("settings.metadata.filename")}>
-    sectionId="filename"
+    <Switcher
-    title={$t("settings.metadata.filename")}
+        big={true}
-    description={$t("settings.metadata.filename.description")}
+        description={$t("settings.metadata.filename.description")}
->
+    >
-    <Switcher big={true}>
         {#each filenameStyleOptions as value}
             <SettingsButton
                 settingContext="save"

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

@@ -13,36 +13,41 @@
 <SettingsCategory
     sectionId="video-quality"
     title={$t("settings.video.quality")}
-    description={$t("settings.video.quality.description")}
 >
-    <Switcher big={true}>
+    <Switcher big={true} description={$t("settings.video.quality.description")}>
         {#each videoQualityOptions as value}
-            <SettingsButton settingContext="save" settingId="videoQuality" settingValue={value}>
+            <SettingsButton
+                settingContext="save"
+                settingId="videoQuality"
+                settingValue={value}
+            >
                 {$t(`settings.video.quality.${value}`)}
             </SettingsButton>
         {/each}
     </Switcher>
-
 </SettingsCategory>
 
 <SettingsCategory
     sectionId="youtube-codec"
     title={$t("settings.video.youtube.codec")}
-    description={$t("settings.video.youtube.codec.description")}
 >
-    <Switcher big={true}>
+    <Switcher
+        big={true}
+        description={$t("settings.video.youtube.codec.description")}
+    >
         {#each youtubeVideoCodecOptions as value}
-            <SettingsButton settingContext="save" settingId="youtubeVideoCodec" settingValue={value}>
+            <SettingsButton
+                settingContext="save"
+                settingId="youtubeVideoCodec"
+                settingValue={value}
+            >
                 {$t(`settings.video.youtube.codec.${value}`)}
             </SettingsButton>
         {/each}
     </Switcher>
-
 </SettingsCategory>
 
-<SettingsCategory
+<SettingsCategory sectionId="twitter" title={$t("settings.video.twitter.gif")}>
-    sectionId="twitter"
-    title={$t("settings.video.twitter.gif")}>
     <SettingsToggle
         settingContext="save"
         settingId="twitterGif"
@@ -51,9 +56,7 @@
     />
 </SettingsCategory>
 
-<SettingsCategory
+<SettingsCategory sectionId="tiktok" title={$t("settings.video.tiktok.h265")}>
-    sectionId="tiktok"
-    title={$t("settings.video.tiktok.h265")}>
     <SettingsToggle
         settingContext="save"
         settingId="tiktokH265"