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

packages/ui/src/components/project/NewProjectCard.vue

@@ -50,7 +50,7 @@
           <HistoryIcon class="shrink-0" />
           <span>
             <span class="text-secondary">Updated</span>
-            {{ dayjs(project.date_modified ?? project.updated).fromNow() }}
+            {{ formatRelativeTime(project.date_modified ?? project.updated) }}
           </span>
         </div>
         <div
@@ -67,10 +67,9 @@
 import { TagsIcon, DownloadIcon, HeartIcon, HistoryIcon } from '@modrinth/assets'
 import Avatar from '../base/Avatar.vue'
 import { formatNumber, formatCategory } from '@modrinth/utils'
-import dayjs from 'dayjs'
-import relativeTime from 'dayjs/plugin/relativeTime'
+import { useRelativeTime } from '../../composables'
 
-dayjs.extend(relativeTime)
+const formatRelativeTime = useRelativeTime()
 
 defineProps({
   project: {

packages/ui/src/components/project/ProjectPageVersions.vue

@@ -132,7 +132,7 @@
                 class="z-[1] flex cursor-help items-center gap-1 text-nowrap font-medium xl:self-center"
               >
                 <CalendarIcon class="xl:hidden" />
-                {{ dayjs(version.date_published).fromNow() }}
+                {{ formatRelativeTime(version.date_published) }}
               </div>
               <div
                 class="pointer-events-none z-[1] flex items-center gap-1 font-medium xl:self-center"
@@ -185,11 +185,12 @@ import { Pagination, VersionChannelIndicator, VersionFilterControl } from '../in
 import { useVIntl } from '@vintl/vintl'
 import { type Ref, ref, computed } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
-import dayjs from 'dayjs'
 import AutoLink from '../base/AutoLink.vue'
 import TagItem from '../base/TagItem.vue'
+import { useRelativeTime } from '../../composables'
 
 const { formatMessage } = useVIntl()
+const formatRelativeTime = useRelativeTime()
 
 type VersionWithDisplayUrlEnding = Version & {
   displayUrlEnding: string

packages/ui/src/components/project/ProjectSidebarDetails.vue

@@ -68,8 +68,10 @@ import { BookTextIcon, CalendarIcon, ScaleIcon, VersionIcon, ExternalIcon } from
 import { useVIntl, defineMessages } from '@vintl/vintl'
 import { computed } from 'vue'
 import dayjs from 'dayjs'
+import { useRelativeTime } from '../../composables'
 
 const { formatMessage } = useVIntl()
+const formatRelativeTime = useRelativeTime()
 
 const props = defineProps<{
   project: {
@@ -89,16 +91,16 @@ const props = defineProps<{
 }>()
 
 const createdDate = computed(() =>
-  props.project.published ? dayjs(props.project.published).fromNow() : 'unknown',
+  props.project.published ? formatRelativeTime(props.project.published) : 'unknown',
 )
 const submittedDate = computed(() =>
-  props.project.queued ? dayjs(props.project.queued).fromNow() : 'unknown',
+  props.project.queued ? formatRelativeTime(props.project.queued) : 'unknown',
 )
 const publishedDate = computed(() =>
-  props.project.approved ? dayjs(props.project.approved).fromNow() : 'unknown',
+  props.project.approved ? formatRelativeTime(props.project.approved) : 'unknown',
 )
 const updatedDate = computed(() =>
-  props.project.updated ? dayjs(props.project.updated).fromNow() : 'unknown',
+  props.project.updated ? formatRelativeTime(props.project.updated) : 'unknown',
 )
 
 const licenseIdDisplay = computed(() => {