Task UX: forward-only advance button, auto edit mode, reload on save

TaskViewerView:
- Add '→ In Progress' / '→ Done' advance button in toolbar (forward-only,
  hidden when status is already done)
- Styled with primary indigo gradient to distinguish from secondary actions

TaskEditorView:
- showPreview now defaults false; set to true after load only when body
  has content — empty tasks open directly in Write mode
- Save on an existing task now calls window.location.reload() so the
  preview/edit mode re-evaluates from the freshly persisted body

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-10 18:50:36 -04:00
parent bb1f29c8e2
commit 404aba1461
2 changed files with 45 additions and 1 deletions
+41
View File
@@ -111,6 +111,26 @@ function cycleStatus() {
);
}
const forwardStatus: Record<TaskStatus, TaskStatus | null> = {
todo: "in_progress",
in_progress: "done",
done: null,
};
const advanceLabel = computed(() => {
const s = store.currentTask?.status as TaskStatus | undefined;
if (!s) return null;
const next = forwardStatus[s];
if (!next) return null;
return next === "in_progress" ? "→ In Progress" : "→ Done";
});
function advanceStatus() {
if (!store.currentTask) return;
const next = forwardStatus[store.currentTask.status as TaskStatus];
if (next) store.patchStatus(store.currentTask.id, next);
}
function isOverdue(): boolean {
if (!store.currentTask?.due_date || store.currentTask.status === "done")
return false;
@@ -192,6 +212,13 @@ const subTaskProgress = computed(() => {
>
Edit
</router-link>
<button
v-if="advanceLabel"
class="btn-advance"
@click="advanceStatus"
>
{{ advanceLabel }}
</button>
<button
class="btn-convert"
@click="convertToNote"
@@ -361,6 +388,20 @@ const subTaskProgress = computed(() => {
border-color: var(--color-primary);
color: var(--color-primary);
}
.btn-advance {
padding: 0.45rem 1rem;
background: linear-gradient(135deg, #6366f1, #4f46e5);
color: #fff;
border: none;
border-radius: var(--radius-sm);
cursor: pointer;
font-size: 0.9rem;
font-weight: 600;
transition: opacity 0.15s;
}
.btn-advance:hover {
opacity: 0.88;
}
.btn-convert {
margin-left: auto;
padding: 0.3rem 0.75rem;