From 430bfaca43fafa9b9da05f80033a4eb22be3510a Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Sun, 7 Jul 2024 19:14:49 +0600
Subject: [PATCH] web/settings: add section ids

---
 .../components/settings/SettingsCategory.svelte   |  5 +++--
 .../components/settings/SettingsSection.svelte    |  4 ++--
 .../settings/general/appearance/+page.svelte      |  8 ++++++--
 web/src/routes/settings/save/audio/+page.svelte   | 15 +++++++++++----
 .../routes/settings/save/metadata/+page.svelte    | 15 +++++++++++----
 web/src/routes/settings/save/video/+page.svelte   | 10 ++++++++--
 6 files changed, 41 insertions(+), 16 deletions(-)

diff --git a/web/src/components/settings/SettingsCategory.svelte b/web/src/components/settings/SettingsCategory.svelte
index 8ccd1cf5..3ec3c895 100644
--- a/web/src/components/settings/SettingsCategory.svelte
+++ b/web/src/components/settings/SettingsCategory.svelte
@@ -1,16 +1,17 @@
 <script lang="ts">
+    export let sectionId: string;
     export let title: string;
     export let description: string = "";
 </script>
 
-<div class="settings-content">
+<section id={sectionId} 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>
+</section>
 
 <style>
     .settings-content {
diff --git a/web/src/components/settings/SettingsSection.svelte b/web/src/components/settings/SettingsSection.svelte
index 0ee02d60..9caaaad5 100644
--- a/web/src/components/settings/SettingsSection.svelte
+++ b/web/src/components/settings/SettingsSection.svelte
@@ -4,12 +4,12 @@
     export let sectionTitle: string;
 </script>
 
-<section id="settings-section">
+<div id="settings-section">
     <div id="settings-section-title">{$t(`settings.section.${sectionTitle}`)}</div>
     <div id="settings-section-categories">
         <slot></slot>
     </div>
-</section>
+</div>
 
 <style>
     #settings-section,
diff --git a/web/src/routes/settings/general/appearance/+page.svelte b/web/src/routes/settings/general/appearance/+page.svelte
index 0a268eb9..2c7226d6 100644
--- a/web/src/routes/settings/general/appearance/+page.svelte
+++ b/web/src/routes/settings/general/appearance/+page.svelte
@@ -12,6 +12,7 @@
 </script>
 
 <SettingsCategory
+    sectionId="theme"
     title={$t("settings.theme")}
     description={$t("settings.theme.description")}
 >
@@ -28,7 +29,10 @@
     </Switcher>
 </SettingsCategory>
 
-<SettingsCategory title={$t("settings.accessibility")}>
+<SettingsCategory
+    sectionId="accessibility"
+    title={$t("settings.accessibility")}
+>
     <SettingsToggle
         settingContext="accessibility"
         settingId="reduceTransparency"
@@ -43,7 +47,7 @@
     />
 </SettingsCategory>
 
-<SettingsCategory title={$t("settings.language")}>
+<SettingsCategory sectionId="language" title={$t("settings.language")}>
     <LanguageDropdown />
     <SettingsToggle
         settingContext="appearance"
diff --git a/web/src/routes/settings/save/audio/+page.svelte b/web/src/routes/settings/save/audio/+page.svelte
index 0f87ce25..6498ae30 100644
--- a/web/src/routes/settings/save/audio/+page.svelte
+++ b/web/src/routes/settings/save/audio/+page.svelte
@@ -10,20 +10,24 @@
 </script>
 
 <SettingsCategory
+    sectionId="audio-format"
     title={$t("settings.audio.format")}
     description={$t("settings.audio.format.description")}
 >
     <Switcher big={true}>
         {#each audioFormatOptions as value}
-            <SettingsButton settingContext="save" settingId="audioFormat" settingValue={value}>
+            <SettingsButton
+                settingContext="save"
+                settingId="audioFormat"
+                settingValue={value}
+            >
                 {$t(`settings.audio.format.${value}`)}
             </SettingsButton>
         {/each}
     </Switcher>
-
 </SettingsCategory>
 
-<SettingsCategory title={$t("settings.audio.youtube.dub")}>
+<SettingsCategory sectionId="youtube" title={$t("settings.audio.youtube.dub")}>
     <SettingsToggle
         settingContext="save"
         settingId="youtubeDubBrowserLang"
@@ -32,7 +36,10 @@
     />
 </SettingsCategory>
 
-<SettingsCategory title={$t("settings.audio.tiktok.original")}>
+<SettingsCategory
+    sectionId="tiktok"
+    title={$t("settings.audio.tiktok.original")}
+>
     <SettingsToggle
         settingContext="save"
         settingId="tiktokFullAudio"
diff --git a/web/src/routes/settings/save/metadata/+page.svelte b/web/src/routes/settings/save/metadata/+page.svelte
index 860433f1..4e72a5b3 100644
--- a/web/src/routes/settings/save/metadata/+page.svelte
+++ b/web/src/routes/settings/save/metadata/+page.svelte
@@ -10,20 +10,27 @@
 </script>
 
 <SettingsCategory
+    sectionId="filename"
     title={$t("settings.metadata.filename")}
     description={$t("settings.metadata.filename.description")}
 >
     <Switcher big={true}>
         {#each filenameStyleOptions as value}
-            <SettingsButton settingContext="save" settingId="filenameStyle" settingValue={value}>
+            <SettingsButton
+                settingContext="save"
+                settingId="filenameStyle"
+                settingValue={value}
+            >
                 {$t(`settings.metadata.filename.${value}`)}
             </SettingsButton>
         {/each}
     </Switcher>
-
 </SettingsCategory>
 
-<SettingsCategory title={$t("settings.metadata.file")}>
+<SettingsCategory
+    sectionId="disable-metadata"
+    title={$t("settings.metadata.file")}
+>
     <SettingsToggle
         settingContext="save"
         settingId="disableMetadata"
@@ -32,7 +39,7 @@
     />
 </SettingsCategory>
 
-<SettingsCategory title={$t("settings.saving.method")}>
+<SettingsCategory sectionId="saving" title={$t("settings.saving.method")}>
     <SettingsToggle
         settingContext="save"
         settingId="downloadPopup"
diff --git a/web/src/routes/settings/save/video/+page.svelte b/web/src/routes/settings/save/video/+page.svelte
index aa8b9d9b..ea3e6f33 100644
--- a/web/src/routes/settings/save/video/+page.svelte
+++ b/web/src/routes/settings/save/video/+page.svelte
@@ -11,6 +11,7 @@
 </script>
 
 <SettingsCategory
+    sectionId="video-quality"
     title={$t("settings.video.quality")}
     description={$t("settings.video.quality.description")}
 >
@@ -25,6 +26,7 @@
 </SettingsCategory>
 
 <SettingsCategory
+    sectionId="youtube-codec"
     title={$t("settings.video.youtube.codec")}
     description={$t("settings.video.youtube.codec.description")}
 >
@@ -38,7 +40,9 @@
 
 </SettingsCategory>
 
-<SettingsCategory title={$t("settings.video.twitter.gif")}>
+<SettingsCategory
+    sectionId="twitter"
+    title={$t("settings.video.twitter.gif")}>
     <SettingsToggle
         settingContext="save"
         settingId="twitterGif"
@@ -47,7 +51,9 @@
     />
 </SettingsCategory>
 
-<SettingsCategory title={$t("settings.video.tiktok.h265")}>
+<SettingsCategory
+    sectionId="tiktok"
+    title={$t("settings.video.tiktok.h265")}>
     <SettingsToggle
         settingContext="save"
         settingId="tiktokH265"