Render current day formats in the client timezone (#21878)

* Fix remaining plain %time to %time.formatted

* Add %time.relative-formatted to client format dates on the current day

* Add missing comma dangle to formats

* Use client side message format instead of the server

* Add fallback message to relatve_format.today

* Remove unused translation key and fix js lint issue

Co-authored-by: Effy Elden <effy@effy.space>

app/javascript/mastodon/locales/en.json

@@ -461,6 +461,7 @@
   "refresh": "Refresh",
   "regeneration_indicator.label": "Loading…",
   "regeneration_indicator.sublabel": "Your home feed is being prepared!",
+  "relative_format.today": "Today at {time}",
   "relative_time.days": "{number}d",
   "relative_time.full.days": "{number, plural, one {# day} other {# days}} ago",
   "relative_time.full.hours": "{number, plural, one {# hour} other {# hours}} ago",

app/javascript/packs/public.js

@@ -63,6 +63,18 @@ function main() {
       minute: 'numeric',
     });
 
+    const dateFormat = new Intl.DateTimeFormat(locale, {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+      timeFormat: false,
+    });
+
+    const timeFormat = new Intl.DateTimeFormat(locale, {
+      timeStyle: 'short',
+      hour12: false,
+    });
+
     [].forEach.call(document.querySelectorAll('.emojify'), (content) => {
       content.innerHTML = emojify(content.innerHTML);
     });
@@ -75,6 +87,32 @@ function main() {
       content.textContent = formattedDate;
     });
 
+    const isToday = date => {
+      const today = new Date();
+
+      return date.getDate() === today.getDate() &&
+        date.getMonth() === today.getMonth() &&
+        date.getFullYear() === today.getFullYear();
+    };
+    const todayFormat = new IntlMessageFormat(messages['relative_format.today'] || 'Today at {time}', locale);
+
+    [].forEach.call(document.querySelectorAll('time.relative-formatted'), (content) => {
+      const datetime = new Date(content.getAttribute('datetime'));
+
+      let formattedContent;
+
+      if (isToday(datetime)) {
+        const formattedTime = timeFormat.format(datetime);
+
+        formattedContent = todayFormat.format({ time: formattedTime });
+      } else {
+        formattedContent = dateFormat.format(datetime);
+      }
+
+      content.title = formattedContent;
+      content.textContent = formattedContent;
+    });
+
     [].forEach.call(document.querySelectorAll('time.time-ago'), (content) => {
       const datetime = new Date(content.getAttribute('datetime'));
       const now      = new Date();

app/views/admin/report_notes/_report_note.html.haml

@@ -4,11 +4,8 @@
   .report-notes__item__header
     %span.username
       = link_to report_note.account.username, admin_account_path(report_note.account_id)
-    %time{ datetime: report_note.created_at.iso8601, title: l(report_note.created_at) }
+    %time.relative-formatted{ datetime: report_note.created_at }
-      - if report_note.created_at.today?
+      = t('admin.report_notes.created_at')
-        = t('admin.report_notes.today_at', time: l(report_note.created_at, format: :time))
-      - else
-        = l report_note.created_at.to_date
 
   .report-notes__item__content
     = simple_format(h(report_note.content))

app/views/admin/reports/show.html.haml

@@ -144,11 +144,8 @@
             = link_to @report.account.username, admin_account_path(@report.account_id)
           - else
             = link_to @report.account.domain, admin_instance_path(@report.account.domain)
-        %time{ datetime: @report.created_at.iso8601, title: l(@report.created_at) }
+        %time.relative-formatted{ datetime: @report.created_at.iso8601 }
-          - if @report.created_at.today?
+          = t('admin.report_notes.created_at')
-            = t('admin.report_notes.today_at', time: l(@report.created_at, format: :time))
-          - else
-            = l @report.created_at.to_date
 
       .report-notes__item__content
         = simple_format(h(@report.comment))

app/views/disputes/strikes/show.html.haml

@@ -110,11 +110,8 @@
       .report-notes__item__header
         %span.username
           = link_to @appeal.account.username, can?(:show, @appeal.account) ? admin_account_path(@appeal.account_id) : short_account_url(@appeal.account)
-        %time{ datetime: @appeal.created_at.iso8601, title: l(@appeal.created_at) }
+        %time.relative-formatted{ datetime: @appeal.created_at.iso8601 }
-          - if @appeal.created_at.today?
+          = t('admin.report_notes.created_at')
-            = t('admin.report_notes.today_at', time: l(@appeal.created_at, format: :time))
-          - else
-            = l @appeal.created_at.to_date
 
       .report-notes__item__content
         = simple_format(h(@appeal.text))

app/views/settings/featured_tags/index.html.haml

@@ -26,6 +26,6 @@
           - if featured_tag.last_status_at.nil?
             = t('accounts.nothing_here')
           - else
-            %time{ datetime: featured_tag.last_status_at.iso8601, title: l(featured_tag.last_status_at) }= l featured_tag.last_status_at
+            %time.formatted{ datetime: featured_tag.last_status_at.iso8601, title: l(featured_tag.last_status_at) }= l featured_tag.last_status_at
           = table_link_to 'trash', t('filters.index.delete'), settings_featured_tag_path(featured_tag), method: :delete, data: { confirm: t('admin.accounts.are_you_sure') }
       .trends__item__current= friendly_number_to_human featured_tag.statuses_count

config/locales/en.yml

@@ -563,7 +563,6 @@ en:
     report_notes:
       created_msg: Report note successfully created!
       destroyed_msg: Report note successfully deleted!
-      today_at: Today at %{time}
     reports:
       account:
         notes: