feat(web/ui): add help text to various select elements

Signed-off-by: Jordan Shatford <[email protected]>

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,23 +100,26 @@
 				/>
 				<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={() =>
 						toast.success('Updated', 'Metadata embedding settings updated successfully.')}
 				/>
 				<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={() =>
 						toast.success('Updated', 'Thumbnail embedding settings updated successfully.')}
 				/>
 				<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,15 +130,15 @@
 			<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={() =>
 						toast.success('Updated', 'Downloads page size setting updated successfully.')}
 				/>
 				<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={() =>

packages/ui/src/lib/components/Select.svelte

@@ -1,15 +1,18 @@
 <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 }[] = [];
 	export let disabled = false;
 </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>