web/settings: add section ids

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 {

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,

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"

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"

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"

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"