flake.nix

@@ -15,7 +15,7 @@
           };
         in {
           devShell = pkgs.mkShell {
-            nativeBuildInputs = with pkgs; [ nodejs ];
+            nativeBuildInputs = with pkgs; [ nodejs_latest ];
           };
         }
       );

package-lock.json

@@ -22,6 +22,7 @@
 				"prettier": "^3.1.1",
 				"prettier-plugin-svelte": "^3.1.2",
 				"sass": "^1.77.5",
+				"simple-svelte-autocomplete": "^2.5.2",
 				"svelte": "^4.2.7",
 				"svelte-check": "^3.6.0",
 				"tslib": "^2.4.1",
@@ -3945,6 +3946,12 @@
 				"url": "https://github.com/sponsors/isaacs"
 			}
 		},
+		"node_modules/simple-svelte-autocomplete": {
+			"version": "2.5.2",
+			"resolved": "https://registry.npmjs.org/simple-svelte-autocomplete/-/simple-svelte-autocomplete-2.5.2.tgz",
+			"integrity": "sha512-6+kZP3XQGb7zs0djTWoFv8tQorBZdv64YfCKrlsYIYBCFsEeikSiNsBSSYw1Om+LYmFeMEOAYSSKoEw+qpnBXQ==",
+			"dev": true
+		},
 		"node_modules/sirv": {
 			"version": "2.0.4",
 			"resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.4.tgz",

package.json

@@ -19,21 +19,22 @@
 		"@sveltejs/vite-plugin-svelte": "^3.0.0",
 		"@types/eslint": "^9.0.0",
 		"@types/node": "^20.14.11",
+		"bulma": "^1.0.1",
 		"eslint": "^9.0.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "^2.36.0",
 		"globals": "^15.0.0",
 		"prettier": "^3.1.1",
 		"prettier-plugin-svelte": "^3.1.2",
+		"sass": "^1.77.5",
+		"simple-svelte-autocomplete": "^2.5.2",
 		"svelte": "^4.2.7",
 		"svelte-check": "^3.6.0",
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",
 		"typescript-eslint": "^8.0.0-alpha.20",
 		"vite": "^5.0.3",
-		"vitest": "^2.0.0",
-		"bulma": "^1.0.1",
-		"sass": "^1.77.5"
+		"vitest": "^2.0.0"
 	},
 	"type": "module",
 	"engines": {

src/routes/+page.svelte

@@ -1,9 +1,13 @@
 <script lang="ts">
 	import { enhance } from '$app/forms';
 	import type { ActionData } from './$types';
+	// @ts-expect-error: package does not contain type definitions
+	import AutoComplete from 'simple-svelte-autocomplete';
 
 	export let form: ActionData;
 
+	let selectedName: string;
+
 	let files: FileList;
 	let sending = false;
 
@@ -21,6 +25,12 @@
 				.map(([k, v]) => `${(size / k).toFixed(1)} ${v}B`)[0] ?? `${size} bytes`
 		);
 	};
+
+	async function loadNames() {
+		const url = './names';
+		const response = await fetch(url);
+		return await response.json();
+	}
 </script>
 
 <form
@@ -44,14 +54,15 @@
 	<div class="field">
 		<label for="name" class="label">Name</label>
 		<div class="control">
-			<input
+			<AutoComplete
 				id="name"
-				class="input"
-				type="text"
 				name="name"
 				placeholder="Name"
-				value={form?.name ?? ''}
-				required
+				create={true}
+				bind:selectedItem={selectedName}
+				bind:text={selectedName}
+				createText=""
+				searchFunction={loadNames}
 			/>
 		</div>
 		{#if form?.field === 'name'}
@@ -69,10 +80,10 @@
 			<span class="file-cta">
 				<span class="file-label">Fotos auswählen...</span>
 			</span>
-			{#if files}
-				<span class="file-name"
-					>{files.length} Bild{#if files.length > 1}er{/if} ausgewählt ({fileSize(files)})</span
-				>
+			{#if files && files?.length !== 0}
+				<span class="file-name">
+					{files.length} Bild{#if files.length > 1}er{/if} ausgewählt ({fileSize(files)})
+				</span>
 			{:else}
 				<span class="file-name">Keine Bilder ausgewählt</span>
 			{/if}

src/routes/names/+server.ts

@@ -6,6 +6,7 @@ export function GET() {
 	const names = readdirSync(storagePath).filter((f) =>
 		statSync(`${storagePath}/${f}`).isDirectory()
 	);
+	names.sort();
 
 	return json(names);
 }

src/variables.scss

@@ -1,2 +1,2 @@
 /* Set your brand colors */
-$pink: pink;
+$pink: #d47479;