fixed create form

src/routes/experiment/create/+page.svelte

@@ -1,14 +1,15 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import { Card, CardContent, CardHeader, CardTitle } from '$lib/components/ui/card';
-	import * as Form from '$lib/components/ui/form';
 	import { Input } from '$lib/components/ui/input';
 	import { Checkbox } from '$lib/components/ui/checkbox';
-	import * as Select from '$lib/components/ui/select/index.js';
+	import * as Select from '$lib/components/ui/select/index.js'; // the import should stay as index.js
-	import { superForm } from 'sveltekit-superforms';
+	import { superForm, type SuperValidated, type Infer } from 'sveltekit-superforms';
 	import { zod } from 'sveltekit-superforms/adapters';
 	import { z } from 'zod';
 	import { toast } from 'svelte-sonner';
+	import { Label } from '$lib/components/ui/label';
+	import { Button } from '$lib/components/ui/button';
 
 	const formSchema = z.object({
 		name: z.string().min(1, 'Name is required'),
@@ -19,14 +20,12 @@
 		})
 	});
 
-	const form = superForm(
+	const form = superForm({
-		{
 		name: '',
 		description: '',
 		multiplayer: false,
-			type: 'jsPsych'
+		type: ''
-		},
+	}, {
-		{
 		validators: zod(formSchema),
 		SPA: true,
 		onUpdate: async ({ form: f }) => {
@@ -45,9 +44,12 @@
 				}
 			}
 		}
-		}
+	});
+
+	const { form: formData, enhance, errors } = form;
+	const triggerContent = $derived(
+		$formData.type ? $formData.type : 'Select a type'
 	);
-	const { form: formData, enhance } = form;
 </script>
 
 <div class="flex justify-center items-center min-h-screen bg-background">
@@ -57,45 +59,34 @@
 		</CardHeader>
 		<CardContent>
 			<form method="POST" use:enhance class="space-y-4">
-				<Form.Field {form} name="name">
+				<div class="space-y-2">
-					<Form.Control let:attrs>
+					<Label for="name">Name</Label>
-						<Form.Label>Name</Form.Label>
+					<Input name="name" bind:value={$formData.name} />
-						<Input {...attrs} bind:value={$formData.name} />
+					{#if $errors.name}<span class="text-red-500 text-sm">{$errors.name[0]}</span>{/if}
-					</Form.Control>
-					<Form.FieldErrors />
-				</Form.Field>
-				<Form.Field {form} name="description">
-					<Form.Control let:attrs>
-						<Form.Label>Description</Form.Label>
-						<Input {...attrs} bind:value={$formData.description} />
-					</Form.Control>
-					<Form.FieldErrors />
-				</Form.Field>
-				<Form.Field {form} name="multiplayer">
-					<Form.Control let:attrs>
-						<div class="flex items-center space-x-2">
-							<Checkbox {...attrs} bind:checked={$formData.multiplayer} />
-							<Form.Label>Multiplayer</Form.Label>
 				</div>
-					</Form.Control>
+				<div class="space-y-2">
-					<Form.FieldErrors />
+					<Label for="description">Description</Label>
-				</Form.Field>
+					<Input name="description" bind:value={$formData.description} />
-				<Form.Field {form} name="type">
+					{#if $errors.description}<span class="text-red-500 text-sm">{$errors.description[0]}</span>{/if}
-					<Form.Control let:attrs>
+				</div>
-						<Form.Label>Type</Form.Label>
+				<div class="flex items-center space-x-2">
-						<Select.Root {...attrs} bind:value={$formData.type} type="single">
+					<Checkbox name="multiplayer" bind:checked={$formData.multiplayer} />
-							<Select.Trigger>
+					<Label for="multiplayer">Multiplayer</Label>
-								{$formData.type || 'Select a type'}
+				</div>
+				<div class="space-y-2">
+					<Label for="type">Type</Label>
+					<Select.Root type="single" bind:value={$formData.type} name="type">
+						<Select.Trigger class="w-full" name="type">
+							{triggerContent}
 						</Select.Trigger>
 						<Select.Content>
 							<Select.Item value="jsPsych">jsPsych</Select.Item>
 							<Select.Item value="PsychoJS">PsychoJS</Select.Item>
 						</Select.Content>
 					</Select.Root>
-					</Form.Control>
+					{#if $errors.type}<span class="text-red-500 text-sm">{$errors.type[0]}</span>{/if}
-					<Form.FieldErrors />
+				</div>
-				</Form.Field>
+				<Button type="submit" class="w-full">Create</Button>
-				<Form.Button class="w-full">Create</Form.Button>
 			</form>
 		</CardContent>
 	</Card>