Hide pinned message link in timeline when the last pinned message is unpinned

Author: florianduros

src/TextForEvent.tsx

@@ -615,10 +615,37 @@ function textForPinnedEvent(event: MatrixEvent, client: MatrixClient, allowJSX:
     }
 
     if (newlyUnpinned.length === 1 && newlyPinned.length === 0) {
+        const emptyPinned = pinned.length === 0;
+
         // A single message was unpinned, include a link to that message.
         if (allowJSX) {
             const messageId = newlyUnpinned.pop()!;
 
+            // If there are no remaining pinned messages, don't show the link to all the pinned messages
+            if (emptyPinned) {
+                return () => (
+                    <span>
+                        {_t(
+                            "timeline|m.room.pinned_events|unpinned_last_link",
+                            { senderName },
+                            {
+                                a: (sub) => (
+                                    <AccessibleButton
+                                        kind="link_inline"
+                                        onClick={() => {
+                                            PosthogTrackers.trackInteraction("PinnedMessageStateEventClick");
+                                            highlightEvent(roomId, messageId);
+                                        }}
+                                    >
+                                        {sub}
+                                    </AccessibleButton>
+                                ),
+                            },
+                        )}
+                    </span>
+                );
+            }
+
             return () => (
                 <span>
                     {_t(
@@ -647,7 +674,10 @@ function textForPinnedEvent(event: MatrixEvent, client: MatrixClient, allowJSX:
             );
         }
 
-        return () => _t("timeline|m.room.pinned_events|unpinned", { senderName });
+        return () =>
+            emptyPinned
+                ? _t("timeline|m.room.pinned_events|unpinned_last", { senderName })
+                : _t("timeline|m.room.pinned_events|unpinned", { senderName });
     }
 
     if (allowJSX) {

src/i18n/strings/en_EN.json

@@ -3479,6 +3479,8 @@
             "pinned": "%(senderName)s pinned a message to this room. See all pinned messages.",
             "pinned_link": "%(senderName)s pinned <a>a message</a> to this room. See all <b>pinned messages</b>.",
             "unpinned": "%(senderName)s unpinned a message from this room. See all pinned messages.",
+            "unpinned_last": "%(senderName)s unpinned a message from this room.",
+            "unpinned_last_link": "%(senderName)s unpinned <a>a message</a> from this room.",
             "unpinned_link": "%(senderName)s unpinned <a>a message</a> from this room. See all <b>pinned messages</b>."
         },
         "m.room.power_levels": {

test/TextForEvent-test.ts

@@ -103,7 +103,7 @@ describe("TextForEvent", () => {
             const plainText = textForEvent(event, mockClient);
             const component = render(textForEvent(event, mockClient, true) as ReactElement);
 
-            const expectedText = "@foo:example.com unpinned a message from this room. See all pinned messages.";
+            const expectedText = "@foo:example.com unpinned a message from this room.";
             expect(plainText).toBe(expectedText);
             expect(component.container).toHaveTextContent(expectedText);
         });