feat: act on Search and Following comments (Closes #1388)

frontend/conversation.js

@@ -81,4 +81,37 @@ function createConversationPager({ loadPage }) {
   };
 }
 
+function renderConversationComment(comment, controller, escapeHtml, formatTime, renderMarkdown) {
+  const actions = controller?.actionHtml?.(comment) || '';
+  return '<div class="issue-comment" data-comment-id="' + Number(comment.id || 0) + '"><div class="small">' +
+    escapeHtml(comment.author || 'Unknown author') +
+    (comment.created_at ? ' · ' + escapeHtml(formatTime(comment.created_at)) : '') +
+    '</div>' + actions + '<div class="issue-sheet-content markdown-content">' +
+    renderMarkdown(comment.body || 'No comment body provided.') + '</div></div>';
+}
+
+function createConversationRenderers({qs,renderComment,updateReadPosition,getSelectedUpdate}) {
+  function status(kind, comments, total) {
+    qs('#' + kind + '-conversation-status').textContent = comments.length ?
+      comments.length + ' of ' + Math.max(total || 0, comments.length) + ' messages loaded.' : 'No comments yet.';
+  }
+  function paint(kind, state, controller) {
+    const comments = state?.comments || [];
+    qs('#' + kind + '-comments').innerHTML = comments.length ? comments.map(comment =>
+      kind === 'pull' ? '<div class="pull-comment-card">' + renderComment(comment,controller) + '</div>' :
+        renderComment(comment,controller)).join('') : '<div class="muted">No comments yet.</div>';
+    qs('#load-older-' + kind + '-comments').hidden = !Number.isInteger(state?.older_page);
+    status(kind,comments,state?.total);
+    if (kind === 'update') {
+      const newest = qs('#update-comments .issue-comment:last-child');
+      updateReadPosition.ready(String(getSelectedUpdate()?.notification_id || ''),newest);
+    }
+  }
+  return {
+    paintIssueConversation:(state,controller)=>paint('issue',state,controller),
+    paintPullConversation:(state,controller)=>paint('pull',state,controller),
+    paintUpdateConversation:(state,controller)=>paint('update',state,controller),
+  };
+}
+
 if (typeof module !== 'undefined' && module.exports) module.exports = createConversationPager;

frontend/dashboard.js

@@ -4097,46 +4097,17 @@
     toggle?.focus();
   }
 
-  function renderIssueComment(comment, controller = commentActions) {
-    const actions = controller?.actionHtml?.(comment) || '';
-    return '<div class="issue-comment" data-comment-id="' + Number(comment.id || 0) + '"><div class="small">' +
-      escapeHtml(comment.author || 'Unknown author') +
-      (comment.created_at ? ' · ' + escapeHtml(fmt(comment.created_at)) : '') +
-      '</div>' + actions + '<div class="issue-sheet-content markdown-content">' +
-      renderMarkdown(comment.body || 'No comment body provided.') + '</div></div>';
-  }
-
-  function paintIssueConversation(state, controller) {
-    const comments = state?.comments || [];
-    qs('#issue-comments').innerHTML = comments.length ?
-      comments.map(comment => renderIssueComment(comment, controller)).join('') : '<div class="muted">No comments yet.</div>';
-    qs('#load-older-issue-comments').hidden = !Number.isInteger(state?.older_page);
-    qs('#issue-conversation-status').textContent = comments.length ?
-      comments.length + ' of ' + Math.max(state.total || 0, comments.length) + ' messages loaded.' : 'No comments yet.';
-  }
-
-  function paintUpdateConversation(state, controller) {
-    const comments = state?.comments || [];
-    qs('#update-comments').innerHTML = comments.length ?
-      comments.map(comment => renderIssueComment(comment, controller)).join('') : '<div class="muted">No comments yet.</div>';
-    qs('#load-older-update-comments').hidden = !Number.isInteger(state?.older_page);
-    qs('#update-conversation-status').textContent = comments.length ?
-      comments.length + ' of ' + Math.max(state.total || 0, comments.length) + ' messages loaded.' : 'No comments yet.';
-    const newest = qs('#update-comments .issue-comment:last-child');
-    updateReadPosition.ready(String(selectedUpdate?.notification_id || ''), newest);
-  }
-
-  function paintPullConversation(state, controller) {
-    const comments = state?.comments || [];
-    qs('#pull-comments').innerHTML = comments.length ? comments.map(comment =>
-      '<div class="pull-comment-card">' + renderIssueComment(comment, controller) + '</div>'
-    ).join('') : '<div class="muted">No comments yet.</div>';
-    qs('#load-older-pull-comments').hidden = !Number.isInteger(state?.older_page);
-    qs('#pull-conversation-status').textContent = comments.length ?
-      comments.length + ' of ' + Math.max(state.total || 0, comments.length) + ' messages loaded.' : 'No comments yet.';
-  }
+  const {paintIssueConversation,paintPullConversation,paintUpdateConversation}=createConversationRenderers({
+    qs,renderComment:(comment,controller)=>renderConversationComment(
+      comment,controller,escapeHtml,fmt,renderMarkdown),
+    updateReadPosition,getSelectedUpdate:()=>selectedUpdate,
+  });
 
   function commentSurface(selector) {
+    if (selector === '#search-preview-comments') return {
+      context:{kind:searchPreviewDetail.kind,item:searchPreviewDetail}, pager:searchPreview.commentPager(),
+      render:state=>showSearchConversationWithActions(state), status:qs('#search-preview-conversation-status'),
+    };
     if (selector === '#issue-comments') return {
       context:{kind:'issue',item:selectedIssue}, pager:issueConversation,
       render:renderIssueConversation, status:qs('#issue-sheet-status'),
@@ -5664,8 +5635,14 @@
     commandSearch.setScope(scope);
   }
   let searchPreviewDetail = null;
-  const renderSearchConversation = conversation =>
-    renderSearchPreviewConversation(conversation, document, escapeHtml, fmt, renderMarkdown);
+  const showSearchConversationWithActions = createSearchPreviewConversationActions({
+    hydrator:actionHydrator, rootNode:qs('#search-preview-comments'),
+    retry:qs('#retry-search-preview-comment-actions'),
+    paint:(conversation,controller)=>renderSearchPreviewConversation(
+      conversation,document,escapeHtml,fmt,renderMarkdown,controller),
+    wire:controller=>wireCommentActions('#search-preview-comments',controller),
+  });
+  const renderSearchConversation = conversation => { void showSearchConversationWithActions(conversation); };
   function renderSearchPreview(state) {
     followingQueue.preview(state);
     const sheet = qs('#search-preview');

frontend/index.html

@@ -901,6 +901,7 @@
       <div id="search-preview-comments"></div>
       <div id="search-preview-conversation-status" class="small" aria-live="polite"></div>
       <button id="retry-search-preview-conversation" type="button" hidden>Retry conversation</button>
+      <button class="conversation-actions-retry" id="retry-search-preview-comment-actions" type="button" hidden>Retry comment tools</button>
       <button id="load-older-search-preview-comments" type="button" hidden>Load older messages</button>
     </section>
     <section id="search-preview-review" class="search-preview-review" aria-labelledby="search-preview-review-title" hidden>

frontend/search-preview.js

@@ -148,7 +148,7 @@
         body:JSON.stringify({body}),
       }),
     });
-    root.renderSearchPreviewConversation = (conversation, document, escapeHtml, formatTime, renderMarkdown) => {
+    root.renderSearchPreviewConversation = (conversation, document, escapeHtml, formatTime, renderMarkdown, actions) => {
       const comments = document.querySelector('#search-preview-comments');
       const status = document.querySelector('#search-preview-conversation-status');
       const retry = document.querySelector('#retry-search-preview-conversation');
@@ -162,11 +162,12 @@
         new Date(comment.created_at).getTime() > new Date(conversation.reviewedAt).getTime());
       const newCount = (conversation.comments || []).filter(isNew).length;
       comments.innerHTML = (conversation.comments || []).map(comment =>
-        '<article class="search-preview-comment' + (isNew(comment) ? ' new-since-review' : '') +
+        '<article class="search-preview-comment issue-comment' + (isNew(comment) ? ' new-since-review' : '') +
         '" data-comment-id="' + Number(comment.id || 0) + '">' +
         '<div class="small">' + escapeHtml(comment.author || 'Unknown author') +
         (comment.created_at ? ' · ' + escapeHtml(formatTime(comment.created_at)) : '') +
         (isNew(comment) ? ' · <strong>New since last review</strong>' : '') + '</div>' +
+        (actions?.actionHtml?.(comment) || '') +
         '<div class="markdown-content">' + renderMarkdown(comment.body || '') + '</div></article>'
       ).join('');
       retry.hidden = conversation.status !== 'error';
@@ -181,6 +182,19 @@
         (conversation.comments.length === 1 ? ' message' : ' messages') +
         (newCount ? ' · ' + newCount + ' new since last review' : '') + '.';
     };
+    root.createSearchPreviewConversationActions = ({hydrator,rootNode,retry,paint,wire}) => {
+      let latest = null;
+      const show = conversation => {
+        latest = conversation;
+        if (!conversation) {
+          paint(null, null);
+          return Promise.resolve(false);
+        }
+        return hydrator.show({root:rootNode,state:conversation,paint,retry,wire});
+      };
+      retry.addEventListener('click', () => { if (latest) void show(latest); });
+      return show;
+    };
     root.renderSearchPreviewReply = (state, detail, preview, document) => {
       const section = document.querySelector('.search-preview-reply');
       const input = document.querySelector('#search-preview-reply');
@@ -417,7 +431,27 @@
       }
     }
 
+    const conversationPager = {
+      snapshot() {
+        return {...(conversation || {}), comments:(conversation?.comments || []).map(comment => ({...comment}))};
+      },
+      replace(comment) {
+        if (!comment || !Number.isInteger(comment.id) || !conversation) return conversationPager.snapshot();
+        conversation = {...conversation, comments:(conversation.comments || []).map(existing =>
+          existing.id === comment.id ? {...comment} : existing)};
+        publish({status:'ready', item:current, detail:current, conversation});
+        return conversationPager.snapshot();
+      },
+      remove(commentId) {
+        if (!conversation) return conversationPager.snapshot();
+        conversation = {...conversation, comments:(conversation.comments || []).filter(comment => comment.id !== commentId)};
+        publish({status:'ready', item:current, detail:current, conversation});
+        return conversationPager.snapshot();
+      },
+    };
+
     const api = {
+      commentPager() { return conversationPager; },
       hasReplyAttachments() {
         return Boolean(hasAttachments?.());
       },