Timeline date headers

Author: EvanHahn-Signal

_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 {
-              flex-shrink: 0;
-              margin-left: 6px;
-
-              @include font-caption;
-
-              overflow-x: hidden;
-              white-space: nowrap;
-              text-overflow: ellipsis;
-
-              @include light-theme {
-                color: $color-gray-60;
-              }
-              @include dark-theme {
-                color: $color-gray-25;
-              }
+            @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(),
       },
     };