feat(todo): horizontal paper pages with inline edit mode

- Each section (priority/date) is its own paper sheet, scrollable horizontally
- Edit FAB (pencil icon, bottom right) toggles inline page editor
- Edit mode: rename pages, configure icon/filters/priorities per page,
  reorder with arrow buttons, add/remove pages
- Three page modes: priority (Eisenhower), date, custom
- Page width selector (S/M/L/XL) visible only in edit mode
- 10 configurable page icons
- Settings stores pageMode, pageWidth, customPages in localStorage
- Fix structuredClone error with Svelte proxies (use JSON round-trip)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

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

@@ -11,9 +11,23 @@ export type TodoView = 'inbox' | 'today' | 'upcoming' | 'kanban' | 'completed';
 export type KanbanCardSize = 'compact' | 'normal' | 'large';
 export type PageMode = 'date' | 'priority' | 'custom';
 
+export type PageIcon =
+	| 'warning'
+	| 'calendar'
+	| 'calendar-dots'
+	| 'check'
+	| 'star'
+	| 'lightning'
+	| 'clock'
+	| 'fire'
+	| 'leaf'
+	| 'heart';
+export type PageWidth = 'narrow' | 'medium' | 'wide' | 'full';
+
 export interface PageConfig {
 	id: string;
 	label: string;
+	icon?: PageIcon;
 	filter: {
 		priorities?: ('low' | 'medium' | 'high' | 'urgent')[];
 		completed?: boolean;
@@ -64,6 +78,7 @@ export interface TodoAppSettings extends Record<string, unknown> {
 
 	// Page mode
 	pageMode: PageMode;
+	pageWidth: PageWidth;
 	customPages: PageConfig[];
 }
 
@@ -110,6 +125,7 @@ const DEFAULT_SETTINGS: TodoAppSettings = {
 
 	// Page mode
 	pageMode: 'priority' as PageMode,
+	pageWidth: 'medium' as PageWidth,
 	customPages: [] as PageConfig[],
 };
 
@@ -205,6 +221,9 @@ export const todoSettings = {
 	get pageMode() {
 		return baseStore.settings.pageMode;
 	},
+	get pageWidth() {
+		return baseStore.settings.pageWidth;
+	},
 	get customPages() {
 		return baseStore.settings.customPages;
 	},

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

@@ -4,7 +4,12 @@
 	import { authStore } from '$lib/stores/auth.svelte';
 	import { userSettings } from '$lib/stores/user-settings.svelte';
 	import { APP_VERSION } from '$lib/version';
-	import { todoSettings, type TodoView, type KanbanCardSize } from '$lib/stores/settings.svelte';
+	import {
+		todoSettings,
+		type TodoView,
+		type KanbanCardSize,
+		type PageMode,
+	} from '$lib/stores/settings.svelte';
 	import { getContext } from 'svelte';
 	import type { Project } from '@todo/shared';
 
@@ -51,6 +56,12 @@
 		{ value: 1440, label: '1 Tag' },
 	];
 
+	const pageModeOptions = [
+		{ value: 'priority', label: 'Nach Priorität (Eisenhower)' },
+		{ value: 'date', label: 'Nach Datum (Heute/Morgen)' },
+		{ value: 'custom', label: 'Eigene Seiten (✏️ auf Startseite)' },
+	];
+
 	const durationOptions = [
 		{ value: '5', label: '5 min' },
 		{ value: '10', label: '10 min' },
@@ -152,6 +163,41 @@
 		alwaysVisibleHrefs={['/', '/settings']}
 	/>
 
+	<!-- Page Layout Section -->
+	<SettingsSection title="Seiten-Ansicht">
+		{#snippet icon()}
+			<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
+				/>
+			</svg>
+		{/snippet}
+
+		<SettingsCard>
+			<SettingsSelect
+				label="Seiten-Modus"
+				description="Wie deine Aufgaben auf den Papier-Seiten gruppiert werden"
+				options={pageModeOptions}
+				value={todoSettings.pageMode}
+				onchange={(v: string | number | null) => todoSettings.set('pageMode', v as PageMode)}
+			>
+				{#snippet icon()}
+					<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M4 6h16M4 10h16M4 14h16M4 18h16"
+						/>
+					</svg>
+				{/snippet}
+			</SettingsSelect>
+		</SettingsCard>
+	</SettingsSection>
+
 	<!-- Task Behavior Section -->
 	<SettingsSection title="Task-Verhalten">
 		{#snippet icon()}