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