From 26d2565ca64a977ff5e80b0fc67b27fc26c4a9b2 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Wed, 10 Jul 2024 19:35:23 +0600
Subject: [PATCH] web/settings: move switcher description to correct component

---
 .../components/buttons/SettingsToggle.svelte  |  2 +-
 web/src/components/buttons/Switcher.svelte    | 16 ++++++++--
 .../settings/SettingsCategory.svelte          |  7 +----
 .../settings/general/appearance/+page.svelte  |  8 ++---
 .../routes/settings/save/audio/+page.svelte   |  8 ++---
 .../settings/save/metadata/+page.svelte       | 11 +++----
 .../routes/settings/save/video/+page.svelte   | 31 ++++++++++---------
 7 files changed, 42 insertions(+), 41 deletions(-)

diff --git a/web/src/components/buttons/SettingsToggle.svelte b/web/src/components/buttons/SettingsToggle.svelte
index 604c3556..8995da90 100644
--- a/web/src/components/buttons/SettingsToggle.svelte
+++ b/web/src/components/buttons/SettingsToggle.svelte
@@ -49,7 +49,7 @@
     .toggle-parent {
         display: flex;
         flex-direction: column;
-        gap: 10px;
+        gap: 8px;
         overflow: hidden;
     }
 
diff --git a/web/src/components/buttons/Switcher.svelte b/web/src/components/buttons/Switcher.svelte
index 71a20653..99bb740b 100644
--- a/web/src/components/buttons/Switcher.svelte
+++ b/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">
-    <slot></slot>
+<div class="switcher-parent">
+    <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;
diff --git a/web/src/components/settings/SettingsCategory.svelte b/web/src/components/settings/SettingsCategory.svelte
index 3b77b582..728a9966 100644
--- a/web/src/components/settings/SettingsCategory.svelte
+++ b/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;
     }
diff --git a/web/src/routes/settings/general/appearance/+page.svelte b/web/src/routes/settings/general/appearance/+page.svelte
index 93598a76..97c679e6 100644
--- a/web/src/routes/settings/general/appearance/+page.svelte
+++ b/web/src/routes/settings/general/appearance/+page.svelte
@@ -12,12 +12,8 @@
     import LanguageAutoToggle from "$components/settings/LanguageAutoToggle.svelte";
 </script>
 
-<SettingsCategory
-    sectionId="theme"
-    title={$t("settings.theme")}
-    description={$t("settings.theme.description")}
->
-    <Switcher big={true}>
+<SettingsCategory sectionId="theme" title={$t("settings.theme")}>
+    <Switcher big={true} description={$t("settings.theme.description")}>
         {#each themeOptions as value}
             <SettingsButton
                 settingContext="appearance"
diff --git a/web/src/routes/settings/save/audio/+page.svelte b/web/src/routes/settings/save/audio/+page.svelte
index 6498ae30..a780a177 100644
--- a/web/src/routes/settings/save/audio/+page.svelte
+++ b/web/src/routes/settings/save/audio/+page.svelte
@@ -9,12 +9,8 @@
     import SettingsToggle from "$components/buttons/SettingsToggle.svelte";
 </script>
 
-<SettingsCategory
-    sectionId="audio-format"
-    title={$t("settings.audio.format")}
-    description={$t("settings.audio.format.description")}
->
-    <Switcher big={true}>
+<SettingsCategory sectionId="audio-format" title={$t("settings.audio.format")}>
+    <Switcher big={true} description={$t("settings.audio.format.description")}>
         {#each audioFormatOptions as value}
             <SettingsButton
                 settingContext="save"
diff --git a/web/src/routes/settings/save/metadata/+page.svelte b/web/src/routes/settings/save/metadata/+page.svelte
index 4e72a5b3..91c3d621 100644
--- a/web/src/routes/settings/save/metadata/+page.svelte
+++ b/web/src/routes/settings/save/metadata/+page.svelte
@@ -9,12 +9,11 @@
     import SettingsToggle from "$components/buttons/SettingsToggle.svelte";
 </script>
 
-<SettingsCategory
-    sectionId="filename"
-    title={$t("settings.metadata.filename")}
-    description={$t("settings.metadata.filename.description")}
->
-    <Switcher big={true}>
+<SettingsCategory sectionId="filename" title={$t("settings.metadata.filename")}>
+    <Switcher
+        big={true}
+        description={$t("settings.metadata.filename.description")}
+    >
         {#each filenameStyleOptions as value}
             <SettingsButton
                 settingContext="save"
diff --git a/web/src/routes/settings/save/video/+page.svelte b/web/src/routes/settings/save/video/+page.svelte
index ea3e6f33..2cdaf976 100644
--- a/web/src/routes/settings/save/video/+page.svelte
+++ b/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
-    sectionId="twitter"
-    title={$t("settings.video.twitter.gif")}>
+<SettingsCategory sectionId="twitter" title={$t("settings.video.twitter.gif")}>
     <SettingsToggle
         settingContext="save"
         settingId="twitterGif"
@@ -51,9 +56,7 @@
     />
 </SettingsCategory>
 
-<SettingsCategory
-    sectionId="tiktok"
-    title={$t("settings.video.tiktok.h265")}>
+<SettingsCategory sectionId="tiktok" title={$t("settings.video.tiktok.h265")}>
     <SettingsToggle
         settingContext="save"
         settingId="tiktokH265"