feat(datasets): add Atom feed button to search results

Move Atom feed link from page to SearchPage component as requested.
Uses BrandedButton with RiRssLine icon, positioned next to sort control.
URL built from nonFalsyParams for reactive filter support.

Requires opendatateam/udata#3578 for filter support on the Atom endpoint.

Author: bjperson

components/Datasets/SearchPage.vue

@@ -185,33 +185,43 @@
           >
             {{ t("{count} résultats | {count} résultat | {count} résultats", searchResults.total) }}
           </p>
-          <div class="fr-col-auto fr-grid-row fr-grid-row--middle">
-            <label
-              for="sort-search"
-              class="fr-col-auto text-sm m-0 mr-2"
-            >
-              {{ t('Trier par :') }}
-            </label>
-            <div class="fr-col">
-              <select
-                id="sort-search"
-                v-model="searchSort"
-                class="fr-select !shadow-input-blue"
-                name="sort"
-                @change="currentPage = 1"
+          <div class="fr-col-auto fr-grid-row fr-grid-row--middle gap-4">
+            <div class="fr-grid-row fr-grid-row--middle">
+              <label
+                for="sort-search"
+                class="fr-col-auto text-sm m-0 mr-2"
               >
-                <option value="">
-                  {{ t('Pertinence') }}
-                </option>
-                <option
-                  v-for="{ value, label } in sortOptions"
-                  :key="label"
-                  :value="value"
+                {{ t('Trier par :') }}
+              </label>
+              <div class="fr-col">
+                <select
+                  id="sort-search"
+                  v-model="searchSort"
+                  class="fr-select !shadow-input-blue"
+                  name="sort"
+                  @change="currentPage = 1"
                 >
-                  {{ label }}
-                </option>
-              </select>
+                  <option value="">
+                    {{ t('Pertinence') }}
+                  </option>
+                  <option
+                    v-for="{ value, label } in sortOptions"
+                    :key="label"
+                    :value="value"
+                  >
+                    {{ label }}
+                  </option>
+                </select>
+              </div>
             </div>
+            <BrandedButton
+              :href="atomFeedUrl"
+              :icon="RiRssLine"
+              :title="t('Flux Atom de cette recherche')"
+              color="secondary"
+              size="sm"
+              external
+            />
           </div>
         </div>
         <transition mode="out-in">
@@ -280,7 +290,7 @@
 import { BrandedButton, getLink, getOrganizationTypes, LoadingBlock, Pagination, OTHER, USER } from '@datagouv/components-next'
 import type { DatasetV2, License, Organization, OrganizationTypes, RegisteredSchema, TranslatedBadge, OrganizationOrSuggest } from '@datagouv/components-next'
 import { ref, computed, type Component } from 'vue'
-import { RiCloseCircleLine, RiDownloadLine } from '@remixicon/vue'
+import { RiCloseCircleLine, RiDownloadLine, RiRssLine } from '@remixicon/vue'
 import { computedAsync, debouncedRef, useUrlSearchParams } from '@vueuse/core'
 import SearchInput from '~/components/Search/SearchInput.vue'
 import type { PaginatedArray, SpatialGranularity, SpatialZone, Tag } from '~/types/types'
@@ -320,6 +330,12 @@ const nonFalsyParams = computed(() => {
   return { ...propsParams, ...Object.fromEntries(filteredParams), page_size: pageSize }
 })
 
+const atomFeedUrl = computed(() => {
+  const { page, page_size, ...feedParams } = nonFalsyParams.value
+  const query = new URLSearchParams(feedParams).toString()
+  return `${config.public.apiBase}/api/1/datasets/recent.atom${query ? `?${query}` : ''}`
+})
+
 const { data: searchResults, status: searchResultsStatus, refresh } = await useAPI<PaginatedArray<DatasetV2>>('/api/2/datasets/search/', {
   params: nonFalsyParams,
   lazy: true,

pages/datasets/search.vue

@@ -11,43 +11,18 @@
       </BreadcrumbItem>
     </Breadcrumb>
 
-    <div class="flex justify-between items-start">
-      <div>
-        <h1 class="text-gray-title font-extrabold text-2xl mb-2">
-          {{ $t('Jeux de données') }}
-        </h1>
-        <p
-          v-if="site"
-          class="block mb-3"
-        >
-          {{ $t('Rechercher parmi les {count} jeux de données sur {site}', {
-            count: site.metrics.datasets,
-            site: config.public.title,
-          }) }}
-        </p>
-      </div>
-      <a
-        :href="`${config.public.apiBase}/api/1/datasets/recent.atom`"
-        class="flex items-center gap-1 text-sm text-blue-500 hover:text-blue-700"
-        :title="$t('Flux Atom de cette recherche')"
-        @click.prevent="openRss"
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="h-4 w-4"
-          viewBox="0 0 24 24"
-          fill="currentColor"
-        >
-          <circle
-            cx="6.18"
-            cy="17.82"
-            r="2.18"
-          />
-          <path d="M4 4.44v2.83c7.03 0 12.73 5.7 12.73 12.73h2.83c0-8.59-6.97-15.56-15.56-15.56zm0 5.66v2.83c3.9 0 7.07 3.17 7.07 7.07h2.83c0-5.47-4.43-9.9-9.9-9.9z" />
-        </svg>
-        RSS
-      </a>
-    </div>
+    <h1 class="text-gray-title font-extrabold text-2xl mb-2">
+      {{ $t('Jeux de données') }}
+    </h1>
+    <p
+      v-if="site"
+      class="block mb-3"
+    >
+      {{ $t('Rechercher parmi les {count} jeux de données sur {site}', {
+        count: site.metrics.datasets,
+        site: config.public.title,
+      }) }}
+    </p>
 
     <DatasetsSearchPage />
   </div>
@@ -64,12 +39,5 @@ useSeoMeta({
 
 const config = useRuntimeConfig()
 
-function openRss() {
-  const searchParams = window.location.search
-  const baseUrl = `${config.public.apiBase}/api/1/datasets/recent.atom`
-  const url = searchParams ? `${baseUrl}${searchParams}` : baseUrl
-  window.open(url, '_blank')
-}
-
 const { data: site } = await useAPI<Site>('/api/1/site/')
 </script>