Hide the names of banned users behind a spoiler tag (attempt 2) (#32636)

apps/web/src/TextForEvent.tsx

@@ -39,6 +39,7 @@ import { highlightEvent, isLocationEvent } from "./utils/EventUtils";
 import { getSenderName } from "./utils/event/getSenderName";
 import PosthogTrackers from "./PosthogTrackers.ts";
 import { ElementCallEventType } from "./call-types.ts";
+import Spoiler from "./components/views/elements/Spoiler.tsx";
 
 function getRoomMemberDisplayname(client: MatrixClient, event: MatrixEvent, userId = event.getSender()): string {
     const roomId = event.getRoomId();
@@ -107,7 +108,7 @@ function textForMemberEvent(
     client: MatrixClient,
     allowJSX: boolean,
     showHiddenEvents?: boolean,
-): (() => string) | null {
+): (() => Renderable) | null {
     // XXX: SYJS-16 "sender is sometimes null for join messages"
     const senderName = ev.sender?.name || getRoomMemberDisplayname(client, ev);
     const targetName = ev.target?.name || getRoomMemberDisplayname(client, ev, ev.getStateKey());
@@ -133,10 +134,26 @@ function textForMemberEvent(
             }
         }
         case KnownMembership.Ban:
-            return () =>
-                reason
-                    ? _t("timeline|m.room.member|ban_reason", { senderName, targetName, reason })
-                    : _t("timeline|m.room.member|ban", { senderName, targetName });
+            if (allowJSX) {
+                return reason
+                    ? () =>
+                          _t(
+                              "timeline|m.room.member|ban_reason_spoiler",
+                              { senderName, reason },
+                              { user: () => <Spoiler>{targetName}</Spoiler> },
+                          )
+                    : () =>
+                          _t(
+                              "timeline|m.room.member|ban_spoiler",
+                              { senderName },
+                              { user: () => <Spoiler>{targetName}</Spoiler> },
+                          );
+            }
+
+            return reason
+                ? () => _t("timeline|m.room.member|ban_reason", { senderName, reason })
+                : () => _t("timeline|m.room.member|ban", { senderName });
+
         case KnownMembership.Join:
             if (prevContent && prevContent.membership === KnownMembership.Join) {
                 const modDisplayname = getModification(prevContent.displayname, content.displayname);