fix: Account for reading time longer than an hour (#10601)

app/components/ReadingTime.tsx

@@ -13,12 +13,28 @@ const ReadingTime = ({ document }: { document: Document }) => {
   );
   const stats = useTextStats(markdown);
 
+  const readingTimeMinutes = stats.total.readingTime;
+  const hours = Math.floor(readingTimeMinutes / 60);
+  const minutes = readingTimeMinutes % 60;
+
+  let readingTimeText;
+  if (hours > 0) {
+    if (minutes > 0) {
+      readingTimeText = t(`{{ hours }}h {{ minutes }}m read`, {
+        hours,
+        minutes,
+      });
+    } else {
+      readingTimeText = t(`{{ hours }}h read`, { hours });
+    }
+  } else {
+    readingTimeText = t(`{{ minutes }}m read`, { minutes: readingTimeMinutes });
+  }
+
   return (
     <>
       <EyeIcon size={18} />
-      {t(`{{ minutes }}m read`, {
-        minutes: stats.total.readingTime,
-      })}
+      {readingTimeText}
     </>
   );
 };

shared/i18n/locales/en_US/translation.json

@@ -354,6 +354,8 @@
   "Reaction picker": "Reaction picker",
   "Could not load reactions": "Could not load reactions",
   "Reaction": "Reaction",
+  "{{ hours }}h {{ minutes }}m read": "{{ hours }}h {{ minutes }}m read",
+  "{{ hours }}h read": "{{ hours }}h read",
   "{{ minutes }}m read": "{{ minutes }}m read",
   "Revision deleted": "Revision deleted",
   "Current version": "Current version",