refactor: update forms and other areas to use new shadcn components (#1115)

Co-authored-by: Elias Schneider <login@eliasschneider.com>
Co-authored-by: ItalyPaleAle <43508+ItalyPaleAle@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

frontend/src/routes/settings/admin/application-configuration/application-image.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import FileInput from '$lib/components/form/file-input.svelte';
 	import { Button } from '$lib/components/ui/button';
-	import { Label } from '$lib/components/ui/label';
+	import * as Field from '$lib/components/ui/field';
 	import { cn } from '$lib/utils/style';
 	import { LucideImageOff, LucideUpload, LucideX } from '@lucide/svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
@@ -53,7 +53,7 @@
 </script>
 
 <div class="flex flex-col items-start md:flex-row md:items-center" {...restProps}>
-	<Label class="w-52" for={id}>{label}</Label>
+	<Field.Label class="w-52" for={id}>{label}</Field.Label>
 	<FileInput {id} variant="secondary" {accept} onchange={onImageChange}>
 		<div
 			class={cn('group/image relative flex items-center rounded transition-colors', {

frontend/src/routes/settings/admin/application-configuration/forms/app-config-email-form.svelte

@@ -3,7 +3,7 @@
 	import FormInput from '$lib/components/form/form-input.svelte';
 	import SwitchWithLabel from '$lib/components/form/switch-with-label.svelte';
 	import { Button } from '$lib/components/ui/button';
-	import Label from '$lib/components/ui/label/label.svelte';
+	import * as Field from '$lib/components/ui/field';
 	import * as Select from '$lib/components/ui/select';
 	import { m } from '$lib/paraglide/messages';
 	import AppConfigService from '$lib/services/app-config-service';
@@ -112,8 +112,8 @@
 			<FormInput label={m.smtp_user()} bind:input={$inputs.smtpUser} />
 			<FormInput label={m.smtp_password()} type="password" bind:input={$inputs.smtpPassword} />
 			<FormInput label={m.smtp_from()} bind:input={$inputs.smtpFrom} />
-			<div class="grid gap-2">
-				<Label class="mb-0" for="smtp-tls">{m.smtp_tls_option()}</Label>
+			<Field.Field>
+				<Field.Label for="smtp-tls">{m.smtp_tls_option()}</Field.Label>
 				<Select.Root
 					type="single"
 					value={$inputs.smtpTls.value}
@@ -128,7 +128,7 @@
 						<Select.Item value="tls" label="TLS" />
 					</Select.Content>
 				</Select.Root>
-			</div>
+			</Field.Field>
 			<SwitchWithLabel
 				id="skip-cert-verify"
 				label={m.skip_certificate_verification()}

frontend/src/routes/settings/admin/application-configuration/forms/app-config-general-form.svelte

@@ -2,8 +2,7 @@
 	import FormInput from '$lib/components/form/form-input.svelte';
 	import SwitchWithLabel from '$lib/components/form/switch-with-label.svelte';
 	import { Button } from '$lib/components/ui/button';
-	import { Label } from '$lib/components/ui/label/index.js';
-	import * as Select from '$lib/components/ui/select';
+	import * as Field from '$lib/components/ui/field';
 	import { m } from '$lib/paraglide/messages';
 	import appConfigStore from '$lib/stores/application-configuration-store';
 	import type { AllAppConfig } from '$lib/types/application-configuration';
@@ -82,21 +81,21 @@
 				bind:checked={$inputs.disableAnimations.value}
 			/>
 
-			<div class="space-y-5">
+			<Field.Field class="space-y-5">
 				<div>
-					<Label class="mb-0 text-sm font-medium">
+					<Field.Label>
 						{m.accent_color()}
-					</Label>
-					<p class="text-muted-foreground text-[0.8rem]">
+					</Field.Label>
+					<Field.Description>
 						{m.select_an_accent_color_to_customize_the_appearance_of_pocket_id()}
-					</p>
+					</Field.Description>
 				</div>
 				<AccentColorPicker
 					previousColor={appConfig.accentColor}
 					bind:selectedColor={$inputs.accentColor.value}
 					disabled={$appConfigStore.uiConfigDisabled}
 				/>
-			</div>
+			</Field.Field>
 		</div>
 		<div class="mt-5 flex justify-end">
 			<Button {isLoading} type="submit">{m.save()}</Button>

frontend/src/routes/settings/admin/application-configuration/forms/app-config-signup-defaults-form.svelte

@@ -2,7 +2,7 @@
 	import CustomClaimsInput from '$lib/components/form/custom-claims-input.svelte';
 	import UserGroupInput from '$lib/components/form/user-group-input.svelte';
 	import { Button } from '$lib/components/ui/button';
-	import { Label } from '$lib/components/ui/label';
+	import * as Field from '$lib/components/ui/field';
 	import * as Select from '$lib/components/ui/select';
 	import { m } from '$lib/paraglide/messages';
 	import appConfigStore from '$lib/stores/application-configuration-store';
@@ -58,68 +58,68 @@
 <form onsubmit={preventDefault(onSubmit)}>
 	<fieldset class="flex flex-col gap-5" disabled={$appConfigStore.uiConfigDisabled}>
 		<div class="grid gap-2">
-			<div>
-				<Label class="mb-0" for="enable-user-signup">{m.enable_user_signups()}</Label>
-				<p class="text-muted-foreground text-[0.8rem]">
+			<Field.Field>
+				<Field.Label for="enable-user-signup">{m.enable_user_signups()}</Field.Label>
+				<Field.Description>
 					{m.enable_user_signups_description()}
-				</p>
-			</div>
-			<Select.Root
-				type="single"
-				value={allowUserSignups}
-				onValueChange={(v) => (allowUserSignups = v as typeof allowUserSignups)}
-			>
-				<Select.Trigger
-					id="enable-user-signup"
-					class="w-full"
-					aria-label={m.enable_user_signups()}
-					placeholder={m.enable_user_signups()}
+				</Field.Description>
+				<Select.Root
+					type="single"
+					value={allowUserSignups}
+					onValueChange={(v) => (allowUserSignups = v as typeof allowUserSignups)}
 				>
-					{signupOptions[allowUserSignups]?.label}
-				</Select.Trigger>
-				<Select.Content>
-					<Select.Item value="disabled">
-						<div class="flex flex-col items-start gap-1">
-							<span class="font-medium">{signupOptions.disabled.label}</span>
-							<span class="text-muted-foreground text-xs">
-								{signupOptions.disabled.description}
-							</span>
-						</div>
-					</Select.Item>
-					<Select.Item value="withToken">
-						<div class="flex flex-col items-start gap-1">
-							<span class="font-medium">{signupOptions.withToken.label}</span>
-							<span class="text-muted-foreground text-xs">
-								{signupOptions.withToken.description}
-							</span>
-						</div>
-					</Select.Item>
-					<Select.Item value="open">
-						<div class="flex flex-col items-start gap-1">
-							<span class="font-medium">{signupOptions.open.label}</span>
-							<span class="text-muted-foreground text-xs">
-								{signupOptions.open.description}
-							</span>
-						</div>
-					</Select.Item>
-				</Select.Content>
-			</Select.Root>
+					<Select.Trigger
+						id="enable-user-signup"
+						class="w-full"
+						aria-label={m.enable_user_signups()}
+						placeholder={m.enable_user_signups()}
+					>
+						{signupOptions[allowUserSignups]?.label}
+					</Select.Trigger>
+					<Select.Content>
+						<Select.Item value="disabled">
+							<div class="flex flex-col items-start gap-1">
+								<span class="font-medium">{signupOptions.disabled.label}</span>
+								<span class="text-muted-foreground text-xs">
+									{signupOptions.disabled.description}
+								</span>
+							</div>
+						</Select.Item>
+						<Select.Item value="withToken">
+							<div class="flex flex-col items-start gap-1">
+								<span class="font-medium">{signupOptions.withToken.label}</span>
+								<span class="text-muted-foreground text-xs">
+									{signupOptions.withToken.description}
+								</span>
+							</div>
+						</Select.Item>
+						<Select.Item value="open">
+							<div class="flex flex-col items-start gap-1">
+								<span class="font-medium">{signupOptions.open.label}</span>
+								<span class="text-muted-foreground text-xs">
+									{signupOptions.open.description}
+								</span>
+							</div>
+						</Select.Item>
+					</Select.Content>
+				</Select.Root>
+			</Field.Field>
 		</div>
 
-		<div>
-			<Label for="default-groups" class="mb-0">{m.user_groups()}</Label>
-			<p class="text-muted-foreground mt-1 mb-2 text-xs">
+		<Field.Field>
+			<Field.Label for="default-groups">{m.user_groups()}</Field.Label>
+			<Field.Description>
 				{m.user_creation_groups_description()}
-			</p>
+			</Field.Description>
 			<UserGroupInput bind:selectedGroupIds />
-		</div>
-		<div>
-			<Label class="mb-0">{m.custom_claims()}</Label>
-			<p class="text-muted-foreground mt-1 mb-2 text-xs">
+		</Field.Field>
+		<Field.Field>
+			<Field.Label>{m.custom_claims()}</Field.Label>
+			<Field.Description>
 				{m.user_creation_claims_description()}
-			</p>
+			</Field.Description>
 			<CustomClaimsInput bind:customClaims />
-		</div>
+		</Field.Field>
 
 		<div class="flex justify-end pt-2">
 			<Button {isLoading} type="submit">{m.save()}</Button>

frontend/src/routes/settings/admin/application-configuration/forms/custom-accent-color-dialog.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { Button } from '$lib/components/ui/button';
 	import * as Dialog from '$lib/components/ui/dialog';
+	import * as Field from '$lib/components/ui/field';
 	import { Input } from '$lib/components/ui/input';
-	import { Label } from '$lib/components/ui/label/index.js';
 	import { m } from '$lib/paraglide/messages';
 	import { preventDefault } from '$lib/utils/event-util';
 
@@ -48,8 +48,8 @@
 
 		<form onsubmit={preventDefault(applyCustomColor)}>
 			<div class="space-y-4">
-				<div>
-					<Label for="custom-color-input" class="text-sm font-medium">{m.color_value()}</Label>
+				<Field.Field>
+					<Field.Label for="custom-color-input">{m.color_value()}</Field.Label>
 					<div class="flex items-center gap-2">
 						<div class="w-full transition">
 							<Input
@@ -68,7 +68,7 @@
 							style="background-color: {customColorInput}"
 						></div>
 					</div>
-				</div>
+				</Field.Field>
 			</div>
 
 			<Dialog.Footer class="mt-6">