refactor: unify DateTime

Author: 9romise

app/components/BuildEnvironment.vue

@@ -3,7 +3,6 @@ defineProps<{
   footer?: boolean
 }>()
 
-const { locale } = useI18n()
 const buildInfo = useAppConfig().buildInfo
 </script>
 
@@ -14,7 +13,7 @@ const buildInfo = useAppConfig().buildInfo
     style="animation-delay: 0.05s"
   >
     <i18n-t keypath="built_at" scope="global">
-      <NuxtTime :datetime="buildInfo.time" :locale="locale" relative />
+      <DateTime :datetime="buildInfo.time" />
     </i18n-t>
     <span>&middot;</span>
     <NuxtLink

app/components/DateTime.vue

@@ -9,8 +9,8 @@
  */
 const props = withDefaults(
   defineProps<{
-    /** The datetime value (ISO string or Date) */
-    datetime: string | Date
+    /** The datetime value (ISO string or Date or timestamp) */
+    datetime: string | Date | number
     /** Override title (defaults to datetime) */
     title?: string
     /** Date style for absolute display */
@@ -32,7 +32,6 @@ const props = withDefaults(
 const { locale } = useI18n()
 
 const { settings } = useSettings()
-const relativeDates = useRelativeDates()
 
 const dateFormatter = new Intl.DateTimeFormat(locale.value, {
   month: 'short',
@@ -49,21 +48,34 @@ const titleValue = computed(() => {
   const date = typeof props.datetime === 'string' ? new Date(props.datetime) : props.datetime
   return dateFormatter.format(date)
 })
+
+function toggleRelativeDates() {
+  settings.value.relativeDates = !settings.value.relativeDates
+}
 </script>
 
 <template>
-  <button @click="settings.relativeDates = !settings.relativeDates">
-    <span>
-      <ClientOnly>
-        <NuxtTime
-          v-if="relativeDates"
-          :datetime="datetime"
-          :title="titleValue"
-          relative
-          :locale="locale"
-        />
+  <button @click="toggleRelativeDates">
+    <ClientOnly>
+      <NuxtTime
+        v-if="settings.relativeDates"
+        :datetime="datetime"
+        :title="titleValue"
+        relative
+        :locale="locale"
+      />
+      <NuxtTime
+        v-else
+        :datetime="datetime"
+        :title="titleValue"
+        :date-style="dateStyle"
+        :year="year"
+        :month="month"
+        :day="day"
+        :locale="locale"
+      />
+      <template #fallback>
         <NuxtTime
-          v-else
           :datetime="datetime"
           :title="titleValue"
           :date-style="dateStyle"
@@ -72,18 +84,7 @@ const titleValue = computed(() => {
           :day="day"
           :locale="locale"
         />
-        <template #fallback>
-          <NuxtTime
-            :datetime="datetime"
-            :title="titleValue"
-            :date-style="dateStyle"
-            :year="year"
-            :month="month"
-            :day="day"
-            :locale="locale"
-          />
-        </template>
-      </ClientOnly>
-    </span>
+      </template>
+    </ClientOnly>
   </button>
 </template>

app/composables/useSettings.ts

@@ -62,15 +62,6 @@ export function useSettings() {
   }
 }
 
-/**
- * Composable for accessing just the relative dates setting.
- * Useful for components that only need to read this specific setting.
- */
-export function useRelativeDates() {
-  const { settings } = useSettings()
-  return computed(() => settings.value.relativeDates)
-}
-
 /**
  * Composable for managing accent color.
  */