refactor: centralize form and record helpers

src/lib/components/login-form.svelte

@@ -1,14 +1,15 @@
 <script lang="ts">
 	import { toast } from 'svelte-sonner';
-	import GalleryVerticalEndIcon from "@lucide/svelte/icons/gallery-vertical-end";
-	import { Field as FormField, Control, FieldErrors } from 'formsnap';
+	import GalleryVerticalEndIcon from '@lucide/svelte/icons/gallery-vertical-end';
+	import * as Form from '$lib/components/ui/form/index.js';
 	import * as Field from '$lib/components/ui/field/index.js';
 	import { superForm, type SuperValidated } from 'sveltekit-superforms';
 	import { zod4Client } from 'sveltekit-superforms/adapters';
-	import type { HTMLAttributes } from "svelte/elements";
-	import { Input } from "$lib/components/ui/input/index.js";
-	import { Button } from "$lib/components/ui/button/index.js";
-	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { Input } from '$lib/components/ui/input/index.js';
+	import { Button } from '$lib/components/ui/button/index.js';
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import { firstFormError } from '$lib/form-feedback';
 	import { loginSchema, type LoginSchema } from '$lib/schemas/auth';
 
 	let {
@@ -27,7 +28,7 @@
 		resetForm: false,
 		onUpdated: ({ form }) => {
 			if (!form.valid) {
-				toast.error(form.message ?? firstError(form.errors), {
+				toast.error(form.message ?? firstFormError(form.errors), {
 					id: 'login-error',
 					position: 'top-center'
 				});
@@ -42,24 +43,16 @@
 	});
 
 	const { form: formData, enhance } = loginForm;
-
-	function firstError(errors: Record<string, unknown>) {
-		for (const value of Object.values(errors)) {
-			if (Array.isArray(value) && typeof value[0] === 'string') {
-				return value[0];
-			}
-		}
-
-		return 'Check the highlighted fields.';
-	}
 </script>
 
-<div class={cn("flex flex-col gap-6", className)} bind:this={ref} {...restProps}>
+<div class={cn('flex flex-col gap-6', className)} bind:this={ref} {...restProps}>
 	<form action="?/login" method="POST" use:enhance>
 		<Field.Group>
 			<div class="flex flex-col items-center gap-2 text-center">
 				<div class="flex flex-col items-center gap-2 font-medium">
-					<div class="bg-primary text-primary-foreground flex size-9 items-center justify-center rounded-md">
+					<div
+						class="flex size-9 items-center justify-center rounded-md bg-primary text-primary-foreground"
+					>
 						<GalleryVerticalEndIcon class="size-6" />
 					</div>
 					<span class="sr-only">Clearity</span>
@@ -69,45 +62,39 @@
 					Use the administrator account created for this workspace.
 				</Field.Description>
 			</div>
-			<FormField form={loginForm} name="email">
-				<Field.Field>
-					<Control id="email-{id}">
-						{#snippet children({ props })}
-							<Field.Label>Email</Field.Label>
-							<Input
-								{...props}
-								type="email"
-								autocomplete="email"
-								placeholder="admin@example.com"
-								bind:value={$formData.email}
-							/>
-						{/snippet}
-					</Control>
-					<Field.Error><FieldErrors /></Field.Error>
-				</Field.Field>
-			</FormField>
-			<FormField form={loginForm} name="password">
-				<Field.Field>
-					<Control id="password-{id}">
-						{#snippet children({ props })}
-							<Field.Label>Password</Field.Label>
-							<Input
-								{...props}
-								type="password"
-								autocomplete="current-password"
-								bind:value={$formData.password}
-							/>
-						{/snippet}
-					</Control>
-					<Field.Error><FieldErrors /></Field.Error>
-				</Field.Field>
+			<Form.Field form={loginForm} name="email">
+				<Form.Control id="email-{id}">
+					{#snippet children({ props })}
+						<Form.Label>Email</Form.Label>
+						<Input
+							{...props}
+							type="email"
+							autocomplete="email"
+							placeholder="admin@example.com"
+							bind:value={$formData.email}
+						/>
+					{/snippet}
+				</Form.Control>
+				<Form.FieldErrors />
+			</Form.Field>
+			<Form.Field form={loginForm} name="password">
+				<Form.Control id="password-{id}">
+					{#snippet children({ props })}
+						<Form.Label>Password</Form.Label>
+						<Input
+							{...props}
+							type="password"
+							autocomplete="current-password"
+							bind:value={$formData.password}
+						/>
+					{/snippet}
+				</Form.Control>
+				<Form.FieldErrors />
 				<Field.Description>
 					New users are created manually by an administrator; public registration is disabled.
 				</Field.Description>
-			</FormField>
-			<Field.Field>
-				<Button type="submit" class="w-full">Sign in</Button>
-			</Field.Field>
+			</Form.Field>
+			<Button type="submit" class="w-full">Sign in</Button>
 		</Field.Group>
 	</form>
 	<Field.Description class="px-6 text-center">