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/components/event-readers/EventReaders.tsx

@@ -71,8 +71,8 @@ export const EventReaders = as<'div', EventReadersProps>(
           style={
             lotusTerminal
               ? {
-                  borderBottom: '1px solid rgba(0,212,255,0.30)',
-                  boxShadow: '0 2px 12px rgba(0,212,255,0.08)',
+                  borderBottom: '1px solid var(--lt-border-color)',
+                  boxShadow: 'var(--lt-box-glow-cyan)',
                 }
               : undefined
           }
@@ -83,8 +83,8 @@ export const EventReaders = as<'div', EventReadersProps>(
               style={
                 lotusTerminal
                   ? {
-                      color: '#00D4FF',
-                      textShadow: '0 0 6px rgba(0,212,255,0.45)',
+                      color: 'var(--lt-accent-cyan)',
+                      textShadow: 'var(--lt-glow-cyan)',
                       letterSpacing: '0.05em',
                     }
                   : undefined
@@ -144,8 +144,8 @@ export const EventReaders = as<'div', EventReadersProps>(
                           style={
                             lotusTerminal
                               ? {
-                                  color: '#FFB300',
-                                  textShadow: '0 0 5px rgba(255,179,0,0.45)',
+                                  color: 'var(--lt-accent-amber)',
+                                  textShadow: 'var(--lt-glow-amber)',
                                   fontSize: '0.72rem',
                                 }
                               : { opacity: 0.6 }

src/app/features/bookmarks/BookmarksPanel.tsx

@@ -126,9 +126,10 @@ function BookmarkItem({ bookmark, onJump, onRemove }: BookmarkItemProps) {
 
 type BookmarksPanelProps = {
   onClose: () => void;
+  isMobile?: boolean;
 };
 
-export function BookmarksPanel({ onClose }: BookmarksPanelProps) {
+export function BookmarksPanel({ onClose, isMobile }: BookmarksPanelProps) {
   const { bookmarks, removeBookmark } = useBookmarks();
   const { navigateRoom } = useRoomNavigate();
   const [filter, setFilter] = useState('');
@@ -154,10 +155,14 @@ export function BookmarksPanel({ onClose }: BookmarksPanelProps) {
     <Box
       direction="Column"
       style={{
-        width: '266px',
+        width: isMobile ? '100%' : '266px',
         height: '100%',
+        position: isMobile ? 'absolute' : 'static',
+        top: isMobile ? 0 : 'auto',
+        left: isMobile ? 0 : 'auto',
+        zIndex: isMobile ? 100 : 'auto',
         flexShrink: 0,
-        borderLeft: `1px solid ${color.Surface.ContainerLine}`,
+        borderLeft: isMobile ? 'none' : `1px solid ${color.Surface.ContainerLine}`,
         background: color.Surface.Container,
         overflow: 'hidden',
         display: 'flex',

src/app/features/call/CallControls.tsx

@@ -246,8 +246,8 @@ export function CallControls({ callEmbed }: CallControlsProps) {
               top: '-2.5rem',
               left: '50%',
               transform: 'translateX(-50%)',
-              background: pttActive ? 'rgba(0,255,136,0.18)' : 'rgba(255,107,0,0.12)',
-              border: `1px solid ${pttActive ? 'rgba(0,255,136,0.55)' : 'rgba(255,107,0,0.35)'}`,
+              background: pttActive ? 'var(--lt-accent-green-dim)' : 'var(--lt-accent-orange-dim)',
+              border: `1px solid ${pttActive ? 'var(--lt-accent-green-border)' : 'var(--lt-accent-orange-border)'}`,
               borderRadius: '99px',
               padding: '0.2rem 0.9rem',
               pointerEvents: 'none',
@@ -257,7 +257,7 @@ export function CallControls({ callEmbed }: CallControlsProps) {
             <Text
               size="T200"
               style={{
-                color: pttActive ? '#00FF88' : '#FF6B00',
+                color: pttActive ? 'var(--lt-accent-green)' : 'var(--lt-accent-orange)',
                 fontWeight: 700,
                 letterSpacing: '0.08em',
                 fontFamily: 'JetBrains Mono, monospace',

src/app/features/room/message/Message.tsx

@@ -81,6 +81,7 @@ import { PowerIcon } from '../../../components/power';
 import colorMXID from '../../../../util/colorMXID';
 import { getPowerTagIconSrc } from '../../../hooks/useMemberPowerTag';
 import { ForwardMessageDialog } from './ForwardMessageDialog';
+import { RemindMeDialog } from './RemindMeDialog';
 import { useBookmarks } from '../../../hooks/useBookmarks';
 import { PresenceRingAvatar } from '../../../components/presence';
 import { AvatarDecoration } from '../../../components/avatar-decoration/AvatarDecoration';
@@ -809,6 +810,7 @@ export const Message = React.memo(
       const [menuAnchor, setMenuAnchor] = useState<RectCords>();
       const [emojiBoardAnchor, setEmojiBoardAnchor] = useState<RectCords>();
       const [forwardOpen, setForwardOpen] = useState(false);
+      const [remindOpen, setRemindOpen] = useState(false);
       const { addBookmark, removeBookmark, isBookmarked } = useBookmarks();
 
       const senderDisplayName =
@@ -1204,6 +1206,26 @@ export const Message = React.memo(
                                 </Text>
                               </MenuItem>
                             )}
+                            {!mEvent.isRedacted() && mEvent.getId() && (
+                              <MenuItem
+                                size="300"
+                                after={<Icon size="100" src={Icons.Clock} />}
+                                radii="300"
+                                onClick={() => {
+                                  setRemindOpen(true);
+                                  closeMenu();
+                                }}
+                              >
+                                <Text
+                                  className={css.MessageMenuItemText}
+                                  as="span"
+                                  size="T300"
+                                  truncate
+                                >
+                                  Remind Me
+                                </Text>
+                              </MenuItem>
+                            )}
                             {!isThreadedMessage && (
                               <MenuItem
                                 size="300"
@@ -1372,6 +1394,14 @@ export const Message = React.memo(
           {forwardOpen && (
             <ForwardMessageDialog mEvent={mEvent} onClose={() => setForwardOpen(false)} />
           )}
+          {remindOpen && mEvent.getId() && (
+            <RemindMeDialog
+              roomId={room.roomId}
+              eventId={mEvent.getId()!}
+              previewText={(mEvent.getContent()?.body as string | undefined)?.slice(0, 120) ?? ''}
+              onClose={() => setRemindOpen(false)}
+            />
+          )}
         </MessageBase>
       );
     },

src/app/features/room/message/RemindMeDialog.tsx

@@ -0,0 +1,122 @@
+import React, { useMemo } from 'react';
+import FocusTrap from 'focus-trap-react';
+import {
+  Box,
+  Button,
+  Header,
+  Icon,
+  IconButton,
+  Icons,
+  Overlay,
+  OverlayBackdrop,
+  OverlayCenter,
+  Text,
+  config,
+} from 'folds';
+import { stopPropagation } from '../../../utils/keyboard';
+import { useReminders } from '../../../hooks/useReminders';
+
+type RemindMeDialogProps = {
+  roomId: string;
+  eventId: string;
+  previewText: string;
+  onClose: () => void;
+};
+
+function getPresets(): Array<{ label: string; ms: number }> {
+  const tomorrow = new Date();
+  tomorrow.setDate(tomorrow.getDate() + 1);
+  tomorrow.setHours(9, 0, 0, 0);
+  const tomorrowMs = tomorrow.getTime() - Date.now();
+  const timeLabel = tomorrow.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+  return [
+    { label: 'In 20 minutes', ms: 20 * 60_000 },
+    { label: 'In 1 hour', ms: 60 * 60_000 },
+    { label: 'In 3 hours', ms: 3 * 60 * 60_000 },
+    { label: `Tomorrow at ${timeLabel}`, ms: tomorrowMs },
+  ];
+}
+
+export function RemindMeDialog({ roomId, eventId, previewText, onClose }: RemindMeDialogProps) {
+  const { addReminder } = useReminders();
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const presets = useMemo(() => getPresets(), []);
+
+  const handlePick = async (ms: number) => {
+    await addReminder({
+      roomId,
+      eventId,
+      timestamp: Date.now() + ms,
+      message: previewText || 'Reminder',
+    });
+    onClose();
+  };
+
+  return (
+    <Overlay open backdrop={<OverlayBackdrop />}>
+      <OverlayCenter>
+        <FocusTrap
+          focusTrapOptions={{
+            initialFocus: false,
+            returnFocusOnDeactivate: false,
+            onDeactivate: onClose,
+            clickOutsideDeactivates: true,
+            escapeDeactivates: stopPropagation,
+          }}
+        >
+          <Box
+            direction="Column"
+            style={{
+              width: 300,
+              borderRadius: 12,
+              background: 'var(--bg-surface)',
+              border: '1px solid var(--bg-surface-border)',
+              overflow: 'hidden',
+            }}
+          >
+            <Header variant="Surface" size="500">
+              <Box grow="Yes" alignItems="Center" gap="200">
+                <Icon size="100" src={Icons.Clock} />
+                <Text size="H4">Remind Me</Text>
+              </Box>
+              <IconButton size="300" onClick={onClose} aria-label="Close">
+                <Icon src={Icons.Cross} />
+              </IconButton>
+            </Header>
+            {previewText && (
+              <Box
+                style={{
+                  padding: `${config.space.S100} ${config.space.S400}`,
+                  borderBottom: '1px solid var(--bg-surface-border)',
+                }}
+              >
+                <Text size="T200" priority="300" truncate>
+                  {previewText}
+                </Text>
+              </Box>
+            )}
+            <Box
+              direction="Column"
+              gap="100"
+              style={{ padding: `${config.space.S200} ${config.space.S200} ${config.space.S300}` }}
+            >
+              {presets.map((p) => (
+                <Button
+                  key={p.label}
+                  variant="Secondary"
+                  fill="Soft"
+                  size="300"
+                  radii="300"
+                  style={{ justifyContent: 'flex-start' }}
+                  onClick={() => handlePick(p.ms)}
+                >
+                  <Text size="B300">{p.label}</Text>
+                </Button>
+              ))}
+            </Box>
+          </Box>
+        </FocusTrap>
+      </OverlayCenter>
+    </Overlay>
+  );
+}

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 };
+}

src/app/pages/client/ClientLayout.tsx

@@ -44,10 +44,15 @@ export function ClientLayout({ nav, children }: ClientLayoutProps) {
         <Box grow="Yes" as="main" id="main-content">
           {children}
         </Box>
-        {bookmarksOpen && screenSize === ScreenSize.Desktop && (
+        {bookmarksOpen && (
           <>
-            <Line variant="Background" direction="Vertical" size="300" />
-            <BookmarksPanel onClose={() => setBookmarksOpen(false)} />
+            {screenSize === ScreenSize.Desktop && (
+              <Line variant="Background" direction="Vertical" size="300" />
+            )}
+            <BookmarksPanel
+              onClose={() => setBookmarksOpen(false)}
+              isMobile={screenSize !== ScreenSize.Desktop}
+            />
           </>
         )}
       </Box>

src/app/pages/client/ClientNonUIFeatures.tsx

@@ -36,6 +36,7 @@ import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { usePresenceUpdater } from '../../hooks/usePresenceUpdater';
 import { useDeepLinkNavigate } from '../../hooks/useDeepLinkNavigate';
 import { toastQueueAtom } from '../../state/toast';
+import { useReminders } from '../../hooks/useReminders';
 
 function isInQuietHours(start: string, end: string): boolean {
   const now = new Date();
@@ -382,6 +383,50 @@ function DeepLinkNavigator() {
   return null;
 }
 
+function ReminderMonitor() {
+  const mx = useMatrixClient();
+  const { reminders, removeReminder } = useReminders();
+  const setToast = useSetAtom(toastQueueAtom);
+  const mDirects = useAtomValue(mDirectAtom);
+  const firedRef = useRef<Set<string>>(new Set());
+
+  useEffect(() => {
+    const check = () => {
+      const now = Date.now();
+      reminders.forEach((r) => {
+        const key = `${r.eventId}-${r.timestamp}`;
+        if (r.timestamp <= now && !firedRef.current.has(key)) {
+          firedRef.current.add(key);
+          const room = mx.getRoom(r.roomId);
+          const hashPath = mDirects.has(r.roomId)
+            ? getDirectRoomPath(r.roomId)
+            : getHomeRoomPath(r.roomId);
+          setToast({
+            id: `reminder-${key}`,
+            displayName: 'Reminder',
+            body: r.message,
+            roomName: room?.name ?? 'Unknown Room',
+            roomId: r.roomId,
+            hashPath,
+          });
+          removeReminder(r.eventId, r.timestamp);
+        }
+      });
+    };
+
+    check();
+    const interval = setInterval(check, 30_000);
+    const onVisible = () => { if (document.visibilityState === 'visible') check(); };
+    document.addEventListener('visibilitychange', onVisible);
+    return () => {
+      clearInterval(interval);
+      document.removeEventListener('visibilitychange', onVisible);
+    };
+  }, [mx, reminders, setToast, removeReminder, mDirects]);
+
+  return null;
+}
+
 function LotusDenoiseFeature() {
   const setToast = useSetAtom(toastQueueAtom);
 
@@ -417,6 +462,7 @@ export function ClientNonUIFeatures({ children }: ClientNonUIFeaturesProps) {
       <PresenceUpdater />
       <InviteNotifications />
       <MessageNotifications />
+      <ReminderMonitor />
       <LotusDenoiseFeature />
       <DeepLinkNavigator />
       {children}

src/app/styles/CustomHtml.css.ts

@@ -117,7 +117,7 @@ export const CodeBlockBottomShadow = style({
   pointerEvents: 'none',
 
   height: config.space.S400,
-  background: `linear-gradient(to top, #00000022, #00000000)`,
+  background: `linear-gradient(to top, ${color.Surface.Container}22, transparent)`,
 });
 
 const BaseList = style({});
@@ -255,7 +255,7 @@ export const EmoticonImg = style([
 export const highlightText = style([
   DefaultReset,
   {
-    backgroundColor: 'yellow',
-    color: 'black',
+    backgroundColor: color.Warning.Container,
+    color: color.Warning.OnContainer,
   },
 ]);