From cb81e1f6fb4f5603c583e4bb3b21e3fd39ffeca2 Mon Sep 17 00:00:00 2001
From: Thibaud Dauce <git@hadibut.fr>
Date: Mon, 4 May 2026 11:34:58 +0200
Subject: [PATCH 1/9] feat: improve /explore design page

---
 .../src/components/DatasetCard.vue            |  10 +-
 .../src/composables/useHasTabularData.ts      |   7 +
 nuxt.config.ts                                |   6 +
 pages/explore.vue                             | 266 ++++++++++--------
 4 files changed, 175 insertions(+), 114 deletions(-)

diff --git a/datagouv-components/src/components/DatasetCard.vue b/datagouv-components/src/components/DatasetCard.vue
index 2913102ba..7e539dd3e 100644
--- a/datagouv-components/src/components/DatasetCard.vue
+++ b/datagouv-components/src/components/DatasetCard.vue
@@ -106,10 +106,12 @@
         </p>
       </div>
     </div>
-    <ObjectCardShortDescription
-      v-if="showDescriptionShort"
-      :text="getDescriptionShort(props.dataset)"
-    />
+    <slot>
+      <ObjectCardShortDescription
+        v-if="showDescriptionShort"
+        :text="getDescriptionShort(props.dataset)"
+      />
+    </slot>
   </ObjectCard>
 </template>
 
diff --git a/datagouv-components/src/composables/useHasTabularData.ts b/datagouv-components/src/composables/useHasTabularData.ts
index 7b02a78ba..d9b5d9d19 100644
--- a/datagouv-components/src/composables/useHasTabularData.ts
+++ b/datagouv-components/src/composables/useHasTabularData.ts
@@ -5,10 +5,17 @@ export const useHasTabularData = () => {
   const config = useComponentsConfig()
 
   return (resource: Resource) => {
+    // Reject resources whose source URL last check failed (>= 400):
+    // the tabular-api purges its parquet when the source dies, but
+    // `parsing_table` may still be set — leading to a 404 on fetch.
+    const checkStatus = resource.extras['check:status']
+    const sourceUnreachable = typeof checkStatus === 'number' && checkStatus >= 400
+
     return (
       config.tabularApiUrl
       && resource.extras['analysis:parsing:parsing_table']
       && !resource.extras['analysis:parsing:error']
+      && !sourceUnreachable
       && (config.tabularAllowRemote || resource.filetype === 'file')
     )
   }
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 65681a07d..af2c10ef7 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -109,6 +109,12 @@ export default defineNuxtConfig({
       homepagePublishReuseOnboarding: '/reutilisateurs',
       homepageAboutUs: '/a-propos',
       homepageExplore: 'https://explore.data.gouv.fr',
+      // Featured resources shown on the /explore page. Override via env var:
+      // NUXT_PUBLIC_FEATURED_RESOURCE_IDS='["resource-id-1","resource-id-2"]'
+      featuredResourceIds: [
+        '1c5075ec-7ce1-49cb-ab89-94f507812daf', // Visas d'exploitations cinématographiques (CNC)
+        'df2cbcb3-da0a-4265-a24e-c36f2c787db2', // Indices de position sociale dans les lycées
+      ] as string[],
       homepageRightNow: {
         title: 'Données relatives aux Énergies',
         url: '/pages/donnees-energie',
diff --git a/pages/explore.vue b/pages/explore.vue
index 7bb0a9adc..c120d2586 100644
--- a/pages/explore.vue
+++ b/pages/explore.vue
@@ -1,127 +1,144 @@
 <template>
-  <div class="container py-8">
-    <h1 class="mb-6">
-      Explore
+  <div
+    v-if="!resourceId"
+    class="container mb-16"
+  >
+    <Breadcrumb>
+      <BreadcrumbItem to="/">
+        {{ $t('Accueil') }}
+      </BreadcrumbItem>
+      <BreadcrumbItem>
+        {{ $t('Explorer') }}
+      </BreadcrumbItem>
+    </Breadcrumb>
+
+    <h1 class="text-gray-title font-extrabold text-2xl mb-2">
+      Explorer les données tabulaires
     </h1>
+    <p class="text-gray-medium mb-6">
+      À ce stade, seuls les fichiers tabulaires de moins de
+      <strong>100 Mo</strong> sont disponibles.
+    </p>
+
+    <form @submit.prevent="() => execute()">
+      <SearchInput
+        v-model="query"
+        placeholder="Rechercher un fichier (exemple : élections)…"
+      />
+    </form>
+
+    <p
+      v-show="status === 'pending'"
+      class="mt-4 text-sm text-gray-medium"
+    >
+      Chargement…
+    </p>
 
     <div
-      v-if="!resourceId"
-      class="space-y-6"
+      v-if="flatResults.length > 0"
+      class="mt-6 space-y-3"
     >
-      <div class="flex flex-wrap gap-2">
-        <button
-          class="fr-btn fr-btn--secondary fr-btn--sm"
-          @click="selectResource('eaa95292-072d-4353-a6b8-1be65be0ab0f')"
-        >
-          Petitions du Sénat
-        </button>
-      </div>
-
-      <form
-        class="fr-search-bar fr-search-bar--lg w-full"
-        @submit.prevent="() => execute()"
-      >
-        <label
-          for="search-input"
-          class="sr-only"
-        >Rechercher un jeu de données</label>
-        <input
-          id="search-input"
-          v-model="query"
-          type="search"
-          class="input max-h-12 m-0 rounded-tl shadow-input-blue"
-          placeholder="Rechercher un jeu de données..."
-        >
-        <button
-          class="fr-btn"
-          type="submit"
-        >
-          Rechercher
-        </button>
-      </form>
-
-      <p
-        v-show="status === 'pending'"
-        class="text-sm text-gray-500"
-      >
-        Chargement...
+      <p class="text-sm text-gray-medium">
+        {{ results!.total }} résultat{{ results!.total > 1 ? 's' : '' }}
       </p>
-
-      <div
-        v-if="displayedDatasets.length > 0"
-        class="space-y-4"
+      <DatasetCard
+        v-for="entry in flatResults"
+        :key="`${entry.dataset.id}-${entry.resource.id}`"
+        :dataset="entry.dataset"
+        :dataset-url="exploreLink(entry.resource.id)"
       >
-        <p class="text-sm text-gray-500">
-          {{ results!.total }} résultat{{ results!.total > 1 ? 's' : '' }}
+        <p class="text-sm text-gray-700 mb-0">
+          Fichier : <strong>{{ entry.resource.title || 'Sans titre' }}</strong>
         </p>
-        <div
-          v-for="dataset in displayedDatasets"
-          :key="dataset.id"
-          class="border rounded p-4 space-y-2"
-        >
-          <p class="font-bold">
-            {{ dataset.title }}
-          </p>
-          <p
-            v-if="dataset.organization"
-            class="text-sm text-gray-500"
-          >
-            {{ dataset.organization.name }}
-          </p>
-          <div class="space-y-1">
-            <button
-              v-for="resource in explorableResources(dataset)"
-              :key="resource.id"
-              class="flex items-center gap-2 text-sm px-3 py-2 rounded hover:bg-blue-50 w-full text-left transition-colors"
-              @click="selectResource(resource.id)"
-            >
-              <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-800 uppercase">
-                {{ resource.format }}
-              </span>
-              <span>{{ resource.title }}</span>
-              <span
-                v-if="resource.filesize"
-                class="text-gray-400 text-xs ml-auto"
-              >
-                {{ filesize(resource.filesize) }}
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-
-      <p
-        v-else-if="results && status === 'success'"
-        class="text-sm text-gray-500 italic"
-      >
-        Aucun résultat
-      </p>
+      </DatasetCard>
     </div>
 
-    <div v-else>
-      <button
-        class="fr-btn fr-btn--tertiary-no-outline fr-btn--sm mb-4"
-        @click="resourceId = ''"
+    <p
+      v-else-if="results && status === 'success' && query"
+      class="mt-4 text-sm text-gray-medium italic"
+    >
+      Aucun résultat
+    </p>
+
+    <div
+      v-if="featuredEntries && featuredEntries.length > 0"
+      class="mt-12 space-y-3"
+    >
+      <h2 class="text-gray-title font-extrabold text-xl mb-2">
+        Quelques exemples
+      </h2>
+      <p class="text-gray-medium">
+        Si vous ne savez pas par quoi commencer à explorer, nous vous
+        proposons ci-dessous une sélection de quelques jeux de données.
+      </p>
+      <DatasetCard
+        v-for="entry in featuredEntries"
+        :key="`${entry.dataset.id}-${entry.resource.id}`"
+        :dataset="entry.dataset"
+        :dataset-url="exploreLink(entry.resource.id)"
       >
-        &larr; Retour à la recherche
-      </button>
-      <TabularExplorer
-        :key="resourceId"
-        :resource-id="resourceId"
-      />
+        <p class="text-sm text-gray-700 mb-0">
+          Fichier : <strong>{{ entry.resource.title || 'Sans titre' }}</strong>
+        </p>
+      </DatasetCard>
     </div>
   </div>
+
+  <div
+    v-else
+    class="px-4 py-4"
+  >
+    <NuxtLink
+      :to="backLink"
+      class="fr-btn fr-btn--tertiary-no-outline fr-btn--sm mb-4"
+    >
+      ← Retour à la recherche
+    </NuxtLink>
+    <TabularExplorer
+      :key="resourceId"
+      :resource-id="resourceId"
+    />
+  </div>
 </template>
 
 <script setup lang="ts">
-import { TabularExplorer, filesize, useHasTabularData } from '@datagouv/components-next'
-import type { Dataset } from '@datagouv/components-next'
+import { DatasetCard, SearchInput, TabularExplorer, useHasTabularData } from '@datagouv/components-next'
+import type { Dataset, DatasetV2, Resource } from '@datagouv/components-next'
+import BreadcrumbItem from '~/components/Breadcrumbs/BreadcrumbItem.vue'
 import type { PaginatedArray } from '~/types/types'
 
-useSeoMeta({ robots: 'noindex' })
+useSeoMeta({
+  title: 'Explorer les données tabulaires',
+  description: 'Explorer facilement les fichiers tabulaires (CSV, XLSX) référencés sur data.gouv.fr.',
+  robots: 'noindex',
+})
+
+const route = useRoute()
+const router = useRouter()
+const { $api } = useNuxtApp()
+const config = useRuntimeConfig()
+
+const featuredResourceIds = config.public.featuredResourceIds
 
-const query = ref('')
-const resourceId = ref('')
+const query = computed({
+  get: () => (typeof route.query.q === 'string' ? route.query.q : ''),
+  set: (v: string) => {
+    const q = { ...route.query }
+    if (v) q.q = v
+    else delete q.q
+    router.replace({ query: q })
+  },
+})
+
+const resourceId = computed(() =>
+  typeof route.query.resource_id === 'string' ? route.query.resource_id : '',
+)
+
+const backLink = computed(() => {
+  const q = { ...route.query }
+  delete q.resource_id
+  return { query: q }
+})
 
 const searchParams = computed(() => ({ q: query.value, page_size: 10, format: 'csv' }))
 
@@ -129,7 +146,7 @@ const { data: results, status, execute } = await useAPI<PaginatedArray<Dataset>>
   '/api/1/datasets/',
   {
     query: searchParams,
-    immediate: false,
+    immediate: !!query.value,
     watch: false,
   },
 )
@@ -140,11 +157,40 @@ function explorableResources(dataset: Dataset) {
   return dataset.resources.filter(hasTabularData)
 }
 
-const displayedDatasets = computed(() =>
-  results.value?.data.filter(dataset => explorableResources(dataset).length > 0) ?? [],
+type ResourceInDataset = { dataset: Dataset | DatasetV2, resource: Resource }
+
+const flatResults = computed<ResourceInDataset[]>(() => {
+  const out: ResourceInDataset[] = []
+  for (const dataset of results.value?.data ?? []) {
+    for (const resource of explorableResources(dataset)) {
+      out.push({ dataset, resource })
+    }
+  }
+  return out
+})
+
+const { data: featuredEntries } = await useAsyncData(
+  'explore-featured',
+  async () => {
+    const entries = await Promise.all(
+      featuredResourceIds.map(async (id): Promise<ResourceInDataset | null> => {
+        try {
+          const r = await $api<{ resource: Resource, dataset_id: string }>(
+            `/api/2/datasets/resources/${id}/`,
+          )
+          const dataset = await $api<DatasetV2>(`/api/2/datasets/${r.dataset_id}/`)
+          return { dataset, resource: r.resource }
+        }
+        catch {
+          return null
+        }
+      }),
+    )
+    return entries.filter((e): e is ResourceInDataset => e !== null)
+  },
 )
 
-function selectResource(id: string) {
-  resourceId.value = id
+function exploreLink(id: string) {
+  return { query: { ...route.query, resource_id: id } }
 }
 </script>

From 5767faba13a64cf6dab8bb7edc03211488f8bbf1 Mon Sep 17 00:00:00 2001
From: Thibaud Dauce <git@hadibut.fr>
Date: Tue, 5 May 2026 09:12:32 +0200
Subject: [PATCH 2/9] working on fullscreen explore

---
 .../ResourceAccordion/DataStructure.vue       |  44 +--
 .../ResourceAccordion/Downloads.vue           | 160 ++++++++++
 .../ResourceExplorer/ResourceExplorer.vue     |  57 +---
 .../ResourceExplorerViewer.vue                | 161 ++--------
 .../ResourceExplorer/ResourceSelector.vue     |  67 +++++
 .../TabularExplorer/TabularExplorer.vue       |  17 +-
 .../src/composables/useTabularProfile.ts      |  72 +++++
 datagouv-components/src/main.ts               |  12 +
 pages/explore.vue                             | 281 +++++++++++++++++-
 9 files changed, 625 insertions(+), 246 deletions(-)
 create mode 100644 datagouv-components/src/components/ResourceAccordion/Downloads.vue
 create mode 100644 datagouv-components/src/components/ResourceExplorer/ResourceSelector.vue
 create mode 100644 datagouv-components/src/composables/useTabularProfile.ts

diff --git a/datagouv-components/src/components/ResourceAccordion/DataStructure.vue b/datagouv-components/src/components/ResourceAccordion/DataStructure.vue
index 827c7de32..51d617224 100644
--- a/datagouv-components/src/components/ResourceAccordion/DataStructure.vue
+++ b/datagouv-components/src/components/ResourceAccordion/DataStructure.vue
@@ -49,45 +49,23 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { computed } from 'vue'
 import type { Resource } from '../../types/resources'
-import { useGetProfile } from '../../functions/tabularApi'
 import { useTranslation } from '../../composables/useTranslation'
+import { injectTabularProfile } from '../../composables/useTabularProfile'
 import PreviewLoader from './PreviewLoader.vue'
 
 const props = defineProps<{ resource: Resource }>()
-const getProfile = useGetProfile()
 const { t } = useTranslation()
 
-type ColumnInfo = {
-  score: number
-  format: string
-  python_type: string
-}
+// Profile is shared with sibling components (e.g. TabularExplorer) via
+// `provideTabularProfile` in the parent. Falls back to a local fetch
+// when no parent provides it (standalone usage).
+const { data: profileData, status } = injectTabularProfile(() => props.resource.id)
 
-const columns = ref<Array<string>>([])
-const columnsInfo = ref<Record<string, ColumnInfo>>({})
-const loading = ref(true)
-const hasError = ref(false)
-const hasColumnInfo = ref(false)
-
-onMounted(async () => {
-  try {
-    const response = await getProfile(props.resource.id) // Assurez-vous que cette fonction retourne bien les données attendues
-    if ('profile' in response && response.profile) {
-      columns.value = Object.keys(response.profile.columns)
-      columnsInfo.value = response.profile.columns
-      hasColumnInfo.value = true
-      loading.value = false
-    }
-    else {
-      hasError.value = true
-      loading.value = false
-    }
-  }
-  catch {
-    hasError.value = true
-    loading.value = false
-  }
-})
+const loading = computed(() => status.value === 'idle' || status.value === 'pending')
+const hasError = computed(() => status.value === 'error')
+const hasColumnInfo = computed(() => !!profileData.value?.profile?.columns)
+const columns = computed(() => profileData.value?.profile ? Object.keys(profileData.value.profile.columns) : [])
+const columnsInfo = computed(() => profileData.value?.profile?.columns ?? {})
 </script>
diff --git a/datagouv-components/src/components/ResourceAccordion/Downloads.vue b/datagouv-components/src/components/ResourceAccordion/Downloads.vue
new file mode 100644
index 000000000..0289155ef
--- /dev/null
+++ b/datagouv-components/src/components/ResourceAccordion/Downloads.vue
@@ -0,0 +1,160 @@
+<template>
+  <dl class="fr-pl-0">
+    <dt
+      v-if="resource.format === 'url'"
+      class="font-bold fr-text--sm fr-mb-0"
+    >
+      {{ t("URL d'origine") }}
+    </dt>
+    <dt
+      v-else
+      class="font-bold fr-text--sm fr-mb-0"
+    >
+      {{ t('Format original') }}
+    </dt>
+    <dd class="text-sm pl-0 mb-4 text-gray-medium h-8 flex flex-wrap items-center">
+      <span
+        v-if="resource.format === 'url'"
+        class="inline-flex items-center max-w-full"
+      >
+        <a
+          :href="resource.latest"
+          class="fr-link no-icon-after truncate"
+          rel="ugc nofollow noopener"
+          target="_blank"
+          @click="trackEvent('Jeux de données', 'Télécharger un fichier', 'Bouton : télécharger un fichier')"
+        >
+          {{ resource.url }}
+        </a>
+        <span class="fr-ml-1v fr-icon-external-link-line fr-icon--sm shrink-0" />
+      </span>
+      <span v-else>
+        <span class="text-datagouv fr-icon-download-line fr-icon--sm fr-mr-1v fr-mt-1v" />
+        <a
+          :href="resource.latest"
+          class="fr-link"
+          rel="ugc nofollow noopener"
+          @click="trackEvent('Jeux de données', 'Télécharger un fichier', `Bouton : format ${resource.format}`)"
+        >
+          <span>{{ t('Format {format}', { format: resource.format }) }}<span v-if="resourceFilesize"> - {{ filesize(resourceFilesize) }}</span></span>
+        </a>
+      </span>
+      <CopyButton
+        :label="t('Copier le lien')"
+        :copied-label="t('Lien copié !')"
+        :text="resource.latest"
+        class="relative"
+      />
+    </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>
+      <dd
+        v-for="generatedFormat in generatedFormats"
+        :key="generatedFormat.format"
+        class="text-sm pl-0 mb-4 text-gray-medium h-8 flex flex-wrap items-center"
+      >
+        <span>
+          <span class="text-datagouv fr-icon-download-line fr-icon--sm fr-mr-1v fr-mt-1v" />
+          <a
+            :href="generatedFormat.url"
+            class="fr-link"
+            rel="ugc nofollow noopener"
+            @click="trackEvent('Jeux de données', 'Télécharger un fichier', `Bouton : format ${generatedFormat.format}`)"
+          >
+            <span>{{ t('Format {format}', { format: generatedFormat.format }) }}<span v-if="generatedFormat.size"> - {{ filesize(generatedFormat.size) }}</span></span>
+          </a>
+        </span>
+        <CopyButton
+          :label="t('Copier le lien')"
+          :copied-label="t('Lien copié !')"
+          :text="generatedFormat.url"
+          class="relative"
+        />
+      </dd>
+    </template>
+    <template v-if="wfsFormats.length">
+      <dt class="font-bold fr-text--sm fr-mb-0">
+        <div class="flex gap-1 items-center">
+          {{ t('Formats exportés depuis le service WFS') }}
+          <span v-if="defaultWfsProjection"> ({{ t('projection {crs}', { crs: defaultWfsProjection }) }})</span>
+          <Tooltip>
+            <RiInformationLine
+              class="flex-none size-4"
+              :aria-label="t(`Le lien de téléchargement interroge directement le flux WFS distant. Le nombre de features téléchargées peut être limité.`)"
+              aria-hidden="true"
+            />
+            <template #tooltip>
+              <p class="text-sm font-normal mb-0">
+                {{ t(`Le lien de téléchargement interroge directement le flux WFS distant.`) }}
+              </p>
+              <p class="text-sm font-normal mb-0">
+                {{ t(`Le nombre de features téléchargées peut être limité.`) }}
+              </p>
+            </template>
+          </Tooltip>
+        </div>
+      </dt>
+      <dd
+        v-for="wfsFormat in wfsFormats"
+        :key="wfsFormat.format"
+        class="text-sm pl-0 mb-4 text-gray-medium h-8 flex flex-wrap items-center"
+      >
+        <span>
+          <span class="text-datagouv fr-icon-download-line fr-icon--sm fr-mr-1v fr-mt-1v" />
+          <a
+            :href="wfsFormat.url"
+            class="fr-link"
+            rel="ugc nofollow noopener"
+            @click="trackEvent('Jeux de données', 'Télécharger un fichier', `Bouton : format ${wfsFormat.format}`)"
+          >
+            <span>{{ t('Format {format}', { format: wfsFormat.format }) }}</span>
+          </a>
+        </span>
+        <CopyButton
+          :label="t('Copier le lien')"
+          :copied-label="t('Lien copié !')"
+          :text="wfsFormat.url"
+          class="relative"
+        />
+      </dd>
+    </template>
+  </dl>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { RiInformationLine } from '@remixicon/vue'
+import CopyButton from '../CopyButton.vue'
+import Tooltip from '../Tooltip.vue'
+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 { useTranslation } from '../../composables/useTranslation'
+import { useResourceCapabilities } from '../../composables/useResourceCapabilities'
+import type { Resource } from '../../types/resources'
+import type { Dataset, DatasetV2 } from '../../types/datasets'
+
+const props = defineProps<{
+  resource: Resource
+  dataset: Dataset | DatasetV2
+}>()
+
+const { t } = useTranslation()
+const config = useComponentsConfig()
+const { formatRelativeIfRecentDate } = useFormatDate()
+
+const { generatedFormats, wfsFormats, defaultWfsProjection } = useResourceCapabilities(
+  () => props.resource,
+  () => props.dataset,
+)
+
+const resourceFilesize = computed(() => getResourceFilesize(props.resource))
+
+const conversionsLastUpdate = computed(() =>
+  formatRelativeIfRecentDate(props.resource.extras['analysis:parsing:finished_at'] as string | undefined),
+)
+</script>
diff --git a/datagouv-components/src/components/ResourceExplorer/ResourceExplorer.vue b/datagouv-components/src/components/ResourceExplorer/ResourceExplorer.vue
index b4cefabae..5e4417fd8 100644
--- a/datagouv-components/src/components/ResourceExplorer/ResourceExplorer.vue
+++ b/datagouv-components/src/components/ResourceExplorer/ResourceExplorer.vue
@@ -2,24 +2,13 @@
   <div v-if="allResources.length || hasAnyResources">
     <div class="flex gap-6">
       <div class="flex-1 min-w-0">
-        <div
-          v-if="dataset.resources.total > 1"
-          class="md:hidden flex justify-end mb-3"
-        >
-          <BrandedButton
-            size="xs"
-            color="secondary"
-            :icon="RiListUnordered"
-            @click="mobileSidebarOpen = true"
-          >
-            {{ t('Ressources ({count})', { count: dataset.resources.total }) }}
-          </BrandedButton>
-        </div>
         <ResourceExplorerViewer
           v-if="selectedResource && allResources.length"
           :key="selectedResource.id"
           :dataset
           :resource="selectedResource"
+          :resources="flatResources"
+          @select="selectResource"
         />
         <div
           v-else-if="search"
@@ -56,25 +45,6 @@
         />
       </div>
     </div>
-
-    <!-- Mobile sidebar panel -->
-    <dialog
-      ref="mobileSidebarDialog"
-      class="mobile-sidebar md:hidden fixed inset-0 m-0 ml-auto p-0 h-dvh max-h-dvh w-80 max-w-[85vw] bg-white shadow-lg overflow-y-auto overscroll-contain backdrop:bg-black/30"
-      @close="mobileSidebarOpen = false"
-      @click.self="closeMobileSidebar"
-    >
-      <ResourceExplorerSidebar
-        :resources="allResources"
-        :selected-resource-id="selectedResource?.id ?? null"
-        :collapsed="false"
-        :search
-        @select="selectResource"
-        @load-more="loadMore"
-        @update:collapsed="closeMobileSidebar"
-        @update:search="updateSearch($event)"
-      />
-    </dialog>
   </div>
   <div
     v-else
@@ -107,7 +77,6 @@ import type { DatasetV2 } from '../../types/datasets'
 import type { Resource, ResourceGroup, ResourceType } from '../../types/resources'
 import ResourceExplorerSidebar from './ResourceExplorerSidebar.vue'
 import ResourceExplorerViewer from './ResourceExplorerViewer.vue'
-import { RiListUnordered } from '@remixicon/vue'
 import BrandedButton from '../BrandedButton.vue'
 
 const props = withDefaults(defineProps<{
@@ -246,21 +215,6 @@ const flatResources = computed(() =>
 
 // Fetch resource by ID if specified in URL (for SSR)
 const initialResourceId = resourceIdQuery.value
-const mobileSidebarOpen = ref(false)
-const mobileSidebarDialog = ref<HTMLDialogElement | null>(null)
-
-watch(mobileSidebarOpen, (open) => {
-  if (open) {
-    mobileSidebarDialog.value?.showModal()
-  }
-  else {
-    mobileSidebarDialog.value?.close()
-  }
-})
-
-function closeMobileSidebar() {
-  mobileSidebarOpen.value = false
-}
 const { data: fetchedResource } = initialResourceId
   ? await useFetch<Resource>(`/api/1/datasets/${props.dataset.id}/resources/${initialResourceId}/`)
   : { data: ref(null) }
@@ -288,7 +242,6 @@ function updateSearch(newSearch: string) {
 
 const selectResource = (resource: Resource) => {
   selectedResource.value = resource
-  mobileSidebarOpen.value = false
   router.replace({
     query: { ...router.currentRoute.value.query, resource_id: resource.id },
   })
@@ -303,9 +256,3 @@ watch(flatResources, () => {
   }
 })
 </script>
-
-<style>
-html:has(dialog.mobile-sidebar[open]) {
-  overflow: hidden;
-}
-</style>
diff --git a/datagouv-components/src/components/ResourceExplorer/ResourceExplorerViewer.vue b/datagouv-components/src/components/ResourceExplorer/ResourceExplorerViewer.vue
index 6f6f5f341..165c07b27 100644
--- a/datagouv-components/src/components/ResourceExplorer/ResourceExplorerViewer.vue
+++ b/datagouv-components/src/components/ResourceExplorer/ResourceExplorerViewer.vue
@@ -2,7 +2,7 @@
   <div class="border border-gray-default">
     <header class="p-4 flex flex-wrap md:flex-nowrap gap-4 items-center justify-between">
       <div>
-        <div class="flex items-center mb-1">
+        <div class="flex items-center gap-1 mb-1">
           <h3 class="m-0 flex items-baseline text-base font-bold leading-tight">
             <ResourceIcon
               :resource
@@ -10,6 +10,12 @@
             />
             <span class="line-clamp-2">{{ resource.title || t('Fichier sans nom') }}</span>
           </h3>
+          <ResourceSelector
+            v-if="resources && resources.length > 1"
+            :resources
+            :selected-id="resource.id"
+            @select="emit('select', $event)"
+          />
           <CopyButton
             :label="t('Copier le lien')"
             :copied-label="t('Lien copié !')"
@@ -139,9 +145,9 @@
                 v-else-if="hasOpenAPIPreview"
                 :url="resource.extras['apidocUrl'] as string"
               />
-              <Preview
+              <TabularExplorer
                 v-else-if="hasTabularData"
-                :resource="resource"
+                :resource-id="resource.id"
               />
               <PreviewUnavailable v-else>
                 <!-- "File too large to download" is the only analysis:error value from hydra for now -->
@@ -174,128 +180,10 @@
               <Metadata :resource />
             </div>
             <div v-if="tab.key === 'downloads'">
-              <dl class="fr-pl-0">
-                <dt
-                  v-if="resource.format === 'url'"
-                  class="font-bold fr-text--sm fr-mb-0"
-                >
-                  {{ t("URL d'origine") }}
-                </dt>
-                <dt
-                  v-else
-                  class="font-bold fr-text--sm fr-mb-0"
-                >
-                  {{ t('Format original') }}
-                </dt>
-                <dd class="text-sm pl-0 mb-4 text-gray-medium h-8 flex flex-wrap items-center">
-                  <span
-                    v-if="resource.format === 'url'"
-                    class="inline-flex items-center max-w-full"
-                  >
-                    <a
-                      :href="resource.latest"
-                      class="fr-link no-icon-after truncate"
-                      rel="ugc nofollow noopener"
-                      target="_blank"
-                      @click="trackEvent('Jeux de données', 'Télécharger un fichier', 'Bouton : télécharger un fichier')"
-                    >
-                      {{ resource.url }}
-                    </a>
-                    <span class="fr-ml-1v fr-icon-external-link-line fr-icon--sm shrink-0" />
-                  </span>
-                  <span v-else>
-                    <span class="text-datagouv fr-icon-download-line fr-icon--sm fr-mr-1v fr-mt-1v" />
-                    <a
-                      :href="resource.latest"
-                      class="fr-link"
-                      rel="ugc nofollow noopener"
-                      @click="trackEvent('Jeux de données', 'Télécharger un fichier', `Bouton : format ${resource.format}`)"
-                    >
-                      <span>{{ t('Format {format}', { format: resource.format }) }}<span v-if="resourceFilesize"> - {{ filesize(resourceFilesize) }}</span></span>
-                    </a>
-                  </span>
-                  <CopyButton
-                    :label="t('Copier le lien')"
-                    :copied-label="t('Lien copié !')"
-                    :text="resource.latest"
-                    class="relative"
-                  />
-                </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>
-                  <dd
-                    v-for="generatedFormat in generatedFormats"
-                    :key="generatedFormat.format"
-                    class="text-sm pl-0 mb-4 text-gray-medium h-8 flex flex-wrap items-center"
-                  >
-                    <span>
-                      <span class="text-datagouv fr-icon-download-line fr-icon--sm fr-mr-1v fr-mt-1v" />
-                      <a
-                        :href="generatedFormat.url"
-                        class="fr-link"
-                        rel="ugc nofollow noopener"
-                        @click="trackEvent('Jeux de données', 'Télécharger un fichier', `Bouton : format ${generatedFormat.format}`)"
-                      >
-                        <span>{{ t('Format {format}', { format: generatedFormat.format }) }}<span v-if="generatedFormat.size"> - {{ filesize(generatedFormat.size) }}</span></span>
-                      </a>
-                    </span>
-                    <CopyButton
-                      :label="t('Copier le lien')"
-                      :copied-label="t('Lien copié !')"
-                      :text="generatedFormat.url"
-                      class="relative"
-                    />
-                  </dd>
-                </template>
-                <template v-if="wfsFormats.length">
-                  <dt class="font-bold fr-text--sm fr-mb-0">
-                    <div class="flex gap-1 items-center">
-                      {{ t('Formats exportés depuis le service WFS') }}
-                      <span v-if="defaultWfsProjection"> ({{ t('projection {crs}', { crs: defaultWfsProjection }) }})</span>
-                      <Tooltip>
-                        <RiInformationLine
-                          class="flex-none size-4"
-                          :aria-label="t(`Le lien de téléchargement interroge directement le flux WFS distant. Le nombre de features téléchargées peut être limité.`)"
-                          aria-hidden="true"
-                        />
-                        <template #tooltip>
-                          <p class="text-sm font-normal mb-0">
-                            {{ t(`Le lien de téléchargement interroge directement le flux WFS distant.`) }}
-                          </p>
-                          <p class="text-sm font-normal mb-0">
-                            {{ t(`Le nombre de features téléchargées peut être limité.`) }}
-                          </p>
-                        </template>
-                      </Tooltip>
-                    </div>
-                  </dt>
-                  <dd
-                    v-for="wfsFormat in wfsFormats"
-                    :key="wfsFormat.format"
-                    class="text-sm pl-0 mb-4 text-gray-medium h-8 flex flex-wrap items-center"
-                  >
-                    <span>
-                      <span class="text-datagouv fr-icon-download-line fr-icon--sm fr-mr-1v fr-mt-1v" />
-                      <a
-                        :href="wfsFormat.url"
-                        class="fr-link"
-                        rel="ugc nofollow noopener"
-                        @click="trackEvent('Jeux de données', 'Télécharger un fichier', `Bouton : format ${wfsFormat.format}`)"
-                      >
-                        <span>{{ t('Format {format}', { format: wfsFormat.format }) }}</span>
-                      </a>
-                    </span>
-                    <CopyButton
-                      :label="t('Copier le lien')"
-                      :copied-label="t('Lien copié !')"
-                      :text="wfsFormat.url"
-                      class="relative"
-                    />
-                  </dd>
-                </template>
-              </dl>
+              <Downloads
+                :resource="resource"
+                :dataset="dataset"
+              />
             </div>
             <div v-if="tab.key === 'swagger'">
               <div class="fr-mb-4w">
@@ -318,7 +206,7 @@
 
 <script setup lang="ts">
 import { computed, defineAsyncComponent } from 'vue'
-import { RiDownloadLine, RiFileCopyLine, RiFileWarningLine, RiInformationLine, RiSubtractLine } from '@remixicon/vue'
+import { RiDownloadLine, RiFileCopyLine, RiFileWarningLine, RiSubtractLine } from '@remixicon/vue'
 import PreviewUnavailable from '../ResourceAccordion/PreviewUnavailable.vue'
 import { toast } from 'vue-sonner'
 import BrandedButton from '../BrandedButton.vue'
@@ -331,11 +219,12 @@ import TabList from '../Tabs/TabList.vue'
 import Tab from '../Tabs/Tab.vue'
 import TabPanels from '../Tabs/TabPanels.vue'
 import TabPanel from '../Tabs/TabPanel.vue'
-import Tooltip from '../Tooltip.vue'
-import Preview from '../ResourceAccordion/Preview.vue'
+import TabularExplorer from '../TabularExplorer/TabularExplorer.vue'
 import DataStructure from '../ResourceAccordion/DataStructure.vue'
+import Downloads from '../ResourceAccordion/Downloads.vue'
 import Metadata from '../ResourceAccordion/Metadata.vue'
 import SchemaBadge from '../ResourceAccordion/SchemaBadge.vue'
+import ResourceSelector from './ResourceSelector.vue'
 import { filesize, summarize } from '../../functions/helpers'
 import { getResourceFormatIcon, getResourceExternalUrl, getResourceFilesize } from '../../functions/resources'
 import { trackEvent } from '../../functions/matomo'
@@ -343,6 +232,7 @@ import { useComponentsConfig } from '../../config'
 import { useFormatDate } from '../../functions/dates'
 import { useTranslation } from '../../composables/useTranslation'
 import { useResourceCapabilities } from '../../composables/useResourceCapabilities'
+import { provideTabularProfile } from '../../composables/useTabularProfile'
 import type { Resource } from '../../types/resources'
 import type { Dataset, DatasetV2 } from '../../types/datasets'
 
@@ -368,6 +258,11 @@ const Pmtiles = defineAsyncComponent(() =>
 const props = defineProps<{
   dataset: Dataset | DatasetV2
   resource: Resource
+  resources?: Resource[]
+}>()
+
+const emit = defineEmits<{
+  select: [resource: Resource]
 }>()
 
 const { t } = useTranslation()
@@ -381,13 +276,13 @@ const {
   hasOpenAPIPreview,
   ogcService,
   ogcWms,
-  generatedFormats,
-  wfsFormats,
-  defaultWfsProjection,
   isResourceUrl,
   tabsOptions,
 } = useResourceCapabilities(() => props.resource, () => props.dataset)
 
+// Share the tabular profile fetch between TabularExplorer and DataStructure tabs.
+provideTabularProfile(() => props.resource.id)
+
 const resourceFilesize = computed(() => getResourceFilesize(props.resource))
 const resourceExternalUrl = computed(() => getResourceExternalUrl(props.dataset, props.resource))
 
@@ -401,10 +296,6 @@ const downloadButtonTitle = computed(() => {
   return t('Télécharger le fichier en {format}', { format: format.value })
 })
 
-const conversionsLastUpdate = computed(() =>
-  formatRelativeIfRecentDate(props.resource.extras['analysis:parsing:finished_at'] as string | undefined),
-)
-
 const copyResourceUrl = async () => {
   try {
     await navigator.clipboard.writeText(props.resource.url)
diff --git a/datagouv-components/src/components/ResourceExplorer/ResourceSelector.vue b/datagouv-components/src/components/ResourceExplorer/ResourceSelector.vue
new file mode 100644
index 000000000..dfce8e2e1
--- /dev/null
+++ b/datagouv-components/src/components/ResourceExplorer/ResourceSelector.vue
@@ -0,0 +1,67 @@
+<template>
+  <Popover
+    v-slot="{ open, close }"
+    class="relative inline-block"
+  >
+    <PopoverButton
+      class="inline-flex items-center justify-center size-6 rounded text-gray-plain hover:bg-gray-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-new-primary"
+      :aria-label="t('Choisir une autre ressource')"
+    >
+      <RiArrowDownSLine
+        class="size-4"
+        :class="{ 'rotate-180': open }"
+        aria-hidden="true"
+      />
+    </PopoverButton>
+    <PopoverPanel
+      class="absolute left-0 top-full z-50 mt-1 w-80 max-h-96 overflow-auto bg-white border border-gray-default rounded shadow-lg p-1"
+    >
+      <button
+        v-for="r in resources"
+        :key="r.id"
+        type="button"
+        class="flex items-start gap-2 w-full text-left px-2 py-2 rounded text-sm hover:bg-gray-50 focus:outline-none focus-visible:bg-gray-50"
+        :class="{ 'bg-blue-50': r.id === selectedId }"
+        @click="emit('select', r); close()"
+      >
+        <ResourceIcon
+          :resource="r"
+          class="size-4 mt-0.5 shrink-0"
+        />
+        <div class="min-w-0 flex-1">
+          <div
+            class="font-medium truncate"
+            :class="{ 'text-new-primary': r.id === selectedId }"
+          >
+            {{ r.title || t('Fichier sans nom') }}
+          </div>
+          <div
+            v-if="r.format"
+            class="text-xs text-gray-medium uppercase"
+          >
+            {{ r.format }}
+          </div>
+        </div>
+      </button>
+    </PopoverPanel>
+  </Popover>
+</template>
+
+<script setup lang="ts">
+import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
+import { RiArrowDownSLine } from '@remixicon/vue'
+import { useTranslation } from '../../composables/useTranslation'
+import ResourceIcon from '../ResourceAccordion/ResourceIcon.vue'
+import type { Resource } from '../../types/resources'
+
+defineProps<{
+  resources: Resource[]
+  selectedId: string
+}>()
+
+const emit = defineEmits<{
+  select: [resource: Resource]
+}>()
+
+const { t } = useTranslation()
+</script>
diff --git a/datagouv-components/src/components/TabularExplorer/TabularExplorer.vue b/datagouv-components/src/components/TabularExplorer/TabularExplorer.vue
index 93261c585..4ee138b88 100644
--- a/datagouv-components/src/components/TabularExplorer/TabularExplorer.vue
+++ b/datagouv-components/src/components/TabularExplorer/TabularExplorer.vue
@@ -156,9 +156,12 @@
       </div>
 
       <!-- Desktop: scrollable table -->
+      <!-- `-mx-4` lets the table extend edge-to-edge of the parent's px-4 wrapper
+           (used in both ResourceExplorerViewer's TabPanel and pages/explore.vue),
+           while the toolbar and active-filter rows above keep that padding. -->
       <div
         ref="scrollContainer"
-        class="hidden md:block overflow-auto max-h-[70vh]"
+        class="hidden md:block overflow-auto max-h-[70vh] -mx-4"
       >
         <table class="text-sm border-collapse">
           <thead class="sticky top-0 bg-white z-10 shadow-[inset_0_-1px_0_0_#E5E5E5]">
@@ -474,6 +477,7 @@ import {
 import { useFetch } from '../../functions/api'
 import { useComponentsConfig } from '../../config'
 import { useTranslation } from '../../composables/useTranslation'
+import { injectTabularProfile } from '../../composables/useTabularProfile'
 import { buildTypeConfig, hasFilterForColumn as _hasFilterForColumn, isTruthy, isFalsy } from '../../functions/tabular'
 import ClientOnly from '../ClientOnly.vue'
 import SimpleBanner from '../SimpleBanner.vue'
@@ -484,7 +488,7 @@ import TabularCellPopover from './TabularCellPopover.vue'
 import type { CellInfo } from './TabularCellPopover.vue'
 import TabularFilterContent from './TabularFilterContent.vue'
 import TabularFilterPopover from './TabularFilterPopover.vue'
-import type { TabularDataResponse, TabularProfileResponse, TabularRow, ColumnType, SortConfig, ColumnFilters, BadgeStyle } from './types'
+import type { TabularDataResponse, TabularRow, ColumnType, SortConfig, ColumnFilters, BadgeStyle } from './types'
 
 const props = defineProps<{
   resourceId: string
@@ -509,10 +513,6 @@ const dataUrl = computed(() =>
   `${config.tabularApiUrl}/api/resources/${props.resourceId}/data/`,
 )
 
-const profileUrl = computed(() =>
-  `${config.tabularApiUrl}/api/resources/${props.resourceId}/profile/`,
-)
-
 // Sort & filter state
 const sort = ref<SortConfig | null>(null)
 const filters = ref<Record<string, ColumnFilters>>({})
@@ -552,7 +552,10 @@ const dataQuery = computed(() => {
 
 const { data: tableData, error } = await useFetch<TabularDataResponse>(dataUrl, { raw: true, query: dataQuery })
 
-const { data: profileData } = await useFetch<TabularProfileResponse>(profileUrl, { raw: true })
+// Profile is shared with sibling components (e.g. DataStructure) via
+// `provideTabularProfile` in the parent. Falls back to a local fetch
+// when no parent provides it (standalone usage).
+const { data: profileData } = injectTabularProfile(() => props.resourceId)
 
 // Infinite scroll state
 const allRows = ref<TabularRow[]>([])
diff --git a/datagouv-components/src/composables/useTabularProfile.ts b/datagouv-components/src/composables/useTabularProfile.ts
new file mode 100644
index 000000000..28a67c6eb
--- /dev/null
+++ b/datagouv-components/src/composables/useTabularProfile.ts
@@ -0,0 +1,72 @@
+import { computed, inject, provide, ref, toValue, watchEffect, type MaybeRefOrGetter, type Ref } from 'vue'
+import { ofetch } from 'ofetch'
+import { useComponentsConfig } from '../config'
+import type { TabularProfileResponse } from '../components/TabularExplorer/types'
+
+const TABULAR_PROFILE_KEY = Symbol('tabular-profile')
+
+type Status = 'idle' | 'pending' | 'success' | 'error'
+
+export type TabularProfileState = {
+  resourceId: Readonly<Ref<string>>
+  data: Readonly<Ref<TabularProfileResponse | null>>
+  error: Readonly<Ref<unknown | null>>
+  status: Readonly<Ref<Status>>
+  refresh: () => Promise<void>
+}
+
+function createProfileState(resourceId: MaybeRefOrGetter<string>): TabularProfileState {
+  const config = useComponentsConfig()
+  const data = ref<TabularProfileResponse | null>(null)
+  const error = ref<unknown | null>(null)
+  const status = ref<Status>('idle')
+  const ridRef = computed(() => toValue(resourceId))
+
+  async function refresh() {
+    const id = toValue(resourceId)
+    if (!id) return
+    status.value = 'pending'
+    error.value = null
+    try {
+      data.value = await ofetch<TabularProfileResponse>(
+        `${config.tabularApiUrl}/api/resources/${id}/profile/`,
+      )
+      status.value = 'success'
+    }
+    catch (e) {
+      data.value = null
+      error.value = e
+      status.value = 'error'
+    }
+  }
+
+  watchEffect(() => {
+    if (toValue(resourceId)) refresh()
+  })
+
+  return { resourceId: ridRef, data, error, status, refresh }
+}
+
+/**
+ * Parent: fetch the tabular profile once and share it with descendants
+ * (TabularExplorer, DataStructure...) via provide/inject.
+ */
+export function provideTabularProfile(resourceId: MaybeRefOrGetter<string>): TabularProfileState {
+  const state = createProfileState(resourceId)
+  provide(TABULAR_PROFILE_KEY, state)
+  return state
+}
+
+/**
+ * Child: get the tabular profile from an ancestor that called
+ * `provideTabularProfile` for the same resourceId. Falls back to
+ * fetching on its own if no compatible ancestor is found — preserves
+ * standalone usage of TabularExplorer / DataStructure.
+ */
+export function injectTabularProfile(resourceId: MaybeRefOrGetter<string>): TabularProfileState {
+  const injected = inject<TabularProfileState | null>(TABULAR_PROFILE_KEY, null)
+  if (injected && injected.resourceId.value === toValue(resourceId)) {
+    return injected
+  }
+  return createProfileState(resourceId)
+}
diff --git a/datagouv-components/src/main.ts b/datagouv-components/src/main.ts
index 8b4d26bde..832f76067 100644
--- a/datagouv-components/src/main.ts
+++ b/datagouv-components/src/main.ts
@@ -39,6 +39,9 @@ import BrandedButton from './components/BrandedButton.vue'
 import CopyButton from './components/CopyButton.vue'
 import DataserviceCard from './components/DataserviceCard.vue'
 import DatasetCard from './components/DatasetCard.vue'
+import DataStructure from './components/ResourceAccordion/DataStructure.vue'
+import Downloads from './components/ResourceAccordion/Downloads.vue'
+import Metadata from './components/ResourceAccordion/Metadata.vue'
 import DescriptionListTerm from './components/DescriptionListTerm.vue'
 import DescriptionListDetails from './components/DescriptionListDetails.vue'
 import DiscussionMessageCard from './components/DiscussionMessageCard.vue'
@@ -59,6 +62,7 @@ import LoadingBlock from './components/LoadingBlock.vue'
 import MarkdownViewer from './components/MarkdownViewer.vue'
 import OrganizationCard from './components/OrganizationCard.vue'
 import OrganizationHorizontalCard from './components/OrganizationHorizontalCard.vue'
+import ObjectCardOwner from './components/ObjectCardOwner.vue'
 import OrganizationLogo from './components/OrganizationLogo.vue'
 import OrganizationNameWithCertificate from './components/OrganizationNameWithCertificate.vue'
 import OwnerType from './components/OwnerType.vue'
@@ -72,6 +76,7 @@ import PostCard from './components/PostCard.vue'
 import ReadMore from './components/ReadMore.vue'
 import ResourceAccordion from './components/ResourceAccordion/ResourceAccordion.vue'
 import ResourceIcon from './components/ResourceAccordion/ResourceIcon.vue'
+import ResourceSelector from './components/ResourceExplorer/ResourceSelector.vue'
 import ResourceExplorer from './components/ResourceExplorer/ResourceExplorer.vue'
 import ResourceExplorerSidebar from './components/ResourceExplorer/ResourceExplorerSidebar.vue'
 import ResourceExplorerViewer from './components/ResourceExplorer/ResourceExplorerViewer.vue'
@@ -108,6 +113,8 @@ export * from './composables/useMetrics'
 export * from './composables/useReuseType'
 export * from './composables/useTranslation'
 export * from './composables/useHasTabularData'
+export * from './composables/useResourceCapabilities'
+export * from './composables/useTabularProfile'
 
 export * from './functions/activities'
 export * from './functions/datasets'
@@ -275,6 +282,9 @@ export {
   CopyButton,
   DataserviceCard,
   DatasetCard,
+  DataStructure,
+  Downloads,
+  Metadata,
   DatasetInformationSection,
   DatasetTemporalitySection,
   DatasetSpatialSection,
@@ -314,7 +324,9 @@ export {
   ResourceExplorer,
   ResourceExplorerSidebar,
   ResourceExplorerViewer,
+  ObjectCardOwner,
   ResourceIcon,
+  ResourceSelector,
   ReuseCard,
   ReuseDetails,
   ReuseHorizontalCard,
diff --git a/pages/explore.vue b/pages/explore.vue
index c120d2586..9448a725d 100644
--- a/pages/explore.vue
+++ b/pages/explore.vue
@@ -85,24 +85,196 @@
   </div>
 
   <div
-    v-else
-    class="px-4 py-4"
+    v-else-if="currentResource && currentDataset"
+    class="mb-16"
   >
-    <NuxtLink
-      :to="backLink"
-      class="fr-btn fr-btn--tertiary-no-outline fr-btn--sm mb-4"
+    <div class="container">
+      <Breadcrumb>
+        <BreadcrumbItem to="/">
+          {{ $t('Accueil') }}
+        </BreadcrumbItem>
+        <BreadcrumbItem :to="backLink">
+          {{ $t('Explorer') }}
+        </BreadcrumbItem>
+        <BreadcrumbItem>
+          {{ currentResource.title || $t('Fichier sans nom') }}
+        </BreadcrumbItem>
+      </Breadcrumb>
+
+      <header class="flex flex-wrap md:flex-nowrap gap-4 items-start justify-between mb-4">
+        <div class="min-w-0">
+          <Popover
+            v-slot="{ open, close }"
+            class="relative inline-block"
+          >
+            <PopoverButton
+              class="inline-flex items-center gap-1 -mx-1 px-1 py-1 rounded text-left hover:bg-gray-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-new-primary"
+            >
+              <ResourceIcon
+                :resource="currentResource"
+                class="size-4 mr-1 shrink-0"
+              />
+              <span class="text-lg font-bold line-clamp-2">
+                {{ currentResource.title || $t('Fichier sans nom') }}
+              </span>
+              <RiArrowDownSLine
+                class="size-4 shrink-0 text-gray-medium"
+                :class="{ 'rotate-180': open }"
+                aria-hidden="true"
+              />
+            </PopoverButton>
+            <PopoverPanel
+              class="absolute left-0 top-full z-50 mt-2 w-96 max-w-[calc(100vw-2rem)] bg-white border border-gray-default rounded shadow-lg p-3 space-y-2"
+            >
+              <input
+                v-model="dropdownQuery"
+                type="search"
+                class="w-full border border-gray-default rounded px-2.5 py-1.5 text-sm"
+                placeholder="Rechercher dans les ressources…"
+              >
+              <ul
+                v-if="filteredDatasetResources.length > 0"
+                class="list-none p-0 m-0 space-y-0.5 max-h-80 overflow-y-auto"
+              >
+                <li
+                  v-for="r in filteredDatasetResources"
+                  :key="r.id"
+                >
+                  <NuxtLink
+                    v-if="isExplorable(r)"
+                    :to="exploreLink(r.id)"
+                    class="flex items-center gap-1.5 px-2 py-1.5 rounded text-sm hover:bg-gray-100"
+                    :class="{ 'font-bold bg-blue-50': r.id === currentResource.id }"
+                    @click="close()"
+                  >
+                    <ResourceIcon
+                      :resource="r"
+                      class="size-3.5 shrink-0"
+                    />
+                    <span class="truncate">{{ r.title || $t('Fichier sans nom') }}</span>
+                  </NuxtLink>
+                  <div
+                    v-else
+                    class="flex items-center gap-1.5 px-2 py-1.5 rounded text-sm text-gray-medium cursor-not-allowed"
+                    :title="$t('Cette ressource n\'est pas explorable')"
+                  >
+                    <ResourceIcon
+                      :resource="r"
+                      class="size-3.5 shrink-0 opacity-50"
+                    />
+                    <span class="truncate opacity-70">{{ r.title || $t('Fichier sans nom') }}</span>
+                  </div>
+                </li>
+              </ul>
+              <p
+                v-else
+                class="text-sm text-gray-medium italic mb-0 px-2 py-2"
+              >
+                Aucune ressource correspondante
+              </p>
+            </PopoverPanel>
+          </Popover>
+          <div class="text-sm text-gray-medium flex items-center gap-1 mt-1">
+            <ObjectCardOwner
+              :organization="currentDataset.organization"
+              :owner="currentDataset.owner"
+            />
+            <template v-if="currentResource.format">
+              <span>·</span>
+              <span>{{ currentResource.format.toLowerCase() }}</span>
+            </template>
+          </div>
+        </div>
+        <BrandedButton
+          :href="currentResource.latest"
+          :icon="RiDownloadLine"
+          rel="ugc nofollow noopener"
+          download
+          external
+          class="shrink-0"
+        >
+          Télécharger
+        </BrandedButton>
+      </header>
+
+      <TabGroup
+        :default-index="defaultTabIndex"
+        @change="onTabChange"
+      >
+        <TabList class="max-w-full overflow-x-auto">
+          <Tab
+            v-for="tab in displayedTabs"
+            :key="tab.key"
+          >
+            {{ tab.label }}
+          </Tab>
+        </TabList>
+      </TabGroup>
+    </div>
+
+    <!-- Data tab kept mounted (v-show) to avoid TabularExplorer's
+         top-level `await useFetch` getting stuck on quick tab switches. -->
+    <div
+      v-show="activeTabKey === 'data'"
+      class="mt-4 px-4"
     >
-      ← Retour à la recherche
-    </NuxtLink>
-    <TabularExplorer
-      :key="resourceId"
-      :resource-id="resourceId"
-    />
+      <TabularExplorer
+        :key="currentResource.id"
+        :resource-id="currentResource.id"
+      />
+    </div>
+    <div
+      v-show="activeTabKey !== 'data'"
+      class="container mt-4"
+    >
+      <DataStructure
+        v-if="activeTabKey === 'data-structure'"
+        :resource="currentResource"
+      />
+      <MarkdownViewer
+        v-else-if="activeTabKey === 'description'"
+        :content="currentResource.description ?? ''"
+        size="sm"
+      />
+      <Metadata
+        v-else-if="activeTabKey === 'metadata'"
+        :resource="currentResource"
+      />
+      <Downloads
+        v-else-if="activeTabKey === 'downloads'"
+        :resource="currentResource"
+        :dataset="currentDataset"
+      />
+      <OpenApiViewer
+        v-else-if="activeTabKey === 'swagger'"
+        :url="`${tabularApiUrl}/api/resources/${currentResource.id}/swagger/`"
+      />
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { DatasetCard, SearchInput, TabularExplorer, useHasTabularData } from '@datagouv/components-next'
+import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
+import { RiArrowDownSLine, RiDownloadLine } from '@remixicon/vue'
+import {
+  BrandedButton,
+  DatasetCard,
+  DataStructure,
+  Downloads,
+  MarkdownViewer,
+  Metadata,
+  ObjectCardOwner,
+  OpenApiViewer,
+  ResourceIcon,
+  SearchInput,
+  Tab,
+  TabGroup,
+  TabList,
+  TabularExplorer,
+  provideTabularProfile,
+  useHasTabularData,
+  useResourceCapabilities,
+} from '@datagouv/components-next'
 import type { Dataset, DatasetV2, Resource } from '@datagouv/components-next'
 import BreadcrumbItem from '~/components/Breadcrumbs/BreadcrumbItem.vue'
 import type { PaginatedArray } from '~/types/types'
@@ -119,6 +291,7 @@ const { $api } = useNuxtApp()
 const config = useRuntimeConfig()
 
 const featuredResourceIds = config.public.featuredResourceIds
+const tabularApiUrl = config.public.tabularApiUrl
 
 const query = computed({
   get: () => (typeof route.query.q === 'string' ? route.query.q : ''),
@@ -135,9 +308,10 @@ const resourceId = computed(() =>
 )
 
 const backLink = computed(() => {
-  const q = { ...route.query }
-  delete q.resource_id
-  return { query: q }
+  const params = new URLSearchParams()
+  if (typeof route.query.q === 'string' && route.query.q) params.set('q', route.query.q)
+  const qs = params.toString()
+  return qs ? `/explore?${qs}` : '/explore'
 })
 
 const searchParams = computed(() => ({ q: query.value, page_size: 10, format: 'csv' }))
@@ -191,6 +365,81 @@ const { data: featuredEntries } = await useAsyncData(
 )
 
 function exploreLink(id: string) {
-  return { query: { ...route.query, resource_id: id } }
+  return { query: { ...route.query, resource_id: id, tab: undefined } }
+}
+
+// Resource view: fetch the current resource + its parent dataset
+type ResourceWithDataset = { resource: Resource, dataset_id: string }
+
+const { data: resourceData } = await useAsyncData(
+  'explore-current-resource',
+  async () => {
+    if (!resourceId.value) return null
+    try {
+      const r = await $api<ResourceWithDataset>(
+        `/api/2/datasets/resources/${resourceId.value}/`,
+      )
+      const dataset = await $api<Dataset>(`/api/1/datasets/${r.dataset_id}/`)
+      return { resource: r.resource, dataset }
+    }
+    catch {
+      return null
+    }
+  },
+  { watch: [resourceId] },
+)
+
+const currentResource = computed(() => resourceData.value?.resource ?? null)
+const currentDataset = computed(() => resourceData.value?.dataset ?? null)
+
+// Share the tabular profile fetch between TabularExplorer and DataStructure tabs.
+provideTabularProfile(() => currentResource.value?.id ?? '')
+
+const { tabsOptions } = useResourceCapabilities(
+  () => currentResource.value as Resource,
+  () => currentDataset.value as Dataset,
+)
+
+// Carte hors scope per current product decision; everything else from useResourceCapabilities is shown.
+const displayedTabs = computed(() =>
+  currentResource.value ? tabsOptions.value.filter(t => t.key !== 'map') : [],
+)
+
+const defaultTabIndex = computed(() => {
+  const tabKey = typeof route.query.tab === 'string' ? route.query.tab : null
+  if (!tabKey) return 0
+  const idx = displayedTabs.value.findIndex(t => t.key === tabKey)
+  return idx >= 0 ? idx : 0
+})
+
+const activeTabKey = computed(() => {
+  const tabKey = typeof route.query.tab === 'string' ? route.query.tab : null
+  if (tabKey && displayedTabs.value.some(t => t.key === tabKey)) return tabKey
+  return displayedTabs.value[0]?.key ?? 'data'
+})
+
+function onTabChange(index: number) {
+  const tab = displayedTabs.value[index]
+  if (!tab) return
+  const q = { ...route.query }
+  if (tab.key === 'data') delete q.tab
+  else q.tab = tab.key
+  router.replace({ query: q })
+}
+
+// Resource picker dropdown in the title — filters resources of current dataset by title.
+// Non-tabular ones are shown but disabled (only tabular resources can be explored on /explore).
+const dropdownQuery = ref('')
+
+const datasetResources = computed<Resource[]>(() => currentDataset.value?.resources ?? [])
+
+const filteredDatasetResources = computed(() => {
+  const q = dropdownQuery.value.trim().toLowerCase()
+  if (!q) return datasetResources.value
+  return datasetResources.value.filter(r => (r.title ?? '').toLowerCase().includes(q))
+})
+
+function isExplorable(resource: Resource) {
+  return hasTabularData(resource)
 }
 </script>

From 8978a973c1f4feeb546d9ce7da75081de8d30eec Mon Sep 17 00:00:00 2001
From: Thibaud Dauce <git@hadibut.fr>
Date: Tue, 5 May 2026 10:07:20 +0200
Subject: [PATCH 3/9] improve columns layouts

---
 .../TabularExplorer/TabularExplorer.vue       | 370 +++++++++++-------
 pages/explore.vue                             |  17 +-
 2 files changed, 235 insertions(+), 152 deletions(-)

diff --git a/datagouv-components/src/components/TabularExplorer/TabularExplorer.vue b/datagouv-components/src/components/TabularExplorer/TabularExplorer.vue
index 4ee138b88..2cae922df 100644
--- a/datagouv-components/src/components/TabularExplorer/TabularExplorer.vue
+++ b/datagouv-components/src/components/TabularExplorer/TabularExplorer.vue
@@ -1,159 +1,179 @@
 <template>
   <div>
-    <SimpleBanner
-      v-if="error"
-      type="warning"
-      class="mb-4"
+    <div
+      v-if="previewError"
+      class="max-w-3xl mx-auto"
     >
-      {{ t("L'aperçu de ce fichier n'a pas pu être chargé.") }}
-      <pre class="text-xs mt-2">{{ error }}</pre>
-    </SimpleBanner>
-
-    <template v-else-if="tableData">
-      <!-- Toolbar -->
-      <div class="flex items-center py-3 gap-2">
-        <!-- Mobile: filter & sort button -->
-        <BrandedButton
-          class="md:hidden"
-          color="tertiary"
-          size="2xs"
-          :icon="RiFilter2Line"
-          keep-margins-even-without-borders
-          @click="mobileFilterOpen = true"
-        >
-          {{ t('Filtres & tri') }}
-        </BrandedButton>
-
-        <div class="flex-1" />
-
-        <!-- Right: Stats -->
-        <div class="flex items-center gap-4">
-          <!-- Columns (clickable, opens column popover) -->
-          <Popover
-            ref="columnAnchor"
-            v-slot="{ open }"
-            class="relative"
-          >
-            <PopoverButton class="flex items-center gap-1.5 text-xs text-gray-plain rounded px-2 py-1 hover:bg-gray-50 focus:outline-none">
-              <RiLayoutColumnLine
-                class="size-3"
-                aria-hidden="true"
-              />
-              <span class="font-bold hidden md:inline">{{ t('Colonnes') }}</span>
-              <span class="font-mono tabular-nums">{{ visibleColumns.size }}/{{ allColumns.length }}</span>
-              <RiArrowDownSLine
-                class="size-3 opacity-50"
-                aria-hidden="true"
-              />
-            </PopoverButton>
-
-            <ClientOnly>
-              <Teleport to="#tooltips">
-                <PopoverPanel
-                  v-show="open"
-                  ref="columnPanel"
-                  static
-                  class="bg-white border border-gray-default rounded shadow-lg w-72 absolute z-[800]"
-                  :style="columnFloatingStyles"
-                >
-                  <div class="flex items-center justify-between px-3 py-2 border-b border-gray-default">
-                    <span class="text-xs font-medium text-gray-title">
-                      {{ visibleColumns.size }} {{ t('sur') }} {{ allColumns.length }} {{ t('colonnes visibles') }}
-                    </span>
-                    <BrandedButton
-                      v-if="hiddenCount"
-                      color="tertiary"
-                      size="2xs"
-                      @click="showAllColumns"
-                    >
-                      {{ t('Tout afficher') }}
-                    </BrandedButton>
-                  </div>
-                  <div class="max-h-64 overflow-auto p-1">
-                    <label
-                      v-for="col in allColumns"
-                      :key="col"
-                      class="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-gray-50 cursor-pointer text-xs"
-                    >
-                      <input
-                        type="checkbox"
-                        :checked="visibleColumns.has(col)"
-                        class="size-3.5 accent-new-primary"
-                        @change="toggleColumn(col)"
-                      >
-                      <span class="truncate">{{ col }}</span>
-                    </label>
-                  </div>
-                </PopoverPanel>
-              </Teleport>
-            </ClientOnly>
-          </Popover>
-
-          <!-- Rows -->
-          <span class="flex items-center gap-1.5 text-xs text-gray-plain">
-            <RiLayoutRowLine
-              class="size-3 text-mention-grey"
-              aria-hidden="true"
-            />
-            <span class="font-bold hidden md:inline">{{ t('Lignes') }}</span>
-            <span class="font-mono tabular-nums">{{ tableData.meta.total.toLocaleString() }}/{{ totalLines.toLocaleString() }}</span>
-          </span>
-        </div>
-      </div>
-
-      <!-- Active filters -->
-      <div
-        v-if="activeFilters.length > 0"
-        class="bg-gray-some border border-gray-default rounded-xl px-3 py-2.5 mb-3 space-y-2.5"
+      <SimpleBanner
+        type="warning"
+        class="mb-4"
       >
-        <!-- Header -->
-        <div class="flex items-center justify-between">
-          <div class="flex items-center gap-2">
-            <RiFilter2Line
-              class="size-3.5"
-              aria-hidden="true"
-            />
-            <span class="text-xs text-gray-plain">{{ t('Filtres actifs') }}</span>
-            <span class="inline-flex items-center justify-center rounded-full bg-new-primary/10 text-new-primary text-xs tabular-nums min-w-5 h-5 px-1.5">
-              {{ activeFilters.length }}
-            </span>
-          </div>
+        {{ t("L'aperçu de ce fichier n'a pas pu être chargé.") }}
+        <pre class="text-xs mt-2 whitespace-pre-wrap break-words">{{ previewError }}</pre>
+      </SimpleBanner>
+    </div>
+
+    <div
+      v-else-if="previewLoading"
+      class="max-w-3xl mx-auto flex items-center justify-center py-12"
+    >
+      <span class="inline-flex items-center gap-2 text-sm text-gray-medium">
+        <RiLoader4Line
+          class="size-4 animate-spin"
+          aria-hidden="true"
+        />
+        {{ t('Chargement de l\'aperçu…') }}
+      </span>
+    </div>
+
+    <template v-else-if="tableData && profileData">
+      <!-- Toolbar (constrained width — only the table itself goes edge-to-edge) -->
+      <div class="container">
+        <div class="flex items-center py-3 gap-2">
+          <!-- Mobile: filter & sort button -->
           <BrandedButton
+            class="md:hidden"
             color="tertiary"
             size="2xs"
-            :icon="RiCloseLine"
-            @click="clearAllFilters"
+            :icon="RiFilter2Line"
+            keep-margins-even-without-borders
+            @click="mobileFilterOpen = true"
           >
-            {{ t('Tout effacer') }}
+            {{ t('Filtres & tri') }}
           </BrandedButton>
+
+          <div class="flex-1" />
+
+          <!-- Right: Stats -->
+          <div class="flex items-center gap-4">
+            <!-- Columns (clickable, opens column popover) -->
+            <Popover
+              ref="columnAnchor"
+              v-slot="{ open }"
+              class="relative"
+            >
+              <PopoverButton class="flex items-center gap-1.5 text-xs text-gray-plain rounded px-2 py-1 hover:bg-gray-50 focus:outline-none">
+                <RiLayoutColumnLine
+                  class="size-3"
+                  aria-hidden="true"
+                />
+                <span class="font-bold hidden md:inline">{{ t('Colonnes') }}</span>
+                <span class="font-mono tabular-nums">{{ visibleColumns.size }}/{{ allColumns.length }}</span>
+                <RiArrowDownSLine
+                  class="size-3 opacity-50"
+                  aria-hidden="true"
+                />
+              </PopoverButton>
+
+              <ClientOnly>
+                <Teleport to="#tooltips">
+                  <PopoverPanel
+                    v-show="open"
+                    ref="columnPanel"
+                    static
+                    class="bg-white border border-gray-default rounded shadow-lg w-72 absolute z-[800]"
+                    :style="columnFloatingStyles"
+                  >
+                    <div class="flex items-center justify-between px-3 py-2 border-b border-gray-default">
+                      <span class="text-xs font-medium text-gray-title">
+                        {{ visibleColumns.size }} {{ t('sur') }} {{ allColumns.length }} {{ t('colonnes visibles') }}
+                      </span>
+                      <BrandedButton
+                        v-if="hiddenCount"
+                        color="tertiary"
+                        size="2xs"
+                        @click="showAllColumns"
+                      >
+                        {{ t('Tout afficher') }}
+                      </BrandedButton>
+                    </div>
+                    <div class="max-h-64 overflow-auto p-1">
+                      <label
+                        v-for="col in allColumns"
+                        :key="col"
+                        class="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-gray-50 cursor-pointer text-xs"
+                      >
+                        <input
+                          type="checkbox"
+                          :checked="visibleColumns.has(col)"
+                          class="size-3.5 accent-new-primary"
+                          @change="toggleColumn(col)"
+                        >
+                        <span class="truncate">{{ col }}</span>
+                      </label>
+                    </div>
+                  </PopoverPanel>
+                </Teleport>
+              </ClientOnly>
+            </Popover>
+
+            <!-- Rows -->
+            <span class="flex items-center gap-1.5 text-xs text-gray-plain">
+              <RiLayoutRowLine
+                class="size-3 text-mention-grey"
+                aria-hidden="true"
+              />
+              <span class="font-bold hidden md:inline">{{ t('Lignes') }}</span>
+              <span class="font-mono tabular-nums">{{ tableData.meta.total.toLocaleString() }}/{{ totalLines.toLocaleString() }}</span>
+            </span>
+          </div>
         </div>
-        <!-- Chips -->
-        <div class="flex flex-wrap gap-1.5">
-          <span
-            v-for="af in activeFilters"
-            :key="af.column"
-            class="inline-flex items-center gap-1.5 bg-white border border-gray-silver rounded-lg pl-2 pr-1 py-1 text-xs"
-          >
-            <component
-              :is="getTypeConfig(af.column).icon"
-              class="size-3 text-gray-title"
-              aria-hidden="true"
-            />
-            <span class="text-gray-title">{{ af.column }}</span>
-            <span class="text-gray-plain">{{ af.label }}</span>
-            <button
-              class="rounded p-0.5 text-gray-low hover:text-gray-plain hover:bg-gray-100"
-              @click="removeFilter(af.column)"
+
+        <!-- Active filters -->
+        <div
+          v-if="activeFilters.length > 0"
+          class="bg-gray-some border border-gray-default rounded-xl px-3 py-2.5 mb-3 space-y-2.5"
+        >
+          <!-- Header -->
+          <div class="flex items-center justify-between">
+            <div class="flex items-center gap-2">
+              <RiFilter2Line
+                class="size-3.5"
+                aria-hidden="true"
+              />
+              <span class="text-xs text-gray-plain">{{ t('Filtres actifs') }}</span>
+              <span class="inline-flex items-center justify-center rounded-full bg-new-primary/10 text-new-primary text-xs tabular-nums min-w-5 h-5 px-1.5">
+                {{ activeFilters.length }}
+              </span>
+            </div>
+            <BrandedButton
+              color="tertiary"
+              size="2xs"
+              :icon="RiCloseLine"
+              @click="clearAllFilters"
+            >
+              {{ t('Tout effacer') }}
+            </BrandedButton>
+          </div>
+          <!-- Chips -->
+          <div class="flex flex-wrap gap-1.5">
+            <span
+              v-for="af in activeFilters"
+              :key="af.column"
+              class="inline-flex items-center gap-1.5 bg-white border border-gray-silver rounded-lg pl-2 pr-1 py-1 text-xs"
             >
-              <RiCloseLine
-                class="size-3"
+              <component
+                :is="getTypeConfig(af.column).icon"
+                class="size-3 text-gray-title"
                 aria-hidden="true"
               />
-              <span class="sr-only">{{ t('Supprimer ce filtre') }}</span>
-            </button>
-          </span>
+              <span class="text-gray-title">{{ af.column }}</span>
+              <span class="text-gray-plain">{{ af.label }}</span>
+              <button
+                class="rounded p-0.5 text-gray-low hover:text-gray-plain hover:bg-gray-100"
+                @click="removeFilter(af.column)"
+              >
+                <RiCloseLine
+                  class="size-3"
+                  aria-hidden="true"
+                />
+                <span class="sr-only">{{ t('Supprimer ce filtre') }}</span>
+              </button>
+            </span>
+          </div>
         </div>
       </div>
+      <!-- /container (toolbar + active filters) -->
 
       <!-- Desktop: scrollable table -->
       <!-- `-mx-4` lets the table extend edge-to-edge of the parent's px-4 wrapper
@@ -460,7 +480,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onUnmounted, ref, watch, useTemplateRef } from 'vue'
+import { computed, nextTick, onUnmounted, ref, watch, useTemplateRef } from 'vue'
 import { ofetch } from 'ofetch'
 import { flip, shift, autoUpdate, useFloating } from '@floating-ui/vue'
 import { Dialog, DialogPanel, DialogTitle, Popover, PopoverButton, PopoverPanel, TransitionChild, TransitionRoot } from '@headlessui/vue'
@@ -473,6 +493,7 @@ import {
   RiFilter2Line,
   RiCloseLine,
   RiSearchLine,
+  RiLoader4Line,
 } from '@remixicon/vue'
 import { useFetch } from '../../functions/api'
 import { useComponentsConfig } from '../../config'
@@ -555,7 +576,14 @@ const { data: tableData, error } = await useFetch<TabularDataResponse>(dataUrl,
 // Profile is shared with sibling components (e.g. DataStructure) via
 // `provideTabularProfile` in the parent. Falls back to a local fetch
 // when no parent provides it (standalone usage).
-const { data: profileData } = injectTabularProfile(() => props.resourceId)
+const { data: profileData, error: profileError, status: profileStatus } = injectTabularProfile(() => props.resourceId)
+
+// The component renders nothing useful until the profile is available
+// (allColumns is derived from it). Surface a clear loading / error state
+// so we don't end up with an empty table + a spinner running forever.
+const profileLoading = computed(() => !profileData.value && (profileStatus.value === 'idle' || profileStatus.value === 'pending'))
+const previewError = computed(() => error.value || profileError.value)
+const previewLoading = computed(() => !previewError.value && (!tableData.value || profileLoading.value))
 
 // Infinite scroll state
 const allRows = ref<TabularRow[]>([])
@@ -628,23 +656,65 @@ function showAllColumns() {
   visibleColumns.value = new Set(allColumns.value)
 }
 
-// Column resize
+// Column widths
+//
+// Strategy:
+// - On first render (when both data and profile are loaded), we measure the
+//   natural offsetWidth of each <th>, then distribute any leftover container
+//   space proportionally so the table fills the available horizontal area.
+// - We immediately lock all columns to those widths via `columnWidths`, so
+//   pagination, filtering, sorting or infinite-scroll never trigger a layout
+//   shift (the table doesn't re-auto-size based on newly visible content).
+// - Manual resize via the drag handle keeps working unchanged: it always sees
+//   columnWidths populated, so it goes straight into the resize loop.
 const columnWidths = ref<Record<string, number>>({})
 const resizing = ref<{ column: string, startX: number, startWidth: number } | null>(null)
 
-function initColumnWidths() {
-  const ths = scrollContainerRef.value?.querySelectorAll('th')
-  if (!ths) return
-  const widths: Record<string, number> = {}
+function measureAndDistributeColumnWidths() {
+  const container = scrollContainerRef.value
+  if (!container) return
+  const ths = container.querySelectorAll('th')
+  if (!ths || ths.length === 0) return
+
+  const naturalWidths: Record<string, number> = {}
+  let naturalSum = 0
   ths.forEach((th, i) => {
     const col = displayedColumns.value[i]
-    if (col) widths[col] = th.offsetWidth
+    if (!col) return
+    const w = th.offsetWidth
+    naturalWidths[col] = w
+    naturalSum += w
   })
+  if (naturalSum === 0) return
+
+  // Inflate to fill container if columns don't naturally cover it.
+  const containerWidth = container.clientWidth
+  const ratio = naturalSum < containerWidth ? containerWidth / naturalSum : 1
+
+  const widths: Record<string, number> = {}
+  for (const [col, w] of Object.entries(naturalWidths)) {
+    widths[col] = Math.floor(w * ratio)
+  }
   columnWidths.value = widths
 }
 
+// Lock columns once both data and profile are ready (so the <thead> is rendered
+// with content-driven natural widths). Only runs once — subsequent data changes
+// (pagination, filters) keep the locked widths and avoid layout shifts.
+watch(
+  () => [tableData.value !== null, displayedColumns.value.length] as const,
+  async ([dataReady, colCount]) => {
+    if (!dataReady || colCount === 0) return
+    if (Object.keys(columnWidths.value).length > 0) return
+    await nextTick()
+    measureAndDistributeColumnWidths()
+  },
+  { immediate: true },
+)
+
 function startResize(col: string, e: MouseEvent) {
-  if (!Object.keys(columnWidths.value).length) initColumnWidths()
+  // Fallback in case the user grabs the handle before the initial measure ran.
+  if (!Object.keys(columnWidths.value).length) measureAndDistributeColumnWidths()
   resizing.value = { column: col, startX: e.clientX, startWidth: columnWidths.value[col] ?? 100 }
   // Disable smooth scroll during resize
   if (scrollContainerRef.value) scrollContainerRef.value.style.scrollBehavior = 'auto'
diff --git a/pages/explore.vue b/pages/explore.vue
index 9448a725d..9b67e8994 100644
--- a/pages/explore.vue
+++ b/pages/explore.vue
@@ -212,13 +212,17 @@
       </TabGroup>
     </div>
 
-    <!-- Data tab kept mounted (v-show) to avoid TabularExplorer's
-         top-level `await useFetch` getting stuck on quick tab switches. -->
+    <!-- Data tab is lazy-mounted (only when first visited) to avoid
+         TabularExplorer's top-level `await useFetch` blocking the page
+         when landing directly on a different tab. Once mounted, we keep
+         it via `v-show` so quick tab switches don't unmount mid-fetch
+         (which would leave Suspense hanging on a stale promise). -->
     <div
       v-show="activeTabKey === 'data'"
       class="mt-4 px-4"
     >
       <TabularExplorer
+        v-if="hasVisitedDataTab"
         :key="currentResource.id"
         :resource-id="currentResource.id"
       />
@@ -418,6 +422,15 @@ const activeTabKey = computed(() => {
   return displayedTabs.value[0]?.key ?? 'data'
 })
 
+// Lazy-mount TabularExplorer: only mount it the first time the user lands on
+// (or switches to) the Data tab. Once mounted, we keep it via v-show even
+// when other tabs are active, so we don't pay the suspended-fetch cost on
+// quick tab switches.
+const hasVisitedDataTab = ref(false)
+watch(activeTabKey, (key) => {
+  if (key === 'data') hasVisitedDataTab.value = true
+}, { immediate: true })
+
 function onTabChange(index: number) {
   const tab = displayedTabs.value[index]
   if (!tab) return

From fc8ca8e42dada6048e8df5613066486ff7f89a11 Mon Sep 17 00:00:00 2001
From: Thibaud Dauce <git@hadibut.fr>
Date: Tue, 5 May 2026 10:39:17 +0200
Subject: [PATCH 4/9] fix some translations and empty states

---
 .../TabularExplorer/TabularExplorer.vue       | 48 ++++++++--
 pages/explore.vue                             | 96 +++++++++++++------
 2 files changed, 105 insertions(+), 39 deletions(-)

diff --git a/datagouv-components/src/components/TabularExplorer/TabularExplorer.vue b/datagouv-components/src/components/TabularExplorer/TabularExplorer.vue
index 2cae922df..faaf0bbd4 100644
--- a/datagouv-components/src/components/TabularExplorer/TabularExplorer.vue
+++ b/datagouv-components/src/components/TabularExplorer/TabularExplorer.vue
@@ -15,15 +15,46 @@
 
     <div
       v-else-if="previewLoading"
-      class="max-w-3xl mx-auto flex items-center justify-center py-12"
+      class="animate-pulse-placeholder"
+      :aria-label="t('Chargement de l\'aperçu…')"
+      role="status"
     >
-      <span class="inline-flex items-center gap-2 text-sm text-gray-medium">
-        <RiLoader4Line
-          class="size-4 animate-spin"
-          aria-hidden="true"
-        />
-        {{ t('Chargement de l\'aperçu…') }}
-      </span>
+      <div class="container">
+        <div class="flex items-center justify-end gap-4 py-3">
+          <div class="h-4 w-20 bg-gray-200" />
+          <div class="h-4 w-20 bg-gray-200" />
+        </div>
+      </div>
+      <div class="overflow-hidden">
+        <table class="w-full text-sm border-collapse">
+          <thead class="shadow-[inset_0_-1px_0_0_#E5E5E5]">
+            <tr>
+              <th
+                v-for="i in 6"
+                :key="i"
+                class="px-3 py-2 text-left"
+              >
+                <div class="h-4 w-24 bg-gray-200" />
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="row in 8"
+              :key="row"
+              class="border-b border-gray-100"
+            >
+              <td
+                v-for="col in 6"
+                :key="col"
+                class="px-3 py-2.5"
+              >
+                <div class="h-3 bg-gray-200" />
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
 
     <template v-else-if="tableData && profileData">
@@ -493,7 +524,6 @@ import {
   RiFilter2Line,
   RiCloseLine,
   RiSearchLine,
-  RiLoader4Line,
 } from '@remixicon/vue'
 import { useFetch } from '../../functions/api'
 import { useComponentsConfig } from '../../config'
diff --git a/pages/explore.vue b/pages/explore.vue
index 9b67e8994..2e9196101 100644
--- a/pages/explore.vue
+++ b/pages/explore.vue
@@ -13,17 +13,22 @@
     </Breadcrumb>
 
     <h1 class="text-gray-title font-extrabold text-2xl mb-2">
-      Explorer les données tabulaires
+      {{ $t('Explorer les données tabulaires') }}
     </h1>
-    <p class="text-gray-medium mb-6">
-      À ce stade, seuls les fichiers tabulaires de moins de
-      <strong>100 Mo</strong> sont disponibles.
-    </p>
+    <TranslationT
+      keypath="À ce stade, seuls les fichiers tabulaires de moins de {size} sont disponibles."
+      tag="p"
+      class="text-gray-medium mb-6"
+    >
+      <template #size>
+        <strong>{{ $t('100 Mo') }}</strong>
+      </template>
+    </TranslationT>
 
     <form @submit.prevent="() => execute()">
       <SearchInput
         v-model="query"
-        placeholder="Rechercher un fichier (exemple : élections)…"
+        :placeholder="$t('Rechercher un fichier (exemple : élections)…')"
       />
     </form>
 
@@ -31,7 +36,7 @@
       v-show="status === 'pending'"
       class="mt-4 text-sm text-gray-medium"
     >
-      Chargement…
+      {{ $t('Chargement…') }}
     </p>
 
     <div
@@ -39,7 +44,7 @@
       class="mt-6 space-y-3"
     >
       <p class="text-sm text-gray-medium">
-        {{ results!.total }} résultat{{ results!.total > 1 ? 's' : '' }}
+        {{ $t('{n} résultat | {n} résultats', results!.total) }}
       </p>
       <DatasetCard
         v-for="entry in flatResults"
@@ -47,29 +52,50 @@
         :dataset="entry.dataset"
         :dataset-url="exploreLink(entry.resource.id)"
       >
-        <p class="text-sm text-gray-700 mb-0">
-          Fichier : <strong>{{ entry.resource.title || 'Sans titre' }}</strong>
-        </p>
+        <TranslationT
+          keypath="Fichier : {file}"
+          tag="p"
+          class="text-sm text-gray-700 mb-0"
+        >
+          <template #file>
+            <strong>{{ entry.resource.title || $t('Sans titre') }}</strong>
+          </template>
+        </TranslationT>
       </DatasetCard>
     </div>
 
-    <p
+    <div
       v-else-if="results && status === 'success' && query"
-      class="mt-4 text-sm text-gray-medium italic"
+      class="mt-8 flex flex-col items-center text-center py-8"
     >
-      Aucun résultat
-    </p>
+      <img
+        src="/illustrations/magnifying_glass.svg"
+        class="h-20 mb-4"
+        alt=""
+      >
+      <p class="font-bold mb-2">
+        {{ $t('Pas de résultats pour « {q} »', { q: query }) }}
+      </p>
+      <p class="text-sm text-gray-medium mb-4">
+        {{ $t('Essayez avec d\'autres mots-clés ou parcourez la sélection ci-dessous.') }}
+      </p>
+      <BrandedButton
+        color="secondary"
+        @click="query = ''"
+      >
+        {{ $t('Réinitialiser la recherche') }}
+      </BrandedButton>
+    </div>
 
     <div
       v-if="featuredEntries && featuredEntries.length > 0"
       class="mt-12 space-y-3"
     >
       <h2 class="text-gray-title font-extrabold text-xl mb-2">
-        Quelques exemples
+        {{ $t('Quelques exemples') }}
       </h2>
       <p class="text-gray-medium">
-        Si vous ne savez pas par quoi commencer à explorer, nous vous
-        proposons ci-dessous une sélection de quelques jeux de données.
+        {{ $t('Si vous ne savez pas par quoi commencer à explorer, nous vous proposons ci-dessous une sélection de quelques jeux de données.') }}
       </p>
       <DatasetCard
         v-for="entry in featuredEntries"
@@ -77,9 +103,15 @@
         :dataset="entry.dataset"
         :dataset-url="exploreLink(entry.resource.id)"
       >
-        <p class="text-sm text-gray-700 mb-0">
-          Fichier : <strong>{{ entry.resource.title || 'Sans titre' }}</strong>
-        </p>
+        <TranslationT
+          keypath="Fichier : {file}"
+          tag="p"
+          class="text-sm text-gray-700 mb-0"
+        >
+          <template #file>
+            <strong>{{ entry.resource.title || $t('Sans titre') }}</strong>
+          </template>
+        </TranslationT>
       </DatasetCard>
     </div>
   </div>
@@ -130,7 +162,7 @@
                 v-model="dropdownQuery"
                 type="search"
                 class="w-full border border-gray-default rounded px-2.5 py-1.5 text-sm"
-                placeholder="Rechercher dans les ressources…"
+                :placeholder="$t('Rechercher dans les ressources…')"
               >
               <ul
                 v-if="filteredDatasetResources.length > 0"
@@ -170,7 +202,7 @@
                 v-else
                 class="text-sm text-gray-medium italic mb-0 px-2 py-2"
               >
-                Aucune ressource correspondante
+                {{ $t('Aucune ressource correspondante') }}
               </p>
             </PopoverPanel>
           </Popover>
@@ -193,7 +225,7 @@
           external
           class="shrink-0"
         >
-          Télécharger
+          {{ $t('Télécharger') }}
         </BrandedButton>
       </header>
 
@@ -275,17 +307,21 @@ import {
   TabGroup,
   TabList,
   TabularExplorer,
+  TranslationT,
   provideTabularProfile,
   useHasTabularData,
   useResourceCapabilities,
+  useTranslation,
 } from '@datagouv/components-next'
 import type { Dataset, DatasetV2, Resource } from '@datagouv/components-next'
 import BreadcrumbItem from '~/components/Breadcrumbs/BreadcrumbItem.vue'
 import type { PaginatedArray } from '~/types/types'
 
+const { t } = useTranslation()
+
 useSeoMeta({
-  title: 'Explorer les données tabulaires',
-  description: 'Explorer facilement les fichiers tabulaires (CSV, XLSX) référencés sur data.gouv.fr.',
+  title: () => t('Explorer les données tabulaires'),
+  description: () => t('Explorer facilement les fichiers tabulaires (CSV, XLSX) référencés sur data.gouv.fr.'),
   robots: 'noindex',
 })
 
@@ -404,21 +440,21 @@ const { tabsOptions } = useResourceCapabilities(
   () => currentDataset.value as Dataset,
 )
 
-// Carte hors scope per current product decision; everything else from useResourceCapabilities is shown.
+// Map tab is out of scope per current product decision; everything else from useResourceCapabilities is shown.
 const displayedTabs = computed(() =>
-  currentResource.value ? tabsOptions.value.filter(t => t.key !== 'map') : [],
+  currentResource.value ? tabsOptions.value.filter(tab => tab.key !== 'map') : [],
 )
 
 const defaultTabIndex = computed(() => {
   const tabKey = typeof route.query.tab === 'string' ? route.query.tab : null
   if (!tabKey) return 0
-  const idx = displayedTabs.value.findIndex(t => t.key === tabKey)
+  const idx = displayedTabs.value.findIndex(tab => tab.key === tabKey)
   return idx >= 0 ? idx : 0
 })
 
 const activeTabKey = computed(() => {
   const tabKey = typeof route.query.tab === 'string' ? route.query.tab : null
-  if (tabKey && displayedTabs.value.some(t => t.key === tabKey)) return tabKey
+  if (tabKey && displayedTabs.value.some(tab => tab.key === tabKey)) return tabKey
   return displayedTabs.value[0]?.key ?? 'data'
 })
 

From 7319ce7d7353d49518fc717c8d46cea5701c75cf Mon Sep 17 00:00:00 2001
From: Thibaud Dauce <git@hadibut.fr>
Date: Tue, 5 May 2026 10:52:23 +0200
Subject: [PATCH 5/9] remove duplications

---
 .../ResourceAccordion/ResourceAccordion.vue   | 107 +----------------
 .../ResourceExplorer/ResourceSelector.vue     | 112 ++++++++++++------
 pages/explore.vue                             | 111 +++++------------
 3 files changed, 113 insertions(+), 217 deletions(-)

diff --git a/datagouv-components/src/components/ResourceAccordion/ResourceAccordion.vue b/datagouv-components/src/components/ResourceAccordion/ResourceAccordion.vue
index 42c00ea19..468fb32f4 100644
--- a/datagouv-components/src/components/ResourceAccordion/ResourceAccordion.vue
+++ b/datagouv-components/src/components/ResourceAccordion/ResourceAccordion.vue
@@ -265,88 +265,10 @@
             <div
               v-if="tab.key === 'downloads'"
             >
-              <dl class="fr-pl-0">
-                <dt
-                  v-if="resource.format === 'url'"
-                  class="font-bold fr-text--sm fr-mb-0"
-                >
-                  {{ t("URL d'origine") }}
-                </dt>
-                <dt
-                  v-else
-                  class="font-bold fr-text--sm fr-mb-0"
-                >
-                  {{ t('Format original') }}
-                </dt>
-                <dd class="text-sm pl-0 mb-4 text-gray-medium h-8 flex flex-wrap items-center">
-                  <span v-if="resource.format === 'url'">
-                    <a
-                      :href="resource.latest"
-                      class="fr-link no-icon-after"
-                      rel="ugc nofollow noopener"
-                      target="_blank"
-                      @click="trackEvent('Jeux de données', 'Télécharger un fichier', 'Bouton : télécharger un fichier')"
-                    >
-                      <component
-                        :is="config.textClamp"
-                        v-if="config && config.textClamp"
-                        :auto-resize="true"
-                        :max-lines="1"
-                        :text="resource.url"
-                      >
-                        <template #after>
-                          <span class="fr-ml-1v fr-icon-external-link-line fr-icon--sm" />
-                        </template>
-                      </component>
-                    </a>
-                  </span>
-                  <span v-else>
-                    <span class="text-datagouv fr-icon-download-line fr-icon--sm fr-mr-1v fr-mt-1v" />
-                    <a
-                      :href="resource.latest"
-                      class="fr-link"
-                      rel="ugc nofollow noopener"
-                      @click="trackEvent('Jeux de données', 'Télécharger un fichier', `Bouton : format ${resource.format}`)"
-                    >
-                      <span>{{ t('Format {format}', { format: resource.format }) }}<span v-if="resourceFilesize"> - {{ filesize(resourceFilesize) }}</span></span>
-                    </a>
-                  </span>
-                  <CopyButton
-                    :label="t('Copier le lien')"
-                    :copied-label="t('Lien copié !')"
-                    :text="resource.latest"
-                    class="relative"
-                  />
-                </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>
-                  <dd
-                    v-for="generatedFormat in generatedFormats"
-                    :key="generatedFormat.format"
-                    class="text-sm pl-0 mb-4 text-gray-medium h-8 flex flex-wrap items-center"
-                  >
-                    <span>
-                      <span class="text-datagouv fr-icon-download-line fr-icon--sm fr-mr-1v fr-mt-1v" />
-                      <a
-                        :href="generatedFormat.url"
-                        class="fr-link"
-                        rel="ugc nofollow noopener"
-                        @click="trackEvent('Jeux de données', 'Télécharger un fichier', `Bouton : format ${generatedFormat.format}`)"
-                      >
-                        <span>{{ t('Format {format}', { format: generatedFormat.format }) }}<span v-if="generatedFormat.size"> - {{ filesize(generatedFormat.size) }}</span></span>
-                      </a>
-                    </span>
-                    <CopyButton
-                      :label="t('Copier le lien')"
-                      :copied-label="t('Lien copié !')"
-                      :text="generatedFormat.url"
-                      class="relative"
-                    />
-                  </dd>
-                </template>
-              </dl>
+              <Downloads
+                :resource="resource"
+                :dataset="dataset"
+              />
             </div>
             <div
               v-if="tab.key === 'swagger'"
@@ -396,11 +318,11 @@ import SchemaBadge from './SchemaBadge.vue'
 import ResourceIcon from './ResourceIcon.vue'
 import EditButton from './EditButton.vue'
 import DataStructure from './DataStructure.vue'
+import Downloads from './Downloads.vue'
 import Preview from './Preview.vue'
 import { isOrganizationCertified } from '../../functions/organizations'
 import OpenApiViewer from '../OpenApiViewer/OpenApiViewer.vue'
 
-const GENERATED_FORMATS = ['parquet', 'pmtiles', 'geojson']
 const URL_FORMATS = ['url', 'doi', 'www:link', ' www:link-1.0-http--link', 'www:link-1.0-http--partners', 'www:link-1.0-http--related', 'www:link-1.0-http--samples']
 
 const props = withDefaults(defineProps<{
@@ -460,24 +382,6 @@ const ogcService = computed(() => detectOgcService(props.resource))
 
 const ogcWms = computed(() => ogcService.value === 'wms')
 
-const generatedFormats = computed(() => {
-  const formats = GENERATED_FORMATS
-    .filter(format => `analysis:parsing:${format}_url` in props.resource.extras)
-    .map(format => ({
-      url: props.resource.extras[`analysis:parsing:${format}_url`] as string,
-      size: props.resource.extras[`analysis:parsing:${format}_size`] as number | undefined,
-      format: format,
-    }))
-  if ('analysis:parsing:parsing_table' in props.resource.extras) {
-    formats.push({
-      url: `${config.tabularApiUrl}/api/resources/${props.resource.id}/data/json/`,
-      size: undefined,
-      format: 'json',
-    })
-  }
-  return formats
-})
-
 const open = ref(props.expandedOnMount)
 const toggle = () => {
   open.value = !open.value
@@ -540,7 +444,6 @@ const communityResource = computed<CommunityResource | null>(() => {
 const owner = computed(() => communityResource.value ? getOwnerName(communityResource.value) : null)
 
 const lastUpdate = props.resource.last_modified
-const conversionsLastUpdate = computed(() => formatRelativeIfRecentDate(props.resource.extras['analysis:parsing:finished_at'] as string | undefined))
 const availabilityChecked = props.resource.extras && 'check:available' in props.resource.extras
 const resourceFilesize = computed(() => getResourceFilesize(props.resource))
 
diff --git a/datagouv-components/src/components/ResourceExplorer/ResourceSelector.vue b/datagouv-components/src/components/ResourceExplorer/ResourceSelector.vue
index dfce8e2e1..bba7c66f0 100644
--- a/datagouv-components/src/components/ResourceExplorer/ResourceSelector.vue
+++ b/datagouv-components/src/components/ResourceExplorer/ResourceSelector.vue
@@ -3,60 +3,97 @@
     v-slot="{ open, close }"
     class="relative inline-block"
   >
-    <PopoverButton
-      class="inline-flex items-center justify-center size-6 rounded text-gray-plain hover:bg-gray-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-new-primary"
-      :aria-label="t('Choisir une autre ressource')"
+    <slot
+      name="trigger"
+      :open="open"
     >
-      <RiArrowDownSLine
-        class="size-4"
-        :class="{ 'rotate-180': open }"
-        aria-hidden="true"
-      />
-    </PopoverButton>
+      <PopoverButton
+        class="inline-flex items-center justify-center size-6 rounded text-gray-plain hover:bg-gray-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-new-primary"
+        :aria-label="t('Choisir une autre ressource')"
+      >
+        <RiArrowDownSLine
+          class="size-4"
+          :class="{ 'rotate-180': open }"
+          aria-hidden="true"
+        />
+      </PopoverButton>
+    </slot>
     <PopoverPanel
-      class="absolute left-0 top-full z-50 mt-1 w-80 max-h-96 overflow-auto bg-white border border-gray-default rounded shadow-lg p-1"
+      :class="searchable
+        ? 'absolute left-0 top-full z-50 mt-2 w-96 max-w-[calc(100vw-2rem)] bg-white border border-gray-default rounded shadow-lg p-3 space-y-2'
+        : 'absolute left-0 top-full z-50 mt-1 w-80 max-h-96 overflow-auto bg-white border border-gray-default rounded shadow-lg p-1'"
     >
-      <button
-        v-for="r in resources"
-        :key="r.id"
-        type="button"
-        class="flex items-start gap-2 w-full text-left px-2 py-2 rounded text-sm hover:bg-gray-50 focus:outline-none focus-visible:bg-gray-50"
-        :class="{ 'bg-blue-50': r.id === selectedId }"
-        @click="emit('select', r); close()"
+      <input
+        v-if="searchable"
+        v-model="searchQuery"
+        type="search"
+        class="w-full border border-gray-default rounded px-2.5 py-1.5 text-sm"
+        :placeholder="t('Rechercher dans les ressources…')"
       >
-        <ResourceIcon
-          :resource="r"
-          class="size-4 mt-0.5 shrink-0"
-        />
-        <div class="min-w-0 flex-1">
-          <div
-            class="font-medium truncate"
-            :class="{ 'text-new-primary': r.id === selectedId }"
+      <ul
+        v-if="filteredResources.length > 0"
+        class="list-none p-0 m-0 space-y-0.5 max-h-80 overflow-y-auto"
+      >
+        <li
+          v-for="r in filteredResources"
+          :key="r.id"
+        >
+          <button
+            v-if="!isDisabled?.(r)"
+            type="button"
+            class="flex items-center gap-1.5 w-full text-left px-2 py-1.5 rounded text-sm hover:bg-gray-100 focus:outline-none focus-visible:bg-gray-100"
+            :class="{ 'font-bold bg-blue-50 text-new-primary': r.id === selectedId }"
+            @click="emit('select', r); close()"
           >
-            {{ r.title || t('Fichier sans nom') }}
-          </div>
+            <ResourceIcon
+              :resource="r"
+              class="size-3.5 shrink-0"
+            />
+            <span class="truncate">{{ r.title || t('Fichier sans nom') }}</span>
+            <span
+              v-if="r.format"
+              class="ml-auto text-xs text-gray-medium uppercase shrink-0"
+            >
+              {{ r.format }}
+            </span>
+          </button>
           <div
-            v-if="r.format"
-            class="text-xs text-gray-medium uppercase"
+            v-else
+            class="flex items-center gap-1.5 px-2 py-1.5 rounded text-sm text-gray-medium cursor-not-allowed"
+            :title="disabledTitle"
           >
-            {{ r.format }}
+            <ResourceIcon
+              :resource="r"
+              class="size-3.5 shrink-0 opacity-50"
+            />
+            <span class="truncate opacity-70">{{ r.title || t('Fichier sans nom') }}</span>
           </div>
-        </div>
-      </button>
+        </li>
+      </ul>
+      <p
+        v-else
+        class="text-sm text-gray-medium italic mb-0 px-2 py-2"
+      >
+        {{ t('Aucune ressource correspondante') }}
+      </p>
     </PopoverPanel>
   </Popover>
 </template>
 
 <script setup lang="ts">
+import { computed, ref } from 'vue'
 import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
 import { RiArrowDownSLine } from '@remixicon/vue'
 import { useTranslation } from '../../composables/useTranslation'
 import ResourceIcon from '../ResourceAccordion/ResourceIcon.vue'
 import type { Resource } from '../../types/resources'
 
-defineProps<{
+const props = defineProps<{
   resources: Resource[]
   selectedId: string
+  searchable?: boolean
+  isDisabled?: (resource: Resource) => boolean
+  disabledTitle?: string
 }>()
 
 const emit = defineEmits<{
@@ -64,4 +101,13 @@ const emit = defineEmits<{
 }>()
 
 const { t } = useTranslation()
+
+const searchQuery = ref('')
+
+const filteredResources = computed(() => {
+  if (!props.searchable) return props.resources
+  const q = searchQuery.value.trim().toLowerCase()
+  if (!q) return props.resources
+  return props.resources.filter(r => (r.title ?? '').toLowerCase().includes(q))
+})
 </script>
diff --git a/pages/explore.vue b/pages/explore.vue
index 2e9196101..46301a3f6 100644
--- a/pages/explore.vue
+++ b/pages/explore.vue
@@ -135,77 +135,33 @@
 
       <header class="flex flex-wrap md:flex-nowrap gap-4 items-start justify-between mb-4">
         <div class="min-w-0">
-          <Popover
-            v-slot="{ open, close }"
-            class="relative inline-block"
+          <ResourceSelector
+            :resources="datasetResources"
+            :selected-id="currentResource.id"
+            searchable
+            :is-disabled="(r) => !hasTabularData(r)"
+            :disabled-title="$t('Cette ressource n\'est pas explorable')"
+            @select="onResourceSelect"
           >
-            <PopoverButton
-              class="inline-flex items-center gap-1 -mx-1 px-1 py-1 rounded text-left hover:bg-gray-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-new-primary"
-            >
-              <ResourceIcon
-                :resource="currentResource"
-                class="size-4 mr-1 shrink-0"
-              />
-              <span class="text-lg font-bold line-clamp-2">
-                {{ currentResource.title || $t('Fichier sans nom') }}
-              </span>
-              <RiArrowDownSLine
-                class="size-4 shrink-0 text-gray-medium"
-                :class="{ 'rotate-180': open }"
-                aria-hidden="true"
-              />
-            </PopoverButton>
-            <PopoverPanel
-              class="absolute left-0 top-full z-50 mt-2 w-96 max-w-[calc(100vw-2rem)] bg-white border border-gray-default rounded shadow-lg p-3 space-y-2"
-            >
-              <input
-                v-model="dropdownQuery"
-                type="search"
-                class="w-full border border-gray-default rounded px-2.5 py-1.5 text-sm"
-                :placeholder="$t('Rechercher dans les ressources…')"
+            <template #trigger="{ open }">
+              <PopoverButton
+                class="inline-flex items-center gap-1 -mx-1 px-1 py-1 rounded text-left hover:bg-gray-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-new-primary"
               >
-              <ul
-                v-if="filteredDatasetResources.length > 0"
-                class="list-none p-0 m-0 space-y-0.5 max-h-80 overflow-y-auto"
-              >
-                <li
-                  v-for="r in filteredDatasetResources"
-                  :key="r.id"
-                >
-                  <NuxtLink
-                    v-if="isExplorable(r)"
-                    :to="exploreLink(r.id)"
-                    class="flex items-center gap-1.5 px-2 py-1.5 rounded text-sm hover:bg-gray-100"
-                    :class="{ 'font-bold bg-blue-50': r.id === currentResource.id }"
-                    @click="close()"
-                  >
-                    <ResourceIcon
-                      :resource="r"
-                      class="size-3.5 shrink-0"
-                    />
-                    <span class="truncate">{{ r.title || $t('Fichier sans nom') }}</span>
-                  </NuxtLink>
-                  <div
-                    v-else
-                    class="flex items-center gap-1.5 px-2 py-1.5 rounded text-sm text-gray-medium cursor-not-allowed"
-                    :title="$t('Cette ressource n\'est pas explorable')"
-                  >
-                    <ResourceIcon
-                      :resource="r"
-                      class="size-3.5 shrink-0 opacity-50"
-                    />
-                    <span class="truncate opacity-70">{{ r.title || $t('Fichier sans nom') }}</span>
-                  </div>
-                </li>
-              </ul>
-              <p
-                v-else
-                class="text-sm text-gray-medium italic mb-0 px-2 py-2"
-              >
-                {{ $t('Aucune ressource correspondante') }}
-              </p>
-            </PopoverPanel>
-          </Popover>
+                <ResourceIcon
+                  :resource="currentResource"
+                  class="size-4 mr-1 shrink-0"
+                />
+                <span class="text-lg font-bold line-clamp-2">
+                  {{ currentResource.title || $t('Fichier sans nom') }}
+                </span>
+                <RiArrowDownSLine
+                  class="size-4 shrink-0 text-gray-medium"
+                  :class="{ 'rotate-180': open }"
+                  aria-hidden="true"
+                />
+              </PopoverButton>
+            </template>
+          </ResourceSelector>
           <div class="text-sm text-gray-medium flex items-center gap-1 mt-1">
             <ObjectCardOwner
               :organization="currentDataset.organization"
@@ -290,7 +246,7 @@
 </template>
 
 <script setup lang="ts">
-import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
+import { PopoverButton } from '@headlessui/vue'
 import { RiArrowDownSLine, RiDownloadLine } from '@remixicon/vue'
 import {
   BrandedButton,
@@ -302,6 +258,7 @@ import {
   ObjectCardOwner,
   OpenApiViewer,
   ResourceIcon,
+  ResourceSelector,
   SearchInput,
   Tab,
   TabGroup,
@@ -476,19 +433,9 @@ function onTabChange(index: number) {
   router.replace({ query: q })
 }
 
-// Resource picker dropdown in the title — filters resources of current dataset by title.
-// Non-tabular ones are shown but disabled (only tabular resources can be explored on /explore).
-const dropdownQuery = ref('')
-
 const datasetResources = computed<Resource[]>(() => currentDataset.value?.resources ?? [])
 
-const filteredDatasetResources = computed(() => {
-  const q = dropdownQuery.value.trim().toLowerCase()
-  if (!q) return datasetResources.value
-  return datasetResources.value.filter(r => (r.title ?? '').toLowerCase().includes(q))
-})
-
-function isExplorable(resource: Resource) {
-  return hasTabularData(resource)
+function onResourceSelect(resource: Resource) {
+  router.push(exploreLink(resource.id))
 }
 </script>

From a6f7171a95932ccbb5f80d3edacf68cf1b46561b Mon Sep 17 00:00:00 2001
From: Thibaud Dauce <git@hadibut.fr>
Date: Wed, 6 May 2026 08:33:28 +0200
Subject: [PATCH 6/9] replace watch by useFetch

---
 .../ResourceAccordion/DataStructure.vue       |  2 +-
 .../ResourceExplorerViewer.vue                |  2 +-
 .../TabularExplorer/TabularExplorer.vue       |  2 +-
 .../src/composables/useTabularProfile.ts      | 49 ++++++-------------
 pages/explore.vue                             |  2 +-
 5 files changed, 20 insertions(+), 37 deletions(-)

diff --git a/datagouv-components/src/components/ResourceAccordion/DataStructure.vue b/datagouv-components/src/components/ResourceAccordion/DataStructure.vue
index 51d617224..967a3a4c8 100644
--- a/datagouv-components/src/components/ResourceAccordion/DataStructure.vue
+++ b/datagouv-components/src/components/ResourceAccordion/DataStructure.vue
@@ -61,7 +61,7 @@ const { t } = useTranslation()
 // Profile is shared with sibling components (e.g. TabularExplorer) via
 // `provideTabularProfile` in the parent. Falls back to a local fetch
 // when no parent provides it (standalone usage).
-const { data: profileData, status } = injectTabularProfile(() => props.resource.id)
+const { data: profileData, status } = await injectTabularProfile(() => props.resource.id)
 
 const loading = computed(() => status.value === 'idle' || status.value === 'pending')
 const hasError = computed(() => status.value === 'error')
diff --git a/datagouv-components/src/components/ResourceExplorer/ResourceExplorerViewer.vue b/datagouv-components/src/components/ResourceExplorer/ResourceExplorerViewer.vue
index 165c07b27..cd29bbdf8 100644
--- a/datagouv-components/src/components/ResourceExplorer/ResourceExplorerViewer.vue
+++ b/datagouv-components/src/components/ResourceExplorer/ResourceExplorerViewer.vue
@@ -281,7 +281,7 @@ const {
 } = useResourceCapabilities(() => props.resource, () => props.dataset)
 
 // Share the tabular profile fetch between TabularExplorer and DataStructure tabs.
-provideTabularProfile(() => props.resource.id)
+await provideTabularProfile(() => props.resource.id)
 
 const resourceFilesize = computed(() => getResourceFilesize(props.resource))
 const resourceExternalUrl = computed(() => getResourceExternalUrl(props.dataset, props.resource))
diff --git a/datagouv-components/src/components/TabularExplorer/TabularExplorer.vue b/datagouv-components/src/components/TabularExplorer/TabularExplorer.vue
index faaf0bbd4..105d31766 100644
--- a/datagouv-components/src/components/TabularExplorer/TabularExplorer.vue
+++ b/datagouv-components/src/components/TabularExplorer/TabularExplorer.vue
@@ -606,7 +606,7 @@ const { data: tableData, error } = await useFetch<TabularDataResponse>(dataUrl,
 // Profile is shared with sibling components (e.g. DataStructure) via
 // `provideTabularProfile` in the parent. Falls back to a local fetch
 // when no parent provides it (standalone usage).
-const { data: profileData, error: profileError, status: profileStatus } = injectTabularProfile(() => props.resourceId)
+const { data: profileData, error: profileError, status: profileStatus } = await injectTabularProfile(() => props.resourceId)
 
 // The component renders nothing useful until the profile is available
 // (allColumns is derived from it). Surface a clear loading / error state
diff --git a/datagouv-components/src/composables/useTabularProfile.ts b/datagouv-components/src/composables/useTabularProfile.ts
index 28a67c6eb..4788e44cf 100644
--- a/datagouv-components/src/composables/useTabularProfile.ts
+++ b/datagouv-components/src/composables/useTabularProfile.ts
@@ -1,48 +1,31 @@
-import { computed, inject, provide, ref, toValue, watchEffect, type MaybeRefOrGetter, type Ref } from 'vue'
-import { ofetch } from 'ofetch'
+import { computed, inject, provide, toValue, type MaybeRefOrGetter, type Ref } from 'vue'
 import { useComponentsConfig } from '../config'
+import { useFetch } from '../functions/api'
+import type { AsyncDataRequestStatus } from '../functions/api.types'
 import type { TabularProfileResponse } from '../components/TabularExplorer/types'
 
 const TABULAR_PROFILE_KEY = Symbol('tabular-profile')
 
-type Status = 'idle' | 'pending' | 'success' | 'error'
-
 export type TabularProfileState = {
   resourceId: Readonly<Ref<string>>
   data: Readonly<Ref<TabularProfileResponse | null>>
   error: Readonly<Ref<unknown | null>>
-  status: Readonly<Ref<Status>>
+  status: Readonly<Ref<AsyncDataRequestStatus>>
   refresh: () => Promise<void>
 }
 
-function createProfileState(resourceId: MaybeRefOrGetter<string>): TabularProfileState {
+async function createProfileState(resourceId: MaybeRefOrGetter<string>): Promise<TabularProfileState> {
   const config = useComponentsConfig()
-  const data = ref<TabularProfileResponse | null>(null)
-  const error = ref<unknown | null>(null)
-  const status = ref<Status>('idle')
   const ridRef = computed(() => toValue(resourceId))
 
-  async function refresh() {
-    const id = toValue(resourceId)
-    if (!id) return
-    status.value = 'pending'
-    error.value = null
-    try {
-      data.value = await ofetch<TabularProfileResponse>(
-        `${config.tabularApiUrl}/api/resources/${id}/profile/`,
-      )
-      status.value = 'success'
-    }
-    catch (e) {
-      data.value = null
-      error.value = e
-      status.value = 'error'
-    }
-  }
+  // Goes through the package's useFetch, which delegates to the host's
+  // customUseFetch (Nuxt useFetch in cdata) so the response is shared
+  // between SSR and CSR via the Nuxt payload — avoiding a double fetch.
+  const profileUrl = computed(() =>
+    ridRef.value ? `${config.tabularApiUrl}/api/resources/${ridRef.value}/profile/` : null,
+  )
 
-  watchEffect(() => {
-    if (toValue(resourceId)) refresh()
-  })
+  const { data, error, status, refresh } = await useFetch<TabularProfileResponse>(profileUrl, { raw: true })
 
   return { resourceId: ridRef, data, error, status, refresh }
 }
@@ -51,8 +34,8 @@ function createProfileState(resourceId: MaybeRefOrGetter<string>): TabularProfil
  * Parent: fetch the tabular profile once and share it with descendants
  * (TabularExplorer, DataStructure...) via provide/inject.
  */
-export function provideTabularProfile(resourceId: MaybeRefOrGetter<string>): TabularProfileState {
-  const state = createProfileState(resourceId)
+export async function provideTabularProfile(resourceId: MaybeRefOrGetter<string>): Promise<TabularProfileState> {
+  const state = await createProfileState(resourceId)
   provide(TABULAR_PROFILE_KEY, state)
   return state
 }
@@ -63,10 +46,10 @@ export function provideTabularProfile(resourceId: MaybeRefOrGetter<string>): Tab
  * fetching on its own if no compatible ancestor is found — preserves
  * standalone usage of TabularExplorer / DataStructure.
  */
-export function injectTabularProfile(resourceId: MaybeRefOrGetter<string>): TabularProfileState {
+export async function injectTabularProfile(resourceId: MaybeRefOrGetter<string>): Promise<TabularProfileState> {
   const injected = inject<TabularProfileState | null>(TABULAR_PROFILE_KEY, null)
   if (injected && injected.resourceId.value === toValue(resourceId)) {
     return injected
   }
-  return createProfileState(resourceId)
+  return await createProfileState(resourceId)
 }
diff --git a/pages/explore.vue b/pages/explore.vue
index 46301a3f6..1a0693e1c 100644
--- a/pages/explore.vue
+++ b/pages/explore.vue
@@ -390,7 +390,7 @@ const currentResource = computed(() => resourceData.value?.resource ?? null)
 const currentDataset = computed(() => resourceData.value?.dataset ?? null)
 
 // Share the tabular profile fetch between TabularExplorer and DataStructure tabs.
-provideTabularProfile(() => currentResource.value?.id ?? '')
+await provideTabularProfile(() => currentResource.value?.id ?? '')
 
 const { tabsOptions } = useResourceCapabilities(
   () => currentResource.value as Resource,

From dc9dbe179d2e41d57fc8b13136fce654bdf4da1d Mon Sep 17 00:00:00 2001
From: Thibaud Dauce <git@hadibut.fr>
Date: Mon, 18 May 2026 09:48:06 +0200
Subject: [PATCH 7/9] remove unecessary type

---
 nuxt.config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/nuxt.config.ts b/nuxt.config.ts
index 6654a5694..09251973a 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -115,7 +115,7 @@ export default defineNuxtConfig({
       featuredResourceIds: [
         '1c5075ec-7ce1-49cb-ab89-94f507812daf', // Visas d'exploitations cinématographiques (CNC)
         'df2cbcb3-da0a-4265-a24e-c36f2c787db2', // Indices de position sociale dans les lycées
-      ] as string[],
+      ],
       homepageRightNow: {
         title: 'Données relatives aux Énergies',
         url: '/pages/donnees-energie',

From f51ddd33ec904cb438d6d65cd56975d320ab2627 Mon Sep 17 00:00:00 2001
From: Thibaud Dauce <git@hadibut.fr>
Date: Mon, 1 Jun 2026 09:51:08 +0200
Subject: [PATCH 8/9] fix breadcrumb and provide/inject

---
 components/Breadcrumbs/BreadcrumbItem.vue     |  1 +
 .../src/composables/useTabularProfile.ts      | 25 +++++++++++++++----
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/components/Breadcrumbs/BreadcrumbItem.vue b/components/Breadcrumbs/BreadcrumbItem.vue
index 5ff96cbef..2e054e7e6 100644
--- a/components/Breadcrumbs/BreadcrumbItem.vue
+++ b/components/Breadcrumbs/BreadcrumbItem.vue
@@ -14,6 +14,7 @@
       v-else
       class="fr-breadcrumb__link"
       :to
+      aria-current-value="false"
     >
       <slot />
     </CdataLink>
diff --git a/datagouv-components/src/composables/useTabularProfile.ts b/datagouv-components/src/composables/useTabularProfile.ts
index 4788e44cf..9ea2f9b55 100644
--- a/datagouv-components/src/composables/useTabularProfile.ts
+++ b/datagouv-components/src/composables/useTabularProfile.ts
@@ -14,6 +14,15 @@ export type TabularProfileState = {
   refresh: () => Promise<void>
 }
 
+// What is shared through provide/inject: the resourceId (to let descendants
+// check they target the same resource) and the in-flight fetch promise. We
+// share the promise rather than the resolved state because `provide()` must
+// run synchronously during setup — see `provideTabularProfile`.
+type TabularProfileShared = {
+  resourceId: Readonly<Ref<string>>
+  state: Promise<TabularProfileState>
+}
+
 async function createProfileState(resourceId: MaybeRefOrGetter<string>): Promise<TabularProfileState> {
   const config = useComponentsConfig()
   const ridRef = computed(() => toValue(resourceId))
@@ -33,10 +42,16 @@ async function createProfileState(resourceId: MaybeRefOrGetter<string>): Promise
 /**
  * Parent: fetch the tabular profile once and share it with descendants
  * (TabularExplorer, DataStructure...) via provide/inject.
+ *
+ * Not async on purpose: `provide()` only works while the active component
+ * instance is set, which is lost after the first `await`. So we kick off the
+ * fetch, `provide()` the resulting promise synchronously, then return it for
+ * the caller to await.
  */
-export async function provideTabularProfile(resourceId: MaybeRefOrGetter<string>): Promise<TabularProfileState> {
-  const state = await createProfileState(resourceId)
-  provide(TABULAR_PROFILE_KEY, state)
+export function provideTabularProfile(resourceId: MaybeRefOrGetter<string>): Promise<TabularProfileState> {
+  const ridRef = computed(() => toValue(resourceId))
+  const state = createProfileState(resourceId)
+  provide<TabularProfileShared>(TABULAR_PROFILE_KEY, { resourceId: ridRef, state })
   return state
 }
 
@@ -47,9 +62,9 @@ export async function provideTabularProfile(resourceId: MaybeRefOrGetter<string>
  * standalone usage of TabularExplorer / DataStructure.
  */
 export async function injectTabularProfile(resourceId: MaybeRefOrGetter<string>): Promise<TabularProfileState> {
-  const injected = inject<TabularProfileState | null>(TABULAR_PROFILE_KEY, null)
+  const injected = inject<TabularProfileShared | null>(TABULAR_PROFILE_KEY, null)
   if (injected && injected.resourceId.value === toValue(resourceId)) {
-    return injected
+    return await injected.state
   }
   return await createProfileState(resourceId)
 }

From 0f7d8f49aba17039ef403a8a8d6ef385b075185e Mon Sep 17 00:00:00 2001
From: Thibaud Dauce <git@hadibut.fr>
Date: Mon, 1 Jun 2026 10:13:40 +0200
Subject: [PATCH 9/9] fix call to /null url

---
 components/Explore/ExploreResourceView.vue | 217 +++++++++++++++++++++
 pages/explore.vue                          | 204 +------------------
 2 files changed, 221 insertions(+), 200 deletions(-)
 create mode 100644 components/Explore/ExploreResourceView.vue

diff --git a/components/Explore/ExploreResourceView.vue b/components/Explore/ExploreResourceView.vue
new file mode 100644
index 000000000..95c8c4ece
--- /dev/null
+++ b/components/Explore/ExploreResourceView.vue
@@ -0,0 +1,217 @@
+<template>
+  <div class="mb-16">
+    <div class="container">
+      <Breadcrumb>
+        <BreadcrumbItem to="/">
+          {{ $t('Accueil') }}
+        </BreadcrumbItem>
+        <BreadcrumbItem :to="backLink">
+          {{ $t('Explorer') }}
+        </BreadcrumbItem>
+        <BreadcrumbItem>
+          {{ resource.title || $t('Fichier sans nom') }}
+        </BreadcrumbItem>
+      </Breadcrumb>
+
+      <header class="flex flex-wrap md:flex-nowrap gap-4 items-start justify-between mb-4">
+        <div class="min-w-0">
+          <ResourceSelector
+            :resources="datasetResources"
+            :selected-id="resource.id"
+            searchable
+            :is-disabled="(r) => !hasTabularData(r)"
+            :disabled-title="$t('Cette ressource n\'est pas explorable')"
+            @select="onResourceSelect"
+          >
+            <template #trigger="{ open }">
+              <PopoverButton
+                class="inline-flex items-center gap-1 -mx-1 px-1 py-1 rounded text-left hover:bg-gray-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-new-primary"
+              >
+                <ResourceIcon
+                  :resource="resource"
+                  class="size-4 mr-1 shrink-0"
+                />
+                <span class="text-lg font-bold line-clamp-2">
+                  {{ resource.title || $t('Fichier sans nom') }}
+                </span>
+                <RiArrowDownSLine
+                  class="size-4 shrink-0 text-gray-medium"
+                  :class="{ 'rotate-180': open }"
+                  aria-hidden="true"
+                />
+              </PopoverButton>
+            </template>
+          </ResourceSelector>
+          <div class="text-sm text-gray-medium flex items-center gap-1 mt-1">
+            <ObjectCardOwner
+              :organization="dataset.organization"
+              :owner="dataset.owner"
+            />
+            <template v-if="resource.format">
+              <span>·</span>
+              <span>{{ resource.format.toLowerCase() }}</span>
+            </template>
+          </div>
+        </div>
+        <BrandedButton
+          :href="resource.latest"
+          :icon="RiDownloadLine"
+          rel="ugc nofollow noopener"
+          download
+          external
+          class="shrink-0"
+        >
+          {{ $t('Télécharger') }}
+        </BrandedButton>
+      </header>
+
+      <TabGroup
+        :default-index="defaultTabIndex"
+        @change="onTabChange"
+      >
+        <TabList class="max-w-full overflow-x-auto">
+          <Tab
+            v-for="tab in displayedTabs"
+            :key="tab.key"
+          >
+            {{ tab.label }}
+          </Tab>
+        </TabList>
+      </TabGroup>
+    </div>
+
+    <!-- Data tab is lazy-mounted (only when first visited) to avoid
+         TabularExplorer's top-level `await useFetch` blocking the page
+         when landing directly on a different tab. Once mounted, we keep
+         it via `v-show` so quick tab switches don't unmount mid-fetch
+         (which would leave Suspense hanging on a stale promise). -->
+    <div
+      v-show="activeTabKey === 'data'"
+      class="mt-4 px-4"
+    >
+      <TabularExplorer
+        v-if="hasVisitedDataTab"
+        :key="resource.id"
+        :resource-id="resource.id"
+      />
+    </div>
+    <div
+      v-show="activeTabKey !== 'data'"
+      class="container mt-4"
+    >
+      <DataStructure
+        v-if="activeTabKey === 'data-structure'"
+        :resource="resource"
+      />
+      <MarkdownViewer
+        v-else-if="activeTabKey === 'description'"
+        :content="resource.description ?? ''"
+        size="sm"
+      />
+      <Metadata
+        v-else-if="activeTabKey === 'metadata'"
+        :resource="resource"
+      />
+      <Downloads
+        v-else-if="activeTabKey === 'downloads'"
+        :resource="resource"
+        :dataset="dataset"
+      />
+      <OpenApiViewer
+        v-else-if="activeTabKey === 'swagger'"
+        :url="`${tabularApiUrl}/api/resources/${resource.id}/swagger/`"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PopoverButton } from '@headlessui/vue'
+import { RiArrowDownSLine, RiDownloadLine } from '@remixicon/vue'
+import {
+  BrandedButton,
+  DataStructure,
+  Downloads,
+  MarkdownViewer,
+  Metadata,
+  ObjectCardOwner,
+  OpenApiViewer,
+  ResourceIcon,
+  ResourceSelector,
+  Tab,
+  TabGroup,
+  TabList,
+  TabularExplorer,
+  provideTabularProfile,
+  useHasTabularData,
+  useResourceCapabilities,
+} from '@datagouv/components-next'
+import type { Dataset, Resource } from '@datagouv/components-next'
+import BreadcrumbItem from '~/components/Breadcrumbs/BreadcrumbItem.vue'
+
+const props = defineProps<{
+  resource: Resource
+  dataset: Dataset
+}>()
+
+const route = useRoute()
+const router = useRouter()
+const config = useRuntimeConfig()
+
+const tabularApiUrl = config.public.tabularApiUrl
+
+const backLink = computed(() => {
+  const params = new URLSearchParams()
+  if (typeof route.query.q === 'string' && route.query.q) params.set('q', route.query.q)
+  const qs = params.toString()
+  return qs ? `/explore?${qs}` : '/explore'
+})
+
+const hasTabularData = useHasTabularData()
+const datasetResources = computed<Resource[]>(() => props.dataset.resources ?? [])
+
+function onResourceSelect(resource: Resource) {
+  router.push({ query: { ...route.query, resource_id: resource.id, tab: undefined } })
+}
+
+// Share the tabular profile fetch between the TabularExplorer and DataStructure
+// tabs. Mounting this component only when a resource exists guarantees the id is
+// always valid, so we never fetch a null profile URL.
+await provideTabularProfile(() => props.resource.id)
+
+const { tabsOptions } = useResourceCapabilities(() => props.resource, () => props.dataset)
+
+// Map tab is out of scope per current product decision; everything else from useResourceCapabilities is shown.
+const displayedTabs = computed(() => tabsOptions.value.filter(tab => tab.key !== 'map'))
+
+const defaultTabIndex = computed(() => {
+  const tabKey = typeof route.query.tab === 'string' ? route.query.tab : null
+  if (!tabKey) return 0
+  const idx = displayedTabs.value.findIndex(tab => tab.key === tabKey)
+  return idx >= 0 ? idx : 0
+})
+
+const activeTabKey = computed(() => {
+  const tabKey = typeof route.query.tab === 'string' ? route.query.tab : null
+  if (tabKey && displayedTabs.value.some(tab => tab.key === tabKey)) return tabKey
+  return displayedTabs.value[0]?.key ?? 'data'
+})
+
+// Lazy-mount TabularExplorer: only mount it the first time the user lands on
+// (or switches to) the Data tab. Once mounted, we keep it via v-show even
+// when other tabs are active, so we don't pay the suspended-fetch cost on
+// quick tab switches.
+const hasVisitedDataTab = ref(false)
+watch(activeTabKey, (key) => {
+  if (key === 'data') hasVisitedDataTab.value = true
+}, { immediate: true })
+
+function onTabChange(index: number) {
+  const tab = displayedTabs.value[index]
+  if (!tab) return
+  const q = { ...route.query }
+  if (tab.key === 'data') delete q.tab
+  else q.tab = tab.key
+  router.replace({ query: q })
+}
+</script>
diff --git a/pages/explore.vue b/pages/explore.vue
index 1a0693e1c..2b136c0d4 100644
--- a/pages/explore.vue
+++ b/pages/explore.vue
@@ -116,158 +116,20 @@
     </div>
   </div>
 
-  <div
+  <ExploreResourceView
     v-else-if="currentResource && currentDataset"
-    class="mb-16"
-  >
-    <div class="container">
-      <Breadcrumb>
-        <BreadcrumbItem to="/">
-          {{ $t('Accueil') }}
-        </BreadcrumbItem>
-        <BreadcrumbItem :to="backLink">
-          {{ $t('Explorer') }}
-        </BreadcrumbItem>
-        <BreadcrumbItem>
-          {{ currentResource.title || $t('Fichier sans nom') }}
-        </BreadcrumbItem>
-      </Breadcrumb>
-
-      <header class="flex flex-wrap md:flex-nowrap gap-4 items-start justify-between mb-4">
-        <div class="min-w-0">
-          <ResourceSelector
-            :resources="datasetResources"
-            :selected-id="currentResource.id"
-            searchable
-            :is-disabled="(r) => !hasTabularData(r)"
-            :disabled-title="$t('Cette ressource n\'est pas explorable')"
-            @select="onResourceSelect"
-          >
-            <template #trigger="{ open }">
-              <PopoverButton
-                class="inline-flex items-center gap-1 -mx-1 px-1 py-1 rounded text-left hover:bg-gray-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-new-primary"
-              >
-                <ResourceIcon
-                  :resource="currentResource"
-                  class="size-4 mr-1 shrink-0"
-                />
-                <span class="text-lg font-bold line-clamp-2">
-                  {{ currentResource.title || $t('Fichier sans nom') }}
-                </span>
-                <RiArrowDownSLine
-                  class="size-4 shrink-0 text-gray-medium"
-                  :class="{ 'rotate-180': open }"
-                  aria-hidden="true"
-                />
-              </PopoverButton>
-            </template>
-          </ResourceSelector>
-          <div class="text-sm text-gray-medium flex items-center gap-1 mt-1">
-            <ObjectCardOwner
-              :organization="currentDataset.organization"
-              :owner="currentDataset.owner"
-            />
-            <template v-if="currentResource.format">
-              <span>·</span>
-              <span>{{ currentResource.format.toLowerCase() }}</span>
-            </template>
-          </div>
-        </div>
-        <BrandedButton
-          :href="currentResource.latest"
-          :icon="RiDownloadLine"
-          rel="ugc nofollow noopener"
-          download
-          external
-          class="shrink-0"
-        >
-          {{ $t('Télécharger') }}
-        </BrandedButton>
-      </header>
-
-      <TabGroup
-        :default-index="defaultTabIndex"
-        @change="onTabChange"
-      >
-        <TabList class="max-w-full overflow-x-auto">
-          <Tab
-            v-for="tab in displayedTabs"
-            :key="tab.key"
-          >
-            {{ tab.label }}
-          </Tab>
-        </TabList>
-      </TabGroup>
-    </div>
-
-    <!-- Data tab is lazy-mounted (only when first visited) to avoid
-         TabularExplorer's top-level `await useFetch` blocking the page
-         when landing directly on a different tab. Once mounted, we keep
-         it via `v-show` so quick tab switches don't unmount mid-fetch
-         (which would leave Suspense hanging on a stale promise). -->
-    <div
-      v-show="activeTabKey === 'data'"
-      class="mt-4 px-4"
-    >
-      <TabularExplorer
-        v-if="hasVisitedDataTab"
-        :key="currentResource.id"
-        :resource-id="currentResource.id"
-      />
-    </div>
-    <div
-      v-show="activeTabKey !== 'data'"
-      class="container mt-4"
-    >
-      <DataStructure
-        v-if="activeTabKey === 'data-structure'"
-        :resource="currentResource"
-      />
-      <MarkdownViewer
-        v-else-if="activeTabKey === 'description'"
-        :content="currentResource.description ?? ''"
-        size="sm"
-      />
-      <Metadata
-        v-else-if="activeTabKey === 'metadata'"
-        :resource="currentResource"
-      />
-      <Downloads
-        v-else-if="activeTabKey === 'downloads'"
-        :resource="currentResource"
-        :dataset="currentDataset"
-      />
-      <OpenApiViewer
-        v-else-if="activeTabKey === 'swagger'"
-        :url="`${tabularApiUrl}/api/resources/${currentResource.id}/swagger/`"
-      />
-    </div>
-  </div>
+    :resource="currentResource"
+    :dataset="currentDataset"
+  />
 </template>
 
 <script setup lang="ts">
-import { PopoverButton } from '@headlessui/vue'
-import { RiArrowDownSLine, RiDownloadLine } from '@remixicon/vue'
 import {
   BrandedButton,
   DatasetCard,
-  DataStructure,
-  Downloads,
-  MarkdownViewer,
-  Metadata,
-  ObjectCardOwner,
-  OpenApiViewer,
-  ResourceIcon,
-  ResourceSelector,
   SearchInput,
-  Tab,
-  TabGroup,
-  TabList,
-  TabularExplorer,
   TranslationT,
-  provideTabularProfile,
   useHasTabularData,
-  useResourceCapabilities,
   useTranslation,
 } from '@datagouv/components-next'
 import type { Dataset, DatasetV2, Resource } from '@datagouv/components-next'
@@ -288,7 +150,6 @@ const { $api } = useNuxtApp()
 const config = useRuntimeConfig()
 
 const featuredResourceIds = config.public.featuredResourceIds
-const tabularApiUrl = config.public.tabularApiUrl
 
 const query = computed({
   get: () => (typeof route.query.q === 'string' ? route.query.q : ''),
@@ -304,13 +165,6 @@ const resourceId = computed(() =>
   typeof route.query.resource_id === 'string' ? route.query.resource_id : '',
 )
 
-const backLink = computed(() => {
-  const params = new URLSearchParams()
-  if (typeof route.query.q === 'string' && route.query.q) params.set('q', route.query.q)
-  const qs = params.toString()
-  return qs ? `/explore?${qs}` : '/explore'
-})
-
 const searchParams = computed(() => ({ q: query.value, page_size: 10, format: 'csv' }))
 
 const { data: results, status, execute } = await useAPI<PaginatedArray<Dataset>>(
@@ -388,54 +242,4 @@ const { data: resourceData } = await useAsyncData(
 
 const currentResource = computed(() => resourceData.value?.resource ?? null)
 const currentDataset = computed(() => resourceData.value?.dataset ?? null)
-
-// Share the tabular profile fetch between TabularExplorer and DataStructure tabs.
-await provideTabularProfile(() => currentResource.value?.id ?? '')
-
-const { tabsOptions } = useResourceCapabilities(
-  () => currentResource.value as Resource,
-  () => currentDataset.value as Dataset,
-)
-
-// Map tab is out of scope per current product decision; everything else from useResourceCapabilities is shown.
-const displayedTabs = computed(() =>
-  currentResource.value ? tabsOptions.value.filter(tab => tab.key !== 'map') : [],
-)
-
-const defaultTabIndex = computed(() => {
-  const tabKey = typeof route.query.tab === 'string' ? route.query.tab : null
-  if (!tabKey) return 0
-  const idx = displayedTabs.value.findIndex(tab => tab.key === tabKey)
-  return idx >= 0 ? idx : 0
-})
-
-const activeTabKey = computed(() => {
-  const tabKey = typeof route.query.tab === 'string' ? route.query.tab : null
-  if (tabKey && displayedTabs.value.some(tab => tab.key === tabKey)) return tabKey
-  return displayedTabs.value[0]?.key ?? 'data'
-})
-
-// Lazy-mount TabularExplorer: only mount it the first time the user lands on
-// (or switches to) the Data tab. Once mounted, we keep it via v-show even
-// when other tabs are active, so we don't pay the suspended-fetch cost on
-// quick tab switches.
-const hasVisitedDataTab = ref(false)
-watch(activeTabKey, (key) => {
-  if (key === 'data') hasVisitedDataTab.value = true
-}, { immediate: true })
-
-function onTabChange(index: number) {
-  const tab = displayedTabs.value[index]
-  if (!tab) return
-  const q = { ...route.query }
-  if (tab.key === 'data') delete q.tab
-  else q.tab = tab.key
-  router.replace({ query: q })
-}
-
-const datasetResources = computed<Resource[]>(() => currentDataset.value?.resources ?? [])
-
-function onResourceSelect(resource: Resource) {
-  router.push(exploreLink(resource.id))
-}
 </script>