refactor: centralize form and record helpers

src/lib/components/first-admin-form.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import GalleryVerticalEndIcon from '@lucide/svelte/icons/gallery-vertical-end';
 	import { toast } from 'svelte-sonner';
-	import { Field as FormField, Control, FieldErrors } from 'formsnap';
+	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';
@@ -9,6 +9,7 @@
 	import { Button } from '$lib/components/ui/button/index.js';
 	import { Input } from '$lib/components/ui/input/index.js';
 	import { cn, type WithElementRef } from '$lib/utils.js';
+	import { firstFormError } from '$lib/form-feedback';
 	import { firstAdminSchema, type FirstAdminSchema } 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: 'first-admin-error',
 					position: 'top-center'
 				});
@@ -42,16 +43,6 @@
 	});
 
 	const { form: formData, enhance } = firstAdminForm;
-
-	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}>
@@ -71,58 +62,50 @@
 					Set up the initial Better Auth admin account for this workspace.
 				</Field.Description>
 			</div>
-			<FormField form={firstAdminForm} name="name">
-				<Field.Field>
-					<Control id="name-{id}">
-						{#snippet children({ props })}
-							<Field.Label>Name</Field.Label>
-							<Input
-								{...props}
-								autocomplete="name"
-								placeholder="Administrator"
-								bind:value={$formData.name}
-							/>
-						{/snippet}
-					</Control>
-					<Field.Error><FieldErrors /></Field.Error>
-				</Field.Field>
-			</FormField>
-			<FormField form={firstAdminForm} 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={firstAdminForm} name="password">
-				<Field.Field>
-					<Control id="password-{id}">
-						{#snippet children({ props })}
-							<Field.Label>Password</Field.Label>
-							<Input
-								{...props}
-								type="password"
-								autocomplete="new-password"
-								bind:value={$formData.password}
-							/>
-						{/snippet}
-					</Control>
-					<Field.Error><FieldErrors /></Field.Error>
-				</Field.Field>
-			</FormField>
-			<Field.Field>
-				<Button type="submit" class="w-full">Create admin</Button>
-			</Field.Field>
+			<Form.Field form={firstAdminForm} name="name">
+				<Form.Control id="name-{id}">
+					{#snippet children({ props })}
+						<Form.Label>Name</Form.Label>
+						<Input
+							{...props}
+							autocomplete="name"
+							placeholder="Administrator"
+							bind:value={$formData.name}
+						/>
+					{/snippet}
+				</Form.Control>
+				<Form.FieldErrors />
+			</Form.Field>
+			<Form.Field form={firstAdminForm} 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={firstAdminForm} name="password">
+				<Form.Control id="password-{id}">
+					{#snippet children({ props })}
+						<Form.Label>Password</Form.Label>
+						<Input
+							{...props}
+							type="password"
+							autocomplete="new-password"
+							bind:value={$formData.password}
+						/>
+					{/snippet}
+				</Form.Control>
+				<Form.FieldErrors />
+			</Form.Field>
+			<Button type="submit" class="w-full">Create admin</Button>
 		</Field.Group>
 	</form>
 	<Field.Description class="px-6 text-center">