minimal date separator with time

src/components/dms/DateDivider.tsx

@@ -1,55 +1,78 @@
 import React from 'react'
 import {View} from 'react-native'
-import {msg} from '@lingui/macro'
+import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {atoms as a, useTheme} from '#/alf'
 import {Text} from '../Typography'
 import {localDateString} from './util'
 
+const timeFormatter = new Intl.DateTimeFormat(undefined, {
+  hour: 'numeric',
+  minute: 'numeric',
+})
+const weekdayFormatter = new Intl.DateTimeFormat(undefined, {
+  weekday: 'long',
+})
+const longDateFormatter = new Intl.DateTimeFormat(undefined, {
+  weekday: 'short',
+  month: 'long',
+  day: 'numeric',
+})
+const longDateFormatterWithYear = new Intl.DateTimeFormat(undefined, {
+  weekday: 'short',
+  month: 'long',
+  day: 'numeric',
+  year: 'numeric',
+})
+
 let DateDivider = ({date: dateStr}: {date: string}): React.ReactNode => {
   const {_} = useLingui()
   const t = useTheme()
 
-  let display: string
+  let date: string
+  const time = timeFormatter.format(new Date(dateStr))
 
-  const date = new Date(dateStr)
+  const timestamp = new Date(dateStr)
 
   const today = new Date()
   const yesterday = new Date()
   yesterday.setDate(today.getDate() - 1)
+  const oneWeekAgo = new Date()
+  oneWeekAgo.setDate(today.getDate() - 7)
 
-  if (localDateString(today) === localDateString(date)) {
-    display = _(msg`Today`)
-  } else if (localDateString(yesterday) === localDateString(date)) {
-    display = _(msg`Yesterday`)
+  if (localDateString(today) === localDateString(timestamp)) {
+    date = _(msg`Today`)
+  } else if (localDateString(yesterday) === localDateString(timestamp)) {
+    date = _(msg`Yesterday`)
   } else {
-    display = new Intl.DateTimeFormat(undefined, {
-      day: 'numeric',
-      month: 'numeric',
-      year: 'numeric',
-    }).format(date)
+    if (timestamp > oneWeekAgo) {
+      if (timestamp.getFullYear() === today.getFullYear()) {
+        date = longDateFormatter.format(timestamp)
+      } else {
+        date = longDateFormatterWithYear.format(timestamp)
+      }
+    } else {
+      date = weekdayFormatter.format(timestamp)
+    }
   }
 
   return (
-    <View style={[a.w_full, a.relative, a.my_lg, a.flex_row, a.justify_center]}>
-      <View
-        style={[
-          a.border_b,
-          t.atoms.border_contrast_low,
-          a.mx_lg,
-          a.absolute,
-          {top: '50%', left: 0, right: 0},
-        ]}
-      />
+    <View style={[a.w_full, a.my_lg]}>
       <Text
         style={[
+          a.text_xs,
           a.text_center,
           t.atoms.bg,
           t.atoms.text_contrast_medium,
           a.px_md,
         ]}>
-        {display}
+        <Trans>
+          <Text style={[a.text_xs, t.atoms.text_contrast_medium, a.font_bold]}>
+            {date}
+          </Text>{' '}
+          at {time}
+        </Trans>
       </Text>
     </View>
   )

src/components/dms/MessageItem.tsx

@@ -41,8 +41,6 @@ let MessageItem = ({
 
   const isNextFromSameSender = isNextFromSelf === isFromSelf
 
-  const needsTail = !nextIsMessage || !isNextFromSameSender
-
   const isNewDay = useMemo(() => {
     // TODO: figure out how we can show this for when we're at the start
     // of the conversation
@@ -54,6 +52,17 @@ let MessageItem = ({
     return localDateString(thisDate) !== localDateString(prevDate)
   }, [message, prevMessage])
 
+  const isLastMessageOfDay = useMemo(() => {
+    if (!nextMessage || !nextIsMessage) return true
+
+    const thisDate = new Date(message.sentAt)
+    const prevDate = new Date(nextMessage.sentAt)
+
+    return localDateString(thisDate) !== localDateString(prevDate)
+  }, [message.sentAt, nextIsMessage, nextMessage])
+
+  const needsTail = isLastMessageOfDay || !isNextFromSameSender
+
   const isLastInGroup = useMemo(() => {
     // if this message is pending, it means the next message is pending too
     if (isPending && nextMessage) {