From 6f544e2b1fff8c235b6db3cd4bd49e35112e6dec Mon Sep 17 00:00:00 2001
From: Jared Vititoe <jjvititoe1@gmail.com>
Date: Fri, 19 Jun 2026 20:26:17 -0400
Subject: [PATCH] fix(ui): report modals use folds Dialog shell (N63)

ReportRoomModal/ReportUserModal rendered as <Box as="form" role="dialog">
with inline background/borderRadius(R400)/boxShadow. Switch both to
<Dialog as="form" variant="Surface"> so the surface (background, R300 radius,
shadow) comes from the design system, matching MessageReportItem and every
other message-action modal.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 LOTUS_BUGS.md                             |  2 +-
 src/app/features/room/ReportRoomModal.tsx | 14 +++++---------
 src/app/features/room/ReportUserModal.tsx | 14 +++++---------
 3 files changed, 11 insertions(+), 19 deletions(-)

diff --git a/LOTUS_BUGS.md b/LOTUS_BUGS.md
index 0b4b8d1f4..6ae844dbe 100644
--- a/LOTUS_BUGS.md
+++ b/LOTUS_BUGS.md
@@ -413,7 +413,7 @@ This document tracks identified bugs, edge cases, and architectural discrepancie
 | N60 | Knock Badge on Members Button                                                | `RoomViewHeader.tsx`                          | 744–782               | Knock count badge wrapped in extra `<div style={{ position: 'relative' }}>` with hardcoded `fontSize: '9px'`, `minWidth: '14px'`, `height: '14px'`, `padding: '0 3px'` overriding folds `size="200"` — **FIXED**: removed wrapper div, put `position: 'relative'` directly on the `IconButton`, `<Badge size="400">` with `toRem(3)` insets and `<Text size="L400">` — now matches the Pinned Messages badge pattern exactly                                                                                                         | Pinned Messages badge (same header, lines 651–677) uses `position: 'relative'` directly on `<IconButton>` + `toRem()` for inset; no extra wrapper div                                                               |
 | N61 | Knock Member Rows                                                            | `MembersDrawer.tsx`                           | 441–487               | Knock requester rows use raw `<Box>` with manually duplicated padding; no `<MenuItem>` wrapper → no hover/focus/active states — **WON'T FIX (deliberate)**: unlike a `MemberItem` (a clickable navigation row), a knock row contains two action buttons (Approve / Deny) and is **not itself clickable**. Wrapping it in `<MenuItem>` (a `<button>`) would nest interactive controls inside a button — invalid HTML/ARIA. The row has no interactive state to express.                                                               | Every joined/invited member uses `<MemberItem>` which wraps `<MenuItem variant="Background" radii="400">` with baked-in spacing and all interactive states                                                          |
 | N62 | Unverified Device Banner                                                     | `RoomInput.tsx`                               | 860–883               | Warning callout above composer uses inline `background: color.Warning.Container`, `borderLeft: '3px solid color.Warning.Main'` — a custom left-border accent pattern not present anywhere else in the folds system — **FIXED**: replaced the `borderLeft: '3px'` accent with a standard full `border` using `color.Warning.ContainerLine` + `config.borderWidth.B300`; removed the `opacity` hacks (folds `OnContainer` already meets contrast)                                                                                      | Warning indicators in the same codebase use `<Chip variant="Warning">` or `<Badge variant="Warning">`; the 3px left-border card pattern has no folds equivalent                                                     |
-| N63 | Report Modals — Box Instead of Dialog                                        | `ReportRoomModal.tsx` / `ReportUserModal.tsx` | 97–110 / 103–116      | Both modals render as `<Box as="form" role="dialog">` with inline `background`/`borderRadius`/`boxShadow`; use `config.radii.R400` (rounder) vs native `Dialog` which uses `R300`                                                                                                                                                                                                                                                                                                                                                    | Native `MessageReportItem` at `Message.tsx:634` and all other Cinny message-action modals use `<Dialog variant="Surface">`                                                                                          |
+| N63 | Report Modals — Box Instead of Dialog                                        | `ReportRoomModal.tsx` / `ReportUserModal.tsx` | 97–110 / 103–116      | Both modals render as `<Box as="form" role="dialog">` with inline `background`/`borderRadius`/`boxShadow`; use `config.radii.R400` (rounder) vs native `Dialog` which uses `R300` — **FIXED**: both shells are now `<Dialog as="form" variant="Surface">`; removed inline surface styles (Dialog provides background/radius/shadow)                                                                                                                                                                                                  | Native `MessageReportItem` at `Message.tsx:634` and all other Cinny message-action modals use `<Dialog variant="Surface">`                                                                                          |
 | N64 | EditHistoryModal — `<Modal>` vs `<Dialog>`                                   | `EditHistoryModal.tsx`                        | 166                   | Uses `<Modal variant="Surface" size="500">` while sibling message-action modals (`DeleteMessageItem:505`, `MessageReportItem:634`) all use `<Dialog variant="Surface">` — different widths and internal padding                                                                                                                                                                                                                                                                                                                      | `<Dialog variant="Surface">` is the established modal shell for all message-triggered dialogs                                                                                                                       |
 | N65 | EditHistoryModal — No "Load More"                                            | `EditHistoryModal.tsx`                        | 253–259               | When `hasMore` is true the modal shows passive `<Text>"Showing the 50 most recent edits"</Text>` with no action; older edits are inaccessible — **FIXED**: implemented real pagination — edits accumulate across `next_batch` fetches (de-duped by event id, re-sorted by ts), with a folds `<Button>Load more</Button>` (spinner while loading) replacing the passive text                                                                                                                                                          | `RoomActivityLog.tsx:425` and `MessageSearch.tsx:129` both render a folds `<Button size="300" variant="Secondary">Load more</Button>` to fetch the next page                                                        |
 | N66 | DateRangeButton — Native `<input type="date">`                               | `SearchFilters.tsx`                           | 558–589               | "From" and "To" date fields are raw `<input type="date">` with inline style overrides including `fontSize: '0.82rem'` — **FIXED**: replaced both with folds `<Input type="date" variant="SurfaceVariant" size="300" radii="300">`; removed now-unused `color` import                                                                                                                                                                                                                                                                 | `SelectRoomButton` (same file, line 224) and `SelectSenderButton` (line 424) both use folds `<Input size="300" radii="300">`; the date inputs are the only native browser inputs in the search filter row           |
diff --git a/src/app/features/room/ReportRoomModal.tsx b/src/app/features/room/ReportRoomModal.tsx
index 6e9d1c958..f55477f16 100644
--- a/src/app/features/room/ReportRoomModal.tsx
+++ b/src/app/features/room/ReportRoomModal.tsx
@@ -5,6 +5,7 @@ import {
   Text,
   Input,
   Button,
+  Dialog,
   IconButton,
   Icon,
   Icons,
@@ -94,19 +95,14 @@ export function ReportRoomModal({ roomId, onClose }: ReportRoomModalProps) {
             escapeDeactivates: stopPropagation,
           }}
         >
-          <Box
+          <Dialog
             as="form"
+            variant="Surface"
             role="dialog"
             aria-modal="true"
             aria-labelledby="report-room-dialog-title"
             onSubmit={handleSubmit}
-            direction="Column"
-            style={{
-              background: color.Surface.Container,
-              borderRadius: config.radii.R400,
-              boxShadow: color.Other.Shadow,
-              ...modalStyle,
-            }}
+            style={modalStyle}
           >
             <Header
               style={{
@@ -206,7 +202,7 @@ export function ReportRoomModal({ roomId, onClose }: ReportRoomModalProps) {
                 </Button>
               </Box>
             </Box>
-          </Box>
+          </Dialog>
         </FocusTrap>
       </OverlayCenter>
     </Overlay>
diff --git a/src/app/features/room/ReportUserModal.tsx b/src/app/features/room/ReportUserModal.tsx
index eb3996726..fc89703f5 100644
--- a/src/app/features/room/ReportUserModal.tsx
+++ b/src/app/features/room/ReportUserModal.tsx
@@ -5,6 +5,7 @@ import {
   Text,
   Input,
   Button,
+  Dialog,
   IconButton,
   Icon,
   Icons,
@@ -100,19 +101,14 @@ export function ReportUserModal({ userId, onClose }: ReportUserModalProps) {
             escapeDeactivates: stopPropagation,
           }}
         >
-          <Box
+          <Dialog
             as="form"
+            variant="Surface"
             role="dialog"
             aria-modal="true"
             aria-labelledby="report-user-dialog-title"
             onSubmit={handleSubmit}
-            direction="Column"
-            style={{
-              background: color.Surface.Container,
-              borderRadius: config.radii.R400,
-              boxShadow: color.Other.Shadow,
-              ...modalStyle,
-            }}
+            style={modalStyle}
           >
             <Header
               style={{
@@ -212,7 +208,7 @@ export function ReportUserModal({ userId, onClose }: ReportUserModalProps) {
                 </Button>
               </Box>
             </Box>
-          </Box>
+          </Dialog>
         </FocusTrap>
       </OverlayCenter>
     </Overlay>