feat: move a task between Today and Tomorrow

The app is built around two days and had no way to move anything between
them. "I won't get to this today" is the most obvious thing someone wants
from a two-day list, and the only route was deleting the task and typing
it again somewhere else.

Each row gets an arrow next to delete. On Today it sends the task forward,
on Tomorrow it points back, so one control covers both directions and the
label says which one you are getting. Alt+Right and Alt+Left do the same
from the keyboard, and each only acts in the direction that makes sense
from the day you are on.

The move itself is in src/lib/defer.js with tests, since it touches two
date keys at once and the failure modes are worth pinning down: a missing
id, the same day twice, an empty destination, and a task that somehow
already exists on the other side.
This commit is contained in:
Aculix Technologies
2026-08-16 03:25:35 +05:30
parent bfffb4ac02
commit 38af47aeb6
5 changed files with 166 additions and 7 deletions
+11 -6
View File
@@ -381,7 +381,7 @@ html.dark .task-item.dragging {
color: var(--completed-text);
}
.delete-btn {
.row-btn {
width: 32px;
height: 32px;
border: none;
@@ -398,11 +398,16 @@ html.dark .task-item.dragging {
flex-shrink: 0;
}
.defer-btn:hover {
background-color: var(--hover);
color: var(--accent);
}
/* focus-within matters as much as hover here: the button is opacity 0 by
default, so a keyboard user tabbing to it previously saw nothing at all:
the focus outline was drawn on an invisible element. */
.task-item:hover .delete-btn,
.task-item:focus-within .delete-btn {
.task-item:hover .row-btn,
.task-item:focus-within .row-btn {
opacity: 1;
}
@@ -412,7 +417,7 @@ html.dark .task-item.dragging {
transform: scale(1.1);
}
.delete-btn svg {
.row-btn svg {
width: 16px;
height: 16px;
}
@@ -558,14 +563,14 @@ html.dark .data-status.error {
* just easier to hit. Kept behind the media query so a mouse still gets small,
* precise targets and the full row stays available to drag. */
@media (hover: none) {
.delete-btn {
.row-btn {
opacity: 1;
}
}
@media (pointer: coarse) {
.checkbox::after,
.delete-btn::after {
.row-btn::after {
content: '';
position: absolute;
top: 50%;