living-ai-documentation 1.0.0

package/dist/src/frontend/new-folder-modal.js

@@ -0,0 +1,169 @@
+// ── New Folder modal ────────────────────────────────────────────────────────
+// Depends on globals from state.js (currentDocId) and documents.js
+// (loadDocuments).
+
+let _newFolderDocsFolder = "";
+let _newFolderBrowseCurrent = null;
+let _newFolderBrowseParent = null;
+let _newFolderSelectedPath = "";
+
+async function openNewFolderModal() {
+  try {
+    const cfg = await fetch("/api/config").then((r) => r.json());
+    _newFolderDocsFolder = cfg.docsFolder || "";
+  } catch {
+    _newFolderDocsFolder = "";
+  }
+
+  // Pre-fill location from currently open document
+  let prefillFolder = "";
+  if (currentDocId) {
+    const decodedId = decodeURIComponent(currentDocId);
+    if (!decodedId.startsWith("/")) {
+      const segments = decodedId.split("/");
+      if (segments.length > 1)
+        prefillFolder = segments.slice(0, -1).join("/");
+    }
+  }
+
+  _newFolderSelectedPath = prefillFolder
+    ? _newFolderDocsFolder + "/" + prefillFolder
+    : _newFolderDocsFolder;
+  _newFolderBrowseCurrent = _newFolderSelectedPath;
+  _newFolderBrowseParent = null;
+
+  document.getElementById("new-folder-name").value = "";
+  document.getElementById("new-folder-location-display").textContent =
+    prefillFolder ? "/" + prefillFolder : "/ (root)";
+  document.getElementById("new-folder-browser").classList.add("hidden");
+  document.getElementById("new-folder-error").classList.add("hidden");
+  const btn = document.getElementById("new-folder-create-btn");
+  btn.disabled = false;
+  btn.textContent = window.t('modal.new_folder.create_btn');
+  newFolderUpdatePreview();
+  document.getElementById("new-folder-modal").classList.remove("hidden");
+  setTimeout(
+    () => document.getElementById("new-folder-name").focus(),
+    50,
+  );
+}
+
+function closeNewFolderModal() {
+  document.getElementById("new-folder-modal").classList.add("hidden");
+}
+
+function newFolderToggleBrowser() {
+  const browser = document.getElementById("new-folder-browser");
+  const isHidden = browser.classList.toggle("hidden");
+  if (!isHidden)
+    newFolderLoadBrowse(_newFolderBrowseCurrent || _newFolderDocsFolder);
+}
+
+async function newFolderLoadBrowse(dirPath) {
+  const list = document.getElementById("new-folder-browse-list");
+  list.innerHTML =
+    `<p class="px-3 py-4 text-xs text-gray-400 text-center">${window.t('common.loading')}</p>`;
+  try {
+    const data = await fetch(
+      "/api/browse?path=" + encodeURIComponent(dirPath),
+    ).then((r) => r.json());
+    _newFolderBrowseCurrent = data.current;
+    _newFolderBrowseParent = data.parent;
+    _newFolderSelectedPath = data.current;
+
+    document.getElementById("new-folder-browse-path").textContent =
+      data.current;
+    const atRoot = data.current === _newFolderDocsFolder;
+    document.getElementById("new-folder-browse-up").disabled = atRoot;
+
+    const rel = data.current.startsWith(_newFolderDocsFolder + "/")
+      ? data.current.slice(_newFolderDocsFolder.length)
+      : data.current === _newFolderDocsFolder
+        ? ""
+        : data.current;
+    document.getElementById("new-folder-location-display").textContent = rel
+      ? rel
+      : "/ (root)";
+    newFolderUpdatePreview();
+
+    list.innerHTML = data.dirs.length
+      ? data.dirs
+          .map(
+            (dir) => `
+          <button data-path="${esc(dir.path)}" onclick="newFolderLoadBrowse(this.dataset.path)"
+            class="w-full flex items-center gap-2 px-3 py-2 text-sm text-left hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
+            <span class="text-gray-400 shrink-0">&#128193;</span>
+            <span class="truncate text-gray-700 dark:text-gray-300">${esc(dir.name)}</span>
+          </button>`,
+          )
+          .join("")
+      : `<p class="px-3 py-3 text-xs text-gray-400 text-center">${window.t('modal.new_folder.no_subfolders')}</p>`;
+  } catch {
+    list.innerHTML =
+      `<p class="px-3 py-3 text-xs text-red-400 text-center">${window.t('modal.new_folder.error_loading')}</p>`;
+  }
+}
+
+function newFolderBrowseUp() {
+  if (_newFolderBrowseParent) newFolderLoadBrowse(_newFolderBrowseParent);
+}
+
+function newFolderUpdatePreview() {
+  const name = document.getElementById("new-folder-name").value.trim();
+  const previewEl = document.getElementById("new-folder-preview");
+  if (!name) {
+    previewEl.textContent = window.t('modal.new_folder.enter_name');
+    return;
+  }
+  const base = _newFolderSelectedPath || _newFolderDocsFolder;
+  const rel = base.startsWith(_newFolderDocsFolder)
+    ? base.slice(_newFolderDocsFolder.length).replace(/^\//, "")
+    : "";
+  previewEl.textContent = (rel ? rel + "/" : "") + name;
+}
+
+async function createNewFolder() {
+  const name = document.getElementById("new-folder-name").value.trim();
+  const errEl = document.getElementById("new-folder-error");
+  errEl.classList.add("hidden");
+
+  if (!name) {
+    errEl.textContent = window.t('modal.new_folder.error_empty');
+    errEl.classList.remove("hidden");
+    return;
+  }
+  if (!/^[a-zA-Z0-9_\-. ]+$/.test(name)) {
+    errEl.textContent = window.t('modal.new_folder.error_invalid_chars');
+    errEl.classList.remove("hidden");
+    return;
+  }
+
+  const base = _newFolderSelectedPath || _newFolderDocsFolder;
+  const atDocsRoot = base === _newFolderDocsFolder;
+  if (atDocsRoot && (name === "files" || name === "images")) {
+    errEl.textContent = window.t('modal.new_folder.error_reserved');
+    errEl.classList.remove("hidden");
+    return;
+  }
+  const fullPath = base.endsWith("/") ? base + name : base + "/" + name;
+
+  const btn = document.getElementById("new-folder-create-btn");
+  btn.disabled = true;
+  btn.textContent = window.t('modal.new_folder.creating_btn');
+
+  try {
+    const res = await fetch("/api/browse/mkdir", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ path: fullPath }),
+    });
+    if (!res.ok) throw new Error(await res.text());
+    closeNewFolderModal();
+    await loadDocuments();
+  } catch (err) {
+    btn.disabled = false;
+    btn.textContent = window.t('modal.new_folder.create_btn');
+    errEl.textContent = window.t('common.error_prefix') + err.message;
+    errEl.classList.remove("hidden");
+  }
+}

package/dist/src/frontend/search.js

@@ -0,0 +1,194 @@
+// ── Search + result highlighting ─────────────────────────────────────────────
+
+let searchTimer = null;
+const METADATA_SEARCH_PREFIX = "metadata://";
+
+function _isMetadataQuery(q) {
+  return typeof q === "string" && q.toLowerCase().startsWith(METADATA_SEARCH_PREFIX);
+}
+
+function setupSearch() {
+  ["header-search", "sidebar-search"].forEach((id) => {
+    const el = document.getElementById(id);
+    if (!el) return;
+    el.addEventListener("input", (e) => {
+      const q = e.target.value.trim();
+      // Sync the other input
+      ["header-search", "sidebar-search"].forEach((oid) => {
+        if (oid !== id) {
+          const other = document.getElementById(oid);
+          if (other) other.value = q;
+        }
+      });
+      clearTimeout(searchTimer);
+      if (!q) {
+        searchQuery = "";
+        searchResults = null;
+        renderSidebar(allDocs);
+        if (window.refreshSearchInCurrentDoc) window.refreshSearchInCurrentDoc();
+        return;
+      }
+      searchQuery = q;
+      if (_isMetadataQuery(q)) {
+        // Title/category can't match a metadata:// query — skip the local
+        // filter and wait for the server response.
+        searchResults = [];
+        renderSidebar([]);
+      } else {
+        // Immediate client-side filter for snappy UX
+        const local = allDocs.filter(
+          (d) =>
+            d.title.toLowerCase().includes(q.toLowerCase()) ||
+            d.category.toLowerCase().includes(q.toLowerCase()),
+        );
+        searchResults = local;
+        renderSidebar(local);
+      }
+      // Refresh highlights inside the currently open doc
+      if (window.refreshSearchInCurrentDoc) window.refreshSearchInCurrentDoc();
+      // Then full-text search from server
+      searchTimer = setTimeout(() => doSearch(q), 350);
+    });
+  });
+}
+
+// Programmatic trigger used by the Files modal after a replace/delete.
+// Fills both search inputs and runs the server search immediately (no debounce).
+function runSearchImmediate(q) {
+  const trimmed = (q || "").trim();
+  ["header-search", "sidebar-search"].forEach((id) => {
+    const el = document.getElementById(id);
+    if (el) el.value = trimmed;
+  });
+  clearTimeout(searchTimer);
+  if (!trimmed) {
+    searchQuery = "";
+    searchResults = null;
+    renderSidebar(allDocs);
+    return;
+  }
+  searchQuery = trimmed;
+  searchResults = [];
+  renderSidebar([]);
+  doSearch(trimmed);
+}
+window.runSearchImmediate = runSearchImmediate;
+
+async function doSearch(q) {
+  try {
+    const results = await fetch(
+      "/api/documents/search?q=" + encodeURIComponent(q),
+    ).then((r) => r.json());
+    if (q !== searchQuery) return;
+    searchResults = results;
+    renderSidebar(results);
+  } catch {
+    /* ignore */
+  }
+}
+
+function highlightMatches(el, q) {
+  const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
+  const nodes = [];
+  while (walker.nextNode()) nodes.push(walker.currentNode);
+  const re = new RegExp(
+    `(${q.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")})`,
+    "gi",
+  );
+  let idx = 0;
+  nodes.forEach((node) => {
+    if (!node.textContent.toLowerCase().includes(q.toLowerCase())) return;
+    const span = document.createElement("span");
+    span.innerHTML = node.textContent.replace(
+      re,
+      (m) => `<mark id="match-${idx++}">${m}</mark>`,
+    );
+    node.parentNode.replaceChild(span, node);
+  });
+  // Build snippet list from inserted marks
+  const matches = [];
+  el.querySelectorAll("mark[id^='match-']").forEach((mark) => {
+    const block =
+      mark.closest("p, li, td, h1, h2, h3, h4, h5, h6, pre") ||
+      mark.parentElement;
+    const full = block.textContent.trim();
+    const pos = full.toLowerCase().indexOf(q.toLowerCase());
+    const start = Math.max(0, pos - 40);
+    const end = Math.min(full.length, pos + q.length + 40);
+    const snippet =
+      (start > 0 ? "…" : "") +
+      full.slice(start, end) +
+      (end < full.length ? "…" : "");
+    matches.push({ id: mark.id, snippet });
+  });
+  return matches;
+}
+
+function buildSearchNotice(matches, q) {
+  document.getElementById("search-notice-title").textContent =
+    window.t(matches.length === 1 ? 'search.notice_singular' : 'search.notice_plural')
+    .replace('{count}', matches.length).replace('{query}', q);
+  const list = document.getElementById("search-notice-list");
+  list.innerHTML = matches
+    .map(
+      (m, i) =>
+        `<li>
+      <button onclick="scrollToMatch('${m.id}')" data-match-id="${m.id}"
+        class="w-full text-left px-3 py-1.5 hover:bg-yellow-100 dark:hover:bg-yellow-900/30 transition-colors">
+        <span class="text-yellow-600 dark:text-yellow-500 font-mono text-xs mr-2">${i + 1}.</span
+        ><span class="text-xs">${esc(m.snippet)}</span>
+      </button>
+    </li>`,
+    )
+    .join("");
+}
+
+function scrollToAnchor(anchorId) {
+  const container = document.getElementById("content-area");
+  const target = document.getElementById(anchorId);
+  if (!container || !target) return;
+  const stickyHeader = document.querySelector("#doc-view header");
+  const headerHeight = stickyHeader
+    ? stickyHeader.getBoundingClientRect().height
+    : 0;
+  const targetTop = target.getBoundingClientRect().top;
+  const containerTop = container.getBoundingClientRect().top;
+  container.scrollTop += targetTop - containerTop - headerHeight - 8;
+}
+
+function scrollToMatch(id) {
+  const mark = document.getElementById(id);
+  const container = document.getElementById("content-area");
+  if (!mark || !container) return;
+
+  // Open any collapsed <details> ancestors so the match is visible
+  let ancestor = mark.parentElement;
+  while (ancestor && ancestor !== container) {
+    if (ancestor.tagName === "DETAILS" && !ancestor.open) {
+      ancestor.open = true;
+    }
+    ancestor = ancestor.parentElement;
+  }
+
+  // Orange on the active mark, yellow on the rest
+  document
+    .querySelectorAll("mark.match-active")
+    .forEach((m) => m.classList.remove("match-active"));
+  mark.classList.add("match-active");
+
+  // Highlight active list item
+  document.querySelectorAll("#search-notice-list button").forEach((b) => {
+    b.classList.toggle("bg-orange-100", b.dataset.matchId === id);
+    b.classList.toggle("dark:bg-orange-900/30", b.dataset.matchId === id);
+  });
+
+  const stickyHeader = document.querySelector("#doc-view header");
+  const headerHeight = stickyHeader
+    ? stickyHeader.getBoundingClientRect().height
+    : 0;
+  const markTop = mark.getBoundingClientRect().top;
+  const containerTop = container.getBoundingClientRect().top;
+  const targetOffset =
+    headerHeight + (container.clientHeight - headerHeight) / 3;
+  container.scrollTop += markTop - containerTop - targetOffset;
+}