feat: Remind Me Later, mobile bookmarks, bug fixes, and doc cleanup

Features:
- Remind Me Later: message context menu item opens a preset time picker
  (20 min / 1 hr / 3 hr / tomorrow 9am); reminders persist to Matrix
  account data (io.lotus.reminders); ReminderMonitor fires a Lotus Toast
  when due, checks every 30s and on tab focus
- Mobile Bookmarks: BookmarksPanel now renders on all screen sizes;
  passes isMobile prop for full-screen absolute overlay on mobile

Bug fixes:
- usePan.ts: memory leak from stale closure in document listener cleanup
- EventReaders.tsx: replace hardcoded hex colors with TDS CSS variables
- CallControls.tsx: replace hardcoded hex colors with TDS CSS variables
- CustomHtml.css.ts: replace hardcoded yellow/black highlight with theme tokens

Docs:
- LOTUS_TODO.md: restore deleted content (Confirmed facts table, Pending
  Audits, P5-30 completed status, full feature descriptions), keep new
  additions (P4-7/8/9, P5-41–57, Implementation Reference), eliminate
  duplicate sections
- LOTUS_BUGS.md: merge RESILIENCE_AUDIT.md findings into Architectural &
  Resilience Audit table; delete RESILIENCE_AUDIT.md
- Remove stale LOTUS_DENOISE_ENGINEERING_REVIEW.md and LOTUS_TODO_REFERENCE.md

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/app/hooks/usePan.ts

@@ -1,4 +1,4 @@
-import { MouseEventHandler, useEffect, useState } from 'react';
+import { MouseEventHandler, useEffect, useRef, useState } from 'react';
 
 export type Pan = {
   translateX: number;
@@ -16,36 +16,39 @@ export const usePan = (active: boolean) => {
     active ? 'grab' : 'initial',
   );
 
+  // Track the exact handler references that were passed to addEventListener so
+  // we can remove them even if the component re-renders or unmounts mid-drag.
+  const attachedRef = useRef<{ move: (e: MouseEvent) => void; up: (e: MouseEvent) => void } | null>(
+    null,
+  );
+
   useEffect(() => {
     setCursor(active ? 'grab' : 'initial');
   }, [active]);
 
-  const handleMouseMove = (evt: MouseEvent) => {
-    evt.preventDefault();
-    evt.stopPropagation();
-
-    setPan((p) => {
-      const { translateX, translateY } = p;
-      const mX = translateX + evt.movementX;
-      const mY = translateY + evt.movementY;
-
-      return { translateX: mX, translateY: mY };
-    });
-  };
-
-  const handleMouseUp = (evt: MouseEvent) => {
-    evt.preventDefault();
-    setCursor('grab');
-
-    document.removeEventListener('mousemove', handleMouseMove);
-    document.removeEventListener('mouseup', handleMouseUp);
-  };
-
   const handleMouseDown: MouseEventHandler<HTMLElement> = (evt) => {
     if (!active) return;
     evt.preventDefault();
     setCursor('grabbing');
 
+    const handleMouseMove = (e: MouseEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setPan((p) => ({
+        translateX: p.translateX + e.movementX,
+        translateY: p.translateY + e.movementY,
+      }));
+    };
+
+    const handleMouseUp = (e: MouseEvent) => {
+      e.preventDefault();
+      setCursor('grab');
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+      attachedRef.current = null;
+    };
+
+    attachedRef.current = { move: handleMouseMove, up: handleMouseUp };
     document.addEventListener('mousemove', handleMouseMove);
     document.addEventListener('mouseup', handleMouseUp);
   };
@@ -54,13 +57,15 @@ export const usePan = (active: boolean) => {
     if (!active) setPan(INITIAL_PAN);
   }, [active]);
 
-  // Clean up document listeners if component unmounts during an active drag
+  // Remove listeners if the component unmounts while a drag is in progress.
   useEffect(
     () => () => {
-      document.removeEventListener('mousemove', handleMouseMove);
-      document.removeEventListener('mouseup', handleMouseUp);
+      if (attachedRef.current) {
+        document.removeEventListener('mousemove', attachedRef.current.move);
+        document.removeEventListener('mouseup', attachedRef.current.up);
+        attachedRef.current = null;
+      }
     },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     [],
   );
 

src/app/hooks/useReminders.ts

@@ -0,0 +1,75 @@
+import { useCallback, useEffect, useState } from 'react';
+import { MatrixClient } from 'matrix-js-sdk';
+import { useMatrixClient } from './useMatrixClient';
+import { useAccountDataCallback } from './useAccountDataCallback';
+
+export type Reminder = {
+  roomId: string;
+  eventId: string;
+  timestamp: number;
+  message: string;
+};
+
+const REMINDERS_KEY = 'io.lotus.reminders';
+
+type RemindersContent = {
+  reminders: Reminder[];
+};
+
+function readReminders(mx: MatrixClient): Reminder[] {
+  return (
+    (mx.getAccountData(REMINDERS_KEY as any)?.getContent() as RemindersContent | undefined)
+      ?.reminders ?? []
+  );
+}
+
+export function useReminders(): {
+  reminders: Reminder[];
+  addReminder: (r: Reminder) => Promise<void>;
+  removeReminder: (eventId: string, timestamp: number) => Promise<void>;
+  getReminders: () => Reminder[];
+} {
+  const mx = useMatrixClient();
+  const [reminders, setReminders] = useState<Reminder[]>(() => readReminders(mx));
+
+  useAccountDataCallback(
+    mx,
+    useCallback(
+      (evt) => {
+        if (evt.getType() === REMINDERS_KEY) {
+          setReminders(evt.getContent<RemindersContent>()?.reminders ?? []);
+        }
+      },
+      [setReminders],
+    ),
+  );
+
+  // Re-read on mx change
+  useEffect(() => {
+    setReminders(readReminders(mx));
+  }, [mx]);
+
+  const addReminder = useCallback(
+    async (r: Reminder) => {
+      const current = readReminders(mx);
+      const next = [...current, r];
+      await (mx as any).setAccountData(REMINDERS_KEY, { reminders: next });
+    },
+    [mx],
+  );
+
+  const removeReminder = useCallback(
+    async (eventId: string, timestamp: number) => {
+      const current = readReminders(mx);
+      const next = current.filter(
+        (r) => !(r.eventId === eventId && r.timestamp === timestamp),
+      );
+      await (mx as any).setAccountData(REMINDERS_KEY, { reminders: next });
+    },
+    [mx],
+  );
+
+  const getReminders = useCallback(() => reminders, [reminders]);
+
+  return { reminders, addReminder, removeReminder, getReminders };
+}