litruv/cinny
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance RoomNavItem to conditionally display avatar and adjust icon visibility

Browse Source
This commit is contained in:
Litruv
2026-03-15 19:49:25 +11:00
parent 12286f57f7
commit a65898e74f
1 changed files with 11 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/app/features/room-nav/RoomNavItem.tsx
View File

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