From 34d5f45a73bcd643f2b47c447743535c43db3b7e Mon Sep 17 00:00:00 2001 From: OtavioStasiak Date: Tue, 11 Aug 2026 18:54:30 -0300 Subject: [PATCH 1/5] feat: add formatLongDate with locale-aware ordinal day --- app/lib/dayjs/index.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/app/lib/dayjs/index.ts b/app/lib/dayjs/index.ts index 141d496ae68..98ab39343ab 100644 --- a/app/lib/dayjs/index.ts +++ b/app/lib/dayjs/index.ts @@ -4,6 +4,7 @@ import timezone from 'dayjs/plugin/timezone'; import calendar from 'dayjs/plugin/calendar'; import relativeTime from 'dayjs/plugin/relativeTime'; import localizedFormat from 'dayjs/plugin/localizedFormat'; +import advancedFormat from 'dayjs/plugin/advancedFormat'; import 'dayjs/locale/en'; import 'dayjs/locale/ar'; @@ -36,6 +37,15 @@ dayjs.extend(timezone); dayjs.extend(calendar); dayjs.extend(relativeTime); dayjs.extend(localizedFormat); +dayjs.extend(advancedFormat); + +// Web's date-fns `PPP` (its `LL`) uses an ordinal day in English only; dayjs' `LL` never does. +const ORDINAL_DAY_LOCALES = ['en']; + +export const formatLongDate = (ts: Date | number | string): string => { + const date = dayjs(ts); + return ORDINAL_DAY_LOCALES.includes(date.locale()) ? date.format('MMMM Do, YYYY') : date.format('LL'); +}; // WatermelonDB hands a message `ts` back as Date, ms number, or ISO string depending on the read path; // dayjs parses all three where Number(ts) / new Date(ts) each NaN on one. Normalize to ms since epoch. From 36f67c7f9b014718d3839f7d7b2a822a2800552f Mon Sep 17 00:00:00 2001 From: OtavioStasiak Date: Tue, 11 Aug 2026 18:55:17 -0300 Subject: [PATCH 2/5] fix: date separator pill background and web-aligned colors --- app/containers/MessageSeparator.tsx | 21 +++++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/app/containers/MessageSeparator.tsx b/app/containers/MessageSeparator.tsx index 90fe044954d..d0d20d70d98 100644 --- a/app/containers/MessageSeparator.tsx +++ b/app/containers/MessageSeparator.tsx @@ -1,7 +1,7 @@ import { type ReactElement } from 'react'; import { StyleSheet, Text, View } from 'react-native'; -import dayjs from '../lib/dayjs'; +import { formatLongDate } from '../lib/dayjs'; import I18n from '../i18n'; import sharedStyles from '../views/Styles'; import { themes } from '../lib/constants/colors'; @@ -26,6 +26,11 @@ const styles = StyleSheet.create({ }, marginHorizontal: { marginHorizontal: 14 + }, + label: { + paddingHorizontal: 8, + paddingVertical: 2, + borderRadius: 16 } }); @@ -36,9 +41,10 @@ const MessageSeparator = ({ ts, unread }: { ts?: Date | string | null; unread?: return null; } - const date = ts ? dayjs(ts).format('LL') : null; - const unreadLine = { backgroundColor: themes[theme].buttonBackgroundDangerDefault }; + const date = ts ? formatLongDate(ts) : null; + const unreadLine = { backgroundColor: themes[theme].strokeError }; const unreadText = { color: themes[theme].fontDanger }; + const line = { backgroundColor: themes[theme].strokeLight }; if (ts && unread) { return ( @@ -51,9 +57,12 @@ const MessageSeparator = ({ ts, unread }: { ts?: Date | string | null; unread?: if (ts) { return ( - - {date} - + + + {date} + + ); } From 846fb503d450960b6f53413c523558ea3e8bcc61 Mon Sep 17 00:00:00 2001 From: OtavioStasiak Date: Tue, 11 Aug 2026 18:55:32 -0300 Subject: [PATCH 3/5] fix: snapshot --- .../__snapshots__/Message.test.tsx.snap | 74 +++++++++++++------ 1 file changed, 52 insertions(+), 22 deletions(-) diff --git a/app/containers/message/components/__tests__/__snapshots__/Message.test.tsx.snap b/app/containers/message/components/__tests__/__snapshots__/Message.test.tsx.snap index 674d94dd4b5..5aa8b20583e 100644 --- a/app/containers/message/components/__tests__/__snapshots__/Message.test.tsx.snap +++ b/app/containers/message/components/__tests__/__snapshots__/Message.test.tsx.snap @@ -22711,7 +22711,7 @@ exports[`Story Snapshots: DateAndUnreadSeparators should match snapshot 1`] = ` ] } > - November 10, 2017 + November 10th, 2017 - - November 10, 2017 - + + November 10th, 2017 + + - November 10, 2017 + November 10th, 2017 - - November 10, 2017 - + + November 10th, 2017 + + Date: Tue, 11 Aug 2026 19:28:40 -0300 Subject: [PATCH 4/5] code improvements --- app/containers/MessageSeparator.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/app/containers/MessageSeparator.tsx b/app/containers/MessageSeparator.tsx index d0d20d70d98..9234d656849 100644 --- a/app/containers/MessageSeparator.tsx +++ b/app/containers/MessageSeparator.tsx @@ -42,9 +42,10 @@ const MessageSeparator = ({ ts, unread }: { ts?: Date | string | null; unread?: } const date = ts ? formatLongDate(ts) : null; - const unreadLine = { backgroundColor: themes[theme].strokeError }; + const unreadLine = { backgroundColor: themes[theme].buttonBackgroundDangerDefault }; const unreadText = { color: themes[theme].fontDanger }; - const line = { backgroundColor: themes[theme].strokeLight }; + const lineBackground = { backgroundColor: themes[theme].strokeLight }; + if (ts && unread) { return ( @@ -57,12 +58,12 @@ const MessageSeparator = ({ ts, unread }: { ts?: Date | string | null; unread?: if (ts) { return ( - + {date} - + ); } From b3baab7993d436fa231ded2f818520d842970df0 Mon Sep 17 00:00:00 2001 From: OtavioStasiak Date: Tue, 11 Aug 2026 22:29:30 +0000 Subject: [PATCH 5/5] chore: format code and fix lint issues --- app/containers/MessageSeparator.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/containers/MessageSeparator.tsx b/app/containers/MessageSeparator.tsx index 9234d656849..3a07087d270 100644 --- a/app/containers/MessageSeparator.tsx +++ b/app/containers/MessageSeparator.tsx @@ -45,7 +45,7 @@ const MessageSeparator = ({ ts, unread }: { ts?: Date | string | null; unread?: const unreadLine = { backgroundColor: themes[theme].buttonBackgroundDangerDefault }; const unreadText = { color: themes[theme].fontDanger }; const lineBackground = { backgroundColor: themes[theme].strokeLight }; - + if (ts && unread) { return (