tuiboard 0.7.3 → 0.8.1

package/src/ui/Modal.tsx

@@ -21,6 +21,7 @@ import {
 } from "~/store/parsers";
 import { ATTR, T } from "~/ui/glyphs";
 import { AGENDA_WIDTH } from "~/ui/layout";
+import { formatHm } from "~/store/timeline";
 import type { TuiStore } from "~/store/index";
 import type { PriorityLevel, TimeBlock } from "~/types";
 
@@ -50,6 +51,9 @@ function ModalRouter(props: { store: TuiStore; modal: NonNullable<TuiStore["stat
     case "confirm-delete": return <ConfirmDeleteModal store={props.store} modal={m} />;
     case "detail":   return <DetailModal store={props.store} modal={m} />;
     case "agent-detail": return <AgentDetailModal store={props.store} modal={m} />;
+    case "event":    return <EventModal store={props.store} />;
+    case "event-edit": return <EventEditModal store={props.store} />;
+    case "confirm-delete-event": return <ConfirmDeleteEventModal store={props.store} />;
     case "search":   return <SearchModal store={props.store} />;
     case "help":     return <HelpModal store={props.store} />;
   }
@@ -267,6 +271,230 @@ function TimeBlockModal(props: { store: TuiStore; modal: Extract<NonNullable<Tui
   );
 }
 
+// ─── New calendar event ──────────────────────────────────────────────────────
+
+/**
+ * Parse an event input line into title + time + (optional) date. Tokens are
+ * peeled off the END, time first then date, so the natural order is
+ * "Title [date] [time]":
+ *   "Standup 9:00-9:30"          → title, 09:00-09:30, (default date)
+ *   "Lunch tomorrow 12-13"       → title, 12:00-13:00, tomorrow
+ *   "Review 2026-06-10 15-16"    → title, 15:00-16:00, that date
+ * A trailing token is only consumed if it parses AND something is left for the
+ * title, so a one-word title like "tomorrow" stays a title. `dateIso` is set
+ * only when an explicit date token was found (caller falls back to its default).
+ */
+function peelEventInput(
+  text: string,
+  defStart: number,
+  defEnd: number,
+): { title: string; startMin: number; endMin: number; dateIso?: string; allDay: boolean } {
+  let title = text.trim();
+  let startMin = defStart;
+  let endMin = defEnd;
+  let dateIso: string | undefined;
+
+  // 0) an "allday" / "all-day" keyword anywhere → date-only event (time ignored)
+  let allDay = false;
+  if (/(^|\s)(all-?day)(\s|$)/i.test(title)) {
+    allDay = true;
+    title = title.replace(/(^|\s)all-?day(\s|$)/i, " ").replace(/\s+/g, " ").trim();
+  }
+
+  // 1) trailing time token
+  const mt = title.match(/\s(\S+)$/);
+  const ttok = mt?.[1];
+  if (mt && mt.index !== undefined && ttok) {
+    const tb = parseTimeBlockShortcut(ttok);
+    if (tb && tb.endMin > tb.startMin) {
+      const rest = title.slice(0, mt.index).trim();
+      if (rest) {
+        title = rest;
+        startMin = tb.startMin;
+        endMin = tb.endMin;
+      }
+    }
+  }
+  // 2) trailing date token (on what's left)
+  const md = title.match(/\s(\S+)$/);
+  const dtok = md?.[1];
+  if (md && md.index !== undefined && dtok) {
+    const d = parseDateShortcut(dtok);
+    if (typeof d === "string") {
+      const rest = title.slice(0, md.index).trim();
+      if (rest) {
+        title = rest;
+        dateIso = d;
+      }
+    }
+  }
+  return { title, startMin, endMin, dateIso, allDay };
+}
+
+/** Short "Mon 10 Jun" style label for an ISO date, for modal titles. */
+function shortDate(iso: string): string {
+  const [y, m, d] = iso.split("-").map((n) => parseInt(n, 10));
+  if (!y || !m || !d) return iso;
+  const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+  return `${d} ${months[m - 1]}`;
+}
+
+/**
+ * Two-step "new Google Calendar event" modal. Step 1: a title+time `<input>`
+ * (time prefilled from the clicked slot; append `HH:MM-HH:MM` to override, and
+ * a date token like `tomorrow` / `2026-06-10` to change the day).
+ * Step 2: a non-input calendar list navigated via handleKey (no input focused),
+ * preselected to the configured default. See `openEventModal` / `confirmEventPicker`.
+ */
+function EventModal(props: { store: TuiStore }) {
+  const picker = () => props.store.state.ui.eventPicker;
+  const defaultId = () => props.store.config.calendars?.google?.defaultCalendar;
+  const [value, setValue] = createSignal("");
+  const [error, setError] = createSignal<string | undefined>();
+
+  function submit(text: string) {
+    const p = picker();
+    if (!p) return;
+    const { title, startMin, endMin, dateIso, allDay } = peelEventInput(text, p.startMin, p.endMin);
+    if (!title) {
+      setError("Title required");
+      return;
+    }
+    void props.store.advanceEventToStep2(title, startMin, endMin, dateIso, allDay);
+  }
+
+  return (
+    <Show when={picker()}>
+      <Show
+        when={picker()!.step === 2}
+        fallback={
+          <DialogShell
+            title="New event"
+            hint={`${formatHm(picker()!.startMin)}-${formatHm(picker()!.endMin)} · add a time, a date (tm · +3 · 2026-06-10), or "allday" · Enter add · Esc`}
+          >
+            <input
+              focused
+              value={value()}
+              onInput={(v: string) => {
+                setValue(v);
+                setError(undefined);
+              }}
+              onSubmit={((v: string) => submit(v)) as any}
+            />
+            <Show when={error()}>
+              <text>
+                <span style={{ fg: T.bannerError }}>{error()!}</span>
+              </text>
+            </Show>
+          </DialogShell>
+        }
+      >
+        <DialogShell
+          title={`Calendar · ${shortDate(picker()!.dateIso)} ${picker()!.allDay ? "all day" : `${formatHm(picker()!.startMin)}-${formatHm(picker()!.endMin)}`}`}
+          hint="j/k choose · Enter create · Esc cancel"
+        >
+          <For each={picker()!.cals}>
+            {(c, i) => {
+              const isSel = () => i() === picker()!.sel;
+              const isDefault = defaultId() ? c.id === defaultId() : c.primary;
+              return (
+                <box style={{ backgroundColor: isSel() ? T.cardBgCursor : undefined }}>
+                  <text wrapMode="none" truncate>
+                    <span style={{ fg: isSel() ? T.accent : T.textDim }}>
+                      {isSel() ? "▶ " : "  "}
+                    </span>
+                    <span style={{ fg: c.color }}>{"● "}</span>
+                    <span style={{ fg: T.text }}>{c.summary}</span>
+                    <Show when={isDefault}>
+                      <span style={{ fg: T.textDim }}>{"  (default)"}</span>
+                    </Show>
+                  </text>
+                </box>
+              );
+            }}
+          </For>
+        </DialogShell>
+      </Show>
+    </Show>
+  );
+}
+
+// ─── Edit existing calendar event ────────────────────────────────────────────
+
+/**
+ * Edit the selected Google Calendar event's title + time (same calendar). A
+ * single `<input>` prefilled with "Title HH:MM-HH:MM"; Enter saves via PATCH.
+ * Reads `ui.selectedCalEvent` (set by clicking an editable event in the Agenda).
+ */
+function EventEditModal(props: { store: TuiStore }) {
+  const sel = () => props.store.state.ui.selectedCalEvent;
+  const s0 = sel();
+  const [value, setValue] = createSignal(
+    s0 ? `${s0.title} ${formatHm(s0.startMin)}-${formatHm(s0.endMin)}` : "",
+  );
+  const [error, setError] = createSignal<string | undefined>();
+
+  function submit(text: string) {
+    const s = sel();
+    if (!s) {
+      props.store.closeModal();
+      return;
+    }
+    const { title, startMin, endMin, dateIso } = peelEventInput(text, s.startMin, s.endMin);
+    if (!title) {
+      setError("Title required");
+      return;
+    }
+    void props.store.confirmEventEdit(title, startMin, endMin, dateIso);
+  }
+
+  return (
+    <Show when={sel()}>
+      <DialogShell
+        title={`Edit event · ${shortDate(sel()!.dateIso)}`}
+        hint="change title, HH:MM-HH:MM, and/or a date (tm · +3 · lun · 2026-06-10) · Enter save · Esc"
+      >
+        <input
+          focused
+          value={value()}
+          onInput={(v: string) => {
+            setValue(v);
+            setError(undefined);
+          }}
+          onSubmit={((v: string) => submit(v)) as any}
+        />
+        <Show when={error()}>
+          <text>
+            <span style={{ fg: T.bannerError }}>{error()!}</span>
+          </text>
+        </Show>
+      </DialogShell>
+    </Show>
+  );
+}
+
+// ─── Confirm delete calendar event ───────────────────────────────────────────
+
+function ConfirmDeleteEventModal(props: { store: TuiStore }) {
+  const sel = () => props.store.state.ui.selectedCalEvent;
+  return (
+    <DialogShell title="Delete event?" hint="⏎/y confirm · Esc/n cancel">
+      <text wrapMode="none" truncate>
+        <span style={{ fg: sel()?.color ?? T.text }}>{"📅 "}</span>
+        <span style={{ fg: T.text }}>{sel()?.title ?? "(missing)"}</span>
+        <Show when={sel()}>
+          <span style={{ fg: T.textDim }}>
+            {`  ${formatHm(sel()!.startMin)}-${formatHm(sel()!.endMin)}`}
+          </span>
+        </Show>
+      </text>
+      <text>
+        <span style={{ fg: T.textDim }}>Deletes from Google Calendar — cannot be undone here.</span>
+      </text>
+    </DialogShell>
+  );
+}
+
 // ─── Assign ──────────────────────────────────────────────────────────────────
 
 function AssignModal(props: { store: TuiStore; modal: Extract<NonNullable<TuiStore["state"]["ui"]["modal"]>, { kind: "assign" }> }) {
@@ -599,6 +827,9 @@ function HelpModal(props: { store: TuiStore }) {
         <span style={{ fg: T.text }}>{"  [ / ]              Previous / next day (tasks + calendar events)\n"}</span>
         <span style={{ fg: T.text }}>{"  \\                  Jump back to today\n"}</span>
         <span style={{ fg: T.textDim }}>{"\nAgenda (timeline) scheduling\n"}</span>
+        <span style={{ fg: T.text }}>{"  n / click slot     New Google Calendar event (needs: calendar-setup google --write)\n"}</span>
+        <span style={{ fg: T.text }}>{"                     append date+time: Lunch tomorrow 12-13 · Review 2026-06-10 15-16 · Holiday 25-12 allday\n"}</span>
+        <span style={{ fg: T.text }}>{"  click an event     Select an editable Google event — then e edit · d delete · Esc\n"}</span>
         <span style={{ fg: T.text }}>{"  c (any zone)       Toggle ARM MODE — then click a task, click a slot, repeat\n"}</span>
         <span style={{ fg: T.text }}>{"  click empty row    Place the armed task here (30-min block, or move if it has one)\n"}</span>
         <span style={{ fg: T.text }}>{"  click band         Arm an existing block (or place the armed task at its start)\n"}</span>

package/src/ui/TimelineView.tsx

@@ -36,6 +36,7 @@ import {
   onMount,
 } from "solid-js";
 
+import { googleTokenCanWrite } from "~/store/calendar";
 import type { TaskRef } from "~/store/index";
 import {
   DAY_START_HOUR,
@@ -92,6 +93,13 @@ export function TimelineView(props: TimelineViewProps) {
   const viewedDate = () => props.store.agendaDate();
   const isToday = () => props.store.state.ui.agendaOffset === 0;
 
+  // The Google event currently selected (clicked) for edit/delete, if any.
+  const selectedCal = () => props.store.state.ui.selectedCalEvent;
+  const selectedCalKey = () => {
+    const s = selectedCal();
+    return s ? `${s.calendarId}:${s.eventId}` : undefined;
+  };
+
   // Task entries drive the cursor + arm/keyboard interactions.
   const entries = createMemo(() => {
     props.store.state.rev; // recompute on any board mutation
@@ -107,9 +115,13 @@ export function TimelineView(props: TimelineViewProps) {
   });
 
   // Read-only calendar events (Google / Microsoft), merged into the grid for
-  // display only — not cursor-navigable, not editable.
+  // display only — not cursor-navigable. Timed events go on the 24h grid;
+  // all-day events are pulled out into a chip strip at the top (no time slot).
   const calEntries = createMemo(() =>
-    buildCalendarEntries(props.store.calendar.events()),
+    buildCalendarEntries(props.store.calendar.events().filter((e) => !e.allDay)),
+  );
+  const allDayEvents = createMemo(() =>
+    props.store.calendar.events().filter((e) => e.allDay),
   );
 
   // Recompute the row map every minute so the "now" marker stays current.
@@ -189,11 +201,34 @@ export function TimelineView(props: TimelineViewProps) {
   const onBlockClick = (entry: TimelineEntry, event: MouseEventLike) => {
     props.store.setActiveZone("timeline");
 
-    // Calendar events are read-only: they can't be armed or moved. A click on
-    // one while a task is armed just places the armed task at that slot;
-    // otherwise it's a no-op (beyond focusing the zone).
+    // Calendar events can't be armed or time-block-moved. While a task is armed,
+    // a click places that task at this slot (unchanged). Otherwise: an editable
+    // Google event gets SELECTED for edit/delete (toggles off on re-click); a
+    // read-only event just reports that it can't be changed.
     if (entry.kind !== "task") {
-      if (armedRef()) onEmptyRowClick(entry.startRow, event);
+      if (armedRef()) {
+        onEmptyRowClick(entry.startRow, event);
+        return;
+      }
+      if (entry.kind === "calendar") {
+        if (entry.editable && entry.calendarId && entry.eventId) {
+          const wasSelected = selectedCalKey() === `${entry.calendarId}:${entry.eventId}`;
+          props.store.selectCalEvent({
+            calendarId: entry.calendarId,
+            eventId: entry.eventId,
+            title: entry.title,
+            startMin: entry.startMin,
+            endMin: entry.endMin,
+            dateIso: viewedDate(),
+            color: entry.color,
+          });
+          if (!wasSelected) {
+            props.store.flashBanner("info", `Selected "${tailTruncate(entry.title, 28)}" · e edit · d delete · Esc`);
+          }
+        } else {
+          props.store.flashBanner("info", "Read-only event — not on a writable calendar");
+        }
+      }
       return;
     }
 
@@ -238,7 +273,17 @@ export function TimelineView(props: TimelineViewProps) {
   const onEmptyRowClick = (rowIndex: number, event: MouseEventLike) => {
     const armed = armedTask();
     const ref = armedRef();
-    if (!armed || !ref) return;
+    if (!armed || !ref) {
+      // Nothing armed: an empty-slot click creates a Google Calendar event at
+      // that time (only when Google write is connected — otherwise a no-op).
+      const g = props.store.config.calendars?.google;
+      if (g && googleTokenCanWrite(g.token)) {
+        const startMin = Math.max(0, DAY_START_HOUR * 60 + rowIndex * MINS_PER_ROW);
+        const endMin = Math.min(24 * 60 - 1, startMin + DEFAULT_BLOCK_MIN);
+        props.store.openEventModal(viewedDate(), startMin, endMin);
+      }
+      return;
+    }
     const targetMin = DAY_START_HOUR * 60 + rowIndex * MINS_PER_ROW;
 
     // Unscheduled task → create a fresh block at the clicked row.
@@ -335,10 +380,21 @@ export function TimelineView(props: TimelineViewProps) {
           </span>
         </text>
       </Show>
+      {/* A selected calendar event shows its own action hint. */}
+      <Show when={selectedCal()}>
+        <text wrapMode="none">
+          <span style={{ fg: T.warm, attributes: ATTR.bold }}>
+            {"📅 "}{tailTruncate(selectedCal()!.title, 28)}{" "}
+          </span>
+          <span style={{ fg: T.textDim }}>
+            {"  e edit · d delete · Esc deselect"}
+          </span>
+        </text>
+      </Show>
       {/* Day-navigation hint — always visible in the resting state (not while
-          arming) so the [ ] day-switch is discoverable. Off-today, the
-          "\ today" reset is highlighted to pull the eye back. */}
-      <Show when={!armMode() && !armedTask()}>
+          arming or with an event selected) so the [ ] day-switch is
+          discoverable. Off-today, the "\ today" reset is highlighted. */}
+      <Show when={!armMode() && !armedTask() && !selectedCal()}>
         <text wrapMode="none">
           <span style={{ fg: T.warm }}>{"◷ "}</span>
           <span style={{ fg: T.textDim }}>{"[ ] change day · "}</span>
@@ -353,9 +409,32 @@ export function TimelineView(props: TimelineViewProps) {
         </text>
       </Show>
 
-      {/* The 24h grid now owns the whole panel — no sticky section above
-          it. Tasks are armed for scheduling from the board / planner panel
-          via the `C` shortcut, then placed by clicking a slot here. */}
+      {/* All-day events ride in a chip strip above the 24h grid (like Google
+          Calendar's top band) — they have no time slot to sit in. Display only. */}
+      <Show when={allDayEvents().length > 0}>
+        <box style={{ flexDirection: "row", height: 1 }}>
+          <text wrapMode="none" style={{ flexShrink: 0 }}>
+            <span style={{ fg: T.textDim }}>{"▦ "}</span>
+          </text>
+          <For each={allDayEvents().slice(0, 8)}>
+            {(e) => (
+              <text wrapMode="none" truncate style={{ flexShrink: 1, marginRight: 1 }}>
+                <span style={{ fg: e.color }}>{"●"}</span>
+                <span style={{ fg: T.text }}>{" " + tailTruncate(e.title, 18)}</span>
+              </text>
+            )}
+          </For>
+          <Show when={allDayEvents().length > 8}>
+            <text wrapMode="none" style={{ flexShrink: 0 }}>
+              <span style={{ fg: T.textDim }}>{`+${allDayEvents().length - 8}`}</span>
+            </text>
+          </Show>
+        </box>
+      </Show>
+
+      {/* The 24h grid owns the rest of the panel. Tasks are armed for scheduling
+          from the board / planner panel via the `C` shortcut, then placed by
+          clicking a slot here. */}
       <scrollbox
         ref={(r: ScrollBoxLike) => (scrollBoxRef = r)}
         style={{
@@ -376,6 +455,7 @@ export function TimelineView(props: TimelineViewProps) {
                 rowIndex={i()}
                 cursorEntry={isActive() ? cursorEntry() : undefined}
                 armedEntry={armedEntry()}
+                selectedCalKey={selectedCalKey()}
                 innerWidth={props.width ? props.width - 4 : undefined}
                 onBlockClick={onBlockClick}
                 onEmptyRowClick={onEmptyRowClick}
@@ -423,6 +503,8 @@ interface TimelineRowProps {
   cursorEntry: TimelineEntry | undefined;
   /** When set, the armed entry — used to tint its rows warm. */
   armedEntry: TimelineEntry | undefined;
+  /** `${calendarId}:${eventId}` of the selected calendar event, if any. */
+  selectedCalKey: string | undefined;
   /** Panel content width (border+padding already removed). Undefined = fullscreen. */
   innerWidth?: number;
   onBlockClick: (entry: TimelineEntry, event: MouseEventLike) => void;
@@ -455,6 +537,13 @@ function TimelineRow(props: TimelineRowProps) {
   const rightIsArmed = () =>
     !!props.armedEntry && right().entry === props.armedEntry;
 
+  const isSelectedCal = (e: TimelineEntry | undefined) =>
+    !!props.selectedCalKey &&
+    e?.kind === "calendar" &&
+    `${e.calendarId}:${e.eventId}` === props.selectedCalKey;
+  const leftIsSelCal = () => isSelectedCal(left().entry);
+  const rightIsSelCal = () => isSelectedCal(right().entry);
+
   const entryDone = (e: TimelineEntry | undefined) =>
     e?.kind === "task" && e.task.done;
   const leftIsDone = () => entryDone(left().entry);
@@ -490,6 +579,7 @@ function TimelineRow(props: TimelineRowProps) {
             backgroundColor: laneBg(
               leftIsCursor(),
               leftIsArmed(),
+              leftIsSelCal(),
               leftIsBlock(),
               leftIsDone(),
             ),
@@ -518,6 +608,7 @@ function TimelineRow(props: TimelineRowProps) {
             backgroundColor: laneBg(
               leftIsCursor(),
               leftIsArmed(),
+              leftIsSelCal(),
               leftIsBlock(),
               leftIsDone(),
             ),
@@ -540,6 +631,7 @@ function TimelineRow(props: TimelineRowProps) {
             backgroundColor: laneBg(
               rightIsCursor(),
               rightIsArmed(),
+              rightIsSelCal(),
               rightIsBlock(),
               rightIsDone(),
             ),
@@ -726,10 +818,11 @@ function isBlockKind(k: RowMapEntry["kind"]): boolean {
 function laneBg(
   isCursor: boolean,
   isArmed: boolean,
+  isSelectedCal: boolean,
   isBlock: boolean,
   isDone: boolean,
 ): string | undefined {
-  if (isArmed) return T.warmDim;
+  if (isArmed || isSelectedCal) return T.warmDim;
   if (isCursor) return T.cardBgCursor;
   if (isBlock) return isDone ? T.cardBlockBgDone : T.cardBlockBg;
   return undefined;