feat(threads): update timeline hooks for thread rendering and add changeset

Author: Just-Insane

.changeset/feat-thread-enhancements.md

@@ -0,0 +1,5 @@
+---
+default: minor
+---
+
+Update threads: various fixes, browse all room threads, and see live reply counts on messages.

src/app/hooks/timeline/useProcessedTimeline.ts

@@ -20,6 +20,12 @@ export interface UseProcessedTimelineOptions {
   hideNickAvatarEvents: boolean;
   isReadOnly: boolean;
   hideMemberInReadOnly: boolean;
+  /**
+   * When true, skip the filter that removes events whose `threadRootId` points
+   * to a different event.  Required when processing a thread's own timeline
+   * where every reply legitimately has `threadRootId` set to the root.
+   */
+  skipThreadFilter?: boolean;
 }
 
 export interface ProcessedEvent {
@@ -55,6 +61,7 @@ export function useProcessedTimeline({
   hideNickAvatarEvents,
   isReadOnly,
   hideMemberInReadOnly,
+  skipThreadFilter,
 }: UseProcessedTimelineOptions): ProcessedEvent[] {
   return useMemo(() => {
     let prevEvent: MatrixEvent | undefined;
@@ -116,7 +123,7 @@ export function useProcessedTimeline({
         }
       }
 
-      if (threadRootId !== undefined && threadRootId !== mEventId) return acc;
+      if (!skipThreadFilter && threadRootId !== undefined && threadRootId !== mEventId) return acc;
 
       const isReactionOrEdit = reactionOrEditEvent(mEvent);
       if (isReactionOrEdit) return acc;
@@ -193,5 +200,6 @@ export function useProcessedTimeline({
     hideNickAvatarEvents,
     isReadOnly,
     hideMemberInReadOnly,
+    skipThreadFilter,
   ]);
 }

src/app/hooks/timeline/useTimelineActions.ts

@@ -5,13 +5,12 @@ import { ReactEditor } from 'slate-react';
 
 import { getMxIdLocalPart, toggleReaction } from '$utils/matrix';
 import { getMemberDisplayName, getEditedEvent } from '$utils/room';
-import { createMentionElement, isEmptyEditor, moveCursor } from '$components/editor';
+import { createMentionElement, moveCursor } from '$components/editor';
 
 export interface UseTimelineActionsOptions {
   room: Room;
   mx: MatrixClient;
   editor: Editor;
-  alive: () => boolean;
   nicknames: Record<string, string>;
   globalProfiles: Record<string, any>;
   spaceId?: string;
@@ -27,16 +26,14 @@ export interface UseTimelineActionsOptions {
   setReplyDraft: (draft: any) => void;
   openThreadId?: string;
   setOpenThread: (threadId: string | undefined) => void;
-  setEditId: (editId: string | undefined) => void;
-  onEditorReset?: () => void;
+  handleEdit: (editId?: string) => void;
   handleOpenEvent: (eventId: string) => void;
 }
 
 export function useTimelineActions({
   room,
   mx,
   editor,
-  alive,
   nicknames,
   globalProfiles,
   spaceId,
@@ -45,8 +42,7 @@ export function useTimelineActions({
   setReplyDraft,
   openThreadId,
   setOpenThread,
-  setEditId,
-  onEditorReset,
+  handleEdit,
   handleOpenEvent,
 }: UseTimelineActionsOptions) {
   const handleOpenReply: MouseEventHandler<HTMLButtonElement> = useCallback(
@@ -209,24 +205,6 @@ export function useTimelineActions({
     [mx]
   );
 
-  const handleEdit = useCallback(
-    (targetEditId?: string) => {
-      if (targetEditId) {
-        setEditId(targetEditId);
-        return;
-      }
-      setEditId(undefined);
-
-      requestAnimationFrame(() => {
-        if (!alive()) return;
-        if (isEmptyEditor(editor)) onEditorReset?.();
-        ReactEditor.focus(editor);
-        moveCursor(editor);
-      });
-    },
-    [editor, alive, onEditorReset, setEditId]
-  );
-
   return {
     handleOpenReply,
     handleUserClick,

src/app/hooks/timeline/useTimelineEventRenderer.tsx

@@ -1,10 +1,14 @@
-import { MouseEventHandler, useCallback, useMemo } from 'react';
+import { MouseEventHandler, useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useAtomValue } from 'jotai';
 import {
+  IThreadBundledRelationship,
   MatrixClient,
   MatrixEvent,
+  NotificationCountType,
   Room,
+  RoomEvent,
+  ThreadEvent,
   PushProcessor,
   EventTimelineSet,
   IContent,
@@ -47,6 +51,7 @@ import {
 } from '$utils/room';
 import { getLinkedTimelines, getLiveTimeline } from '$utils/timeline';
 import * as customHtmlCss from '$styles/CustomHtml.css';
+import { UnreadBadge, UnreadBadgeCenter } from '$components/unread-badge';
 import {
   EncryptedContent,
   Event,
@@ -105,20 +110,51 @@ function ThreadReplyChip({
   const useAuthentication = useMediaAuthentication();
   const nicknames = useAtomValue(nicknamesAtom);
 
+  const [counter, forceUpdate] = useState(0);
+
   const thread = room.getThread(mEventId);
 
+  useEffect(() => {
+    if (!thread) return () => {};
+    const onUpdate = () => forceUpdate((n) => n + 1);
+    thread.on(ThreadEvent.NewReply as any, onUpdate);
+    thread.on(ThreadEvent.Update as any, onUpdate);
+    room.on(RoomEvent.Redaction as any, onUpdate);
+    room.on(RoomEvent.UnreadNotifications as any, onUpdate);
+    return () => {
+      thread.off(ThreadEvent.NewReply as any, onUpdate);
+      thread.off(ThreadEvent.Update as any, onUpdate);
+      room.off(RoomEvent.Redaction as any, onUpdate);
+      room.off(RoomEvent.UnreadNotifications as any, onUpdate);
+    };
+  }, [room, thread]);
+
   const replyEvents = useMemo(() => {
+    // With threadSupport:true, reply events live in thread.timelineSet not the main room timeline.
+    // Prefer thread.events when available so avatars and preview text are populated.
+    if (thread) {
+      const fromThread = thread.events.filter(
+        (ev) => ev.getId() !== mEventId && !reactionOrEditEvent(ev)
+      );
+      if (fromThread.length > 0) return fromThread;
+    }
     const linkedTimelines = getLinkedTimelines(getLiveTimeline(room));
     return linkedTimelines
       .flatMap((tl) => tl.getEvents())
       .filter(
         (ev) => ev.threadRootId === mEventId && ev.getId() !== mEventId && !reactionOrEditEvent(ev)
       );
-  }, [room, mEventId]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- counter is a cache-busting key, not used directly in body
+  }, [room, mEventId, thread, counter]);
 
   if (!thread) return null;
 
-  const replyCount = thread.length ?? 0;
+  // Prefer the server-authoritative bundled count. thread.length only reflects
+  // events fetched into the local timeline, which can be much lower than the
+  // true total before the thread drawer is first opened and paginated.
+  const bundledCount =
+    thread.rootEvent?.getServerAggregatedRelation<IThreadBundledRelationship>('m.thread')?.count;
+  const replyCount = bundledCount ?? thread.length ?? 0;
   if (replyCount === 0) return null;
 
   const uniqueSenders: string[] = [];
@@ -146,6 +182,12 @@ function ThreadReplyChip({
 
   const isOpen = openThreadId === mEventId;
 
+  const unreadTotal = room.getThreadUnreadNotificationCount(mEventId, NotificationCountType.Total);
+  const unreadHighlight = room.getThreadUnreadNotificationCount(
+    mEventId,
+    NotificationCountType.Highlight
+  );
+
   return (
     <Chip
       size="400"
@@ -201,6 +243,11 @@ function ThreadReplyChip({
           &nbsp;·&nbsp;{latestSenderName}:&nbsp;{latestBody.slice(0, 60)}
         </Text>
       )}
+      {unreadTotal > 0 && (
+        <UnreadBadgeCenter>
+          <UnreadBadge highlight={unreadHighlight > 0} count={unreadTotal} />
+        </UnreadBadgeCenter>
+      )}
     </Chip>
   );
 }
@@ -226,6 +273,7 @@ export interface TimelineEventRendererOptions {
     hideMembershipEvents: boolean;
     hideNickAvatarEvents: boolean;
     showHiddenEvents: boolean;
+    hideThreadChip?: boolean;
   };
   state: {
     focusItem?: { index: number; highlight: boolean; scrollTo: boolean };
@@ -280,6 +328,7 @@ export function useTimelineEventRenderer({
     hideMembershipEvents,
     hideNickAvatarEvents,
     showHiddenEvents,
+    hideThreadChip,
   },
   state: { focusItem, editId, activeReplyId, openThreadId },
   permissions: { canRedact, canDeleteOwn, canSendReaction, canPinEvent },
@@ -309,9 +358,16 @@ export function useTimelineEventRenderer({
           isRedacted,
           getUnsigned,
           getTs,
-          replyEventId,
+          getWireContent,
+          replyEventId: rawReplyEventId,
           threadRootId,
         } = mEvent;
+        // In the thread drawer (hideThreadChip=true), suppress reply headers for events
+        // that only have m.in_reply_to as a non-thread-client fallback (is_falling_back: true).
+        const replyEventId =
+          hideThreadChip && getWireContent.call(mEvent)?.['m.relates_to']?.is_falling_back
+            ? undefined
+            : rawReplyEventId;
 
         const reactionRelations = getEventReactions(timelineSet, mEventId);
         const reactions = reactionRelations?.getSortedAnnotationsByKey();
@@ -400,15 +456,15 @@ export function useTimelineEventRenderer({
                   room={room}
                   timelineSet={timelineSet}
                   replyEventId={replyEventId}
-                  threadRootId={threadRootId}
+                  threadRootId={hideThreadChip ? undefined : threadRootId}
                   mentions={baseContent['m.mentions']}
                   onClick={handleOpenReply}
                 />
               )
             }
             reactions={(() => {
               const threadChip =
-                room.getThread(mEventId) || threadRootId ? (
+                !hideThreadChip && (room.getThread(mEventId) || threadRootId) ? (
                   <ThreadReplyChip
                     room={room}
                     mEventId={mEventId}
@@ -469,9 +525,14 @@ export function useTimelineEventRenderer({
           getContent: getEventContent,
           getOriginalContent,
           getTs,
-          replyEventId,
+          getWireContent,
+          replyEventId: rawReplyEventId,
           threadRootId,
         } = mEvent;
+        const replyEventId =
+          hideThreadChip && getWireContent.call(mEvent)?.['m.relates_to']?.is_falling_back
+            ? undefined
+            : rawReplyEventId;
 
         const reactionRelations = getEventReactions(timelineSet, mEventId);
         const reactions = reactionRelations?.getSortedAnnotationsByKey();
@@ -522,14 +583,14 @@ export function useTimelineEventRenderer({
                   room={room}
                   timelineSet={timelineSet}
                   replyEventId={replyEventId}
-                  threadRootId={threadRootId}
+                  threadRootId={hideThreadChip ? undefined : threadRootId}
                   onClick={handleOpenReply}
                 />
               )
             }
             reactions={(() => {
               const threadChip =
-                room.getThread(mEventId) || threadRootId ? (
+                !hideThreadChip && (room.getThread(mEventId) || threadRootId) ? (
                   <ThreadReplyChip
                     room={room}
                     mEventId={mEventId}
@@ -638,9 +699,14 @@ export function useTimelineEventRenderer({
           isRedacted,
           getUnsigned,
           getContent: getEventContent,
-          replyEventId,
+          getWireContent,
+          replyEventId: rawReplyEventId,
           threadRootId,
         } = mEvent;
+        const replyEventId =
+          hideThreadChip && getWireContent.call(mEvent)?.['m.relates_to']?.is_falling_back
+            ? undefined
+            : rawReplyEventId;
 
         const reactionRelations = getEventReactions(timelineSet, mEventId);
         const reactions = reactionRelations?.getSortedAnnotationsByKey();
@@ -683,15 +749,15 @@ export function useTimelineEventRenderer({
                   room={room}
                   timelineSet={timelineSet}
                   replyEventId={replyEventId}
-                  threadRootId={threadRootId}
+                  threadRootId={hideThreadChip ? undefined : threadRootId}
                   mentions={content['m.mentions']}
                   onClick={handleOpenReply}
                 />
               )
             }
             reactions={(() => {
               const threadChip =
-                room.getThread(mEventId) || threadRootId ? (
+                !hideThreadChip && (room.getThread(mEventId) || threadRootId) ? (
                   <ThreadReplyChip
                     room={room}
                     mEventId={mEventId}