feat(room list item): use notification decoration in RoomListItemView

Author: florianduros

src/components/views/rooms/RoomListPanel/RoomListItemView.tsx

@@ -12,8 +12,8 @@ import classNames from "classnames";
 import { useRoomListItemViewModel } from "../../../viewmodels/roomlist/RoomListItemViewModel";
 import DecoratedRoomAvatar from "../../avatars/DecoratedRoomAvatar";
 import { Flex } from "../../../utils/Flex";
-import { _t } from "../../../../languageHandler";
 import { RoomListItemMenuView } from "./RoomListItemMenuView";
+import { NotificationDecoration } from "../NotificationDecoration";
 
 interface RoomListItemViewPropsProps extends React.HTMLAttributes<HTMLButtonElement> {
     /**
@@ -37,6 +37,7 @@ export function RoomListItemView({ room, isSelected, ...props }: RoomListItemVie
     // The compound menu in RoomListItemMenuView needs to be rendered when the hover menu is shown
     // Using display: none; and then display:flex when hovered in CSS causes the menu to be misaligned
     const showHoverDecoration = (isMenuOpen || isHover) && vm.showHoverMenu;
+    // const hasNotification = vm.notificationState.isUnread;
 
     return (
         <button
@@ -46,7 +47,7 @@ export function RoomListItemView({ room, isSelected, ...props }: RoomListItemVie
             })}
             type="button"
             aria-selected={isSelected}
-            aria-label={_t("room_list|room|open_room", { roomName: room.name })}
+            aria-label={vm.a11yLabel}
             onClick={() => vm.openRoom()}
             onMouseOver={() => setIsHover(true)}
             onMouseOut={() => setIsHover(false)}
@@ -65,7 +66,7 @@ export function RoomListItemView({ room, isSelected, ...props }: RoomListItemVie
                 >
                     {/* We truncate the room name when too long. Title here is to show the full name on hover */}
                     <span title={room.name}>{room.name}</span>
-                    {showHoverDecoration && (
+                    {showHoverDecoration ? (
                         <RoomListItemMenuView
                             room={room}
                             setMenuOpen={(isOpen) => {
@@ -74,6 +75,8 @@ export function RoomListItemView({ room, isSelected, ...props }: RoomListItemVie
                                 else setTimeout(() => setIsMenuOpen(isOpen), 0);
                             }}
                         />
+                    ) : (
+                        <NotificationDecoration vm={vm.notificationDecorationViewState} />
                     )}
                 </Flex>
             </Flex>