fix: standardize relative timestamping (#3612)

* fix(frontend): relative timestamps are incorrectly rounded.

Closes: #1371

* fix(all): remove legacy fromNow for proper relative timestamp creation

Closes: #1395

apps/frontend/src/pages/[type]/[id].vue

@@ -871,6 +871,7 @@ import {
   ProjectSidebarDetails,
   ProjectSidebarLinks,
   ScrollablePanel,
+  useRelativeTime,
 } from "@modrinth/ui";
 import VersionSummary from "@modrinth/ui/src/components/version/VersionSummary.vue";
 import { formatCategory, isRejected, isStaff, isUnderReview, renderString } from "@modrinth/utils";

apps/frontend/src/pages/admin/billing/[id].vue

@@ -92,7 +92,7 @@
             <div class="mb-4 mt-2 flex w-full items-center gap-1 text-sm text-secondary">
               {{ formatCategory(subscription.interval) }} ⋅ {{ subscription.status }} ⋅
               {{ dayjs(subscription.created).format("MMMM D, YYYY [at] h:mma") }} ({{
-                dayjs(subscription.created).fromNow()
+                formatRelativeTime(subscription.created)
               }})
             </div>
           </div>
@@ -151,7 +151,7 @@
                 </span>
                 <span class="text-sm text-secondary">
                   {{ dayjs(charge.due).format("MMMM D, YYYY [at] h:mma") }}
-                  <span class="text-secondary">({{ dayjs(charge.due).fromNow() }}) </span>
+                  <span class="text-secondary">({{ formatRelativeTime(charge.due) }}) </span>
                 </span>
                 <div
                   v-if="flags.developerMode"
@@ -196,7 +196,15 @@
   </div>
 </template>
 <script setup>
-import { Avatar, ButtonStyled, CopyCode, DropdownSelect, NewModal, Toggle } from "@modrinth/ui";
+import {
+  Avatar,
+  ButtonStyled,
+  CopyCode,
+  DropdownSelect,
+  NewModal,
+  Toggle,
+  useRelativeTime,
+} from "@modrinth/ui";
 import { formatCategory, formatPrice } from "@modrinth/utils";
 import {
   CheckIcon,
@@ -215,7 +223,9 @@ const flags = useFeatureFlags();
 const route = useRoute();
 const data = useNuxtApp();
 const vintl = useVIntl();
+
 const { formatMessage } = vintl;
+const formatRelativeTime = useRelativeTime();
 
 const messages = defineMessages({
   userNotFoundError: {

apps/frontend/src/pages/admin/servers/notices.vue

@@ -156,7 +156,7 @@
             <div class="text-sm">
               <span v-if="notice.announce_at">
                 {{ dayjs(notice.announce_at).format("MMM D, YYYY [at] h:mm A") }} ({{
-                  dayjs(notice.announce_at).fromNow()
+                  formatRelativeTime(notice.announce_at)
                 }})
               </span>
               <template v-else> Never begins </template>
@@ -166,7 +166,7 @@
                 v-if="notice.expires"
                 v-tooltip="dayjs(notice.expires).format('MMMM D, YYYY [at] h:mm A')"
               >
-                {{ dayjs(notice.expires).fromNow() }}
+                {{ formatRelativeTime(notice.expires) }}
               </span>
               <template v-else> Never expires </template>
             </div>
@@ -267,6 +267,7 @@ import {
   NewModal,
   TeleportDropdownMenu,
   Toggle,
+  useRelativeTime,
 } from "@modrinth/ui";
 import { SettingsIcon, PlusIcon, SaveIcon, TrashIcon, EditIcon, XIcon } from "@modrinth/assets";
 import dayjs from "dayjs";
@@ -278,6 +279,8 @@ import { usePyroFetch } from "~/composables/pyroFetch.ts";
 import AssignNoticeModal from "~/components/ui/servers/notice/AssignNoticeModal.vue";
 
 const { formatMessage } = useVIntl();
+const formatRelativeTime = useRelativeTime();
+
 const app = useNuxtApp() as unknown as { $notify: any };
 
 const notices = ref<ServerNoticeType[]>([]);

apps/frontend/src/pages/collection/[id].vue

@@ -391,6 +391,7 @@ import {
   DropdownSelect,
   FileInput,
   PopoutMenu,
+  useRelativeTime,
 } from "@modrinth/ui";
 
 import { isAdmin } from "@modrinth/utils";

apps/frontend/src/pages/frog.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { useRelativeTime } from "@modrinth/ui";
+
 const vintl = useVIntl();
 const { formatMessage } = vintl;
 

apps/frontend/src/pages/index.vue

@@ -185,7 +185,7 @@
                       <CalendarIcon aria-hidden="true" />
                       <span>
                         Received
-                        {{ fromNow(notification.date_modified) }}
+                        {{ formatRelativeTime(notification.date_modified) }}
                       </span>
                     </div>
                   </div>
@@ -527,7 +527,7 @@
 </template>
 <script setup>
 import { Multiselect } from "vue-multiselect";
-import { ButtonStyled } from "@modrinth/ui";
+import { ButtonStyled, useRelativeTime } from "@modrinth/ui";
 import {
   CompassIcon,
   LogInIcon,
@@ -544,6 +544,8 @@ import ProjectCard from "~/components/ui/ProjectCard.vue";
 
 import { homePageProjects, homePageSearch, homePageNotifs } from "~/generated/state.json";
 
+const formatRelativeTime = useRelativeTime();
+
 const searchQuery = ref("leave");
 const sortType = ref("relevance");
 

apps/frontend/src/pages/moderation/review.vue

@@ -94,7 +94,7 @@
         <IssuesIcon v-if="project.age_warning" />
         Submitted
         <span v-tooltip="$dayjs(project.queued).format('MMMM D, YYYY [at] h:mm A')">{{
-          fromNow(project.queued)
+          formatRelativeTime(project.queued)
         }}</span>
       </span>
       <span v-else class="submitter-info"><UnknownIcon /> Unknown queue date</span>
@@ -103,7 +103,7 @@
 </template>
 
 <script setup>
-import { Chips } from "@modrinth/ui";
+import { Chips, useRelativeTime } from "@modrinth/ui";
 import {
   UnknownIcon,
   EyeIcon,
@@ -128,6 +128,8 @@ const now = app.$dayjs();
 const TIME_24H = 86400000;
 const TIME_48H = TIME_24H * 2;
 
+const formatRelativeTime = useRelativeTime();
+
 const { data: projects } = await useAsyncData("moderation/projects?count=1000", () =>
   useBaseFetch("moderation/projects?count=1000", { internal: true }),
 );

apps/frontend/src/pages/settings/pats.vue

@@ -203,7 +203,13 @@
 </template>
 <script setup>
 import { PlusIcon, XIcon, TrashIcon, EditIcon, SaveIcon } from "@modrinth/assets";
-import { Checkbox, ConfirmModal, commonSettingsMessages, commonMessages } from "@modrinth/ui";
+import {
+  Checkbox,
+  ConfirmModal,
+  commonSettingsMessages,
+  commonMessages,
+  useRelativeTime,
+} from "@modrinth/ui";
 
 import {
   hasScope,

apps/frontend/src/pages/settings/sessions.vue

@@ -57,7 +57,7 @@
 </template>
 <script setup>
 import { XIcon } from "@modrinth/assets";
-import { commonMessages, commonSettingsMessages } from "@modrinth/ui";
+import { commonMessages, commonSettingsMessages, useRelativeTime } from "@modrinth/ui";
 
 definePageMeta({
   middleware: "auth",

apps/frontend/src/pages/user/[id].vue

@@ -360,6 +360,7 @@ import {
   ContentPageHeader,
   commonMessages,
   NewModal,
+  useRelativeTime,
 } from "@modrinth/ui";
 import { isStaff } from "~/helpers/users.js";
 import NavTabs from "~/components/ui/NavTabs.vue";