@datagouv/components-next 1.1.2 → 1.3.0

package/src/components/ResourceAccordion/ResourceAccordion.vue

@@ -265,91 +265,13 @@
             <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'"
+              v-if="tab.key === 'api'"
             >
               <div class="fr-mb-4w">
                 <p>{{ t("Cette API est générée automatiquement par {platform} à partir du fichier.", { platform: config.name }) }}</p>
@@ -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
@@ -513,7 +417,7 @@ const tabsOptions = computed(() => {
   options.push({ key: 'downloads', label: t('Téléchargements') })
 
   if (hasTabularData.value) {
-    options.push({ key: 'swagger', label: t('Swagger') })
+    options.push({ key: 'api', label: t('API') })
   }
 
   return options
@@ -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))
 

package/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
@@ -101,13 +71,12 @@ import { useComponentsConfig } from '../../config'
 import { useTranslation } from '../../composables/useTranslation'
 import { useDebouncedRef } from '../../composables/useDebouncedRef'
 import { useFetch } from '../../functions/api'
-import { RESOURCE_TYPE } from '../../functions/resources'
+import { RESOURCE_EXPLORER_PAGE_SIZE, RESOURCE_TYPE } from '../../functions/resources'
 import type { PaginatedArray } from '../../types/api'
 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<{
@@ -125,7 +94,6 @@ const sidebarCollapsed = ref(false)
 const search = ref('')
 const { debounced: searchDebounced, flush } = useDebouncedRef(search, config.searchDebounce ?? 300)
 
-const PAGE_SIZE = 10
 const url = computed(() => `/api/2/datasets/${props.dataset.id}/resources/`)
 
 // Resource ID from URL query
@@ -134,32 +102,32 @@ const resourceIdQuery = useRouteQuery<string | undefined>('resource_id')
 // Fetch resources for each type
 const mainParams = computed(() => ({
   type: 'main' as const,
-  page_size: PAGE_SIZE,
+  page_size: RESOURCE_EXPLORER_PAGE_SIZE,
   q: searchDebounced.value || undefined,
 }))
 const documentationParams = computed(() => ({
   type: 'documentation' as const,
-  page_size: PAGE_SIZE,
+  page_size: RESOURCE_EXPLORER_PAGE_SIZE,
   q: searchDebounced.value || undefined,
 }))
 const updateParams = computed(() => ({
   type: 'update' as const,
-  page_size: PAGE_SIZE,
+  page_size: RESOURCE_EXPLORER_PAGE_SIZE,
   q: searchDebounced.value || undefined,
 }))
 const apiParams = computed(() => ({
   type: 'api' as const,
-  page_size: PAGE_SIZE,
+  page_size: RESOURCE_EXPLORER_PAGE_SIZE,
   q: searchDebounced.value || undefined,
 }))
 const codeParams = computed(() => ({
   type: 'code' as const,
-  page_size: PAGE_SIZE,
+  page_size: RESOURCE_EXPLORER_PAGE_SIZE,
   q: searchDebounced.value || undefined,
 }))
 const otherParams = computed(() => ({
   type: 'other' as const,
-  page_size: PAGE_SIZE,
+  page_size: RESOURCE_EXPLORER_PAGE_SIZE,
   q: searchDebounced.value || undefined,
 }))
 
@@ -200,7 +168,7 @@ const loadMoreType = ref<ResourceType>('main')
 const loadMorePage = ref(1)
 const loadMoreParams = computed(() => ({
   type: loadMoreType.value,
-  page_size: PAGE_SIZE,
+  page_size: RESOURCE_EXPLORER_PAGE_SIZE,
   page: loadMorePage.value,
   q: searchDebounced.value || undefined,
 }))
@@ -246,21 +214,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 +241,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 +255,3 @@ watch(flatResources, () => {
   }
 })
 </script>
-
-<style>
-html:has(dialog.mobile-sidebar[open]) {
-  overflow: hidden;
-}
-</style>

package/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,135 +180,20 @@
               <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 v-if="tab.key === 'api'">
               <div class="fr-mb-4w">
                 <p>{{ t("Cette API est générée automatiquement par {platform} à partir du fichier.", { platform: config.name }) }}</p>
                 <p>{{ t("- Si le fichier est modifié, l'API sera mise à jour et sa structure pourra changer.") }}</p>
                 <p>{{ t("- Si le fichier est supprimé, l'API sera également supprimée.") }}</p>
                 <p>{{ t("Pour des usages pérennes, prévoyez que cette API dépend directement du fichier source.") }}</p>
+                <p v-if="config.tabularApiUrl">
+                  {{ t("L'URL de base de l'API est {url}", { url: config.tabularApiUrl }) }}
+                </p>
               </div>
               <OpenApiViewer
                 v-if="hasTabularData"
@@ -318,7 +209,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 +222,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 +235,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 +261,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 +279,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.
+await provideTabularProfile(() => props.resource.id)
+
 const resourceFilesize = computed(() => getResourceFilesize(props.resource))
 const resourceExternalUrl = computed(() => getResourceExternalUrl(props.dataset, props.resource))
 
@@ -401,10 +299,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)

package/src/components/ResourceExplorer/ResourceSelector.vue

@@ -0,0 +1,113 @@
+<template>
+  <Popover
+    v-slot="{ open, close }"
+    class="relative inline-block"
+  >
+    <slot
+      name="trigger"
+      :open="open"
+    >
+      <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="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'"
+    >
+      <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…')"
+      >
+      <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()"
+          >
+            <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-else
+            class="flex items-center gap-1.5 px-2 py-1.5 rounded text-sm text-gray-medium cursor-not-allowed"
+            :title="disabledTitle"
+          >
+            <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>
+</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'
+
+const props = defineProps<{
+  resources: Resource[]
+  selectedId: string
+  searchable?: boolean
+  isDisabled?: (resource: Resource) => boolean
+  disabledTitle?: string
+}>()
+
+const emit = defineEmits<{
+  select: [resource: Resource]
+}>()
+
+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>