Change the notifications inbox to evaluate push rules on-device

.changeset/local-notification-inbox.md

@@ -0,0 +1,5 @@
+---
+default: minor
+---
+
+The notifications inbox is now built from push rules evaluated on this device instead of the server's `/notifications` endpoint, so mentions in encrypted rooms are detected correctly.

src/app/hooks/useInboxNotificationCount.test.ts

@@ -0,0 +1,23 @@
+import { describe, expect, it } from 'vitest';
+import type { Room } from '$types/matrix-sdk';
+import type { RoomToUnread } from '$types/matrix/room';
+import { countInboxNotifications } from './useInboxNotificationCount';
+
+const room = (roomId: string): Room =>
+  ({
+    roomId,
+    isSpaceRoom: () => false,
+    getJoinedMemberCount: () => 3,
+  }) as unknown as Room;
+
+describe('countInboxNotifications', () => {
+  it('counts all DM notifications and only highlights elsewhere', () => {
+    const rooms = [room('!dm'), room('!room')];
+    const unread = new Map([
+      ['!dm', { total: 4, highlight: 1, from: null }],
+      ['!room', { total: 8, highlight: 2, from: null }],
+    ]) as RoomToUnread;
+
+    expect(countInboxNotifications(rooms, unread, new Set(['!dm']))).toBe(6);
+  });
+});

src/app/hooks/useInboxNotificationCount.ts

@@ -0,0 +1,29 @@
+import { useAtomValue } from 'jotai';
+import { useMatrixClient } from '$hooks/useMatrixClient';
+import { mDirectAtom } from '$state/mDirectList';
+import { allRoomsAtom } from '$state/room-list/roomList';
+import { roomToUnreadAtom } from '$state/room/roomToUnread';
+import { isDMRoom } from '$utils/room/unread';
+import type { Room } from '$types/matrix-sdk';
+import type { RoomToUnread } from '$types/matrix/room';
+
+export const countInboxNotifications = (
+  rooms: readonly Room[],
+  roomToUnread: RoomToUnread,
+  mDirects: Set<string>
+): number =>
+  rooms.reduce((count, room) => {
+    const unread = roomToUnread.get(room.roomId);
+    if (!unread) return count;
+    return count + (isDMRoom(room, mDirects) ? unread.total : unread.highlight);
+  }, 0);
+
+export const useInboxNotificationCount = (): number => {
+  const mx = useMatrixClient();
+  const roomIds = useAtomValue(allRoomsAtom);
+  const roomToUnread = useAtomValue(roomToUnreadAtom);
+  const mDirects = useAtomValue(mDirectAtom);
+
+  const rooms = roomIds.flatMap((roomId) => mx.getRoom(roomId) ?? []);
+  return countInboxNotifications(rooms, roomToUnread, mDirects);
+};

src/app/hooks/useLocalNotificationTimeline.ts

@@ -0,0 +1,155 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useAtomValue } from 'jotai';
+import { RoomEvent } from '$types/matrix-sdk';
+import { useMatrixClient } from '$hooks/useMatrixClient';
+import { allRoomsAtom } from '$state/room-list/roomList';
+import { roomToUnreadAtom } from '$state/room/roomToUnread';
+import { useSetting } from '$state/hooks/settings';
+import { settingsAtom } from '$state/settings';
+import { getLocalNotificationCache } from '$client/localNotificationCache';
+import { backfillLocalNotifications } from '$utils/localNotificationBackfill';
+import {
+  isStoredNotificationRead,
+  sliceNotificationPage,
+  type NotificationTab,
+  type StoredNotification,
+} from '$utils/localNotifications';
+
+export type NotificationQuery = {
+  tab: NotificationTab;
+  includeRead: boolean;
+  limit: number;
+};
+
+export type NotificationPage = {
+  items: StoredNotification[];
+  canLoadOlder: boolean;
+};
+
+export const useLocalNotificationTimeline = (query: NotificationQuery) => {
+  const mx = useMatrixClient();
+  const joinedRooms = useAtomValue(allRoomsAtom);
+  const roomToUnread = useAtomValue(roomToUnreadAtom);
+  const [storeContent] = useSetting(settingsAtom, 'showMessageContentInNotifications');
+  const [storeEncryptedContent] = useSetting(
+    settingsAtom,
+    'showMessageContentInEncryptedNotifications'
+  );
+  const allowedRooms = useMemo(() => new Set(joinedRooms), [joinedRooms]);
+  const cache = getLocalNotificationCache(mx.getSafeUserId());
+  const loadedLimit = useRef(query.limit);
+  const [entries, setEntries] = useState(() => cache.getEntries());
+  const [historyCutoff, setHistoryCutoff] = useState(() => cache.getHistoryCutoff(query.tab));
+  const [loadingOlder, setLoadingOlder] = useState(false);
+  const [error, setError] = useState<Error>();
+  const refresh = useCallback(() => {
+    setEntries(cache.getEntries());
+    setHistoryCutoff(cache.getHistoryCutoff(query.tab));
+  }, [cache, query.tab]);
+
+  useEffect(() => {
+    loadedLimit.current = query.limit;
+    refresh();
+  }, [query, refresh]);
+
+  useEffect(() => {
+    refresh();
+    const unsubscribe = cache.subscribe(refresh);
+    mx.on(RoomEvent.Receipt, refresh);
+    return () => {
+      unsubscribe();
+      mx.off(RoomEvent.Receipt, refresh);
+    };
+  }, [cache, mx, refresh]);
+
+  useEffect(() => {
+    const controller = new AbortController();
+    void backfillLocalNotifications(
+      mx,
+      mx.getSafeUserId(),
+      {
+        storeContent,
+        storeEncryptedContent: storeContent && storeEncryptedContent,
+      },
+      { signal: controller.signal, tab: query.tab }
+    ).catch((reason: unknown) => {
+      if (!controller.signal.aborted) {
+        setError(reason instanceof Error ? reason : new Error(String(reason)));
+      }
+    });
+    return () => controller.abort();
+  }, [mx, query.tab, roomToUnread, storeContent, storeEncryptedContent]);
+
+  const page = useMemo<NotificationPage>(() => {
+    const visibleEntries = entries.filter((entry) => allowedRooms.has(entry.room_id));
+    const unreadRemaining = new Map<string, number>();
+    const unreadIds = new Set<string>();
+    for (const entry of visibleEntries) {
+      if (query.tab === 'dms' && !entry.isDM) continue;
+      if (query.tab === 'mentions' && !entry.highlight) continue;
+      const room = mx.getRoom(entry.room_id);
+      if (!room || isStoredNotificationRead(room, mx.getSafeUserId(), entry)) continue;
+      const remaining =
+        unreadRemaining.get(entry.room_id) ??
+        (query.tab === 'mentions'
+          ? roomToUnread.get(entry.room_id)?.highlight
+          : roomToUnread.get(entry.room_id)?.total) ??
+        0;
+      unreadRemaining.set(entry.room_id, Math.max(0, remaining - 1));
+      if (remaining > 0) unreadIds.add(entry.event.event_id);
+    }
+    const orderedEntries = visibleEntries.filter(
+      (entry) =>
+        unreadIds.has(entry.event.event_id) ||
+        (query.includeRead && historyCutoff !== undefined && entry.ts >= historyCutoff)
+    );
+    const { page: items, nextToken } = sliceNotificationPage(
+      orderedEntries,
+      0,
+      loadedLimit.current,
+      query.tab,
+      true,
+      () => false
+    );
+    return {
+      items,
+      canLoadOlder: query.includeRead || nextToken !== undefined,
+    };
+  }, [allowedRooms, entries, historyCutoff, mx, query, roomToUnread]);
+
+  const loadOlder = useCallback(async () => {
+    if (loadingOlder) return;
+    setLoadingOlder(true);
+    setError(undefined);
+    try {
+      if (query.includeRead) {
+        await backfillLocalNotifications(
+          mx,
+          mx.getSafeUserId(),
+          {
+            storeContent,
+            storeEncryptedContent: storeContent && storeEncryptedContent,
+          },
+          { includeRead: true, tab: query.tab }
+        );
+      }
+      loadedLimit.current += query.limit;
+      refresh();
+    } catch (reason) {
+      setError(reason instanceof Error ? reason : new Error(String(reason)));
+    } finally {
+      setLoadingOlder(false);
+    }
+  }, [
+    loadingOlder,
+    mx,
+    query.includeRead,
+    query.limit,
+    query.tab,
+    refresh,
+    storeContent,
+    storeEncryptedContent,
+  ]);
+
+  return { page, loadingOlder, error, refresh, loadOlder };
+};

src/app/pages/client/ClientNonUIFeatures.tsx

@@ -6,6 +6,7 @@ import { MatrixRTCSessionProvider } from '$hooks/useMatrixRTCSession';
 import { BackgroundNotifications } from './BackgroundNotifications';
 import { WebUpdater } from './WebUpdater';
 import { NotificationTransportRuntimeFeature } from '$features/settings/notifications/NotificationTransportRuntimeFeature';
+import { NotificationRecorder } from './client-non-ui/notificationRecorder';
 import {
   InviteNotifications,
   MessageNotifications,
@@ -51,6 +52,7 @@ export function ClientNonUIFeatures({ children }: ClientNonUIFeaturesProps) {
       <PageTitleUpdater />
       <InviteNotifications />
       <MessageNotifications />
+      <NotificationRecorder />
       <NativeNotificationClickRouting />
       <NativeNotificationActionRouting />
       <BackgroundNotifications />

src/app/pages/client/client-non-ui/notificationRecorder.tsx

@@ -0,0 +1,58 @@
+import { useAtomValue } from 'jotai';
+import { useEffect, useRef } from 'react';
+import type { MatrixClient, MatrixEvent } from '$types/matrix-sdk';
+import { ClientEvent, EventType, SyncState } from '$types/matrix-sdk';
+import { useMatrixClient } from '$hooks/useMatrixClient';
+import { useSetting } from '$state/hooks/settings';
+import { settingsAtom } from '$state/settings';
+import { mDirectAtom } from '$state/mDirectList';
+import { arePushRulesReady } from '$utils/localNotifications';
+import { runLiveTimelineScan } from '$utils/localNotificationBackfill';
+
+const isReady = (state: SyncState | null): boolean =>
+  state === SyncState.Prepared || state === SyncState.Syncing || state === SyncState.Catchup;
+
+export function NotificationRecorder() {
+  const mx = useMatrixClient();
+  const mDirects = useAtomValue(mDirectAtom);
+  const [storeContent] = useSetting(settingsAtom, 'showMessageContentInNotifications');
+  const [storeEncryptedContent] = useSetting(
+    settingsAtom,
+    'showMessageContentInEncryptedNotifications'
+  );
+  const mDirectsRef = useRef(mDirects);
+  mDirectsRef.current = mDirects;
+  const contentRef = useRef({ storeContent, storeEncryptedContent });
+  contentRef.current = {
+    storeContent,
+    storeEncryptedContent: storeContent && storeEncryptedContent,
+  };
+  const startedFor = useRef<MatrixClient>();
+
+  useEffect(() => {
+    const start = () => {
+      if (startedFor.current === mx || !isReady(mx.getSyncState()) || !arePushRulesReady(mx)) {
+        return;
+      }
+      startedFor.current = mx;
+      const content = contentRef.current;
+      void runLiveTimelineScan(mx, mx.getSafeUserId(), mDirectsRef.current, content).catch(
+        () => undefined
+      );
+    };
+    const onSync = () => start();
+    const onAccountData = (event: MatrixEvent) => {
+      if (event.getType() === (EventType.PushRules as string)) start();
+    };
+    mx.on(ClientEvent.Sync, onSync);
+    mx.on(ClientEvent.AccountData, onAccountData);
+    start();
+
+    return () => {
+      mx.off(ClientEvent.Sync, onSync);
+      mx.off(ClientEvent.AccountData, onAccountData);
+    };
+  }, [mx]);
+
+  return null;
+}