Additional sliding sync enhancements

src/app/features/settings/developer-tools/SyncDiagnostics.tsx

@@ -1,12 +1,12 @@
 import { useEffect, useState } from 'react';
-import { Box, Text } from 'folds';
+import { Box, Button, Icon, Icons, Text } from 'folds';
 import { SequenceCard } from '$components/sequence-card';
 import { useMatrixClient } from '$hooks/useMatrixClient';
 import { getClientSyncDiagnostics } from '$client/initMatrix';
 import { Direction, EventType, NotificationCountType, Room } from '$types/matrix-sdk';
 import { Membership } from '$types/matrix/room';
 import { SequenceCardStyle } from '$features/settings/styles.css';
-import { isNotificationEvent } from '$utils/room';
+import { getUnreadInfo, isNotificationEvent } from '$utils/room';
 
 type RoomRenderingDiagnostics = {
   totalRooms: number;
@@ -71,9 +71,11 @@ const getUnreadDriftRooms = (mx: ReturnType<typeof useMatrixClient>): UnreadDrif
     .getRooms()
     .filter((room) => !room.isSpaceRoom() && room.getMyMembership() === Membership.Join)
     .reduce<UnreadDriftRoom[]>((driftRooms, room) => {
+      const reconciledUnread = getUnreadInfo(room);
       const sdkTotal = room.getUnreadNotificationCount(NotificationCountType.Total);
       const sdkHighlight = room.getUnreadNotificationCount(NotificationCountType.Highlight);
       if (sdkTotal <= 0 && sdkHighlight <= 0) return driftRooms;
+      if (reconciledUnread.total <= 0 && reconciledUnread.highlight <= 0) return driftRooms;
 
       const latestNotificationEvent = [...room.getLiveTimeline().getEvents()]
         .reverse()
@@ -111,6 +113,7 @@ const formatListCoverage = (knownCount: number, rangeEnd: number): string => {
 export function SyncDiagnostics() {
   const mx = useMatrixClient();
   const [, setTick] = useState(0);
+  const [expandSliding, setExpandSliding] = useState(false);
 
   useEffect(() => {
     const intervalId = window.setInterval(() => setTick((v) => v + 1), 1000);
@@ -149,7 +152,7 @@ export function SyncDiagnostics() {
             Rooms without live events: {roomDiagnostics.roomsWithoutLiveEvents}
           </Text>
           <Text size="T300">
-            Rooms with more history to paginate: {roomDiagnostics.roomsWithBackPagination}
+            Rooms with additional history available: {roomDiagnostics.roomsWithBackPagination}
           </Text>
           <Text size="T300">Unread drift rooms: {unreadDriftRooms.length}</Text>
           {unreadDriftRooms.slice(0, 10).map((room) => (
@@ -161,14 +164,46 @@ export function SyncDiagnostics() {
           ))}
 
           {diagnostics.sliding && (
-            <>
-              <Text size="T300">Sliding proxy: {diagnostics.sliding.proxyBaseUrl}</Text>
-              {diagnostics.sliding.lists.map((list) => (
-                <Text size="T300" key={list.key}>
-                  List `{list.key}` coverage: {formatListCoverage(list.knownCount, list.rangeEnd)}
-                </Text>
-              ))}
-            </>
+            <Box direction="Column" gap="100">
+              <Box justifyContent="SpaceBetween" alignItems="Center">
+                <Text size="T300">Sliding Sync</Text>
+                <Button
+                  size="300"
+                  variant="Secondary"
+                  fill="Soft"
+                  radii="300"
+                  before={<Icon src={expandSliding ? Icons.ChevronTop : Icons.ChevronBottom} />}
+                  onClick={() => setExpandSliding((v) => !v)}
+                >
+                  <Text size="B300">{expandSliding ? 'Collapse' : 'Expand'}</Text>
+                </Button>
+              </Box>
+              {expandSliding && (
+                <Box direction="Column" gap="100">
+                  <Text size="T300">Sliding proxy: {diagnostics.sliding.proxyBaseUrl}</Text>
+                  <Text size="T300">
+                    Timeline limit: {diagnostics.sliding.timelineLimit} (page size:{' '}
+                    {diagnostics.sliding.listPageSize})
+                  </Text>
+                  <Text size="T300">
+                    Adaptive timeline: {diagnostics.sliding.adaptiveTimeline ? 'yes' : 'no'}
+                  </Text>
+                  <Text size="T300">
+                    Device/network: saveData {diagnostics.sliding.device.saveData ? 'on' : 'off'} |
+                    effectiveType {diagnostics.sliding.device.effectiveType ?? 'unknown'} | memory{' '}
+                    {diagnostics.sliding.device.deviceMemoryGb ?? 'unknown'} GB | mobile{' '}
+                    {diagnostics.sliding.device.mobile ? 'yes' : 'no'} | missing signals{' '}
+                    {diagnostics.sliding.device.missingSignals}
+                  </Text>
+                  {diagnostics.sliding.lists.map((list) => (
+                    <Text size="T300" key={list.key}>
+                      List `{list.key}` coverage:{' '}
+                      {formatListCoverage(list.knownCount, list.rangeEnd)}
+                    </Text>
+                  ))}
+                </Box>
+              )}
+            </Box>
           )}
         </Box>
       </SequenceCard>

src/app/state/room/roomToParents.ts

@@ -7,8 +7,9 @@ import {
   Room,
   RoomEvent,
   RoomStateEvent,
+  SyncState,
 } from '$types/matrix-sdk';
-import { useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 import { Membership, RoomToParents, StateEvent } from '$types/matrix/room';
 import {
   getRoomToParents,
@@ -17,6 +18,7 @@ import {
   isValidChild,
   mapParentWithChildren,
 } from '$utils/room';
+import { useSyncState } from '$hooks/useSyncState';
 
 export type RoomToParentsAction =
   | {
@@ -93,18 +95,37 @@ export const useBindRoomToParentsAtom = (
   roomToParents: typeof roomToParentsAtom
 ) => {
   const setRoomToParents = useSetAtom(roomToParents);
+  const resetRoomToParents = useCallback(
+    () => setRoomToParents({ type: 'INITIALIZE', roomToParents: getRoomToParents(mx) }),
+    [mx, setRoomToParents]
+  );
+
+  useSyncState(
+    mx,
+    useCallback(
+      (state, prevState) => {
+        if (
+          (state === SyncState.Prepared && prevState === null) ||
+          (state === SyncState.Syncing && prevState !== SyncState.Syncing)
+        ) {
+          resetRoomToParents();
+        }
+      },
+      [resetRoomToParents]
+    )
+  );
 
   useEffect(() => {
-    setRoomToParents({ type: 'INITIALIZE', roomToParents: getRoomToParents(mx) });
+    resetRoomToParents();
 
     const handleAddRoom = (room: Room) => {
-      if (isSpace(room) && room.getMyMembership() !== Membership.Invite) {
+      if (isSpace(room) && room.getMyMembership() === Membership.Join) {
         setRoomToParents({ type: 'PUT', parent: room.roomId, children: getSpaceChildren(room) });
       }
     };
 
     const handleMembershipChange = (room: Room, membership: string) => {
-      if (isSpace(room) && room.getMyMembership() === Membership.Leave) {
+      if (isSpace(room) && membership !== Membership.Join) {
         setRoomToParents({ type: 'DELETE', roomId: room.roomId });
         return;
       }
@@ -118,6 +139,8 @@ export const useBindRoomToParentsAtom = (
         const childId = mEvent.getStateKey();
         const roomId = mEvent.getRoomId();
         if (childId && roomId) {
+          const parentRoom = mx.getRoom(roomId);
+          if (!parentRoom || parentRoom.getMyMembership() !== Membership.Join) return;
           if (isValidChild(mEvent)) {
             setRoomToParents({ type: 'PUT', parent: roomId, children: [childId] });
           } else {
@@ -141,5 +164,5 @@ export const useBindRoomToParentsAtom = (
       mx.removeListener(RoomStateEvent.Events, handleStateChange);
       mx.removeListener(ClientEvent.DeleteRoom, handleDeleteRoom);
     };
-  }, [mx, setRoomToParents]);
+  }, [mx, setRoomToParents, resetRoomToParents]);
 };

src/app/state/room/roomToUnread.ts

@@ -11,7 +11,7 @@ import {
   ReceiptType,
   EventType,
 } from '$types/matrix-sdk';
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 import {
   Membership,
   NotificationType,
@@ -186,6 +186,7 @@ export const roomToUnreadAtom = atom<RoomToUnread, [RoomToUnreadAction], undefin
 export const useBindRoomToUnreadAtom = (mx: MatrixClient, unreadAtom: typeof roomToUnreadAtom) => {
   const setUnreadAtom = useSetAtom(unreadAtom);
   const roomsNotificationPreferences = useRoomsNotificationPreferencesContext();
+  const spaceChildResetTimerRef = useRef<number | null>(null);
 
   useEffect(() => {
     setUnreadAtom({
@@ -327,15 +328,36 @@ export const useBindRoomToUnreadAtom = (mx: MatrixClient, unreadAtom: typeof roo
     };
   }, [mx, setUnreadAtom]);
 
+  useEffect(
+    () => () => {
+      if (spaceChildResetTimerRef.current !== null) {
+        window.clearTimeout(spaceChildResetTimerRef.current);
+        spaceChildResetTimerRef.current = null;
+      }
+    },
+    []
+  );
+
   useStateEventCallback(
     mx,
     useCallback(
       (mEvent) => {
         if (mEvent.getType() === StateEvent.SpaceChild) {
-          setUnreadAtom({
-            type: 'RESET',
-            unreadInfos: getUnreadInfos(mx),
-          });
+          const roomId = mEvent.getRoomId();
+          if (!roomId) return;
+          const parentRoom = mx.getRoom(roomId);
+          if (!parentRoom || parentRoom.getMyMembership() !== Membership.Join) return;
+
+          if (spaceChildResetTimerRef.current !== null) {
+            window.clearTimeout(spaceChildResetTimerRef.current);
+          }
+          spaceChildResetTimerRef.current = window.setTimeout(() => {
+            setUnreadAtom({
+              type: 'RESET',
+              unreadInfos: getUnreadInfos(mx),
+            });
+            spaceChildResetTimerRef.current = null;
+          }, 150);
         }
       },
       [mx, setUnreadAtom]

src/app/utils/room.ts

@@ -144,7 +144,7 @@ export const mapParentWithChildren = (
 export const getRoomToParents = (mx: MatrixClient): RoomToParents => {
   const map: RoomToParents = new Map();
   mx.getRooms()
-    .filter((room) => isSpace(room))
+    .filter((room) => isSpace(room) && room.getMyMembership() === Membership.Join)
     .forEach((room) => mapParentWithChildren(map, room.roomId, getSpaceChildren(room)));
 
   return map;