Add redacted event support

res/css/views/rooms/_PinnedMessageBanner.pcss

@@ -88,6 +88,13 @@
             text-overflow: ellipsis;
             white-space: nowrap;
         }
+
+        .mx_PinnedMessageBanner_redactedMessage {
+            grid-area: message;
+            height: 20px;
+            display: flex;
+            align-items: center;
+        }
     }
 
     .mx_PinnedMessageBanner_actions {

src/components/views/rooms/PinnedMessageBanner.tsx

@@ -31,6 +31,7 @@ import { MessagePreviewStore } from "../../../stores/room-list/MessagePreviewSto
 import dis from "../../../dispatcher/dispatcher";
 import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
 import { Action } from "../../../dispatcher/actions";
+import MessageEvent from "../messages/MessageEvent";
 
 /**
  * The props for the {@link PinnedMessageBanner} component.
@@ -49,7 +50,7 @@ interface PinnedMessageBannerProps {
 /**
  * A banner that displays the pinned messages in a room.
  */
-export function PinnedMessageBanner({ room }: PinnedMessageBannerProps): JSX.Element | null {
+export function PinnedMessageBanner({ room, permalinkCreator }: PinnedMessageBannerProps): JSX.Element | null {
     const pinnedEventIds = usePinnedEvents(room);
     const pinnedEvents = useSortedFetchedPinnedEvents(room, pinnedEventIds);
     const eventCount = pinnedEvents.length;
@@ -68,7 +69,7 @@ export function PinnedMessageBanner({ room }: PinnedMessageBannerProps): JSX.Ele
     const pinnedEvent = pinnedEvents[currentEventIndex];
     // Generate a preview for the pinned event
     const eventPreview = useMemo(() => {
-        if (!pinnedEvent) return null;
+        if (!pinnedEvent || pinnedEvent.isRedacted()) return null;
         return MessagePreviewStore.instance.generatePreviewForEvent(pinnedEvent);
     }, [pinnedEvent]);
 
@@ -112,6 +113,17 @@ export function PinnedMessageBanner({ room }: PinnedMessageBannerProps): JSX.Ele
                     </div>
                 )}
                 {eventPreview && <span className="mx_PinnedMessageBanner_message">{eventPreview}</span>}
+                {/* In case of redacted event, we want to display the nice sentence of the message event like in the timeline or in the pinned message list */}
+                {pinnedEvent.isRedacted() && (
+                    <div className="mx_PinnedMessageBanner_redactedMessage">
+                        <MessageEvent
+                            mxEvent={pinnedEvent}
+                            maxImageHeight={20}
+                            permalinkCreator={permalinkCreator}
+                            replacingEventId={pinnedEvent.replacingEventId()}
+                        />
+                    </div>
+                )}
             </button>
             {!isSinglePinnedEvent && <BannerButton room={room} />}
         </div>

src/hooks/usePinnedEvents.ts

@@ -130,8 +130,9 @@ async function fetchPinnedEvent(room: Room, pinnedEventId: string, cli: MatrixCl
     }
 
     // If the event is available locally, return it if it's pinnable
+    // or if it's redacted (to show the redacted event and to be able to unpin it)
     // Otherwise, return null
-    if (localEvent) return PinningUtils.isPinnable(localEvent) ? localEvent : null;
+    if (localEvent) return PinningUtils.isUnpinnable(localEvent) ? localEvent : null;
 
     try {
         // The event is not available locally, so we fetch the event and latest edit in parallel
@@ -156,7 +157,7 @@ async function fetchPinnedEvent(room: Room, pinnedEventId: string, cli: MatrixCl
         await room.processPollEvents([event]);
 
         const senderUserId = event.getSender();
-        if (senderUserId && PinningUtils.isPinnable(event)) {
+        if (senderUserId && PinningUtils.isUnpinnable(event)) {
             // Inject sender information
             event.sender = room.getMember(senderUserId);
             // Also inject any edits we've found

src/utils/PinningUtils.ts

@@ -36,11 +36,20 @@ export default class PinningUtils {
      * @return {boolean} True if the event may be pinned, false otherwise.
      */
     public static isPinnable(event: MatrixEvent): boolean {
-        if (!event) return false;
-        if (!this.PINNABLE_EVENT_TYPES.includes(event.getType())) return false;
         if (event.isRedacted()) return false;
+        return PinningUtils.isUnpinnable(event);
+    }
 
-        return true;
+    /**
+     * Determines if the given event may be unpinned.
+     * @param {MatrixEvent} event The event to check.
+     * @return {boolean} True if the event may be unpinned, false otherwise.
+     */
+    public static isUnpinnable(event: MatrixEvent): boolean {
+        console.log("event", event, event.getType());
+        if (!event) return false;
+        if (event.isRedacted()) return true;
+        return this.PINNABLE_EVENT_TYPES.includes(event.getType());
     }
 
     /**