New room list: fix multiple visual issues (#29673)

* fix(room list item): add bold when there is a notification

* fix(room list item menu): fix color of check icon

* fix(menu): remove chevron

* chore: update @vector-im/compound-web

* test(room list): update tests

* test(e2e): update snapshots

src/components/viewmodels/roomlist/RoomListItemViewModel.tsx

@@ -36,6 +36,10 @@ export interface RoomListItemViewState {
      * The notification state of the room.
      */
     notificationState: RoomNotificationState;
+    /**
+     * Whether the room should be bolded.
+     */
+    isBold: boolean;
 }
 
 /**
@@ -51,6 +55,7 @@ export function useRoomListItemViewModel(room: Room): RoomListItemViewState {
         hasAccessToOptionsMenu(room) || hasAccessToNotificationMenu(room, matrixClient.isGuest(), isArchived);
     const notificationState = useMemo(() => RoomNotificationStateStore.instance.getRoomState(room), [room]);
     const a11yLabel = getA11yLabel(room, notificationState);
+    const isBold = notificationState.hasAnyNotificationOrActivity;
 
     // Actions
 
@@ -67,6 +72,7 @@ export function useRoomListItemViewModel(room: Room): RoomListItemViewState {
         showHoverMenu,
         openRoom,
         a11yLabel,
+        isBold,
     };
 }
 

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

@@ -80,16 +80,32 @@ function SpaceMenu({ vm }: SpaceMenuProps): JSX.Element {
                 </IconButton>
             }
         >
-            <MenuItem Icon={HomeIcon} label={_t("room_list|space_menu|home")} onSelect={vm.openSpaceHome} />
+            <MenuItem
+                Icon={HomeIcon}
+                label={_t("room_list|space_menu|home")}
+                onSelect={vm.openSpaceHome}
+                hideChevron={true}
+            />
             {vm.canInviteInSpace && (
-                <MenuItem Icon={UserAddIcon} label={_t("action|invite")} onSelect={vm.inviteInSpace} />
+                <MenuItem
+                    Icon={UserAddIcon}
+                    label={_t("action|invite")}
+                    onSelect={vm.inviteInSpace}
+                    hideChevron={true}
+                />
             )}
-            <MenuItem Icon={PreferencesIcon} label={_t("common|preferences")} onSelect={vm.openSpacePreferences} />
+            <MenuItem
+                Icon={PreferencesIcon}
+                label={_t("common|preferences")}
+                onSelect={vm.openSpacePreferences}
+                hideChevron={true}
+            />
             {vm.canAccessSpaceSettings && (
                 <MenuItem
                     Icon={SettingsIcon}
                     label={_t("room_list|space_menu|space_settings")}
                     onSelect={vm.openSpaceSettings}
+                    hideChevron={true}
                 />
             )}
         </Menu>
@@ -123,10 +139,22 @@ function ComposeMenu({ vm }: ComposeMenuProps): JSX.Element {
                 </IconButton>
             }
         >
-            <MenuItem Icon={UserAddIcon} label={_t("action|new_message")} onSelect={vm.createChatRoom} />
-            {vm.canCreateRoom && <MenuItem Icon={RoomIcon} label={_t("action|new_room")} onSelect={vm.createRoom} />}
+            <MenuItem
+                Icon={UserAddIcon}
+                label={_t("action|new_message")}
+                onSelect={vm.createChatRoom}
+                hideChevron={true}
+            />
+            {vm.canCreateRoom && (
+                <MenuItem Icon={RoomIcon} label={_t("action|new_room")} onSelect={vm.createRoom} hideChevron={true} />
+            )}
             {vm.canCreateVideoRoom && (
-                <MenuItem Icon={VideoCallIcon} label={_t("action|new_video_room")} onSelect={vm.createVideoRoom} />
+                <MenuItem
+                    Icon={VideoCallIcon}
+                    label={_t("action|new_video_room")}
+                    onSelect={vm.createVideoRoom}
+                    hideChevron={true}
+                />
             )}
         </Menu>
     );

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

@@ -90,6 +90,7 @@ function MoreOptionsMenu({ vm, setMenuOpen }: MoreOptionsMenuProps): JSX.Element
                     label={_t("room_list|more_options|mark_read")}
                     onSelect={vm.markAsRead}
                     onClick={(evt) => evt.stopPropagation()}
+                    hideChevron={true}
                 />
             )}
             {vm.canMarkAsUnread && (
@@ -98,6 +99,7 @@ function MoreOptionsMenu({ vm, setMenuOpen }: MoreOptionsMenuProps): JSX.Element
                     label={_t("room_list|more_options|mark_unread")}
                     onSelect={vm.markAsUnread}
                     onClick={(evt) => evt.stopPropagation()}
+                    hideChevron={true}
                 />
             )}
             <ToggleMenuItem
@@ -112,6 +114,7 @@ function MoreOptionsMenu({ vm, setMenuOpen }: MoreOptionsMenuProps): JSX.Element
                 label={_t("room_list|more_options|low_priority")}
                 onSelect={vm.toggleLowPriority}
                 onClick={(evt) => evt.stopPropagation()}
+                hideChevron={true}
             />
             {vm.canInvite && (
                 <MenuItem
@@ -119,6 +122,7 @@ function MoreOptionsMenu({ vm, setMenuOpen }: MoreOptionsMenuProps): JSX.Element
                     label={_t("action|invite")}
                     onSelect={vm.invite}
                     onClick={(evt) => evt.stopPropagation()}
+                    hideChevron={true}
                 />
             )}
             {vm.canCopyRoomLink && (
@@ -127,6 +131,7 @@ function MoreOptionsMenu({ vm, setMenuOpen }: MoreOptionsMenuProps): JSX.Element
                     label={_t("room_list|more_options|copy_link")}
                     onSelect={vm.copyRoomLink}
                     onClick={(evt) => evt.stopPropagation()}
+                    hideChevron={true}
                 />
             )}
             <Separator />
@@ -136,6 +141,7 @@ function MoreOptionsMenu({ vm, setMenuOpen }: MoreOptionsMenuProps): JSX.Element
                 label={_t("room_list|more_options|leave_room")}
                 onSelect={vm.leaveRoom}
                 onClick={(evt) => evt.stopPropagation()}
+                hideChevron={true}
             />
         </Menu>
     );
@@ -173,6 +179,8 @@ interface NotificationMenuProps {
 function NotificationMenu({ vm, setMenuOpen }: NotificationMenuProps): JSX.Element {
     const [open, setOpen] = useState(false);
 
+    const checkComponent = <CheckIcon width="24px" height="24px" color="var(--cpd-color-icon-primary)" />;
+
     return (
         <Menu
             open={open}
@@ -192,7 +200,7 @@ function NotificationMenu({ vm, setMenuOpen }: NotificationMenuProps): JSX.Eleme
                 onSelect={() => vm.setRoomNotifState(RoomNotifState.AllMessages)}
                 onClick={(evt) => evt.stopPropagation()}
             >
-                {vm.isNotificationAllMessage && <CheckIcon width="24px" height="24px" />}
+                {vm.isNotificationAllMessage && checkComponent}
             </MenuItem>
             <MenuItem
                 aria-selected={vm.isNotificationAllMessageLoud}
@@ -201,7 +209,7 @@ function NotificationMenu({ vm, setMenuOpen }: NotificationMenuProps): JSX.Eleme
                 onSelect={() => vm.setRoomNotifState(RoomNotifState.AllMessagesLoud)}
                 onClick={(evt) => evt.stopPropagation()}
             >
-                {vm.isNotificationAllMessageLoud && <CheckIcon width="24px" height="24px" />}
+                {vm.isNotificationAllMessageLoud && checkComponent}
             </MenuItem>
             <MenuItem
                 aria-selected={vm.isNotificationMentionOnly}
@@ -210,7 +218,7 @@ function NotificationMenu({ vm, setMenuOpen }: NotificationMenuProps): JSX.Eleme
                 onSelect={() => vm.setRoomNotifState(RoomNotifState.MentionsOnly)}
                 onClick={(evt) => evt.stopPropagation()}
             >
-                {vm.isNotificationMentionOnly && <CheckIcon width="24px" height="24px" />}
+                {vm.isNotificationMentionOnly && checkComponent}
             </MenuItem>
             <MenuItem
                 aria-selected={vm.isNotificationMute}
@@ -219,7 +227,7 @@ function NotificationMenu({ vm, setMenuOpen }: NotificationMenuProps): JSX.Eleme
                 onSelect={() => vm.setRoomNotifState(RoomNotifState.Mute)}
                 onClick={(evt) => evt.stopPropagation()}
             >
-                {vm.isNotificationMute && <CheckIcon width="24px" height="24px" />}
+                {vm.isNotificationMute && checkComponent}
             </MenuItem>
         </Menu>
     );

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

@@ -48,6 +48,7 @@ export function RoomListItemView({ room, isSelected, ...props }: RoomListItemVie
                 mx_RoomListItemView_notification_decoration: isNotificationDecorationVisible,
                 mx_RoomListItemView_menu_open: showHoverDecoration,
                 mx_RoomListItemView_selected: isSelected,
+                mx_RoomListItemView_bold: vm.isBold,
             })}
             type="button"
             aria-selected={isSelected}
@@ -69,7 +70,9 @@ export function RoomListItemView({ room, isSelected, ...props }: RoomListItemVie
                     justify="space-between"
                 >
                     {/* 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>
+                    <span className="mx_RoomListItemView_roomName" title={room.name}>
+                        {room.name}
+                    </span>
                     {showHoverDecoration ? (
                         <RoomListItemMenuView
                             room={room}