fix(ui): settings modal sizing regression + 17 more folds audit findings
CI / Build & Quality Checks (push) Successful in 10m47s
CI / Trigger Desktop Build (push) Successful in 5s

Fix settings modal regression: Modal500 was wrapped in useModalStyle(560),
forcing maxWidth 560px and squishing the two-pane Settings layout (folds
size="500" is ~50rem). Restore desktop width to the folds recipe while
keeping mobile fullscreen.

N-series fixes:
- N13 ScheduledMessagesTray header: <Box as="button"> -> folds <Button>
- N28 composer char counter: drop undefined --tc-surface-low + opacity,
  use priority="300" and config.space token
- N31 collapsible "Read more" toggle: padded <Button> -> flush inline-button
  pattern matching (edited) link
- N41 UserPrivateNotes "Saving..." now shows a folds <Spinner>
- N43 Night Light slider: add accentColor; label opacity -> priority
- N44 mention-highlight Reset: bare <button> -> folds <Button> (drops
  undefined --border-interactive-normal); Boot button kept (TDS-only)
- N45 SelectTheme trigger variant -> Secondary to match SettingsSelect
- N49 RoomInsights StatTile emoji -> folds <Icon> (Photo/VideoCamera/
  Headphone/File)
- N54/N57 PiP overlay badges + fullscreen button: token discipline
  (config.radii/space, folds Text); dark scrim kept for video legibility
- N60 knock badge: match Pinned Messages pattern (no wrapper div, toRem
  insets, no hardcoded size overrides)
- N62 unverified-device banner: 3px left-accent -> standard border via
  color.Warning.ContainerLine; drop opacity hacks
- N65 Edit History: real "Load more" pagination (accumulate next_batch,
  de-dupe by id, re-sort by ts) replacing passive text
- N66 search date fields: raw <input type="date"> -> folds <Input>
- N67 SeasonalEffect z-index 9999 -> 9997 (below Night Light + modals)
- N73 Pending Requests header uses css.MembersGroupLabel
- N74 remove raw em-sized emoji <span> in RoomNavItem name
- N85/N86 RemindMeDialog: <Box role="dialog"> -> folds <Dialog>; preset
  MenuItems -> Buttons (fixes invalid menuitem-in-dialog ARIA)

Document deliberate WON'T FIX rationale for N9, N51, N61, N71, N75, N77.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-06-19 00:15:35 -04:00
parent 8dc4c4d072
commit c54cb126ff
16 changed files with 332 additions and 300 deletions
@@ -1,5 +1,5 @@
import React, { useMemo } from 'react';
import { Avatar, Box, Icon, IconButton, Icons, Scroll, Text, color, config } from 'folds';
import { Avatar, Box, Icon, IconButton, Icons, IconSrc, Scroll, Text, color, config } from 'folds';
import { EventType } from 'matrix-js-sdk';
import { Page, PageContent, PageHeader } from '../../components/page';
import { SequenceCard } from '../../components/sequence-card';
@@ -32,7 +32,7 @@ function SectionHeader({ label }: { label: string }) {
// ── Stat tile ─────────────────────────────────────────────────────────────────
function StatTile({ emoji, count, label }: { emoji: string; count: number; label: string }) {
function StatTile({ icon, count, label }: { icon: IconSrc; count: number; label: string }) {
return (
<Box
direction="Column"
@@ -47,7 +47,7 @@ function StatTile({ emoji, count, label }: { emoji: string; count: number; label
background: color.Surface.Container,
}}
>
<Text size="H4">{emoji}</Text>
<Icon src={icon} size="300" />
<Text size="H4" style={{ fontWeight: 700 }}>
{count}
</Text>
@@ -274,10 +274,14 @@ export function RoomInsights({ requestClose }: RoomInsightsProps) {
<Box direction="Column" gap="200">
<SectionHeader label="Media Shared" />
<Box gap="200" wrap="Wrap">
<StatTile emoji="🖼️" count={stats.mediaCounts.image} label="Images" />
<StatTile emoji="🎬" count={stats.mediaCounts.video} label="Videos" />
<StatTile emoji="🎵" count={stats.mediaCounts.audio} label="Audio" />
<StatTile emoji="📎" count={stats.mediaCounts.file} label="Files" />
<StatTile icon={Icons.Photo} count={stats.mediaCounts.image} label="Images" />
<StatTile
icon={Icons.VideoCamera}
count={stats.mediaCounts.video}
label="Videos"
/>
<StatTile icon={Icons.Headphone} count={stats.mediaCounts.audio} label="Audio" />
<StatTile icon={Icons.File} count={stats.mediaCounts.file} label="Files" />
</Box>
</Box>