devex: migrate to vue-i18n (#4966)

* sample languages refactor

* feat: consistency + dedupe impl of i18n

* fix: broken imports

* fix: intl formatted component

* fix: use relative imports

* fix: imports

* fix: comment out incomplete locales + fix imports

* feat: cleanup

* fix: ui imports

* fix: lint

* fix: admonition import

* make footer a component, fix language reactivity

* make copyright notice untranslatable

---------

Co-authored-by: Calum H. <contact@cal.engineer>

packages/ui/src/composables/how-ago.ts

@@ -1,23 +1,58 @@
-import { createFormatter, type FormatOptions, type Formatter } from '@vintl/how-ago'
-import { useVIntl } from '@vintl/vintl'
-import type { IntlController } from '@vintl/vintl/controller'
-import { computed } from 'vue'
+import { computed, type ComputedRef } from 'vue'
+import { useI18n } from 'vue-i18n'
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
-const formatters = new WeakMap<IntlController<any>, Formatter>()
+export type Formatter = (value: Date | number, options?: FormatOptions) => string
+
+export interface FormatOptions {
+	roundingMode?: 'halfExpand' | 'floor' | 'ceil'
+}
+
+const formatters = new Map<string, ComputedRef<Intl.RelativeTimeFormat>>()
 
 export function useRelativeTime(): Formatter {
-	const vintl = useVIntl()
+	const { locale } = useI18n()
 
-	let formatter = formatters.get(vintl)
+	const formatterRef = computed(
+		() =>
+			new Intl.RelativeTimeFormat(locale.value, {
+				numeric: 'auto',
+				style: 'long',
+			}),
+	)
 
-	if (formatter == null) {
-		const formatterRef = computed(() => createFormatter(vintl.intl))
-		const defaultOptions: FormatOptions = { roundingMode: 'halfExpand' as const }
-
-		formatter = (value, options) => formatterRef.value(value, { ...options, ...defaultOptions })
-		formatters.set(vintl, formatter)
+	if (!formatters.has(locale.value)) {
+		formatters.set(locale.value, formatterRef)
 	}
 
-	return formatter
+	return (value: Date | number) => {
+		const date = value instanceof Date ? value : new Date(value)
+		const now = Date.now()
+		const diff = date.getTime() - now
+
+		const seconds = Math.round(diff / 1000)
+		const minutes = Math.round(diff / 60000)
+		const hours = Math.round(diff / 3600000)
+		const days = Math.round(diff / 86400000)
+		const weeks = Math.round(diff / 604800000)
+		const months = Math.round(diff / 2629746000)
+		const years = Math.round(diff / 31556952000)
+
+		const rtf = formatterRef.value
+
+		if (Math.abs(seconds) < 60) {
+			return rtf.format(seconds, 'second')
+		} else if (Math.abs(minutes) < 60) {
+			return rtf.format(minutes, 'minute')
+		} else if (Math.abs(hours) < 24) {
+			return rtf.format(hours, 'hour')
+		} else if (Math.abs(days) < 7) {
+			return rtf.format(days, 'day')
+		} else if (Math.abs(weeks) < 4) {
+			return rtf.format(weeks, 'week')
+		} else if (Math.abs(months) < 12) {
+			return rtf.format(months, 'month')
+		} else {
+			return rtf.format(years, 'year')
+		}
+	}
 }