Change the gallery header view to show the message timestamp instead of online status (#962)

nuno-vieira · Stream-SDK-Bot · Stream Bot · web-flow · commit ed139b4f9c9e · 2025-09-18T20:08:08.000+01:00
* Change the gallery header view to show the message timestamp instead of online status * Update CHANGELOG with recent fixes and changes * [CI] Snapshots (#963) Co-authored-by: Stream Bot <ci@getstream.io> --------- Co-authored-by: Stream SDK Bot <60655709+Stream-SDK-Bot@users.noreply.github.com> Co-authored-by: Stream Bot <ci@getstream.io>
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,7 +11,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Fix swipe to reply enabled when quoting a message is disabled  [#977](https://github.com/GetStream/stream-chat-swiftui/pull/957)
 - Fix composer not showing images in the composer when editing signed attachments [#956](https://github.com/GetStream/stream-chat-swiftui/pull/956)
 - Fix replacing an image while editing a message not showing the new image in the message list [#956](https://github.com/GetStream/stream-chat-swiftui/pull/956)
-- Improve precision when scrolling to the newest message with long text #958
+- Improve precision when scrolling to the newest message with long text [#958](https://github.com/GetStream/stream-chat-swiftui/pull/958)
+### 🔄 Changed
+- Change the gallery header view to show the message timestamp instead of online status [#962](https://github.com/GetStream/stream-chat-swiftui/pull/962)
 
 # [4.88.0](https://github.com/GetStream/stream-chat-swiftui/releases/tag/4.88.0)
 _September 10, 2025_
diff --git a/Sources/StreamChatSwiftUI/ChatChannel/Gallery/GalleryView.swift b/Sources/StreamChatSwiftUI/ChatChannel/Gallery/GalleryView.swift
@@ -13,10 +13,12 @@ public struct GalleryView<Factory: ViewFactory>: View {
     @Injected(\.colors) private var colors
     @Injected(\.fonts) private var fonts
     @Injected(\.images) private var images
+    @Injected(\.utils) private var utils
 
     private let viewFactory: Factory
     var mediaAttachments: [MediaAttachment]
     var author: ChatUser
+    var message: ChatMessage?
     @Binding var isShown: Bool
     @State private var selected: Int
     @State private var loadedImages = [Int: UIImage]()
@@ -27,15 +29,17 @@ public struct GalleryView<Factory: ViewFactory>: View {
         imageAttachments: [ChatMessageImageAttachment],
         author: ChatUser,
         isShown: Binding<Bool>,
-        selected: Int
+        selected: Int,
+        message: ChatMessage? = nil
     ) {
         let mediaAttachments = imageAttachments.map { MediaAttachment(from: $0) }
         self.init(
             viewFactory: viewFactory,
             mediaAttachments: mediaAttachments,
             author: author,
             isShown: isShown,
-            selected: selected
+            selected: selected,
+            message: message
         )
     }
     
@@ -44,21 +48,25 @@ public struct GalleryView<Factory: ViewFactory>: View {
         mediaAttachments: [MediaAttachment],
         author: ChatUser,
         isShown: Binding<Bool>,
-        selected: Int
+        selected: Int,
+        message: ChatMessage? = nil
     ) {
         self.viewFactory = viewFactory
         self.mediaAttachments = mediaAttachments
         self.author = author
         _isShown = isShown
         _selected = State(initialValue: selected)
+        self.message = message
     }
 
     public var body: some View {
         GeometryReader { reader in
             VStack {
                 viewFactory.makeGalleryHeaderView(
                     title: author.name ?? "",
-                    subtitle: author.onlineText,
+                    subtitle: message.map {
+                        utils.galleryHeaderViewDateFormatter.string(from: $0.createdAt)
+                    } ?? author.onlineText,
                     shown: $isShown
                 )
 
diff --git a/Sources/StreamChatSwiftUI/DefaultViewFactory.swift b/Sources/StreamChatSwiftUI/DefaultViewFactory.swift
@@ -466,7 +466,8 @@ extension ViewFactory {
             mediaAttachments: mediaAttachments,
             author: message.author,
             isShown: isShown,
-            selected: options.selectedIndex
+            selected: options.selectedIndex,
+            message: message
         )
     }
     
diff --git a/Sources/StreamChatSwiftUI/Utils.swift b/Sources/StreamChatSwiftUI/Utils.swift
@@ -16,6 +16,7 @@ public class Utils {
     ///
     /// - SeeAlso: ``ChannelListConfig/messageRelativeDateFormatEnabled``.
     public var messageRelativeDateFormatter: DateFormatter
+    public var galleryHeaderViewDateFormatter: DateFormatter
     public var videoPreviewLoader: VideoPreviewLoader
     public var imageLoader: ImageLoading
     public var imageCDN: ImageCDN
@@ -77,6 +78,7 @@ public class Utils {
     public init(
         dateFormatter: DateFormatter = .makeDefault(),
         messageRelativeDateFormatter: DateFormatter = MessageRelativeDateFormatter(),
+        galleryHeaderViewDateFormatter: DateFormatter = GalleryHeaderViewDateFormatter(),
         videoPreviewLoader: VideoPreviewLoader = DefaultVideoPreviewLoader(),
         imageLoader: ImageLoading = NukeImageLoader(),
         imageCDN: ImageCDN = StreamImageCDN(),
@@ -104,6 +106,7 @@ public class Utils {
     ) {
         self.dateFormatter = dateFormatter
         self.messageRelativeDateFormatter = messageRelativeDateFormatter
+        self.galleryHeaderViewDateFormatter = galleryHeaderViewDateFormatter
         self.videoPreviewLoader = videoPreviewLoader
         self.imageLoader = imageLoader
         self.imageCDN = imageCDN
diff --git a/Sources/StreamChatSwiftUI/Utils/Common/GalleryHeaderViewDateFormatter.swift b/Sources/StreamChatSwiftUI/Utils/Common/GalleryHeaderViewDateFormatter.swift
@@ -0,0 +1,40 @@
+//
+// Copyright © 2025 Stream.io Inc. All rights reserved.
+//
+
+/// A formatter used to display the message timestamp in the gallery header view.
+public final class GalleryHeaderViewDateFormatter: DateFormatter, @unchecked Sendable {
+    override public init() {
+        super.init()
+
+        locale = .autoupdatingCurrent
+        dateStyle = .short
+        timeStyle = .none
+    }
+    
+    @available(*, unavailable)
+    required init?(coder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+    
+    override public func string(from date: Date) -> String {
+        if calendar.isDateInToday(date) {
+            return dayFormatter.string(from: date)
+        }
+
+        if calendar.isDateInYesterday(date) {
+            return dayFormatter.string(from: date)
+        }
+
+        return super.string(from: date)
+    }
+    
+    let dayFormatter: DateFormatter = {
+        let formatter = DateFormatter()
+        formatter.locale = .autoupdatingCurrent
+        formatter.dateStyle = .short
+        formatter.timeStyle = .none
+        formatter.doesRelativeDateFormatting = true
+        return formatter
+    }()
+}
diff --git a/StreamChatSwiftUI.xcodeproj/project.pbxproj b/StreamChatSwiftUI.xcodeproj/project.pbxproj
@@ -527,6 +527,7 @@
 		AD3AB65C2CB730090014D4D7 /* Shimmer.swift in Sources */ = {isa = PBXBuildFile; fileRef = AD3AB65B2CB730090014D4D7 /* Shimmer.swift */; };
 		AD3AB65E2CB731360014D4D7 /* ChatThreadListLoadingView.swift in Sources */ = {isa = PBXBuildFile; fileRef = AD3AB65D2CB731360014D4D7 /* ChatThreadListLoadingView.swift */; };
 		AD3AB6602CB7403C0014D4D7 /* ChatThreadListHeaderViewModifier.swift in Sources */ = {isa = PBXBuildFile; fileRef = AD3AB65F2CB7403C0014D4D7 /* ChatThreadListHeaderViewModifier.swift */; };
+		AD3DB82F2E7C2E190023D377 /* GalleryHeaderViewDateFormatter.swift in Sources */ = {isa = PBXBuildFile; fileRef = AD3DB82E2E7C2E190023D377 /* GalleryHeaderViewDateFormatter.swift */; };
 		AD51D9182DB9543A0068D0B0 /* MessageViewModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = AD51D9172DB9543A0068D0B0 /* MessageViewModel.swift */; };
 		AD5C0A5F2D6FDD9700E1E500 /* BouncedMessageActionsModifier.swift in Sources */ = {isa = PBXBuildFile; fileRef = AD5C0A5E2D6FDD8600E1E500 /* BouncedMessageActionsModifier.swift */; };
 		AD6B7E052D356E8800ADEF39 /* ReactionsUsersViewModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = AD6B7E042D356E8800ADEF39 /* ReactionsUsersViewModel.swift */; };
@@ -1140,6 +1141,7 @@
 		AD3AB65B2CB730090014D4D7 /* Shimmer.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Shimmer.swift; sourceTree = "<group>"; };
 		AD3AB65D2CB731360014D4D7 /* ChatThreadListLoadingView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ChatThreadListLoadingView.swift; sourceTree = "<group>"; };
 		AD3AB65F2CB7403C0014D4D7 /* ChatThreadListHeaderViewModifier.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ChatThreadListHeaderViewModifier.swift; sourceTree = "<group>"; };
+		AD3DB82E2E7C2E190023D377 /* GalleryHeaderViewDateFormatter.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = GalleryHeaderViewDateFormatter.swift; sourceTree = "<group>"; };
 		AD51D9172DB9543A0068D0B0 /* MessageViewModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MessageViewModel.swift; sourceTree = "<group>"; };
 		AD5C0A5E2D6FDD8600E1E500 /* BouncedMessageActionsModifier.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = BouncedMessageActionsModifier.swift; sourceTree = "<group>"; };
 		AD6B7E042D356E8800ADEF39 /* ReactionsUsersViewModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ReactionsUsersViewModel.swift; sourceTree = "<group>"; };
@@ -1950,6 +1952,7 @@
 		8465FD382746A95600AF091E /* Common */ = {
 			isa = PBXGroup;
 			children = (
+				AD3DB82E2E7C2E190023D377 /* GalleryHeaderViewDateFormatter.swift */,
 				4FCD7DBC2D633F6C000EEB0F /* AttributedString+Extensions.swift */,
 				8465FD392746A95600AF091E /* AutoLayoutHelpers.swift */,
 				8465FD452746A95600AF091E /* Cache.swift */,
@@ -2778,6 +2781,7 @@
 				82D64BD62AD7E5B700C5C79E /* Animator.swift in Sources */,
 				8465FDB52746A95700AF091E /* Cache.swift in Sources */,
 				84A1CAD12816C6900046595A /* AddUsersViewModel.swift in Sources */,
+				AD3DB82F2E7C2E190023D377 /* GalleryHeaderViewDateFormatter.swift in Sources */,
 				82D64BDA2AD7E5B700C5C79E /* UIImage.swift in Sources */,
 				4F198FDD2C0480EC00148F49 /* Publisher+Extensions.swift in Sources */,
 				84289BEF2807246E00282ABE /* FileAttachmentsViewModel.swift in Sources */,
diff --git a/StreamChatSwiftUITests/Tests/ChatChannel/GalleryView_Tests.swift b/StreamChatSwiftUITests/Tests/ChatChannel/GalleryView_Tests.swift
@@ -46,6 +46,56 @@ class GalleryView_Tests: StreamChatTestCase {
         assertSnapshot(matching: header, as: .image(perceptualPrecision: precision))
     }
 
+    func test_galleryHeader_withMessageCreatedToday_snapshot() {
+        // Given
+        let imageMessage = ChatMessage.mock(
+            id: .unique,
+            cid: .unique,
+            text: "test message",
+            author: .mock(id: .unique),
+            createdAt: .now,
+            attachments: ChatChannelTestHelpers.imageAttachments
+        )
+
+        // When
+        let view = GalleryView(
+            imageAttachments: imageMessage.imageAttachments,
+            author: imageMessage.author,
+            isShown: .constant(true),
+            selected: 0,
+            message: imageMessage
+        )
+        .applyDefaultSize()
+
+        // Then
+        assertSnapshot(matching: view, as: .image(perceptualPrecision: precision))
+    }
+
+    func test_galleryHeader_withMessageExactDate_snapshot() {
+        // Given
+        let imageMessage = ChatMessage.mock(
+            id: .unique,
+            cid: .unique,
+            text: "test message",
+            author: .mock(id: .unique),
+            createdAt: Date(timeIntervalSince1970: 1_726_662_904),
+            attachments: ChatChannelTestHelpers.imageAttachments
+        )
+
+        // When
+        let view = GalleryView(
+            imageAttachments: imageMessage.imageAttachments,
+            author: imageMessage.author,
+            isShown: .constant(true),
+            selected: 0,
+            message: imageMessage
+        )
+        .applyDefaultSize()
+
+        // Then
+        assertSnapshot(matching: view, as: .image(perceptualPrecision: precision))
+    }
+
     func test_gridView_snapshotLoading() {
         // Given
         let view = GridMediaView(
diff --git a/StreamChatSwiftUITests/Tests/ChatChannel/__Snapshots__/FileAttachmentView_Tests/test_fileAttachmentView_downloadedState.1.png b/StreamChatSwiftUITests/Tests/ChatChannel/__Snapshots__/FileAttachmentView_Tests/test_fileAttachmentView_downloadedState.1.png
diff --git a/StreamChatSwiftUITests/Tests/ChatChannel/__Snapshots__/GalleryView_Tests/test_galleryHeader_withMessageCreatedToday_snapshot.1.png b/StreamChatSwiftUITests/Tests/ChatChannel/__Snapshots__/GalleryView_Tests/test_galleryHeader_withMessageCreatedToday_snapshot.1.png
diff --git a/StreamChatSwiftUITests/Tests/ChatChannel/__Snapshots__/GalleryView_Tests/test_galleryHeader_withMessageExactDate_snapshot.1.png b/StreamChatSwiftUITests/Tests/ChatChannel/__Snapshots__/GalleryView_Tests/test_galleryHeader_withMessageExactDate_snapshot.1.png

Original file line number	Diff line number	Diff line change
`@@ -466,7 +466,8 @@ extension ViewFactory {`
`466`	`466`	`mediaAttachments: mediaAttachments,`
`467`	`467`	`author: message.author,`
`468`	`468`	`isShown: isShown,`
`469`		`- selected: options.selectedIndex`
	`469`	`+ selected: options.selectedIndex,`
	`470`	`+ message: message`
`470`	`471`	`)`
`471`	`472`	`}`
`472`	`473`