feat: personal room name overrides (MSC4431-style)

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>

src/app/components/RenderMessageContent.tsx

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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>
+  );
+});