Skip to content

Commit d4a8e0c

Browse files
committed
Don't use relative times for Conversations panel timestamps.
Instead, we move to Telegram-style timestamping: * If the conversation last received a message today, just the time of the message is used, e.g. 12:03. * If the conversation last received a message in the last week, just the day of the message is used, e.g. Mon. * If the conversation last received a message more than a week ago, the date of the message is used, e.g. 13/03/2023.
1 parent 03f58e5 commit d4a8e0c

File tree

1 file changed

+21
-9
lines changed

1 file changed

+21
-9
lines changed

ts/components/conversation/Timestamp.tsx

Lines changed: 21 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import moment from 'moment';
55
import useInterval from 'react-use/lib/useInterval';
66
import styled from 'styled-components';
77
import useUpdate from 'react-use/lib/useUpdate';
8+
import { sync as osLocaleSync } from 'os-locale';
89

910
type Props = {
1011
timestamp?: number;
@@ -19,7 +20,6 @@ const TimestampContainerNotListItem = styled.div`
1920
font-size: var(--font-size-xs);
2021
line-height: 16px;
2122
letter-spacing: 0.3px;
22-
text-transform: uppercase;
2323
user-select: none;
2424
`;
2525

@@ -42,14 +42,26 @@ export const Timestamp = (props: Props) => {
4242
}
4343

4444
const momentValue = moment(timestamp);
45-
// this is a hack to make the date string shorter, looks like moment does not have a localized way of doing this for now.
46-
47-
const dateString = momentFromNow
48-
? momentValue
49-
.fromNow()
50-
.replace('minutes', 'mins')
51-
.replace('minute', 'min')
52-
: momentValue.format('lll');
45+
let dateString: string = '';
46+
// Set the locale for the timestamps.
47+
moment.locale(osLocaleSync().replace(/_/g, '-'));
48+
49+
if (momentFromNow) {
50+
const now = moment();
51+
52+
if (momentValue.isSame(now, 'day')) {
53+
// Today: Use the time only.
54+
dateString = momentValue.format('LT');
55+
} else if (now.diff(momentValue, 'days') < 6) {
56+
// Less than a week old: Use the day only.
57+
dateString = momentValue.format('ddd');
58+
} else {
59+
// More than a week old: Use the full date.
60+
dateString = momentValue.format('L');
61+
}
62+
} else {
63+
dateString = momentValue.format('lll');
64+
}
5365

5466
const title = moment(timestamp).format('llll');
5567
if (props.isConversationListItem) {

0 commit comments

Comments
 (0)