Threads: promote the next reply to full when a group head is deleted

Follow-up to thread message grouping. When the first reply of a same-author
group (the row that carries the avatar and name) was deleted, the compact
replies under it kept their headerless form and looked authorless until reload.

Add `_promoteThreadCompactToFull` (the thread mirror of `_promoteCompactToFull`):
it rebuilds the avatar and author header on a compact row while keeping its
existing content, toolbar, and reactions. The message-deleted handler calls it
when a full thread row is removed and the next sibling is a compact reply.
Deleting a middle compact row promotes nothing, since the head above it stands.

Thread rows now stash the raw username and avatar so promotion is accurate, and
reply/quote resolve the author's nickname from that data on compact rows.

Author: ancsemi

public/js/modules/app-socket.js

@@ -1657,6 +1657,12 @@ _setupSocketListeners() {
         const next = msgEl.nextElementSibling;
         if (next && next.classList.contains('message-compact')) {
           try { this._promoteCompactToFull(next); } catch (e) { /* don't let promotion failure block removal */ }
+        } else if (next && next.classList.contains('thread-compact')
+                   && !msgEl.classList.contains('thread-compact')) {
+          // Deleting the head of a thread group (a full row): promote the next
+          // compact reply so it keeps an author header. Deleting a middle
+          // compact row needs no promotion — the head above it still stands.
+          try { this._promoteThreadCompactToFull(next); } catch (e) { /* non-fatal */ }
         }
         msgEl.remove();
       });

public/js/modules/app-utilities.js

@@ -2243,7 +2243,9 @@ _setThreadParentHeader(meta = {}) {
 },
 
 _setThreadReply(msgEl, msgId) {
-  const author = msgEl.querySelector('.thread-msg-author')?.textContent || msgEl.dataset.username || 'someone';
+  const author = msgEl.querySelector('.thread-msg-author')?.textContent
+    || this._getNickname?.(parseInt(msgEl.dataset.userId, 10), msgEl.dataset.username)
+    || 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 +2268,9 @@ _clearThreadReply() {
 
 _quoteThreadMessage(msgEl) {
   const rawContent = msgEl.dataset.rawContent || msgEl.querySelector('.thread-msg-content')?.textContent || '';
-  const author = msgEl.querySelector('.thread-msg-author')?.textContent || msgEl.dataset.username || 'someone';
+  const author = msgEl.querySelector('.thread-msg-author')?.textContent
+    || this._getNickname?.(parseInt(msgEl.dataset.userId, 10), msgEl.dataset.username)
+    || msgEl.dataset.username || 'someone';
   const quotedLines = rawContent.split('\n').map(l => `> ${l}`).join('\n');
   const quoteText = `> @${author} wrote:\n${quotedLines}\n`;
 
@@ -2947,9 +2951,12 @@ _appendThreadMessage(msg) {
   el.dataset.rawContent = msg.content;
   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;
+  // Stash the raw username + avatar so a compact row can be promoted back to a
+  // full row (with the header restored) if the group head above it is deleted,
+  // and so reply/quote can resolve the author on compact rows that have no
+  // `.thread-msg-author` element.
+  el.dataset.username = msg.username || '';
+  if (msg.avatar) el.dataset.avatar = msg.avatar;
   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' });
@@ -2994,6 +3001,50 @@ _appendThreadMessage(msg) {
   container.scrollTop = container.scrollHeight;
 },
 
+// Promote a compact thread reply back to a full row (avatar + author header
+// restored), keeping its existing content/toolbar/reactions. Called when the
+// group head above it is deleted, so the new head still shows who sent it —
+// the thread mirror of `_promoteCompactToFull`.
+_promoteThreadCompactToFull(compactEl) {
+  if (!compactEl) return;
+  const userId = parseInt(compactEl.dataset.userId, 10);
+  const rawUsername = compactEl.dataset.username || t('app.messages.unknown_user');
+  const displayName = this._getNickname?.(userId, rawUsername) || rawUsername;
+  const time = compactEl.dataset.time;
+  const color = this._getUserColor(rawUsername);
+  const initial = (displayName || '?').charAt(0).toUpperCase();
+
+  // Preserve the already-rendered content, toolbar, and reactions.
+  const contentHtml = compactEl.querySelector('.thread-msg-content')?.innerHTML || '';
+  const toolbarHtml = compactEl.querySelector('.thread-msg-toolbar')?.outerHTML || '';
+  const reactionsHtml = compactEl.querySelector('.reactions-row')?.outerHTML || '';
+
+  // Avatar: stored at render time, else the online/member list, else initial.
+  const _pool = (this._lastOnlineUsers || []).concat(this.channelMembers || []);
+  const onlineUser = _pool.find(u => u.id === userId) || null;
+  const avatar = compactEl.dataset.avatar || (onlineUser && onlineUser.avatar) || null;
+  const avatarHtml = avatar
+    ? `<img class="thread-msg-avatar" src="${this._escapeHtml(avatar)}" alt="${initial}">`
+    : `<div class="thread-msg-avatar thread-msg-avatar-initial" style="background:${color}">${initial}</div>`;
+
+  compactEl.classList.remove('thread-compact');
+  compactEl.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(time)}</span>
+          <span class="thread-msg-header-spacer"></span>
+          ${toolbarHtml}
+        </div>
+        <div class="thread-msg-content">${contentHtml}</div>
+        ${reactionsHtml}
+      </div>
+    </div>
+  `;
+},
+
 _updateThreadPreview(parentId, thread) {
   const msgEl = document.querySelector(`[data-msg-id="${parentId}"]`);
   if (!msgEl) return;