From 294103f00a87e9be289a99707ca2a96f8fe7bebb Mon Sep 17 00:00:00 2001
From: Shea Duma <nu@she-a.eu>
Date: Tue, 14 Apr 2026 03:02:32 +0300
Subject: [PATCH 1/3] smol fix :plead:

---
 .changeset/fix-initial-pins.md                |  5 ++
 .../timeline/useTimelineEventRenderer.tsx     | 49 ++++++++++---------
 2 files changed, 30 insertions(+), 24 deletions(-)
 create mode 100644 .changeset/fix-initial-pins.md

diff --git a/.changeset/fix-initial-pins.md b/.changeset/fix-initial-pins.md
new file mode 100644
index 000000000..424daeb28
--- /dev/null
+++ b/.changeset/fix-initial-pins.md
@@ -0,0 +1,5 @@
+---
+default: patch
+---
+
+Fix the first pin event in a room looking empty
diff --git a/src/app/hooks/timeline/useTimelineEventRenderer.tsx b/src/app/hooks/timeline/useTimelineEventRenderer.tsx
index f781894fd..3a798d583 100644
--- a/src/app/hooks/timeline/useTimelineEventRenderer.tsx
+++ b/src/app/hooks/timeline/useTimelineEventRenderer.tsx
@@ -1069,12 +1069,20 @@ export function useTimelineEventRenderer({
         const senderName =
           getMemberDisplayName(room, senderId, nicknames) || getMxIdLocalPart(senderId);
 
-        const { pinned } = getContent.call(mEvent);
-        const prevPinned = getPrevContent.call(mEvent).pinned;
+        const pinned: string[] = getContent.call(mEvent).pinned;
+        const prevPinned: string[] = getPrevContent.call(mEvent).pinned;
         const pinsAdded =
-          prevPinned && pinned && pinned.filter((x: string) => !prevPinned.includes(x));
+          prevPinned && pinned
+            ? pinned.filter((x: string) => !prevPinned.includes(x))
+            : pinned.filter((x: string) => x.length > 0);
         const pinsRemoved =
           prevPinned && pinned && prevPinned.filter((x: string) => !pinned.includes(x));
+        let allPins =
+          (pinsRemoved && pinsAdded && pinsAdded.concat(pinsRemoved)) ||
+          pinsAdded ||
+          pinsRemoved ||
+          [];
+        allPins = allPins.slice(0, 4);
 
         const timeJSX = (
           <Time
@@ -1120,27 +1128,20 @@ export function useTimelineEventRenderer({
                       `has not changed the pins`) ||
                       `:`}
                   </Text>
-                  {(pinsAdded || pinsRemoved) &&
-                    pinsAdded
-                      .concat(pinsRemoved)
-                      .slice(0, 4)
-                      .map((x: string) => (
-                        <Reply
-                          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}
-                              />
-                            </>
-                          }
-                        />
-                      ))}
+                  {allPins.map((x: string) => (
+                    <Reply
+                      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} />
+                        </>
+                      }
+                    />
+                  ))}
                 </Box>
               }
             />

From f70d9a99b4fb833d509f52e16fc9f81848b818ec Mon Sep 17 00:00:00 2001
From: Shea Duma <nu@she-a.eu>
Date: Tue, 14 Apr 2026 03:12:00 +0300
Subject: [PATCH 2/3] smoler fix :plead::plead:

---
 .../timeline/useTimelineEventRenderer.tsx     | 47 ++++++++++---------
 1 file changed, 24 insertions(+), 23 deletions(-)

diff --git a/src/app/hooks/timeline/useTimelineEventRenderer.tsx b/src/app/hooks/timeline/useTimelineEventRenderer.tsx
index 3a798d583..1df35e699 100644
--- a/src/app/hooks/timeline/useTimelineEventRenderer.tsx
+++ b/src/app/hooks/timeline/useTimelineEventRenderer.tsx
@@ -1069,20 +1069,14 @@ export function useTimelineEventRenderer({
         const senderName =
           getMemberDisplayName(room, senderId, nicknames) || getMxIdLocalPart(senderId);
 
-        const pinned: string[] = getContent.call(mEvent).pinned;
-        const prevPinned: string[] = getPrevContent.call(mEvent).pinned;
+        const { pinned } = getContent.call(mEvent);
+        const prevPinned = getPrevContent.call(mEvent).pinned;
         const pinsAdded =
           prevPinned && pinned
             ? pinned.filter((x: string) => !prevPinned.includes(x))
             : pinned.filter((x: string) => x.length > 0);
         const pinsRemoved =
-          prevPinned && pinned && prevPinned.filter((x: string) => !pinned.includes(x));
-        let allPins =
-          (pinsRemoved && pinsAdded && pinsAdded.concat(pinsRemoved)) ||
-          pinsAdded ||
-          pinsRemoved ||
-          [];
-        allPins = allPins.slice(0, 4);
+          (prevPinned && pinned && prevPinned.filter((x: string) => !pinned.includes(x))) || [];
 
         const timeJSX = (
           <Time
@@ -1128,20 +1122,27 @@ export function useTimelineEventRenderer({
                       `has not changed the pins`) ||
                       `:`}
                   </Text>
-                  {allPins.map((x: string) => (
-                    <Reply
-                      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} />
-                        </>
-                      }
-                    />
-                  ))}
+                  {(pinsAdded || pinsRemoved) &&
+                    pinsAdded
+                      .concat(...pinsRemoved)
+                      .slice(0, 4)
+                      .map((x: string) => (
+                        <Reply
+                          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}
+                              />
+                            </>
+                          }
+                        />
+                      ))}
                 </Box>
               }
             />

From 472b822eea065cf2b60574a4c221564e9b3feb63 Mon Sep 17 00:00:00 2001
From: Shea Duma <nu@she-a.eu>
Date: Tue, 14 Apr 2026 03:15:02 +0300
Subject: [PATCH 3/3] smolest fix :plead::plead::plead:

---
 src/app/hooks/timeline/useTimelineEventRenderer.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/app/hooks/timeline/useTimelineEventRenderer.tsx b/src/app/hooks/timeline/useTimelineEventRenderer.tsx
index 1df35e699..66431b18a 100644
--- a/src/app/hooks/timeline/useTimelineEventRenderer.tsx
+++ b/src/app/hooks/timeline/useTimelineEventRenderer.tsx
@@ -1071,10 +1071,9 @@ export function useTimelineEventRenderer({
 
         const { pinned } = getContent.call(mEvent);
         const prevPinned = getPrevContent.call(mEvent).pinned;
-        const pinsAdded =
-          prevPinned && pinned
-            ? pinned.filter((x: string) => !prevPinned.includes(x))
-            : pinned.filter((x: string) => x.length > 0);
+        const pinsAdded = prevPinned
+          ? pinned?.filter((x: string) => !prevPinned.includes(x))
+          : pinned?.filter((x: string) => x.length > 0);
         const pinsRemoved =
           (prevPinned && pinned && prevPinned.filter((x: string) => !pinned.includes(x))) || [];