jared
8dc4c4d072
Fixes N1–N94 findings from LOTUS_BUGS.md audit pass. Key changes: - ProfileDecoration: raw <button> → folds <Button> for save/remove; remove undefined --accent-cyan var - UserRoomProfile: textarea border uses color.SurfaceVariant.ContainerLine and config tokens instead of undefined --border-interactive var - LotusToastContainer: z-index raised from 9997 → 10001 so toasts appear above Night Light overlay (9998) and modals (9999) - Message.tsx: DeliveryStatus replaces Unicode glyphs with Icon components; MessageQuickReactions returns null instead of <span />; forward menu item gets correct size="100" on after icon - AudioContent: speed chip variant/radii now matches Play chip (Secondary/300) - ReadReceiptAvatars: pill border/radius/padding → folds config tokens; remove dead receipt-pill-btn className - EventReaders: Header size 600→500; close button gets radii="300"; borderBottom shorthand → borderBottomWidth token; remove raw fontSize - General.tsx: selected background/seasonal picker border uses color.Primary.Main instead of color.Critical.Main (error red) - RoomInsights: SectionHeader drops textTransform/letterSpacing/opacity; chart borderRadius → config tokens; remove raw fontSize:9; warning banner → SequenceCard - RoomProfile.tsx: formatting toolbar raw <button> → folds <Button>; topic read-mode renders formatted_body via sanitizeCustomHtml - MsgTypeRenderers: location Open button Chip→Button; opacity:0.65→priority - UploadCardRenderer: caption raw <input> → folds <Input> - VoiceMessageRecorder: replace undefined --bg-surface-variant/--tc-* vars with color.* tokens; replace bare <audio controls> with IconButton play/pause toggle - App.tsx: mention highlight uses WCAG 2.1 relative luminance (gamma linearization) instead of simplified approximation; border now rgba semi-transparent instead of same color as background - RoomNavItem: Mute MenuItem icon moved to before prop - SearchFilters: HasLink chip variant="Success" outlined to match filter bar - RoomViewHeader: Server Notice chip radii Pill→300; fix jotai import order - Fix ESLint import/order errors in DeviceVerificationSetup, RoomTopicViewer, MediaGallery, and RoomViewHeader Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
61 lines
2.0 KiB
TypeScript
61 lines
2.0 KiB
TypeScript
import React from 'react';
|
|
import parse from 'html-react-parser';
|
|
import { as, Box, Header, Icon, IconButton, Icons, Modal, Scroll, Text } from 'folds';
|
|
import classNames from 'classnames';
|
|
import Linkify from 'linkify-react';
|
|
import { useModalStyle } from '../../hooks/useModalStyle';
|
|
import * as css from './style.css';
|
|
import { LINKIFY_OPTS, scaleSystemEmoji } from '../../plugins/react-custom-html-parser';
|
|
import { sanitizeCustomHtml } from '../../utils/sanitize';
|
|
import { RoomTopicContent } from '../../hooks/useRoomMeta';
|
|
|
|
export const RoomTopicViewer = as<
|
|
'div',
|
|
{
|
|
name: string;
|
|
topic: string | RoomTopicContent;
|
|
requestClose: () => void;
|
|
}
|
|
>(({ name, topic, requestClose, className, ...props }, ref) => {
|
|
const topicStr = typeof topic === 'string' ? topic : topic.topic;
|
|
const modalStyle = useModalStyle(480);
|
|
const isFormatted =
|
|
typeof topic !== 'string' &&
|
|
topic.format === 'org.matrix.custom.html' &&
|
|
typeof topic.formatted_body === 'string';
|
|
|
|
return (
|
|
<Modal
|
|
size="300"
|
|
flexHeight
|
|
className={classNames(css.ModalFlex, className)}
|
|
aria-labelledby="room-topic-title"
|
|
style={modalStyle}
|
|
{...props}
|
|
ref={ref}
|
|
>
|
|
<Header className={css.ModalHeader} variant="Surface" size="500">
|
|
<Box grow="Yes">
|
|
<Text as="h2" size="H4" truncate id="room-topic-title">
|
|
{name}
|
|
</Text>
|
|
</Box>
|
|
<IconButton size="300" onClick={requestClose} radii="300" aria-label="Close">
|
|
<Icon src={Icons.Cross} />
|
|
</IconButton>
|
|
</Header>
|
|
<Scroll className={css.ModalScroll} size="300" hideTrack>
|
|
<Box className={css.ModalContent} direction="Column" gap="100">
|
|
<Text size="T300" className={css.ModalTopic} priority="400">
|
|
{isFormatted ? (
|
|
parse(sanitizeCustomHtml((topic as RoomTopicContent).formatted_body!))
|
|
) : (
|
|
<Linkify options={LINKIFY_OPTS}>{scaleSystemEmoji(topicStr)}</Linkify>
|
|
)}
|
|
</Text>
|
|
</Box>
|
|
</Scroll>
|
|
</Modal>
|
|
);
|
|
});
|