feat: enhance RoomNavItem to conditionally display avatar and adjust icon visibility
This commit is contained in:
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user