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"