implemented the UI to render the formatted floating date

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

@@ -7,20 +7,53 @@
 
 import SwiftUI
 
+/// A single banner item to be displayed in a `topBanners` overlay.
+struct TopBannerItem {
+    var banner: AnyView
+    var isVisible: Bool
+    
+    init(_ banner: some View, isVisible: Bool) {
+        self.banner = AnyView(banner)
+        self.isVisible = isVisible
+    }
+}
+
 extension View {
     /// Overlays the given banner view at the top edge of this view, using a
     /// slide from the top edge when `isVisible` is toggled.
-    func topBanner(_ banner: some View, isVisible: Bool) -> some View {
-        overlay(alignment: .top) {
-            ZStack {
-                if isVisible {
-                    banner.transition(.move(edge: .top))
-                } else {
-                    // An equal amount of space needs to be reserved in order for the transition to work.
-                    banner.hidden()
+    func topBanner(_ banner: some View, isVisible: Bool, footer: some View = EmptyView()) -> some View {
+        topBanners([TopBannerItem(banner, isVisible: isVisible)], footer: footer)
+    }
+    
+    /// Overlays the given banner views at the top edge of this view. Each banner
+    /// slides from the top edge based on its own `isVisible` flag. Later items in
+    /// the array are overlayed on top of earlier ones. The footer is shared across
+    /// all banners and displayed below the topmost visible banner.
+    func topBanners(_ items: [TopBannerItem], footer: some View = EmptyView()) -> some View {
+        let anyBannerVisible = items.contains { $0.isVisible }
+        return overlay(alignment: .top) {
+            ZStack(alignment: .top) {
+                // Visible layout
+                VStack(spacing: 0) {
+                    ZStack(alignment: .top) {
+                        ForEach(Array(items.enumerated()), id: \.offset) { _, item in
+                            if item.isVisible {
+                                item.banner
+                                    .transition(.move(edge: .top))
+                            }
+                        }
+                    }
+                    footer
+                        // Banners include a 28 padding to include shadows in their size
+                        // so we need to remove 28 if any is visible
+                        .padding(.top, anyBannerVisible ? -15 : 13)
                 }
+                // Hidden layout used for sizing when no banner is visible
+                Color.clear
+                    .hidden()
+                    .allowsHitTesting(false)
             }
-            .animation(.elementDefault, value: isVisible)
+            .animation(.elementDefault, value: items.map(\.isVisible))
             .clipped()
         }
     }

ElementX/Sources/Other/TestablePreview/TestablePreviewsDictionary.swift

@@ -47,6 +47,7 @@ enum TestablePreviewsDictionary {
         "EstimatedWaveformView_Previews" : EstimatedWaveformView_Previews.self,
         "FileMediaEventsTimelineView_Previews" : FileMediaEventsTimelineView_Previews.self,
         "FileRoomTimelineView_Previews" : FileRoomTimelineView_Previews.self,
+        "FloatingDateBadge_Previews" : FloatingDateBadge_Previews.self,
         "FormButtonStyles_Previews" : FormButtonStyles_Previews.self,
         "FormattedBodyText_Previews" : FormattedBodyText_Previews.self,
         "FormattingToolbar_Previews" : FormattingToolbar_Previews.self,

ElementX/Sources/Screens/RoomScreen/View/RoomScreen.swift

@@ -33,9 +33,11 @@ struct RoomScreen: View {
                 .accessibilityIdentifier(A11yIdentifiers.roomScreen.scrollToBottom)
             }
             .background(Color.compound.bgCanvasDefault.ignoresSafeArea())
-            .topBanner(pinnedItemsBanner, isVisible: context.viewState.shouldShowPinnedEventsBanner && !isVoiceOverEnabled)
-            // This can overlay on top of the pinnedItemsBanner
-            .topBanner(knockRequestsBanner, isVisible: context.viewState.shouldSeeKnockRequests)
+            .topBanners([
+                TopBannerItem(pinnedItemsBanner, isVisible: context.viewState.shouldShowPinnedEventsBanner && !isVoiceOverEnabled),
+                // This can overlay on top of the pinnedItemsBanner
+                TopBannerItem(knockRequestsBanner, isVisible: context.viewState.shouldSeeKnockRequests)
+            ], footer: dateBadge)
             .safeAreaInset(edge: .top) {
                 // When VoiceOver is enabled, the table view isn't reversed and the scroll gestures
                 // don't trigger meaning the banner never hides itself and so the .overlay layout
@@ -88,6 +90,13 @@ struct RoomScreen: View {
             .padding(.top, 16)
     }
     
+    @ViewBuilder
+    private var dateBadge: some View {
+        if timelineContext.viewState.floatingTimelineDateEnabled, !isVoiceOverEnabled {
+            FloatingDateBadge(dateText: timelineContext.floatingDateText)
+        }
+    }
+    
     private func dismissKnockRequestsBanner() {
         context.send(viewAction: .dismissKnockRequests)
     }

ElementX/Sources/Screens/ThreadTimelineScreen/View/ThreadTimelineScreen.swift

@@ -31,6 +31,12 @@ struct ThreadTimelineScreen: View {
             .toolbar { toolbar }
             .toolbarBackground(.visible, for: .navigationBar) // Fix the toolbar's background.
             .timelineMediaPreview(viewModel: $context.mediaPreviewViewModel)
+            .overlay(alignment: .top) {
+                if timelineContext.viewState.floatingTimelineDateEnabled {
+                    FloatingDateBadge(dateText: timelineContext.floatingDateText)
+                        .padding(.top, 13)
+                }
+            }
             .overlay(alignment: .bottomTrailing) {
                 TimelineScrollToBottomButton(isVisible: isAtBottomAndLive) {
                     timelineContext.send(viewAction: .scrollToBottom)

ElementX/Sources/Screens/Timeline/View/FloatingDateBadge.swift

@@ -0,0 +1,58 @@
+//
+// Copyright 2025 Element Creations Ltd.
+//
+// SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial.
+// Please see LICENSE files in the repository root for full details.
+//
+
+import Compound
+import SwiftUI
+
+/// A floating badge that displays the date of the topmost visible timeline item
+/// while the user is scrolling the timeline. It fades in when scrolling starts and
+/// fades out shortly after scrolling stops.
+struct FloatingDateBadge: View {
+    let dateText: String?
+    
+    @Environment(\.colorScheme) private var colorScheme: ColorScheme
+    
+    private var backgroundColor: Color {
+        switch colorScheme {
+        case .dark:
+            .compound.bgSubtlePrimary
+        default:
+            .compound.bgCanvasDefault
+        }
+    }
+    
+    var body: some View {
+        ZStack {
+            if let dateText {
+                Text(dateText)
+                    .font(.compound.bodySMSemibold)
+                    .foregroundColor(.compound.textPrimary)
+                    .padding(.horizontal, 16)
+                    .padding(.vertical, 8)
+                    .background(Capsule()
+                        .fill(backgroundColor))
+                    .shadow(color: Color(red: 0.11, green: 0.11, blue: 0.13).opacity(0.1), radius: 12, x: 0, y: 4)
+                    .transition(.opacity)
+            }
+        }
+        .animation(.easeInOut(duration: 0.15).disabledDuringTests(), value: dateText)
+    }
+}
+
+// MARK: - Previews
+
+struct FloatingDateBadge_Previews: PreviewProvider, TestablePreview {
+    static var previews: some View {
+        VStack(spacing: 20) {
+            FloatingDateBadge(dateText: "Today")
+            FloatingDateBadge(dateText: "Yesterday")
+            FloatingDateBadge(dateText: "Tuesday, January 9, 2007")
+        }
+        .padding()
+        .previewLayout(.sizeThatFits)
+    }
+}

ElementX/Sources/Screens/Timeline/View/TimelineView.swift

@@ -83,6 +83,7 @@ struct TimelineViewRepresentable: UIViewControllerRepresentable {
     func makeUIViewController(context: Context) -> TimelineTableViewController {
         TimelineTableViewController(coordinator: context.coordinator,
                                     isScrolledToBottom: $viewModelContext.isScrolledToBottom,
+                                    floatingDateText: $viewModelContext.floatingDateText,
                                     scrollToBottomPublisher: viewModelContext.viewState.timelineState.scrollToBottomPublisher)
     }