implemented the UI to render the formatted floating date

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)
     }