Message Pinning: rework the message pinning list in the right panel (#12825)

* Fix pinning event loading after restart

* Update deps

* Replace pinned event list

* Add a dialog to confirm to unpin all messages

* Use `EmptyState` when there is no pinned messages

* Rework `PinnedEventTile` tests

* Add comments and refactor `PinnedMessageCard`

* Rework `PinnedMessageCard` tests

* Add tests for `UnpinAllDialog`

* Add e2e tests for pinned messages

* Replace 3px custom gap by 4px gap

* Use string interpolation for `Pin` action.

* Update playright sceenshot for empty state

playwright/e2e/pinned-messages/index.ts

@@ -0,0 +1,226 @@
+/*
+ * Copyright 2024 The Matrix.org Foundation C.I.C.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Page } from "@playwright/test";
+
+import { test as base, expect } from "../../element-web-test";
+import { Client } from "../../pages/client";
+import { ElementAppPage } from "../../pages/ElementAppPage";
+import { Bot } from "../../pages/bot";
+
+/**
+ * Set up for pinned message tests.
+ */
+export const test = base.extend<{
+    room1Name?: string;
+    room1: { name: string; roomId: string };
+    util: Helpers;
+}>({
+    displayName: "Alice",
+    botCreateOpts: { displayName: "Other User" },
+
+    room1Name: "Room 1",
+    room1: async ({ room1Name: name, app, user, bot }, use) => {
+        const roomId = await app.client.createRoom({ name, invite: [bot.credentials.userId] });
+        await use({ name, roomId });
+    },
+
+    util: async ({ page, app, bot }, use) => {
+        await use(new Helpers(page, app, bot));
+    },
+});
+
+export class Helpers {
+    constructor(
+        private page: Page,
+        private app: ElementAppPage,
+        private bot: Bot,
+    ) {}
+
+    /**
+     * Sends messages into given room as a bot
+     * @param room - the name of the room to send messages into
+     * @param messages - the list of messages to send, these can be strings or implementations of MessageSpec like `editOf`
+     */
+    async receiveMessages(room: string | { name: string }, messages: string[]) {
+        await this.sendMessageAsClient(this.bot, room, messages);
+    }
+
+    /**
+     * Use the supplied client to send messages or perform actions as specified by
+     * the supplied {@link Message} items.
+     */
+    private async sendMessageAsClient(cli: Client, roomName: string | { name: string }, messages: string[]) {
+        const room = await this.findRoomByName(typeof roomName === "string" ? roomName : roomName.name);
+        const roomId = await room.evaluate((room) => room.roomId);
+
+        for (const message of messages) {
+            await cli.sendMessage(roomId, { body: message, msgtype: "m.text" });
+
+            // TODO: without this wait, some tests that send lots of messages flake
+            // from time to time. I (andyb) have done some investigation, but it
+            // needs more work to figure out. The messages do arrive over sync, but
+            // they never appear in the timeline, and they never fire a
+            // Room.timeline event. I think this only happens with events that refer
+            // to other events (e.g. replies), so it might be caused by the
+            // referring event arriving before the referred-to event.
+            await this.page.waitForTimeout(100);
+        }
+    }
+
+    /**
+     * Find a room by its name
+     * @param roomName
+     * @private
+     */
+    private async findRoomByName(roomName: string) {
+        return this.app.client.evaluateHandle((cli, roomName) => {
+            return cli.getRooms().find((r) => r.name === roomName);
+        }, roomName);
+    }
+
+    /**
+     * Open the room with the supplied name.
+     */
+    async goTo(room: string | { name: string }) {
+        await this.app.viewRoomByName(typeof room === "string" ? room : room.name);
+    }
+
+    /**
+     * Pin the given message
+     * @param message
+     */
+    async pinMessage(message: string) {
+        const timelineMessage = this.page.locator(".mx_MTextBody", { hasText: message });
+        await timelineMessage.click({ button: "right" });
+        await this.page.getByRole("menuitem", { name: "Pin" }).click();
+    }
+
+    /**
+     * Pin the given messages
+     * @param messages
+     */
+    async pinMessages(messages: string[]) {
+        for (const message of messages) {
+            await this.pinMessage(message);
+        }
+    }
+
+    /**
+     * Open the room info panel
+     */
+    async openRoomInfo() {
+        await this.page.getByRole("button", { name: "Room info" }).nth(1).click();
+    }
+
+    /**
+     * Assert that the pinned count in the room info is correct
+     * Open the room info and check the pinned count
+     * @param count
+     */
+    async assertPinnedCountInRoomInfo(count: number) {
+        await expect(this.page.getByRole("menuitem", { name: "Pinned messages" })).toHaveText(
+            `Pinned messages${count}`,
+        );
+    }
+
+    /**
+     * Open the pinned messages list
+     */
+    async openPinnedMessagesList() {
+        await this.page.getByRole("menuitem", { name: "Pinned messages" }).click();
+    }
+
+    /**
+     * Return the right panel
+     * @private
+     */
+    private getRightPanel() {
+        return this.page.locator("#mx_RightPanel");
+    }
+
+    /**
+     * Assert that the pinned message list contains the given messages
+     * @param messages
+     */
+    async assertPinnedMessagesList(messages: string[]) {
+        const rightPanel = this.getRightPanel();
+        await expect(rightPanel.getByRole("heading", { name: "Pinned messages" })).toHaveText(
+            `${messages.length} Pinned messages`,
+        );
+        await expect(rightPanel).toMatchScreenshot(`pinned-messages-list-messages-${messages.length}.png`);
+
+        const list = rightPanel.getByRole("list");
+        await expect(list.getByRole("listitem")).toHaveCount(messages.length);
+
+        for (const message of messages) {
+            await expect(list.getByText(message)).toBeVisible();
+        }
+    }
+
+    /**
+     * Assert that the pinned message list is empty
+     */
+    async assertEmptyPinnedMessagesList() {
+        const rightPanel = this.getRightPanel();
+        await expect(rightPanel).toMatchScreenshot(`pinned-messages-list-empty.png`);
+    }
+
+    /**
+     * Open the unpin all dialog
+     */
+    async openUnpinAllDialog() {
+        await this.openRoomInfo();
+        await this.openPinnedMessagesList();
+        await this.page.getByRole("button", { name: "Unpin all" }).click();
+    }
+
+    /**
+     * Return the unpin all dialog
+     */
+    getUnpinAllDialog() {
+        return this.page.locator(".mx_Dialog", { hasText: "Unpin all messages?" });
+    }
+
+    /**
+     * Click on the Continue button of the unoin all dialog
+     */
+    async confirmUnpinAllDialog() {
+        await this.getUnpinAllDialog().getByRole("button", { name: "Continue" }).click();
+    }
+
+    /**
+     * Go back from the pinned messages list
+     */
+    async backPinnedMessagesList() {
+        await this.page.locator("#mx_RightPanel").getByTestId("base-card-back-button").click();
+    }
+
+    /**
+     * Open the contextual menu of a message in the pin message list and click on unpin
+     * @param message
+     */
+    async unpinMessageFromMessageList(message: string) {
+        const item = this.getRightPanel().getByRole("list").getByRole("listitem").filter({
+            hasText: message,
+        });
+
+        await item.getByRole("button").click();
+        await this.page.getByRole("menu", { name: "Open menu" }).getByRole("menuitem", { name: "Unpin" }).click();
+    }
+}
+
+export { expect };

playwright/e2e/pinned-messages/pinned-messages.spec.ts

@@ -0,0 +1,79 @@
+/*
+ * Copyright 2024 The Matrix.org Foundation C.I.C.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { test } from "./index";
+import { expect } from "../../element-web-test";
+
+test.describe("Pinned messages", () => {
+    test.use({
+        labsFlags: ["feature_pinning"],
+    });
+
+    test("should show the empty state when there are no pinned messages", async ({ page, app, room1, util }) => {
+        await util.goTo(room1);
+        await util.openRoomInfo();
+        await util.assertPinnedCountInRoomInfo(0);
+        await util.openPinnedMessagesList();
+        await util.assertEmptyPinnedMessagesList();
+    });
+
+    test("should pin messages and show them in the room info panel", async ({ page, app, room1, util }) => {
+        await util.goTo(room1);
+        await util.receiveMessages(room1, ["Msg1", "Msg2", "Msg3", "Msg4"]);
+
+        await util.pinMessages(["Msg1", "Msg2", "Msg4"]);
+        await util.openRoomInfo();
+        await util.assertPinnedCountInRoomInfo(3);
+    });
+
+    test("should pin messages and show them in the pinned message panel", async ({ page, app, room1, util }) => {
+        await util.goTo(room1);
+        await util.receiveMessages(room1, ["Msg1", "Msg2", "Msg3", "Msg4"]);
+
+        // Pin the messages
+        await util.pinMessages(["Msg1", "Msg2", "Msg4"]);
+        await util.openRoomInfo();
+        await util.openPinnedMessagesList();
+        await util.assertPinnedMessagesList(["Msg1", "Msg2", "Msg4"]);
+    });
+
+    test("should unpin one message", async ({ page, app, room1, util }) => {
+        await util.goTo(room1);
+        await util.receiveMessages(room1, ["Msg1", "Msg2", "Msg3", "Msg4"]);
+        await util.pinMessages(["Msg1", "Msg2", "Msg4"]);
+
+        await util.openRoomInfo();
+        await util.openPinnedMessagesList();
+        await util.unpinMessageFromMessageList("Msg2");
+        await util.assertPinnedMessagesList(["Msg1", "Msg4"]);
+        await util.backPinnedMessagesList();
+        await util.assertPinnedCountInRoomInfo(2);
+    });
+
+    test("should unpin all messages", async ({ page, app, room1, util }) => {
+        await util.goTo(room1);
+        await util.receiveMessages(room1, ["Msg1", "Msg2", "Msg3", "Msg4"]);
+        await util.pinMessages(["Msg1", "Msg2", "Msg4"]);
+
+        await util.openUnpinAllDialog();
+        await expect(util.getUnpinAllDialog()).toMatchScreenshot("unpin-all-dialog.png");
+        await util.confirmUnpinAllDialog();
+
+        await util.assertEmptyPinnedMessagesList();
+        await util.backPinnedMessagesList();
+        await util.assertPinnedCountInRoomInfo(0);
+    });
+});

res/css/_common.pcss

@@ -604,7 +604,7 @@ legend {
 .mx_Dialog
     button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
         .mx_UserProfileSettings button
-    ):not(.mx_ThemeChoicePanel_CustomTheme button),
+    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button),
 .mx_Dialog input[type="submit"],
 .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton),
 .mx_Dialog_buttons input[type="submit"] {
@@ -624,14 +624,14 @@ legend {
 .mx_Dialog
     button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
         .mx_UserProfileSettings button
-    ):not(.mx_ThemeChoicePanel_CustomTheme button):last-child {
+    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):last-child {
     margin-right: 0px;
 }
 
 .mx_Dialog
     button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
         .mx_UserProfileSettings button
-    ):not(.mx_ThemeChoicePanel_CustomTheme button):focus,
+    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):focus,
 .mx_Dialog input[type="submit"]:focus,
 .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):focus,
 .mx_Dialog_buttons input[type="submit"]:focus {
@@ -643,7 +643,7 @@ legend {
 .mx_Dialog_buttons
     button.mx_Dialog_primary:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):not(
         .mx_UserProfileSettings button
-    ):not(.mx_ThemeChoicePanel_CustomTheme button),
+    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button),
 .mx_Dialog_buttons input[type="submit"].mx_Dialog_primary {
     color: var(--cpd-color-text-on-solid-primary);
     background-color: var(--cpd-color-bg-action-primary-rest);
@@ -656,7 +656,7 @@ legend {
 .mx_Dialog_buttons
     button.danger:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):not(.mx_UserProfileSettings button):not(
         .mx_ThemeChoicePanel_CustomTheme button
-    ),
+    ):not(.mx_UnpinAllDialog button),
 .mx_Dialog_buttons input[type="submit"].danger {
     background-color: var(--cpd-color-bg-critical-primary);
     border: solid 1px var(--cpd-color-bg-critical-primary);
@@ -672,7 +672,7 @@ legend {
 .mx_Dialog
     button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
         .mx_UserProfileSettings button
-    ):not(.mx_ThemeChoicePanel_CustomTheme button):disabled,
+    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):disabled,
 .mx_Dialog input[type="submit"]:disabled,
 .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):disabled,
 .mx_Dialog_buttons input[type="submit"]:disabled {

res/css/_components.pcss

@@ -167,6 +167,7 @@
 @import "./views/dialogs/_SpaceSettingsDialog.pcss";
 @import "./views/dialogs/_SpotlightDialog.pcss";
 @import "./views/dialogs/_TermsDialog.pcss";
+@import "./views/dialogs/_UnpinAllDialog.pcss";
 @import "./views/dialogs/_UntrustedDeviceDialog.pcss";
 @import "./views/dialogs/_UploadConfirmDialog.pcss";
 @import "./views/dialogs/_UserSettingsDialog.pcss";

res/css/views/dialogs/_UnpinAllDialog.pcss

@@ -0,0 +1,38 @@
+/*
+ * Copyright 2024 The Matrix.org Foundation C.I.C.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.mx_UnpinAllDialog {
+    /* 396 is coming from figma and we remove the left and right paddings of the dialog */
+    width: calc(396px - (var(--cpd-space-10x) * 2));
+    padding-bottom: var(--cpd-space-2x);
+
+    .mx_UnpinAllDialog_title {
+        /* Override the default heading style */
+        font: var(--cpd-font-heading-sm-semibold) !important;
+        margin-bottom: var(--cpd-space-3x);
+    }
+
+    .mx_UnpinAllDialog_buttons {
+        display: flex;
+        flex-direction: column;
+        gap: var(--cpd-space-4x);
+        margin: var(--cpd-space-8x) var(--cpd-space-2x) 0 var(--cpd-space-2x);
+
+        button {
+            width: 100%;
+        }
+    }
+}

res/css/views/right_panel/_PinnedMessagesCard.pcss

@@ -15,50 +15,40 @@ limitations under the License.
 */
 
 .mx_PinnedMessagesCard {
-    .mx_PinnedMessagesCard_empty_wrapper {
+    --unpin-height: 76px;
+
+    .mx_PinnedMessagesCard_wrapper {
         display: flex;
-        height: 100%;
+        flex-direction: column;
+        padding: var(--cpd-space-4x);
+        gap: var(--cpd-space-6x);
+        overflow-y: auto;
 
-        .mx_PinnedMessagesCard_empty {
-            height: max-content;
-            text-align: center;
-            margin: auto 40px;
-
-            .mx_PinnedMessagesCard_MessageActionBar {
-                pointer-events: none;
-                width: max-content;
-                margin: 0 auto;
-
-                /* Cancel the default values for non-interactivity */
-                position: unset;
-                visibility: visible;
-                cursor: unset;
-
-                &::before {
-                    content: unset;
-                }
-
-                .mx_MessageActionBar_optionsButton {
-                    background: var(--MessageActionBar-item-hover-background);
-                    border-radius: var(--MessageActionBar-item-hover-borderRadius);
-                    z-index: var(--MessageActionBar-item-hover-zIndex);
-                    color: var(--cpd-color-icon-primary);
-                }
-            }
-
-            .mx_PinnedMessagesCard_empty_header {
-                color: $primary-content;
-                margin-block: $spacing-24 $spacing-20;
-            }
-
-            > span {
-                font-size: $font-12px;
-                line-height: $font-15px;
-                color: $secondary-content;
-            }
+        .mx_PinnedMessagesCard_Separator {
+            min-height: 1px;
+            /* Override default compound value */
+            margin-block: 0;
         }
     }
 
+    .mx_PinnedMessagesCard_wrapper_unpin_all {
+        /* Remove the unpin all button height and the top and bottom padding  */
+        height: calc(100% - var(--unpin-height) - calc(var(--cpd-space-4x) * 2));
+    }
+
+    .mx_PinnedMessagesCard_unpin {
+        /* Make it float at the bottom of the unpin panel */
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        height: var(--unpin-height);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        box-shadow: 0 4px 24px 0 rgba(27, 29, 34, 0.1);
+        background: var(--cpd-color-bg-canvas-default);
+    }
+
     .mx_EventTile_body {
         word-break: break-word;
     }

res/css/views/rooms/_PinnedEventTile.pcss

@@ -15,95 +15,27 @@ limitations under the License.
 */
 
 .mx_PinnedEventTile {
-    min-height: 40px;
-    width: 100%;
-    padding: 0 4px 12px;
+    display: flex;
+    gap: var(--cpd-space-4x);
+    align-items: flex-start;
 
-    display: grid;
-    grid-template-areas:
-        "avatar name remove"
-        "content content content"
-        "footer footer footer";
-    grid-template-rows: max-content auto max-content;
-    grid-template-columns: 24px auto 24px;
-    grid-row-gap: 12px;
-    grid-column-gap: 8px;
+    .mx_PinnedEventTile_wrapper {
+        display: flex;
+        flex-direction: column;
+        gap: var(--cpd-space-1x);
+        width: 100%;
 
-    & + .mx_PinnedEventTile {
-        padding: 12px 4px;
-        border-top: 1px solid $menu-border-color;
-    }
+        .mx_PinnedEventTile_top {
+            display: flex;
+            gap: var(--cpd-space-1x);
+            justify-content: space-between;
+            align-items: center;
 
-    .mx_PinnedEventTile_senderAvatar,
-    .mx_PinnedEventTile_sender,
-    .mx_PinnedEventTile_unpinButton,
-    .mx_PinnedEventTile_message,
-    .mx_PinnedEventTile_footer {
-        min-width: 0; /* Prevent a grid blowout */
-    }
-
-    .mx_PinnedEventTile_senderAvatar {
-        grid-area: avatar;
-    }
-
-    .mx_PinnedEventTile_sender {
-        grid-area: name;
-        font-weight: var(--cpd-font-weight-semibold);
-        font-size: $font-15px;
-        line-height: $font-24px;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
-    }
-
-    .mx_PinnedEventTile_unpinButton {
-        visibility: hidden;
-        grid-area: remove;
-        position: relative;
-        width: 24px;
-        height: 24px;
-        border-radius: 8px;
-
-        &:hover {
-            background-color: $roomheader-addroom-bg-color;
-        }
-
-        &::before {
-            content: "";
-            position: absolute;
-            height: inherit;
-            width: inherit;
-            background: $secondary-content;
-            mask-position: center;
-            mask-size: 8px;
-            mask-repeat: no-repeat;
-            mask-image: url("$(res)/img/image-view/close.svg");
-        }
-    }
-
-    .mx_PinnedEventTile_message {
-        grid-area: content;
-    }
-
-    .mx_PinnedEventTile_footer {
-        grid-area: footer;
-        font-size: $font-10px;
-        line-height: 12px;
-
-        .mx_PinnedEventTile_timestamp {
-            color: $secondary-content;
-            display: unset;
-            width: unset; /* Cancel the default width value */
-        }
-
-        .mx_AccessibleButton_kind_link {
-            margin-left: 12px;
-        }
-    }
-
-    &:hover {
-        .mx_PinnedEventTile_unpinButton {
-            visibility: visible;
+            .mx_PinnedEventTile_sender {
+                text-overflow: ellipsis;
+                overflow: hidden;
+                white-space: nowrap;
+            }
         }
     }
 }

src/components/structures/RightPanel.tsx

@@ -34,7 +34,7 @@ import ThreadView from "./ThreadView";
 import ThreadPanel from "./ThreadPanel";
 import NotificationPanel from "./NotificationPanel";
 import ResizeNotifier from "../../utils/ResizeNotifier";
-import PinnedMessagesCard from "../views/right_panel/PinnedMessagesCard";
+import { PinnedMessagesCard } from "../views/right_panel/PinnedMessagesCard";
 import { RoomPermalinkCreator } from "../../utils/permalinks/Permalinks";
 import { E2EStatus } from "../../utils/ShieldUtils";
 import TimelineCard from "../views/right_panel/TimelineCard";

src/components/views/dialogs/UnpinAllDialog.tsx

@@ -0,0 +1,77 @@
+/*
+ * Copyright 2024 The Matrix.org Foundation C.I.C.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { JSX } from "react";
+import { Button, Text } from "@vector-im/compound-web";
+import { EventType, MatrixClient } from "matrix-js-sdk/src/matrix";
+import { logger } from "matrix-js-sdk/src/logger";
+
+import BaseDialog from "../dialogs/BaseDialog";
+import { _t } from "../../../languageHandler";
+
+/**
+ * Properties for {@link UnpinAllDialog}.
+ */
+interface UnpinAllDialogProps {
+    /*
+     * The matrix client to use.
+     */
+    matrixClient: MatrixClient;
+    /*
+     * The room ID to unpin all events in.
+     */
+    roomId: string;
+    /*
+     * Callback for when the dialog is closed.
+     */
+    onFinished: () => void;
+}
+
+/**
+ * A dialog that asks the user to confirm unpinning all events in a room.
+ */
+export function UnpinAllDialog({ matrixClient, roomId, onFinished }: UnpinAllDialogProps): JSX.Element {
+    return (
+        <BaseDialog
+            hasCancel={true}
+            title={_t("right_panel|pinned_messages|unpin_all|title")}
+            titleClass="mx_UnpinAllDialog_title"
+            className="mx_UnpinAllDialog"
+            onFinished={onFinished}
+            fixedWidth={false}
+        >
+            <Text as="span">{_t("right_panel|pinned_messages|unpin_all|content")}</Text>
+            <div className="mx_UnpinAllDialog_buttons">
+                <Button
+                    destructive={true}
+                    onClick={async () => {
+                        try {
+                            await matrixClient.sendStateEvent(roomId, EventType.RoomPinnedEvents, { pinned: [] }, "");
+                        } catch (e) {
+                            logger.error("Failed to unpin all events:", e);
+                        }
+                        onFinished();
+                    }}
+                >
+                    {_t("action|continue")}
+                </Button>
+                <Button kind="tertiary" onClick={onFinished}>
+                    {_t("action|cancel")}
+                </Button>
+            </div>
+        </BaseDialog>
+    );
+}

src/components/views/right_panel/PinnedMessagesCard.tsx

@@ -14,41 +14,62 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useCallback, useContext, useEffect, useState } from "react";
-import { Room, RoomEvent, RoomStateEvent, MatrixEvent, EventType, RelationType } from "matrix-js-sdk/src/matrix";
+import React, { useCallback, useEffect, useState, JSX } from "react";
+import {
+    Room,
+    RoomEvent,
+    RoomStateEvent,
+    MatrixEvent,
+    EventType,
+    RelationType,
+    EventTimeline,
+} from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
+import { Button, Separator } from "@vector-im/compound-web";
+import classNames from "classnames";
+import PinIcon from "@vector-im/compound-design-tokens/assets/web/icons/pin";
 
-import { Icon as ContextMenuIcon } from "../../../../res/img/element-icons/context-menu.svg";
-import { Icon as EmojiIcon } from "../../../../res/img/element-icons/room/message-bar/emoji.svg";
-import { Icon as ReplyIcon } from "../../../../res/img/element-icons/room/message-bar/reply.svg";
 import { _t } from "../../../languageHandler";
 import BaseCard from "./BaseCard";
 import Spinner from "../elements/Spinner";
-import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import { useMatrixClientContext } from "../../../contexts/MatrixClientContext";
 import { useTypedEventEmitter } from "../../../hooks/useEventEmitter";
 import PinningUtils from "../../../utils/PinningUtils";
 import { useAsyncMemo } from "../../../hooks/useAsyncMemo";
-import PinnedEventTile from "../rooms/PinnedEventTile";
+import { PinnedEventTile } from "../rooms/PinnedEventTile";
 import { useRoomState } from "../../../hooks/useRoomState";
-import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContext";
+import RoomContext, { TimelineRenderingType, useRoomContext } from "../../../contexts/RoomContext";
 import { ReadPinsEventId } from "./types";
 import Heading from "../typography/Heading";
 import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
 import { filterBoolean } from "../../../utils/arrays";
+import Modal from "../../../Modal";
+import { UnpinAllDialog } from "../dialogs/UnpinAllDialog";
+import EmptyState from "./EmptyState";
 
-interface IProps {
-    room: Room;
-    permalinkCreator: RoomPermalinkCreator;
-    onClose(): void;
-}
-
+/**
+ * Get the pinned event IDs from a room.
+ * @param room
+ */
 function getPinnedEventIds(room?: Room): string[] {
-    return room?.currentState.getStateEvents(EventType.RoomPinnedEvents, "")?.getContent()?.pinned ?? [];
+    return (
+        room
+            ?.getLiveTimeline()
+            .getState(EventTimeline.FORWARDS)
+            ?.getStateEvents(EventType.RoomPinnedEvents, "")
+            ?.getContent()?.pinned ?? []
+    );
 }
 
+/**
+ * Get the pinned event IDs from a room.
+ * @param room
+ */
 export const usePinnedEvents = (room?: Room): string[] => {
     const [pinnedEvents, setPinnedEvents] = useState<string[]>(getPinnedEventIds(room));
 
+    // Update the pinned events when the room state changes
+    // Filter out events that are not pinned events
     const update = useCallback(
         (ev?: MatrixEvent) => {
             if (ev && ev.getType() !== EventType.RoomPinnedEvents) return;
@@ -57,7 +78,7 @@ export const usePinnedEvents = (room?: Room): string[] => {
         [room],
     );
 
-    useTypedEventEmitter(room?.currentState, RoomStateEvent.Events, update);
+    useTypedEventEmitter(room?.getLiveTimeline().getState(EventTimeline.FORWARDS), RoomStateEvent.Events, update);
     useEffect(() => {
         setPinnedEvents(getPinnedEventIds(room));
         return () => {
@@ -67,13 +88,23 @@ export const usePinnedEvents = (room?: Room): string[] => {
     return pinnedEvents;
 };
 
+/**
+ * Get the read pinned event IDs from a room.
+ * @param room
+ */
 function getReadPinnedEventIds(room?: Room): Set<string> {
     return new Set(room?.getAccountData(ReadPinsEventId)?.getContent()?.event_ids ?? []);
 }
 
+/**
+ * Get the read pinned event IDs from a room.
+ * @param room
+ */
 export const useReadPinnedEvents = (room?: Room): Set<string> => {
     const [readPinnedEvents, setReadPinnedEvents] = useState<Set<string>>(new Set());
 
+    // Update the read pinned events when the room state changes
+    // Filter out events that are not read pinned events
     const update = useCallback(
         (ev?: MatrixEvent) => {
             if (ev && ev.getType() !== ReadPinsEventId) return;
@@ -92,36 +123,36 @@ export const useReadPinnedEvents = (room?: Room): Set<string> => {
     return readPinnedEvents;
 };
 
-const PinnedMessagesCard: React.FC<IProps> = ({ room, onClose, permalinkCreator }) => {
-    const cli = useContext(MatrixClientContext);
-    const roomContext = useContext(RoomContext);
-    const canUnpin = useRoomState(room, (state) => state.mayClientSendStateEvent(EventType.RoomPinnedEvents, cli));
-    const pinnedEventIds = usePinnedEvents(room);
-    const readPinnedEvents = useReadPinnedEvents(room);
+/**
+ * Fetch the pinned events
+ * @param room
+ * @param pinnedEventIds
+ */
+function useFetchedPinnedEvents(room: Room, pinnedEventIds: string[]): Array<MatrixEvent | null> | null {
+    const cli = useMatrixClientContext();
 
-    useEffect(() => {
-        if (!cli || cli.isGuest()) return; // nothing to do
-        const newlyRead = pinnedEventIds.filter((id) => !readPinnedEvents.has(id));
-        if (newlyRead.length > 0) {
-            // clear out any read pinned events which no longer are pinned
-            cli.setRoomAccountData(room.roomId, ReadPinsEventId, {
-                event_ids: pinnedEventIds,
-            });
-        }
-    }, [cli, room.roomId, pinnedEventIds, readPinnedEvents]);
-
-    const pinnedEvents = useAsyncMemo(
+    return useAsyncMemo(
         () => {
             const promises = pinnedEventIds.map(async (eventId): Promise<MatrixEvent | null> => {
                 const timelineSet = room.getUnfilteredTimelineSet();
+                // Get the event from the local timeline
                 const localEvent = timelineSet
                     ?.getTimelineForEvent(eventId)
                     ?.getEvents()
                     .find((e) => e.getId() === eventId);
+
+                // Decrypt the event if it's encrypted
+                // Can happen when the tab is refreshed and the pinned events card is opened directly
+                if (localEvent?.isEncrypted()) {
+                    await cli.decryptEventIfNeeded(localEvent);
+                }
+
+                // If the event is available locally, return it if it's pinnable
+                // Otherwise, return null
                 if (localEvent) return PinningUtils.isPinnable(localEvent) ? localEvent : null;
 
                 try {
-                    // Fetch the event and latest edit in parallel
+                    // The event is not available locally, so we fetch the event and latest edit in parallel
                     const [
                         evJson,
                         {
@@ -131,10 +162,15 @@ const PinnedMessagesCard: React.FC<IProps> = ({ room, onClose, permalinkCreator
                         cli.fetchRoomEvent(room.roomId, eventId),
                         cli.relations(room.roomId, eventId, RelationType.Replace, null, { limit: 1 }),
                     ]);
+
                     const event = new MatrixEvent(evJson);
+
+                    // Decrypt the event if it's encrypted
                     if (event.isEncrypted()) {
-                        await cli.decryptEventIfNeeded(event); // TODO await?
+                        await cli.decryptEventIfNeeded(event);
                     }
+
+                    // Handle poll events
                     await room.processPollEvents([event]);
 
                     const senderUserId = event.getSender();
@@ -158,62 +194,59 @@ const PinnedMessagesCard: React.FC<IProps> = ({ room, onClose, permalinkCreator
         [cli, room, pinnedEventIds],
         null,
     );
+}
 
-    let content: JSX.Element[] | JSX.Element | undefined;
+/**
+ * List the pinned messages in a room inside a Card.
+ */
+interface PinnedMessagesCardProps {
+    /**
+     * The room to list the pinned messages for.
+     */
+    room: Room;
+    /**
+     * Permalink of the room.
+     */
+    permalinkCreator: RoomPermalinkCreator;
+    /**
+     * Callback for when the card is closed.
+     */
+    onClose(): void;
+}
+
+export function PinnedMessagesCard({ room, onClose, permalinkCreator }: PinnedMessagesCardProps): JSX.Element {
+    const cli = useMatrixClientContext();
+    const roomContext = useRoomContext();
+    const pinnedEventIds = usePinnedEvents(room);
+    const readPinnedEvents = useReadPinnedEvents(room);
+    const pinnedEvents = useFetchedPinnedEvents(room, pinnedEventIds);
+
+    useEffect(() => {
+        if (!cli || cli.isGuest()) return; // nothing to do
+        const newlyRead = pinnedEventIds.filter((id) => !readPinnedEvents.has(id));
+        if (newlyRead.length > 0) {
+            // clear out any read pinned events which no longer are pinned
+            cli.setRoomAccountData(room.roomId, ReadPinsEventId, {
+                event_ids: pinnedEventIds,
+            });
+        }
+    }, [cli, room.roomId, pinnedEventIds, readPinnedEvents]);
+
+    let content: JSX.Element;
     if (!pinnedEventIds.length) {
         content = (
-            <div className="mx_PinnedMessagesCard_empty_wrapper">
-                <div className="mx_PinnedMessagesCard_empty">
-                    {/* XXX: We reuse the classes for simplicity, but deliberately not the components for non-interactivity. */}
-                    <div className="mx_MessageActionBar mx_PinnedMessagesCard_MessageActionBar">
-                        <div className="mx_MessageActionBar_iconButton">
-                            <EmojiIcon />
-                        </div>
-                        <div className="mx_MessageActionBar_iconButton">
-                            <ReplyIcon />
-                        </div>
-                        <div className="mx_MessageActionBar_iconButton mx_MessageActionBar_optionsButton">
-                            <ContextMenuIcon />
-                        </div>
-                    </div>
-
-                    <Heading size="4" className="mx_PinnedMessagesCard_empty_header">
-                        {_t("right_panel|pinned_messages|empty")}
-                    </Heading>
-                    {_t(
-                        "right_panel|pinned_messages|explainer",
-                        {},
-                        {
-                            b: (sub) => <b>{sub}</b>,
-                        },
-                    )}
-                </div>
-            </div>
+            <EmptyState
+                Icon={PinIcon}
+                title={_t("right_panel|pinned_messages|empty_title")}
+                description={_t("right_panel|pinned_messages|empty_description", {
+                    pinAction: _t("action|pin"),
+                })}
+            />
         );
     } else if (pinnedEvents?.length) {
-        const onUnpinClicked = async (event: MatrixEvent): Promise<void> => {
-            const pinnedEvents = room.currentState.getStateEvents(EventType.RoomPinnedEvents, "");
-            if (pinnedEvents?.getContent()?.pinned) {
-                const pinned = pinnedEvents.getContent().pinned;
-                const index = pinned.indexOf(event.getId());
-                if (index !== -1) {
-                    pinned.splice(index, 1);
-                    await cli.sendStateEvent(room.roomId, EventType.RoomPinnedEvents, { pinned }, "");
-                }
-            }
-        };
-
-        // show them in reverse, with latest pinned at the top
-        content = filterBoolean(pinnedEvents)
-            .reverse()
-            .map((ev) => (
-                <PinnedEventTile
-                    key={ev.getId()}
-                    event={ev}
-                    onUnpinClicked={canUnpin ? () => onUnpinClicked(ev) : undefined}
-                    permalinkCreator={permalinkCreator}
-                />
-            ));
+        content = (
+            <PinnedMessages events={filterBoolean(pinnedEvents)} room={room} permalinkCreator={permalinkCreator} />
+        );
     } else {
         content = <Spinner />;
     }
@@ -223,7 +256,7 @@ const PinnedMessagesCard: React.FC<IProps> = ({ room, onClose, permalinkCreator
             header={
                 <div className="mx_BaseCard_header_title">
                     <Heading size="4" className="mx_BaseCard_header_title_heading">
-                        {_t("right_panel|pinned_messages|title")}
+                        {_t("right_panel|pinned_messages|header", { count: pinnedEventIds.length })}
                     </Heading>
                 </div>
             }
@@ -240,6 +273,79 @@ const PinnedMessagesCard: React.FC<IProps> = ({ room, onClose, permalinkCreator
             </RoomContext.Provider>
         </BaseCard>
     );
-};
+}
 
-export default PinnedMessagesCard;
+/**
+ * The pinned messages in a room.
+ */
+interface PinnedMessagesProps {
+    /**
+     * The pinned events.
+     */
+    events: MatrixEvent[];
+    /**
+     * The room the events are in.
+     */
+    room: Room;
+    /**
+     * The permalink creator to use.
+     */
+    permalinkCreator: RoomPermalinkCreator;
+}
+
+/**
+ * The pinned messages in a room.
+ */
+function PinnedMessages({ events, room, permalinkCreator }: PinnedMessagesProps): JSX.Element {
+    const matrixClient = useMatrixClientContext();
+
+    /**
+     * Whether the client can unpin events from the room.
+     */
+    const canUnpin = useRoomState(room, (state) =>
+        state.mayClientSendStateEvent(EventType.RoomPinnedEvents, matrixClient),
+    );
+
+    /**
+     * Opens the unpin all dialog.
+     */
+    const onUnpinAll = useCallback(async (): Promise<void> => {
+        Modal.createDialog(UnpinAllDialog, {
+            roomId: room.roomId,
+            matrixClient,
+        });
+    }, [room, matrixClient]);
+
+    return (
+        <>
+            <div
+                className={classNames("mx_PinnedMessagesCard_wrapper", {
+                    mx_PinnedMessagesCard_wrapper_unpin_all: canUnpin,
+                })}
+                role="list"
+            >
+                {events.reverse().map((event, i) => (
+                    <>
+                        <PinnedEventTile
+                            key={event.getId()}
+                            event={event}
+                            permalinkCreator={permalinkCreator}
+                            room={room}
+                        />
+                        {/* Add a separator if this isn't the last pinned message */}
+                        {events.length - 1 !== i && (
+                            <Separator key={`separator-${event.getId()}`} className="mx_PinnedMessagesCard_Separator" />
+                        )}
+                    </>
+                ))}
+            </div>
+            {canUnpin && (
+                <div className="mx_PinnedMessagesCard_unpin">
+                    <Button kind="tertiary" onClick={onUnpinAll}>
+                        {_t("right_panel|pinned_messages|unpin_all|button")}
+                    </Button>
+                </div>
+            )}
+        </>
+    );
+}

src/components/views/rooms/PinnedEventTile.tsx

@@ -15,112 +15,206 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
-import { MatrixEvent, EventType, RelationType, Relations } from "matrix-js-sdk/src/matrix";
+import React, { JSX, useCallback, useState } from "react";
+import { EventTimeline, EventType, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
+import { IconButton, Menu, MenuItem, Separator, Text } from "@vector-im/compound-web";
+import { Icon as ViewIcon } from "@vector-im/compound-design-tokens/icons/visibility-on.svg";
+import { Icon as UnpinIcon } from "@vector-im/compound-design-tokens/icons/unpin.svg";
+import { Icon as ForwardIcon } from "@vector-im/compound-design-tokens/icons/forward.svg";
+import { Icon as TriggerIcon } from "@vector-im/compound-design-tokens/icons/overflow-horizontal.svg";
+import { Icon as DeleteIcon } from "@vector-im/compound-design-tokens/icons/delete.svg";
+import classNames from "classnames";
 
 import dis from "../../../dispatcher/dispatcher";
 import { Action } from "../../../dispatcher/actions";
-import AccessibleButton from "../elements/AccessibleButton";
 import MessageEvent from "../messages/MessageEvent";
 import MemberAvatar from "../avatars/MemberAvatar";
 import { _t } from "../../../languageHandler";
-import { formatDate } from "../../../DateUtils";
-import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import { getUserNameColorClass } from "../../../utils/FormattingUtils";
 import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
 import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
+import { useMatrixClientContext } from "../../../contexts/MatrixClientContext";
+import { useRoomState } from "../../../hooks/useRoomState";
+import { isContentActionable } from "../../../utils/EventUtils";
+import { getForwardableEvent } from "../../../events";
+import { OpenForwardDialogPayload } from "../../../dispatcher/payloads/OpenForwardDialogPayload";
+import { createRedactEventDialog } from "../dialogs/ConfirmRedactDialog";
 
-interface IProps {
+const AVATAR_SIZE = "32px";
+
+/**
+ * Properties for {@link PinnedEventTile}.
+ */
+interface PinnedEventTileProps {
+    /**
+     * The event to display.
+     */
     event: MatrixEvent;
+    /**
+     * The permalink creator to use.
+     */
     permalinkCreator: RoomPermalinkCreator;
-    onUnpinClicked?(): void;
+    /**
+     * The room the event is in.
+     */
+    room: Room;
 }
 
-const AVATAR_SIZE = "24px";
+/**
+ * A pinned event tile.
+ */
+export function PinnedEventTile({ event, room, permalinkCreator }: PinnedEventTileProps): JSX.Element {
+    const sender = event.getSender();
+    if (!sender) {
+        throw new Error("Pinned event unexpectedly has no sender");
+    }
 
-export default class PinnedEventTile extends React.Component<IProps> {
-    public static contextType = MatrixClientContext;
-    public declare context: React.ContextType<typeof MatrixClientContext>;
-
-    private onTileClicked = (): void => {
-        dis.dispatch<ViewRoomPayload>({
-            action: Action.ViewRoom,
-            event_id: this.props.event.getId(),
-            highlighted: true,
-            room_id: this.props.event.getRoomId(),
-            metricsTrigger: undefined, // room doesn't change
-        });
-    };
-
-    // For event types like polls that use relations, we fetch those manually on
-    // mount and store them here, exposing them through getRelationsForEvent
-    private relations = new Map<string, Map<string, Relations>>();
-    private getRelationsForEvent = (
-        eventId: string,
-        relationType: RelationType | string,
-        eventType: EventType | string,
-    ): Relations | undefined => {
-        if (eventId === this.props.event.getId()) {
-            return this.relations.get(relationType)?.get(eventType);
-        }
-    };
-
-    public render(): React.ReactNode {
-        const sender = this.props.event.getSender();
-
-        if (!sender) {
-            throw new Error("Pinned event unexpectedly has no sender");
-        }
-
-        let unpinButton: JSX.Element | undefined;
-        if (this.props.onUnpinClicked) {
-            unpinButton = (
-                <AccessibleButton
-                    onClick={this.props.onUnpinClicked}
-                    className="mx_PinnedEventTile_unpinButton"
-                    title={_t("action|unpin")}
-                />
-            );
-        }
-
-        return (
-            <div className="mx_PinnedEventTile">
+    return (
+        <div className="mx_PinnedEventTile" role="listitem">
+            <div>
                 <MemberAvatar
                     className="mx_PinnedEventTile_senderAvatar"
-                    member={this.props.event.sender}
+                    member={event.sender}
                     size={AVATAR_SIZE}
                     fallbackUserId={sender}
                 />
-
-                <span className={"mx_PinnedEventTile_sender " + getUserNameColorClass(sender)}>
-                    {this.props.event.sender?.name || sender}
-                </span>
-
-                {unpinButton}
-
-                <div className="mx_PinnedEventTile_message">
-                    <MessageEvent
-                        mxEvent={this.props.event}
-                        getRelationsForEvent={this.getRelationsForEvent}
-                        // @ts-ignore - complaining that className is invalid when it's not
-                        className="mx_PinnedEventTile_body"
-                        maxImageHeight={150}
-                        onHeightChanged={() => {}} // we need to give this, apparently
-                        permalinkCreator={this.props.permalinkCreator}
-                        replacingEventId={this.props.event.replacingEventId()}
-                    />
-                </div>
-
-                <div className="mx_PinnedEventTile_footer">
-                    <span className="mx_MessageTimestamp mx_PinnedEventTile_timestamp">
-                        {formatDate(new Date(this.props.event.getTs()))}
-                    </span>
-
-                    <AccessibleButton onClick={this.onTileClicked} kind="link">
-                        {_t("common|view_message")}
-                    </AccessibleButton>
-                </div>
             </div>
-        );
-    }
+            <div className="mx_PinnedEventTile_wrapper">
+                <div className="mx_PinnedEventTile_top">
+                    <Text
+                        weight="semibold"
+                        className={classNames("mx_PinnedEventTile_sender", getUserNameColorClass(sender))}
+                        as="span"
+                    >
+                        {event.sender?.name || sender}
+                    </Text>
+                    <PinMenu event={event} room={room} permalinkCreator={permalinkCreator} />
+                </div>
+                <MessageEvent
+                    mxEvent={event}
+                    maxImageHeight={150}
+                    onHeightChanged={() => {}} // we need to give this, apparently
+                    permalinkCreator={permalinkCreator}
+                    replacingEventId={event.replacingEventId()}
+                />
+            </div>
+        </div>
+    );
+}
+
+/**
+ * Properties for {@link PinMenu}.
+ */
+interface PinMenuProps extends PinnedEventTileProps {}
+
+/**
+ * A popover menu with actions on the pinned event
+ */
+function PinMenu({ event, room, permalinkCreator }: PinMenuProps): JSX.Element {
+    const [open, setOpen] = useState(false);
+    const matrixClient = useMatrixClientContext();
+
+    /**
+     * View the event in the timeline.
+     */
+    const onViewInTimeline = useCallback(() => {
+        dis.dispatch<ViewRoomPayload>({
+            action: Action.ViewRoom,
+            event_id: event.getId(),
+            highlighted: true,
+            room_id: event.getRoomId(),
+            metricsTrigger: undefined, // room doesn't change
+        });
+    }, [event]);
+
+    /**
+     * Whether the client can unpin the event.
+     * Pin and unpin are using the same permission.
+     */
+    const canUnpin = useRoomState(room, (state) =>
+        state.mayClientSendStateEvent(EventType.RoomPinnedEvents, matrixClient),
+    );
+
+    /**
+     * Unpin the event.
+     * @param event
+     */
+    const onUnpin = useCallback(async (): Promise<void> => {
+        const pinnedEvents = room
+            .getLiveTimeline()
+            .getState(EventTimeline.FORWARDS)
+            ?.getStateEvents(EventType.RoomPinnedEvents, "");
+        if (pinnedEvents?.getContent()?.pinned) {
+            const pinned = pinnedEvents.getContent().pinned;
+            const index = pinned.indexOf(event.getId());
+            if (index !== -1) {
+                pinned.splice(index, 1);
+                await matrixClient.sendStateEvent(room.roomId, EventType.RoomPinnedEvents, { pinned }, "");
+            }
+        }
+    }, [event, room, matrixClient]);
+
+    const contentActionable = isContentActionable(event);
+    // Get the forwardable event for the given event
+    const forwardableEvent = contentActionable && getForwardableEvent(event, matrixClient);
+    /**
+     * Open the forward dialog.
+     */
+    const onForward = useCallback(() => {
+        if (forwardableEvent) {
+            dis.dispatch<OpenForwardDialogPayload>({
+                action: Action.OpenForwardDialog,
+                event: forwardableEvent,
+                permalinkCreator: permalinkCreator,
+            });
+        }
+    }, [forwardableEvent, permalinkCreator]);
+
+    /**
+     * Whether the client can redact the event.
+     */
+    const canRedact =
+        room
+            .getLiveTimeline()
+            .getState(EventTimeline.FORWARDS)
+            ?.maySendRedactionForEvent(event, matrixClient.getSafeUserId()) &&
+        event.getType() !== EventType.RoomServerAcl &&
+        event.getType() !== EventType.RoomEncryption;
+
+    /**
+     * Redact the event.
+     */
+    const onRedact = useCallback(
+        (): void =>
+            createRedactEventDialog({
+                mxEvent: event,
+            }),
+        [event],
+    );
+
+    return (
+        <Menu
+            open={open}
+            onOpenChange={setOpen}
+            showTitle={false}
+            title={_t("right_panel|pinned_messages|menu")}
+            side="right"
+            align="start"
+            trigger={
+                <IconButton size="24px" aria-label={_t("right_panel|pinned_messages|menu")}>
+                    <TriggerIcon />
+                </IconButton>
+            }
+        >
+            <MenuItem Icon={ViewIcon} label={_t("right_panel|pinned_messages|view")} onSelect={onViewInTimeline} />
+            {canUnpin && <MenuItem Icon={UnpinIcon} label={_t("action|unpin")} onSelect={onUnpin} />}
+            {forwardableEvent && <MenuItem Icon={ForwardIcon} label={_t("action|forward")} onSelect={onForward} />}
+            {canRedact && (
+                <>
+                    <Separator />
+                    <MenuItem kind="critical" Icon={DeleteIcon} label={_t("action|delete")} onSelect={onRedact} />
+                </>
+            )}
+        </Menu>
+    );
 }

src/i18n/strings/en_EN.json

@@ -1839,12 +1839,24 @@
         "files_button": "Files",
         "info": "Info",
         "pinned_messages": {
-            "empty": "Nothing pinned, yet",
-            "explainer": "If you have permissions, open the menu on any message and select <b>Pin</b> to stick them here.",
+            "empty_description": "Select a message and choose “%(pinAction)s” to it include here.",
+            "empty_title": "Pin important messages so that they can be easily discovered",
+            "header": {
+                "one": "1 Pinned message",
+                "other": "%(count)s Pinned messages",
+                "zero": "Pinned message"
+            },
             "limits": {
                 "other": "You can only pin up to %(count)s widgets"
             },
-            "title": "Pinned messages"
+            "menu": "Open menu",
+            "title": "Pinned messages",
+            "unpin_all": {
+                "button": "Unpin all messages",
+                "content": "Make sure that you really want to remove all pinned messages. This action can’t be undone.",
+                "title": "Unpin all messages?"
+            },
+            "view": "View in timeline"
         },
         "pinned_messages_button": "Pinned messages",
         "poll": {

test/components/views/dialogs/UnpinAllDialog-test.tsx

@@ -0,0 +1,46 @@
+/*
+ * Copyright 2024 The Matrix.org Foundation C.I.C.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { EventType } from "matrix-js-sdk/src/matrix";
+
+import { UnpinAllDialog } from "../../../../src/components/views/dialogs/UnpinAllDialog";
+import { createTestClient } from "../../../test-utils";
+
+describe("<UnpinAllDialog />", () => {
+    const client = createTestClient();
+    const roomId = "!room:example.org";
+
+    function renderDialog(onFinished = jest.fn()) {
+        return render(<UnpinAllDialog matrixClient={client} roomId={roomId} onFinished={onFinished} />);
+    }
+
+    it("should render", () => {
+        const { asFragment } = renderDialog();
+        expect(asFragment()).toMatchSnapshot();
+    });
+
+    it("should remove all pinned events when clicked on Continue", async () => {
+        const onFinished = jest.fn();
+        renderDialog(onFinished);
+
+        await userEvent.click(screen.getByText("Continue"));
+        expect(client.sendStateEvent).toHaveBeenCalledWith(roomId, EventType.RoomPinnedEvents, { pinned: [] }, "");
+        expect(onFinished).toHaveBeenCalled();
+    });
+});

test/components/views/dialogs/__snapshots__/UnpinAllDialog-test.tsx.snap

@@ -0,0 +1,66 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<UnpinAllDialog /> should render 1`] = `
+<DocumentFragment>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+  <div
+    aria-labelledby="mx_BaseDialog_title"
+    class="mx_UnpinAllDialog"
+    data-focus-lock-disabled="false"
+    role="dialog"
+  >
+    <div
+      class="mx_Dialog_header"
+    >
+      <h1
+        class="mx_Heading_h3 mx_Dialog_title mx_UnpinAllDialog_title"
+        id="mx_BaseDialog_title"
+      >
+        Unpin all messages?
+      </h1>
+    </div>
+    <span
+      class="_typography_yh5dq_162 _font-body-md-regular_yh5dq_59"
+    >
+      Make sure that you really want to remove all pinned messages. This action can’t be undone.
+    </span>
+    <div
+      class="mx_UnpinAllDialog_buttons"
+    >
+      <button
+        class="_button_zt6rp_17 _destructive_zt6rp_111"
+        data-kind="primary"
+        data-size="lg"
+        role="button"
+        tabindex="0"
+      >
+        Continue
+      </button>
+      <button
+        class="_button_zt6rp_17"
+        data-kind="tertiary"
+        data-size="lg"
+        role="button"
+        tabindex="0"
+      >
+        Cancel
+      </button>
+    </div>
+    <div
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_Dialog_cancelButton"
+      role="button"
+      tabindex="0"
+    />
+  </div>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;

test/components/views/right_panel/PinnedMessagesCard-test.tsx

@@ -15,37 +15,44 @@ limitations under the License.
 */
 
 import React from "react";
-import { render, act, RenderResult, fireEvent, waitForElementToBeRemoved, screen } from "@testing-library/react";
-import { mocked } from "jest-mock";
+import { render, act, RenderResult, waitForElementToBeRemoved, screen } from "@testing-library/react";
+import { mocked, MockedObject } from "jest-mock";
 import {
     MatrixEvent,
     RoomStateEvent,
     IEvent,
     Room,
-    EventTimelineSet,
     IMinimalEvent,
     EventType,
     RelationType,
     MsgType,
     M_POLL_KIND_DISCLOSED,
+    EventTimeline,
+    MatrixClient,
 } from "matrix-js-sdk/src/matrix";
 import { PollStartEvent } from "matrix-js-sdk/src/extensible_events_v1/PollStartEvent";
 import { PollResponseEvent } from "matrix-js-sdk/src/extensible_events_v1/PollResponseEvent";
 import { PollEndEvent } from "matrix-js-sdk/src/extensible_events_v1/PollEndEvent";
 import { sleep } from "matrix-js-sdk/src/utils";
+import userEvent from "@testing-library/user-event";
 
 import { stubClient, mkEvent, mkMessage, flushPromises } from "../../../test-utils";
 import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
-import PinnedMessagesCard from "../../../../src/components/views/right_panel/PinnedMessagesCard";
+import { PinnedMessagesCard } from "../../../../src/components/views/right_panel/PinnedMessagesCard";
 import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
 import { RoomPermalinkCreator } from "../../../../src/utils/permalinks/Permalinks";
+import Modal from "../../../../src/Modal";
+import { UnpinAllDialog } from "../../../../src/components/views/dialogs/UnpinAllDialog";
 
 describe("<PinnedMessagesCard />", () => {
-    stubClient();
-    const cli = mocked(MatrixClientPeg.safeGet());
-    cli.getUserId.mockReturnValue("@alice:example.org");
-    cli.setRoomAccountData.mockResolvedValue({});
-    cli.relations.mockResolvedValue({ originalEvent: {} as unknown as MatrixEvent, events: [] });
+    let cli: MockedObject<MatrixClient>;
+    beforeEach(() => {
+        stubClient();
+        cli = mocked(MatrixClientPeg.safeGet());
+        cli.getUserId.mockReturnValue("@alice:example.org");
+        cli.setRoomAccountData.mockResolvedValue({});
+        cli.relations.mockResolvedValue({ originalEvent: {} as unknown as MatrixEvent, events: [] });
+    });
 
     const mkRoom = (localPins: MatrixEvent[], nonLocalPins: MatrixEvent[]): Room => {
         const room = new Room("!room:example.org", cli, "@me:example.org");
@@ -53,27 +60,27 @@ describe("<PinnedMessagesCard />", () => {
         const pins = () => [...localPins, ...nonLocalPins];
 
         // Insert pin IDs into room state
-        jest.spyOn(room.currentState, "getStateEvents").mockImplementation((): any =>
-            mkEvent({
-                event: true,
-                type: EventType.RoomPinnedEvents,
-                content: {
-                    pinned: pins().map((e) => e.getId()),
-                },
-                user: "@user:example.org",
-                room: "!room:example.org",
-            }),
+        jest.spyOn(room.getLiveTimeline().getState(EventTimeline.FORWARDS)!, "getStateEvents").mockImplementation(
+            (): any =>
+                mkEvent({
+                    event: true,
+                    type: EventType.RoomPinnedEvents,
+                    content: {
+                        pinned: pins().map((e) => e.getId()),
+                    },
+                    user: "@user:example.org",
+                    room: "!room:example.org",
+                }),
         );
 
-        jest.spyOn(room.currentState, "on");
-
-        // Insert local pins into local timeline set
-        room.getUnfilteredTimelineSet = () =>
-            ({
-                getTimelineForEvent: () => ({
-                    getEvents: () => localPins,
-                }),
-            }) as unknown as EventTimelineSet;
+        jest.spyOn(room.getLiveTimeline().getState(EventTimeline.FORWARDS)!, "mayClientSendStateEvent").mockReturnValue(
+            true,
+        );
+        // poll end event validates against this
+        jest.spyOn(
+            room.getLiveTimeline().getState(EventTimeline.FORWARDS)!,
+            "maySendRedactionForEvent",
+        ).mockReturnValue(true);
 
         // Return all pins over fetchRoomEvent
         cli.fetchRoomEvent.mockImplementation((roomId, eventId) => {
@@ -86,8 +93,8 @@ describe("<PinnedMessagesCard />", () => {
         return room;
     };
 
-    const mountPins = async (room: Room): Promise<RenderResult> => {
-        const pins = render(
+    async function renderMessagePinList(room: Room): Promise<RenderResult> {
+        const renderResult = render(
             <MatrixClientContext.Provider value={cli}>
                 <PinnedMessagesCard
                     room={room}
@@ -99,22 +106,60 @@ describe("<PinnedMessagesCard />", () => {
         // Wait a tick for state updates
         await act(() => sleep(0));
 
-        return pins;
-    };
-
-    const emitPinUpdates = async (room: Room) => {
-        const pinListener = mocked(room.currentState).on.mock.calls.find(
-            ([eventName, listener]) => eventName === RoomStateEvent.Events,
-        )![1];
+        return renderResult;
+    }
 
+    /**
+     *
+     * @param room
+     */
+    async function emitPinUpdate(room: Room) {
         await act(async () => {
-            // Emit the update
-            // @ts-ignore what is going on here?
-            pinListener(room.currentState.getStateEvents());
-            // Wait a tick for state updates
-            await sleep(0);
+            const roomState = room.getLiveTimeline().getState(EventTimeline.FORWARDS)!;
+            roomState.emit(
+                RoomStateEvent.Events,
+                new MatrixEvent({ type: EventType.RoomPinnedEvents }),
+                roomState,
+                null,
+            );
         });
-    };
+    }
+
+    /**
+     * Initialize the pinned messages card with the given pinned messages.
+     * Return the room, testing library helpers and functions to add and remove pinned messages.
+     * @param localPins
+     * @param nonLocalPins
+     */
+    async function initPinnedMessagesCard(localPins: MatrixEvent[], nonLocalPins: MatrixEvent[]) {
+        const room = mkRoom(localPins, nonLocalPins);
+        const addLocalPinEvent = async (event: MatrixEvent) => {
+            localPins.push(event);
+            await emitPinUpdate(room);
+        };
+        const removeLastLocalPinEvent = async () => {
+            localPins.pop();
+            await emitPinUpdate(room);
+        };
+        const addNonLocalPinEvent = async (event: MatrixEvent) => {
+            nonLocalPins.push(event);
+            await emitPinUpdate(room);
+        };
+        const removeLastNonLocalPinEvent = async () => {
+            nonLocalPins.pop();
+            await emitPinUpdate(room);
+        };
+        const renderResult = await renderMessagePinList(room);
+
+        return {
+            ...renderResult,
+            addLocalPinEvent,
+            removeLastLocalPinEvent,
+            addNonLocalPinEvent,
+            removeLastNonLocalPinEvent,
+            room,
+        };
+    }
 
     const pin1 = mkMessage({
         event: true,
@@ -129,75 +174,66 @@ describe("<PinnedMessagesCard />", () => {
         msg: "The second one",
     });
 
-    it("updates when messages are pinned", async () => {
+    it("should show spinner whilst loading", async () => {
+        const room = mkRoom([], [pin1]);
+        render(
+            <MatrixClientContext.Provider value={cli}>
+                <PinnedMessagesCard
+                    room={room}
+                    onClose={jest.fn()}
+                    permalinkCreator={new RoomPermalinkCreator(room, room.roomId)}
+                />
+            </MatrixClientContext.Provider>,
+        );
+
+        await waitForElementToBeRemoved(() => screen.queryAllByRole("progressbar"));
+    });
+
+    it("should show the empty state when there are no pins", async () => {
+        const { asFragment } = await initPinnedMessagesCard([], []);
+
+        expect(screen.getByText("Pin important messages so that they can be easily discovered")).toBeInTheDocument();
+        expect(asFragment()).toMatchSnapshot();
+    });
+
+    it("should show two pinned messages", async () => {
+        //const room = mkRoom([pin1], [pin2]);
+        const { asFragment } = await initPinnedMessagesCard([pin1], [pin2]);
+
+        expect(screen.queryAllByRole("listitem")).toHaveLength(2);
+        expect(asFragment()).toMatchSnapshot();
+    });
+
+    it("should updates when messages are pinned", async () => {
         // Start with nothing pinned
-        const localPins: MatrixEvent[] = [];
-        const nonLocalPins: MatrixEvent[] = [];
-        const room = mkRoom(localPins, nonLocalPins);
-        const pins = await mountPins(room);
-        expect(pins.container.querySelectorAll(".mx_PinnedEventTile")).toHaveLength(0);
+        const { addLocalPinEvent, addNonLocalPinEvent } = await initPinnedMessagesCard([], []);
+
+        expect(screen.queryAllByRole("listitem")).toHaveLength(0);
 
         // Pin the first message
-        localPins.push(pin1);
-        await emitPinUpdates(room);
-        expect(pins.container.querySelectorAll(".mx_PinnedEventTile")).toHaveLength(1);
+        await addLocalPinEvent(pin1);
+        expect(screen.getAllByRole("listitem")).toHaveLength(1);
 
         // Pin the second message
-        nonLocalPins.push(pin2);
-        await emitPinUpdates(room);
-        expect(pins.container.querySelectorAll(".mx_PinnedEventTile")).toHaveLength(2);
+        await addNonLocalPinEvent(pin2);
+        expect(screen.getAllByRole("listitem")).toHaveLength(2);
     });
 
-    it("updates when messages are unpinned", async () => {
+    it("should updates when messages are unpinned", async () => {
         // Start with two pins
-        const localPins = [pin1];
-        const nonLocalPins = [pin2];
-        const room = mkRoom(localPins, nonLocalPins);
-        const pins = await mountPins(room);
-        expect(pins.container.querySelectorAll(".mx_PinnedEventTile")).toHaveLength(2);
+        const { removeLastLocalPinEvent, removeLastNonLocalPinEvent } = await initPinnedMessagesCard([pin1], [pin2]);
+        expect(screen.getAllByRole("listitem")).toHaveLength(2);
 
         // Unpin the first message
-        localPins.pop();
-        await emitPinUpdates(room);
-        expect(pins.container.querySelectorAll(".mx_PinnedEventTile")).toHaveLength(1);
+        await removeLastLocalPinEvent();
+        expect(screen.getAllByRole("listitem")).toHaveLength(1);
 
         // Unpin the second message
-        nonLocalPins.pop();
-        await emitPinUpdates(room);
-        expect(pins.container.querySelectorAll(".mx_PinnedEventTile")).toHaveLength(0);
+        await removeLastNonLocalPinEvent();
+        expect(screen.queryAllByRole("listitem")).toHaveLength(0);
     });
 
-    it("hides unpinnable events found in local timeline", async () => {
-        // Redacted messages are unpinnable
-        const pin = mkEvent({
-            event: true,
-            type: EventType.RoomMessage,
-            content: {},
-            unsigned: { redacted_because: {} as unknown as IEvent },
-            room: "!room:example.org",
-            user: "@alice:example.org",
-        });
-
-        const pins = await mountPins(mkRoom([pin], []));
-        expect(pins.container.querySelectorAll(".mx_PinnedEventTile")).toHaveLength(0);
-    });
-
-    it("hides unpinnable events not found in local timeline", async () => {
-        // Redacted messages are unpinnable
-        const pin = mkEvent({
-            event: true,
-            type: EventType.RoomMessage,
-            content: {},
-            unsigned: { redacted_because: {} as unknown as IEvent },
-            room: "!room:example.org",
-            user: "@alice:example.org",
-        });
-
-        const pins = await mountPins(mkRoom([], [pin]));
-        expect(pins.container.querySelectorAll(".mx_PinnedEventTile")).toHaveLength(0);
-    });
-
-    it("accounts for edits", async () => {
+    it("should display an edited pinned event", async () => {
         const messageEvent = mkEvent({
             event: true,
             type: EventType.RoomMessage,
@@ -221,13 +257,78 @@ describe("<PinnedMessagesCard />", () => {
             events: [messageEvent],
         });
 
-        const pins = await mountPins(mkRoom([], [pin1]));
-        const pinTile = pins.container.querySelectorAll(".mx_PinnedEventTile");
-        expect(pinTile.length).toBe(1);
-        expect(pinTile[0].querySelector(".mx_EventTile_body")!).toHaveTextContent("First pinned message, edited");
+        await initPinnedMessagesCard([], [pin1]);
+        expect(screen.getByText("First pinned message, edited")).toBeInTheDocument();
     });
 
-    it("displays votes on polls not found in local timeline", async () => {
+    describe("unpinnable event", () => {
+        it("should hide unpinnable events found in local timeline", async () => {
+            // Redacted messages are unpinnable
+            const pin = mkEvent({
+                event: true,
+                type: EventType.RoomMessage,
+                content: {},
+                unsigned: { redacted_because: {} as unknown as IEvent },
+                room: "!room:example.org",
+                user: "@alice:example.org",
+            });
+            await initPinnedMessagesCard([pin], []);
+            expect(screen.queryAllByRole("listitem")).toHaveLength(0);
+        });
+
+        it("hides unpinnable events not found in local timeline", async () => {
+            // Redacted messages are unpinnable
+            const pin = mkEvent({
+                event: true,
+                type: EventType.RoomMessage,
+                content: {},
+                unsigned: { redacted_because: {} as unknown as IEvent },
+                room: "!room:example.org",
+                user: "@alice:example.org",
+            });
+            await initPinnedMessagesCard([], [pin]);
+            expect(screen.queryAllByRole("listitem")).toHaveLength(0);
+        });
+    });
+
+    describe("unpin all", () => {
+        it("should not allow to unpinall", async () => {
+            const room = mkRoom([pin1], [pin2]);
+            jest.spyOn(
+                room.getLiveTimeline().getState(EventTimeline.FORWARDS)!,
+                "mayClientSendStateEvent",
+            ).mockReturnValue(false);
+
+            const { asFragment } = render(
+                <MatrixClientContext.Provider value={cli}>
+                    <PinnedMessagesCard
+                        room={room}
+                        onClose={jest.fn()}
+                        permalinkCreator={new RoomPermalinkCreator(room, room.roomId)}
+                    />
+                </MatrixClientContext.Provider>,
+            );
+
+            // Wait a tick for state updates
+            await act(() => sleep(0));
+
+            expect(screen.queryByText("Unpin all messages")).toBeNull();
+            expect(asFragment()).toMatchSnapshot();
+        });
+
+        it("should allow unpinning all messages", async () => {
+            jest.spyOn(Modal, "createDialog");
+
+            const { room } = await initPinnedMessagesCard([pin1], [pin2]);
+            expect(screen.getByText("Unpin all messages")).toBeInTheDocument();
+
+            await userEvent.click(screen.getByText("Unpin all messages"));
+            // Should open the UnpinAllDialog dialog
+            expect(Modal.createDialog).toHaveBeenCalledWith(UnpinAllDialog, { roomId: room.roomId, matrixClient: cli });
+        });
+    });
+
+    it("should displays votes on polls not found in local timeline", async () => {
         const poll = mkEvent({
             ...PollStartEvent.from("A poll", ["Option 1", "Option 2"], M_POLL_KIND_DISCLOSED).serialize(),
             event: true,
@@ -270,11 +371,8 @@ describe("<PinnedMessagesCard />", () => {
             return { originalEvent: undefined as unknown as MatrixEvent, events: [] };
         });
 
-        const room = mkRoom([], [poll]);
-        // poll end event validates against this
-        jest.spyOn(room.currentState, "maySendRedactionForEvent").mockReturnValue(true);
+        const { room } = await initPinnedMessagesCard([], [poll]);
 
-        const pins = await mountPins(room);
         // two pages of results
         await flushPromises();
         await flushPromises();
@@ -282,34 +380,12 @@ describe("<PinnedMessagesCard />", () => {
         const pollInstance = room.polls.get(poll.getId()!);
         expect(pollInstance).toBeTruthy();
 
-        const pinTile = pins.container.querySelectorAll(".mx_MPollBody");
+        expect(screen.getByText("A poll")).toBeInTheDocument();
 
-        expect(pinTile).toHaveLength(1);
-        expect(pinTile[0].querySelectorAll(".mx_PollOption_ended")).toHaveLength(2);
-        expect(pinTile[0].querySelectorAll(".mx_PollOption_optionVoteCount")[0]).toHaveTextContent("2 votes");
-        expect([...pinTile[0].querySelectorAll(".mx_PollOption_optionVoteCount")].at(-1)).toHaveTextContent("1 vote");
-    });
+        expect(screen.getByText("Option 1")).toBeInTheDocument();
+        expect(screen.getByText("2 votes")).toBeInTheDocument();
 
-    it("should allow admins to unpin messages", async () => {
-        const nonLocalPins = [pin1];
-        const room = mkRoom([], nonLocalPins);
-        jest.spyOn(room.currentState, "mayClientSendStateEvent").mockReturnValue(true);
-        const sendStateEvent = jest.spyOn(cli, "sendStateEvent");
-
-        const pins = await mountPins(room);
-        const pinTile = pins.container.querySelectorAll(".mx_PinnedEventTile");
-        expect(pinTile).toHaveLength(1);
-
-        fireEvent.click(pinTile[0].querySelector(".mx_PinnedEventTile_unpinButton")!);
-        expect(sendStateEvent).toHaveBeenCalledWith(room.roomId, "m.room.pinned_events", { pinned: [] }, "");
-
-        nonLocalPins.pop();
-        await Promise.all([waitForElementToBeRemoved(pinTile[0]), emitPinUpdates(room)]);
-    });
-
-    it("should show spinner whilst loading", async () => {
-        const room = mkRoom([], [pin1]);
-        mountPins(room);
-        await waitForElementToBeRemoved(() => screen.queryAllByRole("progressbar"));
+        expect(screen.getByText("Option 2")).toBeInTheDocument();
+        expect(screen.getByText("1 vote")).toBeInTheDocument();
     });
 });

test/components/views/right_panel/__snapshots__/PinnedMessagesCard-test.tsx.snap

@@ -0,0 +1,457 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<PinnedMessagesCard /> should show the empty state when there are no pins 1`] = `
+<DocumentFragment>
+  <div
+    class="mx_BaseCard mx_PinnedMessagesCard"
+  >
+    <div
+      class="mx_BaseCard_header"
+    >
+      <div
+        class="mx_BaseCard_header_title"
+      >
+        <h4
+          class="mx_Heading_h4 mx_BaseCard_header_title_heading"
+        >
+          Pinned message
+        </h4>
+      </div>
+      <button
+        class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"
+        data-testid="base-card-close-button"
+        role="button"
+        style="--cpd-icon-button-size: 28px;"
+        tabindex="0"
+      >
+        <div
+          class="_indicator-icon_133tf_26"
+          style="--cpd-icon-button-size: 100%;"
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z"
+            />
+          </svg>
+        </div>
+      </button>
+    </div>
+    <div
+      class="mx_AutoHideScrollbar"
+      tabindex="-1"
+    >
+      <div
+        class="mx_Flex mx_EmptyState"
+        style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-4x);"
+      >
+        <svg
+          fill="currentColor"
+          height="32px"
+          viewBox="0 0 24 24"
+          width="32px"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M6.119 2a.5.5 0 0 0-.35.857L7.85 4.9a.5.5 0 0 1 .15.357v4.487a.5.5 0 0 1-.15.356l-3.7 3.644A.5.5 0 0 0 4 14.1v1.4a.5.5 0 0 0 .5.5H11v6a1 1 0 1 0 2 0v-6h6.5a.5.5 0 0 0 .5-.5v-1.4a.5.5 0 0 0-.15-.356l-3.7-3.644a.5.5 0 0 1-.15-.356V5.257a.5.5 0 0 1 .15-.357l2.081-2.043a.5.5 0 0 0-.35-.857H6.119ZM10 4h4v5.744a2.5 2.5 0 0 0 .746 1.781L17.26 14H6.74l2.514-2.475A2.5 2.5 0 0 0 10 9.744V4Z"
+            fill-rule="evenodd"
+          />
+        </svg>
+        <p
+          class="_typography_yh5dq_162 _font-body-lg-semibold_yh5dq_83"
+        >
+          Pin important messages so that they can be easily discovered
+        </p>
+        <p
+          class="_typography_yh5dq_162 _font-body-md-regular_yh5dq_59"
+        >
+          Select a message and choose “Pin” to it include here.
+        </p>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
+<DocumentFragment>
+  <div
+    class="mx_BaseCard mx_PinnedMessagesCard"
+  >
+    <div
+      class="mx_BaseCard_header"
+    >
+      <div
+        class="mx_BaseCard_header_title"
+      >
+        <h4
+          class="mx_Heading_h4 mx_BaseCard_header_title_heading"
+        >
+          2 Pinned messages
+        </h4>
+      </div>
+      <button
+        class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"
+        data-testid="base-card-close-button"
+        role="button"
+        style="--cpd-icon-button-size: 28px;"
+        tabindex="0"
+      >
+        <div
+          class="_indicator-icon_133tf_26"
+          style="--cpd-icon-button-size: 100%;"
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z"
+            />
+          </svg>
+        </div>
+      </button>
+    </div>
+    <div
+      class="mx_AutoHideScrollbar"
+      tabindex="-1"
+    >
+      <div
+        class="mx_PinnedMessagesCard_wrapper mx_PinnedMessagesCard_wrapper_unpin_all"
+        role="list"
+      >
+        <div
+          class="mx_PinnedEventTile"
+          role="listitem"
+        >
+          <div>
+            <span
+              class="_avatar_mcap2_17 mx_BaseAvatar mx_PinnedEventTile_senderAvatar _avatar-imageless_mcap2_61"
+              data-color="3"
+              data-testid="avatar-img"
+              data-type="round"
+              role="presentation"
+              style="--cpd-avatar-size: 32px;"
+            >
+              a
+            </span>
+          </div>
+          <div
+            class="mx_PinnedEventTile_wrapper"
+          >
+            <div
+              class="mx_PinnedEventTile_top"
+            >
+              <span
+                class="_typography_yh5dq_162 _font-body-md-semibold_yh5dq_64 mx_PinnedEventTile_sender mx_Username_color3"
+              >
+                @alice:example.org
+              </span>
+              <button
+                aria-disabled="false"
+                aria-expanded="false"
+                aria-haspopup="menu"
+                aria-label="Open menu"
+                class="_icon-button_bh2qc_17"
+                data-state="closed"
+                id="radix-2"
+                role="button"
+                style="--cpd-icon-button-size: 24px;"
+                tabindex="0"
+                type="button"
+              >
+                <div
+                  class="_indicator-icon_133tf_26"
+                  style="--cpd-icon-button-size: 100%;"
+                >
+                  <div />
+                </div>
+              </button>
+            </div>
+            <div
+              class="mx_MTextBody mx_EventTile_content"
+            >
+              <div
+                class="mx_EventTile_body translate"
+                dir="auto"
+              >
+                The second one
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="_separator_144s5_17 mx_PinnedMessagesCard_Separator"
+          data-kind="primary"
+          data-orientation="horizontal"
+          role="separator"
+        />
+        <div
+          class="mx_PinnedEventTile"
+          role="listitem"
+        >
+          <div>
+            <span
+              class="_avatar_mcap2_17 mx_BaseAvatar mx_PinnedEventTile_senderAvatar _avatar-imageless_mcap2_61"
+              data-color="3"
+              data-testid="avatar-img"
+              data-type="round"
+              role="presentation"
+              style="--cpd-avatar-size: 32px;"
+            >
+              a
+            </span>
+          </div>
+          <div
+            class="mx_PinnedEventTile_wrapper"
+          >
+            <div
+              class="mx_PinnedEventTile_top"
+            >
+              <span
+                class="_typography_yh5dq_162 _font-body-md-semibold_yh5dq_64 mx_PinnedEventTile_sender mx_Username_color3"
+              >
+                @alice:example.org
+              </span>
+              <button
+                aria-disabled="false"
+                aria-expanded="false"
+                aria-haspopup="menu"
+                aria-label="Open menu"
+                class="_icon-button_bh2qc_17"
+                data-state="closed"
+                id="radix-3"
+                role="button"
+                style="--cpd-icon-button-size: 24px;"
+                tabindex="0"
+                type="button"
+              >
+                <div
+                  class="_indicator-icon_133tf_26"
+                  style="--cpd-icon-button-size: 100%;"
+                >
+                  <div />
+                </div>
+              </button>
+            </div>
+            <div
+              class="mx_MTextBody mx_EventTile_content"
+            >
+              <div
+                class="mx_EventTile_body translate"
+                dir="auto"
+              >
+                First pinned message
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="mx_PinnedMessagesCard_unpin"
+      >
+        <button
+          class="_button_zt6rp_17"
+          data-kind="tertiary"
+          data-size="lg"
+          role="button"
+          tabindex="0"
+        >
+          Unpin all messages
+        </button>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
+<DocumentFragment>
+  <div
+    class="mx_BaseCard mx_PinnedMessagesCard"
+  >
+    <div
+      class="mx_BaseCard_header"
+    >
+      <div
+        class="mx_BaseCard_header_title"
+      >
+        <h4
+          class="mx_Heading_h4 mx_BaseCard_header_title_heading"
+        >
+          2 Pinned messages
+        </h4>
+      </div>
+      <button
+        class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"
+        data-testid="base-card-close-button"
+        role="button"
+        style="--cpd-icon-button-size: 28px;"
+        tabindex="0"
+      >
+        <div
+          class="_indicator-icon_133tf_26"
+          style="--cpd-icon-button-size: 100%;"
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z"
+            />
+          </svg>
+        </div>
+      </button>
+    </div>
+    <div
+      class="mx_AutoHideScrollbar"
+      tabindex="-1"
+    >
+      <div
+        class="mx_PinnedMessagesCard_wrapper"
+        role="list"
+      >
+        <div
+          class="mx_PinnedEventTile"
+          role="listitem"
+        >
+          <div>
+            <span
+              class="_avatar_mcap2_17 mx_BaseAvatar mx_PinnedEventTile_senderAvatar _avatar-imageless_mcap2_61"
+              data-color="3"
+              data-testid="avatar-img"
+              data-type="round"
+              role="presentation"
+              style="--cpd-avatar-size: 32px;"
+            >
+              a
+            </span>
+          </div>
+          <div
+            class="mx_PinnedEventTile_wrapper"
+          >
+            <div
+              class="mx_PinnedEventTile_top"
+            >
+              <span
+                class="_typography_yh5dq_162 _font-body-md-semibold_yh5dq_64 mx_PinnedEventTile_sender mx_Username_color3"
+              >
+                @alice:example.org
+              </span>
+              <button
+                aria-disabled="false"
+                aria-expanded="false"
+                aria-haspopup="menu"
+                aria-label="Open menu"
+                class="_icon-button_bh2qc_17"
+                data-state="closed"
+                id="radix-18"
+                role="button"
+                style="--cpd-icon-button-size: 24px;"
+                tabindex="0"
+                type="button"
+              >
+                <div
+                  class="_indicator-icon_133tf_26"
+                  style="--cpd-icon-button-size: 100%;"
+                >
+                  <div />
+                </div>
+              </button>
+            </div>
+            <div
+              class="mx_MTextBody mx_EventTile_content"
+            >
+              <div
+                class="mx_EventTile_body translate"
+                dir="auto"
+              >
+                The second one
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="_separator_144s5_17 mx_PinnedMessagesCard_Separator"
+          data-kind="primary"
+          data-orientation="horizontal"
+          role="separator"
+        />
+        <div
+          class="mx_PinnedEventTile"
+          role="listitem"
+        >
+          <div>
+            <span
+              class="_avatar_mcap2_17 mx_BaseAvatar mx_PinnedEventTile_senderAvatar _avatar-imageless_mcap2_61"
+              data-color="3"
+              data-testid="avatar-img"
+              data-type="round"
+              role="presentation"
+              style="--cpd-avatar-size: 32px;"
+            >
+              a
+            </span>
+          </div>
+          <div
+            class="mx_PinnedEventTile_wrapper"
+          >
+            <div
+              class="mx_PinnedEventTile_top"
+            >
+              <span
+                class="_typography_yh5dq_162 _font-body-md-semibold_yh5dq_64 mx_PinnedEventTile_sender mx_Username_color3"
+              >
+                @alice:example.org
+              </span>
+              <button
+                aria-disabled="false"
+                aria-expanded="false"
+                aria-haspopup="menu"
+                aria-label="Open menu"
+                class="_icon-button_bh2qc_17"
+                data-state="closed"
+                id="radix-19"
+                role="button"
+                style="--cpd-icon-button-size: 24px;"
+                tabindex="0"
+                type="button"
+              >
+                <div
+                  class="_indicator-icon_133tf_26"
+                  style="--cpd-icon-button-size: 100%;"
+                >
+                  <div />
+                </div>
+              </button>
+            </div>
+            <div
+              class="mx_MTextBody mx_EventTile_content"
+            >
+              <div
+                class="mx_EventTile_body translate"
+                dir="auto"
+              >
+                First pinned message
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

test/components/views/rooms/PinnedEventTile-test.tsx

@@ -15,32 +15,44 @@ limitations under the License.
 */
 
 import React from "react";
-import { render } from "@testing-library/react";
-import { MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
+import { render, screen, waitFor } from "@testing-library/react";
+import { EventTimeline, EventType, IEvent, MatrixClient, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
+import userEvent from "@testing-library/user-event";
 
 import { RoomPermalinkCreator } from "../../../../src/utils/permalinks/Permalinks";
-import PinnedEventTile from "../../../../src/components/views/rooms/PinnedEventTile";
-import { getMockClientWithEventEmitter } from "../../../test-utils";
+import { PinnedEventTile } from "../../../../src/components/views/rooms/PinnedEventTile";
+import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
+import { stubClient } from "../../../test-utils";
+import dis from "../../../../src/dispatcher/dispatcher";
+import { Action } from "../../../../src/dispatcher/actions";
+import { getForwardableEvent } from "../../../../src/events";
+import { createRedactEventDialog } from "../../../../src/components/views/dialogs/ConfirmRedactDialog";
+
+jest.mock("../../../../src/components/views/dialogs/ConfirmRedactDialog", () => ({
+    createRedactEventDialog: jest.fn(),
+}));
 
 describe("<PinnedEventTile />", () => {
     const userId = "@alice:server.org";
     const roomId = "!room:server.org";
-    const mockClient = getMockClientWithEventEmitter({
-        getRoom: jest.fn(),
-    });
-    const room = new Room(roomId, mockClient, userId);
-    const permalinkCreator = new RoomPermalinkCreator(room);
-
-    const getComponent = (event: MatrixEvent) =>
-        render(<PinnedEventTile permalinkCreator={permalinkCreator} event={event} />);
 
+    let mockClient: MatrixClient;
+    let room: Room;
+    let permalinkCreator: RoomPermalinkCreator;
     beforeEach(() => {
-        mockClient.getRoom.mockReturnValue(room);
+        mockClient = stubClient();
+        room = new Room(roomId, mockClient, userId);
+        permalinkCreator = new RoomPermalinkCreator(room);
+        jest.spyOn(dis, "dispatch").mockReturnValue(undefined);
     });
 
-    it("should render pinned event", () => {
-        const pin1 = new MatrixEvent({
-            type: "m.room.message",
+    /**
+     * Create a pinned event with the given content.
+     * @param content
+     */
+    function makePinEvent(content?: Partial<IEvent>) {
+        return new MatrixEvent({
+            type: EventType.RoomMessage,
             sender: userId,
             content: {
                 body: "First pinned message",
@@ -48,25 +60,150 @@ describe("<PinnedEventTile />", () => {
             },
             room_id: roomId,
             origin_server_ts: 0,
+            event_id: "$eventId",
+            ...content,
         });
+    }
 
-        const { container } = getComponent(pin1);
+    /**
+     * Render the component with the given event.
+     * @param event - pinned event
+     */
+    function renderComponent(event: MatrixEvent) {
+        return render(
+            <MatrixClientContext.Provider value={mockClient}>
+                <PinnedEventTile permalinkCreator={permalinkCreator} event={event} room={room} />
+            </MatrixClientContext.Provider>,
+        );
+    }
 
+    /**
+     * Render the component and open the menu.
+     */
+    async function renderAndOpenMenu() {
+        const pinEvent = makePinEvent();
+        const renderResult = renderComponent(pinEvent);
+        await userEvent.click(screen.getByRole("button", { name: "Open menu" }));
+        return { pinEvent, renderResult };
+    }
+
+    it("should throw when pinned event has no sender", () => {
+        const pinEventWithoutSender = makePinEvent({ sender: undefined });
+        expect(() => renderComponent(pinEventWithoutSender)).toThrow("Pinned event unexpectedly has no sender");
+    });
+
+    it("should render pinned event", () => {
+        const { container } = renderComponent(makePinEvent());
         expect(container).toMatchSnapshot();
     });
 
-    it("should throw when pinned event has no sender", () => {
-        const pin1 = new MatrixEvent({
-            type: "m.room.message",
-            sender: undefined,
-            content: {
-                body: "First pinned message",
-                msgtype: "m.text",
-            },
-            room_id: roomId,
-            origin_server_ts: 0,
-        });
+    it("should render the menu without unpin and delete", async () => {
+        jest.spyOn(room.getLiveTimeline().getState(EventTimeline.FORWARDS)!, "mayClientSendStateEvent").mockReturnValue(
+            false,
+        );
+        jest.spyOn(
+            room.getLiveTimeline().getState(EventTimeline.FORWARDS)!,
+            "maySendRedactionForEvent",
+        ).mockReturnValue(false);
 
-        expect(() => getComponent(pin1)).toThrow("Pinned event unexpectedly has no sender");
+        await renderAndOpenMenu();
+
+        // Unpin and delete should not be present
+        await waitFor(() => expect(screen.getByRole("menu")).toBeInTheDocument());
+        expect(screen.getByRole("menuitem", { name: "View in timeline" })).toBeInTheDocument();
+        expect(screen.getByRole("menuitem", { name: "Forward" })).toBeInTheDocument();
+        expect(screen.queryByRole("menuitem", { name: "Unpin" })).toBeNull();
+        expect(screen.queryByRole("menuitem", { name: "Delete" })).toBeNull();
+        expect(screen.getByRole("menu")).toMatchSnapshot();
+    });
+
+    it("should render the menu with all the options", async () => {
+        // Enable unpin
+        jest.spyOn(room.getLiveTimeline().getState(EventTimeline.FORWARDS)!, "mayClientSendStateEvent").mockReturnValue(
+            true,
+        );
+        // Enable redaction
+        jest.spyOn(
+            room.getLiveTimeline().getState(EventTimeline.FORWARDS)!,
+            "maySendRedactionForEvent",
+        ).mockReturnValue(true);
+
+        await renderAndOpenMenu();
+
+        await waitFor(() => expect(screen.getByRole("menu")).toBeInTheDocument());
+        ["View in timeline", "Forward", "Unpin", "Delete"].forEach((name) =>
+            expect(screen.getByRole("menuitem", { name })).toBeInTheDocument(),
+        );
+        expect(screen.getByRole("menu")).toMatchSnapshot();
+    });
+
+    it("should view in the timeline", async () => {
+        const { pinEvent } = await renderAndOpenMenu();
+
+        // Test view in timeline button
+        await userEvent.click(screen.getByRole("menuitem", { name: "View in timeline" }));
+        expect(dis.dispatch).toHaveBeenCalledWith({
+            action: Action.ViewRoom,
+            event_id: pinEvent.getId(),
+            highlighted: true,
+            room_id: pinEvent.getRoomId(),
+            metricsTrigger: undefined, // room doesn't change
+        });
+    });
+
+    it("should open forward dialog", async () => {
+        const { pinEvent } = await renderAndOpenMenu();
+
+        // Test forward button
+        await userEvent.click(screen.getByRole("menuitem", { name: "Forward" }));
+        expect(dis.dispatch).toHaveBeenCalledWith({
+            action: Action.OpenForwardDialog,
+            event: getForwardableEvent(pinEvent, mockClient),
+            permalinkCreator: permalinkCreator,
+        });
+    });
+
+    it("should unpin the event", async () => {
+        const { pinEvent } = await renderAndOpenMenu();
+        const pinEvent2 = makePinEvent({ event_id: "$eventId2" });
+
+        const stateEvent = {
+            getContent: jest.fn().mockReturnValue({ pinned: [pinEvent.getId(), pinEvent2.getId()] }),
+        } as unknown as MatrixEvent;
+
+        // Enable unpin
+        jest.spyOn(room.getLiveTimeline().getState(EventTimeline.FORWARDS)!, "mayClientSendStateEvent").mockReturnValue(
+            true,
+        );
+        // Mock the state event
+        jest.spyOn(room.getLiveTimeline().getState(EventTimeline.FORWARDS)!, "getStateEvents").mockReturnValue(
+            stateEvent,
+        );
+
+        // Test unpin button
+        await userEvent.click(screen.getByRole("menuitem", { name: "Unpin" }));
+        expect(mockClient.sendStateEvent).toHaveBeenCalledWith(
+            room.roomId,
+            EventType.RoomPinnedEvents,
+            {
+                pinned: [pinEvent2.getId()],
+            },
+            "",
+        );
+    });
+
+    it("should delete the event", async () => {
+        // Enable redaction
+        jest.spyOn(
+            room.getLiveTimeline().getState(EventTimeline.FORWARDS)!,
+            "maySendRedactionForEvent",
+        ).mockReturnValue(true);
+
+        const { pinEvent } = await renderAndOpenMenu();
+
+        await userEvent.click(screen.getByRole("menuitem", { name: "Delete" }));
+        expect(createRedactEventDialog).toHaveBeenCalledWith({
+            mxEvent: pinEvent,
+        });
     });
 });

test/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap

@@ -4,25 +4,52 @@ exports[`<PinnedEventTile /> should render pinned event 1`] = `
 <div>
   <div
     class="mx_PinnedEventTile"
+    role="listitem"
   >
-    <span
-      class="_avatar_mcap2_17 mx_BaseAvatar mx_PinnedEventTile_senderAvatar _avatar-imageless_mcap2_61"
-      data-color="2"
-      data-testid="avatar-img"
-      data-type="round"
-      role="presentation"
-      style="--cpd-avatar-size: 24px;"
-    >
-      a
-    </span>
-    <span
-      class="mx_PinnedEventTile_sender mx_Username_color2"
-    >
-      @alice:server.org
-    </span>
+    <div>
+      <span
+        class="_avatar_mcap2_17 mx_BaseAvatar mx_PinnedEventTile_senderAvatar _avatar-imageless_mcap2_61"
+        data-color="2"
+        data-testid="avatar-img"
+        data-type="round"
+        role="presentation"
+        style="--cpd-avatar-size: 32px;"
+      >
+        a
+      </span>
+    </div>
     <div
-      class="mx_PinnedEventTile_message"
+      class="mx_PinnedEventTile_wrapper"
     >
+      <div
+        class="mx_PinnedEventTile_top"
+      >
+        <span
+          class="_typography_yh5dq_162 _font-body-md-semibold_yh5dq_64 mx_PinnedEventTile_sender mx_Username_color2"
+        >
+          @alice:server.org
+        </span>
+        <button
+          aria-disabled="false"
+          aria-expanded="false"
+          aria-haspopup="menu"
+          aria-label="Open menu"
+          class="_icon-button_bh2qc_17"
+          data-state="closed"
+          id="radix-0"
+          role="button"
+          style="--cpd-icon-button-size: 24px;"
+          tabindex="0"
+          type="button"
+        >
+          <div
+            class="_indicator-icon_133tf_26"
+            style="--cpd-icon-button-size: 100%;"
+          >
+            <div />
+          </div>
+        </button>
+      </div>
       <div
         class="mx_MTextBody mx_EventTile_content"
       >
@@ -34,22 +61,250 @@ exports[`<PinnedEventTile /> should render pinned event 1`] = `
         </div>
       </div>
     </div>
-    <div
-      class="mx_PinnedEventTile_footer"
-    >
-      <span
-        class="mx_MessageTimestamp mx_PinnedEventTile_timestamp"
-      >
-        Thu, Jan 1, 1970, 00:00
-      </span>
-      <div
-        class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link"
-        role="button"
-        tabindex="0"
-      >
-        View message
-      </div>
-    </div>
   </div>
 </div>
 `;
+
+exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
+<div
+  aria-label="Open menu"
+  aria-labelledby="radix-6"
+  aria-orientation="vertical"
+  class="_menu_1x5h1_17"
+  data-align="start"
+  data-orientation="vertical"
+  data-radix-menu-content=""
+  data-side="right"
+  data-state="open"
+  dir="ltr"
+  id="radix-7"
+  role="menu"
+  style="outline: none; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); pointer-events: auto;"
+  tabindex="-1"
+>
+  <button
+    class="_item_1gwvj_17 _interactive_1gwvj_36"
+    data-kind="primary"
+    data-orientation="vertical"
+    data-radix-collection-item=""
+    role="menuitem"
+    tabindex="-1"
+  >
+    <div
+      aria-hidden="true"
+      class="_icon_1gwvj_44"
+      height="24"
+      width="24"
+    />
+    <span
+      class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
+    >
+      View in timeline
+    </span>
+    <svg
+      aria-hidden="true"
+      class="_nav-hint_1gwvj_60"
+      fill="currentColor"
+      height="24"
+      viewBox="8 0 8 24"
+      width="8"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.877.877 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
+      />
+    </svg>
+  </button>
+  <button
+    class="_item_1gwvj_17 _interactive_1gwvj_36"
+    data-kind="primary"
+    data-orientation="vertical"
+    data-radix-collection-item=""
+    role="menuitem"
+    tabindex="-1"
+  >
+    <div
+      aria-hidden="true"
+      class="_icon_1gwvj_44"
+      height="24"
+      width="24"
+    />
+    <span
+      class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
+    >
+      Unpin
+    </span>
+    <svg
+      aria-hidden="true"
+      class="_nav-hint_1gwvj_60"
+      fill="currentColor"
+      height="24"
+      viewBox="8 0 8 24"
+      width="8"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.877.877 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
+      />
+    </svg>
+  </button>
+  <button
+    class="_item_1gwvj_17 _interactive_1gwvj_36"
+    data-kind="primary"
+    data-orientation="vertical"
+    data-radix-collection-item=""
+    role="menuitem"
+    tabindex="-1"
+  >
+    <div
+      aria-hidden="true"
+      class="_icon_1gwvj_44"
+      height="24"
+      width="24"
+    />
+    <span
+      class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
+    >
+      Forward
+    </span>
+    <svg
+      aria-hidden="true"
+      class="_nav-hint_1gwvj_60"
+      fill="currentColor"
+      height="24"
+      viewBox="8 0 8 24"
+      width="8"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.877.877 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
+      />
+    </svg>
+  </button>
+  <div
+    class="_separator_144s5_17"
+    data-kind="primary"
+    data-orientation="horizontal"
+    role="separator"
+  />
+  <button
+    class="_item_1gwvj_17 _interactive_1gwvj_36"
+    data-kind="critical"
+    data-orientation="vertical"
+    data-radix-collection-item=""
+    role="menuitem"
+    tabindex="-1"
+  >
+    <div
+      aria-hidden="true"
+      class="_icon_1gwvj_44"
+      height="24"
+      width="24"
+    />
+    <span
+      class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
+    >
+      Delete
+    </span>
+    <svg
+      aria-hidden="true"
+      class="_nav-hint_1gwvj_60"
+      fill="currentColor"
+      height="24"
+      viewBox="8 0 8 24"
+      width="8"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.877.877 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
+      />
+    </svg>
+  </button>
+</div>
+`;
+
+exports[`<PinnedEventTile /> should render the menu without unpin and delete 1`] = `
+<div
+  aria-label="Open menu"
+  aria-labelledby="radix-2"
+  aria-orientation="vertical"
+  class="_menu_1x5h1_17"
+  data-align="start"
+  data-orientation="vertical"
+  data-radix-menu-content=""
+  data-side="right"
+  data-state="open"
+  dir="ltr"
+  id="radix-3"
+  role="menu"
+  style="outline: none; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); pointer-events: auto;"
+  tabindex="-1"
+>
+  <button
+    class="_item_1gwvj_17 _interactive_1gwvj_36"
+    data-kind="primary"
+    data-orientation="vertical"
+    data-radix-collection-item=""
+    role="menuitem"
+    tabindex="-1"
+  >
+    <div
+      aria-hidden="true"
+      class="_icon_1gwvj_44"
+      height="24"
+      width="24"
+    />
+    <span
+      class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
+    >
+      View in timeline
+    </span>
+    <svg
+      aria-hidden="true"
+      class="_nav-hint_1gwvj_60"
+      fill="currentColor"
+      height="24"
+      viewBox="8 0 8 24"
+      width="8"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.877.877 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
+      />
+    </svg>
+  </button>
+  <button
+    class="_item_1gwvj_17 _interactive_1gwvj_36"
+    data-kind="primary"
+    data-orientation="vertical"
+    data-radix-collection-item=""
+    role="menuitem"
+    tabindex="-1"
+  >
+    <div
+      aria-hidden="true"
+      class="_icon_1gwvj_44"
+      height="24"
+      width="24"
+    />
+    <span
+      class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
+    >
+      Forward
+    </span>
+    <svg
+      aria-hidden="true"
+      class="_nav-hint_1gwvj_60"
+      fill="currentColor"
+      height="24"
+      viewBox="8 0 8 24"
+      width="8"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.877.877 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
+      />
+    </svg>
+  </button>
+</div>
+`;