From d04f84ea2a81a5cfc71e7f168661ca7bde85faf4 Mon Sep 17 00:00:00 2001
From: 7w1 <noreply@sl.sable.moe>
Date: Thu, 14 May 2026 23:47:55 -0500
Subject: [PATCH] fix pin concat crash

---
 .../fix-pinned-events-timeline-crash.md       |  5 +++
 .../timeline/useTimelineEventRenderer.tsx     | 41 +++++++++----------
 2 files changed, 24 insertions(+), 22 deletions(-)
 create mode 100644 .changeset/fix-pinned-events-timeline-crash.md

diff --git a/.changeset/fix-pinned-events-timeline-crash.md b/.changeset/fix-pinned-events-timeline-crash.md
new file mode 100644
index 000000000..653e1ace2
--- /dev/null
+++ b/.changeset/fix-pinned-events-timeline-crash.md
@@ -0,0 +1,5 @@
+---
+default: patch
+---
+
+Fixed crash when rendering some `m.room.pinned_events` timeline rows (old/malformed pin state edge case).
diff --git a/src/app/hooks/timeline/useTimelineEventRenderer.tsx b/src/app/hooks/timeline/useTimelineEventRenderer.tsx
index b4d54d825..eb301257b 100644
--- a/src/app/hooks/timeline/useTimelineEventRenderer.tsx
+++ b/src/app/hooks/timeline/useTimelineEventRenderer.tsx
@@ -1060,6 +1060,9 @@ export function useTimelineEventRenderer({
         const pinsRemoved =
           (prevPinned && pinned && prevPinned.filter((x: string) => !pinned.includes(x))) || [];
 
+        const pinPreviewIds = (pinsAdded ?? []).concat(...(pinsRemoved ?? []));
+        const pinnedSet = new Set(pinned ?? []);
+
         const timeJSX = (
           <Time
             ts={mEvent.getTs()}
@@ -1104,28 +1107,22 @@ export function useTimelineEventRenderer({
                       `has not changed the pins`) ||
                       `:`}
                   </Text>
-                  {(pinsAdded || pinsRemoved) &&
-                    pinsAdded
-                      .concat(...pinsRemoved)
-                      .slice(0, 4)
-                      .map((x: string) => (
-                        <Reply
-                          key={x}
-                          style={{ opacity: '80%' }}
-                          room={room}
-                          replyEventId={x}
-                          onClick={handleOpenReply}
-                          replyIcon={
-                            <>
-                              <Icon size="100" src={Icons.Pin} />
-                              <Icon
-                                size="100"
-                                src={pinned.includes(x) ? Icons.Plus : Icons.Minus}
-                              />
-                            </>
-                          }
-                        />
-                      ))}
+                  {pinPreviewIds.length > 0 &&
+                    pinPreviewIds.slice(0, 4).map((x: string) => (
+                      <Reply
+                        key={x}
+                        style={{ opacity: '80%' }}
+                        room={room}
+                        replyEventId={x}
+                        onClick={handleOpenReply}
+                        replyIcon={
+                          <>
+                            <Icon size="100" src={Icons.Pin} />
+                            <Icon size="100" src={pinnedSet.has(x) ? Icons.Plus : Icons.Minus} />
+                          </>
+                        }
+                      />
+                    ))}
                 </Box>
               }
             />