{#snippet statusButton(t: Task)} {@const Icon = STATUS_ICON[t.status]} {/snippet} {#snippet taskRow(t: Task, depth: number)} {@const due = dueState(t)}

{@render statusButton(t)}

{#if t.flagged}{/if} {#if t.priority >= 2}{PRIORITY[t.priority]}{/if} {#if t.dueDate}{dueLabel(t)}{/if} {#if t.reminderAt && isOpen(t)} {reminderLabel(t.reminderAt)}{/if} {#if t.recurrence}{/if} {#each t.tags as tag (tag)}#{tag}{/each} {#if t.goalId} {goalTitle(t.goalId)}{/if}

{#if t.notes}

{t.notes}

{/if}

{#each childrenOf[t.id] ?? [] as child (child.id)} {@render taskRow(child, depth + 1)} {/each} {/snippet}

tasks

to do: {counts.todo}
in progress: {counts.in_progress}
done: {counts.done}
overdue: {counts.overdue}
this week: {counts.week}
flagged: {counts.flagged}

{#each STATUS_FILTERS as [value, label] (value)} {/each}

{#each data.areas as a (a.id)}{/each}

{#if upcoming.length && statusFilter === 'open' && areaFilter === 'all' && !search}

Next two weeks

{@render statusButton(t)} {dueLabel(t)} {areaName(t.areaId)}

{/if}

{#each groups as g (g.key)}

{g.name}

{#if g.description}{g.description}{/if}

{g.done}/{g.total} done

{#if g.total}{/if}

{#each expanded[g.key] ? g.tasks : g.tasks.slice(0, PAGE) as t (t.id)}{@render taskRow( t, 0 )}{/each} {#if g.tasks.length > PAGE && !expanded[g.key]} {/if}

{:else}

No tasks match these filters.

{/each}

goals

{#each data.goals as goal (goal.id)} {@const stats = goalStats(goal)} {@const pct = metricPct(goal)} {:else}

No goals yet.

{/each}

{confirmDelete ? 'Delete task' : editing ? 'Edit task' : 'New task'} {#if confirmDelete && editing} {:else} {#key editing?.id ?? 'new'}

{#if editing}{/if} Title * Notes

</label
					>
					<div class="grid grid-cols-2 gap-3">
						<label class="grid gap-1 text-sm"
							><span>Status</span>
							<NativeSelect name="status" value={editing?.status ?? 'todo'}>
								{#each Object.entries(STATUS_LABEL) as [value, label] (value)}<option {value}
										>{label}</option
									>{/each}
							</NativeSelect></label
						>
						<label class="grid gap-1 text-sm"
							><span>Priority</span>
							<NativeSelect name="priority" value={String(editing?.priority ?? 0)}>
								{#each PRIORITY as label, i (label)}<option value={String(i)}>{label}</option
									>{/each}
							</NativeSelect></label
						>
						<label class="grid gap-1 text-sm"
							><span>Due date</span>
							<Input name="due" type="date" value={editing?.dueDate ?? ''} /></label
						>
						<label class="grid gap-1 text-sm"
							><span>Due time</span>
							<Input
								name="dueTime"
								type="time"
								value={editing?.dueTime?.slice(0, 5) ?? ''}
							/></label
						>
						<label class="grid gap-1 text-sm"
							><span>Area</span>
							<NativeSelect
								name="areaId"
								value={editing ? String(editing.areaId ?? '') : quickArea}
							>
								<option value="">No area</option>
								{#each data.areas as a (a.id)}<option value={String(a.id)}>{a.name}</option>{/each}
							</NativeSelect></label
						>
						<label class="grid gap-1 text-sm"
							><span>Goal</span>
							<NativeSelect name="goalId" value={String(editing?.goalId ?? '')}>
								<option value="">None</option>
								{#each data.goals as g (g.id)}<option value={String(g.id)}>{g.title}</option>{/each}
							</NativeSelect></label
						>
						<label class="grid gap-1 text-sm"
							><span>Reminder</span>
							<Input
								name="reminderAt"
								type="datetime-local"
								value={editing?.reminderAt
									? localMoment.format(editing.reminderAt).replace(' ', 'T')
									: ''}
							/></label
						>
						<label class="grid gap-1 text-sm"
							><span>Subtask of</span>
							<NativeSelect name="parentId" value={String(editing?.parentId ?? '')}>
								<option value="">—</option>
								{#each data.tasks.filter((t) => t.id !== editing?.id && t.parentId === null && isOpen(t)) as t (t.id)}<option
										value={String(t.id)}>{t.title}</option
									>{/each}
							</NativeSelect></label
						>
					</div>
					<label class="grid gap-1 text-sm"
						><span>Tags <small>(comma or space separated)</small></span>
						<Input name="tags" value={editing?.tags.join(', ') ?? ''} /></label
					>
					<label class="grid gap-1 text-sm"
						><span>Repeat <small>(RRULE, e.g. FREQ=WEEKLY;BYDAY=MO; not automatic yet)</small></span
						>
						<Input name="recurrence" value={editing?.recurrence ?? ''} /></label
					>
					<label class="flex items-center gap-2 text-sm"
						><input type="checkbox" name="flagged" checked={editing?.flagged ?? false} /> Flagged (!)</label
					>
					{#if editing}<small
							>Created {editing.createdAt.toLocaleDateString('en-GB')}{editing.completedAt
								? ` · closed ${editing.completedAt.toLocaleDateString('en-GB')}`
								: ''}{editing.source ? ` · ${editing.source}` : ''}</small
						>{/if}
					{#if error}<p class="text-sm text-red-500" role="alert">{error}</p>{/if}
					<div class="mt-2 flex justify-between gap-2">
						{#if editing}<Button
								type="button"
								variant="ghost"
								class="text-red-500"
								onclick={() => (confirmDelete = true)}>Delete</Button
							>{:else}<span></span>{/if}
						<div class="flex gap-2">
							<Button type="button" variant="outline" onclick={() => (taskDialog = false)}
								>Cancel</Button
							>
							<Button type="submit">Save</Button>
						</div>
					</div>
				</form>
			{/key}
		{/if}
	</Dialog.Content>
</Dialog.Root>

<Dialog.Root bind:open={goalDialog}>
	<Dialog.Content class="block max-h-[90dvh] overflow-y-auto sm:max-w-lg">
		<Dialog.Header class="mb-4 pr-8">
			<Dialog.Title
				>{confirmDelete ? 'Delete goal' : editingGoal ? 'Edit goal' : 'New goal'}</Dialog.Title
			>
			<Dialog.Description class="sr-only">Manage a private goal.</Dialog.Description>
		</Dialog.Header>
		{#if confirmDelete && editingGoal}
			<form method="POST" action="?/deleteGoal" use:enhance={submitDialog}>
				<input type="hidden" name="id" value={editingGoal.id} />
				<p class="mb-4 text-sm">
					Delete “{editingGoal.title}”? Linked tasks stay, without the goal.
				</p>
				{#if error}<p class="mb-3 text-sm text-red-500" role="alert">{error}</p>{/if}
				<div class="flex justify-end gap-2">
					<Button type="button" variant="outline" onclick={() => (confirmDelete = false)}
						>Back</Button
					>
					<Button type="submit" variant="destructive">Delete</Button>
				</div>
			</form>
		{:else}
			{#key editingGoal?.id ?? 'new'}
				<form method="POST" action="?/saveGoal" use:enhance={submitDialog} class="grid gap-3">
					{#if editingGoal}<input type="hidden" name="id" value={editingGoal.id} />{/if}
					<label class="grid gap-1 text-sm"
						><span>Title *</span>
						<Input name="title" required maxlength={300} value={editingGoal?.title ?? ''} /></label
					>
					<label class="grid gap-1 text-sm"
						><span>Notes</span>
						<Textarea name="notes" rows={2} value={editingGoal?.notes ?? ''} /></label
					>
					<div class="grid grid-cols-2 gap-3">
						<label class="grid gap-1 text-sm"
							><span>Status</span>
							<NativeSelect name="status" value={editingGoal?.status ?? 'active'}>
								<option value="active">Active</option>
								<option value="achieved">Achieved</option>
								<option value="dropped">Dropped</option>
							</NativeSelect></label
						>
						<label class="grid gap-1 text-sm"
							><span>Target date</span>
							<Input name="targetDate" type="date" value={editingGoal?.targetDate ?? ''} /></label
						>
						<label class="grid gap-1 text-sm"
							><span>Area</span>
							<NativeSelect name="areaId" value={String(editingGoal?.areaId ?? '')}>
								<option value="">No area</option>
								{#each data.areas as a (a.id)}<option value={String(a.id)}>{a.name}</option>{/each}
							</NativeSelect></label
						>
						<label class="grid gap-1 text-sm"
							><span>Metric</span>
							<Input
								name="metric"
								value={editingGoal?.metric ?? ''}
								placeholder="e.g. Net income per month"
							/></label
						>
						<label class="grid gap-1 text-sm"
							><span>Current</span>
							<Input
								name="metricCurrent"
								inputmode="decimal"
								value={editingGoal?.metricCurrent ?? ''}
							/></label
						>
						<label class="grid gap-1 text-sm"
							><span>Target</span>
							<Input
								name="metricTarget"
								inputmode="decimal"
								value={editingGoal?.metricTarget ?? ''}
							/></label
						>
						<label class="grid gap-1 text-sm"
							><span>Unit</span>
							<Input
								name="metricUnit"
								value={editingGoal?.metricUnit ?? ''}
								placeholder="EUR, kg…"
							/></label
						>
						<label class="flex items-center gap-2 self-end pb-2 text-sm"
							><input type="checkbox" name="flagged" checked={editingGoal?.flagged ?? false} /> Flagged</label
						>
					</div>
					{#if error}<p class="text-sm text-red-500" role="alert">{error}</p>{/if}
					<div class="mt-2 flex justify-between gap-2">
						{#if editingGoal}<Button
								type="button"
								variant="ghost"
								class="text-red-500"
								onclick={() => (confirmDelete = true)}>Delete</Button
							>{:else}<span></span>{/if}
						<div class="flex gap-2">
							<Button type="button" variant="outline" onclick={() => (goalDialog = false)}
								>Cancel</Button
							>
							<Button type="submit">Save</Button>
						</div>
					</div>
				</form>
			{/key}
		{/if}
	</Dialog.Content>
</Dialog.Root>

<style>
	.panel {
		border: 1px solid var(--site-border);
		border-radius: 0.75rem;
		background: var(--site-surface);
		padding: 1rem 1.25rem;
	}
	small,
	.notes {
		color: var(--site-muted);
	}
	.notes {
		font-size: 0.8rem;
		line-height: 1.35;
		margin-top: 0.15rem;
	}
	.stats {
		display: flex;
		flex-wrap: wrap;
		gap: 1.25rem;
	}
	.stats dt {
		font-size: 0.75rem;
		color: var(--site-muted);
	}
	.stats dd {
		font-size: 1.5rem;
		font-weight: 600;
		font-variant-numeric: tabular-nums;
	}
	.stats .alert dd {
		color: rgb(239 68 68);
	}
	.task {
		display: flex;
		align-items: flex-start;
		gap: 0.6rem;
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
	}
	.task.closed .title {
		text-decoration: line-through;
		color: var(--site-muted);
	}
	.title {
		text-align: left;
		font-size: 0.925rem;
	}
	.title:hover {
		text-decoration: underline;
		text-underline-offset: 3px;
	}
	.status {
		display: inline-flex;
		flex-shrink: 0;
		border-radius: 999px;
		color: var(--site-muted);
		margin-top: 0.05rem;
	}
	.status:hover {
		color: var(--site-text);
	}
	.status-in_progress {
		color: rgb(245 158 11);
	}
	.status-done {
		color: rgb(34 197 94);
	}
	.status-select {
		font-size: 0.75rem;
		background: transparent;
		color: var(--site-muted);
		border: 1px solid var(--site-border);
		border-radius: 0.375rem;
		padding: 0.1rem 0.25rem;
	}
	.chip {
		display: inline-flex;
		align-items: center;
		gap: 0.2rem;
		font-size: 0.7rem;
		line-height: 1;
		padding: 0.2rem 0.45rem;
		border-radius: 999px;
		border: 1px solid var(--site-border);
		color: var(--site-muted);
		white-space: nowrap;
	}
	.due-overdue {
		background: rgb(239 68 68 / 0.15);
		border-color: rgb(239 68 68 / 0.5);
		color: rgb(239 68 68);
	}
	.due-today {
		background: rgb(245 158 11 / 0.18);
		border-color: rgb(245 158 11 / 0.55);
		color: rgb(217 119 6);
	}
	.due-soon {
		border-color: rgb(59 130 246 / 0.5);
		color: rgb(59 130 246);
	}
	.prio-3 {
		color: rgb(239 68 68);
	}
	.prio-2 {
		color: rgb(245 158 11);
	}
	.tag {
		display: inline-flex;
		align-items: center;
		gap: 0.2rem;
		font-size: 0.7rem;
		color: var(--site-muted);
	}
	.icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-radius: 0.375rem;
		padding: 0.3rem;
		color: var(--site-muted);
	}
	.icon:hover {
		background: color-mix(in srgb, var(--site-muted) 15%, transparent);
		color: var(--site-text);
	}
	.segmented {
		display: inline-flex;
		flex-wrap: wrap;
		border: 1px solid var(--site-border);
		border-radius: 0.5rem;
		overflow: hidden;
	}
	.segmented button {
		font-size: 0.8rem;
		padding: 0.35rem 0.7rem;
		color: var(--site-muted);
	}
	.segmented button[aria-pressed='true'] {
		background: color-mix(in srgb, var(--site-text) 12%, transparent);
		color: var(--site-text);
		font-weight: 500;
	}
	.bar {
		height: 4px;
		border-radius: 999px;
		background: color-mix(in srgb, var(--site-muted) 20%, transparent);
		overflow: hidden;
	}
	.bar span {
		display: block;
		height: 100%;
		background: rgb(34 197 94);
		border-radius: inherit;
	}
	.goal {
		display: block;
		transition: border-color 0.15s;
	}
	.goal:hover {
		border-color: color-mix(in srgb, var(--site-text) 35%, var(--site-border));
	}
	.goal.muted {
		opacity: 0.6;
	}
</style>