Fix showing images of a member sometimes when showing room icons

.changeset/feat_add_setting_strict_icons.md

@@ -0,0 +1,5 @@
+---
+default: minor
+---
+
+Add option for showing icons only when available and changed default to it

.changeset/fix_icons_showing_wrongly.md

@@ -0,0 +1,5 @@
+---
+default: patch
+---
+
+Fix Collapsed mode showing the wrong icon

src/app/features/room-nav/RoomNavItem.tsx

@@ -267,6 +267,7 @@ type RoomNavItemProps = {
   direct?: boolean;
   customDMCards?: boolean;
   hideText?: boolean;
+  isStrict?: boolean;
   joinCallOnSingleClick?: boolean;
 };
 
@@ -279,6 +280,7 @@ export function RoomNavItem({
   notificationMode,
   linkPath,
   hideText,
+  isStrict,
   joinCallOnSingleClick,
 }: RoomNavItemProps) {
   const mx = useMatrixClient();
@@ -316,6 +318,11 @@ export function RoomNavItem({
   const [isChatOpen, setChatOpen] = useAtom(callChatAtom);
   const autoDiscoveryInfo = useAutoDiscoveryInfo();
 
+  const avatarSrc =
+    ((!direct || customDMCards) && getRoomAvatarUrl(mx, room, 96, useAuthentication)) ||
+    (direct && getDirectRoomAvatarUrl(mx, room, 96, useAuthentication)) ||
+    undefined;
+
   const isActiveCall = callEmbed?.roomId === room.roomId;
 
   const handleContextMenu: MouseEventHandler<HTMLElement> = (evt) => {
@@ -447,14 +454,10 @@ export function RoomNavItem({
                         radii="400"
                         style={hideTextStyling(hideText)}
                       >
-                        {showAvatar ? (
+                        {showAvatar || (avatarSrc && isStrict) ? (
                           <RoomAvatar
                             roomId={room.roomId}
-                            src={
-                              ((!direct || customDMCards) &&
-                                getRoomAvatarUrl(mx, room, 96, useAuthentication)) ||
-                              getDirectRoomAvatarUrl(mx, room, 96, useAuthentication)
-                            }
+                            src={avatarSrc}
                             uniformIcons
                             alt={roomName}
                             renderFallback={() => (
@@ -472,7 +475,7 @@ export function RoomNavItem({
                                   : config.opacity.P300,
                             }}
                             filled={selected || isActiveCall}
-                            size="200"
+                            size={isStrict && hideText ? '300' : '200'}
                             joinRule={room.getJoinRule()}
                             roomType={room.getType()}
                             withOverlay={roomIconOverlay}

src/app/features/settings/cosmetics/Themes.tsx

@@ -28,7 +28,8 @@ import {
 } from '$plugins/arborium';
 import { ThemeKind, useActiveTheme } from '$hooks/useTheme';
 import { useSetting } from '$state/hooks/settings';
-import type { PixelatedImageRenderingMode, ShowRoomIcon } from '$state/settings';
+import type { PixelatedImageRenderingMode } from '$state/settings';
+import { ShowRoomIcon } from '$state/settings';
 import { settingsAtom } from '$state/settings';
 import { SequenceCardStyle } from '$features/settings/styles.css';
 import { ThemeAppearanceSection } from './ThemeAppearanceSection';
@@ -809,6 +810,7 @@ export function Appearance({
   const [twitterEmoji, setTwitterEmoji] = useSetting(settingsAtom, 'twitterEmoji');
   const [customDMCards, setCustomDMCards] = useSetting(settingsAtom, 'customDMCards');
   const [showEasterEggs, setShowEasterEggs] = useSetting(settingsAtom, 'showEasterEggs');
+  const [showRoomIcon] = useSetting(settingsAtom, 'showRoomIcon');
   const [themeBrowserOpen, setThemeBrowserOpen] = useState(false);
   const [closeFoldersByDefault, setCloseFoldersByDefault] = useSetting(
     settingsAtom,
@@ -891,14 +893,6 @@ export function Appearance({
               />
             </SequenceCard>
 
-            <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
-              <SettingTile
-                title="Show Room Icons In Sidebars"
-                focusId="show-room-icons"
-                description="When do you want to show the specific room icons in the sidebar as opposed to the default room icons?"
-                after={<SelectShowRoomIcon />}
-              />
-            </SequenceCard>
             <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
               <SettingTile
                 title="Overlay Room Privacy Icons"
@@ -909,6 +903,31 @@ export function Appearance({
                 }
               />
             </SequenceCard>
+
+            <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
+              <SettingTile
+                title="Show Room Icons In Sidebars"
+                focusId="show-room-icons"
+                description={
+                  <>
+                    <Text size="T200">
+                      When do you want to show the specific room icons in the sidebar?
+                    </Text>
+                    {(showRoomIcon === ShowRoomIcon.Always &&
+                      'Always show icons, and fallback to initials') ||
+                      (showRoomIcon === ShowRoomIcon.Strict &&
+                        'Show icons when available, but fallback to hashes') ||
+                      (showRoomIcon === ShowRoomIcon.Smart &&
+                        'Show icons only when sidebar is minimized, else icons.') ||
+                      (showRoomIcon === ShowRoomIcon.Never &&
+                        'Never show icons, always only the hashes.') ||
+                      ''}
+                    <span style={{ opacity: '50%' }}>{' (current)'}</span>
+                  </>
+                }
+                after={<SelectShowRoomIcon />}
+              />
+            </SequenceCard>
             {/*THIS SHOULD BE MOVED TO A NEW SETTINGS MENU INSIDE OF THE HOME SETTINGS AS SOON AS THERE IS A REASON TO CREATE A HOME MENU SETTINGS PANEL
               it is currently here because it would be eerie to have an entire home settings menu for just one single setting*/}
             <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">

src/app/hooks/useShowRoomIcon.ts

@@ -13,9 +13,13 @@ export const useShowRoomIcon = (): MessageLayoutItem[] =>
         layout: ShowRoomIcon.Always,
         name: 'Always',
       },
+      {
+        layout: ShowRoomIcon.Strict,
+        name: 'Sometimes',
+      },
       {
         layout: ShowRoomIcon.Smart,
-        name: 'Smart',
+        name: 'Collapsed',
       },
       {
         layout: ShowRoomIcon.Never,
@@ -36,9 +40,13 @@ export const useShowPerRoomRoomIcon = (): MessageLayoutItem[] =>
         layout: ShowRoomIcon.Always,
         name: 'Always',
       },
+      {
+        layout: ShowRoomIcon.Strict,
+        name: 'Sometimes',
+      },
       {
         layout: ShowRoomIcon.Smart,
-        name: 'Smart',
+        name: 'Collapsed',
       },
       {
         layout: ShowRoomIcon.Never,

src/app/pages/client/space/Space.tsx

@@ -1037,6 +1037,7 @@ export function Space() {
                             room.roomId
                           )}
                           joinCallOnSingleClick={joinCallOnSingleClick}
+                          isStrict={showRoomIcon === ShowRoomIcon.Strict}
                         />
                       </div>
                     </VirtualTile>

src/app/state/settings.ts

@@ -26,6 +26,7 @@ export enum CaptionPosition {
 
 export enum ShowRoomIcon {
   Always = 'always',
+  Strict = 'strict',
   Smart = 'smart',
   Never = 'never',
 }
@@ -348,7 +349,7 @@ export const defaultSettings: Settings = {
   showPersonaSetting: false,
   closeFoldersByDefault: false,
   perRoomShowRoomIcon: [],
-  showRoomIcon: ShowRoomIcon.Smart,
+  showRoomIcon: ShowRoomIcon.Strict,
   roomIconOverlay: true,
   showRoomBanners: true,
   roomSidebarWidth: 256,