Fix the first message showing as empty because it is expecting a prevContent (#685)

<!-- Please read
https://github.com/SableClient/Sable/blob/dev/CONTRIBUTING.md before
submitting your pull request -->

### Description

<!-- Please include a summary of the change. Please also include
relevant motivation and context. List any dependencies that are required
for this change. -->
Fixes the first message showing as empty because it is expecting a
prevContent

Fixes #

#### Type of change

- [x] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- [ ] This change requires a documentation update

### Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my own code
- [x] My changes generate no new warnings

### AI disclosure:

- [ ] Partially AI assisted (clarify which code was AI assisted and
briefly explain what it does).
- [ ] Fully AI generated (explain what all the generated code does in
moderate detail).
<!-- Write any explanation required here, but do not generate the
explanation using AI!! You must prove you understand what the code in
this PR does. -->
Having a hard time to think of a pun here made me optimize the fix
instead.

Author: 7w1

.changeset/fix-initial-pins.md

@@ -0,0 +1,5 @@
+---
+default: patch
+---
+
+Fix the first pin event in a room looking empty

src/app/hooks/timeline/useTimelineEventRenderer.tsx

@@ -1071,10 +1071,11 @@ 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));
+        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));
+          (prevPinned && pinned && prevPinned.filter((x: string) => !pinned.includes(x))) || [];
 
         const timeJSX = (
           <Time
@@ -1122,13 +1123,13 @@ export function useTimelineEventRenderer({
                   </Text>
                   {(pinsAdded || pinsRemoved) &&
                     pinsAdded
-                      .concat(pinsRemoved)
+                      .concat(...pinsRemoved)
                       .slice(0, 4)
                       .map((x: string) => (
                         <Reply
                           style={{ opacity: '80%' }}
                           room={room}
-                          replyEventId={x ?? ''}
+                          replyEventId={x}
                           onClick={handleOpenReply}
                           replyIcon={
                             <>