@datagouv/components-next 1.3.0 → 1.4.0

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/PreviewWrapper.vue

@@ -1,29 +1,34 @@
 <template>
-  <div class="text-xs">
+  <div
+    class="text-xs"
+    :class="fill ? 'flex min-h-0 flex-1 flex-col' : ''"
+  >
     <slot
       v-if="data !== null"
       :data="data"
     />
-    <div
+    <slot
       v-else-if="loading"
-      class="text-gray-medium"
+      name="loading"
     >
-      {{ t("Chargement de l'aperçu {fileType}...", { fileType }) }}
-    </div>
+      <div class="text-gray-medium">
+        {{ t("Chargement de l'aperçu {fileType}...", { fileType }) }}
+      </div>
+    </slot>
     <PreviewUnavailable v-else-if="!isSizeAllowed">
       {{ fileSizeBytes
-        ? t("Le fichier {fileType} est trop volumineux pour être prévisualisé. Téléchargez-le depuis l'onglet Téléchargements.", { fileType })
-        : t("La taille du fichier est inconnue, l'aperçu n'est pas disponible. Téléchargez-le depuis l'onglet Téléchargements.")
+        ? t("Le fichier {fileType} est trop volumineux pour être prévisualisé. Téléchargez-le pour le consulter.", { fileType })
+        : t("La taille du fichier est inconnue, l'aperçu n'est pas disponible. Téléchargez-le pour le consulter.")
       }}
     </PreviewUnavailable>
     <PreviewUnavailable v-else-if="corsStatus === 'blocked'">
-      {{ t("Ce fichier {fileType} ne peut pas être prévisualisé car il est hébergé sur un site distant qui restreint l'accès (CORS). Téléchargez-le depuis l'onglet Téléchargements.", { fileType }) }}
+      {{ t("Ce fichier {fileType} ne peut pas être prévisualisé car il est hébergé sur un site distant qui restreint l'accès (CORS). Téléchargez-le pour le consulter.", { fileType }) }}
     </PreviewUnavailable>
     <PreviewUnavailable v-else-if="error === 'network'">
-      {{ t("Ce fichier est hébergé sur un site externe qui ne permet pas la prévisualisation. Téléchargez-le depuis l'onglet Téléchargements.") }}
+      {{ t("Ce fichier est hébergé sur un site externe qui ne permet pas la prévisualisation. Téléchargez-le pour le consulter.") }}
     </PreviewUnavailable>
     <PreviewUnavailable v-else-if="error">
-      {{ t("L'aperçu de ce fichier n'a pas pu être chargé. Téléchargez-le depuis l'onglet Téléchargements.") }}
+      {{ t("L'aperçu de ce fichier n'a pas pu être chargé. Téléchargez-le pour le consulter.") }}
     </PreviewUnavailable>
   </div>
 </template>
@@ -40,6 +45,8 @@ const props = defineProps<{
   resource: Resource
   maxSize: number | undefined
   load: () => Promise<unknown>
+  // Fill the available height (fullscreen) instead of sizing to content.
+  fill?: boolean
 }>()
 
 const emit = defineEmits<{

package/src/components/ResourceAccordion/ResourceAccordion.vue

@@ -47,7 +47,7 @@
           <CopyButton
             :label="t('Copier le lien')"
             :copied-label="t('Lien copié !')"
-            :text="resourceExternalUrl"
+            :text="externalUrl"
             class="z-2"
           />
         </div>
@@ -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"
@@ -197,7 +207,10 @@
             :key="tab.key"
             class="px-4"
           >
-            <div v-if="tab.key === 'map'">
+            <div
+              v-if="tab.key === 'map'"
+              class="-mx-4 h-[600px]"
+            >
               <Pmtiles
                 v-if="hasPmtiles"
                 :resource="resource"
@@ -224,6 +237,10 @@
                 v-else-if="resource.format && resource.format.toLowerCase() === 'xml'"
                 :resource="resource"
               />
+              <ImagePreview
+                v-else-if="isImagePreviewFormat(resource.format)"
+                :resource="resource"
+              />
               <!-- Show Datafair embedded preview (koumoul) -->
               <DatafairPreview
                 v-else-if="hasDatafairPreview"
@@ -296,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'
@@ -309,7 +327,7 @@ import { trackEvent } from '../../functions/matomo'
 import CopyButton from '../CopyButton.vue'
 import { useComponentsConfig } from '../../config'
 import { getOwnerName } from '../../functions/owned'
-import { getResourceFormatIcon, getResourceTitleId, detectOgcService, getResourceExternalUrl, getResourceFilesize } from '../../functions/resources'
+import { getResourceFormatIcon, getResourceTitleId, detectOgcService, getResourceFilesize, isImagePreviewFormat, resolveResourceExternalUrl } from '../../functions/resources'
 import BrandedButton from '../BrandedButton.vue'
 import { useTranslation } from '../../composables/useTranslation'
 import { useHasTabularData } from '../../composables/useHasTabularData'
@@ -331,6 +349,8 @@ const props = withDefaults(defineProps<{
   isCommunityResource?: boolean
   resource: Resource | CommunityResource
   canEdit?: boolean
+  // Overrides the "Copier le lien" target.
+  resourceExternalUrl?: (resource: Resource | CommunityResource) => string
 }>(), {
   expandedOnMount: false,
   isCommunityResource: false,
@@ -344,18 +364,18 @@ const Pmtiles = defineAsyncComponent(() => import('./Pmtiles.client.vue'))
 const JsonPreview = defineAsyncComponent(() => import('./JsonPreview.client.vue'))
 const PdfPreview = defineAsyncComponent(() => import('./PdfPreview.client.vue'))
 const XmlPreview = defineAsyncComponent(() => import('./XmlPreview.client.vue'))
+const ImagePreview = defineAsyncComponent(() => import('./ImagePreview.client.vue'))
 const DatafairPreview = defineAsyncComponent(() => import('./Datafair.client.vue'))
 
 const { t } = useTranslation()
-const { formatRelativeIfRecentDate } = useFormatDate()
 const checkTabularData = useHasTabularData()
 
 const hasPreview = computed(() => {
-  // For JSON, PDF, and XML files, show preview.
+  // For JSON, PDF, XML, and image files, show preview.
   // We cannot check for CORS issues here because we cannot use an async component here.
   // If there is a CORS issue when fetching the file for preview, it will be managed and displayed as an error banner by the preview component.
   const format = props.resource.format?.toLowerCase()
-  return format === 'json' || format === 'pdf' || format === 'xml'
+  return format === 'json' || format === 'pdf' || format === 'xml' || isImagePreviewFormat(format)
 })
 
 const hasTabularData = computed(() => checkTabularData(props.resource))
@@ -450,7 +470,7 @@ const resourceFilesize = computed(() => getResourceFilesize(props.resource))
 const unavailable = availabilityChecked && props.resource.extras['check:available'] === false
 const downloadButtonTitle = unavailable ? t(`Le robot de {certifier} n'a pas pu accéder à ce fichier - Télécharger le fichier en {format}`, { certifier: config.name, format: format.value }) : t(`Télécharger le fichier en {format}`, { format: format.value })
 
-const resourceExternalUrl = computed(() => getResourceExternalUrl(props.dataset, props.resource))
+const externalUrl = computed(() => resolveResourceExternalUrl(props.dataset, props.resource, props.resourceExternalUrl))
 
 const resourceContentId = 'resource-' + props.resource.id
 const resourceHeaderId = 'resource-' + props.resource.id + '-header'

package/src/components/ResourceExplorer/ResourceExplorer.vue

@@ -1,49 +1,87 @@
 <template>
-  <div v-if="allResources.length || hasAnyResources">
-    <div class="flex gap-6">
-      <div class="flex-1 min-w-0">
-        <ResourceExplorerViewer
-          v-if="selectedResource && allResources.length"
-          :key="selectedResource.id"
-          :dataset
-          :resource="selectedResource"
-          :resources="flatResources"
-          @select="selectResource"
-        />
-        <div
-          v-else-if="search"
-          class="flex flex-col items-center py-12"
-        >
-          <slot name="no-results-image">
-            <img
-              :src="noResultsImage"
-              class="h-20"
-              alt=""
-            >
-          </slot>
-          <p class="fr-text--bold fr-my-3v">
-            {{ t('Pas de résultats pour « {q} »', { q: search }) }}
-          </p>
-          <BrandedButton
-            color="primary"
-            @click="updateSearch('')"
-          >
-            {{ t('Réinitialiser la recherche') }}
-          </BrandedButton>
-        </div>
-      </div>
-      <div class="hidden md:block">
+  <div
+    v-if="groups.length || hasAnyResources"
+    :class="fullscreen ? 'flex min-h-0 flex-1 flex-col' : ''"
+  >
+    <ResourceExplorerHeader
+      v-if="fullscreen"
+      class="shrink-0"
+      :dataset
+      :resource="selectedResource"
+      :exit-to="exitTo"
+    />
+    <div
+      class="flex"
+      :class="fullscreen ? 'min-h-0 flex-1 overflow-hidden' : 'overflow-hidden rounded border border-gray-default'"
+    >
+      <div class="hidden md:flex">
         <ResourceExplorerSidebar
-          :resources="allResources"
+          :groups
           :selected-resource-id="selectedResource?.id ?? null"
           :collapsed="sidebarCollapsed"
           :search
-          @select="selectResource"
+          :loading-type="loadingType"
+          :resource-to="resourceTo"
+          replace
           @load-more="loadMore"
           @update:collapsed="sidebarCollapsed = $event"
           @update:search="updateSearch($event)"
         />
       </div>
+      <div
+        id="resource-explorer-viewer"
+        class="flex-1 min-w-0"
+        :class="fullscreen ? 'flex flex-col' : ''"
+        role="region"
+        :aria-label="t('Détail de la ressource')"
+      >
+        <!-- Suspense shows the skeleton fallback while the (async) viewer resolves
+             its data on each resource switch. `timeout` keeps the previous resource
+             visible for a beat so a near-instant switch doesn't flash a skeleton. -->
+        <Suspense
+          v-if="selectedResource"
+          :timeout="200"
+        >
+          <ResourceExplorerViewer
+            :key="selectedResource.id"
+            :dataset
+            :resource="selectedResource"
+            :resources="flatResources"
+            :resource-to="resourceTo"
+            :explore-to="exploreTo"
+            :resource-external-url="resourceExternalUrl"
+            replace
+            :fullscreen
+          />
+          <template #fallback>
+            <ResourceViewerSkeleton
+              :resource="selectedResource"
+              :dataset
+              :resources="flatResources"
+              :resource-to="resourceTo"
+              :explore-to="exploreTo"
+              :resource-external-url="resourceExternalUrl"
+              replace
+              :fullscreen
+            />
+          </template>
+        </Suspense>
+        <!-- The selection never falls back to nothing once a resource has been shown,
+             so having none means the groups aren't in yet: only `main` is fetched on
+             the server, the other types arrive on hydration. -->
+        <div
+          v-else
+          class="animate-pulse-placeholder p-4"
+          :class="fullscreen ? 'min-h-0 flex-1' : ''"
+          role="status"
+          :aria-label="t('Chargement des ressources…')"
+        >
+          <div
+            class="w-full rounded bg-gray-200"
+            :class="fullscreen ? 'h-full' : 'h-96'"
+          />
+        </div>
+      </div>
     </div>
   </div>
   <div
@@ -64,194 +102,52 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch, type Ref } from 'vue'
-import { useRouter } from 'vue-router'
-import { useRouteQuery } from '@vueuse/router'
-import { useComponentsConfig } from '../../config'
+import { ref } from 'vue'
+import { useRoute } from 'vue-router'
+import type { RouteLocationRaw } from 'vue-router'
 import { useTranslation } from '../../composables/useTranslation'
-import { useDebouncedRef } from '../../composables/useDebouncedRef'
-import { useFetch } from '../../functions/api'
-import { RESOURCE_EXPLORER_PAGE_SIZE, RESOURCE_TYPE } from '../../functions/resources'
-import type { PaginatedArray } from '../../types/api'
+import { useDatasetResources } from '../../composables/useDatasetResources'
 import type { DatasetV2 } from '../../types/datasets'
-import type { Resource, ResourceGroup, ResourceType } from '../../types/resources'
+import type { Resource } from '../../types/resources'
 import ResourceExplorerSidebar from './ResourceExplorerSidebar.vue'
 import ResourceExplorerViewer from './ResourceExplorerViewer.vue'
-import BrandedButton from '../BrandedButton.vue'
+import ResourceExplorerHeader from './ResourceExplorerHeader.vue'
+import ResourceViewerSkeleton from './ResourceViewerSkeleton.vue'
 
 const props = withDefaults(defineProps<{
   dataset: DatasetV2
   noResultsImage?: string
+  // Fullscreen mode: dataset context bar (org / title / date + download + exit), the
+  // viewer fills the height and hides its inline actions (shown in the context bar).
+  fullscreen?: boolean
+  exitTo?: RouteLocationRaw
+  // Inline mode only: link builder for the "Explorer" button in the viewer header
+  // that opens the fullscreen explorer on the current resource.
+  exploreTo?: (resource: Resource) => string
+  // Overrides the "Copier le lien" target.
+  resourceExternalUrl?: (resource: Resource) => string
 }>(), {
   noResultsImage: '',
+  fullscreen: false,
 })
 
 const { t } = useTranslation()
-const router = useRouter()
-const config = useComponentsConfig()
+const route = useRoute()
+
+const {
+  groups,
+  flatResources,
+  hasAnyResources,
+  selectedResource,
+  loadMore,
+  loadingType,
+  search,
+  updateSearch,
+} = await useDatasetResources(() => props.dataset)
 
 const sidebarCollapsed = ref(false)
-const search = ref('')
-const { debounced: searchDebounced, flush } = useDebouncedRef(search, config.searchDebounce ?? 300)
-
-const url = computed(() => `/api/2/datasets/${props.dataset.id}/resources/`)
-
-// Resource ID from URL query
-const resourceIdQuery = useRouteQuery<string | undefined>('resource_id')
-
-// Fetch resources for each type
-const mainParams = computed(() => ({
-  type: 'main' as const,
-  page_size: RESOURCE_EXPLORER_PAGE_SIZE,
-  q: searchDebounced.value || undefined,
-}))
-const documentationParams = computed(() => ({
-  type: 'documentation' as const,
-  page_size: RESOURCE_EXPLORER_PAGE_SIZE,
-  q: searchDebounced.value || undefined,
-}))
-const updateParams = computed(() => ({
-  type: 'update' as const,
-  page_size: RESOURCE_EXPLORER_PAGE_SIZE,
-  q: searchDebounced.value || undefined,
-}))
-const apiParams = computed(() => ({
-  type: 'api' as const,
-  page_size: RESOURCE_EXPLORER_PAGE_SIZE,
-  q: searchDebounced.value || undefined,
-}))
-const codeParams = computed(() => ({
-  type: 'code' as const,
-  page_size: RESOURCE_EXPLORER_PAGE_SIZE,
-  q: searchDebounced.value || undefined,
-}))
-const otherParams = computed(() => ({
-  type: 'other' as const,
-  page_size: RESOURCE_EXPLORER_PAGE_SIZE,
-  q: searchDebounced.value || undefined,
-}))
-
-const { data: mainData, status: mainStatus } = await useFetch<PaginatedArray<Resource>>(url, { params: mainParams })
-const { data: documentationData, status: documentationStatus } = await useFetch<PaginatedArray<Resource>>(url, { params: documentationParams, server: false })
-const { data: updateData, status: updateStatus } = await useFetch<PaginatedArray<Resource>>(url, { params: updateParams, server: false })
-const { data: apiData, status: apiStatus } = await useFetch<PaginatedArray<Resource>>(url, { params: apiParams, server: false })
-const { data: codeData, status: codeStatus } = await useFetch<PaginatedArray<Resource>>(url, { params: codeParams, server: false })
-const { data: otherData, status: otherStatus } = await useFetch<PaginatedArray<Resource>>(url, { params: otherParams, server: false })
-
-const rawResourcesByTypes = [
-  { data: mainData, status: mainStatus },
-  { data: documentationData, status: documentationStatus },
-  { data: updateData, status: updateStatus },
-  { data: apiData, status: apiStatus },
-  { data: codeData, status: codeStatus },
-  { data: otherData, status: otherStatus },
-]
-
-// Evaluated once at setup (before any search) — never changes afterwards
-const hasAnyResources = computed(() => {
-  return props.dataset.resources.total > 0
-})
-
-const extraResourcesByType: Ref<Resource[]>[] = RESOURCE_TYPE.map(() => ref<Resource[]>([]))
-const pageByType: Ref<number>[] = RESOURCE_TYPE.map(() => ref(1))
-
-watch(searchDebounced, () => {
-  for (let i = 0; i < RESOURCE_TYPE.length; i++) {
-    extraResourcesByType[i]!.value = []
-    pageByType[i]!.value = 1
-  }
-})
-
-// Separate useFetch for loadMore, initialized at setup time with immediate: false
-// so that it doesn't fetch until execute() is called from the event handler.
-const loadMoreType = ref<ResourceType>('main')
-const loadMorePage = ref(1)
-const loadMoreParams = computed(() => ({
-  type: loadMoreType.value,
-  page_size: RESOURCE_EXPLORER_PAGE_SIZE,
-  page: loadMorePage.value,
-  q: searchDebounced.value || undefined,
-}))
-const { data: loadMoreData, execute: executeLoadMore } = await useFetch<PaginatedArray<Resource>>(url, {
-  params: loadMoreParams,
-  immediate: false,
-  watch: false,
-})
-
-const loadMore = async (type: ResourceType) => {
-  const index = RESOURCE_TYPE.indexOf(type)
-  if (index === -1) return
-  const pageRef = pageByType[index]!
-  const extraRef = extraResourcesByType[index]!
-  pageRef.value++
-
-  loadMoreType.value = type
-  loadMorePage.value = pageRef.value
-  await executeLoadMore()
-
-  if (loadMoreData.value) {
-    extraRef.value = [...extraRef.value, ...loadMoreData.value.data]
-  }
-}
-
-const allResources = computed<ResourceGroup[]>(() => {
-  return RESOURCE_TYPE
-    .map((type, index) => {
-      const rawData = rawResourcesByTypes[index]!
-      const extraData = extraResourcesByType[index]!
-      return {
-        type: type as ResourceType,
-        total: rawData.data.value?.total ?? 0,
-        items: [...(rawData.data.value?.data ?? []), ...extraData.value],
-      }
-    })
-    .filter(group => group.items.length > 0)
-})
-
-const flatResources = computed(() =>
-  allResources.value.flatMap(g => g.items),
-)
-
-// Fetch resource by ID if specified in URL (for SSR)
-const initialResourceId = resourceIdQuery.value
-const { data: fetchedResource } = initialResourceId
-  ? await useFetch<Resource>(`/api/1/datasets/${props.dataset.id}/resources/${initialResourceId}/`)
-  : { data: ref(null) }
-
-// Initial selection (synchronous for SSR hydration)
-function getInitialResource(): Resource | null {
-  const resourceId = resourceIdQuery.value
-  if (resourceId) {
-    // First check in already loaded resources
-    const existing = flatResources.value.find(r => r.id === resourceId)
-    if (existing) return existing
-    // Use fetched resource if available
-    if (fetchedResource.value) return fetchedResource.value
-  }
-  // Default to first resource
-  return flatResources.value[0] ?? null
-}
-
-const selectedResource = ref<Resource | null>(getInitialResource())
-
-function updateSearch(newSearch: string) {
-  search.value = newSearch
-  flush()
-}
-
-const selectResource = (resource: Resource) => {
-  selectedResource.value = resource
-  router.replace({
-    query: { ...router.currentRoute.value.query, resource_id: resource.id },
-  })
-}
 
-// Update selection when resources change (e.g., after client-side fetch completes)
-watch(flatResources, () => {
-  if (selectedResource.value) return
-  const firstResource = flatResources.value[0]
-  if (firstResource) {
-    selectedResource.value = firstResource
-  }
+const resourceTo = (resource: Resource): RouteLocationRaw => ({
+  query: { ...route.query, resource_id: resource.id },
 })
 </script>

package/src/components/ResourceExplorer/ResourceExplorerHeader.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="sticky top-0 z-30 flex h-[58px] shrink-0 items-center justify-between gap-2 border-b border-gray-default bg-gray-some/95 px-3 backdrop-blur-[5px] sm:gap-4">
+    <div class="flex min-w-0 items-center gap-2">
+      <OrganizationLogo
+        v-if="dataset.organization"
+        :organization="dataset.organization"
+        size-class="size-[34px] shrink-0 rounded-sm border border-gray-default bg-white p-1"
+      />
+      <Avatar
+        v-else-if="dataset.owner"
+        :user="dataset.owner"
+        :size="34"
+        class="shrink-0"
+      />
+      <div class="flex min-w-0 items-center gap-1 text-[13px] leading-[1.4] sm:text-base">
+        <span class="min-w-0 truncate text-gray-title">{{ producerName }}</span>
+        <span class="shrink-0 text-gray-title">/</span>
+        <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>
+          <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>
+    <div class="flex shrink-0 items-center gap-2">
+      <ResourceMainAction
+        v-if="resource"
+        :resource="resource"
+        :dataset="dataset"
+      />
+      <BrandedButton
+        v-if="exitTo"
+        :href="exitTo"
+        :icon="RiFullscreenExitLine"
+        color="secondary"
+        size="xs"
+        icon-only
+        :title="t('Quitter le plein écran')"
+      >
+        {{ t('Quitter le plein écran') }}
+      </BrandedButton>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { RiFullscreenExitLine } from '@remixicon/vue'
+import type { RouteLocationRaw } from 'vue-router'
+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 type { Dataset, DatasetV2 } from '../../types/datasets'
+import type { Resource } from '../../types/resources'
+
+const props = defineProps<{
+  dataset: Dataset | DatasetV2
+  resource: Resource | null
+  exitTo?: RouteLocationRaw
+}>()
+
+const { t } = useTranslation()
+
+// Plain producer name, matching the prototype: dark text, no link, no certificate
+// badge — unlike ObjectCardOwner which renders a styled link.
+const producerName = computed(() => getOwnerName(props.dataset))
+</script>