feat: add a Wellness option to show absolute timestamps instead of relative (#2014)

Relative timestamps can cause you to feel that things are especially
interesting because they are happening "right now"; the effect is
lessened if you see absolute timestamps instead.

This fixes #2011

src/intl/en-US.js

@@ -392,6 +392,9 @@ export default {
   hideReblogCount: 'Hide boost counts',
   hideFavoriteCount: 'Hide favorite counts',
   hideUnread: 'Hide unread notifications count (i.e. the red dot)',
+  // The quality that makes something seem important or interesting because it seems to be happening now
+  immediacy: 'Immediacy',
+  showAbsoluteTimestamps: 'Show absolute timestamps instead of relative timestamps',
   ui: 'UI',
   grayscaleMode: 'Grayscale mode',
   wellnessFooter: `These settings are partly based on guidelines from the

src/routes/_components/status/StatusRelativeDate.html

@@ -4,9 +4,9 @@
    rel="prefetch"
    {tabindex}
 >
-  <time datetime={createdAtDate} title={absoluteFormattedDate}
+  <time datetime={createdAtDate} title={formattedDateTitle}
         aria-label={createdAtLabel}>
-    {timeagoFormattedDate}
+    {formattedDate}
   </time>
 </a>
 <style>
@@ -41,9 +41,23 @@
         // just a duplicate link in the focus order.
         $disableTapOnStatus ? '0' : '-1'
       ),
-      createdAtLabel: ({ timeagoFormattedDate }) => (
-        formatIntl('intl.clickToShowThread', { time: timeagoFormattedDate })
-      )
+      formattedDateTitle: ({ $disableRelativeTimestamps, absoluteFormattedDate }) => {
+        if ($disableRelativeTimestamps) {
+          return ''
+        } else {
+          return absoluteFormattedDate
+        }
+      },
+      createdAtLabel: ({ formattedDate }) => (
+        formatIntl('intl.clickToShowThread', { time: formattedDate })
+      ),
+      formattedDate: ({ $disableRelativeTimestamps, timeagoFormattedDate, absoluteFormattedDate }) => {
+        if ($disableRelativeTimestamps) {
+          return absoluteFormattedDate
+        } else {
+          return timeagoFormattedDate
+        }
+      }
     }
   }
 </script>

src/routes/_pages/settings/wellness.html

@@ -33,7 +33,7 @@
     </label>
   </form>
 
-  <h2>{intl.notifications}</h2>
+  <h2>{intl.immediacy}</h2>
 
   <form class="ui-settings">
     <label class="setting-group">
@@ -41,6 +41,11 @@
              bind:checked="$disableNotificationBadge" on:change="onChange(event)">
       {intl.hideUnread}
     </label>
+    <label class="settings-group">
+      <input type="checkbox" id="choice-disable-relative-timestamps"
+             bind:checked="$disableRelativeTimestamps" on:change="onChange(event)">
+      {intl.showAbsoluteTimestamps}
+    </label>
   </form>
 
   <InfoAside className="wellness-aside">
@@ -90,12 +95,14 @@
           disableReblogCounts,
           disableFavCounts,
           disableNotificationBadge,
+          disableRelativeTimestamps,
           enableGrayscale
         } = this.store.get()
         document.querySelector('#choice-check-all').checked = disableFollowerCounts &&
           disableReblogCounts &&
           disableFavCounts &&
           disableNotificationBadge &&
+          disableRelativeTimestamps &&
           enableGrayscale
       },
       onCheckAllChange (e) {
@@ -105,6 +112,7 @@
           disableReblogCounts: checked,
           disableFavCounts: checked,
           disableNotificationBadge: checked,
+          disableRelativeTimestamps: checked,
           enableGrayscale: checked
         })
         this.store.save()

src/routes/_store/store.js

@@ -21,6 +21,7 @@ const persistedState = {
   disableLongAriaLabels: false,
   disableNotificationBadge: false,
   disableReblogCounts: false,
+  disableRelativeTimestamps: false,
   disableTapOnStatus: false,
   enableGrayscale: false,
   hideCards: false,