Change voltage to multiselect on device create and edit forms

Multiple voltages are stored as comma-separated string (e.g. "110V, 220V").
Edit form pre-selects existing values by parsing the stored string.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/routes/(app)/devices/[id]/edit/+page.server.ts

@@ -43,6 +43,7 @@ export const load: PageServerLoad = async ({ params }) => {
 export const actions: Actions = {
 	default: async ({ request, params }) => {
 		const formData = await request.formData();
+		const voltages = formData.getAll('voltage') as string[];
 		const raw = Object.fromEntries(formData);
 
 		const result = deviceSchema.safeParse(raw);
@@ -53,6 +54,7 @@ export const actions: Actions = {
 		const data = result.data;
 		const year = typeof data.year === 'number' ? data.year : null;
 		const locationId = data.locationId || null;
+		const voltage = voltages.length > 0 ? voltages.join(', ') : null;
 
 		await db
 			.update(devices)
@@ -64,7 +66,7 @@ export const actions: Actions = {
 				serialNumber: data.serialNumber || null,
 				year,
 				condition: data.condition,
-				voltage: data.voltage || null,
+				voltage,
 				frequency: data.frequency || null,
 				origin: data.origin || null,
 				faultDescription: data.faultDescription || null,

src/routes/(app)/devices/[id]/edit/+page.svelte

@@ -10,6 +10,7 @@
 	let category = $state(form?.values?.category ?? d.category);
 	let brand = $state(String(form?.values?.brand ?? d.brand ?? ''));
 	let model = $state(String(form?.values?.model ?? d.model ?? ''));
+	const existingVoltages = (d.voltage ?? '').split(',').map((v: string) => v.trim()).filter(Boolean);
 </script>
 
 <svelte:head>
@@ -87,13 +88,13 @@
 				</div>
 				<div>
 					<label for="voltage" class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">Voltage</label>
-					<select id="voltage" name="voltage"
-						class="w-full rounded-md border border-gray-300 px-3 py-2 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-white">
-						<option value="">—</option>
+					<select id="voltage" name="voltage" multiple size="4"
+						class="w-full rounded-md border border-gray-300 px-3 py-1 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-white">
 						{#each VOLTAGE_OPTIONS as v}
-							<option value={v} selected={v === (form?.values?.voltage ?? d.voltage)}>{v}</option>
+							<option value={v} selected={existingVoltages.includes(v)}>{v}</option>
 						{/each}
 					</select>
+					<p class="mt-0.5 text-xs text-gray-400 dark:text-gray-500">Ctrl+click for multiple</p>
 				</div>
 				<div>
 					<label for="frequency" class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">Frequency</label>

src/routes/(app)/devices/new/+page.server.ts

@@ -34,6 +34,7 @@ export const load: PageServerLoad = async () => {
 export const actions: Actions = {
 	default: async ({ request }) => {
 		const formData = await request.formData();
+		const voltages = formData.getAll('voltage') as string[];
 		const raw = Object.fromEntries(formData);
 
 		const result = deviceSchema.safeParse(raw);
@@ -44,6 +45,7 @@ export const actions: Actions = {
 		const data = result.data;
 		const year = typeof data.year === 'number' ? data.year : null;
 		const locationId = data.locationId || null;
+		const voltage = voltages.length > 0 ? voltages.join(', ') : null;
 
 		const [device] = await db
 			.insert(devices)
@@ -55,7 +57,7 @@ export const actions: Actions = {
 				serialNumber: data.serialNumber || null,
 				year,
 				condition: data.condition,
-				voltage: data.voltage || null,
+				voltage,
 				frequency: data.frequency || null,
 				origin: data.origin || null,
 				initialCondition: data.initialCondition || null,

src/routes/(app)/devices/new/+page.svelte

@@ -87,13 +87,13 @@
 				</div>
 				<div>
 					<label for="voltage" class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">Voltage</label>
-					<select id="voltage" name="voltage"
-						class="w-full rounded-md border border-gray-300 px-3 py-2 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-white">
-						<option value="">—</option>
+					<select id="voltage" name="voltage" multiple size="4"
+						class="w-full rounded-md border border-gray-300 px-3 py-1 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-white">
 						{#each VOLTAGE_OPTIONS as v}
-							<option value={v} selected={form?.values?.voltage === v}>{v}</option>
+							<option value={v}>{v}</option>
 						{/each}
 					</select>
+					<p class="mt-0.5 text-xs text-gray-400 dark:text-gray-500">Ctrl+click for multiple</p>
 				</div>
 				<div>
 					<label for="frequency" class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">Frequency</label>