From fcbf09c8b7bcccc9e8d6fdff77b9f2ba8603fcc8 Mon Sep 17 00:00:00 2001
From: "tyler.fun" <did:plc:4gt3dbmp4pydjiemob4konzm>
Date: Mon, 5 Oct 2026 20:18:03 -0700
Subject: [PATCH] =?UTF-8?q?app:=20snooze=20a=20recurring=20occurrence=20?=
 =?UTF-8?q?=E2=80=94=20"Snooze=201=20day"=20(the=20occurrence's=20day=20+?=
 =?UTF-8?q?=201)=20or=20"Snooze=20to=20other=20day"=20(reveals=20a=20date?=
 =?UTF-8?q?=20field,=20min=20=3D=20day=20+=201)=20in=20the=20right-click?=
 =?UTF-8?q?=20menu=20and=20the=20details=20panel's=20new=20"Snooze=20this?=
 =?UTF-8?q?=20day"=20row,=20offered=20only=20on=20unfinished=20occurrences?=
 =?UTF-8?q?.=20store.snoozeOccurrence=20skips=20that=20day=20from=20the=20?=
 =?UTF-8?q?series=20and=20drops=20a=20detached=20one-off=20copy=20(title,?=
 =?UTF-8?q?=20color,=20notes,=20subtasks=20with=20fresh=20ids)=20onto=20th?=
 =?UTF-8?q?e=20target=20day,=20appended,=20as=20one=20undo=20step=20?=
 =?UTF-8?q?=E2=80=94=20no=20lexicon=20change,=20the=20occurrence=20record?=
 =?UTF-8?q?=20stays=20a=20pure=20done/skipped=20decision.=20New=20date.ts?=
 =?UTF-8?q?=20shiftKey=20steps=20by=20calendar=20date=20so=20DST=20can't?=
 =?UTF-8?q?=20double=20a=20day.=20The=20revealed=20date=20field=20focuses?=
 =?UTF-8?q?=20and=20calls=20showPicker()=20where=20allowed;=20the=20swap?=
 =?UTF-8?q?=20is=20height-pinned=20(menu=20row=2029px=20like=20an=20item,?=
 =?UTF-8?q?=20panel=20row=2038px)=20so=20neither=20the=20menu=20nor=20the?=
 =?UTF-8?q?=20card=20shifts.=20Verified=20in=20the=20preview:=20Mon?=
 =?UTF-8?q?=E2=86=92Fri=20via=20custom=20date=20and=20Tue=E2=86=92Wed=20vi?=
 =?UTF-8?q?a=201=20day=20land=20the=20copy=20and=20empty=20the=20source=20?=
 =?UTF-8?q?day,=20one=20undo=20restores=20both,=20menu=20stays=20188px=20a?=
 =?UTF-8?q?nd=20the=20card=20561.5px=20across=20the=20reveal?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/components/ContextMenu.svelte  | 86 +++++++++++++++++++++++-
 src/lib/components/DetailsPanel.svelte | 92 +++++++++++++++++++++++++-
 src/lib/date.ts                        |  7 ++
 src/lib/store/tasks.svelte.ts          | 26 ++++++++
 4 files changed, 207 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/ContextMenu.svelte b/src/lib/components/ContextMenu.svelte
index 79fda24..948e068 100644
--- a/src/lib/components/ContextMenu.svelte
+++ b/src/lib/components/ContextMenu.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-  import { Copy, Origami, Trash2 } from "@lucide/svelte";
+  import { CalendarClock, Copy, Forward, Origami, Trash2 } from "@lucide/svelte";
   import { store } from "../store/tasks.svelte";
   import { ui } from "../store/ui.svelte";
   import { haptics } from "../haptics.svelte";
   import { taskToMarkdown } from "../markdown";
-  import { todayKey } from "../date";
+  import { shiftKey, todayKey } from "../date";
   import { settings } from "../store/settings.svelte";
 
   let cell = $derived(ui.contextCell);
@@ -13,6 +13,18 @@
   // task already on today has nowhere shorter to move.
   let canMoveToToday = $derived(!!cell && !cell.virtual && cell.day !== todayKey());
 
+  // An unfinished recurring occurrence can be snoozed off its day: skipped from
+  // the series and copied, as a one-off task, onto a later day (see
+  // store.snoozeOccurrence). A done one has nothing left to put off.
+  let canSnooze = $derived(!!cell && cell.virtual && !cell.done && !!cell.day);
+  let snoozePicking = $state(false);
+  let snoozeTo = $state("");
+  $effect(() => {
+    void cell;
+    snoozePicking = false;
+    snoozeTo = "";
+  });
+
   // ── group actions (marquee selection) ───────────────────────────────────────
   let open = $derived((!!cell && !!task) || (ui.groupContext && !!ui.contextAnchor));
 
@@ -110,6 +122,20 @@
     close();
   }
 
+  function snooze(to: string) {
+    if (cell?.day && to) { store.snoozeOccurrence(cell.task.id, cell.day, to); haptics.tap(); }
+    close();
+  }
+  function pickSnooze() {
+    snoozePicking = true;
+  }
+  // Focus the revealed field and, where the browser allows it, open its
+  // calendar straight away.
+  function revealPicker(node: HTMLInputElement) {
+    node.focus({ preventScroll: true });
+    try { node.showPicker(); } catch { /* unsupported / not user-activated */ }
+  }
+
   // ── group actions ────────────────────────────────────────────────────────
   function copyAll() {
     const tasks = store.tasksForCells(ui.selection);
@@ -228,6 +254,29 @@
       </button>
     {/if}
 
+    {#if canSnooze && cell?.day}
+      <div class="sep"></div>
+      <button class="item" role="menuitem" onclick={() => snooze(shiftKey(cell.day!, 1))}>
+        <Forward size={15} aria-hidden="true" /><span>Snooze 1 day</span>
+      </button>
+      {#if snoozePicking}
+        <form class="snooze-pick" onsubmit={(e) => { e.preventDefault(); snooze(snoozeTo); }}>
+          <input
+            type="date"
+            aria-label="Snooze until"
+            min={shiftKey(cell.day, 1)}
+            bind:value={snoozeTo}
+            use:revealPicker
+          />
+          <button type="submit" class="go" disabled={!snoozeTo}>Snooze</button>
+        </form>
+      {:else}
+        <button class="item" role="menuitem" onclick={pickSnooze}>
+          <CalendarClock size={15} aria-hidden="true" /><span>Snooze to other day</span>
+        </button>
+      {/if}
+    {/if}
+
     <div class="sep"></div>
 
     <button class="item danger" role="menuitem" onclick={del}>
@@ -295,6 +344,39 @@
     opacity: 0.7;
   }
 
+  /* custom snooze date: a date field and its confirm, in one menu row —
+     pinned to a menu item's 29px height so swapping "Snooze to other day"
+     for it doesn't grow the menu */
+  .snooze-pick {
+    display: flex;
+    align-items: stretch;
+    gap: 4px;
+    height: 29px;
+    box-sizing: border-box;
+  }
+  .snooze-pick > * { box-sizing: border-box; height: 100%; }
+  .snooze-pick input {
+    flex: 1 1 auto;
+    min-width: 0;
+    padding: 0 6px;
+    border: 1px solid var(--line-strong);
+    border-radius: var(--radius-sm);
+    background: var(--surface-alt);
+    color: var(--text);
+    font: inherit;
+    font-size: var(--fs-body);
+  }
+  .snooze-pick .go {
+    flex: none;
+    padding: 0 10px;
+    border-radius: var(--radius-sm);
+    background: var(--text);
+    color: var(--surface);
+    font-size: var(--fs-body);
+    cursor: var(--cur-pointer);
+  }
+  .snooze-pick .go:disabled { opacity: 0.4; cursor: default; }
+
   /* color picker — a top-level row of swatches, no label */
   .swatches {
     display: flex;
diff --git a/src/lib/components/DetailsPanel.svelte b/src/lib/components/DetailsPanel.svelte
index 905dd0b..5da50f8 100644
--- a/src/lib/components/DetailsPanel.svelte
+++ b/src/lib/components/DetailsPanel.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-  import { X, SquarePen, Trash2, Plus, ChevronDown, CircleStop } from "@lucide/svelte";
+  import { X, SquarePen, Trash2, Plus, ChevronDown, CircleStop, Forward, CalendarClock } from "@lucide/svelte";
   import { store } from "../store/tasks.svelte";
   import { ui } from "../store/ui.svelte";
   import { settings } from "../store/settings.svelte";
   import { haptics } from "../haptics.svelte";
   import { type Recurrence, type Subtask } from "../types";
-  import { longDay, todayKey } from "../date";
+  import { longDay, shiftKey, todayKey } from "../date";
   import { describeRecurrence, defaultRecurrence } from "../recur";
   import { DRAG_HOLD_MS } from "../config";
   import RecurrencePicker from "./RecurrencePicker.svelte";
@@ -233,6 +233,39 @@
     haptics.tap();
   }
 
+  // Snooze: opened from one unfinished day of a series, put just that day off —
+  // skipped from the series and copied as a one-off onto a later day (see
+  // store.snoozeOccurrence). Terminal like Move to today: the panel closes,
+  // since the occurrence it was showing is gone from its day.
+  let snoozeDay = $derived(
+    task?.recurrence && ui.detailsDay && !store.occurrenceDone(task.id, ui.detailsDay)
+      ? ui.detailsDay
+      : null,
+  );
+  let snoozeTo = $state("");
+  // "Other day" swaps itself for the date field (same height, so nothing
+  // below it moves); reset whenever the panel moves to another occurrence.
+  let snoozePicking = $state(false);
+  $effect(() => { void snoozeDay; snoozeTo = ""; snoozePicking = false; });
+  function pickSnooze() {
+    snoozePicking = true;
+  }
+  // Focus the revealed field and, where the browser allows it, open its
+  // calendar straight away — one tap from "Other day" to choosing a date.
+  function revealPicker(node: HTMLInputElement) {
+    node.focus({ preventScroll: true });
+    try { node.showPicker(); } catch { /* unsupported / not user-activated */ }
+  }
+  function snooze(to: string) {
+    if (!task || !snoozeDay || !to) return;
+    commitTitle();
+    commitNotes();
+    store.snoozeOccurrence(task.id, snoozeDay, to);
+    haptics.tap();
+    ui.closeDetails();
+    lastId = null;
+  }
+
   function addSub() {
     if (task && newSub.trim()) {
       store.addSubtask(task.id, newSub, ui.detailsDay);
@@ -595,6 +628,34 @@
       {/if}
     </div>
 
+    {#if snoozeDay}
+      <div class="field">
+        <span class="lbl">Snooze this day</span>
+        <form class="snooze-line" onsubmit={(e) => { e.preventDefault(); snooze(snoozeTo); }}>
+          <button type="button" class="repeat-row snooze-day" onclick={() => snooze(shiftKey(snoozeDay!, 1))}>
+            <Forward size={16} aria-hidden="true" />
+            <span>1 day</span>
+          </button>
+          {#if snoozePicking}
+            <input
+              class="snooze-date"
+              type="date"
+              aria-label="Snooze until"
+              min={shiftKey(snoozeDay, 1)}
+              bind:value={snoozeTo}
+              use:revealPicker
+            />
+            <button type="submit" class="snooze-go" disabled={!snoozeTo}>Snooze</button>
+          {:else}
+            <button type="button" class="repeat-row snooze-day" onclick={pickSnooze}>
+              <CalendarClock size={16} aria-hidden="true" />
+              <span>Other day</span>
+            </button>
+          {/if}
+        </form>
+      </div>
+    {/if}
+
     <!-- one footer row: End repeating (when offered) left, Delete right —
          margin-left:auto on the delete keeps it right-aligned either way -->
     <div class="footer">
@@ -933,6 +994,33 @@
   @media (hover: hover) {
     .repeat-clear:hover { background: var(--surface-alt); }
   }
+  /* snooze: a "1 day" quick button, a date field for anything later, and
+     the date's confirm once one is picked */
+  /* every control in the row shares one fixed height, so swapping "Other
+     day" for the date field + confirm never shifts the card's layout */
+  .snooze-line { display: flex; align-items: center; gap: 6px; }
+  .snooze-line > * { box-sizing: border-box; height: 38px; }
+  .snooze-day { flex: none; justify-content: flex-start; }
+  .snooze-day :global(svg) { color: var(--text-dim); }
+  .snooze-date {
+    flex: 1 1 auto; min-width: 0;
+    font: inherit; color: var(--text);
+    background: var(--bg);
+    border: 1px solid var(--line-strong);
+    border-radius: var(--radius-sm);
+    padding: 0 10px;
+  }
+  .snooze-go {
+    flex: none;
+    padding: 0 12px;
+    border-radius: var(--radius-sm);
+    background: var(--text);
+    color: var(--surface);
+    font-size: var(--fs-small);
+    font-weight: 600;
+  }
+  .snooze-go:disabled { opacity: 0.4; }
+
   /* quiet footer action — same voice as .delete, minus the danger color
      (nothing is lost by ending a series) */
   .repeat-end {
diff --git a/src/lib/date.ts b/src/lib/date.ts
index 1306bff..9be9de8 100644
--- a/src/lib/date.ts
+++ b/src/lib/date.ts
@@ -31,6 +31,13 @@ export function addDays(d: Date, n: number): Date {
   return new Date(d.getTime() + n * MS_DAY);
 }
 
+/** The day key `n` calendar days after `key` — by calendar date, not ms, so a
+    DST shift can't land it on the same day twice. */
+export function shiftKey(key: string, n: number): string {
+  const d = parseKey(key);
+  return dayKey(new Date(d.getFullYear(), d.getMonth(), d.getDate() + n));
+}
+
 /** Whole days from `aKey` to `bKey` (b − a). Negative if b is before a. */
 export function diffDays(aKey: string, bKey: string): number {
   return Math.round((parseKey(bKey).getTime() - parseKey(aKey).getTime()) / MS_DAY);
diff --git a/src/lib/store/tasks.svelte.ts b/src/lib/store/tasks.svelte.ts
index aded436..6225809 100644
--- a/src/lib/store/tasks.svelte.ts
+++ b/src/lib/store/tasks.svelte.ts
@@ -362,6 +362,11 @@ class TaskStore {
     return this.occIndex.live.get(occKey(series, date));
   }
 
+  /** Is one day of a series checked done? (false while it's a pure projection) */
+  occurrenceDone(series: string, date: string): boolean {
+    return !!this.liveOcc(series, date)?.completed;
+  }
+
   /** Visible cells for a day (real tasks + recurring projections), ordered.
       The search and color filters stay here rather than in the index: they
       change as the user types, and re-bucketing the whole store per keystroke
@@ -682,6 +687,27 @@ class TaskStore {
     });
   }
 
+  /** Snooze one occurrence of a recurring series to `to`: skip it from the
+      series on `date` and drop a one-off copy (title, color, notes, subtasks)
+      onto `to`, appended. The copy is detached — later edits to the series
+      don't follow it — which keeps the occurrence record a pure done/skipped
+      decision (no per-occurrence day to sync). One undoable step. Returns the
+      copy, or null if the series is gone or `to` is the occurrence's own day. */
+  async snoozeOccurrence(series: string, date: string, to: string): Promise<Task | null> {
+    const t = this.byId(series);
+    if (!t?.recurrence || to === date) return null;
+    return this.record(async () => {
+      await this.setOcc(series, date, { skipped: true });
+      const copy = await this.add(t.text, to, t.color);
+      await this.patch(copy.id, {
+        notes: t.notes,
+        subtasks: t.subtasks.map((s) => ({ ...s, id: tid() })),
+      });
+      slog("local.snooze", { series, date, to, id: copy.id });
+      return copy;
+    });
+  }
+
   /** Delete an entire task/series by record id (used from the details panel).
       For a recurring series this also drops every materialized occurrence. */
   async removeSeries(id: string) {
-- 
2.51.2