Jump to paragraph and highlight it when clicking a comment

Co-Authored-By: Claude Sonnet 4.6 <[e-mail]>

static/css/editor.css

···
     border: 1px solid var(--border);
     border-radius: var(--radius);
     overflow: hidden;
+    cursor: pointer;
+}
+
+.comment-thread:hover {
+    border-color: var(--primary);
+}
+
+@keyframes para-highlight {
+    0%   { background: color-mix(in srgb, var(--primary) 20%, transparent); }
+    100% { background: transparent; }
+}
+
+.para-highlight {
+    animation: para-highlight 1.2s ease-out forwards;
+    border-radius: 3px;
 }
 
 .comment-thread-label {

templates/document_edit.html

···
         }
     });
 
+    (function attachThreadClickHandler() {
+        const container = document.getElementById('comment-threads');
+        if (!container) return;
+        container.addEventListener('click', e => {
+            const thread = e.target.closest('.comment-thread');
+            if (!thread) return;
+            jumpToParagraph(thread.dataset.paragraph || '');
+        });
+    })();
+
     function renderCommentThreads(comments) {
         const container = document.getElementById('comment-threads');
         if (!container) return;
···
         } catch (e) {
             console.error('Load comments failed:', e);
         }
+    }
+
+    function jumpToParagraph(pid) {
+        if (pid === 'general') return;
+        const idx = parseInt(pid.replace('p-', ''), 10);
+        if (isNaN(idx)) return;
+        const pmEl = document.querySelector('#editor-rich .ProseMirror');
+        if (!pmEl) return;
+        const blocks = Array.from(pmEl.children);
+        const target = blocks[idx];
+        if (!target) return;
+        target.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        target.classList.remove('para-highlight');
+        // Force reflow so the animation restarts if clicked twice.
+        void target.offsetWidth;
+        target.classList.add('para-highlight');
+        target.addEventListener('animationend', () => target.classList.remove('para-highlight'), { once: true });
     }
 
     function setupParagraphCommentTrigger() {