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>
2026-06-17 20:26:43 -04:00
parent cf7c66b99a
commit b24ab838f8
14 changed files with 931 additions and 418 deletions
@@ -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',
@@ -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',
@@ -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>
      );
    },
@@ -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>
+  );
+}