fix(messages): the delivery indicator updates when a send completes (#306)

DeliveryStatus showed whatever mEvent.status was at the last timeline
re-render, and a local echo's status changes (SENDING → SENT → confirmed,
NOT_SENT → retried) only emit event-level events, so the last message in
a quiet room kept "Sending..." (or a stale "Failed to send. Click to
retry" after an outbox retry) indefinitely. It now re-renders on
MatrixEventEvent.Status / LocalEventIdReplaced.

Not browser-verified in this change (checks: tsc, unit tests, eslint).

Fixes #306

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017PCb59uY3UKqDqt7B6hzd5

src/app/features/message-search/SearchFilters.tsx

@@ -43,7 +43,6 @@ import { DebounceOptions, useDebounce } from '../../hooks/useDebounce';
 import { VirtualTile } from '../../components/virtualizer';
 import { stopPropagation } from '../../utils/keyboard';
 import { MsgTypeFilter } from './useMessageSearch';
-import { useLocalRoomNames } from '../../hooks/useRoomMeta';
 
 const MSG_TYPE_FILTER_OPTIONS: { msgType: MsgTypeFilter; label: string; icon: IconSrc }[] = [
   { msgType: 'm.image', label: 'Images', icon: Icons.Photo },
@@ -138,19 +137,14 @@ type SelectRoomButtonProps = {
   onChange: (rooms?: string[]) => void;
 };
 function SelectRoomButton({ roomList, selectedRooms, onChange }: SelectRoomButtonProps) {
-  const localNames = useLocalRoomNames();
   const mx = useMatrixClient();
   const scrollRef = useRef<HTMLDivElement>(null);
   const [menuAnchor, setMenuAnchor] = useState<RectCords>();
   const [localSelected, setLocalSelected] = useState(selectedRooms);
 
   const getRoomNameStr: SearchItemStrGetter<string> = useCallback(
-    (rId) => {
-      const name = mx.getRoom(rId)?.name ?? rId;
-      // [Gitea #336] match the personal "Rename for me" name too
-      return localNames[rId] ? [localNames[rId], name] : name;
-    },
-    [mx, localNames],
+    (rId) => mx.getRoom(rId)?.name ?? rId,
+    [mx],
   );
 
   const [searchResult, _searchRoom, resetSearch] = useAsyncSearch(
@@ -298,7 +292,7 @@ function SelectRoomButton({ roomList, selectedRooms, onChange }: SelectRoomButto
                             }
                           >
                             <Text truncate size="T300">
-                              {localNames[room.roomId] ?? room.name}
+                              {room.name}
                             </Text>
                           </MenuItem>
                         </VirtualTile>
@@ -707,7 +701,6 @@ export function SearchFilters({
   pinnedOnly,
   onTogglePinnedOnly,
 }: SearchFiltersProps) {
-  const localNames = useLocalRoomNames();
   const mx = useMatrixClient();
 
   return (
@@ -755,7 +748,7 @@ export function SearchFilters({
               }
               after={<Icon size="50" src={Icons.Cross} />}
             >
-              <Text size="T200">{localNames[room.roomId] ?? room.name}</Text>
+              <Text size="T200">{room.name}</Text>
             </Chip>
           );
         })}

src/app/features/message-search/SearchResultGroup.tsx

@@ -50,7 +50,6 @@ import {
 } from '../../hooks/useMemberPowerTag';
 import { useRoomCreators } from '../../hooks/useRoomCreators';
 import { useRoomCreatorsTag } from '../../hooks/useRoomCreatorsTag';
-import { useLocalRoomNames } from '../../hooks/useRoomMeta';
 
 type SearchResultGroupProps = {
   room: Room;
@@ -74,7 +73,6 @@ export function SearchResultGroup({
   hour24Clock,
   dateFormatString,
 }: SearchResultGroupProps) {
-  const localNames = useLocalRoomNames();
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
   const highlightRegex = useMemo(() => makeHighlightRegex(highlights), [highlights]);
@@ -214,7 +212,7 @@ export function SearchResultGroup({
             />
           </Avatar>
           <Text size="H4" truncate>
-            {localNames[room.roomId] ?? room.name}
+            {room.name}
           </Text>
         </Box>
       </Header>

src/app/features/room/message/Message.tsx

@@ -31,12 +31,13 @@ import React, {
   MouseEventHandler,
   ReactNode,
   useCallback,
+  useEffect,
   useRef,
   useState,
 } from 'react';
 import FocusTrap from 'focus-trap-react';
 import { useHover, useFocusWithin } from 'react-aria';
-import { MatrixEvent, Room, EventStatus } from 'matrix-js-sdk';
+import { MatrixEvent, MatrixEventEvent, Room, EventStatus } from 'matrix-js-sdk';
 import { Relations } from 'matrix-js-sdk/lib/models/relations';
 import classNames from 'classnames';
 import { useAtom, useAtomValue } from 'jotai';
@@ -114,6 +115,20 @@ function DeliveryStatus({
 }) {
   const mx = useMatrixClient();
   const offline = useAtomValue(sendOfflineAtom);
+  // [Gitea #306] A local echo's status changes (SENDING → SENT → confirmed,
+  // NOT_SENT → retried) don't re-render the timeline, so the last message in a
+  // quiet room kept "Sending..." (or a stale "Failed to send") indefinitely.
+  // Re-render on the event's own status updates.
+  const [, setStatusTick] = useState(0);
+  useEffect(() => {
+    const bump = () => setStatusTick((t) => t + 1);
+    mEvent.on(MatrixEventEvent.Status, bump);
+    mEvent.on(MatrixEventEvent.LocalEventIdReplaced, bump);
+    return () => {
+      mEvent.off(MatrixEventEvent.Status, bump);
+      mEvent.off(MatrixEventEvent.LocalEventIdReplaced, bump);
+    };
+  }, [mEvent]);
   const { status } = mEvent;
   if (status === null) return null; // confirmed by server — read receipts take over
   let iconSrc: IconSrc;

src/app/features/room/thread/ThreadPanel.tsx

@@ -32,7 +32,6 @@ import { useThreadNotificationMode } from '../../../hooks/useThreadNotifications
 import { useTimestampFormatter } from '../../../hooks/useTimestampFormatter';
 import { getMemberName } from '../../../utils/room';
 import { ThreadNotificationMode } from '../../../utils/threadNotifications';
-import { useLocalRoomNames } from '../../../hooks/useRoomMeta';
 
 type ThreadPanelHeaderProps = {
   room: Room;
@@ -40,7 +39,6 @@ type ThreadPanelHeaderProps = {
   requestClose: () => void;
 };
 function ThreadPanelHeader({ room, threadId, requestClose }: ThreadPanelHeaderProps) {
-  const localNames = useLocalRoomNames();
   const mode = useThreadNotificationMode(room.roomId, threadId);
   const { format } = useTimestampFormatter();
   // [Gitea #165] Who started the thread and when — the first thing you want
@@ -57,7 +55,7 @@ function ThreadPanelHeader({ room, threadId, requestClose }: ThreadPanelHeaderPr
             Thread
           </Text>
           <Text size="T200" truncate style={{ opacity: 0.65 }}>
-            {localNames[room.roomId] ?? room.name}
+            {room.name}
             {startedBy && root && ` · started by ${startedBy}, ${format(root.getTs())}`}
           </Text>
         </Box>

src/app/features/room/thread/ThreadsListPanel.tsx

@@ -48,7 +48,6 @@ import { useTimestampFormatter } from '../../../hooks/useTimestampFormatter';
 import { formatRelativeAge } from '../../../utils/formatTimestamp';
 import { useRoomNavigate } from '../../../hooks/useRoomNavigate';
 import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
-import { useLocalRoomNames } from '../../../hooks/useRoomMeta';
 
 // Persisted across panel opens (the panel unmounts on close). getOnInit reads
 // localStorage synchronously so the chosen filter/sort apply on first render.
@@ -236,7 +235,6 @@ export type ThreadsListPanelProps = {
   onOpenThread: (threadId: string) => void;
 };
 export function ThreadsListPanel({ room, onClose, onOpenThread }: ThreadsListPanelProps) {
-  const localNames = useLocalRoomNames();
   const { navigateRoom } = useRoomNavigate();
   const screenSize = useScreenSizeContext();
   const handleJump = useCallback(
@@ -363,7 +361,7 @@ export function ThreadsListPanel({ room, onClose, onOpenThread }: ThreadsListPan
               Threads
             </Text>
             <Text size="T200" truncate style={{ opacity: 0.65 }}>
-              {localNames[room.roomId] ?? room.name}
+              {room.name}
             </Text>
           </Box>
           {totalUnread > 0 && (

src/app/pages/client/inbox/Notifications.tsx

@@ -98,7 +98,6 @@ import { useRoomCreatorsTag } from '../../../hooks/useRoomCreatorsTag';
 import { useRoomCreators } from '../../../hooks/useRoomCreators';
 import { PresenceRingAvatar } from '../../../components/presence';
 import { AvatarDecoration } from '../../../components/avatar-decoration/AvatarDecoration';
-import { useLocalRoomNames } from '../../../hooks/useRoomMeta';
 
 type RoomNotificationsGroup = {
   roomId: string;
@@ -224,7 +223,6 @@ function RoomNotificationsGroupComp({
   hour24Clock,
   dateFormatString,
 }: RoomNotificationsGroupProps) {
-  const localNames = useLocalRoomNames();
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
   const unread = useRoomUnread(room.roomId, roomToUnreadAtom);
@@ -430,7 +428,7 @@ function RoomNotificationsGroupComp({
             />
           </Avatar>
           <Text size="H4" truncate>
-            {localNames[room.roomId] ?? room.name}
+            {room.name}
           </Text>
         </Box>
         <Box shrink="No">