From 4c3ca3bdf6ae47d923149a48a2d002a0f4b8a900 Mon Sep 17 00:00:00 2001 From: Till-JS <101404291+Till-JS@users.noreply.github.com> Date: Tue, 17 Feb 2026 10:55:29 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(todo):=20integrate=20spiral-db?= =?UTF-8?q?=20visualization?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add interactive spiral database visualization to todo app: - SpiralCanvas component for pixel-based image rendering - Reactive Svelte 5 store for SpiralDB state management - Full /spiral page with stats, zoom, grid toggle, emoji view - Import existing todos into spiral format - PNG export/download functionality - Navigation link in app layout --- apps/todo/apps/web/package.json | 1 + .../src/lib/components/SpiralCanvas.svelte | 172 +++ .../apps/web/src/lib/stores/spiral.svelte.ts | 205 ++++ .../apps/web/src/routes/(app)/+layout.svelte | 1 + .../web/src/routes/(app)/spiral/+page.svelte | 712 +++++++++++ pnpm-lock.yaml | 1091 ++++++++--------- 6 files changed, 1598 insertions(+), 584 deletions(-) create mode 100644 apps/todo/apps/web/src/lib/components/SpiralCanvas.svelte create mode 100644 apps/todo/apps/web/src/lib/stores/spiral.svelte.ts create mode 100644 apps/todo/apps/web/src/routes/(app)/spiral/+page.svelte diff --git a/apps/todo/apps/web/package.json b/apps/todo/apps/web/package.json index 4b014be59..0c70af754 100644 --- a/apps/todo/apps/web/package.json +++ b/apps/todo/apps/web/package.json @@ -33,6 +33,7 @@ "vite": "^6.0.0" }, "dependencies": { + "@manacore/spiral-db": "workspace:*", "@manacore/shared-api-client": "workspace:*", "@manacore/shared-auth": "workspace:*", "@manacore/shared-splitscreen": "workspace:*", diff --git a/apps/todo/apps/web/src/lib/components/SpiralCanvas.svelte b/apps/todo/apps/web/src/lib/components/SpiralCanvas.svelte new file mode 100644 index 000000000..c6a2cf35f --- /dev/null +++ b/apps/todo/apps/web/src/lib/components/SpiralCanvas.svelte @@ -0,0 +1,172 @@ + + +
Deine Todos als Pixel-Bild gespeichert
+{emojiView}
+ {:else}
+ #{selectedPixel}
+ + SpiralDB speichert strukturierte Daten in Pixel-Bildern. Jeder Pixel nutzt 3 Bit (8 + Farben) und die Daten wachsen spiralförmig vom Zentrum nach außen. Das Bild kann als PNG + exportiert und später wieder importiert werden. +
+