change room avatar fallback to room icon

src/app/components/editor/autocomplete/RoomMentionAutocomplete.tsx

@@ -1,7 +1,7 @@
 import React, { KeyboardEvent as ReactKeyboardEvent, useCallback, useEffect } from 'react';
 import { Editor } from 'slate';
 import { Avatar, Icon, Icons, MenuItem, Text } from 'folds';
-import { MatrixClient } from 'matrix-js-sdk';
+import { JoinRule, MatrixClient } from 'matrix-js-sdk';
 import { useAtomValue } from 'jotai';
 
 import { createMentionElement, moveCursor, replaceWithElement } from '../utils';
@@ -17,7 +17,6 @@ import { mDirectAtom } from '../../../state/mDirectList';
 import { allRoomsAtom } from '../../../state/room-list/roomList';
 import { factoryRoomIdByActivity } from '../../../utils/sort';
 import { RoomAvatar, RoomIcon } from '../../room-avatar';
-import { nameInitials } from '../../../utils/common';
 
 type MentionAutoCompleteHandler = (roomAliasOrId: string, name: string) => void;
 
@@ -161,7 +160,13 @@ export function RoomMentionAutocomplete({
                     <RoomAvatar
                       src={getDirectRoomAvatarUrl(mx, room)}
                       alt={room.name}
-                      renderInitials={() => <Text size="H6">{nameInitials(room.name)}</Text>}
+                      renderInitials={() => (
+                        <RoomIcon
+                          size="50"
+                          joinRule={room.getJoinRule() ?? JoinRule.Restricted}
+                          filled
+                        />
+                      )}
                     />
                   ) : (
                     <RoomIcon size="100" joinRule={room.getJoinRule()} space={room.isSpaceRoom()} />

src/app/components/room-avatar/RoomAvatar.css.ts

@@ -2,8 +2,8 @@ import { style } from '@vanilla-extract/css';
 import { color } from 'folds';
 
 export const RoomAvatar = style({
-  backgroundColor: color.Secondary.Main,
+  backgroundColor: color.Secondary.Container,
-  color: color.Secondary.OnMain,
+  color: color.Secondary.OnContainer,
   textTransform: 'capitalize',
 
   selectors: {

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

@@ -1,6 +1,6 @@
 /* eslint-disable react/destructuring-assignment */
 import React, { MouseEventHandler, useMemo } from 'react';
-import { IEventWithRoomId, RelationType, Room } from 'matrix-js-sdk';
+import { IEventWithRoomId, JoinRule, RelationType, Room } from 'matrix-js-sdk';
 import { HTMLReactParserOptions } from 'html-react-parser';
 import { Avatar, Box, Chip, Header, Icon, Icons, Text, config } from 'folds';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
@@ -26,9 +26,8 @@ import { RenderMessageContent } from '../../components/RenderMessageContent';
 import { Image } from '../../components/media';
 import { ImageViewer } from '../../components/image-viewer';
 import * as customHtmlCss from '../../styles/CustomHtml.css';
-import { RoomAvatar } from '../../components/room-avatar';
+import { RoomAvatar, RoomIcon } from '../../components/room-avatar';
 import { getMemberAvatarMxc, getMemberDisplayName, getRoomAvatarUrl } from '../../utils/room';
-import { nameInitials } from '../../utils/common';
 import colorMXID from '../../../util/colorMXID';
 import { ResultItem } from './useMessageSearch';
 import { SequenceCard } from '../../components/sequence-card';
@@ -167,9 +166,7 @@ export function SearchResultGroup({
               src={getRoomAvatarUrl(mx, room, 96)}
               alt={room.name}
               renderInitials={() => (
-                <Text as="span" size="H6">
+                <RoomIcon size="50" joinRule={room.getJoinRule() ?? JoinRule.Restricted} filled />
-                  {nameInitials(room.name)}
-                </Text>
               )}
             />
           </Avatar>

src/app/features/room/RoomViewHeader.tsx

@@ -21,13 +21,12 @@ import {
   RectCords,
 } from 'folds';
 import { useLocation, useNavigate } from 'react-router-dom';
-import { Room } from 'matrix-js-sdk';
+import { JoinRule, Room } from 'matrix-js-sdk';
 import { useAtomValue } from 'jotai';
 
 import { useStateEvent } from '../../hooks/useStateEvent';
 import { PageHeader } from '../../components/page';
-import { RoomAvatar } from '../../components/room-avatar';
+import { RoomAvatar, RoomIcon } from '../../components/room-avatar';
-import { nameInitials } from '../../utils/common';
 import { UseStateProvider } from '../../components/UseStateProvider';
 import { RoomTopicViewer } from '../../components/room-topic-viewer';
 import { StateEvent } from '../../../types/matrix/room';
@@ -215,7 +214,9 @@ export function RoomViewHeader() {
             <RoomAvatar
               src={avatarUrl}
               alt={name}
-              renderInitials={() => <Text size="H4">{nameInitials(name)}</Text>}
+              renderInitials={() => (
+                <RoomIcon size="200" joinRule={room.getJoinRule() ?? JoinRule.Restricted} filled />
+              )}
             />
           </Avatar>
           <Box direction="Column">

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

@@ -14,7 +14,14 @@ import {
   toRem,
 } from 'folds';
 import { useSearchParams } from 'react-router-dom';
-import { INotification, INotificationsResponse, IRoomEvent, Method, Room } from 'matrix-js-sdk';
+import {
+  INotification,
+  INotificationsResponse,
+  IRoomEvent,
+  JoinRule,
+  Method,
+  Room,
+} from 'matrix-js-sdk';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { HTMLReactParserOptions } from 'html-react-parser';
 import { Page, PageContent, PageContentCenter, PageHeader } from '../../../components/page';
@@ -23,8 +30,7 @@ import { getMxIdLocalPart, isRoomId, isUserId } from '../../../utils/matrix';
 import { InboxNotificationsPathSearchParams } from '../../paths';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { SequenceCard } from '../../../components/sequence-card';
-import { RoomAvatar } from '../../../components/room-avatar';
+import { RoomAvatar, RoomIcon } from '../../../components/room-avatar';
-import { nameInitials } from '../../../utils/common';
 import { getMemberAvatarMxc, getMemberDisplayName, getRoomAvatarUrl } from '../../../utils/room';
 import { ScrollTopContainer } from '../../../components/scroll-top-container';
 import { useInterval } from '../../../hooks/useInterval';
@@ -282,9 +288,7 @@ function RoomNotificationsGroupComp({
               src={getRoomAvatarUrl(mx, room, 96)}
               alt={room.name}
               renderInitials={() => (
-                <Text as="span" size="H6">
+                <RoomIcon size="50" joinRule={room.getJoinRule() ?? JoinRule.Restricted} filled />
-                  {nameInitials(room.name)}
-                </Text>
               )}
             />
           </Avatar>