Pinned Messages (#2081)

* add pinned room events hook

* room pinned message - WIP

* add room event hook

* fetch pinned messages before displaying

* use react-query in room event hook

* disable staleTime and gc to 1 hour in room event hook

* use room event hook in reply component

* render pinned messages

* add option to pin/unpin messages

* remove message base from message placeholders and add variant

* display message placeholder while loading pinned messages

* render pinned event error

* show no pinned message placeholder

* fix message placeholder flickering

src/app/components/message/Reply.tsx

@@ -1,8 +1,6 @@
 import { Box, Icon, Icons, Text, as, color, toRem } from 'folds';
-import { EventTimelineSet, MatrixClient, MatrixEvent, Room } from 'matrix-js-sdk';
+import { EventTimelineSet, Room } from 'matrix-js-sdk';
-import { CryptoBackend } from 'matrix-js-sdk/lib/common-crypto/CryptoBackend';
+import React, { MouseEventHandler, ReactNode, useCallback, useMemo } from 'react';
-import React, { MouseEventHandler, ReactNode, useEffect, useMemo, useState } from 'react';
-import to from 'await-to-js';
 import classNames from 'classnames';
 import colorMXID from '../../../util/colorMXID';
 import { getMemberDisplayName, trimReplyFromBody } from '../../utils/room';
@@ -12,6 +10,7 @@ import { randomNumberBetween } from '../../utils/common';
 import * as css from './Reply.css';
 import { MessageBadEncryptedContent, MessageDeletedContent, MessageFailedContent } from './content';
 import { scaleSystemEmoji } from '../../plugins/react-custom-html-parser';
+import { useRoomEvent } from '../../hooks/useRoomEvent';
 
 type ReplyLayoutProps = {
   userColor?: string;
@@ -46,7 +45,6 @@ export const ThreadIndicator = as<'div'>(({ ...props }, ref) => (
 ));
 
 type ReplyProps = {
-  mx: MatrixClient;
   room: Room;
   timelineSet?: EventTimelineSet | undefined;
   replyEventId: string;
@@ -54,12 +52,14 @@ type ReplyProps = {
   onClick?: MouseEventHandler | undefined;
 };
 
-export const Reply = as<'div', ReplyProps>((_, ref) => {
+export const Reply = as<'div', ReplyProps>(
-  const { mx, room, timelineSet, replyEventId, threadRootId, onClick, ...props } = _;
+  ({ room, timelineSet, replyEventId, threadRootId, onClick, ...props }, ref) => {
-  const [replyEvent, setReplyEvent] = useState<MatrixEvent | null | undefined>(
-    timelineSet?.findEventById(replyEventId)
-  );
     const placeholderWidth = useMemo(() => randomNumberBetween(40, 400), []);
+    const getFromLocalTimeline = useCallback(
+      () => timelineSet?.findEventById(replyEventId),
+      [timelineSet, replyEventId]
+    );
+    const replyEvent = useRoomEvent(room, replyEventId, getFromLocalTimeline);
 
     const { body } = replyEvent?.getContent() ?? {};
     const sender = replyEvent?.getSender();
@@ -70,27 +70,6 @@ export const Reply = as<'div', ReplyProps>((_, ref) => {
       <MessageFailedContent />
     );
 
-  useEffect(() => {
-    let disposed = false;
-    const loadEvent = async () => {
-      const [err, evt] = await to(mx.fetchRoomEvent(room.roomId, replyEventId));
-      const mEvent = new MatrixEvent(evt);
-      if (disposed) return;
-      if (err) {
-        setReplyEvent(null);
-        return;
-      }
-      if (mEvent.isEncrypted() && mx.getCrypto()) {
-        await to(mEvent.attemptDecryption(mx.getCrypto() as CryptoBackend));
-      }
-      setReplyEvent(mEvent);
-    };
-    if (replyEvent === undefined) loadEvent();
-    return () => {
-      disposed = true;
-    };
-  }, [replyEvent, mx, room, replyEventId]);
-
     const badEncryption = replyEvent?.getContent().msgtype === 'm.bad.encrypted';
     const bodyJSX = body ? scaleSystemEmoji(trimReplyFromBody(body)) : fallbackBody;
 
@@ -128,4 +107,5 @@ export const Reply = as<'div', ReplyProps>((_, ref) => {
         </ReplyLayout>
       </Box>
     );
-});
+  }
+);

src/app/components/message/placeholder/CompactPlaceholder.tsx

@@ -1,22 +1,27 @@
-import React from 'react';
+import React, { useMemo } from 'react';
-import { as, toRem } from 'folds';
+import { as, ContainerColor, toRem } from 'folds';
 import { randomNumberBetween } from '../../../utils/common';
 import { LinePlaceholder } from './LinePlaceholder';
-import { CompactLayout, MessageBase } from '../layout';
+import { CompactLayout } from '../layout';
 
-export const CompactPlaceholder = as<'div'>(({ ...props }, ref) => (
+export const CompactPlaceholder = as<'div', { variant?: ContainerColor }>(
-  <MessageBase>
+  ({ variant, ...props }, ref) => {
+    const nameSize = useMemo(() => randomNumberBetween(40, 100), []);
+    const msgSize = useMemo(() => randomNumberBetween(120, 500), []);
+
+    return (
       <CompactLayout
         {...props}
         ref={ref}
         before={
           <>
-          <LinePlaceholder style={{ maxWidth: toRem(50) }} />
+            <LinePlaceholder variant={variant} style={{ maxWidth: toRem(50) }} />
-          <LinePlaceholder style={{ maxWidth: toRem(randomNumberBetween(40, 100)) }} />
+            <LinePlaceholder variant={variant} style={{ maxWidth: toRem(nameSize) }} />
           </>
         }
       >
-      <LinePlaceholder style={{ maxWidth: toRem(randomNumberBetween(120, 500)) }} />
+        <LinePlaceholder variant={variant} style={{ maxWidth: toRem(msgSize) }} />
       </CompactLayout>
-  </MessageBase>
+    );
-));
+  }
+);

src/app/components/message/placeholder/DefaultPlaceholder.tsx

@@ -1,25 +1,39 @@
-import React, { CSSProperties } from 'react';
+import React, { CSSProperties, useMemo } from 'react';
-import { Avatar, Box, as, color, toRem } from 'folds';
+import { Avatar, Box, ContainerColor, as, color, toRem } from 'folds';
 import { randomNumberBetween } from '../../../utils/common';
 import { LinePlaceholder } from './LinePlaceholder';
-import { MessageBase, ModernLayout } from '../layout';
+import { ModernLayout } from '../layout';
 
 const contentMargin: CSSProperties = { marginTop: toRem(3) };
-const avatarBg: CSSProperties = { backgroundColor: color.SurfaceVariant.Container };
 
-export const DefaultPlaceholder = as<'div'>(({ ...props }, ref) => (
+export const DefaultPlaceholder = as<'div', { variant?: ContainerColor }>(
-  <MessageBase>
+  ({ variant, ...props }, ref) => {
-    <ModernLayout {...props} ref={ref} before={<Avatar style={avatarBg} size="300" />}>
+    const nameSize = useMemo(() => randomNumberBetween(40, 100), []);
+    const msgSize = useMemo(() => randomNumberBetween(80, 200), []);
+    const msg2Size = useMemo(() => randomNumberBetween(80, 200), []);
+
+    return (
+      <ModernLayout
+        {...props}
+        ref={ref}
+        before={
+          <Avatar
+            style={{ backgroundColor: color[variant ?? 'SurfaceVariant'].Container }}
+            size="300"
+          />
+        }
+      >
         <Box style={contentMargin} grow="Yes" direction="Column" gap="200">
           <Box grow="Yes" gap="200" alignItems="Center" justifyContent="SpaceBetween">
-          <LinePlaceholder style={{ maxWidth: toRem(randomNumberBetween(40, 100)) }} />
+            <LinePlaceholder variant={variant} style={{ maxWidth: toRem(nameSize) }} />
-          <LinePlaceholder style={{ maxWidth: toRem(50) }} />
+            <LinePlaceholder variant={variant} style={{ maxWidth: toRem(50) }} />
           </Box>
           <Box grow="Yes" gap="200" wrap="Wrap">
-          <LinePlaceholder style={{ maxWidth: toRem(randomNumberBetween(80, 200)) }} />
+            <LinePlaceholder variant={variant} style={{ maxWidth: toRem(msgSize) }} />
-          <LinePlaceholder style={{ maxWidth: toRem(randomNumberBetween(80, 200)) }} />
+            <LinePlaceholder variant={variant} style={{ maxWidth: toRem(msg2Size) }} />
           </Box>
         </Box>
       </ModernLayout>
-  </MessageBase>
+    );
-));
+  }
+);

src/app/components/message/placeholder/LinePlaceholder.css.ts

@@ -1,12 +1,35 @@
-import { style } from '@vanilla-extract/css';
+import { ComplexStyleRule } from '@vanilla-extract/css';
-import { DefaultReset, color, config, toRem } from 'folds';
+import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
+import { ContainerColor, DefaultReset, color, config, toRem } from 'folds';
 
-export const LinePlaceholder = style([
+const getVariant = (variant: ContainerColor): ComplexStyleRule => ({
+  backgroundColor: color[variant].Container,
+});
+
+export const LinePlaceholder = recipe({
+  base: [
     DefaultReset,
     {
       width: '100%',
       height: toRem(16),
       borderRadius: config.radii.R300,
-    backgroundColor: color.SurfaceVariant.Container,
     },
-]);
+  ],
+  variants: {
+    variant: {
+      Background: getVariant('Background'),
+      Surface: getVariant('Surface'),
+      SurfaceVariant: getVariant('SurfaceVariant'),
+      Primary: getVariant('Primary'),
+      Secondary: getVariant('Secondary'),
+      Success: getVariant('Success'),
+      Warning: getVariant('Warning'),
+      Critical: getVariant('Critical'),
+    },
+  },
+  defaultVariants: {
+    variant: 'SurfaceVariant',
+  },
+});
+
+export type LinePlaceholderVariants = RecipeVariants<typeof LinePlaceholder>;

src/app/components/message/placeholder/LinePlaceholder.tsx

@@ -3,6 +3,13 @@ import { Box, as } from 'folds';
 import classNames from 'classnames';
 import * as css from './LinePlaceholder.css';
 
-export const LinePlaceholder = as<'div'>(({ className, ...props }, ref) => (
+export const LinePlaceholder = as<'div', css.LinePlaceholderVariants>(
-  <Box className={classNames(css.LinePlaceholder, className)} shrink="No" {...props} ref={ref} />
+  ({ className, variant, ...props }, ref) => (
-));
+    <Box
+      className={classNames(css.LinePlaceholder({ variant }), className)}
+      shrink="No"
+      {...props}
+      ref={ref}
+    />
+  )
+);

src/app/features/room/RoomTimeline.tsx

@@ -433,10 +433,12 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
   const [showHiddenEvents] = useSetting(settingsAtom, 'showHiddenEvents');
   const setReplyDraft = useSetAtom(roomIdToReplyDraftAtomFamily(room.roomId));
   const powerLevels = usePowerLevelsContext();
-  const { canDoAction, canSendEvent, getPowerLevel } = usePowerLevelsAPI(powerLevels);
+  const { canDoAction, canSendEvent, canSendStateEvent, getPowerLevel } =
+    usePowerLevelsAPI(powerLevels);
   const myPowerLevel = getPowerLevel(mx.getUserId() ?? '');
   const canRedact = canDoAction('redact', myPowerLevel);
   const canSendReaction = canSendEvent(MessageEvent.Reaction, myPowerLevel);
+  const canPinEvent = canSendStateEvent(StateEvent.RoomPinnedEvents, myPowerLevel);
   const [editId, setEditId] = useState<string>();
   const roomToParents = useAtomValue(roomToParentsAtom);
   const unread = useRoomUnread(room.roomId, roomToUnreadAtom);
@@ -983,6 +985,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
             edit={editId === mEventId}
             canDelete={canRedact || mEvent.getSender() === mx.getUserId()}
             canSendReaction={canSendReaction}
+            canPinEvent={canPinEvent}
             imagePackRooms={imagePackRooms}
             relations={hasReactions ? reactionRelations : undefined}
             onUserClick={handleUserClick}
@@ -993,7 +996,6 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
             reply={
               replyEventId && (
                 <Reply
-                  mx={mx}
                   room={room}
                   timelineSet={timelineSet}
                   replyEventId={replyEventId}
@@ -1055,6 +1057,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
             edit={editId === mEventId}
             canDelete={canRedact || mEvent.getSender() === mx.getUserId()}
             canSendReaction={canSendReaction}
+            canPinEvent={canPinEvent}
             imagePackRooms={imagePackRooms}
             relations={hasReactions ? reactionRelations : undefined}
             onUserClick={handleUserClick}
@@ -1065,7 +1068,6 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
             reply={
               replyEventId && (
                 <Reply
-                  mx={mx}
                   room={room}
                   timelineSet={timelineSet}
                   replyEventId={replyEventId}
@@ -1163,6 +1165,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
             highlight={highlighted}
             canDelete={canRedact || mEvent.getSender() === mx.getUserId()}
             canSendReaction={canSendReaction}
+            canPinEvent={canPinEvent}
             imagePackRooms={imagePackRooms}
             relations={hasReactions ? reactionRelations : undefined}
             onUserClick={handleUserClick}
@@ -1551,17 +1554,33 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
           {(canPaginateBack || !rangeAtStart) &&
             (messageLayout === 1 ? (
               <>
-                <CompactPlaceholder />
+                <MessageBase>
-                <CompactPlaceholder />
+                  <CompactPlaceholder key={getItems().length} />
-                <CompactPlaceholder />
+                </MessageBase>
-                <CompactPlaceholder />
+                <MessageBase>
-                <CompactPlaceholder ref={observeBackAnchor} />
+                  <CompactPlaceholder key={getItems().length} />
+                </MessageBase>
+                <MessageBase>
+                  <CompactPlaceholder key={getItems().length} />
+                </MessageBase>
+                <MessageBase>
+                  <CompactPlaceholder key={getItems().length} />
+                </MessageBase>
+                <MessageBase ref={observeBackAnchor}>
+                  <CompactPlaceholder key={getItems().length} />
+                </MessageBase>
               </>
             ) : (
               <>
-                <DefaultPlaceholder />
+                <MessageBase>
-                <DefaultPlaceholder />
+                  <DefaultPlaceholder key={getItems().length} />
-                <DefaultPlaceholder ref={observeBackAnchor} />
+                </MessageBase>
+                <MessageBase>
+                  <DefaultPlaceholder key={getItems().length} />
+                </MessageBase>
+                <MessageBase ref={observeBackAnchor}>
+                  <DefaultPlaceholder key={getItems().length} />
+                </MessageBase>
               </>
             ))}
 
@@ -1570,17 +1589,33 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
           {(!liveTimelineLinked || !rangeAtEnd) &&
             (messageLayout === 1 ? (
               <>
-                <CompactPlaceholder ref={observeFrontAnchor} />
+                <MessageBase ref={observeFrontAnchor}>
-                <CompactPlaceholder />
+                  <CompactPlaceholder key={getItems().length} />
-                <CompactPlaceholder />
+                </MessageBase>
-                <CompactPlaceholder />
+                <MessageBase>
-                <CompactPlaceholder />
+                  <CompactPlaceholder key={getItems().length} />
+                </MessageBase>
+                <MessageBase>
+                  <CompactPlaceholder key={getItems().length} />
+                </MessageBase>
+                <MessageBase>
+                  <CompactPlaceholder key={getItems().length} />
+                </MessageBase>
+                <MessageBase>
+                  <CompactPlaceholder key={getItems().length} />
+                </MessageBase>
               </>
             ) : (
               <>
-                <DefaultPlaceholder ref={observeFrontAnchor} />
+                <MessageBase ref={observeFrontAnchor}>
-                <DefaultPlaceholder />
+                  <DefaultPlaceholder key={getItems().length} />
-                <DefaultPlaceholder />
+                </MessageBase>
+                <MessageBase>
+                  <DefaultPlaceholder key={getItems().length} />
+                </MessageBase>
+                <MessageBase>
+                  <DefaultPlaceholder key={getItems().length} />
+                </MessageBase>
               </>
             ))}
           <span ref={atBottomAnchorRef} />

src/app/features/room/RoomViewHeader.tsx

@@ -19,6 +19,7 @@ import {
   Line,
   PopOut,
   RectCords,
+  Badge,
 } from 'folds';
 import { useNavigate } from 'react-router-dom';
 import { JoinRule, Room } from 'matrix-js-sdk';
@@ -54,6 +55,8 @@ import { getMatrixToRoom } from '../../plugins/matrix-to';
 import { getViaServers } from '../../plugins/via-servers';
 import { BackRouteHandler } from '../../components/BackRouteHandler';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+import { useRoomPinnedEvents } from '../../hooks/useRoomPinnedEvents';
+import { RoomPinMenu } from './room-pin-menu';
 
 type RoomMenuProps = {
   room: Room;
@@ -180,14 +183,18 @@ export function RoomViewHeader() {
   const room = useRoom();
   const space = useSpaceOptionally();
   const [menuAnchor, setMenuAnchor] = useState<RectCords>();
+  const [pinMenuAnchor, setPinMenuAnchor] = useState<RectCords>();
   const mDirects = useAtomValue(mDirectAtom);
 
+  const pinnedEvents = useRoomPinnedEvents(room);
   const encryptionEvent = useStateEvent(room, StateEvent.RoomEncryption);
   const ecryptedRoom = !!encryptionEvent;
   const avatarMxc = useRoomAvatar(room, mDirects.has(room.roomId));
   const name = useRoomName(room);
   const topic = useRoomTopic(room);
-  const avatarUrl = avatarMxc ? mxcUrlToHttp(mx, avatarMxc, useAuthentication, 96, 96, 'crop') ?? undefined : undefined;
+  const avatarUrl = avatarMxc
+    ? mxcUrlToHttp(mx, avatarMxc, useAuthentication, 96, 96, 'crop') ?? undefined
+    : undefined;
 
   const setPeopleDrawer = useSetSetting(settingsAtom, 'isPeopleDrawer');
 
@@ -205,6 +212,10 @@ export function RoomViewHeader() {
     setMenuAnchor(evt.currentTarget.getBoundingClientRect());
   };
 
+  const handleOpenPinMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
+    setPinMenuAnchor(evt.currentTarget.getBoundingClientRect());
+  };
+
   return (
     <PageHeader balance={screenSize === ScreenSize.Mobile}>
       <Box grow="Yes" gap="300">
@@ -297,6 +308,62 @@ export function RoomViewHeader() {
               )}
             </TooltipProvider>
           )}
+          <TooltipProvider
+            position="Bottom"
+            offset={4}
+            tooltip={
+              <Tooltip>
+                <Text>Pinned Messages</Text>
+              </Tooltip>
+            }
+          >
+            {(triggerRef) => (
+              <IconButton
+                style={{ position: 'relative' }}
+                onClick={handleOpenPinMenu}
+                ref={triggerRef}
+                aria-pressed={!!pinMenuAnchor}
+              >
+                {pinnedEvents.length > 0 && (
+                  <Badge
+                    style={{
+                      position: 'absolute',
+                      left: toRem(3),
+                      top: toRem(3),
+                    }}
+                    variant="Secondary"
+                    size="400"
+                    fill="Solid"
+                    radii="Pill"
+                  >
+                    <Text as="span" size="L400">
+                      {pinnedEvents.length}
+                    </Text>
+                  </Badge>
+                )}
+                <Icon size="400" src={Icons.Pin} filled={!!pinMenuAnchor} />
+              </IconButton>
+            )}
+          </TooltipProvider>
+          <PopOut
+            anchor={pinMenuAnchor}
+            position="Bottom"
+            content={
+              <FocusTrap
+                focusTrapOptions={{
+                  initialFocus: false,
+                  returnFocusOnDeactivate: false,
+                  onDeactivate: () => setPinMenuAnchor(undefined),
+                  clickOutsideDeactivates: true,
+                  isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
+                  isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
+                  escapeDeactivates: stopPropagation,
+                }}
+              >
+                <RoomPinMenu room={room} requestClose={() => setPinMenuAnchor(undefined)} />
+              </FocusTrap>
+            }
+          />
           {screenSize === ScreenSize.Desktop && (
             <TooltipProvider
               position="Bottom"

src/app/features/room/message/Message.tsx

@@ -35,6 +35,7 @@ import { useHover, useFocusWithin } from 'react-aria';
 import { MatrixEvent, Room } from 'matrix-js-sdk';
 import { Relations } from 'matrix-js-sdk/lib/models/relations';
 import classNames from 'classnames';
+import { EventType, RoomPinnedEventsEventContent } from 'matrix-js-sdk/lib/types';
 import {
   AvatarBase,
   BubbleLayout,
@@ -51,7 +52,12 @@ import {
   getMemberAvatarMxc,
   getMemberDisplayName,
 } from '../../../utils/room';
-import { getCanonicalAliasOrRoomId, getMxIdLocalPart, isRoomAlias, mxcUrlToHttp } from '../../../utils/matrix';
+import {
+  getCanonicalAliasOrRoomId,
+  getMxIdLocalPart,
+  isRoomAlias,
+  mxcUrlToHttp,
+} from '../../../utils/matrix';
 import { MessageLayout, MessageSpacing } from '../../../state/settings';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { useRecentEmoji } from '../../../hooks/useRecentEmoji';
@@ -68,6 +74,8 @@ import { stopPropagation } from '../../../utils/keyboard';
 import { getMatrixToRoomEvent } from '../../../plugins/matrix-to';
 import { getViaServers } from '../../../plugins/via-servers';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
+import { useRoomPinnedEvents } from '../../../hooks/useRoomPinnedEvents';
+import { StateEvent } from '../../../../types/matrix/room';
 
 export type ReactionHandler = (keyOrMxc: string, shortcode: string) => void;
 
@@ -340,6 +348,46 @@ export const MessageCopyLinkItem = as<
   );
 });
 
+export const MessagePinItem = as<
+  'button',
+  {
+    room: Room;
+    mEvent: MatrixEvent;
+    onClose?: () => void;
+  }
+>(({ room, mEvent, onClose, ...props }, ref) => {
+  const mx = useMatrixClient();
+  const pinnedEvents = useRoomPinnedEvents(room);
+  const isPinned = pinnedEvents.includes(mEvent.getId() ?? '');
+
+  const handlePin = () => {
+    const eventId = mEvent.getId();
+    const pinContent: RoomPinnedEventsEventContent = {
+      pinned: Array.from(pinnedEvents).filter((id) => id !== eventId),
+    };
+    if (!isPinned && eventId) {
+      pinContent.pinned.push(eventId);
+    }
+    mx.sendStateEvent(room.roomId, StateEvent.RoomPinnedEvents, pinContent);
+    onClose?.();
+  };
+
+  return (
+    <MenuItem
+      size="300"
+      after={<Icon size="100" src={Icons.Pin} />}
+      radii="300"
+      onClick={handlePin}
+      {...props}
+      ref={ref}
+    >
+      <Text className={css.MessageMenuItemText} as="span" size="T300" truncate>
+        {isPinned ? 'Unpin Message' : 'Pin Message'}
+      </Text>
+    </MenuItem>
+  );
+});
+
 export const MessageDeleteItem = as<
   'button',
   {
@@ -611,6 +659,7 @@ export type MessageProps = {
   edit?: boolean;
   canDelete?: boolean;
   canSendReaction?: boolean;
+  canPinEvent?: boolean;
   imagePackRooms?: Room[];
   relations?: Relations;
   messageLayout: MessageLayout;
@@ -634,6 +683,7 @@ export const Message = as<'div', MessageProps>(
       edit,
       canDelete,
       canSendReaction,
+      canPinEvent,
       imagePackRooms,
       relations,
       messageLayout,
@@ -949,6 +999,9 @@ export const Message = as<'div', MessageProps>(
                           />
                           <MessageSourceCodeItem room={room} mEvent={mEvent} onClose={closeMenu} />
                           <MessageCopyLinkItem room={room} mEvent={mEvent} onClose={closeMenu} />
+                          {canPinEvent && (
+                            <MessagePinItem room={room} mEvent={mEvent} onClose={closeMenu} />
+                          )}
                         </Box>
                         {((!mEvent.isRedacted() && canDelete) ||
                           mEvent.getSender() !== mx.getUserId()) && (

src/app/features/room/room-pin-menu/RoomPinMenu.css.ts

@@ -0,0 +1,18 @@
+import { style } from '@vanilla-extract/css';
+import { config, toRem } from 'folds';
+
+export const PinMenu = style({
+  display: 'flex',
+  maxWidth: toRem(548),
+  width: '100vw',
+  maxHeight: '90vh',
+});
+
+export const PinMenuHeader = style({
+  paddingLeft: config.space.S400,
+  paddingRight: config.space.S200,
+});
+
+export const PinMenuContent = style({
+  paddingLeft: config.space.S200,
+});

src/app/features/room/room-pin-menu/RoomPinMenu.tsx

@@ -0,0 +1,468 @@
+/* eslint-disable react/destructuring-assignment */
+import React, { forwardRef, MouseEventHandler, useCallback, useMemo, useRef } from 'react';
+import { MatrixEvent, RelationType, Room } from 'matrix-js-sdk';
+import { RoomPinnedEventsEventContent } from 'matrix-js-sdk/lib/types';
+import {
+  Avatar,
+  Box,
+  Chip,
+  color,
+  config,
+  Header,
+  Icon,
+  IconButton,
+  Icons,
+  Menu,
+  Scroll,
+  Spinner,
+  Text,
+  toRem,
+} from 'folds';
+import { Opts as LinkifyOpts } from 'linkifyjs';
+import { HTMLReactParserOptions } from 'html-react-parser';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { useRoomPinnedEvents } from '../../../hooks/useRoomPinnedEvents';
+import * as css from './RoomPinMenu.css';
+import { SequenceCard } from '../../../components/sequence-card';
+import { useRoomEvent } from '../../../hooks/useRoomEvent';
+import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
+import {
+  AvatarBase,
+  DefaultPlaceholder,
+  ImageContent,
+  MessageNotDecryptedContent,
+  MessageUnsupportedContent,
+  ModernLayout,
+  MSticker,
+  RedactedContent,
+  Reply,
+  Time,
+  Username,
+} from '../../../components/message';
+import { UserAvatar } from '../../../components/user-avatar';
+import { getMxIdLocalPart, mxcUrlToHttp } from '../../../utils/matrix';
+import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import {
+  getEditedEvent,
+  getMemberAvatarMxc,
+  getMemberDisplayName,
+  getStateEvent,
+} from '../../../utils/room';
+import { GetContentCallback, MessageEvent, StateEvent } from '../../../../types/matrix/room';
+import colorMXID from '../../../../util/colorMXID';
+import { useMentionClickHandler } from '../../../hooks/useMentionClickHandler';
+import { useSpoilerClickHandler } from '../../../hooks/useSpoilerClickHandler';
+import {
+  factoryRenderLinkifyWithMention,
+  getReactCustomHtmlParser,
+  LINKIFY_OPTS,
+  makeMentionCustomProps,
+  renderMatrixMention,
+} from '../../../plugins/react-custom-html-parser';
+import { RenderMatrixEvent, useMatrixEventRenderer } from '../../../hooks/useMatrixEventRenderer';
+import { RenderMessageContent } from '../../../components/RenderMessageContent';
+import { useSetting } from '../../../state/hooks/settings';
+import { settingsAtom } from '../../../state/settings';
+import * as customHtmlCss from '../../../styles/CustomHtml.css';
+import { EncryptedContent } from '../message';
+import { Image } from '../../../components/media';
+import { ImageViewer } from '../../../components/image-viewer';
+import { useRoomNavigate } from '../../../hooks/useRoomNavigate';
+import { VirtualTile } from '../../../components/virtualizer';
+import { usePowerLevelsAPI, usePowerLevelsContext } from '../../../hooks/usePowerLevels';
+import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
+import { ContainerColor } from '../../../styles/ContainerColor.css';
+
+type PinnedMessageProps = {
+  room: Room;
+  eventId: string;
+  renderContent: RenderMatrixEvent<[MatrixEvent, string, GetContentCallback]>;
+  onOpen: (roomId: string, eventId: string) => void;
+  canPinEvent: boolean;
+};
+function PinnedMessage({ room, eventId, renderContent, onOpen, canPinEvent }: PinnedMessageProps) {
+  const pinnedEvent = useRoomEvent(room, eventId);
+  const useAuthentication = useMediaAuthentication();
+  const mx = useMatrixClient();
+
+  const [unpinState, unpin] = useAsyncCallback(
+    useCallback(() => {
+      const pinEvent = getStateEvent(room, StateEvent.RoomPinnedEvents);
+      const content = pinEvent?.getContent<RoomPinnedEventsEventContent>() ?? { pinned: [] };
+      const newContent: RoomPinnedEventsEventContent = {
+        pinned: content.pinned.filter((id) => id !== eventId),
+      };
+
+      return mx.sendStateEvent(room.roomId, StateEvent.RoomPinnedEvents, newContent);
+    }, [room, eventId, mx])
+  );
+
+  const handleOpenClick: MouseEventHandler = (evt) => {
+    evt.stopPropagation();
+    const evtId = evt.currentTarget.getAttribute('data-event-id');
+    if (!evtId) return;
+    onOpen(room.roomId, evtId);
+  };
+
+  const handleUnpinClick: MouseEventHandler = (evt) => {
+    evt.stopPropagation();
+    unpin();
+  };
+
+  const renderOptions = () => (
+    <Box shrink="No" gap="200" alignItems="Center">
+      <Chip data-event-id={eventId} onClick={handleOpenClick} variant="Secondary" radii="Pill">
+        <Text size="T200">Open</Text>
+      </Chip>
+      {canPinEvent && (
+        <IconButton
+          data-event-id={eventId}
+          variant="Secondary"
+          size="300"
+          radii="Pill"
+          onClick={unpinState.status === AsyncStatus.Loading ? undefined : handleUnpinClick}
+          aria-disabled={unpinState.status === AsyncStatus.Loading}
+        >
+          {unpinState.status === AsyncStatus.Loading ? (
+            <Spinner size="100" />
+          ) : (
+            <Icon src={Icons.Cross} size="100" />
+          )}
+        </IconButton>
+      )}
+    </Box>
+  );
+
+  if (pinnedEvent === undefined) return <DefaultPlaceholder variant="Secondary" />;
+  if (pinnedEvent === null)
+    return (
+      <Box gap="300" justifyContent="SpaceBetween" alignItems="Center">
+        <Box>
+          <Text style={{ color: color.Critical.Main }}>Failed to load message!</Text>
+        </Box>
+        {renderOptions()}
+      </Box>
+    );
+
+  const sender = pinnedEvent.getSender()!;
+  const displayName = getMemberDisplayName(room, sender) ?? getMxIdLocalPart(sender) ?? sender;
+  const senderAvatarMxc = getMemberAvatarMxc(room, sender);
+  const getContent = (() => pinnedEvent.getContent()) as GetContentCallback;
+  return (
+    <ModernLayout
+      before={
+        <AvatarBase>
+          <Avatar size="300">
+            <UserAvatar
+              userId={sender}
+              src={
+                senderAvatarMxc
+                  ? mxcUrlToHttp(mx, senderAvatarMxc, useAuthentication, 48, 48, 'crop') ??
+                    undefined
+                  : undefined
+              }
+              alt={displayName}
+              renderFallback={() => <Icon size="200" src={Icons.User} filled />}
+            />
+          </Avatar>
+        </AvatarBase>
+      }
+    >
+      <Box gap="300" justifyContent="SpaceBetween" alignItems="Center" grow="Yes">
+        <Box gap="200" alignItems="Baseline">
+          <Username style={{ color: colorMXID(sender) }}>
+            <Text as="span" truncate>
+              <b>{displayName}</b>
+            </Text>
+          </Username>
+          <Time ts={pinnedEvent.getTs()} />
+        </Box>
+        {renderOptions()}
+      </Box>
+      {pinnedEvent.replyEventId && (
+        <Reply
+          room={room}
+          replyEventId={pinnedEvent.replyEventId}
+          threadRootId={pinnedEvent.threadRootId}
+          onClick={handleOpenClick}
+        />
+      )}
+      {renderContent(pinnedEvent.getType(), false, pinnedEvent, displayName, getContent)}
+    </ModernLayout>
+  );
+}
+
+type RoomPinMenuProps = {
+  room: Room;
+  requestClose: () => void;
+};
+export const RoomPinMenu = forwardRef<HTMLDivElement, RoomPinMenuProps>(
+  ({ room, requestClose }, ref) => {
+    const mx = useMatrixClient();
+    const userId = mx.getUserId()!;
+    const powerLevels = usePowerLevelsContext();
+    const { canSendStateEvent, getPowerLevel } = usePowerLevelsAPI(powerLevels);
+    const canPinEvent = canSendStateEvent(StateEvent.RoomPinnedEvents, getPowerLevel(userId));
+
+    const pinnedEvents = useRoomPinnedEvents(room);
+    const sortedPinnedEvent = useMemo(() => Array.from(pinnedEvents).reverse(), [pinnedEvents]);
+    const useAuthentication = useMediaAuthentication();
+    const [mediaAutoLoad] = useSetting(settingsAtom, 'mediaAutoLoad');
+    const [urlPreview] = useSetting(settingsAtom, 'urlPreview');
+    const { navigateRoom } = useRoomNavigate();
+    const scrollRef = useRef<HTMLDivElement>(null);
+
+    const virtualizer = useVirtualizer({
+      count: sortedPinnedEvent.length,
+      getScrollElement: () => scrollRef.current,
+      estimateSize: () => 75,
+      overscan: 4,
+    });
+
+    const mentionClickHandler = useMentionClickHandler(room.roomId);
+    const spoilerClickHandler = useSpoilerClickHandler();
+
+    const linkifyOpts = useMemo<LinkifyOpts>(
+      () => ({
+        ...LINKIFY_OPTS,
+        render: factoryRenderLinkifyWithMention((href) =>
+          renderMatrixMention(mx, room.roomId, href, makeMentionCustomProps(mentionClickHandler))
+        ),
+      }),
+      [mx, room, mentionClickHandler]
+    );
+    const htmlReactParserOptions = useMemo<HTMLReactParserOptions>(
+      () =>
+        getReactCustomHtmlParser(mx, room.roomId, {
+          linkifyOpts,
+          useAuthentication,
+          handleSpoilerClick: spoilerClickHandler,
+          handleMentionClick: mentionClickHandler,
+        }),
+      [mx, room, linkifyOpts, mentionClickHandler, spoilerClickHandler, useAuthentication]
+    );
+
+    const renderMatrixEvent = useMatrixEventRenderer<[MatrixEvent, string, GetContentCallback]>(
+      {
+        [MessageEvent.RoomMessage]: (event, displayName, getContent) => {
+          if (event.isRedacted()) {
+            return (
+              <RedactedContent reason={event.getUnsigned().redacted_because?.content.reason} />
+            );
+          }
+
+          return (
+            <RenderMessageContent
+              displayName={displayName}
+              msgType={event.getContent().msgtype ?? ''}
+              ts={event.getTs()}
+              getContent={getContent}
+              mediaAutoLoad={mediaAutoLoad}
+              urlPreview={urlPreview}
+              htmlReactParserOptions={htmlReactParserOptions}
+              linkifyOpts={linkifyOpts}
+              outlineAttachment
+            />
+          );
+        },
+        [MessageEvent.RoomMessageEncrypted]: (event, displayName) => {
+          const eventId = event.getId()!;
+          const evtTimeline = room.getTimelineForEvent(eventId);
+
+          const mEvent = evtTimeline?.getEvents().find((e) => e.getId() === eventId);
+
+          if (!mEvent || !evtTimeline) {
+            return (
+              <Box grow="Yes" direction="Column">
+                <Text size="T400" priority="300">
+                  <code className={customHtmlCss.Code}>{event.getType()}</code>
+                  {' event'}
+                </Text>
+              </Box>
+            );
+          }
+
+          return (
+            <EncryptedContent mEvent={mEvent}>
+              {() => {
+                if (mEvent.isRedacted()) return <RedactedContent />;
+                if (mEvent.getType() === MessageEvent.Sticker)
+                  return (
+                    <MSticker
+                      content={mEvent.getContent()}
+                      renderImageContent={(props) => (
+                        <ImageContent
+                          {...props}
+                          autoPlay={mediaAutoLoad}
+                          renderImage={(p) => <Image {...p} loading="lazy" />}
+                          renderViewer={(p) => <ImageViewer {...p} />}
+                        />
+                      )}
+                    />
+                  );
+                if (mEvent.getType() === MessageEvent.RoomMessage) {
+                  const editedEvent = getEditedEvent(eventId, mEvent, evtTimeline.getTimelineSet());
+                  const getContent = (() =>
+                    editedEvent?.getContent()['m.new_content'] ??
+                    mEvent.getContent()) as GetContentCallback;
+
+                  return (
+                    <RenderMessageContent
+                      displayName={displayName}
+                      msgType={mEvent.getContent().msgtype ?? ''}
+                      ts={mEvent.getTs()}
+                      edited={!!editedEvent}
+                      getContent={getContent}
+                      mediaAutoLoad={mediaAutoLoad}
+                      urlPreview={urlPreview}
+                      htmlReactParserOptions={htmlReactParserOptions}
+                      linkifyOpts={linkifyOpts}
+                    />
+                  );
+                }
+                if (mEvent.getType() === MessageEvent.RoomMessageEncrypted)
+                  return (
+                    <Text>
+                      <MessageNotDecryptedContent />
+                    </Text>
+                  );
+                return (
+                  <Text>
+                    <MessageUnsupportedContent />
+                  </Text>
+                );
+              }}
+            </EncryptedContent>
+          );
+        },
+        [MessageEvent.Sticker]: (event, displayName, getContent) => {
+          if (event.isRedacted()) {
+            return (
+              <RedactedContent reason={event.getUnsigned().redacted_because?.content.reason} />
+            );
+          }
+          return (
+            <MSticker
+              content={getContent()}
+              renderImageContent={(props) => (
+                <ImageContent
+                  {...props}
+                  autoPlay={mediaAutoLoad}
+                  renderImage={(p) => <Image {...p} loading="lazy" />}
+                  renderViewer={(p) => <ImageViewer {...p} />}
+                />
+              )}
+            />
+          );
+        },
+      },
+      undefined,
+      (event) => {
+        if (event.isRedacted()) {
+          return <RedactedContent reason={event.getUnsigned().redacted_because?.content.reason} />;
+        }
+        return (
+          <Box grow="Yes" direction="Column">
+            <Text size="T400" priority="300">
+              <code className={customHtmlCss.Code}>{event.getType()}</code>
+              {' event'}
+            </Text>
+          </Box>
+        );
+      }
+    );
+
+    const handleOpen = (roomId: string, eventId: string) => {
+      navigateRoom(roomId, eventId);
+      requestClose();
+    };
+
+    return (
+      <Menu ref={ref} className={css.PinMenu}>
+        <Box grow="Yes" direction="Column">
+          <Header className={css.PinMenuHeader} size="500">
+            <Box grow="Yes">
+              <Text size="H5">Pinned Messages</Text>
+            </Box>
+            <Box shrink="No">
+              <IconButton size="300" onClick={requestClose} radii="300">
+                <Icon src={Icons.Cross} size="400" />
+              </IconButton>
+            </Box>
+          </Header>
+          <Box grow="Yes">
+            <Scroll ref={scrollRef} size="300" hideTrack visibility="Hover">
+              <Box className={css.PinMenuContent} direction="Column" gap="100">
+                {sortedPinnedEvent.length > 0 ? (
+                  <div
+                    style={{
+                      position: 'relative',
+                      height: virtualizer.getTotalSize(),
+                    }}
+                  >
+                    {virtualizer.getVirtualItems().map((vItem) => {
+                      const eventId = sortedPinnedEvent[vItem.index];
+                      if (!eventId) return null;
+
+                      return (
+                        <VirtualTile
+                          virtualItem={vItem}
+                          style={{ paddingBottom: config.space.S200 }}
+                          ref={virtualizer.measureElement}
+                          key={vItem.index}
+                        >
+                          <SequenceCard
+                            style={{ padding: config.space.S400, borderRadius: config.radii.R300 }}
+                            variant="SurfaceVariant"
+                            direction="Column"
+                          >
+                            <PinnedMessage
+                              room={room}
+                              eventId={eventId}
+                              renderContent={renderMatrixEvent}
+                              onOpen={handleOpen}
+                              canPinEvent={canPinEvent}
+                            />
+                          </SequenceCard>
+                        </VirtualTile>
+                      );
+                    })}
+                  </div>
+                ) : (
+                  <Box
+                    className={ContainerColor({ variant: 'SurfaceVariant' })}
+                    style={{
+                      marginBottom: config.space.S200,
+                      padding: `${config.space.S700} ${config.space.S400} ${toRem(60)}`,
+                      borderRadius: config.radii.R300,
+                    }}
+                    grow="Yes"
+                    direction="Column"
+                    gap="400"
+                    justifyContent="Center"
+                    alignItems="Center"
+                  >
+                    <Icon src={Icons.Pin} size="600" />
+                    <Box
+                      style={{ maxWidth: toRem(300) }}
+                      direction="Column"
+                      gap="200"
+                      alignItems="Center"
+                    >
+                      <Text size="H4" align="Center">
+                        No Pinned Messages
+                      </Text>
+                      <Text size="T400" align="Center">
+                        Users with sufficient power level can pin a messages from its context menu.
+                      </Text>
+                    </Box>
+                  </Box>
+                )}
+              </Box>
+            </Scroll>
+          </Box>
+        </Box>
+      </Menu>
+    );
+  }
+);

src/app/features/room/room-pin-menu/index.ts

@@ -0,0 +1 @@
+export * from './RoomPinMenu';

src/app/hooks/useRoomEvent.ts

@@ -0,0 +1,56 @@
+import { MatrixEvent, Room } from 'matrix-js-sdk';
+import { useCallback, useMemo } from 'react';
+import to from 'await-to-js';
+import { CryptoBackend } from 'matrix-js-sdk/lib/common-crypto/CryptoBackend';
+import { useQuery } from '@tanstack/react-query';
+import { useMatrixClient } from './useMatrixClient';
+
+const useFetchEvent = (room: Room, eventId: string) => {
+  const mx = useMatrixClient();
+
+  const fetchEventCallback = useCallback(async () => {
+    const evt = await mx.fetchRoomEvent(room.roomId, eventId);
+    const mEvent = new MatrixEvent(evt);
+
+    if (mEvent.isEncrypted() && mx.getCrypto()) {
+      await to(mEvent.attemptDecryption(mx.getCrypto() as CryptoBackend));
+    }
+
+    return mEvent;
+  }, [mx, room.roomId, eventId]);
+
+  return fetchEventCallback;
+};
+
+/**
+ *
+ * @param room
+ * @param eventId
+ * @returns `MatrixEvent`, `undefined` means loading, `null` means failure
+ */
+export const useRoomEvent = (
+  room: Room,
+  eventId: string,
+  getLocally?: () => MatrixEvent | undefined
+) => {
+  const event = useMemo(() => {
+    if (getLocally) return getLocally();
+    return room.findEventById(eventId);
+  }, [room, eventId, getLocally]);
+
+  const fetchEvent = useFetchEvent(room, eventId);
+
+  const { data, error } = useQuery({
+    enabled: event === undefined,
+    queryKey: [room.roomId, eventId],
+    queryFn: fetchEvent,
+    staleTime: Infinity,
+    gcTime: 60 * 60 * 1000, // 1hour
+  });
+
+  if (event) return event;
+  if (data) return data;
+  if (error) return null;
+
+  return undefined;
+};

src/app/hooks/useRoomPinnedEvents.ts

@@ -0,0 +1,15 @@
+import { useMemo } from 'react';
+import { RoomPinnedEventsEventContent } from 'matrix-js-sdk/lib/types';
+import { Room } from 'matrix-js-sdk';
+import { StateEvent } from '../../types/matrix/room';
+import { useStateEvent } from './useStateEvent';
+
+export const useRoomPinnedEvents = (room: Room): string[] => {
+  const pinEvent = useStateEvent(room, StateEvent.RoomPinnedEvents);
+  const events = useMemo(() => {
+    const content = pinEvent?.getContent<RoomPinnedEventsEventContent>();
+    return content?.pinned ?? [];
+  }, [pinEvent]);
+
+  return events;
+};

src/app/pages/client/inbox/Notifications.tsx

@@ -427,7 +427,14 @@ function RoomNotificationsGroupComp({
                         userId={event.sender}
                         src={
                           senderAvatarMxc
-                            ? mxcUrlToHttp(mx, senderAvatarMxc, useAuthentication, 48, 48, 'crop') ?? undefined
+                            ? mxcUrlToHttp(
+                                mx,
+                                senderAvatarMxc,
+                                useAuthentication,
+                                48,
+                                48,
+                                'crop'
+                              ) ?? undefined
                             : undefined
                         }
                         alt={displayName}
@@ -459,7 +466,6 @@ function RoomNotificationsGroupComp({
                 </Box>
                 {replyEventId && (
                   <Reply
-                    mx={mx}
                     room={room}
                     replyEventId={replyEventId}
                     threadRootId={threadRootId}