From aadd1c7538f2a73a9945d29c6073426bcc54846e Mon Sep 17 00:00:00 2001
From: Till JS <tills95@gmail.com>
Date: Wed, 1 Apr 2026 16:54:12 +0200
Subject: [PATCH] feat(todo/web): add "To Do" page, remove scroll-snap, allow
 closing last column

Add open-tasks secondary page, remove scroll-snap from fokus layout
and page components for smoother scrolling, and allow closing the
last remaining column.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/lib/components/board-views/FokusLayout.svelte    | 6 +-----
 .../apps/web/src/lib/components/pages/PagePicker.svelte  | 9 ++++++++-
 .../web/src/lib/components/pages/SecondaryPage.svelte    | 4 +++-
 apps/todo/apps/web/src/routes/(app)/+page.svelte         | 4 ++--
 4 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/apps/todo/apps/web/src/lib/components/board-views/FokusLayout.svelte b/apps/todo/apps/web/src/lib/components/board-views/FokusLayout.svelte
index e279b84b6..3a3878a7d 100644
--- a/apps/todo/apps/web/src/lib/components/board-views/FokusLayout.svelte
+++ b/apps/todo/apps/web/src/lib/components/board-views/FokusLayout.svelte
@@ -240,11 +240,8 @@
 		display: flex;
 		gap: 1.5rem;
 		overflow-x: auto;
-		scroll-snap-type: x mandatory;
-		/* Centering padding: pushes first sheet to viewport center.
-		   Works like a carousel — padding is scrollable. */
+		/* Centering padding: pushes first sheet to viewport center */
 		padding: 1rem calc(50% - var(--sheet-width) / 2);
-		scroll-padding: calc(50% - var(--sheet-width) / 2);
 		scrollbar-width: none;
 	}
 	.fokus-track::-webkit-scrollbar {
@@ -255,7 +252,6 @@
 		flex: 0 0 auto;
 		width: var(--sheet-width, min(840px, 85vw));
 		min-height: 60vh;
-		scroll-snap-align: center;
 		background: #fffef5;
 		border-radius: 0.375rem;
 		box-shadow:
diff --git a/apps/todo/apps/web/src/lib/components/pages/PagePicker.svelte b/apps/todo/apps/web/src/lib/components/pages/PagePicker.svelte
index a3ba3056f..c086fed5b 100644
--- a/apps/todo/apps/web/src/lib/components/pages/PagePicker.svelte
+++ b/apps/todo/apps/web/src/lib/components/pages/PagePicker.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import {
+		Circle,
 		CheckCircle,
 		CalendarCheck,
 		Warning,
@@ -27,6 +28,13 @@
 	let { onSelect, onClose, activePageIds = [] }: Props = $props();
 
 	const PAGE_OPTIONS: PageOption[] = [
+		{
+			id: 'todo',
+			title: 'To Do',
+			description: 'Offene Aufgaben',
+			icon: Circle,
+			color: '#6B7280',
+		},
 		{
 			id: 'completed',
 			title: 'Erledigt',
@@ -118,7 +126,6 @@
 		flex: 0 0 auto;
 		width: min(320px, 85vw);
 		min-height: 60vh;
-		scroll-snap-align: center;
 		background: #fffef5;
 		border-radius: 0.375rem;
 		box-shadow:
diff --git a/apps/todo/apps/web/src/lib/components/pages/SecondaryPage.svelte b/apps/todo/apps/web/src/lib/components/pages/SecondaryPage.svelte
index 8dcc174c8..ce517fc72 100644
--- a/apps/todo/apps/web/src/lib/components/pages/SecondaryPage.svelte
+++ b/apps/todo/apps/web/src/lib/components/pages/SecondaryPage.svelte
@@ -17,6 +17,7 @@
 	const tasksCtx: { readonly value: Task[] } = getContext('tasks');
 
 	const PAGE_META: Record<string, { title: string; color: string }> = {
+		todo: { title: 'To Do', color: '#6B7280' },
 		completed: { title: 'Erledigt', color: '#22C55E' },
 		today: { title: 'Heute', color: '#F59E0B' },
 		overdue: { title: 'Überfällig', color: '#EF4444' },
@@ -34,6 +35,8 @@
 		const weekEnd = addDays(today, 7);
 
 		switch (pageId) {
+			case 'todo':
+				return tasks.filter((t) => !t.isCompleted);
 			case 'completed':
 				return tasks.filter((t) => t.isCompleted);
 			case 'today':
@@ -141,7 +144,6 @@
 	.secondary-page {
 		flex: 0 0 auto;
 		min-height: 60vh;
-		scroll-snap-align: center;
 		background: #fffef5;
 		border-radius: 0.375rem;
 		box-shadow:
diff --git a/apps/todo/apps/web/src/routes/(app)/+page.svelte b/apps/todo/apps/web/src/routes/(app)/+page.svelte
index bf791aed2..89f4c11c2 100644
--- a/apps/todo/apps/web/src/routes/(app)/+page.svelte
+++ b/apps/todo/apps/web/src/routes/(app)/+page.svelte
@@ -37,7 +37,7 @@
 	}
 
 	function handleColumnClose(colIdx: number) {
-		if (!activeView || activeView.columns.length <= 1) return;
+		if (!activeView) return;
 		const columns = $state.snapshot(activeView.columns).filter((_, i) => i !== colIdx);
 		updateView({ columns });
 	}
@@ -83,7 +83,7 @@
 	}
 
 	function removeColumn(colIdx: number) {
-		if (!activeView || activeView.columns.length <= 1) return;
+		if (!activeView) return;
 		const columns = $state.snapshot(activeView.columns).filter((_, i) => i !== colIdx);
 		updateView({ columns });
 	}