chore: use composable

Author: 9romise

app/components/DateTime.vue

@@ -31,7 +31,7 @@ const props = withDefaults(
 
 const { locale } = useI18n()
 
-const { settings } = useSettings()
+const { relativeDates, toggleRelativeDates } = useRelativeDates()
 
 const dateFormatter = new Intl.DateTimeFormat(locale.value, {
   month: 'short',
@@ -48,17 +48,13 @@ 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 type="button" @click="toggleRelativeDates">
     <ClientOnly>
       <NuxtTime
-        v-if="settings.relativeDates"
+        v-if="relativeDates"
         :datetime="datetime"
         :title="titleValue"
         relative

app/composables/useSettings.ts

@@ -62,6 +62,23 @@ 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()
+
+  function toggleRelativeDates() {
+    settings.value.relativeDates = !settings.value.relativeDates
+  }
+
+  return {
+    relativeDates: computed(() => settings.value.relativeDates),
+    toggleRelativeDates,
+  }
+}
+
 /**
  * Composable for managing accent color.
  */

test/nuxt/components/DateTime.spec.ts

@@ -5,6 +5,9 @@ import DateTime from '~/components/DateTime.vue'
 // Mock the useRelativeDates composable
 const mockRelativeDates = shallowRef(false)
 vi.mock('~/composables/useSettings', () => ({
+  useRelativeDates: () => ({
+    relativeDates: mockRelativeDates,
+  }),
   useSettings: () => ({
     settings: ref({ relativeDates: mockRelativeDates.value }),
   }),