diff --git a/src/hooks/usePinnedEvents.ts b/src/hooks/usePinnedEvents.ts index dd01ecb6ad..07ace81abe 100644 --- a/src/hooks/usePinnedEvents.ts +++ b/src/hooks/usePinnedEvents.ts @@ -27,16 +27,18 @@ import PinningUtils from "../utils/PinningUtils"; /** * Get the pinned event IDs from a room. + * The number of pinned events is limited to 100. * @param room */ function getPinnedEventIds(room?: Room): string[] { - return ( + const eventIds: string[] = room ?.getLiveTimeline() .getState(EventTimeline.FORWARDS) ?.getStateEvents(EventType.RoomPinnedEvents, "") - ?.getContent()?.pinned ?? [] - ); + ?.getContent()?.pinned ?? []; + // Limit the number of pinned events to 100 + return eventIds.slice(0, 100); } /** diff --git a/test/components/views/right_panel/PinnedMessagesCard-test.tsx b/test/components/views/right_panel/PinnedMessagesCard-test.tsx index 9fd212b43c..8f8ffa3520 100644 --- a/test/components/views/right_panel/PinnedMessagesCard-test.tsx +++ b/test/components/views/right_panel/PinnedMessagesCard-test.tsx @@ -196,6 +196,21 @@ describe("", () => { expect(asFragment()).toMatchSnapshot(); }); + it("should not show more than 100 messages", async () => { + const events = Array.from({ length: 120 }, (_, i) => + mkMessage({ + event: true, + room: "!room:example.org", + user: "@alice:example.org", + msg: `The message ${i}`, + ts: i, + }), + ); + await initPinnedMessagesCard(events, []); + + expect(screen.queryAllByRole("listitem")).toHaveLength(100); + }); + it("should updates when messages are pinned", async () => { // Start with nothing pinned const { addLocalPinEvent, addNonLocalPinEvent } = await initPinnedMessagesCard([], []);