kw/verdande
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(tasks): undo a completion, and a place to find what was closed

Browse Source 
Reported from use: "I just closed a task by accident, and there is no undo and no
list of closed tasks." Both halves were true.

Completing is one click on a small circle beside a row you were only reading, and
it takes the row off the screen — so the mistake and the evidence of it leave
together. There was no name left to search for and nowhere to look: the project
page can show its own closed tasks, but only if you already know which project it
was in.

The toast covers the mistake you notice at once. It names the task, so you can see
which one you hit, and stands for twelve seconds rather than five — five is enough
to read "could not save" and not enough to notice, decide and reach the mouse. A
toast with an action also gets two targets: the message dismisses and the action
acts, which were one button before and would otherwise put "yes, put it back" and
"go away" in the same place.

`/faerdige` covers the one you notice tomorrow. A place rather than a toggle in
every view, because somebody hunting for a task they closed does not know which
view they closed it in. Newest first — a record of what is finished is read
backwards from now, not by a due date the task no longer has — and grouped by the
day, because "I dag" and "I går" is how anybody would describe it.

A recurring task is offered no undo. Completing it moves it to its next date rather
than closing it, so there is nothing to reverse, and an undo that quietly rolled
the date back would be a different act from the one it claims to be.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Kristian Wind
2026-08-18 11:18:01 +02:00
co-authored by Claude Opus 5
parent 0dbf7a40bf
commit a52ad9817f
8 changed files with 318 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/routes/+layout.svelte
+52 -3
View File
@@ -160,9 +160,25 @@
had succeeded. Nothing else earns an interruption. -->
<div class="toasts" role="status" aria-live="polite">
{#each app.toasts as toast (toast.id)}
<button class="toast" onclick={() => app.dismissToast(toast.id)}>
{toast.message}
</button>
<div class="toast">
<!-- The message dismisses, the action acts. They were one button before,
which is fine while the only thing a toast says is "that failed" —
and wrong the moment it offers to undo something, because then a
click meaning "yes, put it back" and a click meaning "go away" land
in the same place. -->
<button class="body" onclick={() => app.dismissToast(toast.id)}>
{toast.message}
</button>
{#if toast.action}
<button
class="action"
onclick={() => {
app.dismissToast(toast.id);
toast.onaction?.();
}}>{toast.action}</button
>
{/if}
</div>
{/each}
</div>
{/if}
@@ -304,6 +320,29 @@
z-index: 40;
}
.toast .body {
flex: 1;
min-width: 0;
text-align: left;
color: inherit;
font: inherit;
}
/* Set apart, because it is the one thing in a toast that does something rather
than says something. */
.toast .action {
flex: none;
padding: var(--s1) var(--s2);
margin: calc(var(--s1) * -1) calc(var(--s1) * -1) calc(var(--s1) * -1) 0;
border-radius: var(--radius-sm);
font-weight: 560;
color: var(--accent);
}
.toast .action:hover {
background: var(--surface);
}
.toasts {
position: fixed;
bottom: var(--s4);
@@ -317,8 +356,14 @@
}
.toast {
display: flex;
align-items: center;
gap: var(--s3);
background: var(--surface-raised);
border: 1px solid var(--line-strong);
/* The red edge said "something went wrong", which was true while that was
all a toast could say. An undo is not a failure — it is the app offering
to put something back — so the edge follows the message. */
border-left: 2px solid var(--danger);
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
@@ -329,6 +374,10 @@
text-align: left;
}
.toast:has(.action) {
border-left-color: var(--accent);
}
/* Below the tablet breakpoint the sidebar becomes a drawer. The layout is
mobile-first in behaviour even though the rules read desktop-first: the
drawer is the exception, and writing it as one keeps it in a single block. */