From a65898e74f47a556a0290f16c8ff17431ec85c10 Mon Sep 17 00:00:00 2001
From: Max Litruv Boonzaayer <litruv@gmail.com>
Date: Sun, 15 Mar 2026 19:49:25 +1100
Subject: [PATCH] feat: enhance RoomNavItem to conditionally display avatar and
 adjust icon visibility

---
 src/app/features/room-nav/RoomNavItem.tsx | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/app/features/room-nav/RoomNavItem.tsx b/src/app/features/room-nav/RoomNavItem.tsx
index ef6b2dc..3d97988 100644
--- a/src/app/features/room-nav/RoomNavItem.tsx
+++ b/src/app/features/room-nav/RoomNavItem.tsx
@@ -298,6 +298,12 @@ export function RoomNavItem({
   const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: setHover });
   const [menuAnchor, setMenuAnchor] = useState<RectCords>();
   const unread = useRoomUnread(room.roomId, roomToUnreadAtom);
+
+  const avatarUrl = direct
+    ? getDirectRoomAvatarUrl(mx, room, 96, useAuthentication)
+    : getRoomAvatarUrl(mx, room, 96, useAuthentication);
+  
+  const shouldShowIcon = !hideIcon || (hideIcon && avatarUrl);
   const typingMember = useRoomTypingMember(room.roomId).filter(
     (receipt) => receipt.userId !== mx.getUserId()
   );
@@ -363,7 +369,7 @@ export function RoomNavItem({
   return (
     <Box direction="Column" style={{ width: '100%' }}>
       <NavItem
-        className={hideIcon ? css.ThreadItem : undefined}
+        className={!shouldShowIcon ? css.ThreadItem : undefined}
         variant="Background"
         radii="400"
         highlight={unread !== undefined}
@@ -375,17 +381,13 @@ export function RoomNavItem({
       >
         <NavLink to={linkPath}>
           <NavItemContent>
-            <Box as="span" grow="Yes" alignItems="Center" gap={hideIcon ? "100" : "200"}>
-              {!hideIcon && (
+            <Box as="span" grow="Yes" alignItems="Center" gap={shouldShowIcon ? "200" : "100"}>
+              {shouldShowIcon && (
                 <Avatar size="200" radii="400">
-                  {showAvatar ? (
+                  {showAvatar || avatarUrl ? (
                   <RoomAvatar
                     roomId={room.roomId}
-                    src={
-                      direct
-                        ? getDirectRoomAvatarUrl(mx, room, 96, useAuthentication)
-                        : getRoomAvatarUrl(mx, room, 96, useAuthentication)
-                    }
+                    src={avatarUrl}
                     alt={room.name}
                     renderFallback={() => (
                       <Text as="span" size="H6">