Merge pull request 'fix(rooms): "Rename for me" names in search results, inbox and threads (#336)' (#364) from fix/local-room-names-rest into lotus

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

@@ -43,6 +43,7 @@ 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 },
@@ -137,14 +138,19 @@ 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) => mx.getRoom(rId)?.name ?? rId,
-    [mx],
+    (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],
   );
 
   const [searchResult, _searchRoom, resetSearch] = useAsyncSearch(
@@ -292,7 +298,7 @@ function SelectRoomButton({ roomList, selectedRooms, onChange }: SelectRoomButto
                             }
                           >
                             <Text truncate size="T300">
-                              {room.name}
+                              {localNames[room.roomId] ?? room.name}
                             </Text>
                           </MenuItem>
                         </VirtualTile>
@@ -701,6 +707,7 @@ export function SearchFilters({
   pinnedOnly,
   onTogglePinnedOnly,
 }: SearchFiltersProps) {
+  const localNames = useLocalRoomNames();
   const mx = useMatrixClient();
 
   return (
@@ -748,7 +755,7 @@ export function SearchFilters({
               }
               after={<Icon size="50" src={Icons.Cross} />}
             >
-              <Text size="T200">{room.name}</Text>
+              <Text size="T200">{localNames[room.roomId] ?? room.name}</Text>
             </Chip>
           );
         })}

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

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

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

@@ -32,6 +32,7 @@ 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;
@@ -39,6 +40,7 @@ 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
@@ -55,7 +57,7 @@ function ThreadPanelHeader({ room, threadId, requestClose }: ThreadPanelHeaderPr
             Thread
           </Text>
           <Text size="T200" truncate style={{ opacity: 0.65 }}>
-            {room.name}
+            {localNames[room.roomId] ?? room.name}
             {startedBy && root && ` · started by ${startedBy}, ${format(root.getTs())}`}
           </Text>
         </Box>

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

@@ -48,6 +48,7 @@ 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.
@@ -235,6 +236,7 @@ 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(
@@ -361,7 +363,7 @@ export function ThreadsListPanel({ room, onClose, onOpenThread }: ThreadsListPan
               Threads
             </Text>
             <Text size="T200" truncate style={{ opacity: 0.65 }}>
-              {room.name}
+              {localNames[room.roomId] ?? room.name}
             </Text>
           </Box>
           {totalUnread > 0 && (

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

@@ -98,6 +98,7 @@ 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;
@@ -223,6 +224,7 @@ function RoomNotificationsGroupComp({
   hour24Clock,
   dateFormatString,
 }: RoomNotificationsGroupProps) {
+  const localNames = useLocalRoomNames();
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
   const unread = useRoomUnread(room.roomId, roomToUnreadAtom);
@@ -428,7 +430,7 @@ function RoomNotificationsGroupComp({
             />
           </Avatar>
           <Text size="H4" truncate>
-            {room.name}
+            {localNames[room.roomId] ?? room.name}
           </Text>
         </Box>
         <Box shrink="No">