room pinned message - WIP

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

@@ -0,0 +1,6 @@
+import { style } from '@vanilla-extract/css';
+import { config } from 'folds';
+
+export const PinMenuHeader = style({
+  paddingLeft: config.space.S300,
+});

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

@@ -0,0 +1,43 @@
+import React, { forwardRef } from 'react';
+import { Room } from 'matrix-js-sdk';
+import { Box, Header, Menu, Scroll, Text, toRem } from 'folds';
+import { useRoomPinnedEvents } from '../../hooks/useRoomPinnedEvents';
+import * as css from './RoomPinMenu.css';
+
+type RoomPinMenuProps = {
+  room: Room;
+  requestClose: () => void;
+};
+export const RoomPinMenu = forwardRef<HTMLDivElement, RoomPinMenuProps>(
+  ({ room, requestClose }, ref) => {
+    const pinnedEvents = useRoomPinnedEvents(room);
+    const pinnedData = pinnedEvents.map((eventId) => room.findEventById(eventId) ?? eventId);
+
+    return (
+      <Menu
+        ref={ref}
+        style={{ maxWidth: toRem(560), width: '100vw', display: 'flex', flexDirection: 'column' }}
+      >
+        <Header className={css.PinMenuHeader} size="500">
+          <Box grow="Yes">
+            <Text size="H5">Pinned Messages</Text>
+          </Box>
+          <Box shrink="No">
+            <button type="button" onClick={requestClose}>
+              close
+            </button>
+          </Box>
+        </Header>
+        <Box grow="Yes">
+          <Scroll>
+            {pinnedData.map((data) => {
+              if (typeof data === 'string') return <p>{data}</p>;
+
+              return <p>{data.getContent().body}</p>;
+            })}
+          </Scroll>
+        </Box>
+      </Menu>
+    );
+  }
+);

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

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

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 '../../components/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>
           )}
+          {pinnedEvents.length > 0 && (
+            <TooltipProvider
+              position="Bottom"
+              offset={4}
+              tooltip={
+                <Tooltip>
+                  <Text>Pinned Messages</Text>
+                </Tooltip>
+              }
+            >
+              {(triggerRef) => (
+                <IconButton
+                  style={{ position: 'relative' }}
+                  onClick={handleOpenPinMenu}
+                  ref={triggerRef}
+                  aria-pressed={!!pinMenuAnchor}
+                >
+                  <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"