UI update for room details (#2831)

ElementX/Sources/Other/SwiftUI/Views/AvatarHeaderView.swift

@@ -17,10 +17,16 @@
 import SwiftUI
 
 struct AvatarHeaderView<Footer: View>: View {
+    private enum Badge: Hashable {
+        case encrypted(Bool)
+        case `public`
+    }
+    
     let id: String
     let name: String?
     let subtitle: String?
     let avatarURL: URL?
+    private let badges: [Badge]
     
     let avatarSize: AvatarSize
     let imageProvider: ImageProviderProtocol?
@@ -41,6 +47,13 @@ struct AvatarHeaderView<Footer: View>: View {
         self.imageProvider = imageProvider
         self.onAvatarTap = onAvatarTap
         self.footer = footer
+        
+        var badges = [Badge]()
+        badges.append(.encrypted(room.isEncrypted))
+        if room.isPublic {
+            badges.append(.public)
+        }
+        self.badges = badges
     }
     
     init(member: RoomMemberDetails,
@@ -57,6 +70,7 @@ struct AvatarHeaderView<Footer: View>: View {
         self.imageProvider = imageProvider
         self.onAvatarTap = onAvatarTap
         self.footer = footer
+        badges = []
     }
     
     init(user: UserProfileProxy,
@@ -73,6 +87,30 @@ struct AvatarHeaderView<Footer: View>: View {
         self.imageProvider = imageProvider
         self.onAvatarTap = onAvatarTap
         self.footer = footer
+        badges = []
+    }
+    
+    private var badgesStack: some View {
+        HStack(spacing: 8) {
+            ForEach(badges, id: \.self) { badge in
+                switch badge {
+                case .encrypted(let isEncrypted):
+                    if isEncrypted {
+                        BadgeLabel(title: L10n.screenRoomDetailsBadgeEncrypted,
+                                   icon: \.lockSolid,
+                                   isHighlighted: true)
+                    } else {
+                        BadgeLabel(title: L10n.screenRoomDetailsBadgeNotEncrypted,
+                                   icon: \.lockOff,
+                                   isHighlighted: false)
+                    }
+                case .public:
+                    BadgeLabel(title: L10n.screenRoomDetailsBadgePublic,
+                               icon: \.public,
+                               isHighlighted: false)
+                }
+            }
+        }
     }
 
     var body: some View {
@@ -102,6 +140,10 @@ struct AvatarHeaderView<Footer: View>: View {
                     .textSelection(.enabled)
             }
             
+            if !badges.isEmpty {
+                badgesStack
+            }
+            
             footer()
         }
         .frame(maxWidth: .infinity, alignment: .center)
@@ -119,7 +161,9 @@ struct AvatarHeaderView_Previews: PreviewProvider, TestablePreview {
             AvatarHeaderView(room: .init(id: "@test:matrix.org",
                                          name: "Test Room",
                                          avatarURL: URL.picturesDirectory,
-                                         canonicalAlias: "#test:matrix.org"),
+                                         canonicalAlias: "#test:matrix.org",
+                                         isEncrypted: true,
+                                         isPublic: true),
                              avatarSize: .room(on: .details),
                              imageProvider: MockMediaProvider()) {
                 HStack(spacing: 32) {

ElementX/Sources/Other/SwiftUI/Views/BadgeLabel.swift

@@ -0,0 +1,75 @@
+//
+// Copyright 2024 New Vector Ltd
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+import Compound
+import SwiftUI
+
+struct BadgeLabel: View {
+    let title: String
+    let icon: KeyPath<CompoundIcons, Image>
+    let isHighlighted: Bool
+    
+    var body: some View {
+        Label(title,
+              icon: icon,
+              iconSize: .xSmall,
+              relativeTo: .compound.bodySM)
+            .labelStyle(BadgeLabelStyle(isHighlighted: isHighlighted))
+    }
+}
+
+private struct BadgeLabelStyle: LabelStyle {
+    let isHighlighted: Bool
+    
+    var titleColor: Color {
+        isHighlighted ? .compound._badgeTextSuccess : .compound._badgeTextSubtle
+    }
+    
+    var iconColor: Color {
+        isHighlighted ? .compound.iconSuccessPrimary : .compound.iconSecondary
+    }
+    
+    var backgroundColor: Color {
+        isHighlighted ? .compound._bgBadgeSuccess : .compound.bgSubtlePrimary
+    }
+    
+    func makeBody(configuration: Configuration) -> some View {
+        HStack(spacing: 4) {
+            configuration.icon
+                .foregroundStyle(iconColor)
+            configuration.title
+                .foregroundStyle(titleColor)
+        }
+        .font(.compound.bodySM)
+        .padding(.leading, 8)
+        .padding(.trailing, 12)
+        .padding(.vertical, 4)
+        .background(Capsule().fill(backgroundColor))
+    }
+}
+
+struct BadgeLabel_Previews: PreviewProvider, TestablePreview {
+    static var previews: some View {
+        VStack(spacing: 10) {
+            BadgeLabel(title: "Encrypted",
+                       icon: \.lockSolid,
+                       isHighlighted: true)
+            BadgeLabel(title: "Not encrypted",
+                       icon: \.lockSolid,
+                       isHighlighted: false)
+        }
+    }
+}