Relative times on suggestions page

app/db/models/plusSuggestions.server.ts

@@ -1,3 +1,4 @@
+import { formatDistance } from "date-fns";
 import type { MonthYear } from "~/modules/plus-server";
 import { atOrError } from "~/utils/arrays";
 import { databaseTimestampToDate } from "~/utils/dates";
@@ -72,7 +73,7 @@ export interface FindVisibleForUserSuggestedUserInfo {
     | "bio"
   >;
   suggestions: (Pick<PlusSuggestion, "id" | "text" | "createdAt"> & {
-    createdAtText: string;
+    createdAtRelative: string;
     author: Pick<
       User,
       "id" | "discordId" | "discordName" | "discordDiscriminator"
@@ -104,14 +105,10 @@ function mapFindVisibleForUserRowsToResult(
     const suggestionInfo = {
       id: row.id,
       createdAt: row.createdAt,
-      createdAtText: databaseTimestampToDate(row.createdAt).toLocaleString(
-        "en-US",
-        {
-          day: "numeric",
-          month: "short",
-          hour: "numeric",
-          minute: "numeric",
-        }
+      createdAtRelative: formatDistance(
+        databaseTimestampToDate(row.createdAt),
+        new Date(),
+        { addSuffix: true }
       ),
       text: row.text,
       author: {

app/routes/plus/suggestions.tsx

@@ -30,6 +30,8 @@ import { makeTitle, parseRequestFormData, validate } from "~/utils/remix";
 import { discordFullName } from "~/utils/strings";
 import { actualNumber } from "~/utils/zod";
 import { userPage } from "~/utils/urls";
+import { RelativeTime } from "~/components/RelativeTime";
+import { databaseTimestampToDate } from "~/utils/dates";
 
 export const links: LinksFunction = () => {
   return [{ rel: "stylesheet", href: styles }];
@@ -304,7 +306,13 @@ function SuggestedUser({
                 {suggestion.text}
                 <div className="stack vertical xs items-center">
                   <span className="plus__comment-time">
-                    <time>{suggestion.createdAtText}</time>
+                    <RelativeTime
+                      timestamp={databaseTimestampToDate(
+                        suggestion.createdAt
+                      ).getTime()}
+                    >
+                      {suggestion.createdAtRelative}
+                    </RelativeTime>
                   </span>
                   {canDeleteComment({
                     author: suggestion.author,