@datagouv/components-next 1.3.0 → 1.4.0

package/src/components/ResourceExplorer/ResourceExplorerSidebar.vue

@@ -1,116 +1,149 @@
 <template>
   <aside
-    v-if="!collapsed"
-    class="w-full md:w-72 shrink-0 p-4 md:pr-0"
+    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')"
   >
-    <div class="flex items-center justify-between mb-3">
-      <h3 class="text-sm font-bold uppercase mb-0">
-        {{ t('Ressources') }}
-      </h3>
+    <div
+      class="flex h-14 items-center border-b border-gray-default bg-gray-some px-3"
+      :class="collapsed ? 'justify-center' : 'justify-between'"
+    >
+      <span
+        v-if="!collapsed"
+        class="text-[13px] font-medium text-gray-title"
+      >{{ t('Ressources') }}</span>
       <button
         type="button"
-        :title="t('Masquer le panneau')"
-        class="p-1 hover:bg-gray-100 rounded"
-        @click="$emit('update:collapsed', true)"
+        :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)"
       >
-        <RiArrowRightSLine class="size-5" />
+        <component
+          :is="collapsed ? RiSidebarUnfoldLine : RiSidebarFoldLine"
+          class="size-5"
+        />
       </button>
     </div>
 
-    <div class="mb-3">
-      <label
-        :for="searchId"
-        class="sr-only"
-      >{{ t('Rechercher') }}</label>
-      <input
-        :id="searchId"
-        :value="search"
-        type="search"
-        class="w-full border border-gray-default rounded px-2.5 py-1.5 text-sm"
-        :placeholder="t('Rechercher')"
-        @input="$emit('update:search', ($event.target as HTMLInputElement).value)"
-      >
-    </div>
+    <!-- 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
+         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>
 
-    <div class="space-y-4 overflow-y-auto md:max-h-[calc(100vh-14rem)]">
-      <div
-        v-for="group in resources"
+      <section
+        v-for="group in groups"
         :key="group.type"
+        class="space-y-0.5"
       >
-        <div class="text-xs text-gray-plain font-bold uppercase mb-1.5 border-b border-gray-default pb-1">
+        <p class="px-1 py-2 text-[12px] font-medium leading-3 text-gray-medium">
           {{ getResourceLabel(group.type, group.total) }}
-        </div>
-        <ul class="list-none p-0 m-0 space-y-0.5">
-          <li
-            v-for="resource in group.items"
-            :key="resource.id"
-          >
-            <button
-              type="button"
-              class="w-full text-left px-2 py-1.5 rounded text-sm flex items-center gap-1.5 hover:bg-gray-100"
-              :class="{
-                'font-bold bg-blue-50': resource.id === selectedResourceId,
-              }"
-              @click="$emit('select', resource)"
-            >
-              <ResourceIcon
-                :resource
-                class="size-3.5 shrink-0"
-              />
-              <span class="truncate">{{ resource.title || t('Fichier sans nom') }}</span>
-            </button>
-          </li>
-        </ul>
+        </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"
-          class="w-full text-left px-2 py-1.5 text-sm text-blue-default hover:underline"
+          :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)"
         >
+          <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
+           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', '')"
+        >
+          {{ t('Réinitialiser la recherche') }}
+        </BrandedButton>
       </div>
     </div>
-  </aside>
 
-  <div
-    v-else
-    class="shrink-0 flex items-start pt-1"
-  >
-    <button
-      type="button"
-      :title="t('Afficher le panneau des ressources')"
-      class="p-1 hover:bg-gray-100 rounded border border-gray-default"
-      @click="$emit('update:collapsed', false)"
-    >
-      <RiArrowLeftSLine class="size-5" />
-    </button>
-  </div>
+    <!-- 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"
+      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"
+      @mousedown="startResize"
+    />
+  </aside>
 </template>
 
 <script setup lang="ts">
-import { useId } from 'vue'
-import { RiArrowRightSLine, RiArrowLeftSLine } from '@remixicon/vue'
-import ResourceIcon from '../ResourceAccordion/ResourceIcon.vue'
+import type { RouteLocationRaw } from 'vue-router'
+import { 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 { Resource, ResourceGroup, ResourceType } from '../../types/resources'
 
 const { t } = useTranslation()
 
 defineProps<{
-  resources: ResourceGroup[]
+  groups: ResourceGroup[]
   selectedResourceId: string | null
   collapsed: boolean
   search: string
+  loadingType: ResourceType | null
+  resourceTo: (resource: Resource) => RouteLocationRaw
+  replace?: boolean
 }>()
 
 defineEmits<{
-  'select': [resource: Resource]
   'load-more': [type: ResourceType]
   'update:collapsed': [value: boolean]
   'update:search': [value: string]
 }>()
 
-const searchId = useId()
+const { width, resizing, startResize } = useResizable({
+  initialWidth: 300,
+  minWidth: 260,
+  maxWidth: 720,
+})
 </script>

package/src/components/ResourceExplorer/ResourceExplorerViewer.vue

@@ -1,102 +1,24 @@
 <template>
-  <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 gap-1 mb-1">
-          <h3 class="m-0 flex items-baseline text-base font-bold leading-tight">
-            <ResourceIcon
-              :resource
-              class="size-3.5 mr-1 shrink-0 translate-y-px"
-            />
-            <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é !')"
-            :text="resourceExternalUrl"
-            class="hidden md:inline-flex"
-          />
-        </div>
-        <div class="text-gray-medium text-xs flex items-center gap-1 flex-wrap">
-          <SchemaBadge :resource />
-          <RiSubtractLine
-            v-if="resource.schema?.name || resource.schema?.url"
-            aria-hidden="true"
-            class="size-3 fill-gray-medium"
-          />
-          <span>{{ t('mis à jour {date}', { date: formatRelativeIfRecentDate(resource.last_modified) }) }}</span>
-          <RiSubtractLine
-            aria-hidden="true"
-            class="size-3 fill-gray-medium"
-          />
-          <template v-if="resource.format">
-            <span>
-              {{ resource.format.trim().toLowerCase() }}
-              <span v-if="resourceFilesize">({{ filesize(resourceFilesize) }})</span>
-            </span>
-            <RiSubtractLine
-              aria-hidden="true"
-              class="size-3 fill-gray-medium"
-            />
-          </template>
-          <span class="inline-flex items-center">
-            <RiDownloadLine class="size-3 mr-0.5" />
-            {{ summarize(resource.metrics.views) }}
-          </span>
-        </div>
-      </div>
-      <div class="flex items-center gap-2">
-        <BrandedButton
-          v-if="isResourceUrl"
-          :href="resource.latest"
-          :title="t('Lien du fichier - ouvre une nouvelle fenêtre')"
-          rel="ugc nofollow noopener"
-          new-tab
-          size="xs"
-          external
-          @click="trackEvent('Jeux de données', 'Télécharger un fichier', 'Bouton : télécharger un fichier')"
-        >
-          {{ t('Visiter') }}
-        </BrandedButton>
-        <BrandedButton
-          v-else-if="ogcService"
-          :icon="RiFileCopyLine"
-          color="primary"
-          size="xs"
-          @click="copyResourceUrl"
-        >
-          {{ t('Copier le lien') }}
-        </BrandedButton>
-        <BrandedButton
-          v-else
-          :href="resource.latest"
-          rel="ugc nofollow noopener"
-          :title="downloadButtonTitle"
-          download
-          class="matomo_download"
-          :icon="unavailable ? RiFileWarningLine : RiDownloadLine"
-          size="xs"
-          color="primary"
-          external
-          @click="trackEvent('Jeux de données', 'Télécharger un fichier', 'Bouton : télécharger un fichier')"
-        >
-          {{ t('Télécharger') }}
-        </BrandedButton>
-      </div>
-    </header>
+  <div :class="fullscreen ? 'flex min-h-0 flex-1 flex-col' : ''">
+    <ResourceViewerHeader
+      :dataset
+      :resource
+      :resources
+      :resource-to
+      :explore-to="exploreTo"
+      :resource-external-url="resourceExternalUrl"
+      :replace
+      :fullscreen
+    />
 
-    <section class="pb-4">
+    <section :class="fullscreen ? 'flex min-h-0 flex-1 flex-col' : ''">
       <TabGroup
         size="sm"
+        :default-index="defaultTabIndex"
+        :class="fullscreen ? 'flex min-h-0 flex-1 flex-col' : ''"
         @change="switchTab"
       >
-        <div class="pl-4 pr-4 pb-4">
+        <div class="flex shrink-0 items-center border-b border-gray-default p-2">
           <TabList class="max-w-full overflow-x-auto">
             <Tab
               v-for="tab in tabsOptions"
@@ -106,13 +28,16 @@
             </Tab>
           </TabList>
         </div>
-        <TabPanels>
+        <TabPanels :class="fullscreen ? 'flex min-h-0 flex-1 flex-col' : ''">
           <TabPanel
             v-for="tab in tabsOptions"
             :key="tab.key"
-            class="px-4"
+            :class="[tab.key === 'data' || tab.key === 'map' ? '' : 'p-4', fullscreen ? 'flex min-h-0 flex-1 flex-col' : '']"
           >
-            <div v-if="tab.key === 'map'">
+            <div
+              v-if="tab.key === 'map'"
+              :class="fullscreen ? 'flex min-h-0 flex-1 flex-col' : 'h-[600px]'"
+            >
               <Pmtiles
                 v-if="hasPmtiles"
                 :resource="resource"
@@ -122,47 +47,81 @@
                 v-if="ogcWms"
                 :resource="resource"
               />
+              <PreviewUnavailable v-if="!hasPmtiles && !ogcWms && hasPmtilesError">
+                {{ t("La carte n'a pas pu être générée automatiquement pour ce fichier.") }}
+                <br>
+                <span class="text-gray-medium text-xs">{{ pmtilesError }}</span>
+              </PreviewUnavailable>
             </div>
-            <div v-if="tab.key === 'data'">
-              <JsonPreview
-                v-if="resource.format && resource.format.toLowerCase() === 'json'"
-                :resource="resource"
-              />
+            <div
+              v-if="tab.key === 'data'"
+              :class="fullscreen ? 'flex min-h-0 flex-1 flex-col' : ''"
+            >
+              <!-- Wrapped in Suspense so switching to this tab (or loading its data) shows
+                   the table skeleton instead of a blank gap while TabularExplorer resolves. -->
+              <Suspense
+                v-if="previewKind === 'tabular'"
+                :timeout="200"
+              >
+                <TabularExplorer :resource-id="resource.id">
+                  <TabularToolbar class="shrink-0 border-b border-gray-default p-2" />
+                  <TabularTable :fill="fullscreen" />
+                  <TabularMobileFilters />
+                </TabularExplorer>
+                <template #fallback>
+                  <TabularSkeleton :fill="fullscreen" />
+                </template>
+              </Suspense>
+
+              <!-- PDF is a full-bleed visual preview like the table and the map: it
+                   owns its own reader backdrop, so it sits outside the padded wrapper. -->
               <PdfPreview
-                v-else-if="resource.format && resource.format.toLowerCase() === 'pdf'"
+                v-else-if="previewKind === 'pdf'"
                 :resource="resource"
+                :fill="fullscreen"
               />
-              <XmlPreview
-                v-else-if="resource.format && resource.format.toLowerCase() === 'xml'"
-                :resource="resource"
-              />
-              <DatafairPreview
-                v-else-if="hasDatafairPreview"
-                :resource="resource"
-                :dataset="dataset"
-              />
-              <OpenApiViewer
-                v-else-if="hasOpenAPIPreview"
-                :url="resource.extras['apidocUrl'] as string"
-              />
-              <TabularExplorer
-                v-else-if="hasTabularData"
-                :resource-id="resource.id"
-              />
-              <PreviewUnavailable v-else>
-                <!-- "File too large to download" is the only analysis:error value from hydra for now -->
-                <template v-if="resource.extras['analysis:error'] === 'File too large to download'">
-                  {{ t("Ce fichier est trop volumineux pour être analysé et prévisualisé. Téléchargez-le depuis l'onglet Téléchargements.") }}
-                </template>
-                <template v-else-if="resource.extras['analysis:parsing:error']">
-                  {{ t("L'analyse de ce fichier a rencontré une erreur, l'aperçu n'est pas disponible. Téléchargez-le depuis l'onglet Téléchargements.") }}
-                  <br>
-                  <span class="text-gray-medium text-xs">{{ resource.extras['analysis:parsing:error'] }}</span>
-                </template>
-                <template v-else>
-                  {{ t("Ce fichier ne peut pas être prévisualisé. Téléchargez-le depuis l'onglet Téléchargements.") }}
-                </template>
-              </PreviewUnavailable>
+
+              <!-- Text previews stay padded inside the tab panel -->
+              <div
+                v-else
+                class="p-4"
+              >
+                <JsonPreview
+                  v-if="previewKind === 'json'"
+                  :resource="resource"
+                />
+                <XmlPreview
+                  v-else-if="previewKind === 'xml'"
+                  :resource="resource"
+                />
+                <ImagePreview
+                  v-else-if="previewKind === 'image'"
+                  :resource="resource"
+                />
+                <DatafairPreview
+                  v-else-if="previewKind === 'datafair'"
+                  :resource="resource"
+                  :dataset="dataset"
+                />
+                <OpenApiViewer
+                  v-else-if="previewKind === 'openapi'"
+                  :url="resource.extras['apidocUrl'] as string"
+                />
+                <PreviewUnavailable v-else>
+                  <!-- "File too large to download" is the only analysis:error value from hydra for now -->
+                  <template v-if="resource.extras['analysis:error'] === 'File too large to download'">
+                    {{ t("Ce fichier est trop volumineux pour être analysé et prévisualisé. Téléchargez-le avec le bouton Télécharger.") }}
+                  </template>
+                  <template v-else-if="resource.extras['analysis:parsing:error']">
+                    {{ t("L'analyse de ce fichier a rencontré une erreur, l'aperçu n'est pas disponible. Téléchargez-le avec le bouton Télécharger.") }}
+                    <br>
+                    <span class="text-gray-medium text-xs">{{ resource.extras['analysis:parsing:error'] }}</span>
+                  </template>
+                  <template v-else>
+                    {{ t("Ce fichier ne peut pas être prévisualisé. Téléchargez-le avec le bouton Télécharger.") }}
+                  </template>
+                </PreviewUnavailable>
+              </div>
             </div>
             <div v-if="tab.key === 'description'">
               <MarkdownViewer
@@ -179,12 +138,6 @@
             <div v-if="tab.key === 'metadata'">
               <Metadata :resource />
             </div>
-            <div v-if="tab.key === 'downloads'">
-              <Downloads
-                :resource="resource"
-                :dataset="dataset"
-              />
-            </div>
             <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>
@@ -209,13 +162,9 @@
 
 <script setup lang="ts">
 import { computed, defineAsyncComponent } from 'vue'
-import { RiDownloadLine, RiFileCopyLine, RiFileWarningLine, RiSubtractLine } from '@remixicon/vue'
+import { useRoute, useRouter } from 'vue-router'
 import PreviewUnavailable from '../ResourceAccordion/PreviewUnavailable.vue'
-import { toast } from 'vue-sonner'
-import BrandedButton from '../BrandedButton.vue'
-import CopyButton from '../CopyButton.vue'
 import MarkdownViewer from '../MarkdownViewer.vue'
-import ResourceIcon from '../ResourceAccordion/ResourceIcon.vue'
 import OpenApiViewer from '../OpenApiViewer/OpenApiViewer.vue'
 import TabGroup from '../Tabs/TabGroup.vue'
 import TabList from '../Tabs/TabList.vue'
@@ -223,19 +172,19 @@ import Tab from '../Tabs/Tab.vue'
 import TabPanels from '../Tabs/TabPanels.vue'
 import TabPanel from '../Tabs/TabPanel.vue'
 import TabularExplorer from '../TabularExplorer/TabularExplorer.vue'
+import TabularToolbar from '../TabularExplorer/TabularToolbar.vue'
+import TabularTable from '../TabularExplorer/TabularTable.vue'
+import TabularMobileFilters from '../TabularExplorer/TabularMobileFilters.vue'
+import TabularSkeleton from '../TabularExplorer/TabularSkeleton.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 ResourceViewerHeader from './ResourceViewerHeader.vue'
 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 { provideTabularProfile } from '../../composables/useTabularProfile'
+import type { RouteLocationRaw } from 'vue-router'
 import type { Resource } from '../../types/resources'
 import type { Dataset, DatasetV2 } from '../../types/datasets'
 
@@ -248,6 +197,9 @@ const PdfPreview = defineAsyncComponent(() =>
 const XmlPreview = defineAsyncComponent(() =>
   import('../ResourceAccordion/XmlPreview.client.vue'),
 )
+const ImagePreview = defineAsyncComponent(() =>
+  import('../ResourceAccordion/ImagePreview.client.vue'),
+)
 const DatafairPreview = defineAsyncComponent(() =>
   import('../ResourceAccordion/Datafair.client.vue'),
 )
@@ -258,60 +210,61 @@ const Pmtiles = defineAsyncComponent(() =>
   import('../ResourceAccordion/Pmtiles.client.vue'),
 )
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   dataset: Dataset | DatasetV2
   resource: Resource
   resources?: Resource[]
-}>()
-
-const emit = defineEmits<{
-  select: [resource: Resource]
-}>()
+  resourceTo: (resource: Resource) => RouteLocationRaw
+  // When provided (inline mode), shows an "Explorer" button next to the download
+  // action that opens the fullscreen explorer on the current resource.
+  exploreTo?: (resource: Resource) => string
+  // Overrides the "Copier le lien" target.
+  resourceExternalUrl?: (resource: Resource) => string
+  replace?: boolean
+  // Fullscreen mode: make the viewer a flex column so the table fills down to the
+  // bottom, and hide the inline download/visit/copy actions — they're shown in the
+  // dataset context bar above. Inline mode (dataset page) shows them in the header.
+  fullscreen?: boolean
+}>(), {
+  fullscreen: false,
+})
 
 const { t } = useTranslation()
 const config = useComponentsConfig()
-const { formatRelativeIfRecentDate } = useFormatDate()
+const route = useRoute()
+const router = useRouter()
 
 const {
+  previewKind,
   hasTabularData,
   hasPmtiles,
-  hasDatafairPreview,
-  hasOpenAPIPreview,
-  ogcService,
+  hasPmtilesError,
+  pmtilesError,
   ogcWms,
-  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))
+// Only tabular resources have one: asking for the profile of a PDF or an image is a
+// request to the Tabular API that can only fail.
+if (hasTabularData.value) {
+  await provideTabularProfile(() => props.resource.id)
+}
 
-const format = computed(() => getResourceFormatIcon(props.resource.format) ? props.resource.format : 'Fichier')
-const availabilityChecked = computed(() => props.resource.extras && 'check:available' in props.resource.extras)
-const unavailable = computed(() => availabilityChecked.value && props.resource.extras['check:available'] === false)
-const downloadButtonTitle = computed(() => {
-  if (unavailable.value) {
-    return t('Le robot de {platform} n\'a pas pu accéder à ce fichier - Télécharger le fichier en {format}', { platform: config.name, format: format.value })
-  }
-  return t('Télécharger le fichier en {format}', { format: format.value })
+// 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.
+const defaultTabIndex = computed(() => {
+  const index = tabsOptions.value.findIndex(option => option.key === route.query.tab)
+  return index === -1 ? 0 : index
 })
 
-const copyResourceUrl = async () => {
-  try {
-    await navigator.clipboard.writeText(props.resource.url)
-    toast.success(t('Lien copié !'))
-  }
-  catch {
-    toast.error(t('Impossible de copier dans le presse-papier'))
-  }
-}
-
 const switchTab = (index: number) => {
   const option = tabsOptions.value[index]
   if (!option) return
+  // The first tab is the default: drop `tab` rather than writing it in the URL.
+  const { tab: _, ...query } = route.query
+  router.replace({ query: index === 0 ? query : { ...query, tab: option.key } })
   trackEvent('View resource tab', props.resource.id, option.label)
   if (option.key === 'data') {
     trackEvent('Show preview', props.resource.id)