lägg till förkortning: pil upp/pil ner väljer mellan tillgängliga mål

src/components/create.svelte

@@ -27,7 +27,7 @@
 
 	let importing = false;
 	let progress = 0;
-	const handleCreate = async (e) => {
+	const handleCreate = async (e: Any) => {
 		//		abbForm.errors = []
 		e.preventDefault();
 
@@ -81,17 +81,44 @@
 	};
 
 	const onSelectedChange = (v) => {
-		console.log(v);
+		// console.log(v);
 		abbForm.target = v;
 	};
-	let selectedLists = [];
+	$: selectedLists = {
+		standard: {},
+		subject: {}
+	};
 	let show = false;
-	onMount(() => {
-		db.lists.get(shortforms.standardList).then((l) => {
-			selectedLists.push({ value: l.id, label: l.name });
+
+	db.lists
+		.get(shortforms.standardList)
+		.then((l) => {
+			if (l) {
+				selectedLists.standard = { value: l.id, label: l.name };
 				abbForm.target = { value: l.id, label: l.name };
+			} else {
+				selectedLists.standard = { value: -1 };
+			}
+		})
+		.catch((err) => {
+			console.error('db.lists.get (standard)', err);
 		});
-		console.log('fokusera på input och mata med medhavd data');
+	db.lists
+		.get(shortforms.subjectList)
+		.then((l) => {
+			if (l) {
+				selectedLists.subject = { value: l.id, label: l.name };
+				abbForm.target = { value: l.id, label: l.name };
+			} else {
+				selectedLists.subject = { value: -1 };
+			}
+		})
+		.catch((err) => {
+			console.error('db.lists.get (subject)', err);
+		});
+
+	onMount(async () => {
+		// console.log('fokusera på input och mata med medhavd data');
 		const el = document.getElementById('shortformEl');
 		if (el) {
 			setTimeout(() => {
@@ -100,6 +127,19 @@
 			}, 15);
 		}
 	});
+	const handleKeydown = (e) => {
+		if (e.key == 'ArrowDown') {
+			if (selectedLists.subject.value > -1) {
+				abbForm.target = selectedLists.subject;
+			}
+		}
+
+		if (e.key == 'ArrowUp') {
+			if (selectedLists.standard.value > -1) {
+				abbForm.target = selectedLists.standard;
+			}
+		}
+	};
 </script>
 
 <div use:clickOutside={cancelCreate}>
@@ -115,6 +155,7 @@
 				enctype="multipart/form-data"
 				on:submit={handleCreate}
 				autocomplete="off"
+				on:keydown={handleKeydown}
 			>
 				<div class="grid grid-cols-4 items-center gap-4">
 					<Label>Förkortning</Label>
@@ -138,12 +179,40 @@
 						</Select.Trigger>
 
 						<Select.Content>
-							{#each selectedLists as list}
-								<Select.Item value={list.id} label={list.name}>{list.name}</Select.Item>
-							{/each}
+							{#if selectedLists.standard.value > -1}
+								<Select.Group>
+									<Select.Label>Standardlista</Select.Label>
+									<Select.Item
+										value={selectedLists.standard.value}
+										label={selectedLists.standard.label}>{selectedLists.standard.label}</Select.Item
+									>
+								</Select.Group>
+							{/if}
+							{#if selectedLists.subject.value > -1}
+								<Select.Group>
+									<Select.Label>Ämneslista</Select.Label>
+									<Select.Item
+										value={selectedLists.subject.value}
+										label={selectedLists.subject.label}>{selectedLists.subject.label}</Select.Item
+									>
+								</Select.Group>
+							{/if}
 						</Select.Content>
 					</Select.Root>
 				</div>
+				<div>
+					<small class="text-gray-500 dark:text-gray-400">
+						Växla mellan standardlista och ämneslista med <kbd
+							class="rounded-lg border border-gray-200 bg-gray-100 px-2 py-1.5 text-xs font-semibold text-gray-800 dark:border-gray-500 dark:bg-gray-600 dark:text-gray-100"
+							>Pil upp</kbd
+						>
+						och
+						<kbd
+							class="rounded-lg border border-gray-200 bg-gray-100 px-2 py-1.5 text-xs font-semibold text-gray-800 dark:border-gray-500 dark:bg-gray-600 dark:text-gray-100"
+							>Pil ned</kbd
+						>
+					</small>
+				</div>
 				{#if abbForm.errors.length > 0}
 					<ScrollArea class="max-h-48 rounded-md">
 						<div