WIP - Full Thread Support

package.json

@@ -43,7 +43,7 @@
     "emojibase-data": "15.3.2",
     "file-saver": "2.0.5",
     "focus-trap-react": "10.0.2",
-    "folds": "2.3.0",
+    "folds": "2.5.0",
     "html-dom-parser": "4.0.0",
     "html-react-parser": "4.2.0",
     "i18next": "23.12.2",

src/app/components/message/Time.css.ts

@@ -0,0 +1,6 @@
+import { style } from '@vanilla-extract/css';
+
+export const Time = style({
+  fontWeight: 'inherit',
+  flexShrink: 0,
+});

src/app/components/message/Time.tsx

@@ -1,12 +1,15 @@
 import React, { ComponentProps } from 'react';
 import { Text, as } from 'folds';
+import classNames from 'classnames';
 import { timeDayMonYear, timeHourMinute, today, yesterday } from '../../utils/time';
+import * as css from './Time.css';
 
 export type TimeProps = {
   compact?: boolean;
   ts: number;
   hour24Clock: boolean;
   dateFormatString: string;
+  inheritPriority?: boolean;
 };
 
 /**
@@ -22,7 +25,7 @@ export type TimeProps = {
  * @returns {React.ReactElement} A <Text as="time"> element with the formatted date/time.
  */
 export const Time = as<'span', TimeProps & ComponentProps<typeof Text>>(
-  ({ compact, hour24Clock, dateFormatString, ts, ...props }, ref) => {
+  ({ compact, hour24Clock, dateFormatString, ts, inheritPriority, className, ...props }, ref) => {
     const formattedTime = timeHourMinute(ts, hour24Clock);
 
     let time = '';
@@ -33,11 +36,18 @@ export const Time = as<'span', TimeProps & ComponentProps<typeof Text>>(
     } else if (yesterday(ts)) {
       time = `Yesterday ${formattedTime}`;
     } else {
-      time = `${timeDayMonYear(ts, dateFormatString)} ${formattedTime}`;
+      time = `${timeDayMonYear(ts, dateFormatString)}, ${formattedTime}`;
     }
 
     return (
-      <Text as="time" style={{ flexShrink: 0 }} size="T200" priority="300" {...props} ref={ref}>
+      <Text
+        as="time"
+        className={classNames(css.Time, className)}
+        size="T200"
+        priority={inheritPriority ? undefined : '300'}
+        {...props}
+        ref={ref}
+      >
         {time}
       </Text>
     );

src/app/features/room/Room.tsx

@@ -13,6 +13,8 @@ import { useKeyDown } from '../../hooks/useKeyDown';
 import { markAsRead } from '../../utils/notifications';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useRoomMembers } from '../../hooks/useRoomMembers';
+import { ThreadView } from './thread-view';
+import { useActiveThread } from '../../state/hooks/roomToActiveThread';
 
 export function Room() {
   const { eventId } = useParams();
@@ -25,6 +27,8 @@ export function Room() {
   const powerLevels = usePowerLevels(room);
   const members = useRoomMembers(mx, room.roomId);
 
+  const threadId = useActiveThread(room.roomId);
+
   useKeyDown(
     window,
     useCallback(
@@ -41,11 +45,19 @@ export function Room() {
     <PowerLevelsContextProvider value={powerLevels}>
       <Box grow="Yes">
         <RoomView room={room} eventId={eventId} />
-        {screenSize === ScreenSize.Desktop && isDrawer && (
+        {threadId ? (
           <>
-            <Line variant="Background" direction="Vertical" size="300" />
-            <MembersDrawer key={room.roomId} room={room} members={members} />
+            <Line variant="Surface" direction="Vertical" size="300" />
+            <ThreadView threadId={threadId} />
           </>
+        ) : (
+          screenSize === ScreenSize.Desktop &&
+          isDrawer && (
+            <>
+              <Line variant="Background" direction="Vertical" size="300" />
+              <MembersDrawer key={room.roomId} room={room} members={members} />
+            </>
+          )
         )}
       </Box>
     </PowerLevelsContextProvider>

src/app/features/room/RoomTimeline.tsx

@@ -77,6 +77,7 @@ import {
   decryptAllTimelineEvent,
   getEditedEvent,
   getEventReactions,
+  getEventThreadDetail,
   getLatestEditableEvt,
   getMemberDisplayName,
   getReactionContent,
@@ -126,6 +127,18 @@ 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 './message/thread-selector';
+import {
+  getEventIdAbsoluteIndex,
+  getFirstLinkedTimeline,
+  getLinkedTimelines,
+  getTimelineAndBaseIndex,
+  getTimelineEvent,
+  getTimelineRelativeIndex,
+  getTimelinesEventsCount,
+  timelineToEventsCount,
+} from './utils';
+import { useThreadSelector } from '../../state/hooks/roomToActiveThread';
 
 const TimelineFloat = as<'div', css.TimelineFloatVariants>(
   ({ position, className, ...props }, ref) => (
@@ -150,79 +163,6 @@ const TimelineDivider = as<'div', { variant?: ContainerColor | 'Inherit' }>(
   )
 );
 
-export const getLiveTimeline = (room: Room): EventTimeline =>
-  room.getUnfilteredTimelineSet().getLiveTimeline();
-
-export const getEventTimeline = (room: Room, eventId: string): EventTimeline | undefined => {
-  const timelineSet = room.getUnfilteredTimelineSet();
-  return timelineSet.getTimelineForEvent(eventId) ?? undefined;
-};
-
-export const getFirstLinkedTimeline = (
-  timeline: EventTimeline,
-  direction: Direction
-): EventTimeline => {
-  const linkedTm = timeline.getNeighbouringTimeline(direction);
-  if (!linkedTm) return timeline;
-  return getFirstLinkedTimeline(linkedTm, direction);
-};
-
-export const getLinkedTimelines = (timeline: EventTimeline): EventTimeline[] => {
-  const firstTimeline = getFirstLinkedTimeline(timeline, Direction.Backward);
-  const timelines: EventTimeline[] = [];
-
-  for (
-    let nextTimeline: EventTimeline | null = firstTimeline;
-    nextTimeline;
-    nextTimeline = nextTimeline.getNeighbouringTimeline(Direction.Forward)
-  ) {
-    timelines.push(nextTimeline);
-  }
-  return timelines;
-};
-
-export const timelineToEventsCount = (t: EventTimeline) => t.getEvents().length;
-export const getTimelinesEventsCount = (timelines: EventTimeline[]): number => {
-  const timelineEventCountReducer = (count: number, tm: EventTimeline) =>
-    count + timelineToEventsCount(tm);
-  return timelines.reduce(timelineEventCountReducer, 0);
-};
-
-export const getTimelineAndBaseIndex = (
-  timelines: EventTimeline[],
-  index: number
-): [EventTimeline | undefined, number] => {
-  let uptoTimelineLen = 0;
-  const timeline = timelines.find((t) => {
-    uptoTimelineLen += t.getEvents().length;
-    if (index < uptoTimelineLen) return true;
-    return false;
-  });
-  if (!timeline) return [undefined, 0];
-  return [timeline, uptoTimelineLen - timeline.getEvents().length];
-};
-
-export const getTimelineRelativeIndex = (absoluteIndex: number, timelineBaseIndex: number) =>
-  absoluteIndex - timelineBaseIndex;
-
-export const getTimelineEvent = (timeline: EventTimeline, index: number): MatrixEvent | undefined =>
-  timeline.getEvents()[index];
-
-export const getEventIdAbsoluteIndex = (
-  timelines: EventTimeline[],
-  eventTimeline: EventTimeline,
-  eventId: string
-): number | undefined => {
-  const timelineIndex = timelines.findIndex((t) => t === eventTimeline);
-  if (timelineIndex === -1) return undefined;
-  const eventIndex = eventTimeline.getEvents().findIndex((evt) => evt.getId() === eventId);
-  if (eventIndex === -1) return undefined;
-  const baseIndex = timelines
-    .slice(0, timelineIndex)
-    .reduce((accValue, timeline) => timeline.getEvents().length + accValue, 0);
-  return baseIndex + eventIndex;
-};
-
 type RoomTimelineProps = {
   room: Room;
   eventId?: string;
@@ -232,6 +172,14 @@ type RoomTimelineProps = {
 
 const PAGINATION_LIMIT = 80;
 
+export const getLiveTimeline = (room: Room): EventTimeline =>
+  room.getUnfilteredTimelineSet().getLiveTimeline();
+
+export const getEventTimeline = (room: Room, eventId: string): EventTimeline | undefined => {
+  const timelineSet = room.getUnfilteredTimelineSet();
+  return timelineSet.getTimelineForEvent(eventId) ?? undefined;
+};
+
 type Timeline = {
   linkedTimelines: EventTimeline[];
   range: ItemRange;
@@ -482,6 +430,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
   const spoilerClickHandler = useSpoilerClickHandler();
   const openUserRoomProfile = useOpenUserRoomProfile();
   const space = useSpaceOptionally();
+  const handleThreadClick = useThreadSelector(room.roomId);
 
   const imagePackRooms: Room[] = useImagePackRooms(room.roomId, roomToParents);
 
@@ -1014,6 +963,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
     },
     [editor]
   );
+
   const { t } = useTranslation();
 
   const renderMatrixEvent = useMatrixEventRenderer<
@@ -1034,6 +984,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 +1058,20 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
                 outlineAttachment={messageLayout === MessageLayout.Bubble}
               />
             )}
+
+            {threadDetail && (
+              <ThreadSelectorContainer>
+                <ThreadSelector
+                  room={room}
+                  threadId={mEventId}
+                  threadDetail={threadDetail}
+                  hour24Clock={hour24Clock}
+                  dateFormatString={dateFormatString}
+                  outlined={messageLayout === MessageLayout.Bubble}
+                  onClick={handleThreadClick}
+                />
+              </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">
@@ -424,6 +430,27 @@ export function RoomViewHeader() {
               </IconButton>
             )}
           </TooltipProvider>
+
+          <TooltipProvider
+            position="Bottom"
+            offset={4}
+            tooltip={
+              <Tooltip>
+                <Text>My Threads</Text>
+              </Tooltip>
+            }
+          >
+            {(triggerRef) => (
+              <IconButton
+                style={{ position: 'relative' }}
+                onClick={handleOpenThreadsMenu}
+                ref={triggerRef}
+                aria-pressed={!!threadsMenuAnchor}
+              >
+                <Icon size="400" src={Icons.Thread} filled={!!threadsMenuAnchor} />
+              </IconButton>
+            )}
+          </TooltipProvider>
           <PopOut
             anchor={pinMenuAnchor}
             position="Bottom"
@@ -443,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"