tuiboard 0.7.2 → 0.8.0

package/src/ui/Modal.tsx

@@ -20,13 +20,14 @@ import {
   parseTimeBlockShortcut,
 } from "~/store/parsers";
 import { ATTR, T } from "~/ui/glyphs";
-import { TIMELINE_WIDTH } from "~/views/Dashboard";
+import { AGENDA_WIDTH } from "~/ui/layout";
+import { formatHm } from "~/store/timeline";
 import type { TuiStore } from "~/store/index";
 import type { PriorityLevel, TimeBlock } from "~/types";
 
 /** The modal panel matches the Agenda's width so it can drop into the Agenda's
- *  slot (which the Dashboard vacates while a modal is open) with no reflow. */
-const MODAL_WIDTH = TIMELINE_WIDTH;
+ *  slot (the Dashboard renders it there while a modal is open) with no reflow. */
+const MODAL_WIDTH = AGENDA_WIDTH;
 
 export function ModalLayer(props: { store: TuiStore }) {
   const modal = createMemo(() => props.store.state.ui.modal);
@@ -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} />;
   }
@@ -69,16 +73,14 @@ function DialogShell(props: DialogShellProps) {
   return (
     <box
       style={{
-        // The modal panel: same width + marginLeft as the Agenda so it occupies
-        // the Agenda's slot (the Dashboard hides the Agenda while a modal is
-        // open) with no reflow. The title rides in the top border, exactly like
-        // the board columns and the other zones.
+        // Byte-identical layout to the Agenda panel (TimelineView): same width,
+        // marginLeft, flexGrow, border and padding, so it occupies the Agenda's
+        // slot at the exact same size and the dashboard doesn't shift when a
+        // modal opens. The title rides in the top border like the columns/zones.
         flexDirection: "column",
         width: MODAL_WIDTH,
         minWidth: MODAL_WIDTH,
         flexGrow: 0,
-        flexShrink: 0,
-        alignSelf: "stretch",
         marginLeft: 1,
         backgroundColor: T.panelBgActive,
         border: true,
@@ -86,8 +88,6 @@ function DialogShell(props: DialogShellProps) {
         borderColor: T.borderActive,
         paddingLeft: 1,
         paddingRight: 1,
-        paddingTop: 1,
-        paddingBottom: 1,
       }}
       title={`┤ ${props.title} ├`}
       titleAlignment="left"
@@ -271,6 +271,191 @@ function TimeBlockModal(props: { store: TuiStore; modal: Extract<NonNullable<Tui
   );
 }
 
+// ─── New calendar event ──────────────────────────────────────────────────────
+
+/**
+ * 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).
+ * 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 trimmed = text.trim();
+    let title = trimmed;
+    let startMin = p.startMin;
+    let endMin = p.endMin;
+    // Peel a trailing time token: "Standup 9:00-9:30" / "Lunch 12-13".
+    const m = trimmed.match(/\s(\S+)$/);
+    const tok = m?.[1];
+    if (m && m.index !== undefined && tok) {
+      const tb = parseTimeBlockShortcut(tok);
+      if (tb && tb.endMin > tb.startMin) {
+        title = trimmed.slice(0, m.index).trim();
+        startMin = tb.startMin;
+        endMin = tb.endMin;
+      }
+    }
+    if (!title) {
+      setError("Title required");
+      return;
+    }
+    void props.store.advanceEventToStep2(title, startMin, endMin);
+  }
+
+  return (
+    <Show when={picker()}>
+      <Show
+        when={picker()!.step === 2}
+        fallback={
+          <DialogShell
+            title="New event"
+            hint={`${formatHm(picker()!.startMin)}-${formatHm(picker()!.endMin)} · append HH:MM-HH:MM to change · Enter add · Esc cancel`}
+          >
+            <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 · ${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 trimmed = text.trim();
+    let title = trimmed;
+    let startMin = s.startMin;
+    let endMin = s.endMin;
+    // Peel a trailing time token: "Standup 9:00-9:30" / "Lunch 12-13".
+    const m = trimmed.match(/\s(\S+)$/);
+    const tok = m?.[1];
+    if (m && m.index !== undefined && tok) {
+      const tb = parseTimeBlockShortcut(tok);
+      if (tb && tb.endMin > tb.startMin) {
+        title = trimmed.slice(0, m.index).trim();
+        startMin = tb.startMin;
+        endMin = tb.endMin;
+      }
+    }
+    if (!title) {
+      setError("Title required");
+      return;
+    }
+    void props.store.confirmEventEdit(title, startMin, endMin);
+  }
+
+  return (
+    <Show when={sel()}>
+      <DialogShell
+        title="Edit event"
+        hint="append HH:MM-HH:MM to change the time · Enter save · Esc cancel"
+      >
+        <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" }> }) {
@@ -603,6 +788,8 @@ 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 }}>{"  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
@@ -189,11 +197,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 +269,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 +376,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>
@@ -376,6 +428,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 +476,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 +510,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 +552,7 @@ function TimelineRow(props: TimelineRowProps) {
             backgroundColor: laneBg(
               leftIsCursor(),
               leftIsArmed(),
+              leftIsSelCal(),
               leftIsBlock(),
               leftIsDone(),
             ),
@@ -518,6 +581,7 @@ function TimelineRow(props: TimelineRowProps) {
             backgroundColor: laneBg(
               leftIsCursor(),
               leftIsArmed(),
+              leftIsSelCal(),
               leftIsBlock(),
               leftIsDone(),
             ),
@@ -540,6 +604,7 @@ function TimelineRow(props: TimelineRowProps) {
             backgroundColor: laneBg(
               rightIsCursor(),
               rightIsArmed(),
+              rightIsSelCal(),
               rightIsBlock(),
               rightIsDone(),
             ),
@@ -726,10 +791,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;

package/src/ui/layout.ts

@@ -0,0 +1,12 @@
+/**
+ * Shared dashboard layout constants. Kept in a leaf module so both the
+ * Dashboard and the Modal can import them without an import cycle (the modal
+ * panel matches the Agenda's width so it can drop into the Agenda's slot).
+ */
+
+/** Width (in cells) of the right-hand Agenda panel — and of the modal panel,
+ *  which takes the Agenda's slot while a modal is open. */
+export const AGENDA_WIDTH = 50;
+
+/** Row height of the bottom Agents strip — enough for ~5 sessions. */
+export const AGENTS_HEIGHT = 7;

package/src/views/Dashboard.tsx

@@ -25,19 +25,13 @@ import { AgentsBar } from "~/ui/AgentsBar";
 import { BoardView } from "~/ui/BoardView";
 import { TimelineView } from "~/ui/TimelineView";
 import { PlannerPanel } from "~/ui/PlannerPanel";
+import { ModalLayer } from "~/ui/Modal";
+import { AGENDA_WIDTH, AGENTS_HEIGHT } from "~/ui/layout";
 import { AgentsOnly } from "~/views/AgentsOnly";
 import { BoardOnly } from "~/views/BoardOnly";
 import { TimelineOnly } from "~/views/TimelineOnly";
 import type { TuiStore } from "~/store/index";
 
-/**
- * Width (in cells) for the right-column Agenda panel on a wide terminal. The
- * modal panel matches this so it can drop into the Agenda's slot (see
- * ModalLayer) without reflowing the rest of the dashboard.
- */
-export const TIMELINE_WIDTH = 50;
-/** Row height for the bottom Agents strip — enough for ~5 sessions. */
-const AGENTS_HEIGHT = 7;
 
 export function Dashboard(props: { store: TuiStore }) {
   const ui = () => props.store.state.ui;
@@ -100,10 +94,19 @@ function FourZoneLayout(props: { store: TuiStore }) {
           <AgentsBar store={props.store} height={AGENTS_HEIGHT} />
         </Show>
       </box>
-      {/* Right column: Agenda (full height). Hidden while a modal is open so
-          the modal panel takes its slot with no reflow. */}
-      <Show when={visible().timeline && !ui().modal}>
-        <TimelineView store={props.store} width={TIMELINE_WIDTH} />
+      {/* Right column: the Agenda — or, while a modal is open, the modal panel
+          in the Agenda's exact slot (same parent, same width). Swapping them in
+          place keeps the whole layout and every height constant; nothing
+          shifts. The modal still appears here even if the Agenda is disabled. */}
+      <Show
+        when={ui().modal}
+        fallback={
+          <Show when={visible().timeline}>
+            <TimelineView store={props.store} width={AGENDA_WIDTH} />
+          </Show>
+        }
+      >
+        <ModalLayer store={props.store} />
       </Show>
       {/* ModalLayer rendered at App level so it can sit beside any view */}
     </box>