fix(wave-2): audit fixes — account-data races, search-cache wipe, export, media

Web fixes from the Wave-2 bug-hunt (findings in LOTUS_TODO):
- F1 (security): wipe the decrypted-plaintext search index on SERVER-FORCED
  logout too (token expiry / remote sign-out) — only manual logout did before.
  F4: the delete no longer reports success while onblocked (waits, 3s cap).
- M1/M2 (data-loss): useBookmarks + useUserNotes account-data writes are now
  serialized at MODULE scope (single queue + latestRef per client, echo-driven),
  fixing the cross-instance lost-update clobber (useBookmarks mounts per message
  row, so a per-instance queue was insufficient — caught in review).
- M6: room-history export gets a 200-page cap + Cancel + unmount-abort +
  correct date-range early-break (raw paginated ts). M4: image compression
  skips PNG (was flattening transparency to black), bakes EXIF orientation via
  createImageBitmap, .jpg-renames, and falls back to the original on decode
  failure instead of dropping the file. M5: MediaGallery lightbox opens the
  right item (shared thumb guard). M8: audio speed survives async decrypt.
- Desktop web wiring: D2 badge sums leaf rooms only (space double-count, like
  the favicon fix); D3 useTauriDnd re-hydrates from get_tray_dnd on mount; D5
  updater has a terminal state.

Reviewed; M7 reverted (past-time clamp is an intentional, tested contract).
tsc/eslint/prettier clean, build OK, 678 tests.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/app/components/message/content/AudioContent.tsx

@@ -99,9 +99,21 @@ export function AudioContent({
   const [playbackSpeed, setPlaybackSpeed] = useState<0.75 | 1 | 1.5 | 2>(1);
 
   useEffect(() => {
-    if (audioRef.current) {
-      audioRef.current.playbackRate = playbackSpeed;
-    }
+    const audio = audioRef.current;
+    if (!audio) return undefined;
+    const applyRate = () => {
+      audio.playbackRate = playbackSpeed;
+    };
+    // Apply immediately, and re-apply whenever the media element (re)loads a new
+    // source — e.g. after async decrypt swaps in the blob URL — since the browser
+    // resets playbackRate to 1 on load, discarding the user's speed choice.
+    applyRate();
+    audio.addEventListener('loadedmetadata', applyRate);
+    audio.addEventListener('play', applyRate);
+    return () => {
+      audio.removeEventListener('loadedmetadata', applyRate);
+      audio.removeEventListener('play', applyRate);
+    };
   }, [playbackSpeed]);
 
   const SPEED_STEPS: Array<0.75 | 1 | 1.5 | 2> = [0.75, 1, 1.5, 2];

src/app/features/room-settings/ExportRoomHistory.tsx

@@ -1,5 +1,5 @@
-import React, { useCallback, useState } from 'react';
-import { Box, Button, Icon, IconButton, Icons, Input, Scroll, Spinner, Text } from 'folds';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { Box, Button, Icon, IconButton, Icons, Input, Scroll, Text } from 'folds';
 import { EventType } from 'matrix-js-sdk';
 import { Page, PageContent, PageHeader } from '../../components/page';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
@@ -16,6 +16,12 @@ const FORMAT_LABELS: Record<ExportFormat, string> = {
   html: 'HTML',
 };
 
+const PAGE_LIMIT = 100;
+// Hard cap on back-pagination requests. Without a fromDate, "export all" would
+// otherwise decrypt and hold every message in the room, hammering the server and
+// risking an OOM/freeze with no way to stop. 200 pages × 100 ≈ 20,000 events.
+const MAX_EXPORT_PAGES = 200;
+
 type ExportRoomHistoryProps = {
   requestClose: () => void;
 };
@@ -30,11 +36,28 @@ export function ExportRoomHistory({ requestClose }: ExportRoomHistoryProps) {
   const [toDate, setToDate] = useState('');
   const [exporting, setExporting] = useState(false);
   const [exportCount, setExportCount] = useState(0);
+  const [notice, setNotice] = useState('');
+  const cancelledRef = useRef(false);
+
+  const handleCancel = useCallback(() => {
+    cancelledRef.current = true;
+  }, []);
+
+  // Stop an in-flight export if the panel unmounts (closing settings mid-export
+  // would otherwise keep paginating + decrypting in the background).
+  useEffect(
+    () => () => {
+      cancelledRef.current = true;
+    },
+    [],
+  );
 
   const handleExport = useCallback(async () => {
     if (exporting) return;
+    cancelledRef.current = false;
     setExporting(true);
     setExportCount(0);
+    setNotice('');
 
     try {
       const fromTs = fromDate ? new Date(`${fromDate}T00:00:00`).getTime() : null;
@@ -55,6 +78,14 @@ export function ExportRoomHistory({ requestClose }: ExportRoomHistoryProps) {
       const seen = new Set<string>();
       const timeline = room.getLiveTimeline();
       let canLoadMore = true;
+      // Track the oldest collected timestamp incrementally so the fromTs check
+      // doesn't rescan the whole `collected` array on every pagination step.
+      let oldestTs = Number.POSITIVE_INFINITY;
+      // Oldest RAW message ts paginated (tracked BEFORE the fromTs filter). The
+      // date-range early-break must use this — oldestTs only ever holds collected
+      // events (all >= fromTs), so it can never fall below fromTs and the export
+      // would over-paginate to the page cap and show a misleading "truncated".
+      let oldestRawTs = Number.POSITIVE_INFINITY;
 
       const addEvents = async (events: ReturnType<typeof timeline.getEvents>) => {
         for (const ev of events) {
@@ -70,12 +101,14 @@ export function ExportRoomHistory({ requestClose }: ExportRoomHistoryProps) {
           if (ev.getType() !== EventType.RoomMessage) continue;
           if (ev.isDecryptionFailure()) continue;
           const ts = ev.getTs();
+          if (ts < oldestRawTs) oldestRawTs = ts;
           if (fromTs !== null && ts < fromTs) continue;
           if (toTs !== null && ts > toTs) continue;
           const content = ev.getContent();
           const body: string = content.body ?? '';
           const msgtype: string = content.msgtype ?? '';
           if (!body) continue;
+          if (ts < oldestTs) oldestTs = ts;
           collected.push({
             ts,
             sender: ev.getSender() ?? '',
@@ -89,25 +122,40 @@ export function ExportRoomHistory({ requestClose }: ExportRoomHistoryProps) {
 
       await addEvents(timeline.getEvents());
 
-      // Paginate backwards until start or date range exceeded
+      // Paginate backwards until start, date range exceeded, cap hit, or cancel
+      let pageCount = 0;
+      let truncated = false;
+      let cancelled = false;
       while (canLoadMore) {
-        // If we have a fromTs, check whether the oldest collected event is already
-        // before it — if so we don't need to paginate further.
-        if (fromTs !== null && collected.length > 0) {
-          const oldestTs = Math.min(...collected.map((r) => r.ts));
-          if (oldestTs < fromTs) break;
+        if (cancelledRef.current) {
+          cancelled = true;
+          break;
         }
+        // If we've paginated back past the fromTs boundary, there's nothing more
+        // in range to fetch (use the raw paginated ts, not the collected one).
+        if (fromTs !== null && oldestRawTs < fromTs) break;
+        // Hard cap so "export all" can't run away and OOM the tab.
+        if (pageCount >= MAX_EXPORT_PAGES) {
+          truncated = true;
+          break;
+        }
+        pageCount += 1;
 
         // eslint-disable-next-line no-await-in-loop
         canLoadMore = await mx.paginateEventTimeline(timeline, {
           backwards: true,
-          limit: 100,
+          limit: PAGE_LIMIT,
         });
 
         // eslint-disable-next-line no-await-in-loop
         await addEvents(timeline.getEvents());
       }
 
+      if (cancelled) {
+        setNotice(`Export cancelled after ${collected.length} messages.`);
+        return;
+      }
+
       // Sort chronologically (oldest first)
       collected.sort((a, b) => a.ts - b.ts);
 
@@ -191,6 +239,12 @@ ${msgRows}
       a.download = `export-${safeRoomName}-${dateStr}.${ext}`;
       a.click();
       URL.revokeObjectURL(url);
+
+      if (truncated) {
+        setNotice(
+          `Export truncated to ${collected.length} messages (reached the ${MAX_EXPORT_PAGES}-page limit). Narrow the date range to export older history.`,
+        );
+      }
     } finally {
       setExporting(false);
     }
@@ -297,24 +351,35 @@ ${msgRows}
                         ? `Exporting… ${exportCount} messages`
                         : 'Export will download automatically.'}
                     </Text>
-                    <Button
-                      size="400"
-                      variant="Primary"
-                      fill="Solid"
-                      radii="300"
-                      disabled={exporting}
-                      onClick={handleExport}
-                      before={
-                        exporting ? (
-                          <Spinner size="200" />
-                        ) : (
-                          <Icon src={Icons.Download} size="100" />
-                        )
-                      }
-                    >
-                      <Text size="B400">{exporting ? 'Exporting…' : 'Export'}</Text>
-                    </Button>
+                    {exporting ? (
+                      <Button
+                        size="400"
+                        variant="Critical"
+                        fill="Soft"
+                        radii="300"
+                        onClick={handleCancel}
+                        before={<Icon src={Icons.Cross} size="100" />}
+                      >
+                        <Text size="B400">Cancel</Text>
+                      </Button>
+                    ) : (
+                      <Button
+                        size="400"
+                        variant="Primary"
+                        fill="Solid"
+                        radii="300"
+                        onClick={handleExport}
+                        before={<Icon src={Icons.Download} size="100" />}
+                      >
+                        <Text size="B400">Export</Text>
+                      </Button>
+                    )}
                   </Box>
+                  {notice && (
+                    <Text size="T200" priority="400">
+                      {notice}
+                    </Text>
+                  )}
                 </SequenceCard>
               </Box>
             </Box>

src/app/features/room/MediaGallery.tsx

@@ -133,6 +133,18 @@ function getSenderName(room: Room, userId: string): string {
   return room.getMember(userId)?.name ?? userId.split(':')[0]?.slice(1) ?? userId;
 }
 
+// Resolve the thumbnail/display MXC for an image/video event, mirroring the
+// grid's preference order (encrypted thumb > file > thumbnail_url > url). Both
+// the grid and the lightbox must use this so their positional indices stay in
+// lockstep — otherwise a tile skipped for lack of a thumb would shift the
+// lightbox and open the wrong media.
+function getThumbMxc(mEvent: MatrixEvent): string | undefined {
+  const c = mEvent.getContent();
+  const isEnc = !!c.file;
+  const info: (IImageInfo & IThumbnailContent) | undefined = c.info;
+  return isEnc ? (info?.thumbnail_file?.url ?? c.file?.url) : (info?.thumbnail_url ?? c.url);
+}
+
 // ── Lightbox ──────────────────────────────────────────────────────────────────
 
 type LightboxItem = {
@@ -585,7 +597,10 @@ export function MediaGallery({ room, onClose }: MediaGalleryProps) {
   const lightboxItems: LightboxItem[] = events
     .filter((ev) => {
       const c = ev.getContent();
-      return c.msgtype === MsgType.Image || c.msgtype === MsgType.Video;
+      if (c.msgtype !== MsgType.Image && c.msgtype !== MsgType.Video) return false;
+      // Match the grid's guard exactly: tiles without a thumb are not rendered,
+      // so they must not occupy a lightbox slot either.
+      return !!getThumbMxc(ev);
     })
     .map((ev) => {
       const c = ev.getContent();
@@ -712,9 +727,7 @@ export function MediaGallery({ room, onClose }: MediaGalleryProps) {
                             const info: (IImageInfo & IThumbnailContent) | undefined = c.info;
 
                             // Prefer thumbnail_file (encrypted thumb) > file > thumbnail_url > url
-                            const thumbMxc: string | undefined = isEnc
-                              ? (info?.thumbnail_file?.url ?? c.file?.url)
-                              : (info?.thumbnail_url ?? c.url);
+                            const thumbMxc: string | undefined = getThumbMxc(mEvent);
                             const thumbEnc: IEncryptedFile | undefined = isEnc
                               ? (info?.thumbnail_file ?? c.file)
                               : undefined;

src/app/features/room/RoomInput.tsx

@@ -456,12 +456,16 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
 
             if (compressionResult) {
               const originalFile = fileItem.originalFile as File;
-              const compressedFile = new File([compressionResult.blob], originalFile.name, {
-                type: 'image/jpeg',
+              // compressImage re-encodes as JPEG; swap the extension so the file
+              // name and MIME type agree (avoids e.g. a JPEG named "photo.png").
+              const compressedType = compressionResult.type;
+              const compressedName = `${originalFile.name.replace(/\.[^./\\]+$/, '')}.jpg`;
+              const compressedFile = new File([compressionResult.blob], compressedName, {
+                type: compressedType,
               });
               const uploadRes = await mx.uploadContent(compressedFile, {
-                name: originalFile.name,
-                type: 'image/jpeg',
+                name: compressedName,
+                type: compressedType,
               });
               const compressedMxc = (uploadRes as { content_uri: string }).content_uri;
               if (compressedMxc) {

src/app/hooks/useBookmarks.ts

@@ -1,7 +1,6 @@
 import { useCallback, useEffect, useState } from 'react';
-import { MatrixClient } from 'matrix-js-sdk';
+import { ClientEvent, ClientEventHandlerMap, MatrixClient } from 'matrix-js-sdk';
 import { useMatrixClient } from './useMatrixClient';
-import { useAccountDataCallback } from './useAccountDataCallback';
 
 export type Bookmark = {
   roomId: string;
@@ -25,6 +24,75 @@ function readBookmarks(mx: MatrixClient): Bookmark[] {
   );
 }
 
+// Module-scoped serialization state.
+//
+// useBookmarks() is mounted once per message row (dozens of live instances), so
+// a per-instance latest/queue would only serialize writes within a single row —
+// bookmarking message A then message B from different rows (before the server
+// echo lands) would let B compute from a stale snapshot and clobber A
+// (setAccountData replaces the whole content, no server merge). We therefore
+// keep a single shared latest ref + write queue, keyed off the active client.
+type BookmarksModuleState = {
+  mx: MatrixClient;
+  latest: Bookmark[];
+  writeQueue: Promise<unknown>;
+  listeners: Set<(list: Bookmark[]) => void>;
+  onAccountData: ClientEventHandlerMap[ClientEvent.AccountData];
+};
+
+let moduleState: BookmarksModuleState | null = null;
+
+// Lazily initialize the shared state for the given client. On a client change
+// (login/logout swaps the MatrixClient) we tear down the old subscription and
+// re-initialize against the new client so we never leak or double-subscribe.
+function ensureModuleState(mx: MatrixClient): BookmarksModuleState {
+  if (moduleState && moduleState.mx === mx) {
+    return moduleState;
+  }
+
+  if (moduleState) {
+    moduleState.mx.removeListener(ClientEvent.AccountData, moduleState.onAccountData);
+  }
+
+  const state: BookmarksModuleState = {
+    mx,
+    latest: readBookmarks(mx),
+    writeQueue: Promise.resolve(),
+    listeners: new Set(),
+    // Reassigned below once `state` is captured.
+    onAccountData: () => undefined,
+  };
+
+  state.onAccountData = (evt) => {
+    if (evt.getType() === BOOKMARKS_KEY) {
+      const list = evt.getContent<BookmarksContent>()?.bookmarks ?? [];
+      state.latest = list;
+      state.listeners.forEach((listener) => listener(list));
+    }
+  };
+
+  mx.on(ClientEvent.AccountData, state.onAccountData);
+  moduleState = state;
+  return state;
+}
+
+function enqueueBookmarkWrite(
+  mx: MatrixClient,
+  compute: (current: Bookmark[]) => Bookmark[],
+): Promise<void> {
+  const state = ensureModuleState(mx);
+  const run = state.writeQueue.then(async () => {
+    const next = compute(state.latest);
+    state.latest = next;
+    state.listeners.forEach((listener) => listener(next));
+    await (mx as any).setAccountData(BOOKMARKS_KEY, { bookmarks: next });
+  });
+  // Keep the chain alive even if one write rejects, but propagate the
+  // rejection to this caller so it can react (e.g. retry).
+  state.writeQueue = run.catch(() => undefined);
+  return run;
+}
+
 export function useBookmarks(): {
   bookmarks: Bookmark[];
   addBookmark: (b: Bookmark) => Promise<void>;
@@ -32,45 +100,37 @@ export function useBookmarks(): {
   isBookmarked: (eventId: string) => boolean;
 } {
   const mx = useMatrixClient();
-  const [bookmarks, setBookmarks] = useState<Bookmark[]>(() => readBookmarks(mx));
+  const [bookmarks, setBookmarks] = useState<Bookmark[]>(() => ensureModuleState(mx).latest);
 
-  useAccountDataCallback(
-    mx,
-    useCallback(
-      (evt) => {
-        if (evt.getType() === BOOKMARKS_KEY) {
-          setBookmarks(evt.getContent<BookmarksContent>()?.bookmarks ?? []);
-        }
-      },
-      [setBookmarks],
-    ),
-  );
-
-  // Re-read on mx change
+  // Subscribe to the shared module state. A single AccountData listener is
+  // installed per client (in ensureModuleState); each hook instance only
+  // registers a local setter and unregisters it on unmount / client change.
   useEffect(() => {
-    setBookmarks(readBookmarks(mx));
+    const state = ensureModuleState(mx);
+    setBookmarks(state.latest);
+    state.listeners.add(setBookmarks);
+    return () => {
+      state.listeners.delete(setBookmarks);
+    };
   }, [mx]);
 
   const addBookmark = useCallback(
-    async (b: Bookmark) => {
-      const current = readBookmarks(mx);
-      // Avoid duplicates
-      const filtered = current.filter((bk) => bk.eventId !== b.eventId);
-      let next = [b, ...filtered];
-      if (next.length > MAX_BOOKMARKS) {
-        next = next.slice(0, MAX_BOOKMARKS);
-      }
-      await (mx as any).setAccountData(BOOKMARKS_KEY, { bookmarks: next });
-    },
+    (b: Bookmark) =>
+      enqueueBookmarkWrite(mx, (current) => {
+        // Avoid duplicates
+        const filtered = current.filter((bk) => bk.eventId !== b.eventId);
+        let next = [b, ...filtered];
+        if (next.length > MAX_BOOKMARKS) {
+          next = next.slice(0, MAX_BOOKMARKS);
+        }
+        return next;
+      }),
     [mx],
   );
 
   const removeBookmark = useCallback(
-    async (eventId: string) => {
-      const current = readBookmarks(mx);
-      const next = current.filter((bk) => bk.eventId !== eventId);
-      await (mx as any).setAccountData(BOOKMARKS_KEY, { bookmarks: next });
-    },
+    (eventId: string) =>
+      enqueueBookmarkWrite(mx, (current) => current.filter((bk) => bk.eventId !== eventId)),
     [mx],
   );
 

src/app/hooks/useReminders.ts

@@ -1,7 +1,6 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { MatrixClient } from 'matrix-js-sdk';
+import { useCallback, useEffect, useState } from 'react';
+import { ClientEvent, ClientEventHandlerMap, MatrixClient } from 'matrix-js-sdk';
 import { useMatrixClient } from './useMatrixClient';
-import { useAccountDataCallback } from './useAccountDataCallback';
 
 export type Reminder = {
   roomId: string;
@@ -23,6 +22,75 @@ function readReminders(mx: MatrixClient): Reminder[] {
   );
 }
 
+// Module-scoped serialization state.
+//
+// The latest snapshot and the write queue must be shared across every hook
+// instance: ReminderMonitor (auto-removes fired reminders) and RemindMeDialog
+// (adds reminders) mount separate hooks, and a per-instance queue would let a
+// remove and an add race across instances and clobber each other (setAccountData
+// replaces the whole content, no server merge). We therefore keep a single
+// shared queue + latest ref, keyed off the active MatrixClient.
+type ReminderModuleState = {
+  mx: MatrixClient;
+  latest: Reminder[];
+  writeQueue: Promise<unknown>;
+  listeners: Set<(list: Reminder[]) => void>;
+  onAccountData: ClientEventHandlerMap[ClientEvent.AccountData];
+};
+
+let moduleState: ReminderModuleState | null = null;
+
+// Lazily initialize the shared state for the given client. On a client change
+// (login/logout swaps the MatrixClient) we tear down the old subscription and
+// re-initialize against the new client so we never leak or double-subscribe.
+function ensureModuleState(mx: MatrixClient): ReminderModuleState {
+  if (moduleState && moduleState.mx === mx) {
+    return moduleState;
+  }
+
+  if (moduleState) {
+    moduleState.mx.removeListener(ClientEvent.AccountData, moduleState.onAccountData);
+  }
+
+  const state: ReminderModuleState = {
+    mx,
+    latest: readReminders(mx),
+    writeQueue: Promise.resolve(),
+    listeners: new Set(),
+    // Reassigned below once `state` is captured.
+    onAccountData: () => undefined,
+  };
+
+  state.onAccountData = (evt) => {
+    if (evt.getType() === REMINDERS_KEY) {
+      const list = evt.getContent<RemindersContent>()?.reminders ?? [];
+      state.latest = list;
+      state.listeners.forEach((listener) => listener(list));
+    }
+  };
+
+  mx.on(ClientEvent.AccountData, state.onAccountData);
+  moduleState = state;
+  return state;
+}
+
+function enqueueReminderWrite(
+  mx: MatrixClient,
+  compute: (current: Reminder[]) => Reminder[],
+): Promise<void> {
+  const state = ensureModuleState(mx);
+  const run = state.writeQueue.then(async () => {
+    const next = compute(state.latest);
+    state.latest = next;
+    state.listeners.forEach((listener) => listener(next));
+    await (mx as any).setAccountData(REMINDERS_KEY, { reminders: next });
+  });
+  // Keep the chain alive even if one write rejects, but propagate the
+  // rejection to this caller so it can react (e.g. retry).
+  state.writeQueue = run.catch(() => undefined);
+  return run;
+}
+
 export function useReminders(): {
   reminders: Reminder[];
   addReminder: (r: Reminder) => Promise<void>;
@@ -30,69 +98,34 @@ export function useReminders(): {
   getReminders: () => Reminder[];
 } {
   const mx = useMatrixClient();
-  const [reminders, setReminders] = useState<Reminder[]>(() => readReminders(mx));
+  const [reminders, setReminders] = useState<Reminder[]>(() => ensureModuleState(mx).latest);
 
-  // Authoritative local snapshot used to compute mutations. Reading
-  // mx.getAccountData() per-mutation is racy: two quick add/remove calls both
-  // read the same stale baseline and the second write clobbers the first
-  // (N113). We instead mutate from this ref, kept in sync with server echoes.
-  const latestRef = useRef<Reminder[]>(reminders);
-  // Serialize writes so overlapping setAccountData calls can't land out of
-  // order on the server (last-write-wins would otherwise drop data).
-  const writeQueueRef = useRef<Promise<unknown>>(Promise.resolve());
-
-  const applyServerState = useCallback((list: Reminder[]) => {
-    latestRef.current = list;
-    setReminders(list);
-  }, []);
-
-  useAccountDataCallback(
-    mx,
-    useCallback(
-      (evt) => {
-        if (evt.getType() === REMINDERS_KEY) {
-          applyServerState(evt.getContent<RemindersContent>()?.reminders ?? []);
-        }
-      },
-      [applyServerState],
-    ),
-  );
-
-  // Re-read on mx change
+  // Subscribe to the shared module state. A single AccountData listener is
+  // installed per client (in ensureModuleState); each hook instance only
+  // registers a local setter and unregisters it on unmount / client change.
   useEffect(() => {
-    applyServerState(readReminders(mx));
-  }, [mx, applyServerState]);
-
-  const enqueueWrite = useCallback(
-    (compute: (current: Reminder[]) => Reminder[]): Promise<void> => {
-      const run = writeQueueRef.current.then(async () => {
-        const next = compute(latestRef.current);
-        latestRef.current = next;
-        setReminders(next);
-        await (mx as any).setAccountData(REMINDERS_KEY, { reminders: next });
-      });
-      // Keep the chain alive even if one write rejects, but propagate the
-      // rejection to this caller so it can react (e.g. retry).
-      writeQueueRef.current = run.catch(() => undefined);
-      return run;
-    },
-    [mx],
-  );
+    const state = ensureModuleState(mx);
+    setReminders(state.latest);
+    state.listeners.add(setReminders);
+    return () => {
+      state.listeners.delete(setReminders);
+    };
+  }, [mx]);
 
   const addReminder = useCallback(
-    (r: Reminder) => enqueueWrite((current) => [...current, r]),
-    [enqueueWrite],
+    (r: Reminder) => enqueueReminderWrite(mx, (current) => [...current, r]),
+    [mx],
   );
 
   const removeReminder = useCallback(
     (eventId: string, timestamp: number) =>
-      enqueueWrite((current) =>
+      enqueueReminderWrite(mx, (current) =>
         current.filter((r) => !(r.eventId === eventId && r.timestamp === timestamp)),
       ),
-    [enqueueWrite],
+    [mx],
   );
 
-  const getReminders = useCallback(() => reminders, [reminders]);
+  const getReminders = useCallback(() => ensureModuleState(mx).latest, [mx]);
 
   return { reminders, addReminder, removeReminder, getReminders };
 }

src/app/hooks/useTauriDnd.ts

@@ -1,6 +1,7 @@
+import { useEffect } from 'react';
 import { useSetAtom } from 'jotai';
 import { manualDndAtom } from '../state/manualDnd';
-import { useTauriEvent } from './useTauri';
+import { tauriInvoke, useTauriEvent } from './useTauri';
 
 /** Detail shape of the `lotus-dnd-changed` event emitted by the native side. */
 type DndChangedDetail = {
@@ -18,4 +19,17 @@ export function useTauriDnd(): void {
   const setDnd = useSetAtom(manualDndAtom);
 
   useTauriEvent<DndChangedDetail>('lotus-dnd-changed', ({ active }) => setDnd(active));
+
+  // Re-hydrate on mount. The tray CheckMenuItem persists its checkstate, but
+  // `manualDndAtom` is in-memory and resets to false on every reload (the
+  // custom-chrome toggle, logout). Without this the tray could show DND ON while
+  // notifications resume firing. Query the native tray state (`get_tray_dnd`) so
+  // they stay in sync. No-op in the browser.
+  useEffect(() => {
+    tauriInvoke()?.('get_tray_dnd')
+      .then((active) => {
+        if (typeof active === 'boolean') setDnd(active);
+      })
+      .catch(() => undefined);
+  }, [setDnd]);
 }

src/app/hooks/useTauriNotificationBadge.ts

@@ -18,6 +18,10 @@ export function useTauriNotificationBadge() {
 
     let totalHighlights = 0;
     roomToUnread.forEach((unread) => {
+      // Sum only leaf rooms (from === null); roomToUnread also holds per-ancestor
+      // space aggregates (from = Set), so counting all entries double-counts a
+      // space-nested room. Mirrors the favicon fix in ClientNonUIFeatures.
+      if (unread.from !== null) return;
       totalHighlights += unread.highlight;
     });
 

src/app/hooks/useTauriUpdater.ts

@@ -38,6 +38,10 @@ export function useTauriUpdater() {
     setStatus({ state: 'installing' });
     try {
       await invoke('install_update');
+      // On a successful install the native side calls app.restart(), so this
+      // resolve is only reached when nothing was installed (no update found) —
+      // don't leave the UI stuck on "installing".
+      setStatus({ state: 'up-to-date' });
     } catch (e) {
       setStatus({ state: 'error', message: String(e) });
     }

src/app/hooks/useUserNotes.ts

@@ -1,7 +1,6 @@
 import { useCallback, useEffect, useState } from 'react';
-import { MatrixClient } from 'matrix-js-sdk';
+import { ClientEvent, ClientEventHandlerMap, MatrixClient } from 'matrix-js-sdk';
 import { useMatrixClient } from './useMatrixClient';
-import { useAccountDataCallback } from './useAccountDataCallback';
 
 const NOTES_KEY = 'io.lotus.user_notes';
 export const USER_NOTE_MAX_LENGTH = 500;
@@ -12,39 +11,108 @@ function readNotes(mx: MatrixClient): UserNotesContent {
   return (mx.getAccountData(NOTES_KEY as any)?.getContent() as UserNotesContent | undefined) ?? {};
 }
 
+// Module-scoped serialization state.
+//
+// useUserNotes() can be mounted by many components at once, so a per-instance
+// latest/queue would only serialize writes within one instance. Notes for
+// different users saved from different instances (before the server echo lands)
+// would each compute from a stale snapshot and clobber each other, since
+// setAccountData replaces the whole record with no server merge. We therefore
+// keep a single shared latest record + write queue, keyed off the active client.
+type UserNotesModuleState = {
+  mx: MatrixClient;
+  latest: UserNotesContent;
+  writeQueue: Promise<unknown>;
+  listeners: Set<(record: UserNotesContent) => void>;
+  onAccountData: ClientEventHandlerMap[ClientEvent.AccountData];
+};
+
+let moduleState: UserNotesModuleState | null = null;
+
+// Lazily initialize the shared state for the given client. On a client change
+// (login/logout swaps the MatrixClient) we tear down the old subscription and
+// re-initialize against the new client so we never leak or double-subscribe.
+function ensureModuleState(mx: MatrixClient): UserNotesModuleState {
+  if (moduleState && moduleState.mx === mx) {
+    return moduleState;
+  }
+
+  if (moduleState) {
+    moduleState.mx.removeListener(ClientEvent.AccountData, moduleState.onAccountData);
+  }
+
+  const state: UserNotesModuleState = {
+    mx,
+    latest: readNotes(mx),
+    writeQueue: Promise.resolve(),
+    listeners: new Set(),
+    // Reassigned below once `state` is captured.
+    onAccountData: () => undefined,
+  };
+
+  state.onAccountData = (evt) => {
+    if (evt.getType() === NOTES_KEY) {
+      const record = evt.getContent<UserNotesContent>() ?? {};
+      state.latest = record;
+      state.listeners.forEach((listener) => listener(record));
+    }
+  };
+
+  mx.on(ClientEvent.AccountData, state.onAccountData);
+  moduleState = state;
+  return state;
+}
+
+function enqueueNotesWrite(
+  mx: MatrixClient,
+  compute: (current: UserNotesContent) => UserNotesContent,
+): Promise<void> {
+  const state = ensureModuleState(mx);
+  const run = state.writeQueue.then(async () => {
+    const next = compute(state.latest);
+    state.latest = next;
+    state.listeners.forEach((listener) => listener(next));
+    await (mx as any).setAccountData(NOTES_KEY, next);
+  });
+  // Keep the chain alive even if one write rejects, but propagate the
+  // rejection to this caller so it can react (e.g. retry).
+  state.writeQueue = run.catch(() => undefined);
+  return run;
+}
+
 export function useUserNotes(): {
   getNote: (userId: string) => string;
   setNote: (userId: string, note: string) => Promise<void>;
 } {
   const mx = useMatrixClient();
-  const [notes, setNotes] = useState<UserNotesContent>(() => readNotes(mx));
-
-  useAccountDataCallback(
-    mx,
-    useCallback((evt) => {
-      if (evt.getType() === NOTES_KEY) {
-        setNotes(evt.getContent<UserNotesContent>() ?? {});
-      }
-    }, []),
-  );
+  const [notes, setNotes] = useState<UserNotesContent>(() => ensureModuleState(mx).latest);
 
+  // Subscribe to the shared module state. A single AccountData listener is
+  // installed per client (in ensureModuleState); each hook instance only
+  // registers a local setter and unregisters it on unmount / client change.
   useEffect(() => {
-    setNotes(readNotes(mx));
+    const state = ensureModuleState(mx);
+    setNotes(state.latest);
+    state.listeners.add(setNotes);
+    return () => {
+      state.listeners.delete(setNotes);
+    };
   }, [mx]);
 
   const getNote = useCallback((userId: string) => notes[userId] ?? '', [notes]);
 
   const setNote = useCallback(
-    async (userId: string, note: string) => {
-      const current = readNotes(mx);
-      const updated = { ...current };
+    (userId: string, note: string) => {
       const trimmed = note.trim().slice(0, USER_NOTE_MAX_LENGTH);
-      if (trimmed) {
-        updated[userId] = trimmed;
-      } else {
-        delete updated[userId];
-      }
-      await (mx as any).setAccountData(NOTES_KEY, updated);
+      return enqueueNotesWrite(mx, (current) => {
+        const updated = { ...current };
+        if (trimmed) {
+          updated[userId] = trimmed;
+        } else {
+          delete updated[userId];
+        }
+        return updated;
+      });
     },
     [mx],
   );

src/app/pages/client/ClientRoot.tsx

@@ -31,6 +31,7 @@ import {
   logoutClient,
   startClient,
 } from '../../../client/initMatrix';
+import { deleteSearchCacheDatabase } from '../../utils/searchCache';
 import { SplashScreen } from '../../components/splash-screen';
 import { ServerConfigsLoader } from '../../components/ServerConfigsLoader';
 import { CapabilitiesProvider } from '../../hooks/useCapabilities';
@@ -144,6 +145,11 @@ const useLogoutListener = (mx?: MatrixClient) => {
     const handleLogout: HttpApiEventHandlerMap[HttpApiEvent.SessionLoggedOut] = async () => {
       mx?.stopClient();
       await mx?.clearStores();
+      // The opt-in local search index holds DECRYPTED message plaintext. Wipe it
+      // on server-forced logout too (token expiry / remote sign-out / password
+      // change) — the manual logout path already does, but this path didn't, so
+      // the plaintext survived on disk (and persist() makes it non-evictable).
+      await deleteSearchCacheDatabase();
       // Remove only the session credential keys — NOT settings, drafts, and
       // other preferences (N98). The SDK's IndexedDB stores are cleared above;
       // window.localStorage.clear() is reserved for the explicit reset path.

src/app/utils/imageCompression.ts

@@ -1,5 +1,7 @@
 export type CompressionResult = {
   blob: Blob;
+  /** MIME type of the produced blob (currently always image/jpeg). */
+  type: string;
   originalSize: number;
   compressedSize: number;
   width: number;
@@ -17,22 +19,47 @@ export function isCompressible(file: File | Blob): boolean {
   return isCompressibleType(file.type);
 }
 
+const JPEG_OUTPUT_TYPE = 'image/jpeg';
+
 /**
  * Compress an image file via canvas.toBlob → JPEG at the given quality.
- * Returns null if the browser cannot render the image (e.g. unsupported codec).
+ * Returns null if the browser cannot render the image (e.g. unsupported codec)
+ * or if the source is left untouched to avoid data loss (see below).
+ *
+ * PNG is skipped entirely: it may carry an alpha channel, and re-encoding to
+ * JPEG composites transparency onto an opaque (black) background, corrupting the
+ * image. Returning null makes callers fall back to uploading the lossless
+ * original. The image is decoded with `imageOrientation: 'from-image'` so any
+ * EXIF orientation is baked into the pixels instead of being silently dropped.
  */
 export async function compressImage(
   file: File | Blob,
   quality = 0.82,
 ): Promise<CompressionResult | null> {
   if (!isCompressibleType(file.type)) return null;
+  // Skip PNG (potential alpha) — re-encoding to JPEG would flatten transparency.
+  if (file.type === 'image/png') return null;
 
-  const img = await loadImage(file);
+  let bitmap: ImageBitmap;
+  try {
+    bitmap = await createImageBitmap(file, { imageOrientation: 'from-image' });
+  } catch {
+    // Corrupt/unsupported source: fall back to uploading the lossless original
+    // (the caller uses the original file on a null result) rather than rejecting,
+    // which would drop the file entirely from the Promise.allSettled upload.
+    return null;
+  }
+  const { width, height } = bitmap;
   const canvas = document.createElement('canvas');
-  canvas.width = img.naturalWidth;
-  canvas.height = img.naturalHeight;
-  const ctx = canvas.getContext('2d')!;
-  ctx.drawImage(img, 0, 0);
+  canvas.width = width;
+  canvas.height = height;
+  const ctx = canvas.getContext('2d');
+  if (!ctx) {
+    bitmap.close();
+    return null;
+  }
+  ctx.drawImage(bitmap, 0, 0);
+  bitmap.close();
 
   return new Promise((resolve) => {
     canvas.toBlob(
@@ -43,31 +70,19 @@ export async function compressImage(
         }
         resolve({
           blob,
+          type: JPEG_OUTPUT_TYPE,
           originalSize: file.size,
           compressedSize: blob.size,
-          width: img.naturalWidth,
-          height: img.naturalHeight,
+          width,
+          height,
         });
       },
-      'image/jpeg',
+      JPEG_OUTPUT_TYPE,
       quality,
     );
   });
 }
 
-function loadImage(file: File | Blob): Promise<HTMLImageElement> {
-  return new Promise((resolve, reject) => {
-    const url = URL.createObjectURL(file);
-    const img = new Image();
-    img.onload = () => {
-      URL.revokeObjectURL(url);
-      resolve(img);
-    };
-    img.onerror = reject;
-    img.src = url;
-  });
-}
-
 export function formatFileSize(bytes: number): string {
   if (bytes < 1024) return `${bytes} B`;
   if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;

src/app/utils/scheduledMessages.ts

@@ -12,6 +12,8 @@ export async function scheduleMessage(
   content: IContent,
   sendAtMs: number,
 ): Promise<string> {
+  // A past/near target floors at 1000ms (send ~immediately) — an intentional,
+  // tested contract; the ScheduleMessageModal already guards ≥60s in the future.
   const delayMs = Math.max(1000, Math.round(sendAtMs - Date.now()));
   const txnId = `sched_${Date.now()}_${Math.random().toString(36).slice(2)}`;
   const path = `/rooms/${encodeURIComponent(roomId)}/send/m.room.message/${txnId}`;

src/app/utils/searchCache.ts

@@ -298,9 +298,23 @@ export const deleteSearchCacheDatabase = async (): Promise<void> => {
         return;
       }
       const req = indexedDB.deleteDatabase(DB_NAME);
-      req.onsuccess = () => resolve();
-      req.onerror = () => resolve();
-      req.onblocked = () => resolve();
+      let settled = false;
+      const done = () => {
+        if (!settled) {
+          settled = true;
+          resolve();
+        }
+      };
+      req.onsuccess = done;
+      req.onerror = done;
+      req.onblocked = () => {
+        // Another tab still holds the DB open, so the delete is QUEUED, not done —
+        // resolving now would report a wipe that hasn't happened (plaintext still
+        // on disk). Wait for the real onsuccess (fires once the other tab closes;
+        // cross-tab logout reloads it shortly), but cap the wait so logout can't
+        // hang forever if a tab never releases.
+        setTimeout(done, 3000);
+      };
     } catch {
       resolve();
     }