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/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[]>([]);