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>
This commit is contained in:
Till JS 2026-04-01 16:54:12 +02:00
parent 11a2db8fcd
commit aadd1c7538
4 changed files with 14 additions and 9 deletions

View file

@ -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:

View file

@ -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:

View file

@ -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:

View file

@ -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 });
}