Fix comment system bugs and add UX improvements

- Fix duplicate renderCommentThreads declaration (caused editor crash)
- Fix reply button: stop click propagation, bypass openCommentForm, set
dummy pendingCommentRange so submitComment proceeds
- Fix reply AT URI map key mismatch: key replies by rkey not full AT URI
- Fix resolve 404: use rootComment.id (ATProto rkey) not threadId
- Fix highlight removal on resolve: reanchorCommentMarks now clears all
marks then re-adds only unresolved ones
- Sort comment threads by document position (top-to-bottom)
- Broadcast comments_updated WS message on create/update for live sync
- Add Comments toggle button to toolbar
- Move comment-form outside editor-page div to fix z-index stacking
- Change "Resolved" resolve button label to "Reopen"
- Inherit threadId in replies; fix reply form positioning

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

internal/handler/handler.go

···
 	}{CommentRecord: comment, URI: uri}
 
 	h.jsonResponse(w, response, http.StatusCreated)
+
+	if room := h.CollaborationHub.GetRoom(rKey); room != nil {
+		if data, err := json.Marshal(map[string]string{"type": "comments_updated"}); err == nil {
+			room.Broadcast(data)
+		}
+	}
 }
 
 func (h *Handler) CommentList(w http.ResponseWriter, r *http.Request) {
···
 	}
 
 	h.jsonResponse(w, comment, http.StatusOK)
+
+	if room := h.CollaborationHub.GetRoom(rKey); room != nil {
+		if data, err := json.Marshal(map[string]string{"type": "comments_updated"}); err == nil {
+			room.Broadcast(data)
+		}
+	}
 }
 
 // --- API: Render markdown ---

templates/about.html

···
             <h2>Status</h2>
             <p>This app is alpha quality. Use at your own risk. Expect bugs, breaking changes, and limited features. However, any documents you create will be stored in your AT Proto account, so even if Diffdown goes away, you will still have your documents.</p>
             <p><strong class="warning">Important:</strong> Because AT Proto does not support private records (<a href="https://atproto.wiki/en/working-groups/private-data">yet</a>), any documents you create will be visible to anyone with the URL to the record (<a href="at://did:plc:za4vlvbizdstoym7lpymc5q5/com.diffdown.document/3mgncllbr7424">see this example</a>).</p>
+            <p>The app wasn't designed for mobile, so it is likely to be a very bad UX on small screens.</p>
             <h3>Roadmap</h3>
             <ul>
                 <li>Document versioning</li>

templates/document_edit.html

···
             <button class="btn btn-sm btn-outline source-only" id="btn-wrap" onclick="toggleWrap()">Wrap</button>
             <button class="btn btn-sm btn-outline rich-only" id="btn-undo" onclick="richUndo()" title="Undo (⌘Z)">↩</button>
             <button class="btn btn-sm btn-outline rich-only" id="btn-redo" onclick="richRedo()" title="Redo (⌘⇧Z)">↪</button>
+            {{if or .IsCollaborator .IsOwner}}<button class="btn btn-sm btn-outline active" id="btn-comments" onclick="toggleCommentSidebar()">Comments</button>{{end}}
             <button class="btn btn-sm btn-outline" id="btn-source" onclick="toggleSourceMode()">Source</button>
             <span id="save-status"></span>
             <button class="btn btn-sm" id="btn-save" onclick="saveDocument()">Save</button>
···
 
     <!-- Comment button (shown on paragraph hover/selection) -->
     <button id="comment-btn" class="comment-btn" style="display:none" onclick="openCommentForm()">Comment</button>
-
-    <!-- Comment form (floating) -->
-    <div id="comment-form" class="comment-form" style="display:none">
-        <textarea id="comment-text" placeholder="Add a comment..." rows="3"></textarea>
-        <div class="comment-form-actions">
-            <button class="btn btn-sm" onclick="submitComment()">Post</button>
-            <button class="btn btn-sm btn-outline" onclick="closeCommentForm()">Cancel</button>
-        </div>
-    </div>
 
     <!-- Link editing tooltip -->
     <div id="link-tooltip" class="link-tooltip">
···
     </div>
 </div>
 {{end}}
+
+<!-- Comment form (floating, outside editor-page so z-index beats sidebar) -->
+<div id="comment-form" class="comment-form" style="display:none">
+    <textarea id="comment-text" placeholder="Add a comment..." rows="3"></textarea>
+    <div class="comment-form-actions">
+        <button class="btn btn-sm" onclick="submitComment()">Post</button>
+        <button class="btn btn-sm btn-outline" onclick="closeCommentForm()">Cancel</button>
+    </div>
+</div>
 
 <!-- Comment sidebar -->
 {{if or .IsCollaborator .IsOwner}}
···
         }
     }
 
+    window.toggleCommentSidebar = function() {
+        const sidebar = document.getElementById('comment-sidebar');
+        const btn = document.getElementById('btn-comments');
+        if (!sidebar) return;
+        const isHidden = sidebar.style.display === 'none';
+        sidebar.style.display = isHidden ? '' : 'none';
+        // CSS :has(~ .comment-sidebar) still matches when sidebar is display:none,
+        // so override editor-page right manually.
+        const editorPage = document.querySelector('.editor-page');
+        if (editorPage) editorPage.style.right = isHidden ? '' : '0';
+        if (btn) btn.classList.toggle('active', isHidden);
+    };
+
     window.toggleSourceMode = async function() {
         const nextMode = currentMode === 'rich' ? 'source' : 'rich';
 
···
             case 'edit':
                 applyRemoteEdit(msg);   // legacy full-replace path
                 break;
+            case 'comments_updated':
+                loadComments();
+                break;
             case 'sync':
                 applyRemoteEdit(msg.content);  // sync is always full-content string
                 break;
···
         editorEl.addEventListener('keyup', onSelectionChange);
     }
 
-    let pendingReplyTo = null;  // set when replying to a comment
+    let pendingReplyTo = null;   // set when replying to a comment
+    let pendingThreadId = null;  // threadId to inherit when replying
 
     window.openCommentForm = function openCommentForm() {
         if (!commentBtn || !commentForm || !milkdownEditor) return;
···
         if (commentBtn) commentBtn.style.display = 'none';
         pendingCommentRange = null;
         pendingReplyTo = null;
+        pendingThreadId = null;
         if (commentTextEl) commentTextEl.placeholder = 'Add a comment...';
     }
 
···
         try {
             const body = { quotedText, text };
             if (pendingReplyTo) body.replyTo = pendingReplyTo;
+            if (pendingThreadId) body.threadId = pendingThreadId;
             if (ownerDID) body.ownerDID = ownerDID;
             const resp = await fetch(`/api/docs/${rkey}/comments`, {
                 method: 'POST',
···
             }
             closeCommentForm();
             pendingReplyTo = null;
+            pendingThreadId = null;
             loadComments();
         } catch (e) { console.error('Comment post failed:', e); }
     }
···
         } catch(e) { return false; }
     }
 
-    function renderCommentThreads(comments) {
-        const container = document.getElementById('comment-threads');
-        if (!container) return;
-
-        if (!comments || comments.length === 0) {
-            container.textContent = '';
-            const empty = document.createElement('p');
-            empty.className = 'comment-empty';
-            empty.textContent = 'No comments yet.';
-            container.appendChild(empty);
-            return;
-        }
-
-        // Group by threadId
-        const byThread = new Map();
-        for (const c of comments) {
-            const tid = c.threadId || c.id;
-            if (!byThread.has(tid)) byThread.set(tid, { comments: [], quotedText: c.quotedText });
-            byThread.get(tid).comments.push(c);
-        }
-
-        container.textContent = '';
-        for (const [tid, { comments: thread, quotedText }] of byThread) {
-            const isDetached = !findCommentMark(tid);
-
-            const threadDiv = document.createElement('div');
-            threadDiv.className = 'comment-thread' + (isDetached ? ' comment-thread-detached' : '');
-            threadDiv.dataset.thread = tid;
-
-            const labelDiv = document.createElement('div');
-            labelDiv.className = 'comment-thread-label';
-            const labelText = quotedText
-                ? '\u201c' + (quotedText.length > 40 ? quotedText.slice(0, 40) + '\u2026' : quotedText) + '\u201d'
-                : '(no anchor)';
-            labelDiv.textContent = labelText;
-            if (isDetached) {
-                const warn = document.createElement('span');
-                warn.title = 'Text was deleted';
-                warn.textContent = ' \u26a0';
-                labelDiv.appendChild(warn);
-            }
-            threadDiv.appendChild(labelDiv);
-
-            for (const c of thread) {
-                const item = document.createElement('div');
-                item.className = 'comment-item';
-
-                const author = document.createElement('div');
-                author.className = 'comment-author';
-                author.textContent = c.authorHandle || c.author;
-
-                const body = document.createElement('div');
-                body.className = 'comment-text';
-                body.textContent = c.text;
-
-                const time = document.createElement('div');
-                time.className = 'comment-time';
-                time.textContent = formatTime(c.createdAt);
-
-                item.appendChild(author);
-                item.appendChild(body);
-                item.appendChild(time);
-                threadDiv.appendChild(item);
-            }
-
-            container.appendChild(threadDiv);
-        }
+    function findCommentMarkPos(threadId) {
+        if (!milkdownEditor) return Infinity;
+        try {
+            const pmView = milkdownEditor.action(ctx => ctx.get(editorViewCtx));
+            const { doc, schema } = pmView.state;
+            const markType = schema.marks.comment;
+            if (!markType) return Infinity;
+            let pos = Infinity;
+            doc.descendants((node, nodePos) => {
+                if (pos !== Infinity) return false;
+                if (node.marks.some(m => m.type === markType && m.attrs.threadId === threadId)) pos = nodePos;
+            });
+            return pos;
+        } catch(e) { return Infinity; }
     }
 
     function formatTime(ts) {
···
     }
 
     async function replyToComment(comment) {
+        if (!commentForm || !commentTextEl) return;
+        pendingCommentRange = { from: 0, to: 0, quotedText: '' };
         pendingReplyTo = `at://${comment.docOwnerDid}/app.diffdown.comment/${comment.id}`;
-        if (commentTextEl) commentTextEl.placeholder = `Replying to ${comment.authorHandle || comment.author}...`;
-        openCommentForm();
+        pendingThreadId = comment.threadId;
+        commentTextEl.placeholder = `Replying to ${comment.authorHandle || comment.author}...`;
+        commentTextEl.value = '';
+        // comment-form is position:fixed; anchor to right edge of viewport near sidebar
+        commentForm.style.right = '8px';
+        commentForm.style.left = 'auto';
+        commentForm.style.top = '80px';
+        commentForm.style.display = 'block';
+        commentTextEl.focus();
     }
 
     async function toggleResolve(threadId, resolved) {
···
         const replies = new Map();
         for (const c of comments) {
             if (c.replyTo) {
-                if (!replies.has(c.replyTo)) replies.set(c.replyTo, []);
-                replies.get(c.replyTo).push(c);
+                // replyTo is a full AT URI (at://did/collection/rkey); key by rkey only
+                const parentId = c.replyTo.split('/').pop();
+                if (!replies.has(parentId)) replies.set(parentId, []);
+                replies.get(parentId).push(c);
             } else {
                 roots.push(c);
             }
         }
 
+        roots.sort((a, b) => findCommentMarkPos(a.threadId || a.id) - findCommentMarkPos(b.threadId || b.id));
+
         container.textContent = '';
         for (const root of roots) {
             const threadId = root.threadId || root.id;
···
 
         const resolveBtn = document.createElement('button');
         resolveBtn.className = 'btn btn-sm ' + (rootComment.resolved ? 'btn-active' : 'btn-outline');
-        resolveBtn.textContent = rootComment.resolved ? 'Resolved' : 'Resolve';
-        resolveBtn.onclick = () => toggleResolve(threadId, !rootComment.resolved);
+        resolveBtn.textContent = rootComment.resolved ? 'Reopen' : 'Resolve';
+        resolveBtn.onclick = () => toggleResolve(rootComment.id, !rootComment.resolved);
         headerDiv.appendChild(resolveBtn);
 
         threadDiv.appendChild(headerDiv);
···
             const replyBtn = document.createElement('button');
             replyBtn.className = 'btn btn-sm btn-link';
             replyBtn.textContent = 'Reply';
-            replyBtn.onclick = () => replyToComment(comment);
+            replyBtn.addEventListener('click', e => { e.stopPropagation(); replyToComment(comment); });
             item.appendChild(replyBtn);
         }
 
···
 
     // Re-anchor comment marks after load by searching for quotedText in the doc
     function reanchorCommentMarks(comments) {
-        if (!milkdownEditor || !comments || comments.length === 0) return;
+        if (!milkdownEditor) return;
         try {
             const pmView = milkdownEditor.action(ctx => ctx.get(editorViewCtx));
             const { doc, schema } = pmView.state;
             const markType = schema.marks.comment;
             if (!markType) return;
-            let tr = pmView.state.tr;
-            let changed = false;
-            for (const c of comments) {
+            // Clear all comment marks first, then re-add only for unresolved comments.
+            // This ensures resolving a comment removes its highlight on the next load.
+            let tr = pmView.state.tr.removeMark(0, doc.content.size, markType);
+            for (const c of comments || []) {
+                if (c.resolved) continue;
                 const threadId = c.threadId || c.id;
                 if (!c.quotedText) continue;
                 const pos = findTextInDoc(doc, c.quotedText);
                 if (pos === -1) continue;
                 tr = tr.addMark(pos, pos + c.quotedText.length, markType.create({ threadId }));
-                changed = true;
             }
-            if (changed) pmView.dispatch(tr);
+            pmView.dispatch(tr);
         } catch(e) { console.error('reanchorCommentMarks:', e); }
     }