diff --git a/apps/todo/apps/web/src/routes/(app)/+layout.svelte b/apps/todo/apps/web/src/routes/(app)/+layout.svelte index e186e2eee..8cc9043ef 100644 --- a/apps/todo/apps/web/src/routes/(app)/+layout.svelte +++ b/apps/todo/apps/web/src/routes/(app)/+layout.svelte @@ -65,6 +65,20 @@ setContext('tasks', allTasks); setContext('tags', allTags); + // Edit mode state — shared between layout (PillNav button) and page (editor) + let editMode = $state(false); + setContext('editMode', { + get active() { + return editMode; + }, + toggle() { + editMode = !editMode; + }, + set(val: boolean) { + editMode = val; + }, + }); + // Derived active projects for UI let activeProjects = $derived(getActiveProjects(allProjects.value)); @@ -240,7 +254,12 @@ }, }); - // Filter and Tags stay as standalone pills (toggle behavior, not navigation) + // Handle edit mode toggle + function handleEditToggle() { + editMode = !editMode; + } + + // Filter, Tags, and Edit stay as standalone pills (toggle behavior, not navigation) let baseNavItems = $derived([ { href: '/', @@ -256,6 +275,17 @@ onClick: handleTagStripToggle, active: isTagStripVisible, }, + ...($page.url.pathname === '/' || $page.url.pathname === '' + ? [ + { + href: '/', + label: editMode ? 'Fertig' : 'Layout', + icon: editMode ? 'check' : 'grid', + onClick: handleEditToggle, + active: editMode, + }, + ] + : []), ]); // Navigation items filtered by visibility settings (with fallback for guest mode) diff --git a/apps/todo/apps/web/src/routes/(app)/+page.svelte b/apps/todo/apps/web/src/routes/(app)/+page.svelte index e45940b25..d66a0c6fe 100644 --- a/apps/todo/apps/web/src/routes/(app)/+page.svelte +++ b/apps/todo/apps/web/src/routes/(app)/+page.svelte @@ -13,9 +13,7 @@ CheckCircle, Plus, Trash, - PencilSimple, GearSix, - X, Star, Lightning, Clock, @@ -41,8 +39,11 @@ const allTasks: { readonly value: Task[]; readonly loading: boolean; readonly error: unknown } = getContext('tasks'); + const editModeCtx: { readonly active: boolean; toggle(): void; set(val: boolean): void } = + getContext('editMode'); + + let editMode = $derived(editModeCtx.active); let tipDismissed = $state(false); - let editMode = $state(false); let filterOpenId = $state(null); const today = startOfDay(new Date()); @@ -297,17 +298,17 @@ ]; } - function enterEditMode() { - const pages = ensureCustomPages(); - todoSettings.set('customPages', pages); - todoSettings.set('pageMode', 'custom'); - editMode = true; - } - - function exitEditMode() { - editMode = false; - filterOpenId = null; - } + // When edit mode activates (from PillNav), ensure custom pages exist + $effect(() => { + if (editMode && todoSettings.pageMode !== 'custom') { + const pages = ensureCustomPages(); + todoSettings.set('customPages', pages); + todoSettings.set('pageMode', 'custom'); + } + if (!editMode) { + filterOpenId = null; + } + }); function updatePageLabel(id: string, label: string) { const pages = clonePages(todoSettings.customPages); @@ -382,7 +383,7 @@ { if (e.key === 'Escape' && editMode) { - exitEditMode(); + editModeCtx.set(false); return; } const target = e.target as HTMLElement; @@ -784,20 +785,6 @@ {/if} - - - {/if}