@datagouv/components-next 1.0.2-dev.192 → 1.0.2-dev.193

package/dist/{vue3-xml-viewer.common-__BZsi8i.js → vue3-xml-viewer.common-AEbzQxXP.js}

@@ -1,4 +1,4 @@
-import { g as Ke } from "./main-C2kCZkPD.js";
+import { g as Ke } from "./main-B3IzELg_.js";
 import We from "vue";
 function Fe($, K) {
   for (var V = 0; V < K.length; V++) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datagouv/components-next",
-  "version": "1.0.2-dev.192",
+  "version": "1.0.2-dev.193",
   "private": false,
   "type": "module",
   "engines": {

package/src/components/ActivityList/ActivityList.vue

@@ -12,7 +12,10 @@
           class="my-1"
         >
           <p class="pl-3 mb-1 text-xs text-gray-medium">
-            {{ month }}
+            <FormattedDate
+              :date="month"
+              :options="{ dateStyle: undefined, year: 'numeric', month: 'long', day: undefined }"
+            />
           </p>
           <ul
             class="space-y-2 p-0 m-0"
@@ -82,9 +85,15 @@
                     </template>
                   </slot>
                 </p>
-                <p class="m-0 flex-none text-xs text-gray-medium">
-                  {{ t('le {date}', { date: formatDate(activity.created_at) }) }}
-                </p>
+                <TranslationT
+                  tag="p"
+                  class="m-0 flex-none text-xs text-gray-medium"
+                  keypath="le {date}"
+                >
+                  <template #date>
+                    <FormattedDate :date="activity.created_at" />
+                  </template>
+                </TranslationT>
               </div>
             </li>
           </ul>
@@ -118,13 +127,14 @@ import { useRoute } from 'vue-router'
 import { useTranslation } from '../../composables/useTranslation'
 import { getActivityTranslation } from '../../functions/activities'
 import { useFetch } from '../../functions/api'
-import { useFormatDate } from '../../functions/dates'
 import type { PaginatedArray } from '../../types/api'
 import type { Activity } from '../../types/activity'
 import Avatar from '../Avatar.vue'
 import LoadingBlock from '../LoadingBlock.vue'
 import Pagination from '../Pagination.vue'
 import PaddedContainer from '../PaddedContainer.vue'
+import FormattedDate from '../FormattedDate.vue'
+import TranslationT from '../TranslationT.vue'
 import listSrc from '../../../assets/illustrations/list.svg?url'
 
 const props = defineProps<{
@@ -133,7 +143,6 @@ const props = defineProps<{
 }>()
 
 const route = useRoute()
-const { formatDate } = useFormatDate()
 const { t } = useTranslation()
 
 const page = ref(parseInt(route.query.page as string | undefined ?? '1', 10))
@@ -146,13 +155,13 @@ const { data: activities, status } = await useFetch<PaginatedArray<Activity>>('/
   },
 })
 
+// Grouping on a month read in the reader's timezone would change both the number of
+// groups and their keys between the server render and the browser's — a mismatch on
+// the children themselves, which no `data-allow-mismatch` covers. The `YYYY-MM` the
+// timestamp starts with is the same string for everyone; the month is worded from it
+// at render time.
 const groupedActivities = computed(() => activities.value?.data.reduce((grouped, activity) => {
-  const activityMonth = formatDate(activity.created_at, {
-    dateStyle: undefined,
-    day: undefined,
-    month: 'long',
-    year: 'numeric',
-  })
+  const activityMonth = activity.created_at.slice(0, 7)
   if (!grouped[activityMonth]) {
     grouped[activityMonth] = []
   }

package/src/components/DataserviceCard.vue

@@ -71,9 +71,19 @@
         class="size-4 flex-none fill-gray-medium"
       />
       <!-- https://github.com/datagouv/cdata/issues/653 -->
-      <p class="text-sm whitespace-nowrap mb-0 text-gray-medium">
-        {{ t('Mis à jour {date}', { date: formatRelativeIfRecentDate(dataservice.metadata_modified_at, { dateStyle: 'medium' }) }) }}
-      </p>
+      <TranslationT
+        tag="p"
+        class="text-sm whitespace-nowrap mb-0 text-gray-medium"
+        keypath="Mis à jour {date}"
+      >
+        <template #date>
+          <FormattedDate
+            :date="dataservice.metadata_modified_at"
+            format="relative"
+            :options="{ dateStyle: 'medium' }"
+          />
+        </template>
+      </TranslationT>
       <RiSubtractLine
         aria-hidden="true"
         class="size-4 flex-none fill-gray-medium"
@@ -118,7 +128,6 @@ import { computed } from 'vue'
 import type { RouteLocationRaw } from 'vue-router'
 import { RiArchiveLine, RiEyeLine, RiLockLine, RiPassValidLine, RiSparklingLine, RiStarLine, RiSubtractLine, RiTerminalLine } from '@remixicon/vue'
 import { useComponentsConfig } from '../config'
-import { useFormatDate } from '../functions/dates'
 import { summarize } from '../functions/helpers'
 import type { Dataservice } from '../types/dataservices'
 import type { TitleTag } from '../types/ui'
@@ -132,6 +141,8 @@ import ObjectCardHeader from './ObjectCardHeader.vue'
 import ObjectCardOwner from './ObjectCardOwner.vue'
 import ObjectCardShortDescription from './ObjectCardShortDescription.vue'
 import DataserviceQualityInline from './DataserviceQualityInline.vue'
+import FormattedDate from './FormattedDate.vue'
+import TranslationT from './TranslationT.vue'
 
 type Props = {
   dataservice: Dataservice
@@ -146,7 +157,6 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const { t } = useTranslation()
-const { formatRelativeIfRecentDate } = useFormatDate()
 
 const config = useComponentsConfig()
 const isTabularApi = computed(() => {

package/src/components/DatasetCard.vue

@@ -56,9 +56,19 @@
         :organization-url="organizationUrl"
       />
       <RiSubtractLine class="hidden md:block size-4 flex-none fill-gray-medium" />
-      <div class="w-full md:w-auto text-gray-medium whitespace-nowrap">
-        {{ t('Mis à jour {date}', { date: formatRelativeIfRecentDate(dataset.last_update, { dateStyle: 'medium' }) }) }}
-      </div>
+      <TranslationT
+        tag="div"
+        class="w-full md:w-auto text-gray-medium whitespace-nowrap"
+        keypath="Mis à jour {date}"
+      >
+        <template #date>
+          <FormattedDate
+            :date="dataset.last_update"
+            format="relative"
+            :options="{ dateStyle: 'medium' }"
+          />
+        </template>
+      </TranslationT>
     </div>
     <div class="mx-0 -mb-1 flex flex-wrap items-center text-sm text-gray-medium">
       <div class="hidden sm:flex text-gray-medium">
@@ -122,7 +132,6 @@ import { RiArchiveLine, RiDatabase2Line, RiDownloadLine, RiEyeLine, RiLineChartL
 import type { Dataset, DatasetV2 } from '../types/datasets'
 import type { TitleTag } from '../types/ui'
 import { summarize } from '../functions/helpers'
-import { useFormatDate } from '../functions/dates'
 import { getDescriptionShort } from '../functions/description'
 import { useTranslation } from '../composables/useTranslation'
 import DatasetQualityInline from './DatasetQualityInline.vue'
@@ -134,6 +143,8 @@ import ObjectCard from './ObjectCard.vue'
 import ObjectCardBadge from './ObjectCardBadge.vue'
 import ObjectCardHeader from './ObjectCardHeader.vue'
 import ObjectCardShortDescription from './ObjectCardShortDescription.vue'
+import FormattedDate from './FormattedDate.vue'
+import TranslationT from './TranslationT.vue'
 
 type Props = {
   dataset: Dataset | DatasetV2
@@ -149,5 +160,4 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const { t } = useTranslation()
-const { formatRelativeIfRecentDate } = useFormatDate()
 </script>

package/src/components/DatasetInformation/DatasetTemporalitySection.vue

@@ -6,7 +6,9 @@
     <DescriptionList>
       <div>
         <DescriptionListTerm>{{ t('Création') }}</DescriptionListTerm>
-        <DescriptionListDetails>{{ formatDate(dataset.created_at) }}</DescriptionListDetails>
+        <DescriptionListDetails>
+          <FormattedDate :date="dataset.created_at" />
+        </DescriptionListDetails>
       </div>
       <div v-if="dataset.frequency">
         <DescriptionListTerm>{{ t('Fréquence') }}</DescriptionListTerm>
@@ -20,7 +22,9 @@
       </div>
       <div>
         <DescriptionListTerm>{{ t('Dernière mise à jour') }}</DescriptionListTerm>
-        <DescriptionListDetails>{{ formatDate(dataset.last_update) }}</DescriptionListDetails>
+        <DescriptionListDetails>
+          <FormattedDate :date="dataset.last_update" />
+        </DescriptionListDetails>
       </div>
       <slot />
     </DescriptionList>
@@ -29,17 +33,16 @@
 
 <script setup lang="ts">
 import { useTranslation } from '../../composables/useTranslation'
-import { useFormatDate } from '../../functions/dates'
 import type { DatasetV2WithFullObject } from '../../types/datasets'
 import DescriptionList from '../DescriptionList.vue'
 import DescriptionListTerm from '../DescriptionListTerm.vue'
 import DescriptionListDetails from '../DescriptionListDetails.vue'
 import DateRangeDetails from '../DateRangeDetails.vue'
+import FormattedDate from '../FormattedDate.vue'
 
 defineProps<{
   dataset: DatasetV2WithFullObject
 }>()
 
 const { t } = useTranslation()
-const { formatDate } = useFormatDate()
 </script>

package/src/components/DiscussionMessageCard.vue

@@ -20,9 +20,18 @@
         aria-hidden="true"
         class="size-4 flex-none fill-gray-medium"
       />
-      <span class="text-gray-medium whitespace-nowrap">
-        {{ t('Posté {date}', { date: formatDate(discussion.created) }) }}
-      </span>
+      <TranslationT
+        class="text-gray-medium whitespace-nowrap"
+        keypath="Posté {date}"
+      >
+        <template #date>
+          <FormattedDate
+            :date="discussion.created"
+            format="relative"
+            :options="{ dateStyle: 'long', timeStyle: 'short' }"
+          />
+        </template>
+      </TranslationT>
     </div>
 
     <ObjectCardShortDescription :text="firstMessageContent" />
@@ -35,13 +44,13 @@
 import { RiChat3Line, RiSubtractLine } from '@remixicon/vue'
 import { computed } from 'vue'
 import type { RouteLocationRaw } from 'vue-router'
-import { useFormatDate } from '../functions/dates'
-import { useTranslation } from '../composables/useTranslation'
 import type { Thread } from '../types/discussions'
 import ObjectCard from './ObjectCard.vue'
 import ObjectCardHeader from './ObjectCardHeader.vue'
 import ObjectCardOwner from './ObjectCardOwner.vue'
 import ObjectCardShortDescription from './ObjectCardShortDescription.vue'
+import FormattedDate from './FormattedDate.vue'
+import TranslationT from './TranslationT.vue'
 
 const props = defineProps<{
   discussion: Thread
@@ -49,15 +58,5 @@ const props = defineProps<{
   organizationUrl?: RouteLocationRaw
 }>()
 
-const { t } = useTranslation()
-const { formatRelativeIfRecentDate } = useFormatDate()
-
 const firstMessageContent = computed(() => props.discussion.discussion?.[0]?.content)
-
-const formatDate = (dateString: string) => {
-  return formatRelativeIfRecentDate(dateString, {
-    dateStyle: 'long',
-    timeStyle: 'short',
-  })
-}
 </script>

package/src/components/FormattedDate.vue

@@ -0,0 +1,81 @@
+<template>
+  <!-- An instant is formatted in the server's timezone at render time and in the
+       reader's at read time, so its text and `title` legitimately differ and Vue is
+       told to accept it. A plain date carries no time, so nothing about it varies —
+       exempting it would hide a real bug instead of a legitimate difference. Vue only
+       honours `data-allow-mismatch` on an element whose children are plain text,
+       never on a text node coming from a slot: hence two static elements instead of a
+       `<component :is>`, which would pass the text through a slot. -->
+  <time
+    v-if="datetime"
+    :datetime
+    :title
+    :data-allow-mismatch="allowMismatch"
+  >{{ formatted }}</time>
+  <!-- No date to format: nothing here depends on the timezone or on "now". -->
+  <span v-else>{{ formatted }}</span>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useFormatDate } from '../functions/dates'
+
+const props = withDefaults(defineProps<{
+  date: Date | string | null | undefined
+  /**
+   * `date`: the full date. `relative`: "3 days ago" while the date is less than a
+   * month old, the full date beyond. `from-now`: always relative, however old.
+   */
+  format?: 'date' | 'relative' | 'from-now'
+  options?: Intl.DateTimeFormatOptions
+}>(), {
+  format: 'date',
+  options: () => ({}),
+})
+
+const { formatDate, formatFromNow, formatRelativeIfRecentDate } = useFormatDate()
+
+// `2026`, `2026-04` and `2026-04-24` carry no time of day. `new Date()` reads them as
+// midnight UTC, an instant they never claimed, and then converts it: a reader west of
+// UTC gets the day before — and with it the month, and sometimes the year.
+const PLAIN_DATE = /^(\d{4})(?:-(\d{2}))?(?:-(\d{2}))?$/
+
+const plainDate = computed(() => typeof props.date === 'string' ? props.date.match(PLAIN_DATE) : null)
+
+const parsed = computed(() => {
+  if (!props.date) return null
+  const plain = plainDate.value
+  const date = plain
+    ? new Date(Number(plain[1]), Number(plain[2] ?? 1) - 1, Number(plain[3] ?? 1))
+    : new Date(props.date)
+  return isNaN(date.getTime()) ? null : date
+})
+
+// Announce the precision the value carries, never more: a month stays a month.
+const datetime = computed(() => {
+  if (!parsed.value) return undefined
+  return plainDate.value ? plainDate.value[0] : parsed.value.toISOString()
+})
+
+// Only what genuinely differs between server and browser is exempted: an instant, and
+// the relative forms, which are measured against "now".
+const allowMismatch = computed(() => !plainDate.value || props.format !== 'date'
+  ? 'text,attribute'
+  : undefined)
+
+const formatted = computed(() => {
+  if (props.format === 'relative') return formatRelativeIfRecentDate(parsed.value, props.options)
+  if (props.format === 'from-now') return formatFromNow(parsed.value)
+  return formatDate(parsed.value, props.options)
+})
+
+// Hovering an instant gives the exact moment, which the displayed form usually omits:
+// the relative forms drop it entirely, and most styles drop the time. A plain date has
+// no moment to reveal — a `title` there would be one we made up, and a form that already
+// spells the moment out needs no tooltip repeating it word for word.
+const title = computed(() => {
+  if (!parsed.value || plainDate.value) return undefined
+  const exact = formatDate(parsed.value, { dateStyle: 'long', timeStyle: 'short' })
+  return exact === formatted.value ? undefined : exact
+})
+</script>

package/src/components/PostCard.vue

@@ -23,12 +23,20 @@
 
     <ObjectCardShortDescription :text="post.headline || post.content" />
 
-    <div
+    <TranslationT
       v-if="post.published || post.created_at"
+      tag="div"
       class="text-sm text-gray-medium mt-1"
+      keypath="Publié {date}"
     >
-      {{ t('Publié {date}', { date: formatDate(post.published || post.created_at) }) }}
-    </div>
+      <template #date>
+        <FormattedDate
+          :date="post.published || post.created_at"
+          format="relative"
+          :options="{ dateStyle: 'long', timeStyle: 'short' }"
+        />
+      </template>
+    </TranslationT>
 
     <slot />
   </ObjectCard>
@@ -37,26 +45,16 @@
 <script setup lang="ts">
 import { RiArticleLine } from '@remixicon/vue'
 import type { RouteLocationRaw } from 'vue-router'
-import { useFormatDate } from '../functions/dates'
-import { useTranslation } from '../composables/useTranslation'
 import type { Post } from '../types/posts'
 import Placeholder from './Placeholder.vue'
 import ObjectCard from './ObjectCard.vue'
 import ObjectCardHeader from './ObjectCardHeader.vue'
 import ObjectCardShortDescription from './ObjectCardShortDescription.vue'
+import FormattedDate from './FormattedDate.vue'
+import TranslationT from './TranslationT.vue'
 
 defineProps<{
   post: Post
   postUrl?: RouteLocationRaw
 }>()
-
-const { t } = useTranslation()
-const { formatRelativeIfRecentDate } = useFormatDate()
-
-const formatDate = (dateString: string) => {
-  return formatRelativeIfRecentDate(dateString, {
-    dateStyle: 'long',
-    timeStyle: 'short',
-  })
-}
 </script>

package/src/components/ResourceAccordion/Downloads.vue

@@ -47,9 +47,21 @@
       />
     </dd>
     <template v-if="generatedFormats.length">
-      <dt class="font-bold fr-text--sm fr-mb-0">
-        {{ t('Formats générés automatiquement par {platform} (dernière mise à jour {date})', { platform: config.name, date: conversionsLastUpdate }) }}
-      </dt>
+      <TranslationT
+        tag="dt"
+        class="font-bold fr-text--sm fr-mb-0"
+        keypath="Formats générés automatiquement par {platform} (dernière mise à jour {date})"
+      >
+        <template #platform>
+          {{ config.name }}
+        </template>
+        <template #date>
+          <FormattedDate
+            :date="conversionsFinishedAt"
+            format="relative"
+          />
+        </template>
+      </TranslationT>
       <dd
         v-for="generatedFormat in generatedFormats"
         :key="generatedFormat.format"
@@ -132,7 +144,8 @@ import { filesize } from '../../functions/helpers'
 import { getResourceFilesize } from '../../functions/resources'
 import { trackEvent } from '../../functions/matomo'
 import { useComponentsConfig } from '../../config'
-import { useFormatDate } from '../../functions/dates'
+import FormattedDate from '../FormattedDate.vue'
+import TranslationT from '../TranslationT.vue'
 import { useTranslation } from '../../composables/useTranslation'
 import { useResourceCapabilities } from '../../composables/useResourceCapabilities'
 import type { Resource } from '../../types/resources'
@@ -145,7 +158,6 @@ const props = defineProps<{
 
 const { t } = useTranslation()
 const config = useComponentsConfig()
-const { formatRelativeIfRecentDate } = useFormatDate()
 
 const { generatedFormats, wfsFormats, defaultWfsProjection } = useResourceCapabilities(
   () => props.resource,
@@ -154,7 +166,7 @@ const { generatedFormats, wfsFormats, defaultWfsProjection } = useResourceCapabi
 
 const resourceFilesize = computed(() => getResourceFilesize(props.resource))
 
-const conversionsLastUpdate = computed(() =>
-  formatRelativeIfRecentDate(props.resource.extras['analysis:parsing:finished_at'] as string | undefined),
+const conversionsFinishedAt = computed(() =>
+  props.resource.extras['analysis:parsing:finished_at'] as string | undefined,
 )
 </script>

package/src/components/ResourceAccordion/Metadata.vue

@@ -4,7 +4,7 @@ import type { Resource } from '../../types/resources'
 import CopyButton from '../CopyButton.vue'
 import DescriptionDetails from '../DescriptionDetails.vue'
 import DescriptionTerm from '../DescriptionTerm.vue'
-import { useFormatDate } from '../../functions/dates'
+import FormattedDate from '../FormattedDate.vue'
 import { filesize } from '../../functions/helpers'
 import ExtraAccordion from '../ExtraAccordion.vue'
 import { getResourceTitleId, getResourceLabel, getResourceFilesize } from '../../functions/resources'
@@ -19,7 +19,6 @@ const resourceTitleId = computed(() => getResourceTitleId(props.resource))
 const resourceFilesize = computed(() => getResourceFilesize(props.resource))
 
 const { t } = useTranslation()
-const { formatDate } = useFormatDate()
 </script>
 
 <template>
@@ -94,11 +93,11 @@ const { formatDate } = useFormatDate()
       >
         <DescriptionTerm>{{ t('Créée le') }}</DescriptionTerm>
         <DescriptionDetails>
-          {{ formatDate(resource.created_at) }}
+          <FormattedDate :date="resource.created_at" />
         </DescriptionDetails>
         <DescriptionTerm>{{ t('Modifiée le') }}</DescriptionTerm>
         <DescriptionDetails>
-          {{ formatDate(resource.last_modified) }}
+          <FormattedDate :date="resource.last_modified" />
         </DescriptionDetails>
       </dl>
       <dl

package/src/components/ResourceAccordion/Preview.vue

@@ -90,7 +90,11 @@
         @change="changePage"
       />
       <div class="fr-px-5v">
-        {{ t("Dernière mise à jour de la prévisualisation : {date}", { date: lastUpdate }) }} —
+        <TranslationT keypath="Dernière mise à jour de la prévisualisation : {date}">
+          <template #date>
+            <FormattedDate :date="parsingFinishedAt" />
+          </template>
+        </TranslationT> —
         {{ t('{count} colonnes', columns.length) }} —
         {{ t('Lignes {count}', rowCount) }}
       </div>
@@ -103,7 +107,8 @@ import { computed, onMounted, ref } from 'vue'
 import { RiArrowDownLine, RiArrowUpLine, RiExternalLinkFill } from '@remixicon/vue'
 import Pagination from '../Pagination.vue'
 import { getData, type SortConfig } from '../../functions/tabularApi'
-import { useFormatDate } from '../../functions/dates'
+import FormattedDate from '../FormattedDate.vue'
+import TranslationT from '../TranslationT.vue'
 import { trackEvent } from '../../functions/matomo'
 import type { Resource } from '../../types/resources'
 import { useComponentsConfig } from '../../config'
@@ -116,7 +121,6 @@ import PreviewLoader from './PreviewLoader.vue'
 const props = defineProps<{ resource: Resource }>()
 
 const { t } = useTranslation()
-const { formatDate } = useFormatDate()
 
 const rows = ref<Array<Record<string, unknown>>>([])
 const columns = ref<Array<string>>([])
@@ -196,7 +200,7 @@ function sortByField(col: string) {
   getTableInfos(currentPage.value, sortConfig.value)
 };
 
-const lastUpdate = computed(() => formatDate(props.resource.extras['analysis:parsing:finished_at'] as string | undefined))
+const parsingFinishedAt = computed(() => props.resource.extras['analysis:parsing:finished_at'] as string | undefined)
 
 onMounted(() => {
   getTableInfos(currentPage.value)

package/src/components/ResourceAccordion/ResourceAccordion.vue

@@ -60,7 +60,17 @@
             aria-hidden="true"
             class="size-3 fill-gray-medium"
           />
-          <span class="text-xs mb-0">{{ t('Mis à jour {date}', { date: formatRelativeIfRecentDate(lastUpdate) }) }}</span>
+          <TranslationT
+            class="text-xs mb-0"
+            keypath="Mis à jour {date}"
+          >
+            <template #date>
+              <FormattedDate
+                :date="lastUpdate"
+                format="relative"
+              />
+            </template>
+          </TranslationT>
           <RiSubtractLine
             aria-hidden="true"
             class="size-3 fill-gray-medium"
@@ -303,7 +313,8 @@ import { ref, computed, defineAsyncComponent } from 'vue'
 import { RiDownloadLine, RiFileCopyLine, RiFileWarningLine, RiSubtractLine } from '@remixicon/vue'
 import OrganizationNameWithCertificate from '../OrganizationNameWithCertificate.vue'
 import { filesize, summarize } from '../../functions/helpers'
-import { useFormatDate } from '../../functions/dates'
+import FormattedDate from '../FormattedDate.vue'
+import TranslationT from '../TranslationT.vue'
 import MarkdownViewer from '../MarkdownViewer.vue'
 import type { CommunityResource, Resource } from '../../types/resources'
 import type { Dataset, DatasetV2 } from '../../types/datasets'
@@ -355,7 +366,6 @@ const ImagePreview = defineAsyncComponent(() => import('./ImagePreview.client.vu
 const DatafairPreview = defineAsyncComponent(() => import('./Datafair.client.vue'))
 
 const { t } = useTranslation()
-const { formatRelativeIfRecentDate } = useFormatDate()
 const checkTabularData = useHasTabularData()
 
 const hasPreview = computed(() => {

package/src/components/ResourceExplorer/ResourceExplorerHeader.vue

@@ -18,9 +18,14 @@
         <span class="min-w-0 truncate font-bold text-gray-title">{{ dataset.title }}</span>
         <template v-if="dataset.last_update">
           <span class="hidden shrink-0 text-gray-medium sm:inline">·</span>
-          <span class="hidden truncate text-gray-medium sm:inline">
-            {{ t('mis à jour le {date}', { date: formatDate(dataset.last_update) }) }}
-          </span>
+          <TranslationT
+            class="hidden truncate text-gray-medium sm:inline"
+            keypath="mis à jour le {date}"
+          >
+            <template #date>
+              <FormattedDate :date="dataset.last_update" />
+            </template>
+          </TranslationT>
         </template>
       </div>
     </div>
@@ -53,9 +58,10 @@ import Avatar from '../Avatar.vue'
 import BrandedButton from '../BrandedButton.vue'
 import OrganizationLogo from '../OrganizationLogo.vue'
 import ResourceMainAction from './ResourceMainAction.vue'
+import FormattedDate from '../FormattedDate.vue'
+import TranslationT from '../TranslationT.vue'
 import { getOwnerName } from '../../functions/owned'
 import { useTranslation } from '../../composables/useTranslation'
-import { useFormatDate } from '../../functions/dates'
 import type { Dataset, DatasetV2 } from '../../types/datasets'
 import type { Resource } from '../../types/resources'
 
@@ -66,7 +72,6 @@ const props = defineProps<{
 }>()
 
 const { t } = useTranslation()
-const { formatDate } = useFormatDate()
 
 // Plain producer name, matching the prototype: dark text, no link, no certificate
 // badge — unlike ObjectCardOwner which renders a styled link.

package/src/components/ResourceExplorer/ResourceViewerHeader.vue

@@ -24,7 +24,14 @@
            carried by the separators' margins. -->
       <div class="min-w-0 truncate [flex-shrink:9999]">
         <span class="mr-1.5">·</span>
-        <span :title="formatDate(resource.last_modified)">{{ t('mis à jour {date}', { date: formatRelativeIfRecentDate(resource.last_modified) }) }}</span>
+        <TranslationT keypath="mis à jour {date}">
+          <template #date>
+            <FormattedDate
+              :date="resource.last_modified"
+              format="relative"
+            />
+          </template>
+        </TranslationT>
         <template v-if="resourceFilesize">
           <span class="mx-1.5">·</span>
           <span>{{ filesize(resourceFilesize) }}</span>
@@ -84,10 +91,11 @@ import ResourceIcon from '../ResourceAccordion/ResourceIcon.vue'
 import SchemaBadge from '../ResourceAccordion/SchemaBadge.vue'
 import ResourceSelector from './ResourceSelector.vue'
 import ResourceMainAction from './ResourceMainAction.vue'
+import FormattedDate from '../FormattedDate.vue'
+import TranslationT from '../TranslationT.vue'
 import { filesize, summarize } from '../../functions/helpers'
 import { getResourceExternalUrl, getResourceFilesize } from '../../functions/resources'
 import { trackEvent } from '../../functions/matomo'
-import { useFormatDate } from '../../functions/dates'
 import { useTranslation } from '../../composables/useTranslation'
 import type { RouteLocationRaw } from 'vue-router'
 import type { Resource } from '../../types/resources'
@@ -108,7 +116,6 @@ const props = defineProps<{
 }>()
 
 const { t } = useTranslation()
-const { formatRelativeIfRecentDate, formatDate } = useFormatDate()
 
 const resourceFilesize = computed(() => getResourceFilesize(props.resource))
 const resourceExternalUrl = computed(() => getResourceExternalUrl(props.dataset, props.resource))