Timeline date headers

_locales/en/messages.json

@@ -571,11 +571,11 @@
   },
   "today": {
     "message": "Today",
-    "description": "Section header in the media gallery"
+    "description": "The string \"today\""
   },
   "yesterday": {
     "message": "Yesterday",
-    "description": "Section header in the media gallery"
+    "description": "The string \"yesterday\""
   },
   "thisWeek": {
     "message": "This Week",
@@ -2085,6 +2085,14 @@
     "message": "MMM D",
     "description": "Timestamp format string for displaying month and day (but not the year) of a date within the current year, ex: use 'MMM D' for 'Aug 8', or 'D MMM' for '8 Aug'."
   },
+  "timestampFormat__long__today": {
+    "message": "[Today] LT",
+    "description": "Timestamp format string for displaying \"Today\" and the time"
+  },
+  "timestampFormat__long__yesterday": {
+    "message": "[Yesterday] LT",
+    "description": "Timestamp format string for displaying \"Yesterday\" and the time"
+  },
   "messageBodyTooLong": {
     "message": "Message body is too long.",
     "description": "Shown if the user tries to send more than 64kb of text"
@@ -5941,6 +5949,14 @@
     "message": "Continue",
     "description": "aria-label for the 'next' button in the forward a message modal dialog"
   },
+  "TimelineDateHeader--date-in-last-6-months": {
+    "message": "ddd, MMM D",
+    "description": "Moment.js format for date headers in the message timeline, for dates <6 months old. See https://momentjs.com/docs/#/displaying/format/."
+  },
+  "TimelineDateHeader--date-older-than-6-months": {
+    "message": "MMM D, YYYY",
+    "description": "Moment.js format for date headers in the message timeline, for dates >=6 months old. See https://momentjs.com/docs/#/displaying/format/."
+  },
   "MessageRequestWarning__learn-more": {
     "message": "Learn more",
     "description": "Shown on the message request warning. Clicking this button will open a dialog with more information"

stylesheets/_mixins.scss

@@ -1,4 +1,4 @@
-// Copyright 2016-2021 Signal Messenger, LLC
+// Copyright 2016-2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 // Fonts
@@ -686,3 +686,15 @@
     font-weight: normal;
   }
 }
+
+@mixin timeline-floating-header-node {
+  @include rounded-corners;
+  box-shadow: 0 1px 4px $color-black-alpha-20;
+
+  @include light-theme {
+    background: $color-white;
+  }
+  @include dark-theme {
+    background: $color-gray-80;
+  }
+}

stylesheets/_modules.scss

@@ -4902,25 +4902,19 @@ button.module-image__border-overlay:focus {
           }
 
           &__date {
+            @include font-caption;
             display: inline-block;
             flex-shrink: 0;
+            margin-left: 6px;
+            overflow-x: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
 
-            &__timestamp {
+            @include light-theme {
-              flex-shrink: 0;
+              color: $color-gray-60;
-              margin-left: 6px;
+            }
-
+            @include dark-theme {
-              @include font-caption;
+              color: $color-gray-25;
-
-              overflow-x: hidden;
-              white-space: nowrap;
-              text-overflow: ellipsis;
-
-              @include light-theme {
-                color: $color-gray-60;
-              }
-              @include dark-theme {
-                color: $color-gray-25;
-              }
             }
           }
         }
@@ -5460,26 +5454,6 @@ button.module-image__border-overlay:focus {
   cursor: col-resize;
 }
 
-// Module: Timeline Loading Row
-
-.module-timeline-loading-row {
-  height: 48px;
-  padding: 12px;
-
-  display: flex;
-  flex-direction: columns;
-  justify-content: center;
-  align-items: center;
-
-  @include light-theme {
-    color: $color-gray-75;
-  }
-
-  @include dark-theme {
-    color: $color-gray-25;
-  }
-}
-
 // Module: Timeline
 
 .module-timeline {
@@ -6885,41 +6859,6 @@ button.module-image__border-overlay:focus {
   @include emoji-size(66px);
 }
 
-// Module: Countdown
-
-.module-countdown {
-  display: block;
-  width: 24px;
-  height: 24px;
-}
-
-// Note: the colors here should match the module-spinner's on-background colors
-.module-countdown__front-path {
-  fill-opacity: 0;
-  stroke-width: 2;
-
-  @include light-theme {
-    stroke: $color-gray-60;
-  }
-
-  @include dark-theme {
-    stroke: $color-gray-25;
-  }
-}
-
-.module-countdown__back-path {
-  fill-opacity: 0;
-  stroke-width: 2;
-
-  @include light-theme {
-    stroke: $color-gray-05;
-  }
-
-  @include dark-theme {
-    stroke: $color-gray-75;
-  }
-}
-
 // Module: CompositionInput
 .module-composition-input {
   &__quill {

stylesheets/components/TimelineDateHeader.scss

@@ -0,0 +1,25 @@
+// Copyright 2022 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+.TimelineDateHeader {
+  @include font-body-2;
+  display: block;
+  text-align: center;
+  user-select: none;
+
+  @include light-theme {
+    color: $color-gray-60;
+  }
+  @include dark-theme {
+    color: $color-gray-05;
+  }
+
+  &--inline {
+    padding: 20px;
+  }
+
+  &--floating {
+    @include timeline-floating-header-node;
+    padding: 5px 10px;
+  }
+}

stylesheets/components/TimelineFloatingHeader.scss

@@ -0,0 +1,38 @@
+// Copyright 2022 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+.TimelineFloatingHeader {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  left: 0;
+  pointer-events: none;
+  position: absolute;
+  top: 10px;
+  width: 100%;
+  z-index: $z-index-above-base;
+
+  &--visible {
+    opacity: 1;
+  }
+
+  &--hidden {
+    opacity: 0;
+    transition: opacity 0.5s ease-out;
+  }
+
+  &__spinner-container {
+    @include timeline-floating-header-node;
+    margin-top: 12px;
+    padding: 6px;
+
+    &--visible {
+      opacity: 1;
+    }
+
+    &--hidden {
+      opacity: 0;
+      transition: opacity 0.1s ease-out 0.3s;
+    }
+  }
+}

stylesheets/manifest.scss

@@ -98,7 +98,9 @@
 @import './components/Slider.scss';
 @import './components/SystemMessage.scss';
 @import './components/Tabs.scss';
-@import './components/Toast.scss';
+@import './components/TimelineDateHeader.scss';
+@import './components/TimelineFloatingHeader.scss';
 @import './components/TimelineWarning.scss';
 @import './components/TimelineWarnings.scss';
+@import './components/Toast.scss';
 @import './components/WhatsNew.scss';

ts/RemoteConfig.ts

@@ -10,6 +10,8 @@ export type ConfigKeyType =
   | 'desktop.announcementGroup'
   | 'desktop.clientExpiration'
   | 'desktop.disableGV1'
+  | 'desktop.floatingDateHeaders.beta'
+  | 'desktop.floatingDateHeaders.production'
   | 'desktop.groupCallOutboundRing'
   | 'desktop.groupCalling'
   | 'desktop.gv2'

ts/background.ts

@@ -949,6 +949,7 @@ export async function startApp(): Promise<void> {
         i18n: window.i18n,
         interactionMode: window.getInteractionMode(),
         theme,
+        version: window.getVersion(),
       },
     };
 

ts/components/Countdown.stories.tsx

@@ -1,48 +0,0 @@
-// Copyright 2020 Signal Messenger, LLC
-// SPDX-License-Identifier: AGPL-3.0-only
-
-import React from 'react';
-
-import { action } from '@storybook/addon-actions';
-import { date, number } from '@storybook/addon-knobs';
-import { storiesOf } from '@storybook/react';
-
-import type { Props } from './Countdown';
-import { Countdown } from './Countdown';
-
-const defaultDuration = 10 * 1000;
-const createProps = (overrideProps: Partial<Props> = {}): Props => ({
-  duration: number('duration', overrideProps.duration || defaultDuration),
-  expiresAt: date(
-    'expiresAt',
-    overrideProps.expiresAt
-      ? new Date(overrideProps.expiresAt)
-      : new Date(Date.now() + defaultDuration)
-  ),
-  onComplete: action('onComplete'),
-});
-
-const story = storiesOf('Components/Countdown', module);
-
-story.add('Just Started', () => {
-  const props = createProps();
-
-  return <Countdown {...props} />;
-});
-
-story.add('In Progress', () => {
-  const props = createProps({
-    duration: 3 * defaultDuration,
-    expiresAt: Date.now() + defaultDuration,
-  });
-
-  return <Countdown {...props} />;
-});
-
-story.add('Done', () => {
-  const props = createProps({
-    expiresAt: Date.now() - defaultDuration,
-  });
-
-  return <Countdown {...props} />;
-});

ts/components/Countdown.tsx

@@ -1,110 +0,0 @@
-// Copyright 2019-2021 Signal Messenger, LLC
-// SPDX-License-Identifier: AGPL-3.0-only
-
-import React from 'react';
-
-export type Props = {
-  duration: number;
-  expiresAt: number;
-  onComplete?: () => unknown;
-};
-type State = {
-  ratio: number;
-};
-
-const CIRCUMFERENCE = 11.013 * 2 * Math.PI;
-
-export class Countdown extends React.Component<Props, State> {
-  public looping = false;
-
-  constructor(props: Props) {
-    super(props);
-
-    const { duration, expiresAt } = this.props;
-    const ratio = getRatio(expiresAt, duration);
-
-    this.state = { ratio };
-  }
-
-  public override componentDidMount(): void {
-    this.startLoop();
-  }
-
-  public override componentDidUpdate(): void {
-    this.startLoop();
-  }
-
-  public override componentWillUnmount(): void {
-    this.stopLoop();
-  }
-
-  public startLoop(): void {
-    if (this.looping) {
-      return;
-    }
-
-    this.looping = true;
-    requestAnimationFrame(this.loop);
-  }
-
-  public stopLoop(): void {
-    this.looping = false;
-  }
-
-  public loop = (): void => {
-    const { onComplete, duration, expiresAt } = this.props;
-    if (!this.looping) {
-      return;
-    }
-
-    const ratio = getRatio(expiresAt, duration);
-    this.setState({ ratio });
-
-    if (ratio === 1) {
-      this.looping = false;
-      if (onComplete) {
-        onComplete();
-      }
-    } else {
-      requestAnimationFrame(this.loop);
-    }
-  };
-
-  public override render(): JSX.Element {
-    const { ratio } = this.state;
-    const strokeDashoffset = ratio * CIRCUMFERENCE;
-
-    return (
-      <div className="module-countdown">
-        <svg viewBox="0 0 24 24">
-          <path
-            d="M12,1 A11,11,0,1,1,1,12,11.013,11.013,0,0,1,12,1Z"
-            className="module-countdown__back-path"
-            style={{
-              strokeDasharray: `${CIRCUMFERENCE}, ${CIRCUMFERENCE}`,
-            }}
-          />
-          <path
-            d="M12,1 A11,11,0,1,1,1,12,11.013,11.013,0,0,1,12,1Z"
-            className="module-countdown__front-path"
-            style={{
-              strokeDasharray: `${CIRCUMFERENCE}, ${CIRCUMFERENCE}`,
-              strokeDashoffset,
-            }}
-          />
-        </svg>
-      </div>
-    );
-  }
-}
-
-function getRatio(expiresAt: number, duration: number) {
-  const start = expiresAt - duration;
-  const end = expiresAt;
-
-  const now = Date.now();
-  const totalTime = end - start;
-  const elapsed = now - start;
-
-  return Math.min(Math.max(0, elapsed / totalTime), 1);
-}

ts/components/SampleMessageBubbles.tsx

@@ -1,11 +1,11 @@
-// Copyright 2021 Signal Messenger, LLC
+// Copyright 2021-2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import type { CSSProperties } from 'react';
 import React from 'react';
 import type { ConversationColorType } from '../types/Colors';
 import type { LocalizerType } from '../types/Util';
-import { formatRelativeTime } from '../util/formatRelativeTime';
+import { formatTime } from '../util/timestamp';
 
 export type PropsType = {
   backgroundStyle?: CSSProperties;
@@ -51,7 +51,7 @@ const SampleMessage = ({
           <span
             className={`module-message__metadata__date module-message__metadata__date--${direction}`}
           >
-            {formatRelativeTime(timestamp, { extended: true, i18n })}
+            {formatTime(i18n, timestamp)}
           </span>
           {direction === 'outgoing' && (
             <div

ts/components/Time.tsx

@@ -0,0 +1,34 @@
+// Copyright 2022 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import type { Moment } from 'moment';
+import type { ReactElement, TimeHTMLAttributes } from 'react';
+import moment from 'moment';
+import React from 'react';
+
+export function Time({
+  children,
+  dateOnly = false,
+  timestamp,
+  ...otherProps
+}: Readonly<
+  {
+    dateOnly?: boolean;
+    timestamp: Readonly<number | Date | Moment>;
+  } & Omit<TimeHTMLAttributes<HTMLElement>, 'dateTime'>
+>): ReactElement {
+  let dateTime: string;
+  if (dateOnly) {
+    dateTime = moment(timestamp).format('YYYY-MM-DD');
+  } else {
+    const date =
+      typeof timestamp === 'number' ? new Date(timestamp) : timestamp;
+    dateTime = date.toISOString();
+  }
+
+  return (
+    <time dateTime={dateTime} {...otherProps}>
+      {children}
+    </time>
+  );
+}

ts/components/conversation/CallingNotification.stories.tsx

@@ -1,4 +1,4 @@
-// Copyright 2021 Signal Messenger, LLC
+// Copyright 2021-2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import * as React from 'react';
@@ -70,7 +70,7 @@ story.add('Two incoming direct calls back-to-back', () => {
       <CallingNotification
         {...getCommonProps()}
         {...call1}
-        nextItem={{ type: 'callHistory', data: call2 }}
+        nextItem={{ type: 'callHistory', data: call2, timestamp: Date.now() }}
       />
       <CallingNotification {...getCommonProps()} {...call2} />
     </>
@@ -99,7 +99,7 @@ story.add('Two outgoing direct calls back-to-back', () => {
       <CallingNotification
         {...getCommonProps()}
         {...call1}
-        nextItem={{ type: 'callHistory', data: call2 }}
+        nextItem={{ type: 'callHistory', data: call2, timestamp: Date.now() }}
       />
       <CallingNotification {...getCommonProps()} {...call2} />
     </>

ts/components/conversation/CallingNotification.tsx

@@ -1,4 +1,4 @@
-// Copyright 2020-2021 Signal Messenger, LLC
+// Copyright 2020-2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import type { ReactNode } from 'react';
@@ -8,7 +8,7 @@ import { noop } from 'lodash';
 
 import { SystemMessage } from './SystemMessage';
 import { Button, ButtonSize, ButtonVariant } from '../Button';
-import { Timestamp } from './Timestamp';
+import { MessageTimestamp } from './MessageTimestamp';
 import type { LocalizerType } from '../../types/Util';
 import { CallMode } from '../../types/Calling';
 import type { CallingNotificationType } from '../../util/callingNotification';
@@ -91,9 +91,8 @@ export const CallingNotification: React.FC<PropsType> = React.memo(props => {
           contents={
             <>
               {getCallingNotificationText(props, i18n)} &middot;{' '}
-              <Timestamp
+              <MessageTimestamp
                 direction="outgoing"
-                extended
                 i18n={i18n}
                 timestamp={timestamp}
                 withImageNoCaption={false}

ts/components/conversation/ChangeNumberNotification.tsx

@@ -1,4 +1,4 @@
-// Copyright 2021 Signal Messenger, LLC
+// Copyright 2021-2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import React from 'react';
@@ -8,7 +8,7 @@ import type { LocalizerType } from '../../types/Util';
 import { Intl } from '../Intl';
 
 import { SystemMessage } from './SystemMessage';
-import { Timestamp } from './Timestamp';
+import { MessageTimestamp } from './MessageTimestamp';
 import { Emojify } from './Emojify';
 
 export type PropsData = {
@@ -37,7 +37,7 @@ export const ChangeNumberNotification: React.FC<Props> = props => {
             i18n={i18n}
           />
           &nbsp;·&nbsp;
-          <Timestamp i18n={i18n} timestamp={timestamp} />
+          <MessageTimestamp i18n={i18n} timestamp={timestamp} />
         </>
       }
       icon="phone"

ts/components/conversation/MessageDetail.tsx

@@ -4,11 +4,11 @@
 import type { ReactChild, ReactNode } from 'react';
 import React from 'react';
 import classNames from 'classnames';
-import moment from 'moment';
 import { noop } from 'lodash';
 
 import { Avatar, AvatarSize } from '../Avatar';
 import { ContactName } from './ContactName';
+import { Time } from '../Time';
 import type {
   Props as MessagePropsType,
   PropsData as MessagePropsDataType,
@@ -22,7 +22,7 @@ import type { ContactNameColorType } from '../../types/Colors';
 import { SendStatus } from '../../messages/MessageSendState';
 import { WidthBreakpoint } from '../_util';
 import * as log from '../../logging/log';
-import { Timestamp } from './Timestamp';
+import { formatDateTimeLong } from '../../util/timestamp';
 
 export type Contact = Pick<
   ConversationType,
@@ -194,12 +194,12 @@ export class MessageDetail extends React.Component<Props> {
         {errorComponent}
         {unidentifiedDeliveryComponent}
         {contact.statusTimestamp && (
-          <Timestamp
+          <Time
-            extended
+            className="module-message-detail__status-timestamp"
-            i18n={i18n}
-            module="module-message-detail__status-timestamp"
             timestamp={contact.statusTimestamp}
-          />
+          >
+            {formatDateTimeLong(i18n, contact.statusTimestamp)}
+          </Time>
         )}
       </div>
     );
@@ -379,7 +379,9 @@ export class MessageDetail extends React.Component<Props> {
             <tr>
               <td className="module-message-detail__label">{i18n('sent')}</td>
               <td>
-                {moment(sentAt).format('LLLL')}{' '}
+                <Time timestamp={sentAt}>
+                  {formatDateTimeLong(i18n, sentAt)}
+                </Time>{' '}
                 <span className="module-message-detail__unix-timestamp">
                   ({sentAt})
                 </span>
@@ -391,7 +393,9 @@ export class MessageDetail extends React.Component<Props> {
                   {i18n('received')}
                 </td>
                 <td>
-                  {moment(receivedAt).format('LLLL')}{' '}
+                  <Time timestamp={receivedAt}>
+                    {formatDateTimeLong(i18n, receivedAt)}
+                  </Time>{' '}
                   <span className="module-message-detail__unix-timestamp">
                     ({receivedAt})
                   </span>

ts/components/conversation/MessageMetadata.tsx

@@ -1,4 +1,4 @@
-// Copyright 2018-2021 Signal Messenger, LLC
+// Copyright 2018-2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import type { FunctionComponent, ReactChild } from 'react';
@@ -8,7 +8,7 @@ import classNames from 'classnames';
 import type { LocalizerType } from '../../types/Util';
 import type { DirectionType, MessageStatusType } from './Message';
 import { ExpireTimer } from './ExpireTimer';
-import { Timestamp } from './Timestamp';
+import { MessageTimestamp } from './MessageTimestamp';
 import { Spinner } from '../Spinner';
 
 type PropsType = {
@@ -94,10 +94,9 @@ export const MessageMetadata: FunctionComponent<PropsType> = props => {
       );
     } else {
       timestampNode = (
-        <Timestamp
+        <MessageTimestamp
           i18n={i18n}
           timestamp={timestamp}
-          extended
           direction={metadataDirection}
           withImageNoCaption={withImageNoCaption}
           withSticker={isSticker}

ts/components/conversation/MessageTimestamp.stories.tsx

@@ -1,4 +1,4 @@
-// Copyright 2020 Signal Messenger, LLC
+// Copyright 2020-2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import * as React from 'react';
@@ -7,12 +7,12 @@ import { boolean, date, select, text } from '@storybook/addon-knobs';
 
 import { setupI18n } from '../../util/setupI18n';
 import enMessages from '../../../_locales/en/messages.json';
-import type { Props } from './Timestamp';
+import type { Props } from './MessageTimestamp';
-import { Timestamp } from './Timestamp';
+import { MessageTimestamp } from './MessageTimestamp';
 
 const i18n = setupI18n('en', enMessages);
 
-const story = storiesOf('Components/Conversation/Timestamp', module);
+const story = storiesOf('Components/Conversation/MessageTimestamp', module);
 
 const { now } = Date;
 const seconds = (n: number) => n * 1000;
@@ -26,14 +26,6 @@ const get1201 = () => {
   return d.getTime();
 };
 
-const getJanuary1201 = () => {
-  const d = new Date();
-  d.setHours(0, 1, 0, 0);
-  d.setMonth(0);
-  d.setDate(1);
-  return d.getTime();
-};
-
 const times = (): Array<[string, number]> => [
   ['500ms ago', now() - seconds(0.5)],
   ['30s ago', now() - seconds(30)],
@@ -42,20 +34,14 @@ const times = (): Array<[string, number]> => [
   ['45m ago', now() - minutes(45)],
   ['1h ago', now() - hours(1)],
   ['12:01am today', get1201()],
-  ['11:59pm yesterday', get1201() - minutes(2)],
   ['24h ago', now() - hours(24)],
-  ['2d ago', now() - days(2)],
   ['7d ago', now() - days(7)],
-  ['30d ago', now() - days(30)],
-  ['January 1st this year, 12:01am ', getJanuary1201()],
-  ['December 31st last year, 11:59pm', getJanuary1201() - minutes(2)],
   ['366d ago', now() - days(366)],
 ];
 
 const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   i18n,
   timestamp: overrideProps.timestamp,
-  extended: boolean('extended', overrideProps.extended || false),
   module: text('module', ''),
   withImageNoCaption: boolean('withImageNoCaption', false),
   withSticker: boolean('withSticker', false),
@@ -79,7 +65,7 @@ const createTable = (overrideProps: Partial<Props> = {}) => (
         <tr key={timestamp}>
           <td>{description}</td>
           <td>
-            <Timestamp
+            <MessageTimestamp
               key={timestamp}
               {...createProps({ ...overrideProps, timestamp })}
             />
@@ -94,14 +80,10 @@ story.add('Normal', () => {
   return createTable();
 });
 
-story.add('Extended', () => {
-  return createTable({ extended: true });
-});
-
 story.add('Knobs', () => {
   const props = createProps({
     timestamp: date('timestamp', new Date()),
   });
 
-  return <Timestamp {...props} />;
+  return <MessageTimestamp {...props} />;
 });

ts/components/conversation/MessageTimestamp.tsx

@@ -1,17 +1,16 @@
-// Copyright 2018-2021 Signal Messenger, LLC
+// Copyright 2018-2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import React from 'react';
 import classNames from 'classnames';
 import moment from 'moment';
 
-import { formatRelativeTime } from '../../util/formatRelativeTime';
+import { formatTime } from '../../util/timestamp';
 
 import type { LocalizerType } from '../../types/Util';
 
 export type Props = {
   timestamp?: number;
-  extended?: boolean;
   module?: string;
   withImageNoCaption?: boolean;
   withSticker?: boolean;
@@ -22,7 +21,7 @@ export type Props = {
 
 const UPDATE_FREQUENCY = 60 * 1000;
 
-export class Timestamp extends React.Component<Props> {
+export class MessageTimestamp extends React.Component<Props> {
   private interval: NodeJS.Timeout | null;
 
   constructor(props: Props) {
@@ -57,7 +56,6 @@ export class Timestamp extends React.Component<Props> {
       withImageNoCaption,
       withSticker,
       withTapToViewExpired,
-      extended,
     } = this.props;
     const moduleName = module || 'module-timestamp';
 
@@ -78,7 +76,7 @@ export class Timestamp extends React.Component<Props> {
         )}
         title={moment(timestamp).format('llll')}
       >
-        {formatRelativeTime(timestamp, { i18n, extended })}
+        {formatTime(i18n, timestamp)}
       </span>
     );
   }

ts/components/conversation/Timeline.stories.tsx

@@ -1,4 +1,4 @@
-// Copyright 2020-2021 Signal Messenger, LLC
+// Copyright 2020-2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import * as React from 'react';
@@ -20,7 +20,6 @@ import { ConversationHero } from './ConversationHero';
 import { getDefaultConversation } from '../../test-both/helpers/getDefaultConversation';
 import { getRandomColor } from '../../test-both/helpers/getRandomColor';
 import { LastSeenIndicator } from './LastSeenIndicator';
-import { TimelineLoadingRow } from './TimelineLoadingRow';
 import { TypingBubble } from './TypingBubble';
 import { ContactSpoofingType } from '../../util/contactSpoofing';
 import { ReadStatus } from '../../messages/MessageReadStatus';
@@ -62,6 +61,7 @@ const items: Record<string, TimelineItemType> = {
       text: '🔥',
       timestamp: Date.now(),
     },
+    timestamp: Date.now(),
   },
   'id-2': {
     type: 'message',
@@ -82,6 +82,7 @@ const items: Record<string, TimelineItemType> = {
       text: 'Hello there from the new world! http://somewhere.com',
       timestamp: Date.now(),
     },
+    timestamp: Date.now(),
   },
   'id-2.5': {
     type: 'unsupportedMessage',
@@ -95,6 +96,7 @@ const items: Record<string, TimelineItemType> = {
         title: 'Mr. Pig',
       },
     },
+    timestamp: Date.now(),
   },
   'id-3': {
     type: 'message',
@@ -115,6 +117,7 @@ const items: Record<string, TimelineItemType> = {
       text: 'Hello there from the new world!',
       timestamp: Date.now(),
     },
+    timestamp: Date.now(),
   },
   'id-4': {
     type: 'timerNotification',
@@ -124,6 +127,7 @@ const items: Record<string, TimelineItemType> = {
       title: "It's Me",
       type: 'fromMe',
     },
+    timestamp: Date.now(),
   },
   'id-5': {
     type: 'timerNotification',
@@ -133,6 +137,7 @@ const items: Record<string, TimelineItemType> = {
       title: '(202) 555-0000',
       type: 'fromOther',
     },
+    timestamp: Date.now(),
   },
   'id-6': {
     type: 'safetyNumberNotification',
@@ -143,6 +148,7 @@ const items: Record<string, TimelineItemType> = {
       },
       isGroup: true,
     },
+    timestamp: Date.now(),
   },
   'id-7': {
     type: 'verificationNotification',
@@ -151,6 +157,7 @@ const items: Record<string, TimelineItemType> = {
       isLocal: true,
       type: 'markVerified',
     },
+    timestamp: Date.now(),
   },
   'id-8': {
     type: 'groupNotification',
@@ -180,10 +187,12 @@ const items: Record<string, TimelineItemType> = {
         isMe: false,
       }),
     },
+    timestamp: Date.now(),
   },
   'id-9': {
     type: 'resetSessionNotification',
     data: null,
+    timestamp: Date.now(),
   },
   'id-10': {
     type: 'message',
@@ -205,6 +214,7 @@ const items: Record<string, TimelineItemType> = {
       text: '🔥',
       timestamp: Date.now(),
     },
+    timestamp: Date.now(),
   },
   'id-11': {
     type: 'message',
@@ -226,6 +236,7 @@ const items: Record<string, TimelineItemType> = {
       text: 'Hello there from the new world! http://somewhere.com',
       timestamp: Date.now(),
     },
+    timestamp: Date.now(),
   },
   'id-12': {
     type: 'message',
@@ -247,6 +258,7 @@ const items: Record<string, TimelineItemType> = {
       text: 'Hello there from the new world! 🔥',
       timestamp: Date.now(),
     },
+    timestamp: Date.now(),
   },
   'id-13': {
     type: 'message',
@@ -268,6 +280,7 @@ const items: Record<string, TimelineItemType> = {
       text: 'Hello there from the new world! And this is multiple lines of text. Lines and lines and lines.',
       timestamp: Date.now(),
     },
+    timestamp: Date.now(),
   },
   'id-14': {
     type: 'message',
@@ -289,10 +302,12 @@ const items: Record<string, TimelineItemType> = {
       text: 'Hello there from the new world! And this is multiple lines of text. Lines and lines and lines.',
       timestamp: Date.now(),
     },
+    timestamp: Date.now(),
   },
   'id-15': {
     type: 'linkNotification',
     data: null,
+    timestamp: Date.now(),
   },
 };
 
@@ -375,14 +390,17 @@ const renderItem = ({
   messageId,
   containerElementRef,
   containerWidthBreakpoint,
+  isOldestTimelineItem,
 }: {
   messageId: string;
   containerElementRef: React.RefObject<HTMLElement>;
   containerWidthBreakpoint: WidthBreakpoint;
+  isOldestTimelineItem: boolean;
 }) => (
   <TimelineItem
     getPreferredBadge={() => undefined}
     id=""
+    isOldestTimelineItem={isOldestTimelineItem}
     isSelected={false}
     renderEmojiPicker={() => <div />}
     renderReactionPicker={() => <div />}
@@ -442,7 +460,6 @@ const renderHeroRow = () => {
   };
   return <Wrapper />;
 };
-const renderLoadingRow = () => <TimelineLoadingRow state="loading" />;
 const renderTypingBubble = () => (
   <TypingBubble
     acceptedMessageRequest
@@ -463,6 +480,7 @@ const useProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
   i18n,
   theme: React.useContext(StorybookThemeContext),
 
+  getTimestampForMessage: Date.now,
   haveNewest: boolean('haveNewest', overrideProps.haveNewest !== false),
   haveOldest: boolean('haveOldest', overrideProps.haveOldest !== false),
   isIncomingMessageRequest: boolean(
@@ -489,7 +507,6 @@ const useProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
   renderItem,
   renderLastSeenIndicator,
   renderHeroRow,
-  renderLoadingRow,
   renderTypingBubble,
   typingContactId: overrideProps.typingContactId,
 

ts/components/conversation/Timeline.tsx

@@ -1,7 +1,7 @@
-// Copyright 2019-2021 Signal Messenger, LLC
+// Copyright 2019-2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import { debounce, get, isNumber, pick } from 'lodash';
+import { debounce, get, isEqual, isNumber, pick } from 'lodash';
 import classNames from 'classnames';
 import type { CSSProperties, ReactChild, ReactNode, RefObject } from 'react';
 import React from 'react';
@@ -38,6 +38,7 @@ import { ContactSpoofingType } from '../../util/contactSpoofing';
 import { ContactSpoofingReviewDialog } from './ContactSpoofingReviewDialog';
 import type { GroupNameCollisionsWithIdsByTitle } from '../../util/groupMemberNameCollisions';
 import { hasUnacknowledgedCollisions } from '../../util/groupMemberNameCollisions';
+import { TimelineFloatingHeader } from './TimelineFloatingHeader';
 
 const AT_BOTTOM_THRESHOLD = 15;
 const NEAR_BOTTOM_THRESHOLD = 15;
@@ -104,15 +105,19 @@ type PropsHousekeepingType = {
   warning?: WarningType;
   contactSpoofingReview?: ContactSpoofingReviewPropType;
 
+  getTimestampForMessage: (_: string) => number;
   getPreferredBadge: PreferredBadgeSelectorType;
   i18n: LocalizerType;
   theme: ThemeType;
 
+  areFloatingDateHeadersEnabled?: boolean;
+
   renderItem: (props: {
     actionProps: PropsActionsType;
     containerElementRef: RefObject<HTMLElement>;
     containerWidthBreakpoint: WidthBreakpoint;
     conversationId: string;
+    isOldestTimelineItem: boolean;
     messageId: string;
     nextMessageId: undefined | string;
     onHeightChange: (messageId: string) => unknown;
@@ -125,7 +130,6 @@ type PropsHousekeepingType = {
     unblurAvatar: () => void,
     updateSharedGroups: () => unknown
   ) => JSX.Element;
-  renderLoadingRow: (id: string) => JSX.Element;
   renderTypingBubble: (id: string) => JSX.Element;
 };
 
@@ -195,23 +199,22 @@ type OnScrollParamsType = {
   _hasScrolledToRowTarget?: boolean;
 };
 
-type VisibleRowsType = {
+type VisibleRowType = {
-  newest?: {
+  id: string;
-    id: string;
+  offsetTop: number;
-    offsetTop: number;
+  row: number;
-    row: number;
-  };
-  oldest?: {
-    id: string;
-    offsetTop: number;
-    row: number;
-  };
 };
 
 type StateType = {
   atBottom: boolean;
   atTop: boolean;
+  hasRecentlyScrolled: boolean;
   oneTimeScrollRow?: number;
+  visibleRows?: {
+    newestFullyVisible?: VisibleRowType;
+    oldestPartiallyVisible?: VisibleRowType;
+    oldestFullyVisible?: VisibleRowType;
+  };
 
   widthBreakpoint: WidthBreakpoint;
 
@@ -295,26 +298,26 @@ const getActions = createSelector(
 );
 
 export class Timeline extends React.PureComponent<PropsType, StateType> {
-  public cellSizeCache = new CellMeasurerCache({
+  private cellSizeCache = new CellMeasurerCache({
     defaultHeight: 64,
     fixedWidth: true,
   });
 
-  public mostRecentWidth = 0;
+  private mostRecentWidth = 0;
 
-  public mostRecentHeight = 0;
+  private mostRecentHeight = 0;
 
-  public offsetFromBottom: number | undefined = 0;
+  private offsetFromBottom: number | undefined = 0;
 
-  public resizeFlag = false;
+  private resizeFlag = false;
 
   private readonly containerRef = React.createRef<HTMLDivElement>();
 
   private readonly listRef = React.createRef<List>();
 
-  public visibleRows: VisibleRowsType | undefined;
+  private loadCountdownTimeout: NodeJS.Timeout | null = null;
 
-  public loadCountdownTimeout: NodeJS.Timeout | null = null;
+  private hasRecentlyScrolledTimeout?: NodeJS.Timeout;
 
   private containerRefMerger = createRefMerger();
 
@@ -332,6 +335,7 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
     this.state = {
       atBottom,
       atTop: false,
+      hasRecentlyScrolled: true,
       oneTimeScrollRow,
       propScrollToIndex: scrollToIndex,
       prevPropScrollToIndex: scrollToIndex,
@@ -364,7 +368,7 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
     return state;
   }
 
-  public getList = (): List | null => {
+  private getList = (): List | null => {
     if (!this.listRef) {
       return null;
     }
@@ -374,7 +378,7 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
     return current;
   };
 
-  public getGrid = (): Grid | undefined => {
+  private getGrid = (): Grid | undefined => {
     const list = this.getList();
     if (!list) {
       return;
@@ -383,9 +387,9 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
     return list.Grid;
   };
 
-  public getScrollContainer = (): HTMLDivElement | undefined => {
+  private getScrollContainer = (): HTMLDivElement | undefined => {
     // We're using an internal variable (_scrollingContainer)) here,
-    // so cannot rely on the public type.
+    // so cannot rely on the private type.
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const grid: any = this.getGrid();
     if (!grid) {
@@ -395,16 +399,7 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
     return grid._scrollingContainer as HTMLDivElement;
   };
 
-  public scrollToRow = (row: number): void => {
+  private recomputeRowHeights = (row?: number): void => {
-    const list = this.getList();
-    if (!list) {
-      return;
-    }
-
-    list.scrollToRow(row);
-  };
-
-  public recomputeRowHeights = (row?: number): void => {
     const list = this.getList();
     if (!list) {
       return;
@@ -413,7 +408,7 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
     list.recomputeRowHeights(row);
   };
 
-  public onHeightOnlyChange = (): void => {
+  private onHeightOnlyChange = (): void => {
     const grid = this.getGrid();
     const scrollContainer = this.getScrollContainer();
     if (!grid || !scrollContainer) {
@@ -438,7 +433,7 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
     });
   };
 
-  public resize = (row?: number): void => {
+  private resize = (row?: number): void => {
     this.offsetFromBottom = undefined;
     this.resizeFlag = false;
     if (isNumber(row) && row > 0) {
@@ -452,11 +447,11 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
     this.recomputeRowHeights(row || 0);
   };
 
-  public resizeHeroRow = (): void => {
+  private resizeHeroRow = (): void => {
     this.resize(0);
   };
 
-  public resizeMessage = (messageId: string): void => {
+  private resizeMessage = (messageId: string): void => {
     const { items } = this.props;
 
     if (!items || !items.length) {
@@ -472,7 +467,7 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
     this.resize(row);
   };
 
-  public onScroll = (data: OnScrollParamsType): void => {
+  private onScroll = (data: OnScrollParamsType): void => {
     // Ignore scroll events generated as react-virtualized recursively scrolls and
     //   re-measures to get us where we want to go.
     if (
@@ -492,11 +487,28 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
       return;
     }
 
+    this.setState({ hasRecentlyScrolled: true });
+    if (this.hasRecentlyScrolledTimeout) {
+      clearTimeout(this.hasRecentlyScrolledTimeout);
+    }
+    this.hasRecentlyScrolledTimeout = setTimeout(() => {
+      this.setState({ hasRecentlyScrolled: false });
+    }, 1000);
+
     this.updateScrollMetrics(data);
     this.updateWithVisibleRows();
   };
 
-  public updateScrollMetrics = debounce(
+  private onRowsRendered = (): void => {
+    // React Virtualized doesn't respect `scrollToIndex` in some cases, likely
+    //   because it hasn't rendered that row yet.
+    const { oneTimeScrollRow } = this.state;
+    if (isNumber(oneTimeScrollRow)) {
+      this.getList()?.scrollToRow(oneTimeScrollRow);
+    }
+  };
+
+  private updateScrollMetrics = debounce(
     (data: OnScrollParamsType) => {
       const { clientHeight, clientWidth, scrollHeight, scrollTop } = data;
 
@@ -576,10 +588,7 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
     { maxWait: 50 }
   );
 
-  public updateVisibleRows = (): void => {
+  private updateVisibleRows = (): void => {
-    let newest;
-    let oldest;
-
     const scrollContainer = this.getScrollContainer();
     if (!scrollContainer) {
       return;
@@ -589,15 +598,18 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
       return;
     }
 
-    const visibleTop = scrollContainer.scrollTop;
-    const visibleBottom = visibleTop + scrollContainer.clientHeight;
-
     const innerScrollContainer = scrollContainer.children[0];
     if (!innerScrollContainer) {
       return;
     }
 
+    let newestFullyVisible: undefined | VisibleRowType;
+    let oldestPartiallyVisible: undefined | VisibleRowType;
+    let oldestFullyVisible: undefined | VisibleRowType;
+
     const { children } = innerScrollContainer;
+    const visibleTop = scrollContainer.scrollTop;
+    const visibleBottom = visibleTop + scrollContainer.clientHeight;
 
     for (let i = children.length - 1; i >= 0; i -= 1) {
       const child = children[i] as HTMLDivElement;
@@ -611,7 +623,7 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
 
       if (bottom - AT_BOTTOM_THRESHOLD <= visibleBottom) {
         const row = parseInt(child.getAttribute('data-row') || '-1', 10);
-        newest = { offsetTop, row, id };
+        newestFullyVisible = { offsetTop, row, id };
 
         break;
       }
@@ -620,24 +632,45 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
     const max = children.length;
     for (let i = 0; i < max; i += 1) {
       const child = children[i] as HTMLDivElement;
-      const { offsetTop, id } = child;
+      const { id, offsetTop, offsetHeight } = child;
 
       if (!id) {
         continue;
       }
 
-      if (offsetTop + AT_TOP_THRESHOLD >= visibleTop) {
+      const thisRow = {
-        const row = parseInt(child.getAttribute('data-row') || '-1', 10);
+        offsetTop,
-        oldest = { offsetTop, row, id };
+        row: parseInt(child.getAttribute('data-row') || '-1', 10),
+        id,
+      };
 
+      const bottom = offsetTop + offsetHeight;
+
+      if (bottom >= visibleTop && !oldestPartiallyVisible) {
+        oldestPartiallyVisible = thisRow;
+      }
+
+      if (offsetTop + AT_TOP_THRESHOLD >= visibleTop) {
+        oldestFullyVisible = thisRow;
         break;
       }
     }
 
-    this.visibleRows = { newest, oldest };
+    this.setState(oldState => {
+      const visibleRows = {
+        newestFullyVisible,
+        oldestPartiallyVisible,
+        oldestFullyVisible,
+      };
+
+      // This avoids a render loop.
+      return isEqual(oldState.visibleRows, visibleRows)
+        ? null
+        : { visibleRows };
+    });
   };
 
-  public updateWithVisibleRows = debounce(
+  private updateWithVisibleRows = debounce(
     () => {
       const {
         unreadCount,
@@ -654,16 +687,17 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
       }
 
       this.updateVisibleRows();
-      if (!this.visibleRows) {
+      const { visibleRows } = this.state;
+      if (!visibleRows) {
         return;
       }
 
-      const { newest, oldest } = this.visibleRows;
+      const { newestFullyVisible, oldestFullyVisible } = visibleRows;
-      if (!newest) {
+      if (!newestFullyVisible) {
         return;
       }
 
-      markMessageRead(newest.id);
+      markMessageRead(newestFullyVisible.id);
 
       const newestRow = this.getRowCount() - 1;
       const oldestRow = this.fromItemIndexToRow(0);
@@ -673,7 +707,7 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
       if (
         !isLoadingMessages &&
         !haveNewest &&
-        newest.row > newestRow - LOAD_MORE_THRESHOLD
+        newestFullyVisible.row > newestRow - LOAD_MORE_THRESHOLD
       ) {
         const lastId = items[items.length - 1];
         loadNewerMessages(lastId);
@@ -684,8 +718,10 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
       //   Generally we hid this behind a countdown spinner at the top of the window, but
       //   this is a special-case for the situation where the window is so large and that
       //   all the messages are visible.
-      const oldestVisible = Boolean(oldest && oldestRow === oldest.row);
+      const oldestVisible = Boolean(
-      const newestVisible = newestRow === newest.row;
+        oldestFullyVisible && oldestRow === oldestFullyVisible.row
+      );
+      const newestVisible = newestRow === newestFullyVisible.row;
       if (oldestVisible && newestVisible && !haveOldest) {
         this.loadOlderMessages();
       }
@@ -695,13 +731,13 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
       const areUnreadBelowCurrentPosition = Boolean(
         isNumber(unreadCount) &&
           unreadCount > 0 &&
-          (!haveNewest || newest.row < lastItemRow)
+          (!haveNewest || newestFullyVisible.row < lastItemRow)
       );
 
       const shouldShowScrollDownButton = Boolean(
         !haveNewest ||
           areUnreadBelowCurrentPosition ||
-          newest.row < newestRow - SCROLL_DOWN_BUTTON_THRESHOLD
+          newestFullyVisible.row < newestRow - SCROLL_DOWN_BUTTON_THRESHOLD
       );
 
       this.setState({
@@ -713,7 +749,7 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
     { maxWait: 500 }
   );
 
-  public loadOlderMessages = (): void => {
+  private loadOlderMessages = (): void => {
     const { haveOldest, isLoadingMessages, items, loadOlderMessages } =
       this.props;
 
@@ -730,7 +766,7 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
     loadOlderMessages(oldestId);
   };
 
-  public rowRenderer = ({
+  private rowRenderer = ({
     index,
     key,
     parent,
@@ -743,7 +779,6 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
       items,
       renderItem,
       renderHeroRow,
-      renderLoadingRow,
       renderLastSeenIndicator,
       renderTypingBubble,
       unblurAvatar,
@@ -774,12 +809,6 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
           )}
         </div>
       );
-    } else if (!haveOldest && row === 0) {
-      rowContents = (
-        <div data-row={row} style={styleWithWidth} role="row">
-          {renderLoadingRow(id)}
-        </div>
-      );
     } else if (oldestUnreadRow === row) {
       rowContents = (
         <div data-row={row} style={styleWithWidth} role="row">
@@ -824,6 +853,7 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
               containerElementRef: this.containerRef,
               containerWidthBreakpoint: widthBreakpoint,
               conversationId: id,
+              isOldestTimelineItem: haveOldest && itemIndex === 0,
               messageId,
               nextMessageId,
               onHeightChange: this.resizeMessage,
@@ -848,62 +878,73 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
     );
   };
 
-  public fromItemIndexToRow(index: number): number {
+  private fromItemIndexToRow(index: number): number {
-    const { oldestUnreadIndex } = this.props;
+    const { haveOldest, oldestUnreadIndex } = this.props;
 
-    // We will always render either the hero row or the loading row
+    let result = index;
-    let addition = 1;
 
+    // Hero row
+    if (haveOldest) {
+      result += 1;
+    }
+
+    // Unread indicator
     if (isNumber(oldestUnreadIndex) && index >= oldestUnreadIndex) {
-      addition += 1;
+      result += 1;
     }
 
-    return index + addition;
+    return result;
   }
 
-  public getRowCount(): number {
+  private getRowCount(): number {
-    const { oldestUnreadIndex, typingContactId } = this.props;
+    const { haveOldest, items, oldestUnreadIndex, typingContactId } =
-    const { items } = this.props;
+      this.props;
-    const itemsCount = items && items.length ? items.length : 0;
 
-    // We will always render either the hero row or the loading row
+    let result = items?.length || 0;
-    let extraRows = 1;
 
+    // Hero row
+    if (haveOldest) {
+      result += 1;
+    }
+
+    // Unread indicator
     if (isNumber(oldestUnreadIndex)) {
-      extraRows += 1;
+      result += 1;
     }
 
+    // Typing indicator
     if (typingContactId) {
-      extraRows += 1;
+      result += 1;
     }
 
-    return itemsCount + extraRows;
+    return result;
   }
 
-  public fromRowToItemIndex(
+  private fromRowToItemIndex(row: number): number | undefined {
-    row: number,
+    const { haveOldest, items } = this.props;
-    props?: PropsType
-  ): number | undefined {
-    const { items } = props || this.props;
 
-    // We will always render either the hero row or the loading row
+    let result = row;
-    let subtraction = 1;
 
+    // Hero row
+    if (haveOldest) {
+      result -= 1;
+    }
+
+    // Unread indicator
     const oldestUnreadRow = this.getLastSeenIndicatorRow();
     if (isNumber(oldestUnreadRow) && row > oldestUnreadRow) {
-      subtraction += 1;
+      result -= 1;
     }
 
-    const index = row - subtraction;
+    if (result < 0 || result >= items.length) {
-    if (index < 0 || index >= items.length) {
       return;
     }
 
-    return index;
+    return result;
   }
 
-  public getLastSeenIndicatorRow(props?: PropsType): number | undefined {
+  private getLastSeenIndicatorRow(): number | undefined {
-    const { oldestUnreadIndex } = props || this.props;
+    const { oldestUnreadIndex } = this.props;
     if (!isNumber(oldestUnreadIndex)) {
       return;
     }
@@ -911,7 +952,7 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
     return this.fromItemIndexToRow(oldestUnreadIndex) - 1;
   }
 
-  public getTypingBubbleRow(): number | undefined {
+  private getTypingBubbleRow(): number | undefined {
     const { items } = this.props;
     if (!items || items.length < 0) {
       return;
@@ -922,23 +963,7 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
     return this.fromItemIndexToRow(last) + 1;
   }
 
-  public onScrollToMessage = (messageId: string): void => {
+  private scrollToBottom = (setFocus?: boolean): void => {
-    const { isLoadingMessages, items, loadAndScroll } = this.props;
-    const index = items.findIndex(item => item === messageId);
-
-    if (index >= 0) {
-      const row = this.fromItemIndexToRow(index);
-      this.setState({
-        oneTimeScrollRow: row,
-      });
-    }
-
-    if (!isLoadingMessages) {
-      loadAndScroll(messageId);
-    }
-  };
-
-  public scrollToBottom = (setFocus?: boolean): void => {
     const { selectMessage, id, items } = this.props;
 
     if (setFocus && items && items.length > 0) {
@@ -956,11 +981,11 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
     });
   };
 
-  public onClickScrollDownButton = (): void => {
+  private onClickScrollDownButton = (): void => {
     this.scrollDown(false);
   };
 
-  public scrollDown = (setFocus?: boolean): void => {
+  private scrollDown = (setFocus?: boolean): void => {
     const {
       haveNewest,
       id,
@@ -977,7 +1002,8 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
     const lastId = items[items.length - 1];
     const lastSeenIndicatorRow = this.getLastSeenIndicatorRow();
 
-    if (!this.visibleRows) {
+    const { visibleRows } = this.state;
+    if (!visibleRows) {
       if (haveNewest) {
         this.scrollToBottom(setFocus);
       } else if (!isLoadingMessages) {
@@ -987,12 +1013,12 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
       return;
     }
 
-    const { newest } = this.visibleRows;
+    const { newestFullyVisible } = visibleRows;
 
     if (
-      newest &&
+      newestFullyVisible &&
       isNumber(lastSeenIndicatorRow) &&
-      newest.row < lastSeenIndicatorRow
+      newestFullyVisible.row < lastSeenIndicatorRow
     ) {
       if (setFocus && isNumber(oldestUnreadIndex)) {
         const messageId = items[oldestUnreadIndex];
@@ -1112,8 +1138,7 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
         }
 
         const newRow = this.fromItemIndexToRow(newFirstIndex);
-        const delta = newFirstIndex - oldFirstIndex;
+        if (newRow > 0) {
-        if (delta > 0) {
           // We're loading more new messages at the top; we want to stay at the top
           this.resize();
           // TODO: DESKTOP-688
@@ -1188,7 +1213,7 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
     this.updateWithVisibleRows();
   }
 
-  public getScrollTarget = (): number | undefined => {
+  private getScrollTarget = (): number | undefined => {
     const { oneTimeScrollRow, atBottom, propScrollToIndex } = this.state;
 
     const rowCount = this.getRowCount();
@@ -1208,7 +1233,7 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
     return scrollToBottom;
   };
 
-  public handleBlur = (event: React.FocusEvent): void => {
+  private handleBlur = (event: React.FocusEvent): void => {
     const { clearSelectedMessage } = this.props;
 
     const { currentTarget } = event;
@@ -1232,7 +1257,9 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
     }, 0);
   };
 
-  public handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>): void => {
+  private handleKeyDown = (
+    event: React.KeyboardEvent<HTMLDivElement>
+  ): void => {
     const { selectMessage, selectedMessageId, items, id } = this.props;
     const commandKey = get(window, 'platform') === 'darwin' && event.metaKey;
     const controlKey = get(window, 'platform') !== 'darwin' && event.ctrlKey;
@@ -1309,15 +1336,19 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
   public override render(): JSX.Element | null {
     const {
       acknowledgeGroupMemberNameCollisions,
+      areFloatingDateHeadersEnabled = true,
       areWeAdmin,
       clearInvitedUuidsForNewlyCreatedGroup,
       closeContactSpoofingReview,
       contactSpoofingReview,
       getPreferredBadge,
+      getTimestampForMessage,
+      haveOldest,
       i18n,
       id,
       invitedContactsForNewlyCreatedGroup,
       isGroupV1AndDisabled,
+      isLoadingMessages,
       items,
       onBlock,
       onBlockAndReportSpam,
@@ -1332,6 +1363,9 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
     const {
       shouldShowScrollDownButton,
       areUnreadBelowCurrentPosition,
+      hasRecentlyScrolled,
+      lastMeasuredWarningHeight,
+      visibleRows,
       widthBreakpoint,
     } = this.state;
 
@@ -1342,6 +1376,27 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
       return null;
     }
 
+    let floatingHeader: ReactNode;
+    const oldestPartiallyVisibleRow = visibleRows?.oldestPartiallyVisible;
+    if (areFloatingDateHeadersEnabled && oldestPartiallyVisibleRow) {
+      floatingHeader = (
+        <TimelineFloatingHeader
+          i18n={i18n}
+          isLoading={isLoadingMessages}
+          style={
+            lastMeasuredWarningHeight
+              ? { marginTop: lastMeasuredWarningHeight }
+              : undefined
+          }
+          timestamp={getTimestampForMessage(oldestPartiallyVisibleRow.id)}
+          visible={
+            (hasRecentlyScrolled || isLoadingMessages) &&
+            (!haveOldest || oldestPartiallyVisibleRow.id !== items[0])
+          }
+        />
+      );
+    }
+
     const autoSizer = (
       <AutoSizer>
         {({ height, width }) => {
@@ -1366,6 +1421,7 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
               // eslint-disable-next-line @typescript-eslint/no-explicit-any
               onScroll={this.onScroll as any}
               overscanRowCount={10}
+              onRowsRendered={this.onRowsRendered}
               ref={this.listRef}
               rowCount={rowCount}
               rowHeight={this.cellSizeCache.rowHeight}
@@ -1549,6 +1605,8 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
             >
               {timelineWarning}
 
+              {floatingHeader}
+
               {autoSizer}
 
               {shouldShowScrollDownButton ? (

ts/components/conversation/TimelineDateHeader.tsx

@@ -0,0 +1,43 @@
+// Copyright 2022 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import type { ReactElement } from 'react';
+import React, { useEffect, useState } from 'react';
+import classNames from 'classnames';
+import * as durations from '../../util/durations';
+import type { LocalizerType } from '../../types/Util';
+import { formatDate } from '../../util/timestamp';
+import { Time } from '../Time';
+
+export function TimelineDateHeader({
+  floating = false,
+  i18n,
+  timestamp,
+}: Readonly<{
+  floating?: boolean;
+  i18n: LocalizerType;
+  timestamp: number;
+}>): ReactElement {
+  const [text, setText] = useState(formatDate(i18n, timestamp));
+  useEffect(() => {
+    const update = () => setText(formatDate(i18n, timestamp));
+    update();
+    const interval = setInterval(update, durations.MINUTE);
+    return () => {
+      clearInterval(interval);
+    };
+  }, [i18n, timestamp]);
+
+  return (
+    <Time
+      className={classNames(
+        'TimelineDateHeader',
+        `TimelineDateHeader--${floating ? 'floating' : 'inline'}`
+      )}
+      dateOnly
+      timestamp={timestamp}
+    >
+      {text}
+    </Time>
+  );
+}

ts/components/conversation/TimelineFloatingHeader.tsx

@@ -0,0 +1,43 @@
+// Copyright 2022 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import classNames from 'classnames';
+import type { CSSProperties, ReactElement } from 'react';
+import React from 'react';
+import type { LocalizerType } from '../../types/Util';
+import { TimelineDateHeader } from './TimelineDateHeader';
+import { Spinner } from '../Spinner';
+
+export const TimelineFloatingHeader = ({
+  i18n,
+  isLoading,
+  style,
+  timestamp,
+  visible,
+}: Readonly<{
+  i18n: LocalizerType;
+  isLoading: boolean;
+  style?: CSSProperties;
+  timestamp: number;
+  visible: boolean;
+}>): ReactElement => (
+  <div
+    className={classNames(
+      'TimelineFloatingHeader',
+      `TimelineFloatingHeader--${visible ? 'visible' : 'hidden'}`
+    )}
+    style={style}
+  >
+    <TimelineDateHeader floating i18n={i18n} timestamp={timestamp} />
+    <div
+      className={classNames(
+        'TimelineFloatingHeader__spinner-container',
+        `TimelineFloatingHeader__spinner-container--${
+          isLoading ? 'visible' : 'hidden'
+        }`
+      )}
+    >
+      <Spinner direction="on-background" size="20px" svgSize="small" />
+    </div>
+  </div>
+);

ts/components/conversation/TimelineItem.stories.tsx

@@ -1,4 +1,4 @@
-// Copyright 2020-2021 Signal Messenger, LLC
+// Copyright 2020-2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import * as React from 'react';
@@ -53,6 +53,7 @@ const getDefaultProps = () => ({
   conversationId: 'conversation-id',
   getPreferredBadge: () => undefined,
   id: 'asdf',
+  isOldestTimelineItem: false,
   isSelected: false,
   interactionMode: 'keyboard' as const,
   theme: ThemeType.light,

ts/components/conversation/TimelineItem.tsx

@@ -1,13 +1,15 @@
-// Copyright 2019-2021 Signal Messenger, LLC
+// Copyright 2019-2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import type { RefObject } from 'react';
+import type { ReactChild, RefObject } from 'react';
 import React from 'react';
 import { omit } from 'lodash';
+import moment from 'moment';
 
 import type { LocalizerType, ThemeType } from '../../types/Util';
 
 import type { InteractionModeType } from '../../state/ducks/conversations';
+import { TimelineDateHeader } from './TimelineDateHeader';
 import type {
   Props as AllMessageProps,
   PropsActions as MessageActionsType,
@@ -120,7 +122,7 @@ type ProfileChangeNotificationType = {
   data: ProfileChangeNotificationPropsType;
 };
 
-export type TimelineItemType =
+export type TimelineItemType = (
   | CallHistoryType
   | ChatSessionRefreshedType
   | DeliveryIssueType
@@ -136,7 +138,8 @@ export type TimelineItemType =
   | UniversalTimerNotificationType
   | ChangeNumberNotificationType
   | UnsupportedMessageType
-  | VerificationNotificationType;
+  | VerificationNotificationType
+) & { timestamp: number };
 
 type PropsLocalType = {
   containerElementRef: RefObject<HTMLElement>;
@@ -149,6 +152,7 @@ type PropsLocalType = {
   renderUniversalTimerNotification: () => JSX.Element;
   i18n: LocalizerType;
   interactionMode: InteractionModeType;
+  isOldestTimelineItem: boolean;
   theme: ThemeType;
   previousItem: undefined | TimelineItemType;
   nextItem: undefined | TimelineItemType;
@@ -179,12 +183,14 @@ export class TimelineItem extends React.PureComponent<PropsType> {
       conversationId,
       getPreferredBadge,
       id,
+      isOldestTimelineItem,
       isSelected,
       item,
       i18n,
       theme,
       messageSizeChanged,
       nextItem,
+      previousItem,
       renderContact,
       renderUniversalTimerNotification,
       returnToActiveCall,
@@ -198,8 +204,9 @@ export class TimelineItem extends React.PureComponent<PropsType> {
       return null;
     }
 
+    let itemContents: ReactChild;
     if (item.type === 'message') {
-      return (
+      itemContents = (
         <Message
           {...omit(this.props, ['item'])}
           {...item.data}
@@ -210,101 +217,143 @@ export class TimelineItem extends React.PureComponent<PropsType> {
           renderingContext="conversation/TimelineItem"
         />
       );
-    }
-
-    let notification;
-
-    if (item.type === 'unsupportedMessage') {
-      notification = (
-        <UnsupportedMessage {...this.props} {...item.data} i18n={i18n} />
-      );
-    } else if (item.type === 'callHistory') {
-      notification = (
-        <CallingNotification
-          conversationId={conversationId}
-          i18n={i18n}
-          messageId={id}
-          messageSizeChanged={messageSizeChanged}
-          nextItem={nextItem}
-          returnToActiveCall={returnToActiveCall}
-          startCallingLobby={startCallingLobby}
-          {...item.data}
-        />
-      );
-    } else if (item.type === 'chatSessionRefreshed') {
-      notification = (
-        <ChatSessionRefreshedNotification
-          {...this.props}
-          {...item.data}
-          i18n={i18n}
-        />
-      );
-    } else if (item.type === 'deliveryIssue') {
-      notification = (
-        <DeliveryIssueNotification {...item.data} {...this.props} i18n={i18n} />
-      );
-    } else if (item.type === 'linkNotification') {
-      notification = <LinkNotification i18n={i18n} />;
-    } else if (item.type === 'timerNotification') {
-      notification = (
-        <TimerNotification {...this.props} {...item.data} i18n={i18n} />
-      );
-    } else if (item.type === 'universalTimerNotification') {
-      notification = renderUniversalTimerNotification();
-    } else if (item.type === 'changeNumberNotification') {
-      notification = (
-        <ChangeNumberNotification {...this.props} {...item.data} i18n={i18n} />
-      );
-    } else if (item.type === 'safetyNumberNotification') {
-      notification = (
-        <SafetyNumberNotification {...this.props} {...item.data} i18n={i18n} />
-      );
-    } else if (item.type === 'verificationNotification') {
-      notification = (
-        <VerificationNotification {...this.props} {...item.data} i18n={i18n} />
-      );
-    } else if (item.type === 'groupNotification') {
-      notification = (
-        <GroupNotification {...this.props} {...item.data} i18n={i18n} />
-      );
-    } else if (item.type === 'groupV2Change') {
-      notification = (
-        <GroupV2Change
-          renderContact={renderContact}
-          {...item.data}
-          i18n={i18n}
-        />
-      );
-    } else if (item.type === 'groupV1Migration') {
-      notification = (
-        <GroupV1Migration {...this.props} {...item.data} i18n={i18n} />
-      );
-    } else if (item.type === 'resetSessionNotification') {
-      notification = (
-        <ResetSessionNotification {...this.props} {...item.data} i18n={i18n} />
-      );
-    } else if (item.type === 'profileChange') {
-      notification = (
-        <ProfileChangeNotification {...this.props} {...item.data} i18n={i18n} />
-      );
     } else {
-      // Weird, yes, but the idea is to get a compile error when we aren't comprehensive
+      let notification;
-      //   with our if/else checks above, but also log out the type we don't understand if
+
-      //   we encounter it at runtime.
+      if (item.type === 'unsupportedMessage') {
-      const unknownItem: never = item;
+        notification = (
-      const asItem = unknownItem as TimelineItemType;
+          <UnsupportedMessage {...this.props} {...item.data} i18n={i18n} />
-      throw new Error(`TimelineItem: Unknown type: ${asItem.type}`);
+        );
+      } else if (item.type === 'callHistory') {
+        notification = (
+          <CallingNotification
+            conversationId={conversationId}
+            i18n={i18n}
+            messageId={id}
+            messageSizeChanged={messageSizeChanged}
+            nextItem={nextItem}
+            returnToActiveCall={returnToActiveCall}
+            startCallingLobby={startCallingLobby}
+            {...item.data}
+          />
+        );
+      } else if (item.type === 'chatSessionRefreshed') {
+        notification = (
+          <ChatSessionRefreshedNotification
+            {...this.props}
+            {...item.data}
+            i18n={i18n}
+          />
+        );
+      } else if (item.type === 'deliveryIssue') {
+        notification = (
+          <DeliveryIssueNotification
+            {...item.data}
+            {...this.props}
+            i18n={i18n}
+          />
+        );
+      } else if (item.type === 'linkNotification') {
+        notification = <LinkNotification i18n={i18n} />;
+      } else if (item.type === 'timerNotification') {
+        notification = (
+          <TimerNotification {...this.props} {...item.data} i18n={i18n} />
+        );
+      } else if (item.type === 'universalTimerNotification') {
+        notification = renderUniversalTimerNotification();
+      } else if (item.type === 'changeNumberNotification') {
+        notification = (
+          <ChangeNumberNotification
+            {...this.props}
+            {...item.data}
+            i18n={i18n}
+          />
+        );
+      } else if (item.type === 'safetyNumberNotification') {
+        notification = (
+          <SafetyNumberNotification
+            {...this.props}
+            {...item.data}
+            i18n={i18n}
+          />
+        );
+      } else if (item.type === 'verificationNotification') {
+        notification = (
+          <VerificationNotification
+            {...this.props}
+            {...item.data}
+            i18n={i18n}
+          />
+        );
+      } else if (item.type === 'groupNotification') {
+        notification = (
+          <GroupNotification {...this.props} {...item.data} i18n={i18n} />
+        );
+      } else if (item.type === 'groupV2Change') {
+        notification = (
+          <GroupV2Change
+            renderContact={renderContact}
+            {...item.data}
+            i18n={i18n}
+          />
+        );
+      } else if (item.type === 'groupV1Migration') {
+        notification = (
+          <GroupV1Migration {...this.props} {...item.data} i18n={i18n} />
+        );
+      } else if (item.type === 'resetSessionNotification') {
+        notification = (
+          <ResetSessionNotification
+            {...this.props}
+            {...item.data}
+            i18n={i18n}
+          />
+        );
+      } else if (item.type === 'profileChange') {
+        notification = (
+          <ProfileChangeNotification
+            {...this.props}
+            {...item.data}
+            i18n={i18n}
+          />
+        );
+      } else {
+        // Weird, yes, but the idea is to get a compile error when we aren't comprehensive
+        //   with our if/else checks above, but also log out the type we don't understand
+        //   if we encounter it at runtime.
+        const unknownItem: never = item;
+        const asItem = unknownItem as TimelineItemType;
+        throw new Error(`TimelineItem: Unknown type: ${asItem.type}`);
+      }
+
+      itemContents = (
+        <InlineNotificationWrapper
+          id={id}
+          conversationId={conversationId}
+          isSelected={isSelected}
+          selectMessage={selectMessage}
+        >
+          {notification}
+        </InlineNotificationWrapper>
+      );
     }
 
-    return (
+    const shouldRenderDateHeader =
-      <InlineNotificationWrapper
+      isOldestTimelineItem ||
-        id={id}
+      Boolean(
-        conversationId={conversationId}
+        previousItem &&
-        isSelected={isSelected}
+          // This comparison avoids strange header behavior for out-of-order messages.
-        selectMessage={selectMessage}
+          item.timestamp > previousItem.timestamp &&
-      >
+          !moment(previousItem.timestamp).isSame(item.timestamp, 'day')
-        {notification}
+      );
-      </InlineNotificationWrapper>
+    if (shouldRenderDateHeader) {
-    );
+      return (
+        <>
+          <TimelineDateHeader i18n={i18n} timestamp={item.timestamp} />
+          {itemContents}
+        </>
+      );
+    }
+    return itemContents;
   }
 }

ts/components/conversation/TimelineLoadingRow.stories.tsx

@@ -1,45 +0,0 @@
-// Copyright 2020 Signal Messenger, LLC
-// SPDX-License-Identifier: AGPL-3.0-only
-
-import * as React from 'react';
-import { storiesOf } from '@storybook/react';
-import { date, number, select } from '@storybook/addon-knobs';
-import { action } from '@storybook/addon-actions';
-
-import type { Props } from './TimelineLoadingRow';
-import { TimelineLoadingRow } from './TimelineLoadingRow';
-
-const story = storiesOf('Components/Conversation/TimelineLoadingRow', module);
-
-const createProps = (overrideProps: Partial<Props> = {}): Props => ({
-  state: select(
-    'state',
-    { idle: 'idle', countdown: 'countdown', loading: 'loading' },
-    overrideProps.state || 'idle'
-  ),
-  duration: number('duration', overrideProps.duration || 0),
-  expiresAt: date('expiresAt', new Date(overrideProps.expiresAt || Date.now())),
-  onComplete: action('onComplete'),
-});
-
-story.add('Idle', () => {
-  const props = createProps();
-
-  return <TimelineLoadingRow {...props} />;
-});
-
-story.add('Countdown', () => {
-  const props = createProps({
-    state: 'countdown',
-    duration: 40000,
-    expiresAt: Date.now() + 20000,
-  });
-
-  return <TimelineLoadingRow {...props} />;
-});
-
-story.add('Loading', () => {
-  const props = createProps({ state: 'loading' });
-
-  return <TimelineLoadingRow {...props} />;
-});

ts/components/conversation/TimelineLoadingRow.tsx

@@ -1,48 +0,0 @@
-// Copyright 2019-2021 Signal Messenger, LLC
-// SPDX-License-Identifier: AGPL-3.0-only
-
-import React from 'react';
-import { isNumber } from 'lodash';
-
-import { Countdown } from '../Countdown';
-import { Spinner } from '../Spinner';
-
-export type STATE_ENUM = 'idle' | 'countdown' | 'loading';
-
-export type Props = {
-  state: STATE_ENUM;
-  duration?: number;
-  expiresAt?: number;
-  onComplete?: () => unknown;
-};
-
-const FAKE_DURATION = 1000;
-
-export class TimelineLoadingRow extends React.PureComponent<Props> {
-  public renderContents(): JSX.Element {
-    const { state, duration, expiresAt, onComplete } = this.props;
-
-    if (state === 'idle') {
-      const fakeExpiresAt = Date.now() - FAKE_DURATION;
-
-      return <Countdown duration={FAKE_DURATION} expiresAt={fakeExpiresAt} />;
-    }
-    if (state === 'countdown' && isNumber(duration) && isNumber(expiresAt)) {
-      return (
-        <Countdown
-          duration={duration}
-          expiresAt={expiresAt}
-          onComplete={onComplete}
-        />
-      );
-    }
-
-    return <Spinner size="24" svgSize="small" direction="on-background" />;
-  }
-
-  public override render(): JSX.Element {
-    return (
-      <div className="module-timeline-loading-row">{this.renderContents()}</div>
-    );
-  }
-}

ts/components/conversationList/BaseConversationListItem.tsx

@@ -1,4 +1,4 @@
-// Copyright 2021 Signal Messenger, LLC
+// Copyright 2021-2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import type { ReactNode, FunctionComponent } from 'react';
@@ -9,12 +9,12 @@ import { v4 as uuid } from 'uuid';
 
 import { Avatar, AvatarSize } from '../Avatar';
 import type { BadgeType } from '../../badges/types';
-import { Timestamp } from '../conversation/Timestamp';
 import { isConversationUnread } from '../../util/isConversationUnread';
 import { cleanId } from '../_util';
 import type { LocalizerType, ThemeType } from '../../types/Util';
 import type { ConversationType } from '../../state/ducks/conversations';
 import { Spinner } from '../Spinner';
+import { formatDateTimeShort } from '../../util/timestamp';
 
 const BASE_CLASS_NAME =
   'module-conversation-list__item--contact-or-conversation';
@@ -24,7 +24,6 @@ const HEADER_CLASS_NAME = `${CONTENT_CLASS_NAME}__header`;
 export const HEADER_NAME_CLASS_NAME = `${HEADER_CLASS_NAME}__name`;
 export const HEADER_CONTACT_NAME_CLASS_NAME = `${HEADER_NAME_CLASS_NAME}__contact-name`;
 export const DATE_CLASS_NAME = `${HEADER_CLASS_NAME}__date`;
-const TIMESTAMP_CLASS_NAME = `${DATE_CLASS_NAME}__timestamp`;
 const MESSAGE_CLASS_NAME = `${CONTENT_CLASS_NAME}__message`;
 export const MESSAGE_TEXT_CLASS_NAME = `${MESSAGE_CLASS_NAME}__text`;
 const CHECKBOX_CLASS_NAME = `${BASE_CLASS_NAME}__checkbox`;
@@ -175,16 +174,7 @@ export const BaseConversationListItem: FunctionComponent<PropsType> =
         >
           <div className={HEADER_CLASS_NAME}>
             <div className={`${HEADER_CLASS_NAME}__name`}>{headerName}</div>
-            {isNumber(headerDate) && (
+            <Timestamp timestamp={headerDate} i18n={i18n} />
-              <div className={DATE_CLASS_NAME}>
-                <Timestamp
-                  timestamp={headerDate}
-                  extended={false}
-                  module={TIMESTAMP_CLASS_NAME}
-                  i18n={i18n}
-                />
-              </div>
-            )}
           </div>
           {messageText || isUnread ? (
             <div className={MESSAGE_CLASS_NAME}>
@@ -258,6 +248,22 @@ export const BaseConversationListItem: FunctionComponent<PropsType> =
     );
   });
 
+function Timestamp({
+  i18n,
+  timestamp,
+}: Readonly<{ i18n: LocalizerType; timestamp?: number }>) {
+  if (!isNumber(timestamp)) {
+    return null;
+  }
+
+  const date = new Date(timestamp);
+  return (
+    <time className={DATE_CLASS_NAME} dateTime={date.toISOString()}>
+      {formatDateTimeShort(i18n, date)}
+    </time>
+  );
+}
+
 function UnreadIndicator({
   count = 0,
   isUnread,

ts/models/conversations.ts

@@ -213,6 +213,9 @@ export class ConversationModel extends window.Backbone
 
   private isInReduxBatch = false;
 
+  // This number is recorded as an optimization and may be out of date.
+  private newestReceivedAtMarkedRead?: number;
+
   override defaults(): Partial<ConversationAttributesType> {
     return {
       unreadCount: 0,
@@ -4572,6 +4575,15 @@ export class ConversationModel extends window.Backbone
       sendReadReceipts: true,
     }
   ): Promise<void> {
+    // This early return is an optimization, not a guarantee.
+    const { newestReceivedAtMarkedRead } = this;
+    if (
+      typeof newestReceivedAtMarkedRead === 'number' &&
+      newestUnreadAt <= newestReceivedAtMarkedRead
+    ) {
+      return;
+    }
+
     await markConversationRead(this.attributes, newestUnreadAt, options);
 
     const unreadCount = await window.Signal.Data.getTotalUnreadForConversation(
@@ -4583,6 +4595,8 @@ export class ConversationModel extends window.Backbone
       this.set({ unreadCount });
       window.Signal.Data.updateConversation(this.attributes);
     }
+
+    this.newestReceivedAtMarkedRead = newestUnreadAt;
   }
 
   // This is an expensive operation we use to populate the message request hero row. It

ts/state/ducks/user.ts

@@ -1,4 +1,4 @@
-// Copyright 2019-2020 Signal Messenger, LLC
+// Copyright 2019-2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import { trigger } from '../../shims/events';
@@ -23,6 +23,7 @@ export type UserStateType = {
   i18n: LocalizerType;
   interactionMode: 'mouse' | 'keyboard';
   theme: ThemeType;
+  version: string;
 };
 
 // Actions
@@ -98,6 +99,7 @@ export function getEmptyState(): UserStateType {
         },
       }
     ),
+    version: '0.0.0',
   };
 }
 

ts/state/selectors/items.ts

@@ -1,11 +1,11 @@
-// Copyright 2019-2021 Signal Messenger, LLC
+// Copyright 2019-2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import { createSelector } from 'reselect';
 import { isInteger } from 'lodash';
 
 import { ITEM_NAME as UNIVERSAL_EXPIRE_TIMER_ITEM } from '../../util/universalExpireTimer';
-import type { ConfigMapType } from '../../RemoteConfig';
+import type { ConfigKeyType, ConfigMapType } from '../../RemoteConfig';
 
 import type { StateType } from '../reducer';
 import type { ItemsStateType } from '../ducks/items';
@@ -15,6 +15,7 @@ import type {
 } from '../../types/Colors';
 import { DEFAULT_CONVERSATION_COLOR } from '../../types/Colors';
 import { getPreferredReactionEmoji as getPreferredReactionEmojiFromStoredValue } from '../../reactions/preferredReactionEmoji';
+import { getIsAlpha, getIsBeta } from './user';
 
 const DEFAULT_PREFERRED_LEFT_PANE_WIDTH = 320;
 
@@ -42,15 +43,39 @@ export const getUniversalExpireTimer = createSelector(
   (state: ItemsStateType): number => state[UNIVERSAL_EXPIRE_TIMER_ITEM] || 0
 );
 
+const isRemoteConfigFlagEnabled = (
+  config: Readonly<ConfigMapType>,
+  key: ConfigKeyType
+): boolean => Boolean(config[key]?.enabled);
+
 const getRemoteConfig = createSelector(
   getItems,
-  (state: ItemsStateType): ConfigMapType | undefined => state.remoteConfig
+  (state: ItemsStateType): ConfigMapType => state.remoteConfig || {}
 );
 
 export const getUsernamesEnabled = createSelector(
   getRemoteConfig,
-  (remoteConfig?: ConfigMapType): boolean =>
+  (remoteConfig: ConfigMapType): boolean =>
-    Boolean(remoteConfig?.['desktop.usernames']?.enabled)
+    isRemoteConfigFlagEnabled(remoteConfig, 'desktop.usernames')
+);
+
+export const getAreFloatingDateHeadersEnabled = createSelector(
+  getRemoteConfig,
+  getIsAlpha,
+  getIsBeta,
+  (remoteConfig: ConfigMapType, isAlpha, isBeta): boolean => {
+    if (
+      isAlpha ||
+      isRemoteConfigFlagEnabled(remoteConfig, 'desktop.internalUser')
+    ) {
+      return true;
+    }
+
+    const remoteConfigKey: ConfigKeyType = isBeta
+      ? 'desktop.floatingDateHeaders.beta'
+      : 'desktop.floatingDateHeaders.production';
+    return isRemoteConfigFlagEnabled(remoteConfig, remoteConfigKey);
+  }
 );
 
 export const getDefaultConversationColor = createSelector(

ts/state/selectors/message.ts

@@ -1,4 +1,4 @@
-// Copyright 2021 Signal Messenger, LLC
+// Copyright 2021-2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import {
@@ -670,6 +670,7 @@ export const getBubblePropsForMessage = createSelectorCreator(memoizeByRoot)(
   (_, data): TimelineItemType => ({
     type: 'message' as const,
     data,
+    timestamp: data.timestamp,
   })
 );
 
@@ -678,94 +679,113 @@ export function getPropsForBubble(
   message: MessageWithUIFieldsType,
   options: GetPropsForBubbleOptions
 ): TimelineItemType {
+  // eslint-disable-next-line camelcase
+  const { received_at_ms: receivedAt, timestamp: messageTimestamp } = message;
+  const timestamp = receivedAt || messageTimestamp;
+
   if (isUnsupportedMessage(message)) {
     return {
       type: 'unsupportedMessage',
       data: getPropsForUnsupportedMessage(message, options),
+      timestamp,
     };
   }
   if (isGroupV2Change(message)) {
     return {
       type: 'groupV2Change',
       data: getPropsForGroupV2Change(message, options),
+      timestamp,
     };
   }
   if (isGroupV1Migration(message)) {
     return {
       type: 'groupV1Migration',
       data: getPropsForGroupV1Migration(message, options),
+      timestamp,
     };
   }
   if (isMessageHistoryUnsynced(message)) {
     return {
       type: 'linkNotification',
       data: null,
+      timestamp,
     };
   }
   if (isExpirationTimerUpdate(message)) {
     return {
       type: 'timerNotification',
       data: getPropsForTimerNotification(message, options),
+      timestamp,
     };
   }
   if (isKeyChange(message)) {
     return {
       type: 'safetyNumberNotification',
       data: getPropsForSafetyNumberNotification(message, options),
+      timestamp,
     };
   }
   if (isVerifiedChange(message)) {
     return {
       type: 'verificationNotification',
       data: getPropsForVerificationNotification(message, options),
+      timestamp,
     };
   }
   if (isGroupUpdate(message)) {
     return {
       type: 'groupNotification',
       data: getPropsForGroupNotification(message, options),
+      timestamp,
     };
   }
   if (isEndSession(message)) {
     return {
       type: 'resetSessionNotification',
       data: null,
+      timestamp,
     };
   }
   if (isCallHistory(message)) {
     return {
       type: 'callHistory',
       data: getPropsForCallHistory(message, options),
+      timestamp,
     };
   }
   if (isProfileChange(message)) {
     return {
       type: 'profileChange',
       data: getPropsForProfileChange(message, options),
+      timestamp,
     };
   }
   if (isUniversalTimerNotification(message)) {
     return {
       type: 'universalTimerNotification',
       data: null,
+      timestamp,
     };
   }
   if (isChangeNumberNotification(message)) {
     return {
       type: 'changeNumberNotification',
       data: getPropsForChangeNumberNotification(message, options),
+      timestamp,
     };
   }
   if (isChatSessionRefreshed(message)) {
     return {
       type: 'chatSessionRefreshed',
       data: null,
+      timestamp,
     };
   }
   if (isDeliveryIssue(message)) {
     return {
       type: 'deliveryIssue',
       data: getPropsForDeliveryIssue(message, options),
+      timestamp,
     };
   }
 

ts/state/selectors/user.ts

@@ -1,4 +1,4 @@
-// Copyright 2019-2020 Signal Messenger, LLC
+// Copyright 2019-2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import { createSelector } from 'reselect';
@@ -9,6 +9,8 @@ import type { UUIDStringType } from '../../types/UUID';
 import type { StateType } from '../reducer';
 import type { UserStateType } from '../ducks/user';
 
+import { isAlpha, isBeta } from '../../util/version';
+
 export const getUser = (state: StateType): UserStateType => state.user;
 
 export const getUserNumber = createSelector(
@@ -70,3 +72,12 @@ export const getTheme = createSelector(
   getUser,
   (state: UserStateType): ThemeType => state.theme
 );
+
+const getVersion = createSelector(
+  getUser,
+  (state: UserStateType) => state.version
+);
+
+export const getIsAlpha = createSelector(getVersion, isAlpha);
+
+export const getIsBeta = createSelector(getVersion, isBeta);

ts/state/smart/Timeline.tsx

@@ -1,4 +1,4 @@
-// Copyright 2019-2021 Signal Messenger, LLC
+// Copyright 2019-2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import { isEmpty, mapValues, pick } from 'lodash';
@@ -18,6 +18,7 @@ import { Timeline } from '../../components/conversation/Timeline';
 import type { StateType } from '../reducer';
 import type { ConversationType } from '../ducks/conversations';
 
+import { getAreFloatingDateHeadersEnabled } from '../selectors/items';
 import { getIntl, getTheme } from '../selectors/user';
 import {
   getConversationByUuidSelector,
@@ -25,6 +26,7 @@ import {
   getConversationSelector,
   getConversationsByTitleSelector,
   getInvitedContactsForNewlyCreatedGroup,
+  getMessageSelector,
   getSelectedMessage,
 } from '../selectors/conversations';
 
@@ -32,13 +34,12 @@ import { SmartTimelineItem } from './TimelineItem';
 import { SmartTypingBubble } from './TypingBubble';
 import { SmartLastSeenIndicator } from './LastSeenIndicator';
 import { SmartHeroRow } from './HeroRow';
-import { SmartTimelineLoadingRow } from './TimelineLoadingRow';
 import { renderAudioAttachment } from './renderAudioAttachment';
 import { renderEmojiPicker } from './renderEmojiPicker';
 import { renderReactionPicker } from './renderReactionPicker';
 
 import { getOwn } from '../../util/getOwn';
-import { assert } from '../../util/assert';
+import { assert, strictAssert } from '../../util/assert';
 import { missingCaseError } from '../../util/missingCaseError';
 import { getGroupMemberships } from '../../util/getGroupMemberships';
 import {
@@ -114,6 +115,7 @@ function renderItem({
   containerElementRef,
   containerWidthBreakpoint,
   conversationId,
+  isOldestTimelineItem,
   messageId,
   nextMessageId,
   onHeightChange,
@@ -123,6 +125,7 @@ function renderItem({
   containerElementRef: RefObject<HTMLElement>;
   containerWidthBreakpoint: WidthBreakpoint;
   conversationId: string;
+  isOldestTimelineItem: boolean;
   messageId: string;
   nextMessageId: undefined | string;
   onHeightChange: (messageId: string) => unknown;
@@ -134,6 +137,7 @@ function renderItem({
       containerElementRef={containerElementRef}
       containerWidthBreakpoint={containerWidthBreakpoint}
       conversationId={conversationId}
+      isOldestTimelineItem={isOldestTimelineItem}
       messageId={messageId}
       previousMessageId={previousMessageId}
       nextMessageId={nextMessageId}
@@ -164,9 +168,6 @@ function renderHeroRow(
     />
   );
 }
-function renderLoadingRow(id: string): JSX.Element {
-  return <SmartTimelineLoadingRow id={id} />;
-}
 function renderTypingBubble(id: string): JSX.Element {
   return <SmartTypingBubble id={id} />;
 }
@@ -294,6 +295,13 @@ const mapStateToProps = (state: StateType, props: ExternalProps) => {
   const conversationMessages = getConversationMessagesSelector(state)(id);
   const selectedMessage = getSelectedMessage(state);
 
+  const messageSelector = getMessageSelector(state);
+  const getTimestampForMessage = (messageId: string): number => {
+    const result = messageSelector(messageId)?.timestamp;
+    strictAssert(result, 'Expected a message');
+    return result;
+  };
+
   return {
     id,
     ...pick(conversation, [
@@ -314,13 +322,15 @@ const mapStateToProps = (state: StateType, props: ExternalProps) => {
     warning: getWarning(conversation, state),
     contactSpoofingReview: getContactSpoofingReview(id, state),
 
+    areFloatingDateHeadersEnabled: getAreFloatingDateHeadersEnabled(state),
+
+    getTimestampForMessage,
     getPreferredBadge: getPreferredBadgeSelector(state),
     i18n: getIntl(state),
     theme: getTheme(state),
     renderItem,
     renderLastSeenIndicator,
     renderHeroRow,
-    renderLoadingRow,
     renderTypingBubble,
     ...actions,
   };

ts/state/smart/TimelineItem.tsx

@@ -1,4 +1,4 @@
-// Copyright 2019-2021 Signal Messenger, LLC
+// Copyright 2019-2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import type { RefObject } from 'react';
@@ -23,6 +23,7 @@ import { SmartUniversalTimerNotification } from './UniversalTimerNotification';
 type ExternalProps = {
   containerElementRef: RefObject<HTMLElement>;
   conversationId: string;
+  isOldestTimelineItem: boolean;
   messageId: string;
   nextMessageId: undefined | string;
   previousMessageId: undefined | string;
@@ -40,6 +41,7 @@ const mapStateToProps = (state: StateType, props: ExternalProps) => {
   const {
     containerElementRef,
     conversationId,
+    isOldestTimelineItem,
     messageId,
     nextMessageId,
     previousMessageId,
@@ -70,6 +72,7 @@ const mapStateToProps = (state: StateType, props: ExternalProps) => {
     conversationColor: conversation?.conversationColor,
     customColor: conversation?.customColor,
     getPreferredBadge: getPreferredBadgeSelector(state),
+    isOldestTimelineItem,
     isSelected,
     renderContact,
     renderUniversalTimerNotification,

ts/state/smart/TimelineLoadingRow.tsx

@@ -1,56 +0,0 @@
-// Copyright 2019-2020 Signal Messenger, LLC
-// SPDX-License-Identifier: AGPL-3.0-only
-
-import { isNumber } from 'lodash';
-import { connect } from 'react-redux';
-import { mapDispatchToProps } from '../actions';
-
-import type { STATE_ENUM } from '../../components/conversation/TimelineLoadingRow';
-import { TimelineLoadingRow } from '../../components/conversation/TimelineLoadingRow';
-import { LOAD_COUNTDOWN } from '../../components/conversation/Timeline';
-
-import type { StateType } from '../reducer';
-import { getIntl } from '../selectors/user';
-import { getConversationMessagesSelector } from '../selectors/conversations';
-
-type ExternalProps = {
-  id: string;
-};
-
-const mapStateToProps = (state: StateType, props: ExternalProps) => {
-  const { id } = props;
-
-  const conversation = getConversationMessagesSelector(state)(id);
-  if (!conversation) {
-    throw new Error(`Did not find conversation ${id} in state!`);
-  }
-
-  const { isLoadingMessages, loadCountdownStart } = conversation;
-
-  let loadingState: STATE_ENUM;
-
-  if (isLoadingMessages) {
-    loadingState = 'loading';
-  } else if (isNumber(loadCountdownStart)) {
-    loadingState = 'countdown';
-  } else {
-    loadingState = 'idle';
-  }
-
-  const duration = loadingState === 'countdown' ? LOAD_COUNTDOWN : undefined;
-  const expiresAt =
-    loadingState === 'countdown' && loadCountdownStart
-      ? loadCountdownStart + LOAD_COUNTDOWN
-      : undefined;
-
-  return {
-    state: loadingState,
-    duration,
-    expiresAt,
-    i18n: getIntl(state),
-  };
-};
-
-const smart = connect(mapStateToProps, mapDispatchToProps);
-
-export const SmartTimelineLoadingRow = smart(TimelineLoadingRow);

ts/test-both/state/selectors/items_test.ts

@@ -1,4 +1,4 @@
-// Copyright 2020-2021 Signal Messenger, LLC
+// Copyright 2020-2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import { assert } from 'chai';
@@ -8,6 +8,7 @@ import {
   getPinnedConversationIds,
   getPreferredLeftPaneWidth,
   getPreferredReactionEmoji,
+  getUsernamesEnabled,
 } from '../../../state/selectors/items';
 import type { StateType } from '../../../state/reducer';
 import type { ItemsStateType } from '../../../state/ducks/items';
@@ -143,4 +144,36 @@ describe('both/state/selectors/items', () => {
       assert.deepStrictEqual(actual, preferredReactionEmoji);
     });
   });
+
+  describe('#getUsernamesEnabled', () => {
+    it('returns false if the flag is missing or disabled', () => {
+      [
+        {},
+        { remoteConfig: {} },
+        {
+          remoteConfig: {
+            'desktop.usernames': {
+              name: 'desktop.usernames' as const,
+              enabled: false,
+            },
+          },
+        },
+      ].forEach(itemsState => {
+        const state = getRootState(itemsState);
+        assert.isFalse(getUsernamesEnabled(state));
+      });
+    });
+
+    it('returns true if the flag is enabled', () => {
+      const state = getRootState({
+        remoteConfig: {
+          'desktop.usernames': {
+            name: 'desktop.usernames' as const,
+            enabled: true,
+          },
+        },
+      });
+      assert.isTrue(getUsernamesEnabled(state));
+    });
+  });
 });

ts/test-both/state/selectors/user_test.ts

@@ -0,0 +1,58 @@
+// Copyright 2022 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import { assert } from 'chai';
+
+import type { StateType } from '../../../state/reducer';
+import type { UserStateType } from '../../../state/ducks/user';
+import { getEmptyState } from '../../../state/ducks/user';
+
+import { getIsAlpha, getIsBeta } from '../../../state/selectors/user';
+
+describe('both/state/selectors/user', () => {
+  function getRootState(
+    overrides: Readonly<Partial<UserStateType>>
+  ): StateType {
+    return {
+      user: {
+        ...getEmptyState(),
+        ...overrides,
+      },
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } as any;
+  }
+
+  describe('#getIsAlpha', () => {
+    it('returns false for beta', () => {
+      const state = getRootState({ version: '1.23.4-beta.5' });
+      assert.isFalse(getIsAlpha(state));
+    });
+
+    it('returns false for production', () => {
+      const state = getRootState({ version: '1.23.4' });
+      assert.isFalse(getIsAlpha(state));
+    });
+
+    it('returns true for alpha', () => {
+      const state = getRootState({ version: '1.23.4-alpha.987' });
+      assert.isTrue(getIsAlpha(state));
+    });
+  });
+
+  describe('#getIsBeta', () => {
+    it('returns false for alpha', () => {
+      const state = getRootState({ version: '1.23.4-alpha.987' });
+      assert.isFalse(getIsBeta(state));
+    });
+
+    it('returns false for production', () => {
+      const state = getRootState({ version: '1.23.4' });
+      assert.isFalse(getIsBeta(state));
+    });
+
+    it('returns true for beta', () => {
+      const state = getRootState({ version: '1.23.4-beta.5' });
+      assert.isTrue(getIsBeta(state));
+    });
+  });
+});

ts/test-both/util/timestamp_test.ts

@@ -1,18 +1,232 @@
-// Copyright 2021 Signal Messenger, LLC
+// Copyright 2021-2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import { assert } from 'chai';
+import * as sinon from 'sinon';
+import moment from 'moment';
+import type { LocalizerType } from '../../types/Util';
 
 import {
   isOlderThan,
   isMoreRecentThan,
   toDayMillis,
+  formatDate,
+  formatDateTimeLong,
+  formatDateTimeShort,
+  formatTime,
 } from '../../util/timestamp';
 
+const FAKE_NOW = new Date('2020-01-23T04:56:00.000');
 const ONE_HOUR = 3600 * 1000;
 const ONE_DAY = 24 * ONE_HOUR;
 
 describe('timestamp', () => {
+  function useFakeTimers() {
+    let sandbox: sinon.SinonSandbox;
+
+    beforeEach(() => {
+      sandbox = sinon.createSandbox();
+      sandbox.useFakeTimers({ now: FAKE_NOW });
+    });
+
+    afterEach(() => {
+      sandbox.restore();
+    });
+  }
+
+  const i18n = ((key: string, values: Array<string> = []): string => {
+    switch (key) {
+      case 'today':
+        return 'Today';
+      case 'yesterday':
+        return 'Yesterday';
+      case 'TimelineDateHeader--date-in-last-6-months':
+        return '[short] ddd, MMM D';
+      case 'TimelineDateHeader--date-older-than-6-months':
+        return '[long] MMM D, YYYY';
+      case 'timestampFormat__long__today':
+        return '[Today] LT';
+      case 'timestampFormat__long__yesterday':
+        return '[Yesterday] LT';
+      case 'justNow':
+        return 'Now';
+      case 'minutesAgo':
+        return `${values[0]}m`;
+      case 'timestampFormat_M':
+        return 'MMM D';
+      default:
+        throw new Error(`Unexpected key ${key}`);
+    }
+  }) as LocalizerType;
+
+  describe('formatDate', () => {
+    useFakeTimers();
+
+    it('returns "Today" for times today', () => {
+      [moment(), moment().endOf('day'), moment().startOf('day')].forEach(m => {
+        assert.strictEqual(formatDate(i18n, m), 'Today');
+      });
+    });
+
+    it('returns "Yesterday" for times yesterday', () => {
+      const minus24Hours = moment().subtract(1, 'day');
+      [
+        minus24Hours,
+        minus24Hours.clone().endOf('day'),
+        minus24Hours.clone().startOf('day'),
+      ].forEach(m => {
+        assert.strictEqual(formatDate(i18n, m), 'Yesterday');
+      });
+    });
+
+    it('returns a formatted timestamp for dates more recent than six months', () => {
+      const m = moment().subtract(2, 'months');
+      const result = formatDate(i18n, m);
+      assert.include(result, 'short');
+      assert.include(result, m.format('ddd'));
+      assert.include(result, m.format('MMM'));
+      assert.include(result, m.format('D'));
+      assert.notInclude(result, m.format('YYYY'));
+    });
+
+    it('returns a formatted timestamp for dates older than six months', () => {
+      assert.strictEqual(
+        formatDate(i18n, moment('2017-03-03')),
+        'long Mar 3, 2017'
+      );
+    });
+
+    it('returns a formatted timestamp if the i18n strings are too long', () => {
+      const longI18n = ((_: string) =>
+        Array(50).fill('MMM').join(' ')) as LocalizerType;
+      assert.include(formatDate(longI18n, moment('2017-03-03')), '2017');
+    });
+  });
+
+  describe('formatDateTimeLong', () => {
+    useFakeTimers();
+
+    it('includes "Today" and the time for times today', () => {
+      assert.strictEqual(formatDateTimeLong(i18n, FAKE_NOW), 'Today 4:56 AM');
+    });
+
+    it('includes "Yesterday" and the time for times yesterday', () => {
+      assert.strictEqual(
+        formatDateTimeLong(i18n, moment().subtract(1, 'day')),
+        'Yesterday 4:56 AM'
+      );
+    });
+
+    it('formats month name, day of month, year, and time for other times', () => {
+      [
+        moment().add(1, 'week'),
+        moment().subtract(1, 'week'),
+        moment().subtract(1, 'year'),
+      ].forEach(timestamp => {
+        assert.strictEqual(
+          formatDateTimeLong(i18n, timestamp),
+          moment(timestamp).format('lll')
+        );
+      });
+    });
+  });
+
+  describe('formatDateTimeShort', () => {
+    useFakeTimers();
+
+    it('returns "Now" for times within the last minute, including unexpected times in the future', () => {
+      [
+        Date.now(),
+        moment().subtract(1, 'second'),
+        moment().subtract(59, 'seconds'),
+        moment().add(1, 'minute'),
+        moment().add(1, 'year'),
+      ].forEach(timestamp => {
+        assert.strictEqual(formatDateTimeShort(i18n, timestamp), 'Now');
+      });
+    });
+
+    it('returns "X minutes ago" for times in the last hour, but older than 1 minute', () => {
+      assert.strictEqual(
+        formatDateTimeShort(i18n, moment().subtract(1, 'minute')),
+        '1m'
+      );
+      assert.strictEqual(
+        formatDateTimeShort(i18n, moment().subtract(30, 'minutes')),
+        '30m'
+      );
+      assert.strictEqual(
+        formatDateTimeShort(i18n, moment().subtract(59, 'minutes')),
+        '59m'
+      );
+    });
+
+    it('returns hh:mm-like times for times older than 1 hour from now, but still today', () => {
+      const oneHourAgo = new Date('2020-01-23T03:56:00.000');
+      assert.deepEqual(formatDateTimeShort(i18n, oneHourAgo), '3:56 AM');
+    });
+
+    it('returns the day of the week for dates in the last week, but still this month', () => {
+      const yesterday = new Date('2020-01-22T23:56:00.000');
+      assert.deepEqual(formatDateTimeShort(i18n, yesterday), 'Wed');
+
+      const twoDaysAgo = new Date('2020-01-21T05:56:00.000');
+      assert.deepEqual(formatDateTimeShort(i18n, twoDaysAgo), 'Tue');
+    });
+
+    it('returns the month and day for dates older than this week, but still this year', () => {
+      const earlier = new Date('2020-01-03T04:56:00.000');
+      assert.deepEqual(formatDateTimeShort(i18n, earlier), 'Jan 3');
+    });
+
+    it('returns the year, month, and day for dates older than a year ago', () => {
+      const longAgo = new Date('1998-11-23T12:34:00.000');
+      assert.deepEqual(formatDateTimeShort(i18n, longAgo), 'Nov 23, 1998');
+    });
+  });
+
+  describe('formatTime', () => {
+    useFakeTimers();
+
+    it('returns "Now" for times within the last minute, including unexpected times in the future', () => {
+      [
+        Date.now(),
+        moment().subtract(1, 'second'),
+        moment().subtract(59, 'seconds'),
+        moment().add(1, 'minute'),
+        moment().add(1, 'year'),
+      ].forEach(timestamp => {
+        assert.strictEqual(formatTime(i18n, timestamp), 'Now');
+      });
+    });
+
+    it('returns "X minutes ago" for times in the last hour, but older than 1 minute', () => {
+      assert.strictEqual(
+        formatTime(i18n, moment().subtract(1, 'minute')),
+        '1m'
+      );
+      assert.strictEqual(
+        formatTime(i18n, moment().subtract(30, 'minutes')),
+        '30m'
+      );
+      assert.strictEqual(
+        formatTime(i18n, moment().subtract(59, 'minutes')),
+        '59m'
+      );
+    });
+
+    it('returns hh:mm-like times for times older than 1 hour from now', () => {
+      const oneHourAgo = new Date('2020-01-23T03:56:00.000');
+      assert.deepEqual(formatTime(i18n, oneHourAgo), '3:56 AM');
+
+      const oneDayAgo = new Date('2020-01-22T04:56:00.000');
+      assert.deepEqual(formatTime(i18n, oneDayAgo), '4:56 AM');
+
+      const oneYearAgo = new Date('2019-01-23T04:56:00.000');
+      assert.deepEqual(formatTime(i18n, oneYearAgo), '4:56 AM');
+    });
+  });
+
   describe('isOlderThan', () => {
     it('returns false on recent and future timestamps', () => {
       assert.isFalse(isOlderThan(Date.now(), ONE_DAY));

ts/util/formatRelativeTime.ts

@@ -1,66 +0,0 @@
-// Copyright 2018-2020 Signal Messenger, LLC
-// SPDX-License-Identifier: AGPL-3.0-only
-
-import moment from 'moment';
-import type { LocalizerType } from '../types/Util';
-
-// Only applies in the english locales, but it ensures that the format
-//   is what we want.
-function replaceSuffix(time: string) {
-  return time.replace(/ PM$/, 'pm').replace(/ AM$/, 'am');
-}
-
-const getExtendedFormats = (i18n: LocalizerType) => ({
-  y: 'lll',
-  M: `${i18n('timestampFormat_M') || 'MMM D'} LT`,
-  d: 'ddd LT',
-});
-const getShortFormats = (i18n: LocalizerType) => ({
-  y: 'll',
-  M: i18n('timestampFormat_M') || 'MMM D',
-  d: 'ddd',
-});
-
-function isToday(timestamp: moment.Moment) {
-  const today = moment().format('ddd');
-  const targetDay = moment(timestamp).format('ddd');
-
-  return today === targetDay;
-}
-
-function isYear(timestamp: moment.Moment) {
-  const year = moment().format('YYYY');
-  const targetYear = moment(timestamp).format('YYYY');
-
-  return year === targetYear;
-}
-
-export function formatRelativeTime(
-  rawTimestamp: number | Date,
-  options: { extended?: boolean; i18n: LocalizerType }
-): string {
-  const { extended, i18n } = options;
-
-  const formats = extended ? getExtendedFormats(i18n) : getShortFormats(i18n);
-  const timestamp = moment(rawTimestamp);
-  const now = moment();
-  const diff = moment.duration(now.diff(timestamp));
-
-  if (diff.years() >= 1 || !isYear(timestamp)) {
-    return replaceSuffix(timestamp.format(formats.y));
-  }
-  if (diff.months() >= 1 || diff.days() > 6) {
-    return replaceSuffix(timestamp.format(formats.M));
-  }
-  if (diff.days() >= 1 || !isToday(timestamp)) {
-    return replaceSuffix(timestamp.format(formats.d));
-  }
-  if (diff.hours() >= 1) {
-    return i18n('hoursAgo', [String(diff.hours())]);
-  }
-  if (diff.minutes() >= 1) {
-    return i18n('minutesAgo', [String(diff.minutes())]);
-  }
-
-  return i18n('justNow');
-}

ts/util/timestamp.ts

@@ -1,7 +1,15 @@
-// Copyright 2021 Signal Messenger, LLC
+// Copyright 2021-2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-const ONE_DAY = 24 * 3600 * 1000;
+import type { Moment } from 'moment';
+import moment from 'moment';
+import type { LocalizerType } from '../types/Util';
+import * as log from '../logging/log';
+import { DAY, HOUR, MINUTE, MONTH, WEEK } from './durations';
+
+const MAX_FORMAT_STRING_LENGTH = 50;
+
+type RawTimestamp = Readonly<number | Date | Moment>;
 
 export function isMoreRecentThan(timestamp: number, delta: number): boolean {
   return timestamp > Date.now() - delta;
@@ -20,5 +28,124 @@ export function isInFuture(timestamp: number): boolean {
 }
 
 export function toDayMillis(timestamp: number): number {
-  return timestamp - (timestamp % ONE_DAY);
+  return timestamp - (timestamp % DAY);
+}
+
+const isSameDay = (a: RawTimestamp, b: RawTimestamp): boolean =>
+  moment(a).isSame(b, 'day');
+
+const isToday = (rawTimestamp: RawTimestamp): boolean =>
+  isSameDay(rawTimestamp, Date.now());
+
+const isYesterday = (rawTimestamp: RawTimestamp): boolean =>
+  isSameDay(rawTimestamp, moment().subtract(1, 'day'));
+
+// This sanitization is probably unnecessary, but we do it just in case someone translates
+//   a super long format string and causes performance issues.
+function sanitizeFormatString(
+  rawFormatString: string,
+  fallback: string
+): string {
+  if (rawFormatString.length > MAX_FORMAT_STRING_LENGTH) {
+    log.error(
+      `Format string ${JSON.stringify(
+        rawFormatString
+      )} is too long. Falling back to ${fallback}`
+    );
+    return fallback;
+  }
+  return rawFormatString;
+}
+
+export function formatDateTimeShort(
+  i18n: LocalizerType,
+  rawTimestamp: RawTimestamp
+): string {
+  const timestamp = rawTimestamp.valueOf();
+
+  const now = Date.now();
+  const diff = now - timestamp;
+
+  if (diff < MINUTE) {
+    return i18n('justNow');
+  }
+
+  if (diff < HOUR) {
+    return i18n('minutesAgo', [Math.floor(diff / MINUTE).toString()]);
+  }
+
+  const m = moment(timestamp);
+
+  if (isToday(timestamp)) {
+    return m.format('LT');
+  }
+
+  if (diff < WEEK && m.isSame(now, 'month')) {
+    return m.format('ddd');
+  }
+
+  if (m.isSame(now, 'year')) {
+    return m.format(i18n('timestampFormat_M') || 'MMM D');
+  }
+
+  return m.format('ll');
+}
+
+export function formatDateTimeLong(
+  i18n: LocalizerType,
+  rawTimestamp: RawTimestamp
+): string {
+  let rawFormatString: string;
+  if (isToday(rawTimestamp)) {
+    rawFormatString = i18n('timestampFormat__long__today');
+  } else if (isYesterday(rawTimestamp)) {
+    rawFormatString = i18n('timestampFormat__long__yesterday');
+  } else {
+    rawFormatString = 'lll';
+  }
+  const formatString = sanitizeFormatString(rawFormatString, 'lll');
+
+  return moment(rawTimestamp).format(formatString);
+}
+
+export function formatTime(
+  i18n: LocalizerType,
+  rawTimestamp: RawTimestamp
+): string {
+  const timestamp = rawTimestamp.valueOf();
+  const diff = Date.now() - timestamp;
+
+  if (diff < MINUTE) {
+    return i18n('justNow');
+  }
+
+  if (diff < HOUR) {
+    return i18n('minutesAgo', [Math.floor(diff / MINUTE).toString()]);
+  }
+
+  return moment(timestamp).format('LT');
+}
+
+export function formatDate(
+  i18n: LocalizerType,
+  rawTimestamp: RawTimestamp
+): string {
+  if (isToday(rawTimestamp)) {
+    return i18n('today');
+  }
+
+  if (isYesterday(rawTimestamp)) {
+    return i18n('yesterday');
+  }
+
+  const m = moment(rawTimestamp);
+
+  const formatI18nKey =
+    Math.abs(m.diff(Date.now())) < 6 * MONTH
+      ? 'TimelineDateHeader--date-in-last-6-months'
+      : 'TimelineDateHeader--date-older-than-6-months';
+  const rawFormatString = i18n(formatI18nKey);
+  const formatString = sanitizeFormatString(rawFormatString, 'LL');
+
+  return m.format(formatString);
 }