From acc507a6f5c9099d8138fa4141315aad54e20550 Mon Sep 17 00:00:00 2001
From: Jordan Shatford <jordanshatford@live.com>
Date: Wed, 11 Oct 2023 15:32:31 +1100
Subject: [PATCH] feat(web/ui): add help text to various select elements

Signed-off-by: Jordan Shatford <jordanshatford@live.com>
---
 apps/web/src/routes/settings/+page.svelte    | 19 +++++++++++--------
 packages/ui/src/lib/components/Select.svelte | 10 ++++++++--
 2 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/apps/web/src/routes/settings/+page.svelte b/apps/web/src/routes/settings/+page.svelte
index ac5ddd7f..1f21486d 100644
--- a/apps/web/src/routes/settings/+page.svelte
+++ b/apps/web/src/routes/settings/+page.svelte
@@ -71,21 +71,21 @@
 			<div class="mt-2">
 				<Select
 					id="type"
-					title="Type:"
+					label="Type:"
 					bind:value={$settings.type}
 					options={toSelectOptions(DownloadType)}
 					on:change={onTypeChange}
 				/>
 				<Select
 					id="format"
-					title="Format:"
+					label="Format:"
 					bind:value={$settings.format}
 					groups={formatGroups}
 					on:change={() => toast.success('Updated', 'Format settings updated successfully.')}
 				/>
 				<Select
 					id="quality"
-					title="Quality:"
+					label="Quality:"
 					bind:value={$settings.quality}
 					options={toSelectOptions(DownloadQuality)}
 					on:change={() => toast.success('Updated', 'Quality settings updated successfully.')}
@@ -100,7 +100,8 @@
 				/>
 				<Select
 					id="metadata"
-					title="Metadata:"
+					label="Metadata:"
+					helpText="Embed information from the video into the download."
 					bind:value={$settings.embed_metadata}
 					options={toSelectOptions({ YES: true, NO: false })}
 					on:change={() =>
@@ -108,7 +109,8 @@
 				/>
 				<Select
 					id="thumbnail"
-					title="Thumbnail:"
+					label="Thumbnail:"
+					helpText="Attempt to embed thumbnail. May not always work."
 					bind:value={$settings.embed_thumbnail}
 					options={toSelectOptions({ YES: true, NO: false })}
 					on:change={() =>
@@ -116,7 +118,8 @@
 				/>
 				<Select
 					id="subtitles"
-					title="Subtitles:"
+					label="Subtitles:"
+					helpText="Attempt to embed subtitles. May not always work."
 					bind:value={$settings.embed_subtitles}
 					options={toSelectOptions({ YES: true, NO: false })}
 					on:change={() =>
@@ -127,7 +130,7 @@
 			<div class="mt-2">
 				<Select
 					id="downloadPageSize"
-					title="Downloads page size:"
+					label="Downloads page size:"
 					bind:value={$userSettings.downloadsPageSize}
 					options={[...Array(11 + 5).keys()].slice(5).map((v) => ({ value: v, text: `${v}` }))}
 					on:change={() =>
@@ -135,7 +138,7 @@
 				/>
 				<Select
 					id="autoDownload"
-					title="Automatically download when complete:"
+					label="Automatically download when complete:"
 					bind:value={$userSettings.autoDownloadOnComplete}
 					options={toSelectOptions({ YES: true, NO: false })}
 					on:change={() =>
diff --git a/packages/ui/src/lib/components/Select.svelte b/packages/ui/src/lib/components/Select.svelte
index 5e6ff26a..0834706e 100644
--- a/packages/ui/src/lib/components/Select.svelte
+++ b/packages/ui/src/lib/components/Select.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
-	export let title: string;
+	export let id: string;
+	export let label: string;
+	export let helpText: string | undefined = undefined;
 	export let value: number | string | boolean | undefined;
 	export let options: { value: number | string | boolean; text: string }[] = [];
 	export let groups: { text: string; disabled?: boolean; options: typeof options }[] = [];
@@ -7,9 +9,10 @@
 </script>
 
 <div>
-	<p class="p-2 dark:text-white">{title}</p>
+	<label for={id} class="my-1 block dark:text-white">{label}</label>
 	<select
 		{...$$restProps}
+		{id}
 		{disabled}
 		bind:value
 		on:change
@@ -29,4 +32,7 @@
 			{/each}
 		{/if}
 	</select>
+	{#if helpText}
+		<p class="mt-1 text-sm text-zinc-500">{helpText}</p>
+	{/if}
 </div>