@datagouv/components-next 1.0.2-dev.231 → 1.0.2-dev.232

package/src/components/ResourceExplorer/ResourceExplorer.vue

@@ -14,8 +14,13 @@
       class="flex"
       :class="fullscreen ? 'min-h-0 flex-1 overflow-hidden' : 'overflow-hidden rounded border border-gray-default'"
     >
-      <div class="hidden md:flex">
+      <div
+        class="hidden md:flex"
+        :class="resourceListExpanded ? 'flex-1' : ''"
+      >
         <ResourceExplorerSidebar
+          v-model:expanded="resourceListExpanded"
+          :dataset
           :groups
           :selected-resource-id="selectedResource?.id ?? null"
           :collapsed="sidebarCollapsed"
@@ -31,7 +36,7 @@
       <div
         id="resource-explorer-viewer"
         class="flex-1 min-w-0"
-        :class="fullscreen ? 'flex flex-col' : ''"
+        :class="[fullscreen ? 'flex flex-col' : '', resourceListExpanded ? 'md:hidden' : '']"
         role="region"
         :aria-label="t('Détail de la ressource')"
       >
@@ -154,6 +159,7 @@ const {
 watch(selectedResource, resource => emit('select', resource), { immediate: true })
 
 const sidebarCollapsed = ref(false)
+const resourceListExpanded = ref(false)
 
 const resourceTo = (resource: Resource): RouteLocationRaw => ({
   query: { ...route.query, resource_id: resource.id },

package/src/components/ResourceExplorer/ResourceExplorerSidebar.vue

@@ -1,134 +1,183 @@
 <template>
-  <aside
-    class="relative flex shrink-0 flex-col overflow-hidden border-r border-gray-default bg-white"
-    :class="resizing ? '' : 'transition-[width] duration-200'"
-    :style="{ width: collapsed ? '48px' : `${width}px` }"
-    :aria-label="t('Ressources')"
+  <!-- The resize grip sits outside the aside: it straddles the border, and the
+       aside's overflow-hidden would clip its outer half. -->
+  <div
+    class="relative flex"
+    :class="expanded ? 'flex-1' : 'shrink-0'"
   >
-    <div
-      class="flex h-14 items-center border-b border-gray-default bg-gray-some px-3"
-      :class="collapsed ? 'justify-center' : 'justify-between'"
+    <!-- Expanded, the list takes the viewer's place (the explorer hides the viewer). -->
+    <aside
+      class="flex flex-col overflow-hidden bg-white"
+      :class="[
+        expanded ? 'flex-1' : 'shrink-0 border-r border-gray-default',
+        resizing ? '' : 'transition-[width] duration-200',
+      ]"
+      :style="expanded ? undefined : { width: collapsed ? '48px' : `${width}px` }"
+      :aria-label="t('Ressources')"
     >
-      <span
-        v-if="!collapsed"
-        class="text-[13px] font-medium text-gray-title"
-      >{{ t('Ressources') }}</span>
-      <button
-        type="button"
-        :title="collapsed ? t('Afficher le panneau des ressources') : t('Masquer le panneau')"
-        class="flex size-6 items-center justify-center rounded text-gray-plain hover:bg-gray-100"
-        @click="$emit('update:collapsed', !collapsed)"
+      <div
+        class="flex h-14 items-center border-b border-gray-default bg-gray-some px-3"
+        :class="collapsed ? 'justify-center' : 'justify-between'"
       >
-        <component
-          :is="collapsed ? RiSidebarUnfoldLine : RiSidebarFoldLine"
-          class="size-5"
-        />
-      </button>
-    </div>
+        <span
+          v-if="!collapsed"
+          class="text-[14px] font-medium text-gray-title"
+        >{{ t('Ressources') }}</span>
+        <span class="flex items-center gap-1">
+          <button
+            v-if="!collapsed"
+            type="button"
+            class="inline-flex h-7 items-center gap-1 rounded px-2 text-[13px] font-medium text-gray-title underline-offset-4 hover:bg-gray-100 hover:underline"
+            @click="$emit('update:expanded', !expanded)"
+          >
+            <template v-if="expanded">
+              <RiArrowLeftLine
+                class="size-3.5"
+                aria-hidden="true"
+              />
+              {{ t('Revenir à l’explorateur') }}
+            </template>
+            <template v-else>
+              {{ t('Tout afficher') }}
+            </template>
+          </button>
+          <button
+            v-if="!expanded"
+            type="button"
+            :title="collapsed ? t('Afficher le panneau des ressources') : t('Masquer le panneau')"
+            class="flex size-6 items-center justify-center rounded text-gray-plain hover:bg-gray-100"
+            @click="$emit('update:collapsed', !collapsed)"
+          >
+            <component
+              :is="collapsed ? RiSidebarUnfoldLine : RiSidebarFoldLine"
+              class="size-5"
+            />
+          </button>
+        </span>
+      </div>
 
-    <!-- min-w keeps the content laid out at the sidebar's min width so it doesn't
+      <!-- min-w keeps the content laid out at the sidebar's min width so it doesn't
          reflow (badges wrapping, section titles on 2 lines) while the width animates
          open from the collapsed state — the aside's overflow-hidden clips the rest. -->
-    <!-- Extra bottom padding so the last item can scroll clear of the browser's
+      <!-- Extra bottom padding so the last item can scroll clear of the browser's
          hover URL bar (Firefox shows it bottom-left). -->
-    <div
-      v-if="!collapsed"
-      class="flex min-h-0 min-w-[260px] flex-1 flex-col gap-3 overflow-y-auto p-2 pb-16"
-    >
-      <label class="flex h-8 items-center gap-1 rounded border border-gray-default bg-gray-some px-2">
-        <RiSearchLine class="size-3.5 shrink-0 text-gray-medium" />
-        <span class="sr-only">{{ t('Rechercher') }}</span>
-        <input
-          :value="search"
-          type="search"
-          class="min-w-0 flex-1 bg-transparent text-[13px] outline-none placeholder:text-gray-medium"
-          :placeholder="t('Rechercher une ressource')"
-          @input="$emit('update:search', ($event.target as HTMLInputElement).value)"
-        >
-      </label>
-
-      <section
-        v-for="group in groups"
-        :key="group.type"
-        class="space-y-0.5"
+      <div
+        v-if="!collapsed"
+        class="flex min-h-0 min-w-[260px] flex-1 flex-col gap-3 overflow-y-auto p-2 pb-16"
       >
-        <p class="px-1 py-2 text-[12px] font-medium leading-3 text-gray-medium">
-          {{ getResourceLabel(group.type, group.total) }}
-        </p>
-        <ResourceListItem
-          v-for="resource in group.items"
-          :key="resource.id"
-          :resource
-          :to="resourceTo(resource)"
-          :replace
-          :selected="resource.id === selectedResourceId"
-        />
-        <button
-          v-if="group.items.length < group.total"
-          type="button"
-          :disabled="loadingType === group.type"
-          class="flex w-full items-center gap-1 px-1 py-1 text-left text-[13px] text-blue-default hover:underline disabled:cursor-default disabled:no-underline"
-          @click="$emit('load-more', group.type)"
+        <label class="flex h-8 items-center gap-1 rounded border border-gray-default bg-gray-some px-2">
+          <RiSearchLine class="size-3.5 shrink-0 text-gray-medium" />
+          <span class="sr-only">{{ t('Rechercher') }}</span>
+          <input
+            :value="search"
+            type="search"
+            class="min-w-0 flex-1 bg-transparent text-[14px] outline-none placeholder:text-gray-medium"
+            :placeholder="t('Rechercher une ressource')"
+            @input="$emit('update:search', ($event.target as HTMLInputElement).value)"
+          >
+        </label>
+
+        <section
+          v-for="group in groups"
+          :key="group.type"
+          class="space-y-0.5"
         >
-          <RiLoader5Line
-            v-if="loadingType === group.type"
-            class="size-3.5 shrink-0 animate-spin"
+          <p class="px-1 py-2 text-[13px] font-medium leading-4 text-gray-medium">
+            {{ getResourceLabel(group.type, group.total) }}
+          </p>
+          <ResourceListItem
+            v-for="resource in group.items"
+            :key="resource.id"
+            :resource
+            :dataset
+            :to="resourceTo(resource)"
+            :replace
+            :selected="resource.id === selectedResourceId"
+            :expanded
+            @click="$emit('update:expanded', false)"
           />
-          {{ t('Charger plus…') }}
-        </button>
-      </section>
+          <button
+            v-if="group.items.length < group.total"
+            type="button"
+            :disabled="loadingType === group.type"
+            class="flex w-full items-center gap-1 px-1 py-1 text-left text-[14px] text-blue-default hover:underline disabled:cursor-default disabled:no-underline"
+            @click="$emit('load-more', group.type)"
+          >
+            <RiLoader5Line
+              v-if="loadingType === group.type"
+              class="size-3.5 shrink-0 animate-spin"
+            />
+            {{ t('Charger plus…') }}
+          </button>
+        </section>
 
-      <!-- The search lives here, so its outcome does too: the viewer only says that
+        <!-- The search lives here, so its outcome does too: the viewer only says that
            nothing is selected. -->
-      <div
-        v-if="search && !groups.length"
-        class="flex flex-col gap-2 px-1 py-2"
-      >
-        <p class="m-0 text-[13px] leading-snug text-gray-medium">
-          {{ t('Pas de résultats pour « {q} »', { q: search }) }}
-        </p>
-        <BrandedButton
-          color="secondary"
-          size="xs"
-          class="w-full"
-          @click="$emit('update:search', '')"
+        <div
+          v-if="search && !groups.length"
+          class="flex flex-col gap-2 px-1 py-2"
         >
-          {{ t('Réinitialiser la recherche') }}
-        </BrandedButton>
+          <p class="m-0 text-[14px] leading-snug text-gray-medium">
+            {{ t('Pas de résultats pour « {q} »', { q: search }) }}
+          </p>
+          <BrandedButton
+            color="secondary"
+            size="xs"
+            class="w-full"
+            @click="$emit('update:search', '')"
+          >
+            {{ t('Réinitialiser la recherche') }}
+          </BrandedButton>
+        </div>
       </div>
-    </div>
+    </aside>
 
     <!-- Drag the right edge to resize the panel and read longer resource titles.
          A separator rather than a button: it only answers to a drag, and a focusable
          button would announce an action that no key can trigger. Keyboard users fold
          the panel from the header instead. -->
     <div
-      v-if="!collapsed"
+      v-if="!collapsed && !expanded"
       role="separator"
       aria-orientation="vertical"
       :title="t('Glisser pour redimensionner')"
-      class="absolute right-0 top-0 z-20 h-full w-2 cursor-col-resize touch-none hover:bg-new-primary/10"
+      class="group absolute -right-1.5 top-0 z-20 flex h-full w-3 cursor-col-resize touch-none justify-center hover:bg-new-primary/10"
       @mousedown="startResize"
-    />
-  </aside>
+    >
+      <!-- Grip centered on the header so the resize affordance is visible at rest. -->
+      <span
+        aria-hidden="true"
+        class="mt-3 flex h-8 w-2 flex-col items-center justify-center gap-0.5 rounded-full border border-gray-default bg-white shadow-sm transition-colors group-hover:border-new-primary"
+      >
+        <span
+          v-for="dot in 3"
+          :key="dot"
+          class="size-0.5 rounded-full bg-gray-medium group-hover:bg-new-primary"
+        />
+      </span>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
 import type { RouteLocationRaw } from 'vue-router'
-import { RiSidebarFoldLine, RiSidebarUnfoldLine, RiSearchLine, RiLoader5Line } from '@remixicon/vue'
+import { RiArrowLeftLine, RiSidebarFoldLine, RiSidebarUnfoldLine, RiSearchLine, RiLoader5Line } from '@remixicon/vue'
 import BrandedButton from '../BrandedButton.vue'
 import ResourceListItem from '../ResourceListItem.vue'
 import { getResourceLabel } from '../../functions/resources'
 import { useTranslation } from '../../composables/useTranslation'
 import { useResizable } from '../../composables/useResizable'
+import type { DatasetV2 } from '../../types/datasets'
 import type { Resource, ResourceGroup, ResourceType } from '../../types/resources'
 
 const { t } = useTranslation()
 
 defineProps<{
+  dataset: DatasetV2
   groups: ResourceGroup[]
   selectedResourceId: string | null
   collapsed: boolean
+  expanded: boolean
   search: string
   loadingType: ResourceType | null
   resourceTo: (resource: Resource) => RouteLocationRaw
@@ -138,11 +187,12 @@ defineProps<{
 defineEmits<{
   'load-more': [type: ResourceType]
   'update:collapsed': [value: boolean]
+  'update:expanded': [value: boolean]
   'update:search': [value: string]
 }>()
 
 const { width, resizing, startResize } = useResizable({
-  initialWidth: 300,
+  initialWidth: 340,
   minWidth: 260,
   maxWidth: 720,
 })

package/src/components/ResourceExplorer/ResourceExplorerViewer.vue

@@ -63,8 +63,17 @@
                 v-if="previewKind === 'tabular'"
                 :timeout="200"
               >
-                <TabularExplorer :resource-id="resource.id">
+                <TabularExplorer
+                  v-model:global-search="search"
+                  :resource-id="resource.id"
+                >
                   <TabularToolbar class="shrink-0 border-b border-gray-default p-2" />
+                  <div class="hidden shrink-0 md:block">
+                    <TabularActiveFilters
+                      with-clear
+                      class="border-b border-gray-default p-2"
+                    />
+                  </div>
                   <TabularTable :fill="fullscreen" />
                   <TabularMobileFilters />
                 </TabularExplorer>
@@ -161,7 +170,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, defineAsyncComponent } from 'vue'
+import { computed, defineAsyncComponent, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import PreviewUnavailable from '../ResourceAccordion/PreviewUnavailable.vue'
 import MarkdownViewer from '../MarkdownViewer.vue'
@@ -171,6 +180,7 @@ 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 TabularActiveFilters from '../TabularExplorer/TabularActiveFilters.vue'
 import TabularExplorer from '../TabularExplorer/TabularExplorer.vue'
 import TabularToolbar from '../TabularExplorer/TabularToolbar.vue'
 import TabularTable from '../TabularExplorer/TabularTable.vue'
@@ -251,6 +261,11 @@ if (hasTabularData.value) {
   await provideTabularProfile(() => props.resource.id)
 }
 
+// Kept here as well as in the table: the viewer outlives the data tab, so the search
+// survives a trip to another tab, and it resets with the resource since switching
+// resource remounts the viewer.
+const search = ref('')
+
 // The active tab lives in the URL so a shared link opens on the same one. Read once
 // at mount (TabGroup only takes an initial index), which is enough: switching resource
 // remounts the viewer, and the tab is preserved when the new resource also has it.

package/src/components/ResourceExplorer/ResourceSelector.vue

@@ -21,6 +21,7 @@
         >
           <ResourceListItem
             :resource="r"
+            :dataset
             :to="resourceTo(r)"
             :replace
             :selected="r.id === selectedId"
@@ -38,9 +39,11 @@ import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
 import { RiArrowDownSLine } from '@remixicon/vue'
 import { useTranslation } from '../../composables/useTranslation'
 import ResourceListItem from '../ResourceListItem.vue'
+import type { Dataset, DatasetV2 } from '../../types/datasets'
 import type { Resource } from '../../types/resources'
 
 defineProps<{
+  dataset: Dataset | DatasetV2
   resources: Resource[]
   selectedId: string
   resourceTo: (resource: Resource) => RouteLocationRaw

package/src/components/ResourceExplorer/ResourceViewerHeader.vue

@@ -1,16 +1,14 @@
 <template>
   <header class="flex h-14 shrink-0 items-center justify-between gap-2 border-b border-gray-default bg-gray-some px-3">
     <div class="flex min-w-0 items-center gap-1.5 overflow-hidden text-[13px] text-gray-medium">
-      <ResourceIcon
-        :resource
-        class="size-4 shrink-0"
-      />
+      <ResourceIconBadge :resource />
       <span
         class="min-w-0 truncate font-medium text-gray-title"
         :title="resource.title || t('Fichier sans nom')"
       >{{ resource.title || t('Fichier sans nom') }}</span>
       <ResourceSelector
         v-if="resources && resources.length > 1 && resourceTo"
+        :dataset
         :resources
         :selected-id="resource.id"
         :resource-to
@@ -87,7 +85,7 @@ import { computed } from 'vue'
 import { RiDownloadLine, RiFullscreenLine } from '@remixicon/vue'
 import BrandedButton from '../BrandedButton.vue'
 import CopyButton from '../CopyButton.vue'
-import ResourceIcon from '../ResourceAccordion/ResourceIcon.vue'
+import ResourceIconBadge from '../ResourceIconBadge.vue'
 import SchemaBadge from '../ResourceAccordion/SchemaBadge.vue'
 import ResourceSelector from './ResourceSelector.vue'
 import ResourceMainAction from './ResourceMainAction.vue'

package/src/components/ResourceIconBadge.vue

@@ -0,0 +1,28 @@
+<template>
+  <span
+    :class="[iconColor, '[&_svg]:fill-current']"
+    class="flex size-5 shrink-0 items-center justify-center rounded-[1px]"
+  >
+    <component
+      :is="iconComponent"
+      class="size-4"
+      aria-hidden="true"
+    />
+  </span>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import File from './Icons/File.vue'
+import { getResourceFormatIcon, getResourceIconColor } from '../functions/resources'
+import type { Resource } from '../types/resources'
+
+const props = defineProps<{
+  resource: Resource
+}>()
+
+// Render the icon directly (not via ResourceIcon which forces a gray color) so the
+// colored badge can tint it through currentColor + [&_svg]:fill-current.
+const iconComponent = computed(() => (props.resource.format ? getResourceFormatIcon(props.resource.format) : null) ?? File)
+const iconColor = computed(() => getResourceIconColor(props.resource.format))
+</script>

package/src/components/ResourceListItem.vue

@@ -4,41 +4,82 @@
     v-bind="$attrs"
     :to
     :replace
-    :class="selected ? '[&&]:!bg-gray-200' : '[&&]:hover:!bg-gray-100'"
-    class="grid h-7 w-full grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-1 rounded px-1 py-1 text-left !bg-none !no-underline"
+    :class="[
+      selected ? '[&&]:!bg-gray-200' : '[&&]:hover:!bg-gray-100',
+      // Expanded, each row is its own grid: fixed tracks keep the extra columns
+      // aligned from one row to the next, where `auto` tracks would follow each
+      // row's content.
+      expanded ? 'grid-cols-[auto_minmax(0,1fr)_13rem_5rem_6rem_4rem_6.5rem]' : 'grid-cols-[auto_minmax(0,1fr)_auto_1.25rem]',
+    ]"
+    class="grid h-8 w-full items-center gap-1 rounded px-1 py-1 text-left !bg-none !no-underline"
     @pointerenter="openOnHover"
     @pointerleave="closeTooltip"
-    @focus="show = true"
+    @focus="show = !expanded"
     @blur="closeTooltip"
   >
-    <span
-      :class="[iconColor, '[&_svg]:fill-current']"
-      class="flex size-5 shrink-0 items-center justify-center rounded-[1px]"
-    >
-      <component
-        :is="iconComponent"
-        class="size-4"
-        aria-hidden="true"
-      />
-    </span>
+    <ResourceIconBadge :resource />
     <div class="flex min-w-0 items-baseline gap-0.5 whitespace-nowrap leading-4">
       <span
-        class="truncate text-[13px]"
+        class="truncate text-[14px]"
         :class="selected ? 'font-extrabold text-gray-title' : 'font-medium text-gray-medium'"
       >{{ resource.title || t('Fichier sans nom') }}</span>
-      <template v-if="humanFilesize">
-        <span class="shrink-0 text-[13px] text-gray-medium">·</span>
-        <span class="shrink-0 text-[12px] text-gray-medium">{{ humanFilesize }}</span>
+      <template v-if="humanFilesize && !expanded">
+        <span class="shrink-0 text-[14px] text-gray-medium">·</span>
+        <span class="shrink-0 text-[13px] text-gray-medium">{{ humanFilesize }}</span>
       </template>
     </div>
+    <template v-if="expanded">
+      <span class="truncate text-[13px] text-gray-medium">
+        <TranslationT keypath="Mis à jour le {date}">
+          <template #date>
+            <FormattedDate :date="resource.last_modified" />
+          </template>
+        </TranslationT>
+      </span>
+      <span class="text-right text-[13px] tabular-nums text-gray-medium">{{ humanFilesize }}</span>
+    </template>
     <!-- Capped and truncated: an `auto` grid track floors at its content width, so an
          unusually long format (`www:link-1.0-http--samples`) would otherwise squeeze
          the title track to nothing and overflow the fixed-height row. -->
     <span
       v-if="resource.format"
-      class="max-w-24 truncate rounded bg-gray-lower px-1.5 py-0.5 text-[12px] uppercase leading-4 text-gray-medium"
+      class="max-w-24 justify-self-start truncate rounded bg-gray-lower px-1.5 py-0.5 text-[13px] uppercase leading-4 text-gray-medium"
       :title="resource.format"
     >{{ resource.format }}</span>
+    <!-- Holds the format track so the next columns stay in place. -->
+    <span v-else />
+    <span
+      v-if="expanded"
+      class="inline-flex items-center justify-end gap-1 text-[13px] tabular-nums text-gray-medium"
+    >
+      <RiDownloadLine
+        class="size-3"
+        aria-hidden="true"
+      />
+      {{ summarize(resource.metrics.views) }}
+    </span>
+    <!-- Compact, the eye is labelled in the hover card; expanded, the row has room
+         for the label and no hover card. -->
+    <span
+      v-if="expanded && hasPreview"
+      class="flex w-fit items-center gap-0.5 justify-self-end rounded bg-gray-lower px-1.5 py-0.5 text-[13px] leading-4 text-gray-medium"
+    >
+      <RiEyeLine
+        class="size-3.5"
+        aria-hidden="true"
+      />
+      {{ t('Explorable') }}
+    </span>
+    <span
+      v-else
+      class="flex items-center justify-center"
+    >
+      <RiEyeLine
+        v-if="hasPreview"
+        class="size-4 text-gray-medium"
+        aria-hidden="true"
+      />
+    </span>
   </AppLink>
 
   <!-- Hover card: the row truncates the title, so surface the full name plus the
@@ -84,6 +125,16 @@
             {{ summarize(resource.metrics.views) }}
           </span>
         </div>
+        <span
+          v-if="hasPreview"
+          class="mt-1.5 flex w-fit items-center gap-0.5 rounded bg-gray-lower px-1.5 py-0.5 text-[12px] leading-4 text-gray-medium"
+        >
+          <RiEyeLine
+            class="size-3"
+            aria-hidden="true"
+          />
+          {{ t('Explorable') }}
+        </span>
       </div>
     </Teleport>
   </ClientOnly>
@@ -94,15 +145,17 @@ import { computed, ref, useTemplateRef } from 'vue'
 import { autoUpdate, flip, offset, shift, useFloating } from '@floating-ui/vue'
 import { useEventListener } from '@vueuse/core'
 import type { RouteLocationRaw } from 'vue-router'
-import { RiDownloadLine } from '@remixicon/vue'
+import { RiDownloadLine, RiEyeLine } from '@remixicon/vue'
 import AppLink from './AppLink.vue'
 import ClientOnly from './ClientOnly.vue'
-import File from './Icons/File.vue'
 import FormattedDate from './FormattedDate.vue'
+import ResourceIconBadge from './ResourceIconBadge.vue'
 import TranslationT from './TranslationT.vue'
-import { getResourceFormatIcon, getResourceIconColor, getResourceFilesize } from '../functions/resources'
+import { getResourceFilesize } from '../functions/resources'
 import { filesize, summarize } from '../functions/helpers'
+import { useResourceCapabilities } from '../composables/useResourceCapabilities'
 import { useTranslation } from '../composables/useTranslation'
+import type { Dataset, DatasetV2 } from '../types/datasets'
 import type { Resource } from '../types/resources'
 
 // The hover card below is a second root node, so Vue drops fallthrough attributes
@@ -115,20 +168,22 @@ defineOptions({ inheritAttrs: false })
 // truth for the selection.
 const props = withDefaults(defineProps<{
   resource: Resource
+  // Some previews (Data Fair, OpenAPI) depend on the dataset's organization.
+  dataset: Dataset | DatasetV2
   to: RouteLocationRaw
   selected?: boolean
   replace?: boolean
+  // Full-width list: the row also shows the update date, size and downloads.
+  expanded?: boolean
 }>(), {
   selected: false,
   replace: false,
+  expanded: false,
 })
 
 const { t } = useTranslation()
 
-// Render the icon directly (not via ResourceIcon which forces a gray color) so the
-// colored badge can tint it through currentColor + [&_svg]:fill-current.
-const iconComponent = computed(() => (props.resource.format ? getResourceFormatIcon(props.resource.format) : null) ?? File)
-const iconColor = computed(() => getResourceIconColor(props.resource.format))
+const { hasPreview } = useResourceCapabilities(() => props.resource, () => props.dataset)
 
 const humanFilesize = computed(() => {
   const size = getResourceFilesize(props.resource)
@@ -151,9 +206,10 @@ const { floatingStyles } = useFloating(rowEl, card, {
 
 // A tap fires a pointer enter too, so the card would flash on every touch selection
 // in the mobile resource picker. Only a real pointer opens it — keyboard focus still
-// does, through @focus.
+// does, through @focus. The expanded row already shows everything the card holds,
+// so it never opens there.
 function openOnHover(event: PointerEvent) {
-  if (event.pointerType === 'mouse') show.value = true
+  if (event.pointerType === 'mouse' && !props.expanded) show.value = true
 }
 
 function closeTooltip() {