From 1aa06bc0415759ad84bfeb7a4a2bc59ade68b750 Mon Sep 17 00:00:00 2001
From: Calvin Walton <calvin.walton@kepstin.ca>
Date: Sun, 21 Mar 2021 18:06:45 -0400
Subject: [PATCH] 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                             |  3 +++
 .../status/StatusRelativeDate.html            | 24 +++++++++++++++----
 src/routes/_pages/settings/wellness.html      | 10 +++++++-
 src/routes/_store/store.js                    |  1 +
 4 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/src/intl/en-US.js b/src/intl/en-US.js
index d6546885..e145bef6 100644
--- a/src/intl/en-US.js
+++ b/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
diff --git a/src/routes/_components/status/StatusRelativeDate.html b/src/routes/_components/status/StatusRelativeDate.html
index 5a89c1b8..e16bea97 100644
--- a/src/routes/_components/status/StatusRelativeDate.html
+++ b/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>
diff --git a/src/routes/_pages/settings/wellness.html b/src/routes/_pages/settings/wellness.html
index 027b8b60..a1a21253 100644
--- a/src/routes/_pages/settings/wellness.html
+++ b/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()
diff --git a/src/routes/_store/store.js b/src/routes/_store/store.js
index 61f4d3f8..de80acfd 100644
--- a/src/routes/_store/store.js
+++ b/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,