Add floating/sticky date badge in the timeline (#6496)

* Add floating date indicator while scrolling the timeline (#6433)

* Add `FeatureFlags.FloatingDateBadge`. This enables displaying the floating date badge in the timeline as you scroll.

* Don't display the floating badge if the timeline isn't reversed. Otherwise, this will affect talkback users and break the existing navigation

* Use `TimelineItem.formattedDate()` to get the date to display. Always try finding the closest one (usually it will be just the 1st one we try).

* Align designs with iOS. Also fix shadows in fade animation by adding some paddings.

* Update screenshots

---------

Co-authored-by: Gianluca Iavicoli <gianluca.iavicoli04@gmail.com>
Co-authored-by: ElementBot <android@element.io>

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/ColorAliases.kt

@@ -75,6 +75,9 @@ val SemanticColors.pinnedMessageBannerIndicator
 val SemanticColors.pinnedMessageBannerBorder
     get() = if (isLight) LightColorTokens.colorAlphaGray400 else DarkColorTokens.colorAlphaGray400
 
+val SemanticColors.floatingDateBadgeBackground
+    get() = if (isLight) bgCanvasDefault else bgSubtlePrimary
+
 @PreviewsDayNight
 @Composable
 internal fun ColorAliasesPreview() = ElementPreview {

libraries/featureflag/api/src/main/kotlin/io/element/android/libraries/featureflag/api/FeatureFlags.kt

@@ -156,10 +156,17 @@ enum class FeatureFlags(
     ),
     ValidateNetworkWhenSchedulingNotificationFetching(
         key = "feature.validate_network_when_scheduling_notification_fetching",
-        title = "validate internet connectivity when scheduling notification fetching",
+        title = "Validate internet connectivity when scheduling notification fetching",
         description = "Only fetch events for push notifications when the device has internet connectivity. " +
             "Enabling this can be problematic in air-gapped environments.",
         defaultValue = { true },
         isFinished = false,
     ),
+    FloatingDateBadge(
+        key = "feature.floating_date_badge",
+        title = "Display sticky date headers in the timeline",
+        description = "When scrolling, a sticky date badge will be displayed so you can easily know on which date the messages you're seeing were sent.",
+        defaultValue = { false },
+        isFinished = false,
+    ),
 }