fix(dm): render system messages in sidebar preview instead of raw JSON

DmLastMessagePreview lacked a `type` field, so the sidebar rendered `lastMessage.content` verbatim — surfacing JSON like `{"event":"space_invite",...}` for space invites and member-add events. Adds `type` to the preview payload (populated server-side from `dm_messages.type`) and routes all sidebar call sites through a single `formatDmSidebarPreview` helper that renders human-readable text for each system event and skips the group `Sender:` prefix on system rows.
2026-04-29 23:13:09 +02:00
parent 9aa97f4552
commit 1ed70a90b1
7 changed files with 164 additions and 23 deletions
@@ -2,7 +2,7 @@ import type { DmChannel, User } from '@backspace/shared';
 import { Avatar } from '../ui/Avatar';
 import { Tooltip } from '../ui/Tooltip';
 import { parseFederatedUsername, isSelf } from '../../utils/identity';
-import { formatDmTimestamp, formatDmPreview } from '../../utils/dmFormatters';
+import { formatDmTimestamp, formatDmSidebarPreview } from '../../utils/dmFormatters';
 import { getRejectedPeerOrigins, getAwaitingApprovalPeerOrigins } from '../../hooks/useWebSocket';

 function isMemberUnreachable(homeInstance: string | null | undefined): boolean {
@@ -98,19 +98,11 @@ export function DmListItem({ dm, isActive, isUnread, user, onSelect, onClose, on
  } text-txt-tertiary hover:text-txt-primary transition-opacity flex-shrink-0 ml-1`;

  // ── Preview text ──────────────────────────────────────────────────────
-  const preview = formatDmPreview(dm.lastMessage ?? null);
-  let previewText: string | null = null;
-  if (isGroup) {
-    const lastMsg = dm.lastMessage;
-    const senderName = (lastMsg && 'user' in lastMsg ? lastMsg.user?.displayName : undefined)
-      ?? dm.members.find(m => m.id === lastMsg?.userId)?.displayName
-      ?? 'Unknown';
-    previewText = preview
-      ? `${senderName}: ${preview}`
-      : `${dm.members.length} Members`;
-  } else {
-    previewText = preview;
-  }
+  // formatDmSidebarPreview handles user/system messages and applies the
+  // sender prefix for group user-messages. We only need to provide the
+  // empty-group fallback ourselves.
+  const preview = formatDmSidebarPreview(dm, user);
+  const previewText = preview ?? (isGroup ? `${dm.members.length} Members` : null);

  const itemJsx = (
    <div
@@ -10,6 +10,7 @@ import { Mascot } from '../ui/Mascot';
 import { resolveAssetUrl } from '../../utils/assetUrls';
 import { useNavigate } from 'react-router-dom';
 import { parseFederatedUsername } from '../../utils/identity';
+import { formatDmSidebarPreview } from '../../utils/dmFormatters';

 export function MobileDmsScreen() {
  const pushMobileScreen = useUIStore((s) => s.pushMobileScreen);
@@ -151,11 +152,10 @@ export function MobileDmsScreen() {
          const readState = readStates.get(dm.id);
          const isUnread = lastMsgId && (!readState || readState < lastMsgId);

-          const preview = dm.lastMessage?.content;
+          // formatDmSidebarPreview returns the full preview line (system messages
+          // get human-readable text; group user-messages get the "Sender: " prefix).
+          const preview = formatDmSidebarPreview(dm, authUser ?? null);
          const previewTime = dm.lastMessage?.createdAt;
-          const previewSender = dm.lastMessage
-            ? dm.members.find(m => m.id === dm.lastMessage!.userId)
-            : null;

          const mainUser = otherMembers[0];
          const avatarUrl = mainUser?.avatar
@@ -206,9 +206,7 @@ export function MobileDmsScreen() {
                })()}
                {preview && (
                  <p className={`text-xs truncate mt-0.5 ${isUnread ? 'text-txt-secondary font-medium' : 'text-txt-tertiary'}`}>
-                    {previewSender && previewSender.id !== authUser?.id
-                      ? `${previewSender.displayName ?? parseFederatedUsername(previewSender.username).baseName}: ${preview}`
-                      : preview}
+                    {preview}
                  </p>
                )}
              </div>
@@ -1,3 +1,6 @@
+import type { DmChannel, DmMessageWithUser, DmLastMessagePreview, User, SpaceInviteSystemPayload } from '@backspace/shared';
+import { parseFederatedUsername, isSelf } from './identity';
+
 // ─── DM Preview Formatting ────────────────────────────────────────────────────

 /**
@@ -50,7 +53,7 @@ function getUnifiedAttachmentIcon(attachments: PreviewAttachment[]): string {
 }

 /**
- * Format a DM lastMessage into a sidebar preview string.
+ * Format a DM lastMessage's user-authored content into a sidebar preview string.
 * Returns null if there is nothing displayable.
 *
 * Handles:
@@ -58,6 +61,10 @@ function getUnifiedAttachmentIcon(attachments: PreviewAttachment[]): string {
 *  - Attachment only (single) → "📷 Image", "🎬 Video", "🎵 Audio", "📎 filename.ext"
 *  - Attachment only (multiple) → "📎 N files"
 *  - Text + attachments → "text 📷" (appends unified icon)
+ *
+ * NOTE: This helper does NOT understand system messages — for those, use
+ * `formatDmSidebarPreview` which inspects `type` and routes to a system-message
+ * renderer. Calling this directly on a system message would surface raw JSON.
 */
 export function formatDmPreview(lastMessage: PreviewMessage | null | undefined): string | null {
  if (!lastMessage) return null;
@@ -85,6 +92,117 @@ export function formatDmPreview(lastMessage: PreviewMessage | null | undefined):
  return `${content} ${icon}`;
 }

+// ─── System Message Preview Formatting ───────────────────────────────────────
+
+interface SystemEventPayload {
+  event?: unknown;
+  targetUserId?: unknown;
+  targetDisplayName?: unknown;
+  newOwnerId?: unknown;
+  newOwnerDisplayName?: unknown;
+  reason?: unknown;
+  // space_invite payload
+  snapshot?: { spaceName?: unknown };
+}
+
+function asString(v: unknown): string | null {
+  return typeof v === 'string' && v.length > 0 ? v : null;
+}
+
+function resolveDisplayName(user: User | null | undefined): string {
+  if (!user) return 'Unknown';
+  if (user.displayName) return user.displayName;
+  return parseFederatedUsername(user.username ?? '').baseName || 'Unknown';
+}
+
+/**
+ * Format a system DM message (member_added, member_removed, owner_changed,
+ * space_invite) into a human-readable sidebar preview. Falls back to a generic
+ * label for unknown event shapes so we never leak raw JSON to the sidebar.
+ */
+function formatSystemPreview(content: string | null, actor: User | null | undefined): string {
+  let data: SystemEventPayload = {};
+  if (content) {
+    try { data = JSON.parse(content) as SystemEventPayload; } catch { /* malformed → generic fallback */ }
+  }
+  const event = asString(data.event);
+  const actorName = resolveDisplayName(actor);
+
+  switch (event) {
+    case 'space_invite': {
+      const spaceName = asString((data as Partial<SpaceInviteSystemPayload>).snapshot?.spaceName);
+      return spaceName
+        ? `📨 Sent invite to ${spaceName}`
+        : '📨 Sent a space invite';
+    }
+    case 'member_added': {
+      const target = asString(data.targetDisplayName) ?? 'someone';
+      return `${actorName} added ${target}`;
+    }
+    case 'member_removed': {
+      const target = asString(data.targetDisplayName) ?? 'someone';
+      const reason = asString(data.reason);
+      if (reason === 'leave') return `${target} left the group`;
+      return `${actorName} removed ${target}`;
+    }
+    case 'owner_changed': {
+      const newOwner = asString(data.newOwnerDisplayName) ?? 'A member';
+      return `${newOwner} is now the group owner`;
+    }
+    default:
+      return 'System message';
+  }
+}
+
+// ─── Unified Sidebar Preview ─────────────────────────────────────────────────
+
+type LastMessageLike = DmLastMessagePreview | DmMessageWithUser;
+
+function isSystemMessage(m: LastMessageLike): boolean {
+  return m.type === 'system';
+}
+
+/**
+ * Produce the full sidebar preview line for a DM channel. Handles:
+ *  - User messages → text/attachment formatting (with `Sender: ` prefix in groups
+ *    when the author is not the current user)
+ *  - System messages → human-readable rendering with no sender prefix (the system
+ *    text already incorporates the actor where appropriate)
+ *  - Empty state → null (caller decides the fallback, e.g. "N Members")
+ */
+export function formatDmSidebarPreview(
+  dm: Pick<DmChannel, 'lastMessage' | 'ownerId' | 'members'>,
+  currentUser: { id: string; username: string } | null,
+): string | null {
+  const lastMessage = dm.lastMessage ?? null;
+  if (!lastMessage) return null;
+
+  // Resolve the message author from the channel members. Falls back to the
+  // user object embedded in DmMessageWithUser if the member roster doesn't
+  // include them (e.g. a remote actor in federation bootstrap).
+  const actor: User | null = (
+    dm.members.find(m => m.id === lastMessage.userId)
+    ?? ('user' in lastMessage ? lastMessage.user : null)
+    ?? null
+  );
+
+  if (isSystemMessage(lastMessage)) {
+    return formatSystemPreview(lastMessage.content ?? null, actor);
+  }
+
+  const text = formatDmPreview(lastMessage);
+  if (!text) return null;
+
+  const isGroup = !!dm.ownerId;
+  if (!isGroup) return text;
+
+  // Group user messages: prefix with sender display name unless it's the current user.
+  const authoredBySelf = currentUser ? isSelf({ id: lastMessage.userId, username: actor?.username ?? '', homeInstance: actor?.homeInstance ?? null }, currentUser) : false;
+  if (authoredBySelf) return text;
+
+  return `${resolveDisplayName(actor)}: ${text}`;
+}
+
 // ─── DM Timestamp Formatting ─────────────────────────────────────────────────

 /**