living-ai-documentation 1.0.0

package/dist/src/frontend/metadata.js

@@ -0,0 +1,318 @@
+// ── Metadata (source-file dependencies) ─────────────────────────────────────
+// Exposes: openMetadataModal(), closeMetadataModal(),
+//          metadataRefresh(), metadataAddPath(), metadataRemovePath(),
+//          loadMetadataReport(docId) → used by accuracy-gauge.js
+
+let metadataReport = null;
+let metadataBrowseCurrent = ""; // relative to sourceRoot
+let metadataBrowseCache = null;
+
+function metadataCurrentDocId() {
+  return typeof currentDocId !== "undefined" ? currentDocId : null;
+}
+
+async function loadMetadataReport(docId) {
+  if (!docId) {
+    metadataReport = null;
+    return null;
+  }
+  try {
+    const r = await fetch(
+      "/api/metadata/" + encodeURIComponent(docId),
+    );
+    if (!r.ok) throw new Error(r.statusText);
+    metadataReport = await r.json();
+  } catch {
+    metadataReport = null;
+  }
+  if (typeof renderAccuracyGauge === "function") {
+    renderAccuracyGauge(metadataReport);
+  }
+  return metadataReport;
+}
+
+function statusBadge(status) {
+  if (status === "unchanged") {
+    return `<span class="inline-flex items-center gap-1 text-xs font-semibold px-2 py-0.5 rounded-full bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300">
+      <i class="fa-solid fa-check"></i>
+      <span data-i18n="metadata.status.unchanged">Unchanged</span>
+    </span>`;
+  }
+  if (status === "modified") {
+    return `<span class="inline-flex items-center gap-1 text-xs font-semibold px-2 py-0.5 rounded-full bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300">
+      <i class="fa-solid fa-triangle-exclamation"></i>
+      <span data-i18n="metadata.status.modified">Modified</span>
+    </span>`;
+  }
+  return `<span class="inline-flex items-center gap-1 text-xs font-semibold px-2 py-0.5 rounded-full bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300">
+    <i class="fa-solid fa-circle-xmark"></i>
+    <span data-i18n="metadata.status.missing">Missing</span>
+  </span>`;
+}
+
+function renderMetadataList() {
+  const listEl = document.getElementById("metadata-list");
+  const emptyEl = document.getElementById("metadata-empty");
+  if (!listEl || !emptyEl) return;
+
+  const items = (metadataReport && metadataReport.items) || [];
+  if (items.length === 0) {
+    listEl.innerHTML = "";
+    emptyEl.classList.remove("hidden");
+    return;
+  }
+  emptyEl.classList.add("hidden");
+
+  listEl.innerHTML = items
+    .map((it) => {
+      const safePath = esc(it.path);
+      return `<div class="flex items-center gap-2 px-3 py-2 border-b border-gray-100 dark:border-gray-800">
+        <div class="flex-1 min-w-0">
+          <div class="text-sm font-mono truncate text-gray-800 dark:text-gray-200" title="${safePath}">${safePath}</div>
+        </div>
+        ${statusBadge(it.status)}
+        <button
+          onclick="metadataRemovePath('${safePath.replace(/'/g, "\\'")}')"
+          data-i18n-title="metadata.remove"
+          title="Remove"
+          class="metadata-row-remove text-xs px-2 py-1 rounded-lg border border-red-200 dark:border-red-700 text-red-500 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/40 transition-colors"
+        >
+          <i class="fa-solid fa-trash"></i>
+        </button>
+      </div>`;
+    })
+    .join("");
+
+  if (typeof window.applyI18n === "function") window.applyI18n();
+  applyMetadataReadOnlyMode();
+}
+
+// Hide the three metadata-mutation controls (and the row-level trash icons)
+// when the current document's frontmatter status is `SuperSeeded`. The server
+// also rejects these mutations independently — this is purely UX. Re-applied
+// after every list re-render so dynamically generated rows stay consistent.
+function applyMetadataReadOnlyMode() {
+  const readOnly =
+    typeof window.getDocStatus === "function" &&
+    window.getDocStatus(
+      typeof currentDocContent !== "undefined" ? currentDocContent : "",
+    ) === "SuperSeeded";
+
+  const refreshBtn = document.getElementById("metadata-refresh-btn");
+  const addBtn = document.getElementById("metadata-add-btn");
+  const banner = document.getElementById("metadata-readonly-banner");
+  if (refreshBtn) refreshBtn.classList.toggle("hidden", readOnly);
+  if (addBtn) addBtn.classList.toggle("hidden", readOnly);
+  if (banner) banner.classList.toggle("hidden", !readOnly);
+  document
+    .querySelectorAll("#metadata-list .metadata-row-remove")
+    .forEach((el) => el.classList.toggle("hidden", readOnly));
+}
+
+window.applyMetadataReadOnlyMode = applyMetadataReadOnlyMode;
+
+function renderMetadataSummary() {
+  const el = document.getElementById("metadata-summary");
+  if (!el) return;
+  if (!metadataReport || metadataReport.total === 0) {
+    el.textContent = "";
+    return;
+  }
+  const pct = Math.round(metadataReport.accuracy * 100);
+  const { total, unchanged, modified, missing } = metadataReport;
+  el.innerHTML = `<span class="font-semibold">${pct}%</span> · ${unchanged}/${total} ${window.t("metadata.status.unchanged")} · ${modified} ${window.t("metadata.status.modified")} · ${missing} ${window.t("metadata.status.missing")}`;
+}
+
+async function openMetadataModal() {
+  const docId = metadataCurrentDocId();
+  if (!docId) return;
+  await loadMetadataReport(docId);
+  renderMetadataList();
+  renderMetadataSummary();
+  document.getElementById("metadata-modal").classList.remove("hidden");
+  document.getElementById("metadata-error").classList.add("hidden");
+  // Reset browser
+  metadataBrowseCurrent = "";
+  metadataBrowseCache = null;
+  document.getElementById("metadata-browser").classList.add("hidden");
+  applyMetadataReadOnlyMode();
+}
+
+function closeMetadataModal() {
+  document.getElementById("metadata-modal").classList.add("hidden");
+}
+
+async function metadataRefresh() {
+  const docId = metadataCurrentDocId();
+  if (!docId) return;
+  const btn = document.getElementById("metadata-refresh-btn");
+  if (btn) btn.disabled = true;
+  try {
+    const r = await fetch(
+      "/api/metadata/" + encodeURIComponent(docId) + "/refresh",
+      { method: "POST" },
+    );
+    if (!r.ok) throw new Error(r.statusText);
+    metadataReport = await r.json();
+    renderMetadataList();
+    renderMetadataSummary();
+    if (typeof renderAccuracyGauge === "function") {
+      renderAccuracyGauge(metadataReport);
+    }
+  } catch (err) {
+    showMetadataError(err.message);
+  } finally {
+    if (btn) btn.disabled = false;
+  }
+}
+
+async function metadataRemovePath(path) {
+  const docId = metadataCurrentDocId();
+  if (!docId) return;
+  try {
+    const r = await fetch(
+      "/api/metadata/" + encodeURIComponent(docId),
+      {
+        method: "DELETE",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ path }),
+      },
+    );
+    if (!r.ok) throw new Error(r.statusText);
+    metadataReport = await r.json();
+    renderMetadataList();
+    renderMetadataSummary();
+    if (typeof renderAccuracyGauge === "function") {
+      renderAccuracyGauge(metadataReport);
+    }
+    refreshBrowserIfOpen();
+  } catch (err) {
+    showMetadataError(err.message);
+  }
+}
+
+async function metadataAddPath(relPath) {
+  const docId = metadataCurrentDocId();
+  if (!docId) return;
+  try {
+    const r = await fetch(
+      "/api/metadata/" + encodeURIComponent(docId),
+      {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ path: relPath }),
+      },
+    );
+    if (!r.ok) {
+      const body = await r.json().catch(() => ({}));
+      throw new Error(body.error || r.statusText);
+    }
+    metadataReport = await r.json();
+    renderMetadataList();
+    renderMetadataSummary();
+    if (typeof renderAccuracyGauge === "function") {
+      renderAccuracyGauge(metadataReport);
+    }
+    refreshBrowserIfOpen();
+  } catch (err) {
+    showMetadataError(err.message);
+  }
+}
+
+function refreshBrowserIfOpen() {
+  const b = document.getElementById("metadata-browser");
+  if (b && !b.classList.contains("hidden")) {
+    metadataBrowseLoad(metadataBrowseCurrent);
+  }
+}
+
+function showMetadataError(msg) {
+  const el = document.getElementById("metadata-error");
+  if (!el) return;
+  el.textContent = window.t("common.error_prefix") + msg;
+  el.classList.remove("hidden");
+  setTimeout(() => el.classList.add("hidden"), 5000);
+}
+
+// ── Source browser ─────────────────────────────────────────────────────────
+
+function metadataToggleBrowser() {
+  const b = document.getElementById("metadata-browser");
+  if (b.classList.contains("hidden")) {
+    b.classList.remove("hidden");
+    metadataBrowseLoad("");
+  } else {
+    b.classList.add("hidden");
+  }
+}
+
+async function metadataBrowseLoad(relPath) {
+  const listEl = document.getElementById("metadata-browse-list");
+  const pathEl = document.getElementById("metadata-browse-path");
+  const upBtn = document.getElementById("metadata-browse-up");
+  if (!listEl) return;
+  listEl.innerHTML = `<div class="px-3 py-2 text-xs text-gray-400">${esc(window.t("common.loading"))}</div>`;
+  try {
+    const r = await fetch(
+      "/api/browse-source?path=" + encodeURIComponent(relPath || ""),
+    );
+    if (!r.ok) {
+      const body = await r.json().catch(() => ({}));
+      throw new Error(body.error || r.statusText);
+    }
+    const data = await r.json();
+    metadataBrowseCache = data;
+    metadataBrowseCurrent = data.current || "";
+    pathEl.textContent = data.current ? "/" + data.current : "/ (sourceRoot)";
+    upBtn.disabled = data.parent === null;
+    upBtn.classList.toggle("opacity-30", data.parent === null);
+    upBtn.classList.toggle("pointer-events-none", data.parent === null);
+
+    const dirRows = data.dirs.map(
+      (d) => `<button
+        onclick="metadataBrowseLoad('${d.path.replace(/'/g, "\\'")}')"
+        class="w-full text-left px-3 py-1.5 text-sm hover:bg-gray-50 dark:hover:bg-gray-800 flex items-center gap-2"
+      >
+        <i class="fa-solid fa-folder text-yellow-500"></i>
+        <span class="truncate">${esc(d.name)}</span>
+      </button>`,
+    );
+    const attached = new Set(
+      ((metadataReport && metadataReport.items) || []).map((it) => it.path),
+    );
+    const fileRows = data.files
+      .filter((f) => !attached.has(f.path))
+      .map(
+        (f) => `<button
+        onclick="metadataAddPath('${f.path.replace(/'/g, "\\'")}')"
+        class="w-full text-left px-3 py-1.5 text-sm hover:bg-blue-50 dark:hover:bg-blue-900/30 flex items-center gap-2"
+      >
+        <i class="fa-solid fa-file text-gray-400"></i>
+        <span class="truncate">${esc(f.name)}</span>
+        <i class="fa-solid fa-plus ml-auto text-blue-500 text-xs"></i>
+      </button>`,
+      );
+    const rows = [...dirRows, ...fileRows];
+    listEl.innerHTML = rows.length
+      ? rows.join("")
+      : `<div class="px-3 py-2 text-xs text-gray-400" data-i18n="common.empty_dir">${esc(window.t("common.empty_dir"))}</div>`;
+  } catch (err) {
+    listEl.innerHTML = `<div class="px-3 py-2 text-xs text-red-500">${esc(err.message)}</div>`;
+  }
+}
+
+function metadataBrowseUp() {
+  if (!metadataBrowseCache || metadataBrowseCache.parent === null) return;
+  metadataBrowseLoad(metadataBrowseCache.parent);
+}
+
+// Expose
+window.openMetadataModal = openMetadataModal;
+window.closeMetadataModal = closeMetadataModal;
+window.metadataRefresh = metadataRefresh;
+window.metadataRemovePath = metadataRemovePath;
+window.metadataAddPath = metadataAddPath;
+window.metadataToggleBrowser = metadataToggleBrowser;
+window.metadataBrowseLoad = metadataBrowseLoad;
+window.metadataBrowseUp = metadataBrowseUp;
+window.loadMetadataReport = loadMetadataReport;

package/dist/src/frontend/misc.js

@@ -0,0 +1,92 @@
+// ── Misc viewer helpers ─────────────────────────────────────────────────────
+
+const DOC_ID_COPY_FEEDBACK_MS = 1800;
+
+async function writeClipboardText(text) {
+  try {
+    await navigator.clipboard.writeText(text);
+    return true;
+  } catch {
+    const ta = document.createElement("textarea");
+    ta.value = text;
+    ta.style.position = "fixed";
+    ta.style.opacity = "0";
+    document.body.appendChild(ta);
+    ta.select();
+    let copied = false;
+    try {
+      copied = document.execCommand("copy");
+    } catch {
+      copied = false;
+    }
+    document.body.removeChild(ta);
+    return copied;
+  }
+}
+
+function applyFullWidthState(isWide) {
+  const article = document.getElementById("doc-view");
+  const btn = document.getElementById("full-width-btn");
+  if (!article || !btn) return;
+  article.classList.toggle("max-w-none", isWide);
+  article.classList.toggle("max-w-4xl", !isWide);
+  article.classList.toggle("mx-auto", !isWide);
+  btn.textContent = isWide ? window.t('doc.full_width_narrow_btn') : window.t('doc.full_width_btn');
+}
+
+function toggleFullWidth() {
+  const article = document.getElementById("doc-view");
+  const isWide = !article.classList.contains("max-w-none");
+  applyFullWidthState(isWide);
+  try {
+    localStorage.setItem("ld-full-width", isWide ? "1" : "0");
+  } catch {
+    /* ignore */
+  }
+}
+
+function initFullWidthState() {
+  let isWide = false;
+  try {
+    isWide = localStorage.getItem("ld-full-width") === "1";
+  } catch {
+    /* ignore */
+  }
+  applyFullWidthState(isWide);
+}
+
+async function copyLink() {
+  const copied = await writeClipboardText(location.href);
+  if (!copied) return;
+  const btn = document.getElementById("copy-link-btn");
+  const orig = btn.innerHTML;
+  btn.textContent = window.t('doc.copied');
+  setTimeout(() => {
+    btn.innerHTML = orig;
+  }, DOC_ID_COPY_FEEDBACK_MS);
+}
+
+async function copyCurrentDocMcpId() {
+  if (!currentDocId) return;
+  const btn = document.getElementById("copy-doc-id-btn");
+  if (!btn) return;
+  const copyLabel = window.t("doc.copy_mcp_id");
+  const copiedLabel = window.t("doc.copy_mcp_id_copied");
+  const originalHtml = btn.innerHTML;
+  const docId = decodeURIComponent(currentDocId);
+  const copied = await writeClipboardText(docId);
+  if (!copied) return;
+
+  btn.title = copiedLabel;
+  btn.classList.add("text-green-600", "dark:text-green-400");
+  btn.innerHTML = '<i class="fa-solid fa-check" aria-hidden="true"></i>';
+  setTimeout(() => {
+    btn.title = copyLabel;
+    btn.classList.remove("text-green-600", "dark:text-green-400");
+    btn.innerHTML = originalHtml;
+  }, DOC_ID_COPY_FEEDBACK_MS);
+}
+
+function exportPDF() {
+  window.print();
+}

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

@@ -0,0 +1,285 @@
+// ── New Document modal ──────────────────────────────────────────────────────
+// Depends on globals from state.js (currentDocId, allDocs), documents.js
+// (loadDocuments, openDocument) and utils.js (esc).
+
+let _newDocBrowseCurrent = null;
+let _newDocBrowseParent = null;
+let _newDocSelectedFolder = "";
+let _newDocDocsFolder = "";
+let _newDocPattern = "YYYY_MM_DD_HH_mm_[Category]_title";
+
+function newDocNormalizeCategory(raw) {
+  return (raw || "")
+    .normalize("NFD")
+    .replace(/[\u0300-\u036f]/g, "")
+    .toUpperCase()
+    .replace(/[^A-Z0-9_-]/g, "");
+}
+
+function newDocSanitizeCategoryInput() {
+  const input = document.getElementById("new-doc-category");
+  const normalized = newDocNormalizeCategory(input.value);
+  if (input.value !== normalized) input.value = normalized;
+  newDocUpdatePreview();
+}
+
+function newDocPopulateCategoryOptions() {
+  const list = document.getElementById("new-doc-category-options");
+  if (!list) return;
+  const seen = new Set();
+  (allDocs || []).forEach((d) => {
+    const cat = newDocNormalizeCategory(d.category || "");
+    if (cat) seen.add(cat);
+  });
+  const sorted = Array.from(seen).sort((a, b) => a.localeCompare(b));
+  list.innerHTML = sorted
+    .map((cat) => `<option value="${esc(cat)}"></option>`)
+    .join("");
+}
+
+async function openNewDocModal() {
+  try {
+    const cfg = await fetch("/api/config").then((r) => r.json());
+    _newDocDocsFolder = cfg.docsFolder || "";
+    _newDocPattern =
+      cfg.filenamePattern || "YYYY_MM_DD_HH_mm_[Category]_title";
+  } catch {
+    _newDocDocsFolder = "";
+    _newDocPattern = "YYYY_MM_DD_HH_mm_[Category]_title";
+  }
+  // Pre-fill from currently open document if any
+  const currentDoc =
+    currentDocId && allDocs.find((d) => d.id === currentDocId);
+  const prefillCategory =
+    newDocNormalizeCategory(
+      (currentDoc && currentDoc.category) || "General",
+    ) || "GENERAL";
+  // Derive folder from currentDocId (encoded relative path, e.g. "1_tutorial%2Fsome_file")
+  // For extra files (absolute paths), skip.
+  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("/");
+      }
+    }
+  }
+  const prefillFolderAbs = prefillFolder
+    ? _newDocDocsFolder + "/" + prefillFolder
+    : "";
+
+  _newDocSelectedFolder = prefillFolder;
+  _newDocBrowseCurrent = prefillFolderAbs || null;
+  _newDocBrowseParent = null;
+  newDocPopulateCategoryOptions();
+  document.getElementById("new-doc-title").value = "";
+  document.getElementById("new-doc-category").value = prefillCategory;
+  document.getElementById("new-doc-folder-display").textContent =
+    prefillFolder ? "/" + prefillFolder : "/ (root)";
+  document.getElementById("new-doc-browser").classList.add("hidden");
+  document.getElementById("new-doc-new-folder-name").value = "";
+  document.getElementById("new-doc-error").classList.add("hidden");
+  const createBtn = document.getElementById("new-doc-create-btn");
+  createBtn.disabled = false;
+  createBtn.textContent = window.t('common.create');
+  newDocUpdatePreview();
+  document.getElementById("new-doc-modal").classList.remove("hidden");
+  setTimeout(() => document.getElementById("new-doc-title").focus(), 50);
+}
+
+function closeNewDocModal() {
+  document.getElementById("new-doc-modal").classList.add("hidden");
+}
+
+function newDocToggleBrowser() {
+  const browser = document.getElementById("new-doc-browser");
+  const isHidden = browser.classList.toggle("hidden");
+  if (!isHidden)
+    newDocLoadBrowse(_newDocBrowseCurrent || _newDocDocsFolder);
+}
+
+async function newDocLoadBrowse(dirPath) {
+  const list = document.getElementById("new-doc-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());
+    _newDocBrowseCurrent = data.current;
+    _newDocBrowseParent = data.parent;
+    _newDocSelectedFolder = _newDocAbsToRel(data.current);
+
+    document.getElementById("new-doc-browse-path").textContent =
+      data.current;
+    const atRoot = data.current === _newDocDocsFolder;
+    document.getElementById("new-doc-browse-up").disabled = atRoot;
+    document.getElementById("new-doc-folder-display").textContent =
+      _newDocSelectedFolder ? "/" + _newDocSelectedFolder : "/ (root)";
+    newDocUpdatePreview();
+
+    list.innerHTML = data.dirs.length
+      ? data.dirs
+          .map(
+            (dir) => `
+          <button data-path="${esc(dir.path)}" onclick="newDocLoadBrowse(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="text-gray-700 dark:text-gray-300 truncate">${esc(dir.name)}</span>
+          </button>`,
+          )
+          .join("")
+      : `<p class="px-3 py-3 text-xs text-gray-400 text-center">${window.t('modal.new_doc.no_subfolders')}</p>`;
+  } catch {
+    list.innerHTML =
+      `<p class="px-3 py-4 text-xs text-red-400 text-center">${window.t('common.cannot_read_dir')}</p>`;
+  }
+}
+
+function newDocBrowseUp() {
+  if (_newDocBrowseCurrent !== _newDocDocsFolder && _newDocBrowseParent) {
+    newDocLoadBrowse(_newDocBrowseParent);
+  }
+}
+
+function _newDocAbsToRel(absPath) {
+  const base = _newDocDocsFolder;
+  if (absPath === base) return "";
+  if (absPath.startsWith(base + "/"))
+    return absPath.slice(base.length + 1);
+  return absPath;
+}
+
+function newDocCreateFolder() {
+  const name = document
+    .getElementById("new-doc-new-folder-name")
+    .value.trim();
+  if (!name) return;
+  const parent = _newDocBrowseCurrent || _newDocDocsFolder;
+  const atDocsRoot = parent === _newDocDocsFolder;
+  const errEl = document.getElementById("new-doc-error");
+  if (atDocsRoot && (name === "files" || name === "images")) {
+    if (errEl) {
+      errEl.textContent = window.t("modal.new_folder.error_reserved");
+      errEl.classList.remove("hidden");
+    }
+    return;
+  }
+  if (errEl) errEl.classList.add("hidden");
+  const newRelPath =
+    (_newDocAbsToRel(parent) ? _newDocAbsToRel(parent) + "/" : "") + name;
+  _newDocSelectedFolder = newRelPath;
+  document.getElementById("new-doc-folder-display").textContent =
+    "/" + newRelPath;
+  document.getElementById("new-doc-new-folder-name").value = "";
+  newDocUpdatePreview();
+}
+
+function newDocUpdatePreview() {
+  const title = document.getElementById("new-doc-title").value.trim();
+  const category =
+    newDocNormalizeCategory(
+      document.getElementById("new-doc-category").value,
+    ) || "GENERAL";
+  const previewEl = document.getElementById("new-doc-filename-preview");
+
+  if (!title) {
+    previewEl.textContent = window.t('modal.new_doc.title_placeholder');
+    return;
+  }
+
+  const now = new Date();
+  const year = now.getFullYear();
+  const month = String(now.getMonth() + 1).padStart(2, "0");
+  const day = String(now.getDate()).padStart(2, "0");
+  const hours = String(now.getHours()).padStart(2, "0");
+  const minutes = String(now.getMinutes()).padStart(2, "0");
+  const titleSlug =
+    title
+      .toLowerCase()
+      .replace(/\s+/g, "_")
+      .replace(/[^a-z0-9_]/g, "")
+      .replace(/_+/g, "_")
+      .replace(/^_|_$/g, "") || "document";
+
+  const filename =
+    _newDocPattern
+      .replace("YYYY", year)
+      .replace("MM", month)
+      .replace("DD", day)
+      .replace("HH", hours)
+      .replace("mm", minutes)
+      .replace(/\[Category\]/i, `[${category}]`)
+      .replace(
+        /(?<![a-z0-9])(?:title_words|title)(?![a-z0-9])/i,
+        titleSlug,
+      ) + ".md";
+
+  previewEl.textContent = _newDocSelectedFolder
+    ? _newDocSelectedFolder + "/" + filename
+    : filename;
+}
+
+async function createNewDocument() {
+  const title = document.getElementById("new-doc-title").value.trim();
+  const category =
+    newDocNormalizeCategory(
+      document.getElementById("new-doc-category").value,
+    ) || "GENERAL";
+  const errorEl = document.getElementById("new-doc-error");
+  const btn = document.getElementById("new-doc-create-btn");
+
+  if (!title) {
+    errorEl.textContent = window.t('modal.new_doc.error_empty_title');
+    errorEl.classList.remove("hidden");
+    return;
+  }
+
+  errorEl.classList.add("hidden");
+  btn.disabled = true;
+  btn.textContent = window.t('modal.new_folder.creating_btn');
+
+  try {
+    const res = await fetch("/api/documents", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        title,
+        category,
+        folder: _newDocSelectedFolder,
+      }),
+    });
+
+    if (!res.ok) {
+      const data = await res.json();
+      throw new Error(data.error || "Creation failed");
+    }
+
+    const doc = await res.json();
+    closeNewDocModal();
+    await loadDocuments();
+    openDocument(doc.id);
+  } catch (err) {
+    errorEl.textContent = window.t('common.error_prefix') + err.message;
+    errorEl.classList.remove("hidden");
+    btn.disabled = false;
+    btn.textContent = window.t('common.create');
+  }
+}
+
+// Allow Enter key in title/category to submit
+document.addEventListener("DOMContentLoaded", () => {
+  ["new-doc-title", "new-doc-category"].forEach((id) => {
+    document.getElementById(id)?.addEventListener("keydown", (e) => {
+      if (e.key === "Enter") createNewDocument();
+      if (e.key === "Escape") closeNewDocModal();
+    });
+  });
+  document
+    .getElementById("new-doc-new-folder-name")
+    ?.addEventListener("keydown", (e) => {
+      if (e.key === "Enter") newDocCreateFolder();
+    });
+});