LotusGuild/cinny
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: personal room name overrides (MSC4431-style)

Browse Source 
Users can right-click any room and 'Rename for me...' to set a local
display name visible only to them. Stored in account data under
io.lotus.room_names. Shows a pencil indicator on renamed rooms.
useLocalRoomName() hook overrides useRoomName() when a local name exists.

Also includes:
- Rich room topic rendering via RoomTopicContent object (formatted_body
  support in RoomTopicViewer with HTML sanitization via sanitizeCustomHtml)
- Edit history viewer: clicking '(edited)' on a message opens a modal
  showing all prior versions with timestamps (EditHistoryModal.tsx)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Jared Vititoe
2026-06-01 17:21:11 -04:00
parent 6135db3405
commit 683159bed8
13 changed files with 581 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+6
View File
@@ -73,6 +73,8 @@ A full custom theme engine layered on top of Cinny's vanilla-extract theming:
### Messaging Enhancements
- **Rich room topics**: Room topics that contain formatted text (bold, links, italic) are now rendered with full HTML formatting. Falls back to plain text if no `formatted_body` is present. Activates when any room admin sets a formatted topic.
- **Edit history viewer**: Clicking the "edited" label on any edited message opens a modal showing every prior version with timestamps. Fetches all `m.replace` relations for the event and displays them oldest-to-newest. Previously the "edited" label was visible but unclickable.
- **GIF picker**: Giphy-powered GIF search and send. Button appears in the message composer only when `gifApiKey` is set in `config.json`. Sends GIF as `m.image` — fetches blob, uploads via `mx.uploadContent`, sends with `mx.sendMessage`. `FocusTrap` handles click-outside / Escape to close. When TDS is active: dark navy background (`#060c14`), orange dim border, `// GIF_SEARCH` header, CSS overrides for Giphy SDK search bar (dark bg, orange border/focus ring, JetBrains Mono), custom orange scrollbar. All TDS styles live in `lotus-terminal.css.ts` — no runtime `<style>` injection, eliminating flash of unstyled content.
- **Message forwarding**: Forward any message to any room from the message context menu.
- **Draft persistence**: Unsent message drafts survive page reload via `localStorage` (`draft-msg-<roomId>`). Jotai in-memory atom is primary; localStorage is used as fallback on reload and cleared on send.
@@ -81,6 +83,10 @@ A full custom theme engine layered on top of Cinny's vanilla-extract theming:
- **Location sharing**: Map embed view for incoming location events + static share button. Renders `m.location` events inline with a map tile.
- **Deleted message placeholders**: Redacted `m.room.message`, `m.room.encrypted`, and `m.sticker` events render as "This message has been deleted" with reason (if provided) rather than disappearing. One-line change in the `eventRenderer` filter in `RoomTimeline.tsx`.
### Room Customization
- **Personal room name overrides**: Right-click any room in the sidebar → "Rename for me…" to set a local display name visible only to you. Other members see the original name unchanged. A small pencil icon marks rooms with a custom local name. Stored in Matrix account data (`io.lotus.room_names`). Uses `io.lotus.room_names` account data key (based on MSC4431).
### Per-Message Read Receipts
Full per-message read receipt system — shows who has read each message directly in the timeline.
src/app/components/RenderMessageContent.tsx
+6
View File
@@ -38,6 +38,7 @@ type RenderMessageContentProps = {
msgType: string;
ts: number;
edited?: boolean;
onEditHistoryClick?: () => void;
getContent: <T>() => T;
mediaAutoLoad?: boolean;
urlPreview?: boolean;
@@ -51,6 +52,7 @@ export function RenderMessageContent({
msgType,
ts,
edited,
onEditHistoryClick,
getContent,
mediaAutoLoad,
urlPreview,
@@ -77,6 +79,7 @@ export function RenderMessageContent({
<MText
style={{ marginTop: config.space.S200 }}
edited={edited}
onEditHistoryClick={onEditHistoryClick}
content={content}
renderBody={(props) => (
<RenderBody
@@ -133,6 +136,7 @@ export function RenderMessageContent({
return (
<MText
edited={edited}
onEditHistoryClick={onEditHistoryClick}
content={getContent()}
renderBody={(props) => (
<RenderBody
@@ -152,6 +156,7 @@ export function RenderMessageContent({
<MEmote
displayName={displayName}
edited={edited}
onEditHistoryClick={onEditHistoryClick}
content={getContent()}
renderBody={(props) => (
<RenderBody
@@ -170,6 +175,7 @@ export function RenderMessageContent({
return (
<MNotice
edited={edited}
onEditHistoryClick={onEditHistoryClick}
content={getContent()}
renderBody={(props) => (
<RenderBody
src/app/components/message/MsgTypeRenderers.tsx
+22 -5
View File
@@ -80,12 +80,20 @@ type RenderBodyProps = {
};
type MTextProps = {
edited?: boolean;
onEditHistoryClick?: () => void;
content: Record<string, unknown>;
renderBody: (props: RenderBodyProps) => ReactNode;
renderUrlsPreview?: (urls: string[]) => ReactNode;
style?: CSSProperties;
};
export function MText({ edited, content, renderBody, renderUrlsPreview, style }: MTextProps) {
export function MText({
edited,
onEditHistoryClick,
content,
renderBody,
renderUrlsPreview,
style,
}: MTextProps) {
const { body, formatted_body: customBody } = content;
if (typeof body !== 'string') return <BrokenContent />;
@@ -104,7 +112,7 @@ export function MText({ edited, content, renderBody, renderUrlsPreview, style }:
body: trimmedBody,
customBody: typeof customBody === 'string' ? customBody : undefined,
})}
{edited && <MessageEditedContent />}
{edited && <MessageEditedContent onEditHistoryClick={onEditHistoryClick} />}
</MessageTextBody>
{renderUrlsPreview && urls && urls.length > 0 && renderUrlsPreview(urls)}
</>
@@ -114,6 +122,7 @@ export function MText({ edited, content, renderBody, renderUrlsPreview, style }:
type MEmoteProps = {
displayName: string;
edited?: boolean;
onEditHistoryClick?: () => void;
content: Record<string, unknown>;
renderBody: (props: RenderBodyProps) => ReactNode;
renderUrlsPreview?: (urls: string[]) => ReactNode;
@@ -121,6 +130,7 @@ type MEmoteProps = {
export function MEmote({
displayName,
edited,
onEditHistoryClick,
content,
renderBody,
renderUrlsPreview,
@@ -144,7 +154,7 @@ export function MEmote({
body: trimmedBody,
customBody: typeof customBody === 'string' ? customBody : undefined,
})}
{edited && <MessageEditedContent />}
{edited && <MessageEditedContent onEditHistoryClick={onEditHistoryClick} />}
</MessageTextBody>
{renderUrlsPreview && urls && urls.length > 0 && renderUrlsPreview(urls)}
</>
@@ -153,11 +163,18 @@ export function MEmote({
type MNoticeProps = {
edited?: boolean;
onEditHistoryClick?: () => void;
content: Record<string, unknown>;
renderBody: (props: RenderBodyProps) => ReactNode;
renderUrlsPreview?: (urls: string[]) => ReactNode;
};
export function MNotice({ edited, content, renderBody, renderUrlsPreview }: MNoticeProps) {
export function MNotice({
edited,
onEditHistoryClick,
content,
renderBody,
renderUrlsPreview,
}: MNoticeProps) {
const { body, formatted_body: customBody } = content;
if (typeof body !== 'string') return <BrokenContent />;
@@ -176,7 +193,7 @@ export function MNotice({ edited, content, renderBody, renderUrlsPreview }: MNot
body: trimmedBody,
customBody: typeof customBody === 'string' ? customBody : undefined,
})}
{edited && <MessageEditedContent />}
{edited && <MessageEditedContent onEditHistoryClick={onEditHistoryClick} />}
</MessageTextBody>
{renderUrlsPreview && urls && urls.length > 0 && renderUrlsPreview(urls)}
</>
src/app/components/message/content/FallbackContent.tsx
+22 -5
View File
@@ -66,8 +66,25 @@ export const MessageVerificationRequestContent = as<'div', { children?: never }>
),
);
export const MessageEditedContent = as<'span', { children?: never }>(({ ...props }, ref) => (
<Text as="span" size="T200" priority="300" {...props} ref={ref}>
{' (edited)'}
</Text>
));
export const MessageEditedContent = as<
'span',
{ children?: never; onEditHistoryClick?: () => void }
>(({ onEditHistoryClick, ...props }, ref) =>
onEditHistoryClick ? (
<span ref={ref} {...(props as React.HTMLAttributes<HTMLSpanElement>)}>
<button
type="button"
onClick={onEditHistoryClick}
style={{ cursor: 'pointer', background: 'none', border: 'none', padding: 0 }}
>
<Text as="span" size="T200" priority="300">
{' (edited)'}
</Text>
</button>
</span>
) : (
<Text as="span" size="T200" priority="300" {...props} ref={ref}>
{' (edited)'}
</Text>
),
);
src/app/components/room-intro/RoomIntro.tsx
+1 -1
View File
@@ -66,7 +66,7 @@ export const RoomIntro = as<'div', RoomIntroProps>(({ room, ...props }, ref) =>
{name}
</Text>
<Text size="T400" priority="400">
{typeof topic === 'string' ? topic : 'This is the beginning of conversation.'}
{topic?.topic ?? 'This is the beginning of conversation.'}
</Text>
{creatorName && ts && (
<Text size="T200" priority="300">
src/app/components/room-topic-viewer/RoomTopicViewer.tsx
+45 -29
View File
@@ -1,42 +1,58 @@
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 * 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;
topic: string | RoomTopicContent;
requestClose: () => void;
}
>(({ name, topic, requestClose, className, ...props }, ref) => (
<Modal
size="300"
flexHeight
className={classNames(css.ModalFlex, className)}
aria-labelledby="room-topic-title"
{...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">
<Linkify options={LINKIFY_OPTS}>{scaleSystemEmoji(topic)}</Linkify>
</Text>
</Box>
</Scroll>
</Modal>
));
>(({ name, topic, requestClose, className, ...props }, ref) => {
const topicStr = typeof topic === 'string' ? topic : topic.topic;
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"
{...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 ? (
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
parse(sanitizeCustomHtml((topic as RoomTopicContent).formatted_body!))
) : (
<Linkify options={LINKIFY_OPTS}>{scaleSystemEmoji(topicStr)}</Linkify>
)}
</Text>
</Box>
</Scroll>
</Modal>
);
});
src/app/features/common-settings/general/RoomProfile.tsx
+2 -2
View File
@@ -303,7 +303,7 @@ export function RoomProfile({ permissions }: RoomProfileProps) {
canEditTopic={canEditTopic}
avatar={avatar}
name={name ?? ''}
topic={topic ?? ''}
topic={topic?.topic ?? ''}
onClose={handleCloseEdit}
/>
) : (
@@ -315,7 +315,7 @@ export function RoomProfile({ permissions }: RoomProfileProps) {
</Text>
{topic && (
<Text className={classNames(BreakWord, LineClamp3)} size="T200">
<Linkify options={LINKIFY_OPTS}>{topic}</Linkify>
<Linkify options={LINKIFY_OPTS}>{topic.topic}</Linkify>
</Text>
)}
</Box>
src/app/features/lobby/LobbyHero.tsx
+1 -1
View File
@@ -71,7 +71,7 @@ export function LobbyHero() {
size="Inherit"
priority="300"
>
{topic}
{topic.topic}
</Text>
</>
)}
src/app/features/room-nav/RoomNavItem.tsx
+179 -4
View File
@@ -1,14 +1,21 @@
import React, { MouseEventHandler, forwardRef, useState } from 'react';
import React, { MouseEventHandler, forwardRef, useCallback, useRef, useState } from 'react';
import { Room } from 'matrix-js-sdk';
import {
Avatar,
Box,
Button,
Dialog,
Header,
Icon,
IconButton,
Icons,
Input,
Text,
Menu,
MenuItem,
Overlay,
OverlayBackdrop,
OverlayCenter,
config,
PopOut,
toRem,
@@ -52,7 +59,12 @@ import { RoomNotificationModeSwitcher } from '../../components/RoomNotificationS
import { getRoomCreatorsForRoomId, useRoomCreators } from '../../hooks/useRoomCreators';
import { getRoomPermissionsAPI, useRoomPermissions } from '../../hooks/useRoomPermissions';
import { InviteUserPrompt } from '../../components/invite-user-prompt';
import { useRoomName } from '../../hooks/useRoomMeta';
import {
LOCAL_ROOM_NAMES_KEY,
LocalRoomNamesContent,
useHasLocalRoomName,
useLocalRoomName,
} from '../../hooks/useRoomMeta';
import { useCallMembers, useCallSession } from '../../hooks/useCall';
import { useCallEmbed, useCallStart } from '../../hooks/useCallEmbed';
import { callChatAtom } from '../../state/callEmbed';
@@ -62,6 +74,139 @@ import { livekitSupport } from '../../hooks/useLivekitSupport';
import { StateEvent } from '../../../types/matrix/room';
import { webRTCSupported } from '../../utils/rtc';
type RenameRoomDialogProps = {
room: Room;
onClose: () => void;
};
function RenameRoomDialog({ room, onClose }: RenameRoomDialogProps) {
const mx = useMatrixClient();
const inputRef = useRef<HTMLInputElement>(null);
const getExistingContent = useCallback((): LocalRoomNamesContent => {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const raw: unknown = (mx as any).getAccountData(LOCAL_ROOM_NAMES_KEY)?.getContent();
if (
raw &&
typeof raw === 'object' &&
'rooms' in raw &&
// eslint-disable-next-line @typescript-eslint/no-explicit-any
typeof (raw as any).rooms === 'object'
) {
return raw as LocalRoomNamesContent;
}
return { rooms: {} };
}, [mx]);
const getCurrentLocalName = useCallback((): string => {
const content = getExistingContent();
return content.rooms[room.roomId] ?? '';
}, [getExistingContent, room.roomId]);
const handleSave = useCallback(() => {
const newName = inputRef.current?.value.trim() ?? '';
const existing = getExistingContent();
if (newName === '') {
const { [room.roomId]: _removed, ...rest } = existing.rooms;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
(mx as any).setAccountData(LOCAL_ROOM_NAMES_KEY, { rooms: rest });
} else {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
(mx as any).setAccountData(LOCAL_ROOM_NAMES_KEY, {
rooms: { ...existing.rooms, [room.roomId]: newName },
});
}
onClose();
}, [mx, room.roomId, getExistingContent, onClose]);
const handleClear = useCallback(() => {
const existing = getExistingContent();
const { [room.roomId]: _removed, ...rest } = existing.rooms;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
(mx as any).setAccountData(LOCAL_ROOM_NAMES_KEY, { rooms: rest });
onClose();
}, [mx, room.roomId, getExistingContent, onClose]);
const handleKeyDown = (evt: React.KeyboardEvent<HTMLInputElement>) => {
if (evt.key === 'Enter') handleSave();
if (evt.key === 'Escape') onClose();
};
return (
<Overlay open backdrop={<OverlayBackdrop />}>
<OverlayCenter>
<FocusTrap
focusTrapOptions={{
initialFocus: false,
onDeactivate: onClose,
clickOutsideDeactivates: true,
escapeDeactivates: stopPropagation,
}}
>
<Dialog variant="Surface" aria-labelledby="rename-room-dialog-title">
<Header
style={{
padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
borderBottomWidth: config.borderWidth.B300,
}}
variant="Surface"
size="500"
>
<Box grow="Yes">
<Text as="h2" size="H4" id="rename-room-dialog-title">
Rename room (for you only)
</Text>
</Box>
<IconButton size="300" onClick={onClose} radii="300" aria-label="Cancel">
<Icon src={Icons.Cross} />
</IconButton>
</Header>
<Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
<Box direction="Column" gap="200">
<Text size="L400">Custom name</Text>
<Input
ref={inputRef}
defaultValue={getCurrentLocalName()}
placeholder={room.name}
variant="Secondary"
radii="300"
onKeyDown={handleKeyDown}
autoFocus
/>
<Text size="T300" priority="300">
Only visible to you. Leave blank to use the original name.
</Text>
</Box>
<Box gap="300">
<Box grow="Yes">
<Button
onClick={handleClear}
variant="Secondary"
fill="Soft"
radii="300"
style={{ width: '100%' }}
>
<Text size="B400">Clear</Text>
</Button>
</Box>
<Box grow="Yes">
<Button
onClick={handleSave}
variant="Primary"
radii="300"
style={{ width: '100%' }}
>
<Text size="B400">Save</Text>
</Button>
</Box>
</Box>
</Box>
</Dialog>
</FocusTrap>
</OverlayCenter>
</Overlay>
);
}
type RoomNavItemMenuProps = {
room: Room;
requestClose: () => void;
@@ -81,6 +226,7 @@ const RoomNavItemMenu = forwardRef<HTMLDivElement, RoomNavItemMenuProps>(
const space = useSpaceOptionally();
const [invitePrompt, setInvitePrompt] = useState(false);
const [renameDialog, setRenameDialog] = useState(false);
const handleMarkAsRead = () => {
markAsRead(mx, room.roomId, hideActivity);
@@ -114,6 +260,15 @@ const RoomNavItemMenu = forwardRef<HTMLDivElement, RoomNavItemMenuProps>(
}}
/>
)}
{renameDialog && (
<RenameRoomDialog
room={room}
onClose={() => {
setRenameDialog(false);
requestClose();
}}
/>
)}
<Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
<MenuItem
onClick={handleMarkAsRead}
@@ -174,6 +329,17 @@ const RoomNavItemMenu = forwardRef<HTMLDivElement, RoomNavItemMenuProps>(
Copy Link
</Text>
</MenuItem>
<MenuItem
onClick={() => setRenameDialog(true)}
size="300"
after={<Icon size="100" src={Icons.Pencil} />}
radii="300"
aria-pressed={renameDialog}
>
<Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
Rename for me…
</Text>
</MenuItem>
<MenuItem
onClick={handleRoomSettings}
size="300"
@@ -264,7 +430,8 @@ function RoomNavItem_({
(receipt) => receipt.userId !== mx.getUserId(),
);
const roomName = useRoomName(room);
const roomName = useLocalRoomName(room);
const hasLocalName = useHasLocalRoomName(room.roomId);
const handleContextMenu: MouseEventHandler<HTMLElement> = (evt) => {
evt.preventDefault();
@@ -357,10 +524,18 @@ function RoomNavItem_({
/>
)}
</Avatar>
<Box as="span" grow="Yes">
<Box as="span" grow="Yes" alignItems="Center" gap="100">
<Text priority={unread ? '500' : '300'} as="span" size="Inherit" truncate>
{roomName}
</Text>
{hasLocalName && (
<Icon
size="50"
src={Icons.Pencil}
aria-label="Custom local name"
style={{ opacity: 0.6, flexShrink: 0 }}
/>
)}
</Box>
{!optionsVisible && !unread && !selected && typingMember.length > 0 && (
<Badge size="300" variant="Secondary" fill="Soft" radii="Pill" outlined>
src/app/features/room/RoomTimeline.tsx
+15
View File
@@ -128,6 +128,7 @@ import { useAccessiblePowerTagColors, useGetMemberPowerTag } from '../../hooks/u
import { useTheme } from '../../hooks/useTheme';
import { useRoomCreatorsTag } from '../../hooks/useRoomCreatorsTag';
import { usePowerLevelTags } from '../../hooks/usePowerLevelTags';
import { EditHistoryModal } from './message/EditHistoryModal';
const TimelineFloat = as<'div', css.TimelineFloatVariants>(
({ position, className, ...props }, ref) => (
@@ -480,6 +481,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
const canSendReaction = permissions.event(MessageEvent.Reaction, mx.getSafeUserId());
const canPinEvent = permissions.stateEvent(StateEvent.RoomPinnedEvents, mx.getSafeUserId());
const [editId, setEditId] = useState<string>();
const [editHistoryEvent, setEditHistoryEvent] = useState<MatrixEvent | undefined>();
const roomToParents = useAtomValue(roomToParentsAtom);
const unread = useRoomUnread(room.roomId, roomToUnreadAtom);
@@ -1123,6 +1125,9 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
msgType={mEvent.getContent().msgtype ?? ''}
ts={mEvent.getTs()}
edited={!!editedEvent}
onEditHistoryClick={
editedEvent ? () => setEditHistoryEvent(mEvent) : undefined
}
getContent={getContent}
mediaAutoLoad={mediaAutoLoad}
urlPreview={showUrlPreview}
@@ -1229,6 +1234,9 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
msgType={mEvent.getContent().msgtype ?? ''}
ts={mEvent.getTs()}
edited={!!editedEvent}
onEditHistoryClick={
editedEvent ? () => setEditHistoryEvent(mEvent) : undefined
}
getContent={getContent}
mediaAutoLoad={mediaAutoLoad}
urlPreview={showUrlPreview}
@@ -2191,6 +2199,13 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
</TimelineFloat>
)}
</Box>
{editHistoryEvent && (
<EditHistoryModal
room={room}
mEvent={editHistoryEvent}
onClose={() => setEditHistoryEvent(undefined)}
/>
)}
</ReadPositionsContext.Provider>
);
}
src/app/features/room/RoomViewHeader.tsx
+1 -1
View File
@@ -544,7 +544,7 @@ export function RoomViewHeader({ callView }: { callView?: boolean }) {
priority="300"
truncate
>
{topic}
{topic.topic}
</Text>
</>
)}
src/app/features/room/message/EditHistoryModal.tsx
+186
View File
@@ -0,0 +1,186 @@
import React, { useCallback, useEffect } from 'react';
import FocusTrap from 'focus-trap-react';
import {
Box,
Header,
Icon,
IconButton,
Icons,
Modal,
Overlay,
OverlayBackdrop,
OverlayCenter,
Scroll,
Spinner,
Text,
} from 'folds';
import { MatrixEvent, Method, Room } from 'matrix-js-sdk';
import { useMatrixClient } from '../../../hooks/useMatrixClient';
import { stopPropagation } from '../../../utils/keyboard';
import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
import { timeDayMonYear, timeHourMinute } from '../../../utils/time';
import { useSetting } from '../../../state/hooks/settings';
import { settingsAtom } from '../../../state/settings';
type EditHistoryResponse = {
chunk: Array<Record<string, unknown>>;
next_batch?: string;
};
type EditHistoryModalProps = {
room: Room;
mEvent: MatrixEvent;
onClose: () => void;
};
export function EditHistoryModal({ room, mEvent, onClose }: EditHistoryModalProps) {
const mx = useMatrixClient();
const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');
const eventId = mEvent.getId();
const roomId = room.roomId;
const [historyState, fetchHistory] = useAsyncCallback<MatrixEvent[], unknown, []>(
useCallback(async () => {
const path = `/rooms/${encodeURIComponent(roomId)}/relations/${encodeURIComponent(eventId ?? '')}/m.replace`;
const res = await mx.http.authedRequest<EditHistoryResponse>(Method.Get, path, {
limit: '50',
});
const rawEvents = res.chunk ?? [];
// Sort oldest first
const events = rawEvents
.map((raw) => {
// Build a lightweight representation for display; we just need content + ts
return raw as { type: string; content: Record<string, unknown>; origin_server_ts: number; event_id: string };
})
.sort((a, b) => a.origin_server_ts - b.origin_server_ts);
// Convert to MatrixEvent-like objects using the raw data
// We use MatrixEvent if available from the timeline, otherwise parse the raw data
return events.map((raw) => {
const existing = room.findEventById(raw.event_id);
if (existing) return existing;
// Create a minimal event wrapper
const evt = new MatrixEvent({
type: raw.type,
content: raw.content,
origin_server_ts: raw.origin_server_ts,
event_id: raw.event_id,
room_id: roomId,
sender: mEvent.getSender() ?? '',
});
return evt;
});
}, [mx, roomId, eventId, room, mEvent]),
);
useEffect(() => {
fetchHistory();
}, [fetchHistory]);
const formatTs = (ts: number): string => {
const time = timeHourMinute(ts, hour24Clock);
const date = timeDayMonYear(ts, dateFormatString);
return `${date} at ${time}`;
};
const getVersionBody = (evt: MatrixEvent): string => {
const content = evt.getContent();
const newContent = content['m.new_content'] as Record<string, unknown> | undefined;
const body = newContent?.body ?? content.body;
return typeof body === 'string' ? body : '(no text)';
};
// The original message body (before any edits)
const originalBody = (() => {
const content = mEvent.getContent();
const body = content.body;
return typeof body === 'string' ? body : '(no text)';
})();
const originalTs = mEvent.getTs();
return (
<Overlay open backdrop={<OverlayBackdrop />}>
<OverlayCenter>
<FocusTrap
focusTrapOptions={{
initialFocus: false,
clickOutsideDeactivates: true,
onDeactivate: onClose,
escapeDeactivates: stopPropagation,
}}
>
<Modal variant="Surface" size="500">
<Header variant="Surface" size="500" style={{ padding: '0 var(--mx-spacing-s200) 0 var(--mx-spacing-s400)' }}>
<Box grow="Yes">
<Text as="h2" size="H4" truncate>
Edit History
</Text>
</Box>
<IconButton size="300" onClick={onClose} radii="300" aria-label="Close">
<Icon src={Icons.Cross} />
</IconButton>
</Header>
<Scroll size="300" hideTrack style={{ maxHeight: '60vh' }}>
<Box direction="Column" gap="200" style={{ padding: 'var(--mx-spacing-s400)', paddingBottom: 'var(--mx-spacing-s700)' }}>
{historyState.status === AsyncStatus.Loading && (
<Box justifyContent="Center" alignItems="Center" style={{ padding: 'var(--mx-spacing-s400)' }}>
<Spinner size="200" />
</Box>
)}
{historyState.status === AsyncStatus.Error && (
<Text size="T300" priority="300">
Failed to load edit history.
</Text>
)}
{historyState.status === AsyncStatus.Success && (
<Box direction="Column" gap="300">
{/* Original message always shown first */}
<Box direction="Column" gap="100">
<Box gap="200" alignItems="Center">
<Text size="L400">Original</Text>
<Text size="T200" priority="300">
{formatTs(originalTs)}
</Text>
</Box>
<Text size="T300" style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>
{originalBody}
</Text>
</Box>
{historyState.data.map((editEvt, index) => (
<Box key={editEvt.getId() ?? index} direction="Column" gap="100">
<Box gap="200" alignItems="Center">
<Text size="L400">
{index === historyState.data.length - 1
? `Edit ${index + 1} (current)`
: `Edit ${index + 1}`}
</Text>
<Text size="T200" priority="300">
{formatTs(editEvt.getTs())}
</Text>
</Box>
<Text size="T300" style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>
{getVersionBody(editEvt)}
</Text>
</Box>
))}
{historyState.data.length === 0 && (
<Text size="T300" priority="300">
No edit history found.
</Text>
)}
</Box>
)}
</Box>
</Scroll>
</Modal>
</FocusTrap>
</OverlayCenter>
</Overlay>
);
}
src/app/hooks/useRoomMeta.ts
+95 -5
View File
@@ -1,8 +1,9 @@
import { useEffect, useState } from 'react';
import { useCallback, useEffect, useState } from 'react';
import { RoomJoinRulesEventContent } from 'matrix-js-sdk/lib/types';
import { Room, RoomEvent, RoomEventHandlerMap } from 'matrix-js-sdk';
import { ClientEvent, MatrixEvent, Room, RoomEvent, RoomEventHandlerMap } from 'matrix-js-sdk';
import { StateEvent } from '../../types/matrix/room';
import { useStateEvent } from './useStateEvent';
import { useMatrixClient } from './useMatrixClient';
export const useRoomAvatar = (room: Room, dm?: boolean): string | undefined => {
const avatarEvent = useStateEvent(room, StateEvent.RoomAvatar);
@@ -34,13 +35,102 @@ export const useRoomName = (room: Room): string => {
return name;
};
export const useRoomTopic = (room: Room): string | undefined => {
export const LOCAL_ROOM_NAMES_KEY = 'io.lotus.room_names';
export type LocalRoomNamesContent = { rooms: Record<string, string> };
function getLocalRoomNamesContent(mx: ReturnType<typeof useMatrixClient>): LocalRoomNamesContent {
// Use any-cast because LOCAL_ROOM_NAMES_KEY is not in matrix-js-sdk AccountDataEvents
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const raw: unknown = (mx as any).getAccountData(LOCAL_ROOM_NAMES_KEY)?.getContent();
if (
raw &&
typeof raw === 'object' &&
'rooms' in raw &&
// eslint-disable-next-line @typescript-eslint/no-explicit-any
typeof (raw as any).rooms === 'object'
) {
return raw as LocalRoomNamesContent;
}
return { rooms: {} };
}
export const useLocalRoomName = (room: Room): string => {
const mx = useMatrixClient();
const getLocalName = useCallback((): string => {
const content = getLocalRoomNamesContent(mx);
return content.rooms[room.roomId] ?? room.name;
}, [mx, room]);
const [name, setName] = useState(getLocalName);
useEffect(() => {
setName(getLocalName());
const handleAccountData = (event: MatrixEvent) => {
if (event.getType() !== LOCAL_ROOM_NAMES_KEY) return;
setName(getLocalName());
};
mx.on(ClientEvent.AccountData, handleAccountData);
const handleRoomNameChange: RoomEventHandlerMap[RoomEvent.Name] = () => {
setName(getLocalName());
};
room.on(RoomEvent.Name, handleRoomNameChange);
return () => {
mx.removeListener(ClientEvent.AccountData, handleAccountData);
room.removeListener(RoomEvent.Name, handleRoomNameChange);
};
}, [mx, room, getLocalName]);
return name;
};
export const useHasLocalRoomName = (roomId: string): boolean => {
const mx = useMatrixClient();
const check = useCallback((): boolean => {
const content = getLocalRoomNamesContent(mx);
return !!content.rooms[roomId];
}, [mx, roomId]);
const [hasLocal, setHasLocal] = useState(check);
useEffect(() => {
setHasLocal(check());
const handleAccountData = (event: MatrixEvent) => {
if (event.getType() !== LOCAL_ROOM_NAMES_KEY) return;
setHasLocal(check());
};
mx.on(ClientEvent.AccountData, handleAccountData);
return () => {
mx.removeListener(ClientEvent.AccountData, handleAccountData);
};
}, [mx, check]);
return hasLocal;
};
export type RoomTopicContent = {
topic: string;
formatted_body?: string;
format?: string;
};
export const useRoomTopic = (room: Room): RoomTopicContent | undefined => {
const topicEvent = useStateEvent(room, StateEvent.RoomTopic);
const content = topicEvent?.getContent();
const topic = content && typeof content.topic === 'string' ? content.topic : undefined;
if (!content || typeof content.topic !== 'string') return undefined;
return topic;
return {
topic: content.topic,
formatted_body: typeof content.formatted_body === 'string' ? content.formatted_body : undefined,
format: typeof content.format === 'string' ? content.format : undefined,
};
};
export const useRoomJoinRule = (room: Room): RoomJoinRulesEventContent | undefined => {