Friendly hovertext for TimeAgo

frontend/package.json

@@ -46,6 +46,7 @@
         "react": "^18.2.0",
         "react-colorful": "^5.6.1",
         "react-contenteditable": "^3.3.7",
+        "react-date-object": "^2.1.9",
         "react-dom": "^18.2.0",
         "react-laag": "^2.0.5",
         "react-timeago": "^7.2.0",

frontend/src/components/Scratch/ScratchToolbar.tsx

@@ -5,8 +5,8 @@ import Link from "next/link"
 import { DownloadIcon, FileIcon, IterationsIcon, RepoForkedIcon, SyncIcon, TrashIcon, UploadIcon } from "@primer/octicons-react"
 import classNames from "classnames"
 import ContentEditable from "react-contenteditable"
-import TimeAgo from "react-timeago"
 
+import TimeAgo from "@/components/TimeAgo"
 import * as api from "@/lib/api"
 import { scratchUrl } from "@/lib/api/urls"
 import { useSize } from "@/lib/hooks"

frontend/src/components/Scratch/panels/AboutPanel.tsx

@@ -1,12 +1,12 @@
 import Link from "next/link"
 
-import TimeAgo from "react-timeago"
 import useSWR from "swr"
 
 import LoadingSpinner from "@/components/loading.svg"
 import { PlatformIcon } from "@/components/PlatformSelect/PlatformIcon"
 import PlatformName from "@/components/PlatformSelect/PlatformName"
 import { getScoreText } from "@/components/ScoreBadge"
+import TimeAgo from "@/components/TimeAgo"
 import UserLink from "@/components/user/UserLink"
 import { Scratch, Preset, get, usePreset } from "@/lib/api"
 import { presetUrl, scratchUrl, scratchParentUrl } from "@/lib/api/urls"

frontend/src/components/ScratchList.tsx

@@ -5,8 +5,8 @@ import { ReactNode, useState } from "react"
 import Link from "next/link"
 
 import classNames from "classnames"
-import TimeAgo from "react-timeago"
 
+import TimeAgo from "@/components/TimeAgo"
 import * as api from "@/lib/api"
 import { presetUrl, scratchUrl } from "@/lib/api/urls"
 import useTranslation from "@/lib/i18n/translate"

frontend/src/components/TimeAgo.tsx

@@ -0,0 +1,21 @@
+import DateObject from "react-date-object"
+import ReactTimeAgo from "react-timeago"
+
+function formatDateString(x: string, format="YYYY-MM-DD HH:mm:ss") {
+    const date = Date.parse(x)
+    const dateObject = new DateObject(date)
+    return dateObject.format(format)
+}
+
+export default function TimeAgo({
+    date,
+}: {
+    date: string
+}) {
+    const title = formatDateString(date)
+
+    return <ReactTimeAgo
+        date={date}
+        title={title}
+    />
+}

frontend/yarn.lock

@@ -5496,6 +5496,11 @@ react-contenteditable@^3.3.7:
     fast-deep-equal "^3.1.3"
     prop-types "^15.7.1"
 
+react-date-object@^2.1.9:
+  version "2.1.9"
+  resolved "https://registry.yarnpkg.com/react-date-object/-/react-date-object-2.1.9.tgz#9eb0f70b2b424e32bb437226fc5e435d1fd6a4f1"
+  integrity sha512-BHxD/quWOTo9fLKV/cfL/M31ePoj4a1JaJ/CnOf8Ndg3mrkh4x9wEMMkCfTrzduxDOgU8ZgR8uarhqI5G71sTg==
+
 react-dom@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"