✨ feat(todo): add PNG import functionality to spiral page

apps/todo/apps/web/src/lib/stores/spiral.svelte.ts

@@ -9,6 +9,7 @@ import {
 	type SpiralImage,
 	type SpiralRecord,
 	exportToPngBytes,
+	importFromPngBytes,
 	downloadPng,
 } from '@manacore/spiral-db';
 
@@ -200,6 +201,35 @@ class SpiralStore {
 		});
 		this.updateState();
 	}
+
+	/**
+	 * Import from PNG file
+	 */
+	async importFromPng(file: File): Promise<{ success: boolean; error?: string }> {
+		try {
+			this.isLoading = true;
+			this.error = null;
+
+			// Read file as ArrayBuffer
+			const buffer = await file.arrayBuffer();
+			const bytes = new Uint8Array(buffer);
+
+			// Parse PNG and extract image
+			const image = importFromPngBytes(bytes);
+
+			// Reconstruct database from image
+			this.db = SpiralDB.fromImage<TodoData>(image, createTodoSchema());
+			this.updateState();
+
+			return { success: true };
+		} catch (err) {
+			const errorMessage = err instanceof Error ? err.message : 'Unknown error';
+			this.error = errorMessage;
+			return { success: false, error: errorMessage };
+		} finally {
+			this.isLoading = false;
+		}
+	}
 }
 
 export const spiralStore = new SpiralStore();

apps/todo/apps/web/src/routes/(app)/spiral/+page.svelte

@@ -65,6 +65,26 @@
 		spiralStore.downloadPng();
 	}
 
+	let fileInput: HTMLInputElement;
+
+	function handleImportClick() {
+		fileInput?.click();
+	}
+
+	async function handleFileSelect(e: Event) {
+		const input = e.target as HTMLInputElement;
+		const file = input.files?.[0];
+		if (!file) return;
+
+		const result = await spiralStore.importFromPng(file);
+		if (!result.success) {
+			alert(`Import fehlgeschlagen: ${result.error}`);
+		}
+
+		// Reset input
+		input.value = '';
+	}
+
 	function handleClear() {
 		if (confirm('Alle Spiral-Daten löschen?')) {
 			spiralStore.clear();
@@ -269,6 +289,15 @@
 			</div>
 		</section>
 
+		<!-- Hidden file input for PNG import -->
+		<input
+			type="file"
+			accept=".png,image/png"
+			bind:this={fileInput}
+			onchange={handleFileSelect}
+			style="display: none;"
+		/>
+
 		<!-- Actions Section -->
 		<section class="actions-section">
 			<h2>Aktionen</h2>
@@ -278,6 +307,11 @@
 					PNG herunterladen
 				</button>
 
+				<button onclick={handleImportClick} class="btn-action" disabled={spiralStore.isLoading}>
+					<span class="btn-icon">📤</span>
+					PNG importieren
+				</button>
+
 				<button onclick={handleReimport} class="btn-action">
 					<span class="btn-icon">🔄</span>
 					Todos neu importieren