server and web app

apps/server/internal/httpserver/static/comments.js

@@ -0,0 +1,123 @@
+(function () {
+  'use strict';
+
+  const documentPath = document.querySelector('[data-document-path]')?.dataset.documentPath;
+  const documentHash = document.querySelector('[data-document-hash]')?.dataset.documentHash;
+  const documentId = documentPath ? 'doc:' + documentPath.replace(/\.md$/, '') : null;
+
+  if (!documentId) return;
+
+  // Hash a paragraph's text content for anchoring
+  function hashParagraph(el) {
+    const text = (el.textContent || '').trim();
+    if (!text) return null;
+    // Simple hash: first 16 chars of base64 of char codes (deterministic)
+    let hash = 0;
+    for (let i = 0; i < text.length; i++) {
+      const char = text.charCodeAt(i);
+      hash = ((hash << 5) - hash) + char;
+      hash = hash & hash;
+    }
+    return 'h' + Math.abs(hash).toString(36);
+  }
+
+  function addCommentButton(el, hash) {
+    const btn = document.createElement('button');
+    btn.className = 'comment-anchor-btn';
+    btn.title = 'Add comment';
+    btn.innerHTML = '+';
+    btn.addEventListener('click', () => promptComment(el, hash));
+    el.appendChild(btn);
+  }
+
+  async function promptComment(el, anchorHash) {
+    const text = window.prompt('Comment on this paragraph:');
+    if (!text || !text.trim()) return;
+
+    try {
+      const res = await fetch('/api/comments', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          documentId,
+          versionHash: documentHash,
+          content: text.trim(),
+          anchorHash,
+        }),
+      });
+      if (!res.ok) throw new Error(await res.text());
+      // Refresh comments display
+      await loadCommentsForAnchor(el, anchorHash);
+    } catch (err) {
+      window.alert('Failed to post comment: ' + err.message);
+    }
+  }
+
+  async function loadCommentsForAnchor(el, anchorHash) {
+    try {
+      const res = await fetch(`/api/comments?document_id=${encodeURIComponent(documentId)}&anchor_hash=${encodeURIComponent(anchorHash)}`);
+      if (!res.ok) return;
+      const data = await res.json();
+      renderComments(el, data.comments || []);
+    } catch (err) {
+      console.error('load comments', err);
+    }
+  }
+
+  function renderComments(el, comments) {
+    // Remove existing comment list
+    const existing = el.querySelector('.comment-list');
+    if (existing) existing.remove();
+
+    if (!comments.length) return;
+
+    const list = document.createElement('div');
+    list.className = 'comment-list';
+    comments.forEach(c => {
+      const item = document.createElement('div');
+      item.className = 'comment-item';
+      item.innerHTML = `
+        <div class="comment-meta">
+          <strong>${escapeHtml(c.authorName || 'Anonymous')}</strong>
+          <time>${formatDate(c.createdAt)}</time>
+        </div>
+        <div class="comment-body">${escapeHtml(c.content)}</div>
+      `;
+      list.appendChild(item);
+    });
+    el.appendChild(list);
+  }
+
+  function escapeHtml(str) {
+    const div = document.createElement('div');
+    div.textContent = str;
+    return div.innerHTML;
+  }
+
+  function formatDate(iso) {
+    const d = new Date(iso);
+    return d.toLocaleString();
+  }
+
+  // Initialize: hash all paragraphs in markdown body
+  function init() {
+    const body = document.querySelector('.markdown-body');
+    if (!body) return;
+
+    const paragraphs = body.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, blockquote, pre');
+    paragraphs.forEach(el => {
+      const hash = hashParagraph(el);
+      if (!hash) return;
+      el.dataset.anchorHash = hash;
+      el.classList.add('commentable');
+      addCommentButton(el, hash);
+      loadCommentsForAnchor(el, hash);
+    });
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+})();