fix: avoid duplicate day badge from animated header (#2709) (#2747)

After aligning the animated header's date with the visible group, the
floating header could briefly show the same date as the inline day
separator while that separator was still on screen, producing a stacked
duplicate date badge during scroll.

Gate the floating header's opacity on relativeScrolledPositionToBottomOfDay:
only show it once the current day's inline separator has scrolled off the
top (< 0). While the inline separator is still visible (>= 0) it already
shows the date, so the floating copy stays hidden - a clean handoff with no
duplicate.

Author: kesha-antonov

src/MessagesContainer/components/DayAnimated/index.tsx

@@ -71,8 +71,17 @@ export const DayAnimated = ({ scrolledY, daysPositions, listHeight, renderDay, m
   }), [relativeScrolledPositionToBottomOfDay, containerHeight, dayTopOffset, isLoadingAnim])
 
   const contentStyle = useAnimatedStyle(() => ({
-    opacity: opacity.value,
-  }), [opacity])
+    // Only show the floating header once the current day's inline separator has
+    // scrolled off the top (relativeScrolledPositionToBottomOfDay < 0). While the
+    // inline separator is still on screen (>= 0) it already shows the date, so
+    // hiding the floating copy avoids a duplicate date badge (#2709).
+    opacity: opacity.value * interpolate(
+      relativeScrolledPositionToBottomOfDay.value,
+      [-0.0001, 0],
+      [1, 0],
+      'clamp'
+    ),
+  }), [opacity, relativeScrolledPositionToBottomOfDay])
 
   const fadeOut = useCallback(() => {
     'worklet'