pediatric-ai-scribe-v3/public/js/admin-docs.js

// ============================================================
// admin-docs.js — admin-only docs viewer.
//
// Lazy-loads /api/admin/docs/tree once on first tab activation,
// renders a collapsible file tree in the sidebar. Clicking a .md
// node fetches /api/admin/docs/file?path=X and renders the
// pre-sanitised HTML returned by the server (server uses `marked`).
//
// The route is gated to role=admin server-side. The sidebar tab
// button (#docs-tab-btn) is hidden by default and revealed by
// auth.js after login when user.role === 'admin'.
// ============================================================

(function () {
  'use strict';

  var _inited = false;
  var _treeLoaded = false;
  var _tree = [];
  var _flatFiles = [];   // flat list of {name, path, parent} for filter
  var _expanded = {};    // map of dir-path → bool, persisted in UIState

  function $(id) { return document.getElementById(id); }
  function escHtml(s) { return String(s == null ? '' : s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;'); }

  // Pretty label from a file/dir basename. Drops .md, replaces dashes
  // with spaces, title-cases the first letter of each word. README is
  // shown as "Index" so the entry-point doc is more obvious in the tree.
  function prettyName(name, isDir) {
    if (!isDir && /^readme\.md$/i.test(name)) return 'Index';
    var base = name.replace(/\.md$/i, '');
    return base.replace(/-/g, ' ').replace(/\b\w/g, function (c) { return c.toUpperCase(); });
  }

  // Recursively render the tree into HTML.
  function renderNode(node, depth) {
    if (node.type === 'dir') {
      var open = _expanded[node.path] !== false; // default open
      var arrow = open ? 'fa-chevron-down' : 'fa-chevron-right';
      var label = prettyName(node.name, true);
      var html =
        '<div class="docs-node docs-dir" data-path="' + escHtml(node.path) + '" style="--depth:' + depth + ';">' +
          '<button type="button" class="docs-dir-toggle" data-toggle="' + escHtml(node.path) + '">' +
            '<i class="fas ' + arrow + ' docs-arrow"></i>' +
            '<i class="fas fa-folder docs-icon"></i>' +
            '<span class="docs-label">' + escHtml(label) + '</span>' +
          '</button>' +
          '<div class="docs-children" ' + (open ? '' : 'hidden') + '>' +
            (node.children || []).map(function (c) { return renderNode(c, depth + 1); }).join('') +
          '</div>' +
        '</div>';
      return html;
    }
    // File node
    return '<div class="docs-node docs-file" data-path="' + escHtml(node.path) + '" style="--depth:' + depth + ';">' +
      '<button type="button" class="docs-file-btn" data-file="' + escHtml(node.path) + '" title="' + escHtml(node.path) + '">' +
        '<i class="fas fa-file-lines docs-icon"></i>' +
        '<span class="docs-label">' + escHtml(prettyName(node.name, false)) + '</span>' +
      '</button>' +
    '</div>';
  }

  // Flatten the tree into _flatFiles for the filter to search across.
  function flatten(nodes, parentLabel) {
    nodes.forEach(function (n) {
      if (n.type === 'dir') {
        flatten(n.children || [], (parentLabel ? parentLabel + ' / ' : '') + prettyName(n.name, true));
      } else {
        _flatFiles.push({
          name: prettyName(n.name, false),
          path: n.path,
          parent: parentLabel || ''
        });
      }
    });
  }

  function renderTree() {
    var host = $('docs-tree');
    if (!host) return;
    if (!_tree.length) {
      host.innerHTML = '<div class="docs-empty">No docs found.</div>';
      return;
    }
    host.innerHTML = _tree.map(function (n) { return renderNode(n, 0); }).join('');
  }

  function renderFilterResults(q) {
    var host = $('docs-tree');
    if (!host) return;
    var lc = q.toLowerCase();
    var matches = _flatFiles.filter(function (f) {
      return f.name.toLowerCase().indexOf(lc) !== -1
          || f.path.toLowerCase().indexOf(lc) !== -1
          || f.parent.toLowerCase().indexOf(lc) !== -1;
    });
    if (matches.length === 0) {
      host.innerHTML = '<div class="docs-empty">No matches for "' + escHtml(q) + '".</div>';
      return;
    }
    host.innerHTML = matches.map(function (f) {
      var parent = f.parent ? '<span class="docs-file-parent">' + escHtml(f.parent) + '</span>' : '';
      return '<div class="docs-node docs-file" data-path="' + escHtml(f.path) + '" style="--depth:0;">' +
        '<button type="button" class="docs-file-btn" data-file="' + escHtml(f.path) + '" title="' + escHtml(f.path) + '">' +
          '<i class="fas fa-file-lines docs-icon"></i>' +
          '<span class="docs-label">' + escHtml(f.name) + '</span>' +
          parent +
        '</button>' +
      '</div>';
    }).join('');
  }

  function loadTree() {
    if (_treeLoaded) return;
    fetch('/api/admin/docs/tree', { headers: getAuthHeaders() })
      .then(function (r) { return r.json(); })
      .then(function (data) {
        if (!data || !data.success) {
          $('docs-tree').innerHTML = '<div class="docs-empty">' + escHtml((data && data.error) || 'Tree load failed') + '</div>';
          return;
        }
        _tree = data.tree || [];
        _flatFiles = [];
        flatten(_tree, '');
        // Restore expanded state from UIState before render
        try {
          var saved = window.UIState && window.UIState.get('docs.expanded');
          if (saved) _expanded = JSON.parse(saved);
        } catch (e) {}
        renderTree();
        _treeLoaded = true;
        // Auto-load the top README if available, else the first file
        var first = _flatFiles[0];
        if (first) {
          var savedPath = (window.UIState && window.UIState.get('docs.lastPath')) || first.path;
          loadFile(savedPath);
          markActive(savedPath);
        }
      })
      .catch(function (err) {
        $('docs-tree').innerHTML = '<div class="docs-empty">Tree load failed: ' + escHtml(err.message || String(err)) + '</div>';
      });
  }

  function loadFile(relPath) {
    var body = $('docs-reader-body');
    var meta = $('docs-reader-meta');
    if (!body) return;
    body.innerHTML = '<div class="docs-loading">Loading…</div>';
    fetch('/api/admin/docs/file?path=' + encodeURIComponent(relPath), { headers: getAuthHeaders() })
      .then(function (r) { return r.json(); })
      .then(function (data) {
        if (!data || !data.success) {
          body.innerHTML = '<p style="color:var(--red);">' + escHtml((data && data.error) || 'Load failed') + '</p>';
          return;
        }
        body.innerHTML = data.html || '';
        if (meta) {
          meta.textContent = relPath + '   •   ' + (data.bytes != null ? (data.bytes + ' bytes') : '');
        }
        // Persist last opened
        if (window.UIState) window.UIState.set('docs.lastPath', relPath);
        // Scroll content area to top so deep-link readers don't land mid-doc
        var reader = $('docs-reader');
        if (reader) reader.scrollTop = 0;
      })
      .catch(function (err) {
        body.innerHTML = '<p style="color:var(--red);">' + escHtml(err.message || String(err)) + '</p>';
      });
  }

  function markActive(relPath) {
    document.querySelectorAll('.docs-file-btn').forEach(function (b) {
      b.classList.toggle('active', b.dataset.file === relPath);
    });
  }

  function persistExpanded() {
    if (!window.UIState) return;
    try { window.UIState.set('docs.expanded', JSON.stringify(_expanded)); } catch (e) {}
  }

  // ── Wire events ────────────────────────────────────────────────────
  function init() {
    document.addEventListener('click', function (e) {
      var fileBtn = e.target.closest('.docs-file-btn');
      if (fileBtn) {
        var p = fileBtn.dataset.file;
        if (p) { loadFile(p); markActive(p); }
        return;
      }
      var dirToggle = e.target.closest('.docs-dir-toggle');
      if (dirToggle) {
        var dir = dirToggle.dataset.toggle;
        var node = dirToggle.closest('.docs-dir');
        var children = node && node.querySelector('.docs-children');
        var arrow = dirToggle.querySelector('.docs-arrow');
        var willOpen = !(_expanded[dir] !== false); // toggle
        _expanded[dir] = willOpen;
        if (children) {
          if (willOpen) children.removeAttribute('hidden');
          else children.setAttribute('hidden', '');
        }
        if (arrow) {
          arrow.classList.toggle('fa-chevron-down', willOpen);
          arrow.classList.toggle('fa-chevron-right', !willOpen);
        }
        persistExpanded();
      }
    });

    var filter = $('docs-filter');
    if (filter) {
      var t = null;
      filter.addEventListener('input', function () {
        clearTimeout(t);
        t = setTimeout(function () {
          var q = filter.value.trim();
          if (!q) renderTree();
          else renderFilterResults(q);
        }, 120);
      });
    }
  }

  document.addEventListener('tabChanged', function (e) {
    if (!e.detail || e.detail.tab !== 'docs') return;
    if (!_inited) { _inited = true; init(); }
    loadTree();
  });

  console.log('Admin docs viewer loaded');
})();