trekoon 0.2.8 → 0.3.0

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

@@ -1,172 +1,473 @@
+import { normalizeSnapshot, VIEW_MODES } from "./utils.js";
+
 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
-    ? {
+// --- Persistence helpers ---
+
+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);
+
+  const themeColor = theme === "light" ? "#f4f6fb" : "#0b0d12";
+  const themeColorMeta = document.querySelector('meta[name="theme-color"][data-board-theme-color="active"]');
+  if (themeColorMeta instanceof HTMLMetaElement) {
+    themeColorMeta.setAttribute("content", themeColor);
+  }
+}
+
+// --- Memoization helper ---
+
+/**
+ * Create a memoized selector that only recomputes when its dependency keys change.
+ * @param {(state: object) => any[]} getDeps - Extract dependency values from state
+ * @param {(...deps: any[]) => any} compute - Compute derived value from deps
+ */
+function createSelector(getDeps, compute) {
+  let cachedDeps = null;
+  let cachedResult = undefined;
+
+  return (state) => {
+    const deps = getDeps(state);
+    if (cachedDeps !== null && deps.every((dep, i) => dep === cachedDeps[i])) {
+      return cachedResult;
+    }
+    cachedDeps = deps;
+    cachedResult = compute(...deps);
+    return cachedResult;
+  };
+}
+
+function compareEpicOverviewOrder(leftEpic, rightEpic) {
+  if (leftEpic.createdAt !== rightEpic.createdAt) {
+    return rightEpic.createdAt - leftEpic.createdAt;
+  }
+
+  return leftEpic.id.localeCompare(rightEpic.id);
+}
+
+export function orderEpicsNewestFirst(epics) {
+  if (!Array.isArray(epics)) {
+    return [];
+  }
+
+  return [...epics].sort(compareEpicOverviewOrder);
+}
+
+// --- Derived state selectors ---
+
+const selectVisibleEpics = createSelector(
+  (s) => [s.snapshot?.epics, s.searchQuery],
+  (epics, searchQuery) => {
+    if (!epics) return [];
+    const matchingEpics = searchQuery.length === 0
+      ? epics
+      : epics.filter((epic) => epic.searchText.includes(searchQuery));
+
+    return orderEpicsNewestFirst(matchingEpics);
+  },
+);
+
+const selectTasksInScope = createSelector(
+  (s) => [s.snapshot?.tasks, s.screen, s.selectedEpicId],
+  (tasks, screen, selectedEpicId) => {
+    if (!tasks) return [];
+    return screen === "tasks" && selectedEpicId
+      ? tasks.filter((task) => task.epicId === selectedEpicId)
+      : tasks;
+  },
+);
+
+const selectVisibleTasks = createSelector(
+  (s) => [selectTasksInScope(s), s.searchQuery],
+  (tasksInScope, searchQuery) => {
+    return searchQuery.length === 0
+      ? tasksInScope
+      : tasksInScope.filter((task) => task.searchText.includes(searchQuery));
+  },
+);
+
+const selectSelectedEpic = createSelector(
+  (s) => [s.snapshot?.epics, s.selectedEpicId],
+  (epics, selectedEpicId) => {
+    if (!epics || !selectedEpicId) return null;
+    return epics.find((epic) => epic.id === selectedEpicId) ?? null;
+  },
+);
+
+const selectSelectedTask = createSelector(
+  (s) => [s.screen, selectVisibleTasks(s), selectTasksInScope(s), s.selectedTaskId],
+  (screen, visibleTasks, tasksInScope, selectedTaskId) => {
+    if (screen !== "tasks" || !selectedTaskId) return null;
+    const fromVisible = visibleTasks.find((task) => task.id === selectedTaskId);
+    if (fromVisible) return fromVisible;
+    return tasksInScope.find((task) => task.id === selectedTaskId) ?? null;
+  },
+);
+
+const selectSelectedSubtask = createSelector(
+  (s) => [s.snapshot?.subtasks, s.selectedTaskId, s.selectedSubtaskId],
+  (subtasks, selectedTaskId, selectedSubtaskId) => {
+    if (!subtasks || !selectedTaskId || !selectedSubtaskId) return null;
+    return subtasks.find(
+      (subtask) => subtask.id === selectedSubtaskId && subtask.taskId === selectedTaskId,
+    ) ?? null;
+  },
+);
+
+function selectSearchScope(state) {
+  const selectedEpic = selectSelectedEpic(state);
+  const visibleEpics = selectVisibleEpics(state);
+  const visibleTasks = selectVisibleTasks(state);
+  const tasksInScope = selectTasksInScope(state);
+  const searchQuery = state.searchQuery;
+  const screen = state.screen;
+
+  if (screen === "tasks" && selectedEpic) {
+    return {
       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 {
+    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"}`
+      : `${state.snapshot?.epics?.length ?? 0} epic${(state.snapshot?.epics?.length ?? 0) === 1 ? "" : "s"} total`,
+  };
+}
+
+/**
+ * @typedef {object} BoardState
+ * @property {"epics"|"tasks"} screen
+ * @property {string|null} selectedEpicId
+ * @property {object|null} selectedEpic
+ * @property {string|null} selectedTaskId
+ * @property {object|null} selectedTask
+ * @property {string|null} selectedSubtaskId
+ * @property {object|null} selectedSubtask
+ * @property {string} search
+ * @property {string} searchQuery
+ * @property {object} searchScope
+ * @property {object[]} visibleEpics
+ * @property {object[]} visibleTasks
+ */
+
+/**
+ * Compute full derived board state from the internal state, using memoized selectors.
+ * @param {object} state
+ * @returns {BoardState}
+ */
+function deriveBoardState(state) {
+  const requestedTask = state.selectedTaskId
+    ? state.snapshot?.tasks?.find((task) => task.id === state.selectedTaskId) ?? null
+    : null;
+  const requestedEpicId = requestedTask?.epicId ?? state.selectedEpicId ?? null;
+  const selectedEpic = requestedEpicId
+    ? state.snapshot?.epics?.find((epic) => epic.id === requestedEpicId) ?? null
+    : null;
+  const screen = requestedTask && selectedEpic
+    ? "tasks"
+    : state.screen === "tasks" && selectedEpic
+      ? "tasks"
+      : "epics";
+  const normalizedSelectedEpicId = selectedEpic?.id ?? null;
+  const stateWithScreen = state.screen !== screen || state.selectedEpicId !== normalizedSelectedEpicId
+    ? { ...state, screen, selectedEpicId: normalizedSelectedEpicId }
+    : state;
+
+  const visibleTasks = selectVisibleTasks(stateWithScreen);
+  const selectedTask = selectSelectedTask(stateWithScreen);
+  const selectedTaskId = selectedTask && visibleTasks.some((t) => t.id === selectedTask.id)
+    ? selectedTask.id
+    : null;
+  const stateWithTaskSelection = stateWithScreen.selectedTaskId !== selectedTaskId
+    ? { ...stateWithScreen, selectedTaskId }
+    : stateWithScreen;
+  const selectedSubtask = selectedTaskId ? selectSelectedSubtask(stateWithTaskSelection) : null;
 
   return {
     screen,
-    selectedEpicId,
+    selectedEpicId: selectedEpic?.id ?? null,
     selectedEpic,
     selectedTaskId,
     selectedTask: selectedTaskId ? selectedTask : null,
-    selectedSubtaskId,
+    selectedSubtaskId: selectedSubtask?.id ?? null,
     selectedSubtask,
-    search,
-    searchQuery,
-    searchScope,
-    visibleEpics,
+    search: stateWithScreen.search,
+    searchQuery: stateWithScreen.searchQuery,
+    searchScope: selectSearchScope(stateWithScreen),
+    visibleEpics: selectVisibleEpics(stateWithScreen),
     visibleTasks,
   };
 }
 
-function reconcileBoardState(snapshot, state) {
-  const derivedState = deriveBoardState(snapshot, state);
+function reconcileBoardState(state) {
+  const derived = deriveBoardState(state);
   return {
-    screen: derivedState.screen,
-    selectedEpicId: derivedState.selectedEpicId,
-    search: derivedState.search,
+    screen: derived.screen,
+    selectedEpicId: derived.selectedEpicId,
+    search: derived.search,
     view: VIEW_MODES.includes(state.view) ? state.view : "kanban",
-    selectedTaskId: derivedState.selectedTaskId,
-    selectedSubtaskId: derivedState.selectedSubtaskId,
+    selectedTaskId: derived.selectedTaskId,
+    selectedSubtaskId: derived.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));
-}
+/**
+ * Create an observable store with memoized derived state.
+ *
+ * @param {object} initialSnapshot - Raw board snapshot from server
+ * @param {object} [options]
+ * @param {function} [options.normalizeSnapshot] - Custom normalizer (defaults to utils.normalizeSnapshot)
+ * @returns {{
+ *   getState: () => object,
+ *   setState: (patch: object) => void,
+ *   subscribe: (listener: (state: object) => void) => () => void,
+ *   getSnapshot: () => object,
+ *   getBoardState: () => BoardState,
+ *   getTaskById: (id: string) => object|null,
+ *   getSubtaskById: (id: string) => object|null,
+ *   replaceSnapshot: (rawSnapshot: object) => void,
+ *   store: object,
+ *   persist: () => void,
+ *   syncState: (patch?: object) => BoardState,
+ * }}
+ */
+export function createStore(initialSnapshot, options = {}) {
+  const normalize = options.normalizeSnapshot ?? normalizeSnapshot;
+  const storedState = readStoredState();
+  const snapshot = typeof initialSnapshot === "object" && initialSnapshot !== null
+    ? normalize(initialSnapshot)
+    : normalize({ epics: [], tasks: [], subtasks: [], dependencies: [] });
 
-export function readThemePreference() {
-  const storedTheme = localStorage.getItem(THEME_STORAGE_KEY);
-  return storedTheme === "light" || storedTheme === "dark" ? storedTheme : "dark";
-}
+  const search = normalizeSearch(storedState.search);
 
-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 = {
+  /** @type {object} Internal mutable state */
+  const state = {
     snapshot,
     screen: storedState.screen === "tasks" ? "tasks" : "epics",
     selectedEpicId: typeof storedState.selectedEpicId === "string" ? storedState.selectedEpicId : null,
-    search: normalizeSearch(storedState.search),
+    search,
+    searchQuery: search.trim().toLowerCase(),
     view: VIEW_MODES.includes(storedState.view) ? storedState.view : "kanban",
     selectedTaskId: typeof storedState.selectedTaskId === "string" ? storedState.selectedTaskId : null,
     selectedSubtaskId: null,
     theme: readThemePreference(),
     focusedEpicIndex: 0,
+    copyFeedback: null,
     notice: null,
     isMutating: false,
+    notesPanelOpen: storedState.notesPanelOpen === true,
   };
 
-  const persist = () => {
+  /** @type {Set<(state: object) => void>} */
+  const listeners = new Set();
+
+  function notify() {
+    for (const listener of listeners) {
+      listener(state);
+    }
+  }
+
+  function persist() {
     writeStoredState({
-      screen: store.screen,
-      selectedEpicId: store.selectedEpicId,
-      search: store.search,
-      view: store.view,
-      selectedTaskId: store.selectedTaskId,
-    });
-  };
+      screen: state.screen,
+      selectedEpicId: state.selectedEpicId,
+      search: state.search,
+        view: state.view,
+        selectedTaskId: state.selectedTaskId,
+        notesPanelOpen: state.notesPanelOpen,
+      });
+  }
 
-  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();
-  };
+  function syncState(patch = {}) {
+    const merged = { ...state, ...patch };
+    if (merged.search !== state.search || patch.search !== undefined) {
+      merged.searchQuery = normalizeSearch(merged.search).trim().toLowerCase();
+    }
+    const reconciled = reconcileBoardState(merged);
+    const changed =
+      state.screen !== reconciled.screen
+      || state.selectedEpicId !== reconciled.selectedEpicId
+      || state.search !== reconciled.search
+      || state.view !== reconciled.view
+      || state.selectedTaskId !== reconciled.selectedTaskId
+      || state.selectedSubtaskId !== reconciled.selectedSubtaskId;
 
-  const replaceSnapshot = (nextSnapshot) => {
-    store.snapshot = normalizeSnapshot(nextSnapshot);
-    syncState();
-    persist();
-  };
+    state.screen = reconciled.screen;
+    state.selectedEpicId = reconciled.selectedEpicId;
+    state.search = reconciled.search;
+    state.searchQuery = normalizeSearch(reconciled.search).trim().toLowerCase();
+    state.view = reconciled.view;
+    state.selectedTaskId = reconciled.selectedTaskId;
+    state.selectedSubtaskId = reconciled.selectedSubtaskId;
+    if (changed) {
+      notify();
+    }
+    return deriveBoardState(state);
+  }
 
+  // Reconcile initial state
   syncState();
 
   return {
-    store,
+    /** Direct reference to internal state (legacy compatibility). */
+    store: state,
+
+    /**
+     * Get a shallow copy of the current state.
+     * @returns {object}
+     */
+    getState() {
+      return { ...state };
+    },
+
+    /**
+     * Merge a patch into state, notifying subscribers only if a value actually changed.
+     * @param {object} patch
+     */
+    setState(patch) {
+      let changed = false;
+      for (const key of Object.keys(patch)) {
+        if (state[key] !== patch[key]) {
+          state[key] = patch[key];
+          changed = true;
+        }
+      }
+      if (patch.search !== undefined) {
+        state.searchQuery = normalizeSearch(state.search).trim().toLowerCase();
+      }
+      if (changed) {
+        notify();
+      }
+    },
+
+    /**
+     * Register a listener that fires on state changes.
+     * @param {(state: object) => void} listener
+     * @returns {() => void} Unsubscribe function
+     */
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+
+    /**
+     * Get the current normalized snapshot.
+     * @returns {object}
+     */
+    getSnapshot() {
+      return state.snapshot;
+    },
+
+    /**
+     * Get the full derived board state (memoized).
+     * @returns {BoardState}
+     */
+    getBoardState() {
+      return deriveBoardState(state);
+    },
+
+    /**
+     * Find a task by ID in the current snapshot.
+     * @param {string} taskId
+     * @returns {object|null}
+     */
+    getTaskById(taskId) {
+      return state.snapshot.tasks.find((task) => task.id === taskId) ?? null;
+    },
+
+    /**
+     * Find a subtask by ID in the current snapshot.
+     * @param {string} subtaskId
+     * @returns {object|null}
+     */
+    getSubtaskById(subtaskId) {
+      return state.snapshot.subtasks.find((subtask) => subtask.id === subtaskId) ?? null;
+    },
+
+    /**
+     * Replace the snapshot with a new one (e.g. after server response).
+     * @param {object} nextRawSnapshot
+     */
+    replaceSnapshot(nextRawSnapshot) {
+      state.snapshot = normalize(nextRawSnapshot);
+      syncState();
+      persist();
+      notify();
+    },
+
+    /** Persist navigational state to localStorage. */
     persist,
-    getTaskById,
-    getSubtaskById,
-    getBoardState,
-    getSelectedEpic,
-    getSelectedTask,
-    getVisibleTasks,
-    getVisibleEpics,
+
+    /**
+     * Reconcile state with a patch and return derived board state.
+     * @param {object} [patch]
+     * @returns {BoardState}
+     */
     syncState,
-    replaceSnapshot,
+
+    /**
+     * Get visible epics from memoized selector.
+     * @returns {object[]}
+     */
+    getVisibleEpics() {
+      return selectVisibleEpics(state);
+    },
+
+    /**
+     * Get visible tasks from memoized selector.
+     * @returns {object[]}
+     */
+    getVisibleTasks() {
+      return selectVisibleTasks(state);
+    },
+
+    /**
+     * Get selected epic from memoized selector.
+     * @returns {object|null}
+     */
+    getSelectedEpic() {
+      return selectSelectedEpic(state);
+    },
+
+    /**
+     * Get selected task from memoized selector.
+     * @returns {object|null}
+     */
+    getSelectedTask() {
+      return deriveBoardState(state).selectedTask;
+    },
   };
 }