Show message counts on room list notification badges

ElementX/Sources/Screens/HomeScreen/View/HomeScreenRoomCell.swift

@@ -16,6 +16,7 @@ struct HomeScreenRoomCell: View {
     
     let room: HomeScreenRoom
     var roomListActivityVisibility: RoomListActivityVisibility = .current
+    var roomListNotificationCountEnabled = false
     let isSelected: Bool
     let mediaProvider: MediaProviderProtocol!
     let action: (HomeScreenViewAction) -> Void
@@ -157,9 +158,20 @@ struct HomeScreenRoomCell: View {
                 }
                 
                 if room.badges.isDotShown {
-                    Circle()
-                        .frame(width: 12, height: 12)
-                        .accessibilityLabel(L10n.a11yNotificationsNewMessages)
+                    if roomListNotificationCountEnabled, room.isHighlighted, room.badges.notificationCount > 0 {
+                        Text(formattedNotificationCount)
+                            .font(.compound.bodySMSemibold)
+                            .foregroundColor(.compound.textOnSolidPrimary)
+                            .lineLimit(1)
+                            .padding(.horizontal, 6)
+                            .frame(minWidth: 20, minHeight: 20)
+                            .background(.compound.iconAccentTertiary, in: .capsule)
+                            .accessibilityLabel(L10n.a11yNotificationsNewMessages)
+                    } else {
+                        Circle()
+                            .frame(width: 12, height: 12)
+                            .accessibilityLabel(L10n.a11yNotificationsNewMessages)
+                    }
                 }
             }
             .foregroundColor(room.isHighlighted ? .compound.iconAccentTertiary : .compound.iconQuaternary)
@@ -171,6 +183,10 @@ struct HomeScreenRoomCell: View {
             .accessibilityLabel(L10n.a11yNotificationsNewMentions)
     }
     
+    private var formattedNotificationCount: String {
+        room.badges.notificationCount > 99 ? "99+" : "\(room.badges.notificationCount)"
+    }
+    
     @ViewBuilder
     private var lastMessage: some View {
         if let displayedLastMessage = room.displayedLastMessage {
@@ -239,7 +255,7 @@ struct HomeScreenRoomCell_Previews: PreviewProvider, TestablePreview {
         
         VStack(spacing: 0) {
             ForEach(notificationsStateRooms) { room in
-                HomeScreenRoomCell(room: room, isSelected: false, mediaProvider: MediaProviderMock(.init())) { _ in }
+                HomeScreenRoomCell(room: room, roomListNotificationCountEnabled: true, isSelected: false, mediaProvider: MediaProviderMock(.init())) { _ in }
             }
         }
         .previewLayout(.sizeThatFits)