Group consecutive same-author messages in PiP DMs and threads

Back-to-back messages from one person were rendering as separate blocks (each
with its own name/time header) in the DM pop-out and in threads, instead of
grouping the way the main channel does.

PiP DMs: the live-append path rebuilt the "previous message" from the DOM
dataset but only carried user_id and time. The grouping check also compares
username (and persona), so it never matched and every message stayed ungrouped.
Rebuild the previous message with the username/persona/break fields the dataset
already stores.

Threads: the thread panel had no grouping at all. Add a compact reply variant
(same 5-minute, same-author, no-reply rule as the main channel) that drops the
avatar and author header and shows a hover timestamp in the gutter. The display
name is stashed on the row so reply/quote still resolve the author.

Author: ancsemi

public/css/style.css

@@ -7979,6 +7979,28 @@ html:not([data-toolbaricons="emoji"]):not([data-toolbaricons="color"]) .tb-icon-
   border-radius: var(--radius-sm);
   transition: background var(--transition), box-shadow var(--transition);
 }
+/* Compact thread reply — grouped under the previous reply from the same
+   author. Avatar/author header are dropped; a timestamp shows in the avatar
+   gutter on hover, like the main channel's compact rows. */
+.thread-message.thread-compact {
+  margin-bottom: 2px;
+}
+.thread-msg-compact-spacer {
+  background: transparent !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.thread-compact-time {
+  font-size: 10px;
+  color: var(--text-muted);
+  opacity: 0;
+  transition: opacity var(--transition);
+  white-space: nowrap;
+}
+.thread-message.thread-compact:hover .thread-compact-time {
+  opacity: 1;
+}
 .thread-message:hover {
   background: rgba(255,255,255,0.02);
   box-shadow: var(--msg-glow);

public/js/modules/app-utilities.js

@@ -2243,7 +2243,7 @@ _setThreadParentHeader(meta = {}) {
 },
 
 _setThreadReply(msgEl, msgId) {
-  const author = msgEl.querySelector('.thread-msg-author')?.textContent || 'someone';
+  const author = msgEl.querySelector('.thread-msg-author')?.textContent || msgEl.dataset.username || 'someone';
   const rawContent = msgEl.dataset.rawContent || msgEl.querySelector('.thread-msg-content')?.textContent || '';
   const preview = rawContent.length > 70 ? rawContent.substring(0, 70) + '…' : rawContent;
   this._threadReplyingTo = { id: msgId, username: author, content: rawContent };
@@ -2266,7 +2266,7 @@ _clearThreadReply() {
 
 _quoteThreadMessage(msgEl) {
   const rawContent = msgEl.dataset.rawContent || msgEl.querySelector('.thread-msg-content')?.textContent || '';
-  const author = msgEl.querySelector('.thread-msg-author')?.textContent || 'someone';
+  const author = msgEl.querySelector('.thread-msg-author')?.textContent || msgEl.dataset.username || 'someone';
   const quotedLines = rawContent.split('\n').map(l => `> ${l}`).join('\n');
   const quoteText = `> @${author} wrote:\n${quotedLines}\n`;
 
@@ -2588,8 +2588,16 @@ _appendDMPiPMessage(msg) {
   let prevMsg = null;
   const lastEl = list.lastElementChild;
   if (lastEl && lastEl.dataset && lastEl.dataset.userId && lastEl.dataset.msgId) {
+    // Rebuild enough of the previous message for `_createMessageEl`'s grouping
+    // check. It compares username and persona too, so a prev that only carried
+    // user_id + time never matched and every message rendered ungrouped. (the
+    // dataset already stores these from when the element was created.)
     prevMsg = {
       user_id: parseInt(lastEl.dataset.userId, 10),
+      username: lastEl.dataset.username || null,
+      persona_id: lastEl.dataset.personaId ? parseInt(lastEl.dataset.personaId, 10) : null,
+      persona_username: lastEl.dataset.personaUsername || null,
+      break_chain: lastEl.dataset.breakChain === '1' ? 1 : 0,
       created_at: lastEl.dataset.time
     };
   }
@@ -2918,29 +2926,67 @@ _appendThreadMessage(msg) {
     ? `<div class="thread-msg-more"><button class="thread-msg-more-btn" type="button" aria-label="More actions">${iMore}</button><div class="thread-msg-overflow">${threadOverflowToolbarBtns}</div></div>`
     : '';
 
+  // Group consecutive replies from the same author (within 5 min, no reply
+  // banner) into compact rows, the same way the main channel does — drop the
+  // avatar and author header, keep the content and the hover toolbar. The
+  // thread's parent message lives in a separate preview element, not in this
+  // container, so we only ever group reply-against-reply.
+  let threadCompact = false;
+  const prevEl = container.lastElementChild;
+  if (prevEl && prevEl.classList?.contains('thread-message') && !msg.reply_to) {
+    const samePerson = parseInt(prevEl.dataset.userId, 10) === msg.user_id
+      && (prevEl.dataset.personaId || '') === (msg.persona_id ? String(msg.persona_id) : '');
+    const prevTime = prevEl.dataset.time ? new Date(prevEl.dataset.time).getTime() : 0;
+    const within = prevTime && (new Date(msg.created_at).getTime() - prevTime) < 5 * 60 * 1000;
+    threadCompact = samePerson && within;
+  }
+
   const el = document.createElement('div');
-  el.className = 'thread-message';
+  el.className = 'thread-message' + (threadCompact ? ' thread-compact' : '');
   el.dataset.msgId = msg.id;
   el.dataset.rawContent = msg.content;
-  el.innerHTML = `
-    <div class="thread-msg-row">
-      ${avatarHtml}
-      <div class="thread-msg-body">
-        <div class="thread-msg-header">
-          <span class="thread-msg-author" style="color:${color}">${this._escapeHtml(displayName)}</span>
-          <span class="thread-msg-time">${this._formatTime(msg.created_at)}</span>
-          <span class="thread-msg-header-spacer"></span>
+  el.dataset.userId = msg.user_id;
+  el.dataset.time = msg.created_at;
+  // Stash the display name so reply/quote still resolve the author on compact
+  // rows, which don't render a `.thread-msg-author` element.
+  el.dataset.username = displayName;
+  if (msg.persona_id) el.dataset.personaId = String(msg.persona_id);
+  if (threadCompact) {
+    const shortTime = new Date(msg.created_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    el.innerHTML = `
+      <div class="thread-msg-row">
+        <div class="thread-msg-avatar thread-msg-compact-spacer"><span class="thread-compact-time">${this._escapeHtml(shortTime)}</span></div>
+        <div class="thread-msg-body">
           <div class="thread-msg-toolbar">
             <div class="msg-toolbar-group">${threadCoreToolbarBtns}</div>
             ${threadOverflowHtml}
           </div>
+          <div class="thread-msg-content">${this._formatContent(msg.content)}</div>
+          ${reactionsHtml}
         </div>
-        ${replyHtml}
-        <div class="thread-msg-content">${this._formatContent(msg.content)}</div>
-        ${reactionsHtml}
       </div>
-    </div>
-  `;
+    `;
+  } else {
+    el.innerHTML = `
+      <div class="thread-msg-row">
+        ${avatarHtml}
+        <div class="thread-msg-body">
+          <div class="thread-msg-header">
+            <span class="thread-msg-author" style="color:${color}">${this._escapeHtml(displayName)}</span>
+            <span class="thread-msg-time">${this._formatTime(msg.created_at)}</span>
+            <span class="thread-msg-header-spacer"></span>
+            <div class="thread-msg-toolbar">
+              <div class="msg-toolbar-group">${threadCoreToolbarBtns}</div>
+              ${threadOverflowHtml}
+            </div>
+          </div>
+          ${replyHtml}
+          <div class="thread-msg-content">${this._formatContent(msg.content)}</div>
+          ${reactionsHtml}
+        </div>
+      </div>
+    `;
+  }
   container.appendChild(el);
   try { this._decryptE2EImages?.(el); } catch {}
   try { this._decryptE2EFiles?.(el); } catch {}