feat(threads): implement thread side panel with full functionality

.changeset/feat-background-pagination.md

@@ -0,0 +1,5 @@
+---
+default: minor
+---
+
+Add adaptive background pagination for improved message history availability.

.changeset/feat-threads.md

@@ -0,0 +1,5 @@
+---
+sable: minor
+---
+
+Add thread support with side panel, browser, unread badges, and cross-device sync

src/app/components/editor/Editor.tsx

@@ -26,13 +26,6 @@ import { CustomElement } from './slate';
 import * as css from './Editor.css';
 import { toggleKeyboardShortcut } from './keyboard';
 
-const initialValue: CustomElement[] = [
-  {
-    type: BlockType.Paragraph,
-    children: [{ text: '' }],
-  },
-];
-
 const withInline = (editor: Editor): Editor => {
   const { isInline } = editor;
 
@@ -96,6 +89,15 @@ export const CustomEditor = forwardRef<HTMLDivElement, CustomEditorProps>(
     },
     ref
   ) => {
+    // Each <Slate> instance must receive its own fresh node objects.
+    // Sharing a module-level constant causes Slate's global NODE_TO_ELEMENT
+    // WeakMap to be overwritten when multiple editors are mounted at the same
+    // time (e.g. RoomInput + MessageEditor in the thread drawer), leading to
+    // "Unable to find the path for Slate node" crashes.
+    const [slateInitialValue] = useState<CustomElement[]>(() => [
+      { type: BlockType.Paragraph, children: [{ text: '' }] },
+    ]);
+
     const renderElement = useCallback(
       (props: RenderElementProps) => <RenderElement {...props} />,
       []
@@ -132,7 +134,7 @@ export const CustomEditor = forwardRef<HTMLDivElement, CustomEditorProps>(
 
     return (
       <div className={`${css.Editor} ${className || ''}`} ref={ref}>
-        <Slate editor={editor} initialValue={initialValue} onChange={onChange}>
+        <Slate editor={editor} initialValue={slateInitialValue} onChange={onChange}>
           {top}
           <Box alignItems="Start">
             {before && (

src/app/features/room/Room.tsx

@@ -1,8 +1,9 @@
-import { useCallback } from 'react';
+import { useCallback, useEffect } from 'react';
 import { Box, Line } from 'folds';
 import { useParams } from 'react-router-dom';
 import { isKeyHotkey } from 'is-hotkey';
-import { useAtomValue } from 'jotai';
+import { useAtom, useAtomValue } from 'jotai';
+import { Direction } from '$types/matrix-sdk';
 import { ScreenSize, useScreenSizeContext } from '$hooks/useScreenSize';
 import { useSetting } from '$state/hooks/settings';
 import { settingsAtom } from '$state/settings';
@@ -15,10 +16,15 @@
 import { CallView } from '$features/call/CallView';
 import { WidgetsDrawer } from '$features/widgets/WidgetsDrawer';
 import { callChatAtom } from '$state/callEmbed';
+import { roomIdToOpenThreadAtomFamily } from '$state/room/roomToOpenThread';
+import { roomIdToThreadBrowserAtomFamily } from '$state/room/roomToThreadBrowser';
+import { getBackgroundPaginationConfig } from '$utils/device-capabilities';
 import { RoomViewHeader } from './RoomViewHeader';
 import { MembersDrawer } from './MembersDrawer';
 import { RoomView } from './RoomView';
 import { CallChatView } from './CallChatView';
+import { ThreadDrawer } from './ThreadDrawer';
+import { ThreadBrowser } from './ThreadBrowser';
 
 export function Room() {
   const { eventId } = useParams();
@@ -32,6 +38,30 @@
   const powerLevels = usePowerLevels(room);
   const members = useRoomMembers(mx, room.roomId);
   const chat = useAtomValue(callChatAtom);
+  const [openThreadId, setOpenThread] = useAtom(roomIdToOpenThreadAtomFamily(room.roomId));
+  const [threadBrowserOpen, setThreadBrowserOpen] = useAtom(
+    roomIdToThreadBrowserAtomFamily(room.roomId)
+  );
+
+  // If navigating to an event in a thread, open the thread drawer
+  useEffect(() => {
+    if (!eventId) return;
+
+    const event = room.findEventById(eventId);
+    if (!event) return;
+
+    const { threadRootId } = event;
+    if (threadRootId) {
+      // Ensure Thread object exists
+      if (!room.getThread(threadRootId)) {
+        const rootEvent = room.findEventById(threadRootId);
+        if (rootEvent) {
+          room.createThread(threadRootId, rootEvent, [], false);
+        }
+      }
+      setOpenThread(threadRootId);
+    }
+  }, [eventId, room, setOpenThread]);
 
   useKeyDown(
     window,
@@ -45,11 +75,39 @@
     )
   );
 
+  // Background pagination to load additional message history
+  useEffect(() => {
+    const config = getBackgroundPaginationConfig();
+    if (!config.enabled) return undefined;
+
+    let cancelled = false;
+    const timer = setTimeout(() => {
+      if (cancelled) return;
+
+      const timeline = room.getLiveTimeline();
+      const token = timeline.getPaginationToken(Direction.Backward);
+
+      if (token) {
+        mx.paginateEventTimeline(timeline, {
+          backwards: true,
+          limit: config.limit,
+        }).catch((err) => {
+          console.warn('Background pagination failed:', err);
+        });
+      }
+    }, config.delayMs);
+
+    return () => {
+      cancelled = true;
+      clearTimeout(timer);
+    };
+  }, [room, mx]);
+
   const callView = room.isCallRoom();
 
   return (
     <PowerLevelsContextProvider value={powerLevels}>
-      <Box grow="Yes">
+      <Box grow="Yes" style={{ position: 'relative' }}>
         {callView && (screenSize === ScreenSize.Desktop || !chat) && (
           <Box grow="Yes" direction="Column">
             <RoomViewHeader callView />
@@ -87,6 +145,52 @@
             <WidgetsDrawer key={`widgets-${room.roomId}`} room={room} />
           </>
         )}
+        {screenSize === ScreenSize.Desktop && openThreadId && (
+          <>
+            <Line variant="Background" direction="Vertical" size="300" />
+            <ThreadDrawer
+              key={`thread-${room.roomId}-${openThreadId}`}
+              room={room}
+              threadRootId={openThreadId}
+              onClose={() => setOpenThread(undefined)}
+            />
+          </>
+        )}
+        {screenSize === ScreenSize.Desktop && threadBrowserOpen && !openThreadId && (
+          <>
+            <Line variant="Background" direction="Vertical" size="300" />
+            <ThreadBrowser
+              key={`thread-browser-${room.roomId}`}
+              room={room}
+              onOpenThread={(id) => {
+                setOpenThread(id);
+                setThreadBrowserOpen(false);
+              }}
+              onClose={() => setThreadBrowserOpen(false)}
+            />
+          </>
+        )}
+        {screenSize !== ScreenSize.Desktop && openThreadId && (
+          <ThreadDrawer
+            key={`thread-${room.roomId}-${openThreadId}`}
+            room={room}
+            threadRootId={openThreadId}
+            onClose={() => setOpenThread(undefined)}
+            overlay
+          />
+        )}
+        {screenSize !== ScreenSize.Desktop && threadBrowserOpen && !openThreadId && (
+          <ThreadBrowser
+            key={`thread-browser-${room.roomId}`}
+            room={room}
+            onOpenThread={(id) => {
+              setOpenThread(id);
+              setThreadBrowserOpen(false);
+            }}
+            onClose={() => setThreadBrowserOpen(false)}
+            overlay
+          />
+        )}
       </Box>
     </PowerLevelsContextProvider>
   );