threads - WIP

src/app/components/thread-selector/ThreadSelector.tsx

@@ -0,0 +1,90 @@
+import { Avatar, Box, Icon, Icons, Text } from 'folds';
+import React, { ReactNode } from 'react';
+import classNames from 'classnames';
+import { IThreadBundledRelationship, Room } from 'matrix-js-sdk';
+import { ContainerColor } from '../../styles/ContainerColor.css';
+import * as css from './styles.css';
+import { UserAvatar } from '../user-avatar';
+import { getMemberAvatarMxc, getMemberDisplayName } from '../../utils/room';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+import { getMxIdLocalPart, mxcUrlToHttp } from '../../utils/matrix';
+
+export function ThreadSelectorContainer({ children }: { children: ReactNode }) {
+  return <Box className={css.ThreadSelectorContainer}>{children}</Box>;
+}
+
+type ThreadSelectorProps = {
+  room: Room;
+  senderId: string;
+  threadDetail: IThreadBundledRelationship;
+  outlined?: boolean;
+};
+
+export function ThreadSelector({ room, senderId, threadDetail, outlined }: ThreadSelectorProps) {
+  const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
+  const senderAvatarMxc = getMemberAvatarMxc(room, senderId);
+
+  const latestEvent = threadDetail.latest_event;
+  const latestSenderId = latestEvent.sender;
+  const latestSenderAvatarMxc = getMemberAvatarMxc(room, latestSenderId);
+  const latestDisplayName =
+    getMemberDisplayName(room, latestSenderId) ??
+    getMxIdLocalPart(latestSenderId) ??
+    latestSenderId;
+
+  const latestEventTs = latestEvent.origin_server_ts;
+
+  return (
+    <Box
+      className={classNames(
+        css.ThreadSelector,
+        outlined && css.ThreadSectorOutlined,
+        ContainerColor({ variant: 'SurfaceVariant' })
+      )}
+      alignItems="Center"
+      gap="200"
+    >
+      <Box gap="100" alignItems="Inherit">
+        <Avatar size="200" radii="300">
+          <UserAvatar
+            userId={senderId}
+            src={
+              senderAvatarMxc
+                ? mxcUrlToHttp(mx, senderAvatarMxc, useAuthentication, 48, 48, 'crop') ?? undefined
+                : undefined
+            }
+            alt={senderId}
+            renderFallback={() => <Icon size="200" src={Icons.User} filled />}
+          />
+        </Avatar>
+        {latestSenderId && (
+          <Avatar size="200" radii="300">
+            <UserAvatar
+              userId={latestSenderId}
+              src={
+                latestSenderAvatarMxc
+                  ? mxcUrlToHttp(mx, latestSenderAvatarMxc, useAuthentication, 48, 48, 'crop') ??
+                    undefined
+                  : undefined
+              }
+              alt={senderId}
+              renderFallback={() => <Icon size="200" src={Icons.User} filled />}
+            />
+          </Avatar>
+        )}
+      </Box>
+      <Box gap="200" alignItems="Inherit">
+        <Text className={css.ThreadRepliesCount} size="L400">
+          {threadDetail.count} Replies
+        </Text>
+        <Text size="T200" truncate>
+          {/* TODO: date */}
+          Last Reply by <b>{latestDisplayName}</b> at {new Date(latestEventTs).getTime()}
+        </Text>
+        <Icon size="100" src={Icons.ChevronRight} />
+      </Box>
+    </Box>
+  );
+}

src/app/components/thread-selector/index.ts

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

src/app/components/thread-selector/styles.css.ts

@@ -0,0 +1,20 @@
+import { style } from '@vanilla-extract/css';
+import { color, config } from 'folds';
+
+export const ThreadSelectorContainer = style({
+  paddingTop: config.space.S100,
+});
+
+export const ThreadSelector = style({
+  padding: config.space.S200,
+  borderRadius: config.radii.R400,
+});
+
+export const ThreadSectorOutlined = style({
+  borderWidth: config.borderWidth.B300,
+});
+
+export const ThreadRepliesCount = style({
+  color: color.Primary.Main,
+  flexShrink: 0,
+});

src/app/features/room/RoomTimeline.tsx

@@ -77,6 +77,7 @@ import {
   decryptAllTimelineEvent,
   getEditedEvent,
   getEventReactions,
+  getEventThreadDetail,
   getLatestEditableEvt,
   getMemberDisplayName,
   getReactionContent,
@@ -126,6 +127,7 @@ import { useAccessiblePowerTagColors, useGetMemberPowerTag } from '../../hooks/u
 import { useTheme } from '../../hooks/useTheme';
 import { useRoomCreatorsTag } from '../../hooks/useRoomCreatorsTag';
 import { usePowerLevelTags } from '../../hooks/usePowerLevelTags';
+import { ThreadSelector, ThreadSelectorContainer } from '../../components/thread-selector';
 
 const TimelineFloat = as<'div', css.TimelineFloatVariants>(
   ({ position, className, ...props }, ref) => (
@@ -1034,6 +1036,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
         const senderId = mEvent.getSender() ?? '';
         const senderDisplayName =
           getMemberDisplayName(room, senderId) ?? getMxIdLocalPart(senderId) ?? senderId;
+        const threadDetail = getEventThreadDetail(mEvent);
 
         return (
           <Message
@@ -1107,6 +1110,12 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
                 outlineAttachment={messageLayout === MessageLayout.Bubble}
               />
             )}
+
+            {threadDetail && (
+              <ThreadSelectorContainer>
+                <ThreadSelector room={room} senderId={senderId} threadDetail={threadDetail} />
+              </ThreadSelectorContainer>
+            )}
           </Message>
         );
       },

src/app/features/room/RoomViewHeader.tsx

@@ -69,6 +69,7 @@ import { useRoomNavigate } from '../../hooks/useRoomNavigate';
 import { useRoomCreators } from '../../hooks/useRoomCreators';
 import { useRoomPermissions } from '../../hooks/useRoomPermissions';
 import { InviteUserPrompt } from '../../components/invite-user-prompt';
+import { ThreadsMenu } from './threads-menu';
 
 type RoomMenuProps = {
   room: Room;
@@ -263,6 +264,7 @@ export function RoomViewHeader() {
   const space = useSpaceOptionally();
   const [menuAnchor, setMenuAnchor] = useState<RectCords>();
   const [pinMenuAnchor, setPinMenuAnchor] = useState<RectCords>();
+  const [threadsMenuAnchor, setThreadsMenuAnchor] = useState<RectCords>();
   const mDirects = useAtomValue(mDirectAtom);
 
   const pinnedEvents = useRoomPinnedEvents(room);
@@ -295,6 +297,10 @@ export function RoomViewHeader() {
     setPinMenuAnchor(evt.currentTarget.getBoundingClientRect());
   };
 
+  const handleOpenThreadsMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
+    setThreadsMenuAnchor(evt.currentTarget.getBoundingClientRect());
+  };
+
   return (
     <PageHeader balance={screenSize === ScreenSize.Mobile}>
       <Box grow="Yes" gap="300">
@@ -430,35 +436,18 @@ export function RoomViewHeader() {
             offset={4}
             tooltip={
               <Tooltip>
-                <Text>Threads</Text>
+                <Text>My Threads</Text>
               </Tooltip>
             }
           >
             {(triggerRef) => (
               <IconButton
                 style={{ position: 'relative' }}
-                onClick={handleOpenPinMenu}
+                onClick={handleOpenThreadsMenu}
                 ref={triggerRef}
-                aria-pressed={!!pinMenuAnchor}
+                aria-pressed={!!threadsMenuAnchor}
               >
-                {pinnedEvents.length > 0 && (
+                <Icon size="400" src={Icons.Thread} filled={!!threadsMenuAnchor} />
-                  <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.Thread} filled={!!pinMenuAnchor} />
               </IconButton>
             )}
           </TooltipProvider>
@@ -481,6 +470,25 @@ export function RoomViewHeader() {
               </FocusTrap>
             }
           />
+          <PopOut
+            anchor={threadsMenuAnchor}
+            position="Bottom"
+            content={
+              <FocusTrap
+                focusTrapOptions={{
+                  initialFocus: false,
+                  returnFocusOnDeactivate: false,
+                  onDeactivate: () => setThreadsMenuAnchor(undefined),
+                  clickOutsideDeactivates: true,
+                  isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
+                  isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
+                  escapeDeactivates: stopPropagation,
+                }}
+              >
+                <ThreadsMenu room={room} requestClose={() => setThreadsMenuAnchor(undefined)} />
+              </FocusTrap>
+            }
+          />
           {screenSize === ScreenSize.Desktop && (
             <TooltipProvider
               position="Bottom"

src/app/features/room/threads-menu/ThreadsMenu.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/destructuring-assignment */
 import React, { forwardRef, MouseEventHandler, useMemo, useRef } from 'react';
-import { MatrixEvent, Room } from 'matrix-js-sdk';
+import { IRoomEvent, MatrixEvent, Room } from 'matrix-js-sdk';
 import {
   Avatar,
   Box,
@@ -19,14 +19,11 @@ import {
 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 './ThreadsMenu.css';
 import { SequenceCard } from '../../../components/sequence-card';
-import { useRoomEvent } from '../../../hooks/useRoomEvent';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 import {
   AvatarBase,
-  DefaultPlaceholder,
   ImageContent,
   MessageNotDecryptedContent,
   MessageUnsupportedContent,
@@ -41,7 +38,12 @@ import {
 import { UserAvatar } from '../../../components/user-avatar';
 import { getMxIdLocalPart, mxcUrlToHttp } from '../../../utils/matrix';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
-import { getEditedEvent, getMemberAvatarMxc, getMemberDisplayName } from '../../../utils/room';
+import {
+  getEditedEvent,
+  getEventThreadDetail,
+  getMemberAvatarMxc,
+  getMemberDisplayName,
+} from '../../../utils/room';
 import { GetContentCallback, MessageEvent } from '../../../../types/matrix/room';
 import { useMentionClickHandler } from '../../../hooks/useMentionClickHandler';
 import { useSpoilerClickHandler } from '../../../hooks/useSpoilerClickHandler';
@@ -62,36 +64,48 @@ 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 { usePowerLevelsContext } from '../../../hooks/usePowerLevels';
 import { ContainerColor } from '../../../styles/ContainerColor.css';
-import {
+import { usePowerLevelTags } from '../../../hooks/usePowerLevelTags';
-  getTagIconSrc,
-  useAccessibleTagColors,
-  usePowerLevelTags,
-} from '../../../hooks/usePowerLevelTags';
 import { useTheme } from '../../../hooks/useTheme';
 import { PowerIcon } from '../../../components/power';
 import colorMXID from '../../../../util/colorMXID';
 import { useIsDirectRoom } from '../../../hooks/useRoom';
+import { useRoomCreators } from '../../../hooks/useRoomCreators';
+import {
+  GetMemberPowerTag,
+  getPowerTagIconSrc,
+  useAccessiblePowerTagColors,
+  useGetMemberPowerTag,
+} from '../../../hooks/useMemberPowerTag';
+import { useRoomCreatorsTag } from '../../../hooks/useRoomCreatorsTag';
+import { useRoomMyThreads } from '../../../hooks/useRoomThreads';
+import { ThreadSelector, ThreadSelectorContainer } from '../../../components/thread-selector';
 
-type ThreadsProps = {
+type ThreadMessageProps = {
   room: Room;
-  eventId: string;
+  event: MatrixEvent;
   renderContent: RenderMatrixEvent<[MatrixEvent, string, GetContentCallback]>;
   onOpen: (roomId: string, eventId: string) => void;
+  getMemberPowerTag: GetMemberPowerTag;
+  accessibleTagColors: Map<string, string>;
+  legacyUsernameColor: boolean;
+  hour24Clock: boolean;
+  dateFormatString: string;
 };
-function Threads({ room, eventId, renderContent, onOpen }: ThreadsProps) {
+function ThreadMessage({
-  const pinnedEvent = useRoomEvent(room, eventId);
+  room,
+  event,
+  renderContent,
+  onOpen,
+  getMemberPowerTag,
+  accessibleTagColors,
+  legacyUsernameColor,
+  hour24Clock,
+  dateFormatString,
+}: ThreadMessageProps) {
   const useAuthentication = useMediaAuthentication();
   const mx = useMatrixClient();
-  const direct = useIsDirectRoom();
-  const [legacyUsernameColor] = useSetting(settingsAtom, 'legacyUsernameColor');
-
-  const powerLevels = usePowerLevelsContext();
-  const { getPowerLevel } = usePowerLevelsAPI(powerLevels);
-  const [powerLevelTags, getPowerLevelTag] = usePowerLevelTags(room, powerLevels);
-  const theme = useTheme();
-  const accessibleTagColors = useAccessibleTagColors(theme.kind, powerLevelTags);
 
   const handleOpenClick: MouseEventHandler = (evt) => {
     evt.stopPropagation();
@@ -102,36 +116,31 @@ function Threads({ room, eventId, renderContent, onOpen }: ThreadsProps) {
 
   const renderOptions = () => (
     <Box shrink="No" gap="200" alignItems="Center">
-      <Chip data-event-id={eventId} onClick={handleOpenClick} variant="Secondary" radii="Pill">
+      <Chip
+        data-event-id={event.getId()}
+        onClick={handleOpenClick}
+        variant="Secondary"
+        radii="Pill"
+      >
         <Text size="T200">Open</Text>
       </Chip>
     </Box>
   );
 
-  if (pinnedEvent === undefined) return <DefaultPlaceholder variant="Secondary" />;
+  const sender = event.getSender()!;
-  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;
+  const getContent = (() => event.getContent()) as GetContentCallback;
 
-  const senderPowerLevel = getPowerLevel(sender);
+  const memberPowerTag = getMemberPowerTag(sender);
-  const powerLevelTag = getPowerLevelTag(senderPowerLevel);
+  const tagColor = memberPowerTag?.color
-  const tagColor = powerLevelTag?.color ? accessibleTagColors?.get(powerLevelTag.color) : undefined;
+    ? accessibleTagColors?.get(memberPowerTag.color)
-  const tagIconSrc = powerLevelTag?.icon
+    : undefined;
-    ? getTagIconSrc(mx, useAuthentication, powerLevelTag.icon)
+  const tagIconSrc = memberPowerTag?.icon
+    ? getPowerTagIconSrc(mx, useAuthentication, memberPowerTag.icon)
     : undefined;
 
-  const usernameColor = legacyUsernameColor || direct ? colorMXID(sender) : tagColor;
+  const usernameColor = legacyUsernameColor ? colorMXID(sender) : tagColor;
 
   return (
     <ModernLayout
@@ -163,23 +172,22 @@ function Threads({ room, eventId, renderContent, onOpen }: ThreadsProps) {
             </Username>
             {tagIconSrc && <PowerIcon size="100" iconSrc={tagIconSrc} />}
           </Box>
-          <Time ts={pinnedEvent.getTs()} />
+          <Time ts={event.getTs()} hour24Clock={hour24Clock} dateFormatString={dateFormatString} />
         </Box>
         {renderOptions()}
       </Box>
-      {pinnedEvent.replyEventId && (
+      {event.replyEventId && (
         <Reply
           room={room}
-          replyEventId={pinnedEvent.replyEventId}
+          replyEventId={event.replyEventId}
-          threadRootId={pinnedEvent.threadRootId}
+          threadRootId={event.threadRootId}
           onClick={handleOpenClick}
-          getPowerLevel={getPowerLevel}
+          getMemberPowerTag={getMemberPowerTag}
-          getPowerLevelTag={getPowerLevelTag}
           accessibleTagColors={accessibleTagColors}
           legacyUsernameColor={legacyUsernameColor}
         />
       )}
-      {renderContent(pinnedEvent.getType(), false, pinnedEvent, displayName, getContent)}
+      {renderContent(event.getType(), false, event, displayName, getContent)}
     </ModernLayout>
   );
 }
@@ -191,17 +199,37 @@ type ThreadsMenuProps = {
 export const ThreadsMenu = forwardRef<HTMLDivElement, ThreadsMenuProps>(
   ({ room, requestClose }, ref) => {
     const mx = useMatrixClient();
+    const powerLevels = usePowerLevelsContext();
+    const creators = useRoomCreators(room);
+
+    const creatorsTag = useRoomCreatorsTag();
+    const powerLevelTags = usePowerLevelTags(room, powerLevels);
+    const getMemberPowerTag = useGetMemberPowerTag(room, creators, powerLevels);
+
+    const theme = useTheme();
+    const accessibleTagColors = useAccessiblePowerTagColors(
+      theme.kind,
+      creatorsTag,
+      powerLevelTags
+    );
 
-    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 direct = useIsDirectRoom();
+    const [legacyUsernameColor] = useSetting(settingsAtom, 'legacyUsernameColor');
+
+    const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
+    const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');
+
     const { navigateRoom } = useRoomNavigate();
     const scrollRef = useRef<HTMLDivElement>(null);
 
+    const events = useRoomMyThreads(room);
+
     const virtualizer = useVirtualizer({
-      count: sortedPinnedEvent.length,
+      count: events?.length ?? 0,
       getScrollElement: () => scrollRef.current,
       estimateSize: () => 75,
       overscan: 4,
@@ -239,7 +267,10 @@ export const ThreadsMenu = forwardRef<HTMLDivElement, ThreadsMenuProps>(
             );
           }
 
+          const threadDetail = getEventThreadDetail(event);
+
           return (
+            <>
               <RenderMessageContent
                 displayName={displayName}
                 msgType={event.getContent().msgtype ?? ''}
@@ -252,25 +283,23 @@ export const ThreadsMenu = forwardRef<HTMLDivElement, ThreadsMenuProps>(
                 linkifyOpts={linkifyOpts}
                 outlineAttachment
               />
+              {threadDetail && (
+                <ThreadSelectorContainer>
+                  <ThreadSelector
+                    room={room}
+                    senderId={event.getSender()!}
+                    threadDetail={threadDetail}
+                    outlined
+                  />
+                </ThreadSelectorContainer>
+              )}
+            </>
           );
         },
-        [MessageEvent.RoomMessageEncrypted]: (event, displayName) => {
+        [MessageEvent.RoomMessageEncrypted]: (mEvent, displayName) => {
-          const eventId = event.getId()!;
+          const eventId = mEvent.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}>
               {() => {
@@ -290,7 +319,8 @@ export const ThreadsMenu = forwardRef<HTMLDivElement, ThreadsMenuProps>(
                     />
                   );
                 if (mEvent.getType() === MessageEvent.RoomMessage) {
-                  const editedEvent = getEditedEvent(eventId, mEvent, evtTimeline.getTimelineSet());
+                  const editedEvent =
+                    evtTimeline && getEditedEvent(eventId, mEvent, evtTimeline.getTimelineSet());
                   const getContent = (() =>
                     editedEvent?.getContent()['m.new_content'] ??
                     mEvent.getContent()) as GetContentCallback;
@@ -371,7 +401,7 @@ export const ThreadsMenu = forwardRef<HTMLDivElement, ThreadsMenuProps>(
         <Box grow="Yes" direction="Column">
           <Header className={css.ThreadsMenuHeader} size="500">
             <Box grow="Yes">
-              <Text size="H5">Threads</Text>
+              <Text size="H5">My Threads</Text>
             </Box>
             <Box shrink="No">
               <IconButton size="300" onClick={requestClose} radii="300">
@@ -382,7 +412,7 @@ export const ThreadsMenu = forwardRef<HTMLDivElement, ThreadsMenuProps>(
           <Box grow="Yes">
             <Scroll ref={scrollRef} size="300" hideTrack visibility="Hover">
               <Box className={css.ThreadsMenuContent} direction="Column" gap="100">
-                {sortedPinnedEvent.length > 0 ? (
+                {events && events.length > 0 ? (
                   <div
                     style={{
                       position: 'relative',
@@ -390,8 +420,8 @@ export const ThreadsMenu = forwardRef<HTMLDivElement, ThreadsMenuProps>(
                     }}
                   >
                     {virtualizer.getVirtualItems().map((vItem) => {
-                      const eventId = sortedPinnedEvent[vItem.index];
+                      const event = events[vItem.index];
-                      if (!eventId) return null;
+                      if (!event.getId()) return null;
 
                       return (
                         <VirtualTile
@@ -405,11 +435,16 @@ export const ThreadsMenu = forwardRef<HTMLDivElement, ThreadsMenuProps>(
                             variant="SurfaceVariant"
                             direction="Column"
                           >
-                            <Threads
+                            <ThreadMessage
                               room={room}
-                              eventId={eventId}
+                              event={event}
                               renderContent={renderMatrixEvent}
                               onOpen={handleOpen}
+                              getMemberPowerTag={getMemberPowerTag}
+                              accessibleTagColors={accessibleTagColors}
+                              legacyUsernameColor={legacyUsernameColor || direct}
+                              hour24Clock={hour24Clock}
+                              dateFormatString={dateFormatString}
                             />
                           </SequenceCard>
                         </VirtualTile>
@@ -441,7 +476,7 @@ export const ThreadsMenu = forwardRef<HTMLDivElement, ThreadsMenuProps>(
                         No Threads
                       </Text>
                       <Text size="T400" align="Center">
-                        This room does not have any threads yet.
+                        Threads you are participating in will appear here.
                       </Text>
                     </Box>
                   </Box>

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

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

src/app/hooks/useRoomThreads.ts

@@ -1,9 +1,29 @@
-// import { Room } from 'matrix-js-sdk';
+import { useCallback } from 'react';
-// import { useMatrixClient } from './useMatrixClient';
+import { Direction, MatrixEvent, Room, ThreadFilterType } from 'matrix-js-sdk';
+import { useMatrixClient } from './useMatrixClient';
+import { AsyncStatus, useAsyncCallbackValue } from './useAsyncCallback';
 
-// export const useRoomThreads = (room: Room) => {
+export const useRoomMyThreads = (room: Room): MatrixEvent[] | undefined => {
-//   const mx = useMatrixClient();
+  const mx = useMatrixClient();
 
-//   mx.createThreadListMessagesRequest;
+  const [fetchState] = useAsyncCallbackValue(
-//   mx.processThreadRoots;
+    useCallback(
-// };
+      () =>
+        mx.createThreadListMessagesRequest(
+          room.roomId,
+          null,
+          30,
+          Direction.Backward,
+          ThreadFilterType.My
+        ),
+      [mx, room]
+    )
+  );
+
+  if (fetchState.status === AsyncStatus.Success) {
+    const roomEvents = fetchState.data.chunk;
+    const mEvents = roomEvents.map((event) => new MatrixEvent(event)).reverse();
+    return mEvents;
+  }
+  return undefined;
+};

src/app/utils/room.ts

@@ -8,6 +8,7 @@ import {
   IPowerLevelsContent,
   IPushRule,
   IPushRules,
+  IThreadBundledRelationship,
   JoinRule,
   MatrixClient,
   MatrixEvent,
@@ -16,6 +17,7 @@ import {
   RelationType,
   Room,
   RoomMember,
+  THREAD_RELATION_TYPE,
 } from 'matrix-js-sdk';
 import { CryptoBackend } from 'matrix-js-sdk/lib/common-crypto/CryptoBackend';
 import { AccountDataEvent } from '../../types/matrix/accountData';
@@ -551,3 +553,13 @@ export const guessPerfectParent = (
 
   return perfectParent;
 };
+
+export const getEventThreadDetail = (
+  mEvent: MatrixEvent
+): IThreadBundledRelationship | undefined => {
+  const details = mEvent.getServerAggregatedRelation<IThreadBundledRelationship>(
+    THREAD_RELATION_TYPE.name
+  );
+
+  return details;
+};