trekoon 0.2.7 → 0.2.8

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

@@ -0,0 +1,334 @@
+function cloneSnapshot(snapshot) {
+  if (typeof structuredClone === "function") {
+    return structuredClone(snapshot);
+  }
+
+  return JSON.parse(JSON.stringify(snapshot));
+}
+
+function normalizeArray(value) {
+  return Array.isArray(value) ? value : [];
+}
+
+export function updateTaskInSnapshot(snapshot, taskId, updates, normalizeSnapshot) {
+  const nextSnapshot = cloneSnapshot(snapshot);
+  const task = nextSnapshot.tasks.find((candidate) => candidate.id === taskId);
+  if (!task) {
+    return snapshot;
+  }
+
+  if (updates.title !== undefined) task.title = updates.title;
+  if (updates.description !== undefined) task.description = updates.description;
+  if (updates.status !== undefined) task.status = updates.status;
+  task.updatedAt = Date.now();
+  return normalizeSnapshot(nextSnapshot);
+}
+
+export function updateSubtaskInSnapshot(snapshot, subtaskId, updates, normalizeSnapshot) {
+  const nextSnapshot = cloneSnapshot(snapshot);
+  const subtask = nextSnapshot.subtasks.find((candidate) => candidate.id === subtaskId);
+  if (!subtask) {
+    return snapshot;
+  }
+
+  if (updates.title !== undefined) subtask.title = updates.title;
+  if (updates.description !== undefined) subtask.description = updates.description;
+  if (updates.status !== undefined) subtask.status = updates.status;
+  subtask.updatedAt = Date.now();
+  return normalizeSnapshot(nextSnapshot);
+}
+
+export function addDependencyInSnapshot(snapshot, sourceId, dependsOnId, normalizeSnapshot) {
+  const nextSnapshot = cloneSnapshot(snapshot);
+  const duplicate = normalizeArray(nextSnapshot.dependencies).some(
+    (dependency) => dependency.sourceId === sourceId && dependency.dependsOnId === dependsOnId,
+  );
+  if (!duplicate) {
+    normalizeArray(nextSnapshot.dependencies).push({
+      id: crypto.randomUUID(),
+      sourceId,
+      sourceKind: nextSnapshot.subtasks.some((subtask) => subtask.id === sourceId) ? "subtask" : "task",
+      dependsOnId,
+      dependsOnKind: nextSnapshot.subtasks.some((subtask) => subtask.id === dependsOnId) ? "subtask" : "task",
+      createdAt: Date.now(),
+      updatedAt: Date.now(),
+    });
+  }
+  return normalizeSnapshot(nextSnapshot);
+}
+
+export function removeDependencyInSnapshot(snapshot, sourceId, dependsOnId, normalizeSnapshot) {
+  const nextSnapshot = cloneSnapshot(snapshot);
+  nextSnapshot.dependencies = normalizeArray(nextSnapshot.dependencies).filter(
+    (dependency) => !(dependency.sourceId === sourceId && dependency.dependsOnId === dependsOnId),
+  );
+  return normalizeSnapshot(nextSnapshot);
+}
+
+export function createSubtaskInSnapshot(snapshot, input, normalizeSnapshot) {
+  const nextSnapshot = cloneSnapshot(snapshot);
+  normalizeArray(nextSnapshot.subtasks).push({
+    id: crypto.randomUUID(),
+    taskId: input.taskId,
+    title: input.title,
+    description: input.description ?? "",
+    status: input.status ?? "todo",
+    createdAt: Date.now(),
+    updatedAt: Date.now(),
+  });
+  return normalizeSnapshot(nextSnapshot);
+}
+
+export function deleteSubtaskInSnapshot(snapshot, subtaskId, normalizeSnapshot) {
+  const nextSnapshot = cloneSnapshot(snapshot);
+  nextSnapshot.subtasks = normalizeArray(nextSnapshot.subtasks).filter((candidate) => candidate.id !== subtaskId);
+  nextSnapshot.dependencies = normalizeArray(nextSnapshot.dependencies).filter(
+    (dependency) => dependency.sourceId !== subtaskId && dependency.dependsOnId !== subtaskId,
+  );
+  return normalizeSnapshot(nextSnapshot);
+}
+
+export function createBoardActions(options) {
+  const {
+    model,
+    api,
+    rerender,
+    normalizeSnapshot,
+    normalizeStatus,
+    applyTheme,
+    closeTopmostDisclosure,
+    dismissSearch,
+    focusSearch,
+    focusTaskDetail,
+    searchFocusKeys,
+  } = options;
+  const { store, persist, getBoardState, getTaskById, syncState } = model;
+
+  const transition = (patch = {}, options = {}) => {
+    const { persistState = true, rerenderBoard = true } = options;
+    const boardState = syncState(patch);
+    if (persistState) {
+      persist();
+    }
+    if (rerenderBoard) {
+      rerender();
+    }
+    return boardState;
+  };
+
+  let searchTimer = null;
+
+  return {
+    toggleTheme() {
+      store.theme = store.theme === "dark" ? "light" : "dark";
+      applyTheme(store.theme);
+      rerender();
+    },
+    updateSearch(value) {
+      store.search = typeof value === "string" ? value : "";
+      if (searchTimer !== null) {
+        clearTimeout(searchTimer);
+      }
+      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);
+        }
+      }, 180);
+    },
+    openEpic(epicId) {
+      transition({
+        screen: "tasks",
+        selectedEpicId: epicId || null,
+        selectedTaskId: null,
+        selectedSubtaskId: null,
+      });
+    },
+    selectEpic(epicId) {
+      transition({
+        screen: "tasks",
+        selectedEpicId: epicId || null,
+        selectedTaskId: null,
+        selectedSubtaskId: null,
+      });
+    },
+    showEpics() {
+      transition({
+        screen: "epics",
+        selectedTaskId: null,
+        selectedSubtaskId: null,
+      });
+    },
+    showBoard() {
+      const fallbackEpicId = getBoardState().selectedEpicId || store.snapshot.epics[0]?.id || null;
+      if (!fallbackEpicId) {
+        return;
+      }
+
+      transition({
+        screen: "tasks",
+        selectedEpicId: fallbackEpicId,
+        selectedTaskId: null,
+        selectedSubtaskId: null,
+      });
+    },
+    setView(view) {
+      transition({ view });
+    },
+    selectTask(taskId) {
+      const task = getTaskById(taskId);
+      if (!task) {
+        return;
+      }
+      transition({
+        screen: "tasks",
+        selectedEpicId: task.epicId,
+        selectedTaskId: taskId,
+      });
+    },
+    closeTask() {
+      transition({ selectedTaskId: null, selectedSubtaskId: null });
+    },
+    openSubtask(subtaskId) {
+      transition({ selectedSubtaskId: subtaskId || null }, { persistState: false });
+    },
+    closeSubtask() {
+      transition({ selectedSubtaskId: null }, { persistState: false });
+    },
+    submitTaskForm(taskId, formData) {
+      const updates = {
+        title: String(formData.get("title") || "").trim(),
+        description: String(formData.get("description") || "").trim(),
+        status: normalizeStatus(String(formData.get("status") || "todo")),
+      };
+      api.patchTask(taskId, updates, (snapshot) => updateTaskInSnapshot(snapshot, taskId, updates, normalizeSnapshot));
+    },
+    submitSubtaskForm(subtaskId, formData) {
+      const updates = {
+        title: String(formData.get("title") || "").trim(),
+        description: String(formData.get("description") || "").trim(),
+        status: normalizeStatus(String(formData.get("status") || "todo")),
+      };
+      syncState({ selectedSubtaskId: subtaskId });
+      api.patchSubtask(subtaskId, updates, (snapshot) => updateSubtaskInSnapshot(snapshot, subtaskId, updates, normalizeSnapshot));
+    },
+    submitCreateSubtask(taskId, formData) {
+      const input = {
+        taskId,
+        title: String(formData.get("title") || "").trim(),
+        description: String(formData.get("description") || "").trim(),
+        status: normalizeStatus(String(formData.get("status") || "todo")),
+      };
+
+      if (!taskId || input.title.length === 0) {
+        store.notice = { type: "error", message: "Subtasks need a title before they can be added." };
+        rerender();
+        return;
+      }
+
+      api.createSubtask(input, (snapshot) => createSubtaskInSnapshot(snapshot, input, normalizeSnapshot));
+    },
+    deleteSubtask(subtaskId) {
+      if (!subtaskId) {
+        return;
+      }
+
+      api.deleteSubtask(subtaskId, (snapshot) => deleteSubtaskInSnapshot(snapshot, subtaskId, normalizeSnapshot));
+    },
+    addDependency(sourceId, formData) {
+      const dependsOnId = String(formData.get("dependsOnId") || "").trim();
+      if (!dependsOnId) {
+        store.notice = { type: "error", message: "Choose a dependency target first." };
+        rerender();
+        return;
+      }
+
+      api.addDependency(sourceId, dependsOnId, (snapshot) => addDependencyInSnapshot(snapshot, sourceId, dependsOnId, normalizeSnapshot));
+    },
+    removeDependency(sourceId, dependsOnId) {
+      api.removeDependency(sourceId, dependsOnId, (snapshot) => removeDependencyInSnapshot(snapshot, sourceId, dependsOnId, normalizeSnapshot));
+    },
+    dropTaskStatus(taskId, nextStatus) {
+      const task = getTaskById(taskId);
+      if (!task || !nextStatus || task.status === nextStatus) {
+        return;
+      }
+      transition({ selectedTaskId: taskId }, { rerenderBoard: false });
+      api.patchTask(taskId, { status: nextStatus }, (snapshot) => updateTaskInSnapshot(snapshot, taskId, { status: nextStatus }, normalizeSnapshot));
+    },
+    handleKeydown(event) {
+      const boardState = getBoardState();
+      const activeElement = document.activeElement;
+      const tagName = activeElement?.tagName?.toLowerCase();
+      const isTypingTarget = tagName === "input" || tagName === "textarea" || tagName === "select";
+      const visibleTasks = boardState.visibleTasks;
+      const currentIndex = visibleTasks.findIndex((task) => task.id === boardState.selectedTaskId);
+
+      if (searchFocusKeys.has(event.key.toLowerCase()) && activeElement?.id !== "board-search-input" && !isTypingTarget) {
+        event.preventDefault();
+        focusSearch?.(activeElement);
+        return;
+      }
+
+      if (event.key === "Escape") {
+        if (closeTopmostDisclosure?.(boardState, activeElement)) {
+          event.preventDefault();
+          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.notice) {
+          event.preventDefault();
+          store.notice = null;
+          rerender();
+        }
+        return;
+      }
+
+      if (boardState.screen !== "tasks" || isTypingTarget || visibleTasks.length === 0) {
+        return;
+      }
+
+      if (event.key.toLowerCase() === "j" || event.key === "ArrowDown") {
+        event.preventDefault();
+        const nextTask = visibleTasks[Math.min(currentIndex + 1, visibleTasks.length - 1)] ?? visibleTasks[0];
+        this.selectTask(nextTask.id);
+        return;
+      }
+
+      if (event.key.toLowerCase() === "k" || event.key === "ArrowUp") {
+        event.preventDefault();
+        const previousTask = visibleTasks[Math.max(currentIndex - 1, 0)] ?? visibleTasks[0];
+        this.selectTask(previousTask.id);
+        return;
+      }
+
+      if (event.key === "Enter" && currentIndex >= 0) {
+        event.preventDefault();
+        focusTaskDetail?.();
+        return;
+      }
+
+      if (event.key === "Enter" && currentIndex === -1 && visibleTasks[0]) {
+        event.preventDefault();
+        this.selectTask(visibleTasks[0].id);
+      }
+    },
+  };
+}

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

@@ -0,0 +1,126 @@
+function cloneSnapshot(snapshot) {
+  if (typeof structuredClone === "function") {
+    return structuredClone(snapshot);
+  }
+
+  return JSON.parse(JSON.stringify(snapshot));
+}
+
+export function createApi(model, options) {
+  const { sessionToken, rerender } = options;
+
+  async function request(path, requestOptions = {}) {
+    const headers = new Headers(requestOptions.headers || {});
+    if (sessionToken.length > 0) {
+      headers.set("authorization", `Bearer ${sessionToken}`);
+    }
+    if (requestOptions.body && !headers.has("content-type")) {
+      headers.set("content-type", "application/json");
+    }
+
+    const response = await fetch(path, { ...requestOptions, headers });
+    const payload = await response.json();
+    if (!payload?.ok) {
+      const message = payload?.error?.message || "Board request failed";
+      const error = new Error(message);
+      error.code = payload?.error?.code;
+      error.details = payload?.error?.details;
+      throw error;
+    }
+
+    return payload.data;
+  }
+
+  async function runMutation({ optimistic, request: mutationRequest, successMessage }) {
+    if (model.store.isMutating) {
+      return;
+    }
+
+    const previousSnapshot = cloneSnapshot(model.store.snapshot);
+    model.store.notice = null;
+    model.store.isMutating = true;
+
+    if (typeof optimistic === "function") {
+      model.store.snapshot = optimistic(cloneSnapshot(model.store.snapshot));
+      rerender();
+    }
+
+    try {
+      const data = await mutationRequest();
+      if (data?.snapshot) {
+        model.replaceSnapshot(data.snapshot);
+      }
+      model.store.notice = successMessage ? { type: "success", message: successMessage } : null;
+    } catch (error) {
+      model.replaceSnapshot(previousSnapshot);
+      model.store.notice = {
+        type: "error",
+        message: error instanceof Error ? error.message : String(error),
+      };
+    } finally {
+      model.store.isMutating = false;
+      rerender();
+    }
+  }
+
+  return {
+    patchTask(taskId, updates, optimistic) {
+      return runMutation({
+        optimistic,
+        successMessage: "Task saved.",
+        request: () => request(`/api/tasks/${encodeURIComponent(taskId)}`, {
+          method: "PATCH",
+          body: JSON.stringify(updates),
+        }),
+      });
+    },
+    patchSubtask(subtaskId, updates, optimistic) {
+      return runMutation({
+        optimistic,
+        successMessage: "Subtask saved.",
+        request: () => request(`/api/subtasks/${encodeURIComponent(subtaskId)}`, {
+          method: "PATCH",
+          body: JSON.stringify(updates),
+        }),
+      });
+    },
+    createSubtask(input, optimistic) {
+      return runMutation({
+        optimistic,
+        successMessage: "Subtask added.",
+        request: () => request("/api/subtasks", {
+          method: "POST",
+          body: JSON.stringify(input),
+        }),
+      });
+    },
+    deleteSubtask(subtaskId, optimistic) {
+      return runMutation({
+        optimistic,
+        successMessage: "Subtask removed.",
+        request: () => request(`/api/subtasks/${encodeURIComponent(subtaskId)}`, {
+          method: "DELETE",
+        }),
+      });
+    },
+    addDependency(sourceId, dependsOnId, optimistic) {
+      return runMutation({
+        optimistic,
+        successMessage: "Dependency added.",
+        request: () => request("/api/dependencies", {
+          method: "POST",
+          body: JSON.stringify({ sourceId, dependsOnId }),
+        }),
+      });
+    },
+    removeDependency(sourceId, dependsOnId, optimistic) {
+      return runMutation({
+        optimistic,
+        successMessage: "Dependency removed.",
+        request: () => request(`/api/dependencies?sourceId=${encodeURIComponent(sourceId)}&dependsOnId=${encodeURIComponent(dependsOnId)}`, {
+          method: "DELETE",
+        }),
+      });
+    },
+  };
+}

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

@@ -0,0 +1,172 @@
+export const THEME_STORAGE_KEY = "trekoon-board-theme";
+export const STATE_STORAGE_KEY = "trekoon-board-state";
+export const VIEW_MODES = ["kanban", "list"];
+export const STATUS_ORDER = ["todo", "blocked", "in_progress", "done"];
+
+function normalizeSearch(value) {
+  return typeof value === "string" ? value : "";
+}
+
+function deriveBoardState(snapshot, state) {
+  const selectedEpic = snapshot.epics.find((epic) => epic.id === state.selectedEpicId) ?? null;
+  const screen = state.screen === "tasks" && selectedEpic ? "tasks" : "epics";
+  const selectedEpicId = selectedEpic?.id ?? null;
+  const search = normalizeSearch(state.search);
+  const searchQuery = search.trim().toLowerCase();
+  const visibleEpics = searchQuery.length === 0
+    ? snapshot.epics
+    : snapshot.epics.filter((epic) => epic.searchText.includes(searchQuery));
+  const tasksInScope = screen === "tasks" && selectedEpicId
+    ? snapshot.tasks.filter((task) => task.epicId === selectedEpicId)
+    : snapshot.tasks;
+  const visibleTasks = searchQuery.length === 0
+    ? tasksInScope
+    : tasksInScope.filter((task) => task.searchText.includes(searchQuery));
+  const selectedTask = visibleTasks.find((task) => task.id === state.selectedTaskId)
+    ?? tasksInScope.find((task) => task.id === state.selectedTaskId)
+    ?? null;
+  const selectedTaskId = selectedTask && visibleTasks.some((task) => task.id === selectedTask.id)
+    ? selectedTask.id
+    : null;
+  const selectedSubtask = selectedTaskId
+    ? snapshot.subtasks.find(
+      (subtask) => subtask.id === state.selectedSubtaskId && subtask.taskId === selectedTaskId,
+    ) ?? null
+    : null;
+  const selectedSubtaskId = selectedSubtask?.id ?? null;
+  const searchScope = screen === "tasks" && selectedEpic
+    ? {
+      kind: searchQuery.length > 0 ? "epic_search" : "epic",
+      label: selectedEpic.title,
+      summary: searchQuery.length > 0 ? `Searching ${selectedEpic.title}` : `Epic ${selectedEpic.title}`,
+      detail: searchQuery.length > 0
+        ? `${visibleTasks.length} matching task${visibleTasks.length === 1 ? "" : "s"} in this epic`
+        : `${tasksInScope.length} task${tasksInScope.length === 1 ? "" : "s"} in this epic`,
+    }
+    : {
+      kind: searchQuery.length > 0 ? "overview_search" : "overview",
+      label: "All epics",
+      summary: searchQuery.length > 0 ? "Searching all epics" : "Epic overview",
+      detail: searchQuery.length > 0
+        ? `${visibleEpics.length} matching epic${visibleEpics.length === 1 ? "" : "s"}`
+        : `${snapshot.epics.length} epic${snapshot.epics.length === 1 ? "" : "s"} total`,
+    };
+
+  return {
+    screen,
+    selectedEpicId,
+    selectedEpic,
+    selectedTaskId,
+    selectedTask: selectedTaskId ? selectedTask : null,
+    selectedSubtaskId,
+    selectedSubtask,
+    search,
+    searchQuery,
+    searchScope,
+    visibleEpics,
+    visibleTasks,
+  };
+}
+
+function reconcileBoardState(snapshot, state) {
+  const derivedState = deriveBoardState(snapshot, state);
+  return {
+    screen: derivedState.screen,
+    selectedEpicId: derivedState.selectedEpicId,
+    search: derivedState.search,
+    view: VIEW_MODES.includes(state.view) ? state.view : "kanban",
+    selectedTaskId: derivedState.selectedTaskId,
+    selectedSubtaskId: derivedState.selectedSubtaskId,
+  };
+}
+
+export function readStoredState() {
+  try {
+    return JSON.parse(localStorage.getItem(STATE_STORAGE_KEY) || "{}");
+  } catch {
+    return {};
+  }
+}
+
+export function writeStoredState(nextState) {
+  localStorage.setItem(STATE_STORAGE_KEY, JSON.stringify(nextState));
+}
+
+export function readThemePreference() {
+  const storedTheme = localStorage.getItem(THEME_STORAGE_KEY);
+  return storedTheme === "light" || storedTheme === "dark" ? storedTheme : "dark";
+}
+
+export function applyTheme(theme) {
+  document.documentElement.dataset.theme = theme;
+  localStorage.setItem(THEME_STORAGE_KEY, theme);
+}
+
+export function createStore(snapshot, options) {
+  const { normalizeSnapshot } = options;
+  const storedState = readStoredState();
+  const store = {
+    snapshot,
+    screen: storedState.screen === "tasks" ? "tasks" : "epics",
+    selectedEpicId: typeof storedState.selectedEpicId === "string" ? storedState.selectedEpicId : null,
+    search: normalizeSearch(storedState.search),
+    view: VIEW_MODES.includes(storedState.view) ? storedState.view : "kanban",
+    selectedTaskId: typeof storedState.selectedTaskId === "string" ? storedState.selectedTaskId : null,
+    selectedSubtaskId: null,
+    theme: readThemePreference(),
+    focusedEpicIndex: 0,
+    notice: null,
+    isMutating: false,
+  };
+
+  const persist = () => {
+    writeStoredState({
+      screen: store.screen,
+      selectedEpicId: store.selectedEpicId,
+      search: store.search,
+      view: store.view,
+      selectedTaskId: store.selectedTaskId,
+    });
+  };
+
+  const getTaskById = (taskId) => store.snapshot.tasks.find((task) => task.id === taskId) ?? null;
+  const getSubtaskById = (subtaskId) => store.snapshot.subtasks.find((subtask) => subtask.id === subtaskId) ?? null;
+  const getBoardState = () => deriveBoardState(store.snapshot, store);
+  const getSelectedEpic = () => getBoardState().selectedEpic;
+  const getSelectedTask = () => getBoardState().selectedTask;
+  const getVisibleTasks = () => getBoardState().visibleTasks;
+  const getVisibleEpics = () => getBoardState().visibleEpics;
+
+  const syncState = (patch = {}) => {
+    const nextState = reconcileBoardState(store.snapshot, { ...store, ...patch });
+    store.screen = nextState.screen;
+    store.selectedEpicId = nextState.selectedEpicId;
+    store.search = nextState.search;
+    store.view = nextState.view;
+    store.selectedTaskId = nextState.selectedTaskId;
+    store.selectedSubtaskId = nextState.selectedSubtaskId;
+    return getBoardState();
+  };
+
+  const replaceSnapshot = (nextSnapshot) => {
+    store.snapshot = normalizeSnapshot(nextSnapshot);
+    syncState();
+    persist();
+  };
+
+  syncState();
+
+  return {
+    store,
+    persist,
+    getTaskById,
+    getSubtaskById,
+    getBoardState,
+    getSelectedEpic,
+    getSelectedTask,
+    getVisibleTasks,
+    getVisibleEpics,
+    syncState,
+    replaceSnapshot,
+  };
+}