From fef033b282853d6117755fa45d6825e081db6fe6 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 13 Mar 2024 13:30:58 +0800
Subject: [PATCH] Show relative time if replying to old post

Ref: https://blog.joinmastodon.org/2023/11/improving-the-quality-of-conversations-on-mastodon/
---
 src/components/compose.css |  4 ++++
 src/components/compose.jsx | 22 ++++++++++++++++++++++
 2 files changed, 26 insertions(+)

diff --git a/src/components/compose.css b/src/components/compose.css
index 5e8d3bcf..5cb0e9ac 100644
--- a/src/components/compose.css
+++ b/src/components/compose.css
@@ -95,6 +95,10 @@
     0 1px 10px var(--bg-color), 0 1px 10px var(--bg-color),
     0 1px 10px var(--bg-color);
   z-index: 2;
+
+  strong {
+    color: var(--red-color);
+  }
 }
 #_compose-container .status-preview-legend.reply-to {
   color: var(--reply-to-color);
diff --git a/src/components/compose.jsx b/src/components/compose.jsx
index 84034257..3ab1d488 100644
--- a/src/components/compose.jsx
+++ b/src/components/compose.jsx
@@ -174,6 +174,8 @@ function highlightText(text, { maxCharacters = Infinity }) {
     ); // Emoji shortcodes
 }
 
+const rtf = new Intl.RelativeTimeFormat();
+
 function Compose({
   onClose,
   replyToStatus,
@@ -637,6 +639,16 @@ function Compose({
     return [topLanguages, restLanguages];
   }, [language]);
 
+  const replyToStatusMonthsAgo = useMemo(
+    () =>
+      !!replyToStatus?.createdAt &&
+      Math.floor(
+        (Date.now() - new Date(replyToStatus.createdAt)) /
+          (1000 * 60 * 60 * 24 * 30),
+      ),
+    [replyToStatus],
+  );
+
   return (
     <div id="compose-container-outer">
       <div id="compose-container" class={standalone ? 'standalone' : ''}>
@@ -786,6 +798,16 @@ function Compose({
               Replying to @
               {replyToStatus.account.acct || replyToStatus.account.username}
               &rsquo;s post
+              {replyToStatusMonthsAgo >= 3 && (
+                <>
+                  {' '}
+                  (
+                  <strong>
+                    {rtf.format(-replyToStatusMonthsAgo, 'month')}
+                  </strong>
+                  )
+                </>
+              )}
             </div>
           </div>
         )}