trekoon 0.2.8 → 0.3.0

package/src/board/assets/runtime/delegation.js

@@ -0,0 +1,342 @@
+/**
+ * Event delegation system for the board runtime.
+ *
+ * Attaches a single listener per event type on the root element.
+ * Uses event.target.closest() to match data-attributes, so dynamically
+ * rendered content is handled automatically without rebinding.
+ *
+ * @param {HTMLElement} rootElement  Mount root for delegated listeners.
+ * @param {object}      actions     Callback map the delegation dispatches into.
+ * @returns {() => void} Teardown function that removes every listener.
+ */
+export function createDelegation(rootElement, actions) {
+  // ---------------------------------------------------------------------------
+  // Click delegation
+  // ---------------------------------------------------------------------------
+  function handleClick(event) {
+    const { target } = event;
+
+    // -- Destructive / mutation buttons (most specific first) -----------------
+
+    const deleteSubtaskEl = target.closest("[data-delete-subtask]");
+    if (deleteSubtaskEl) {
+      if (actions.isMutating()) return;
+      const subtaskId = deleteSubtaskEl.dataset.deleteSubtask;
+      if (subtaskId) actions.deleteSubtask(subtaskId, deleteSubtaskEl);
+      return;
+    }
+
+    const removeDependencyEl = target.closest("[data-remove-dependency-source]");
+    if (removeDependencyEl) {
+      if (actions.isMutating()) return;
+      const sourceId = removeDependencyEl.dataset.removeDependencySource;
+      const dependsOnId = removeDependencyEl.dataset.removeDependencyTarget;
+      actions.removeDependency(sourceId, dependsOnId, removeDependencyEl);
+      return;
+    }
+
+    // -- Disclosure openers ---------------------------------------------------
+
+    const openSubtaskEl = target.closest("[data-open-subtask]");
+    if (openSubtaskEl) {
+      actions.openSubtask(openSubtaskEl.dataset.openSubtask || null, openSubtaskEl);
+      return;
+    }
+
+    const copyEpicIdEl = target.closest("[data-copy-epic-id]");
+    if (copyEpicIdEl) {
+      actions.copyEpicId(copyEpicIdEl.dataset.copyEpicId || null);
+      return;
+    }
+
+    // -- Backdrop-style close handlers ----------------------------------------
+    // Only close when the click lands directly on the backdrop element itself,
+    // not on any child content rendered inside the overlay.
+
+    const closeSubtaskEl = target.closest("[data-close-subtask]");
+    if (closeSubtaskEl) {
+      if (
+        closeSubtaskEl.classList.contains("board-modal-backdrop") &&
+        target !== closeSubtaskEl
+      ) {
+        return;
+      }
+      actions.closeSubtask();
+      return;
+    }
+
+    const closeTaskEl = target.closest("[data-close-task]");
+    if (closeTaskEl) {
+      if (
+        closeTaskEl.classList.contains("board-task-modal-backdrop") &&
+        target !== closeTaskEl
+      ) {
+        return;
+      }
+      actions.closeTask();
+      return;
+    }
+
+    const closeConfirmEl = target.closest("[data-close-confirm]");
+    if (closeConfirmEl) {
+      if (
+        closeConfirmEl.classList.contains("board-confirm-backdrop") &&
+        target !== closeConfirmEl
+      ) {
+        return;
+      }
+      actions.cancelDelete();
+      return;
+    }
+
+    // -- Navigation -----------------------------------------------------------
+
+    const navEl = target.closest("[data-nav]");
+    if (navEl) {
+      if (navEl.dataset.nav === "epics") actions.showEpics();
+      return;
+    }
+
+    const navBoardEl = target.closest("[data-nav-board]");
+    if (navBoardEl) {
+      actions.showBoard();
+      return;
+    }
+
+    const navDetailEl = target.closest("[data-nav-detail]");
+    if (navDetailEl) {
+      actions.scrollToDetail();
+      return;
+    }
+
+    // -- Notes panel toggle ---------------------------------------------------
+
+    const toggleNotesEl = target.closest("[data-toggle-notes]");
+    if (toggleNotesEl) {
+      actions.toggleNotesPanel();
+      return;
+    }
+
+    // -- View switching -------------------------------------------------------
+
+    const viewEl = target.closest("[data-view]");
+    if (viewEl) {
+      actions.setView(viewEl.dataset.view);
+      return;
+    }
+
+    // -- Generic actions (toggle-theme, confirm-delete, cancel-delete) --------
+
+    const actionEl = target.closest("[data-action]");
+    if (actionEl) {
+      const action = actionEl.dataset.action;
+      if (action === "toggle-theme") actions.toggleTheme();
+      if (action === "confirm-delete") actions.confirmDelete();
+      if (action === "cancel-delete") actions.cancelDelete();
+      return;
+    }
+
+    // -- Epic selection -------------------------------------------------------
+
+    const openEpicEl = target.closest("[data-open-epic]");
+    if (openEpicEl) {
+      actions.openEpic(openEpicEl.dataset.openEpic || null);
+      return;
+    }
+
+    // -- Task selection (broadest — checked last) -----------------------------
+
+    const taskEl = target.closest("[data-task-id]");
+    if (taskEl) {
+      actions.selectTask(taskEl.dataset.taskId, taskEl);
+      return;
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+  // Input delegation (#board-search-input)
+  // ---------------------------------------------------------------------------
+  function handleInput(event) {
+    if (event.target.id === "board-search-input") {
+      actions.updateSearch(event.target.value);
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+  // Change delegation (#board-epic-select)
+  // ---------------------------------------------------------------------------
+  function handleChange(event) {
+    if (event.target.id === "board-epic-select") {
+      actions.selectEpic(event.target.value || null);
+      return;
+    }
+
+    const epicStatusForm = event.target.closest("[data-epic-status-form]");
+    if (epicStatusForm) {
+      if (actions.isMutating()) return;
+      actions.changeEpicStatus(epicStatusForm.dataset.epicStatusForm, event.target.value);
+      return;
+    }
+
+    const bulkStatusForm = event.target.closest("[data-bulk-status-form]");
+    if (bulkStatusForm) {
+      if (actions.isMutating()) return;
+      const newStatus = event.target.value;
+      if (newStatus) {
+        actions.bulkSetStatus(bulkStatusForm.dataset.bulkStatusForm, newStatus);
+        event.target.value = "";
+      }
+      return;
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+  // Submit delegation (data-task-form, data-subtask-form, etc.)
+  // ---------------------------------------------------------------------------
+  function handleSubmit(event) {
+    const form = event.target;
+
+    const taskForm = form.closest("[data-task-form]");
+    if (taskForm) {
+      event.preventDefault();
+      if (actions.isMutating()) return;
+      actions.submitTaskForm(taskForm.dataset.taskForm, new FormData(taskForm));
+      return;
+    }
+
+    const subtaskForm = form.closest("[data-subtask-form]");
+    if (subtaskForm) {
+      event.preventDefault();
+      if (actions.isMutating()) return;
+      actions.submitSubtaskForm(
+        subtaskForm.dataset.subtaskForm,
+        new FormData(subtaskForm),
+      );
+      return;
+    }
+
+    const createSubtaskForm = form.closest("[data-create-subtask-form]");
+    if (createSubtaskForm) {
+      event.preventDefault();
+      if (actions.isMutating()) return;
+      actions.submitCreateSubtask(
+        createSubtaskForm.dataset.createSubtaskForm,
+        new FormData(createSubtaskForm),
+      );
+      return;
+    }
+
+    const dependencyForm = form.closest("[data-dependency-form]");
+    if (dependencyForm) {
+      event.preventDefault();
+      if (actions.isMutating()) return;
+      actions.addDependency(
+        dependencyForm.dataset.dependencyForm,
+        new FormData(dependencyForm),
+      );
+      return;
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+  // Keyboard shortcuts (window-level)
+  // ---------------------------------------------------------------------------
+  function handleKeydown(event) {
+    if (event.defaultPrevented) {
+      return;
+    }
+    actions.handleKeydown(event);
+  }
+
+  function handleDelegatedKeydown(event) {
+    if (event.defaultPrevented) {
+      return;
+    }
+
+    const target = event.target instanceof Element ? event.target : null;
+    if (!target) {
+      return;
+    }
+
+    if (target.closest("[data-copy-epic-id]")) {
+      return;
+    }
+
+    const openEpicEl = target.closest("[data-open-epic]");
+    if (!openEpicEl) {
+      return;
+    }
+
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      actions.openEpic(openEpicEl.dataset.openEpic || null);
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+  // Drag-and-drop delegation
+  // ---------------------------------------------------------------------------
+  function handleDragstart(event) {
+    const draggable = event.target.closest("[data-draggable-task]");
+    if (!draggable) return;
+
+    if (actions.isMutating()) {
+      event.preventDefault();
+      return;
+    }
+
+    const taskId = draggable.dataset.taskId;
+    if (!taskId) return;
+
+    event.dataTransfer?.setData("text/task-id", taskId);
+    event.dataTransfer?.setData("text/plain", taskId);
+  }
+
+  function handleDragover(event) {
+    if (event.target.closest("[data-drop-status]")) {
+      event.preventDefault();
+    }
+  }
+
+  function handleDrop(event) {
+    const column = event.target.closest("[data-drop-status]");
+    if (!column) return;
+
+    event.preventDefault();
+    if (actions.isMutating()) return;
+
+    const taskId =
+      event.dataTransfer?.getData("text/task-id") ||
+      event.dataTransfer?.getData("text/plain");
+    const nextStatus = column.dataset.dropStatus;
+    actions.dropTaskStatus(taskId, nextStatus);
+  }
+
+  // ---------------------------------------------------------------------------
+  // Attach
+  // ---------------------------------------------------------------------------
+  rootElement.addEventListener("click", handleClick);
+  rootElement.addEventListener("input", handleInput);
+  rootElement.addEventListener("change", handleChange);
+  rootElement.addEventListener("submit", handleSubmit);
+  rootElement.addEventListener("dragstart", handleDragstart);
+  rootElement.addEventListener("dragover", handleDragover);
+  rootElement.addEventListener("drop", handleDrop);
+  rootElement.addEventListener("keydown", handleDelegatedKeydown);
+  window.addEventListener("keydown", handleKeydown);
+
+  // ---------------------------------------------------------------------------
+  // Teardown
+  // ---------------------------------------------------------------------------
+  return function teardown() {
+    rootElement.removeEventListener("click", handleClick);
+    rootElement.removeEventListener("input", handleInput);
+    rootElement.removeEventListener("change", handleChange);
+    rootElement.removeEventListener("submit", handleSubmit);
+    rootElement.removeEventListener("dragstart", handleDragstart);
+    rootElement.removeEventListener("dragover", handleDragover);
+    rootElement.removeEventListener("drop", handleDrop);
+    rootElement.removeEventListener("keydown", handleDelegatedKeydown);
+    window.removeEventListener("keydown", handleKeydown);
+  };
+}

package/src/board/assets/state/actions.js

@@ -1,3 +1,6 @@
+import { copyTextToClipboard } from "../runtime/clipboard.js";
+import { orderEpicsNewestFirst } from "./store.js";
+
 function cloneSnapshot(snapshot) {
   if (typeof structuredClone === "function") {
     return structuredClone(snapshot);
@@ -38,6 +41,40 @@ export function updateSubtaskInSnapshot(snapshot, subtaskId, updates, normalizeS
   return normalizeSnapshot(nextSnapshot);
 }
 
+export function cascadeEpicStatusInSnapshot(snapshot, epicId, status, normalizeSnapshot) {
+  const nextSnapshot = cloneSnapshot(snapshot);
+  const epic = nextSnapshot.epics.find((candidate) => candidate.id === epicId);
+  if (!epic) {
+    return snapshot;
+  }
+
+  const updatedAt = Date.now();
+  epic.status = status;
+  epic.updatedAt = updatedAt;
+
+  const taskIds = new Set();
+  for (const task of nextSnapshot.tasks) {
+    if (task.epicId !== epicId) {
+      continue;
+    }
+
+    task.status = status;
+    task.updatedAt = updatedAt;
+    taskIds.add(task.id);
+  }
+
+  for (const subtask of nextSnapshot.subtasks) {
+    if (!taskIds.has(subtask.taskId)) {
+      continue;
+    }
+
+    subtask.status = status;
+    subtask.updatedAt = updatedAt;
+  }
+
+  return normalizeSnapshot(nextSnapshot);
+}
+
 export function addDependencyInSnapshot(snapshot, sourceId, dependsOnId, normalizeSnapshot) {
   const nextSnapshot = cloneSnapshot(snapshot);
   const duplicate = normalizeArray(nextSnapshot.dependencies).some(
@@ -98,6 +135,8 @@ export function createBoardActions(options) {
     applyTheme,
     closeTopmostDisclosure,
     dismissSearch,
+    hasOpenOverlay,
+    closeActiveOverlay,
     focusSearch,
     focusTaskDetail,
     searchFocusKeys,
@@ -117,6 +156,80 @@ export function createBoardActions(options) {
   };
 
   let searchTimer = null;
+  let pendingSearchValue = null;
+  let copyFeedbackTimer = null;
+
+  const syncSearchInputToState = () => {
+    const input = document.querySelector("#board-search-input");
+    if (input instanceof HTMLInputElement) {
+      input.value = store.search;
+    }
+  };
+
+  const cancelPendingSearch = (options = {}) => {
+    const { syncInput = true } = options;
+    pendingSearchValue = null;
+    if (searchTimer !== null) {
+      clearTimeout(searchTimer);
+      searchTimer = null;
+    }
+    if (syncInput) {
+      syncSearchInputToState();
+    }
+  };
+
+  const focusSearchInput = () => {
+    const input = document.querySelector("#board-search-input");
+    if (input instanceof HTMLInputElement) {
+      input.focus({ preventScroll: true });
+      input.setSelectionRange(input.value.length, input.value.length);
+    }
+  };
+
+  const shouldRefocusSearchInput = () => document.activeElement?.id === "board-search-input";
+
+  const clearCopyFeedback = ({ rerenderBoard = true } = {}) => {
+    if (copyFeedbackTimer !== null) {
+      clearTimeout(copyFeedbackTimer);
+      copyFeedbackTimer = null;
+    }
+
+    if (!store.copyFeedback) {
+      return;
+    }
+
+    store.copyFeedback = null;
+    if (rerenderBoard) {
+      rerender();
+    }
+  };
+
+  const scheduleCopyFeedbackClear = (epicId) => {
+    if (copyFeedbackTimer !== null) {
+      clearTimeout(copyFeedbackTimer);
+    }
+
+    copyFeedbackTimer = setTimeout(() => {
+      copyFeedbackTimer = null;
+      if (store.copyFeedback?.epicId !== epicId) {
+        return;
+      }
+
+      store.copyFeedback = null;
+      rerender();
+    }, 1800);
+  };
+
+  const commitSearch = (nextSearch, options = {}) => {
+    const { focusInput = false } = options;
+    cancelPendingSearch({ syncInput: false });
+    syncState({ search: nextSearch });
+    persist();
+    rerender({ preserveFocus: false });
+    if (focusInput) {
+      focusSearchInput();
+    }
+  };
 
   return {
     toggleTheme() {
@@ -124,23 +237,26 @@ export function createBoardActions(options) {
       applyTheme(store.theme);
       rerender();
     },
+    toggleNotesPanel() {
+      store.notesPanelOpen = !store.notesPanelOpen;
+      persist();
+      rerender();
+    },
     updateSearch(value) {
-      store.search = typeof value === "string" ? value : "";
-      if (searchTimer !== null) {
-        clearTimeout(searchTimer);
-      }
+      const nextSearch = typeof value === "string" ? value : "";
+      cancelPendingSearch({ syncInput: false });
+      pendingSearchValue = nextSearch;
       searchTimer = setTimeout(() => {
-        searchTimer = null;
-        syncState({ search: store.search });
-        persist();
-        rerender({ preserveFocus: false });
-        const input = document.querySelector("#board-search-input");
-        if (input instanceof HTMLInputElement) {
-          input.focus({ preventScroll: true });
-          input.setSelectionRange(input.value.length, input.value.length);
+        if (pendingSearchValue !== nextSearch) {
+          return;
         }
+        commitSearch(nextSearch, { focusInput: shouldRefocusSearchInput() });
       }, 180);
     },
+    clearSearch() {
+      commitSearch("");
+    },
+    cancelPendingSearch,
     openEpic(epicId) {
       transition({
         screen: "tasks",
@@ -165,7 +281,11 @@ export function createBoardActions(options) {
       });
     },
     showBoard() {
-      const fallbackEpicId = getBoardState().selectedEpicId || store.snapshot.epics[0]?.id || null;
+      const boardState = getBoardState();
+      const fallbackEpicId = boardState.selectedEpicId
+        || boardState.visibleEpics[0]?.id
+        || orderEpicsNewestFirst(store.snapshot.epics)[0]?.id
+        || null;
       if (!fallbackEpicId) {
         return;
       }
@@ -180,6 +300,37 @@ export function createBoardActions(options) {
     setView(view) {
       transition({ view });
     },
+    async copyEpicId(epicId) {
+      const normalizedEpicId = typeof epicId === "string" ? epicId.trim() : "";
+
+      if (!normalizedEpicId) {
+        clearCopyFeedback({ rerenderBoard: false });
+        store.notice = {
+          type: "error",
+          title: "Copy failed",
+          message: "Epic UUID is unavailable.",
+        };
+        rerender();
+        return;
+      }
+
+      try {
+        await copyTextToClipboard(normalizedEpicId);
+        store.copyFeedback = {
+          epicId: normalizedEpicId,
+        };
+        scheduleCopyFeedbackClear(normalizedEpicId);
+      } catch {
+        clearCopyFeedback({ rerenderBoard: false });
+        store.notice = {
+          type: "error",
+          title: "Copy failed",
+          message: "Could not copy the epic UUID.",
+        };
+      }
+
+      rerender();
+    },
     selectTask(taskId) {
       const task = getTaskById(taskId);
       if (!task) {
@@ -261,6 +412,20 @@ export function createBoardActions(options) {
       transition({ selectedTaskId: taskId }, { rerenderBoard: false });
       api.patchTask(taskId, { status: nextStatus }, (snapshot) => updateTaskInSnapshot(snapshot, taskId, { status: nextStatus }, normalizeSnapshot));
     },
+    changeEpicStatus(epicId, newStatus) {
+      const normalizedStatus = normalizeStatus(newStatus);
+      api.patchEpic(epicId, { status: normalizedStatus }, (snapshot) => {
+        const epic = snapshot.epics.find(e => e.id === epicId);
+        if (epic) epic.status = normalizedStatus;
+        return snapshot;
+      });
+    },
+    bulkSetStatus(epicId, newStatus) {
+      const normalizedStatus = normalizeStatus(newStatus);
+      api.cascadeEpicStatus(epicId, normalizedStatus, (snapshot) =>
+        cascadeEpicStatusInSnapshot(snapshot, epicId, normalizedStatus, normalizeSnapshot),
+      );
+    },
     handleKeydown(event) {
       const boardState = getBoardState();
       const activeElement = document.activeElement;
@@ -276,23 +441,42 @@ export function createBoardActions(options) {
       }
 
       if (event.key === "Escape") {
+        if (activeElement?.id === "board-search-input" && pendingSearchValue !== null) {
+          event.preventDefault();
+          activeElement.value = "";
+          this.clearSearch();
+          activeElement.blur();
+          return;
+        }
+
         if (closeTopmostDisclosure?.(boardState, activeElement)) {
           event.preventDefault();
           return;
         }
 
+        if (dismissSearch?.(boardState, activeElement)) {
+          event.preventDefault();
+          return;
+        }
+
+        if (hasOpenOverlay?.()) {
+          event.preventDefault();
+          closeActiveOverlay?.();
+          return;
+        }
+
         if (boardState.selectedSubtaskId) {
           event.preventDefault();
           this.closeSubtask();
         } else if (boardState.selectedTaskId) {
           event.preventDefault();
           this.closeTask();
-        } else if (dismissSearch?.(boardState, activeElement)) {
-          event.preventDefault();
-          return;
         } else if (boardState.screen === "tasks") {
           event.preventDefault();
           this.showEpics();
+        } else if (store.copyFeedback) {
+          event.preventDefault();
+          clearCopyFeedback();
         } else if (store.notice) {
           event.preventDefault();
           store.notice = null;
@@ -301,6 +485,10 @@ export function createBoardActions(options) {
         return;
       }
 
+      if (hasOpenOverlay?.()) {
+        return;
+      }
+
       if (boardState.screen !== "tasks" || isTypingTarget || visibleTasks.length === 0) {
         return;
       }