Added WhatsApp style header example

Author: martinmitrevski

DemoAppSwiftUI/WhatsAppChannelHeader.swift

@@ -0,0 +1,84 @@
+//
+// Copyright © 2023 Stream.io Inc. All rights reserved.
+//
+
+import StreamChat
+import StreamChatSwiftUI
+import SwiftUI
+
+import SwiftUI
+
+struct WhatsAppChannelHeaderModifier: ChatChannelHeaderViewModifier {
+    
+    let channel: ChatChannel
+    
+    func body(content: Content) -> some View {
+        content.toolbar {
+            WhatsAppChannelHeader(channel: channel)
+        }
+    }
+}
+
+struct WhatsAppChannelHeader: ToolbarContent {
+    
+    @ObservedObject private var channelHeaderLoader = InjectedValues[\.utils].channelHeaderLoader
+    
+    @Injected(\.chatClient) var chatClient
+    @Injected(\.utils) var utils
+    @Injected(\.fonts) var fonts
+    @Injected(\.colors) var colors
+    
+    var channel: ChatChannel
+    
+    private var currentUserId: String {
+        chatClient.currentUserId ?? ""
+    }
+    
+    private var channelNamer: ChatChannelNamer {
+        utils.channelNamer
+    }
+    
+    private var channelSubtitle: String {
+        if channel.memberCount <= 2 {
+            return channel.onlineInfoText(currentUserId: currentUserId)
+        } else {
+            return channel
+                .lastActiveMembers
+                .map { $0.name ?? $0.id }
+                .joined(separator: ", ")
+        }
+    }
+    
+    var body: some ToolbarContent {
+        ToolbarItem(placement: .principal) {
+            HStack {
+                ChannelAvatarView(
+                    avatar: channelHeaderLoader.image(for: channel),
+                    showOnlineIndicator: false,
+                    size: CGSize(width: 36, height: 36)
+                )
+                VStack(alignment: .leading) {
+                    Text(channelNamer(channel, currentUserId) ?? "")
+                        .font(fonts.bodyBold)
+                    Text(channelSubtitle)
+                        .font(fonts.caption1)
+                        .foregroundColor(Color(colors.textLowEmphasis))
+                }
+            }
+        }
+        ToolbarItem(placement: .topBarTrailing) {
+            HStack {
+                Button(action: {
+                    print("tapped on video")
+                }, label: {
+                    Image(systemName: "video")
+                })
+                Button(action: {
+                    print("tapped on audio")
+                }, label: {
+                    Image(systemName: "phone")
+                })
+            }
+        }
+    }
+}

StreamChatSwiftUI.xcodeproj/project.pbxproj

@@ -166,6 +166,7 @@
 		84507C98281AC40F0081DDC2 /* AddUsersViewModel_Tests.swift in Sources */ = {isa = PBXBuildFile; fileRef = 84507C97281AC40F0081DDC2 /* AddUsersViewModel_Tests.swift */; };
 		84507C9A281ACCD70081DDC2 /* AddUsersView_Tests.swift in Sources */ = {isa = PBXBuildFile; fileRef = 84507C99281ACCD70081DDC2 /* AddUsersView_Tests.swift */; };
 		8451617E2AE7B093000A9230 /* AppleMessageComposerView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 8451617D2AE7B093000A9230 /* AppleMessageComposerView.swift */; };
+		845161802AE7C4E2000A9230 /* WhatsAppChannelHeader.swift in Sources */ = {isa = PBXBuildFile; fileRef = 8451617F2AE7C4E2000A9230 /* WhatsAppChannelHeader.swift */; };
 		8463D9262836617F002B1894 /* ChannelListPage.swift in Sources */ = {isa = PBXBuildFile; fileRef = 8463D9252836617F002B1894 /* ChannelListPage.swift */; };
 		8465FBBE2746873A00AF091E /* StreamChatSwiftUI.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = 8465FBB52746873A00AF091E /* StreamChatSwiftUI.framework */; };
 		8465FCBF27468B6900AF091E /* DemoAppSwiftUIApp.swift in Sources */ = {isa = PBXBuildFile; fileRef = 8465FCBE27468B6900AF091E /* DemoAppSwiftUIApp.swift */; };
@@ -669,6 +670,7 @@
 		84507C97281AC40F0081DDC2 /* AddUsersViewModel_Tests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AddUsersViewModel_Tests.swift; sourceTree = "<group>"; };
 		84507C99281ACCD70081DDC2 /* AddUsersView_Tests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AddUsersView_Tests.swift; sourceTree = "<group>"; };
 		8451617D2AE7B093000A9230 /* AppleMessageComposerView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AppleMessageComposerView.swift; sourceTree = "<group>"; };
+		8451617F2AE7C4E2000A9230 /* WhatsAppChannelHeader.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = WhatsAppChannelHeader.swift; sourceTree = "<group>"; };
 		8463D9252836617F002B1894 /* ChannelListPage.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ChannelListPage.swift; sourceTree = "<group>"; };
 		8465FBB52746873A00AF091E /* StreamChatSwiftUI.framework */ = {isa = PBXFileReference; explicitFileType = wrapper.framework; includeInIndex = 0; path = StreamChatSwiftUI.framework; sourceTree = BUILT_PRODUCTS_DIR; };
 		8465FBBD2746873A00AF091E /* StreamChatSwiftUITests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = StreamChatSwiftUITests.xctest; sourceTree = BUILT_PRODUCTS_DIR; };
@@ -1420,6 +1422,7 @@
 				84335013274BAB15007A1B81 /* ViewFactoryExamples.swift */,
 				84FF723E2782FB2E006E26C8 /* iMessagePocView.swift */,
 				8451617D2AE7B093000A9230 /* AppleMessageComposerView.swift */,
+				8451617F2AE7C4E2000A9230 /* WhatsAppChannelHeader.swift */,
 				8417AE912ADEDB6400445021 /* UserRepository.swift */,
 				84EDBC36274FE5CD0057218D /* Localizable.strings */,
 				8465FCCA27468B7500AF091E /* Info.plist */,
@@ -2670,6 +2673,7 @@
 				84335016274BABF3007A1B81 /* NewChatView.swift in Sources */,
 				84335018274BAD4B007A1B81 /* NewChatViewModel.swift in Sources */,
 				84B288CD274C544B00DD090B /* CreateGroupView.swift in Sources */,
+				845161802AE7C4E2000A9230 /* WhatsAppChannelHeader.swift in Sources */,
 				8465FCDC274694D200AF091E /* SceneDelegate.swift in Sources */,
 				8465FCD9274694D200AF091E /* LaunchAnimationState.swift in Sources */,
 				84B288D1274CEDD000DD090B /* GroupNameView.swift in Sources */,