From 7cd87147bdbbdbbc062ca2eb49cf043eb60453ca Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Wed, 13 May 2026 14:19:41 +0200
Subject: [PATCH 1/3] feat(notification): add mark as read

---
 components/SiteHeader/SiteHeader.vue | 50 ++++++++++++++++++----------
 composables/useMarkAsRead.ts         | 30 +++++++++++++++++
 2 files changed, 62 insertions(+), 18 deletions(-)

diff --git a/components/SiteHeader/SiteHeader.vue b/components/SiteHeader/SiteHeader.vue
index b9e2494af..5d9e7ce73 100644
--- a/components/SiteHeader/SiteHeader.vue
+++ b/components/SiteHeader/SiteHeader.vue
@@ -320,23 +320,35 @@
                             </p>
                           </div>
                         </template>
-                        <button
-                          v-if="nextPage"
-                          type="button"
-                          class="w-full bg-datagouv hover:bg-datagouv-dark text-white p-2 flex items-center justify-center"
-                          :disabled="isLoading"
-                          @click="loadMoreNotifications"
+                        <div
+                          v-if="nextPage || pendingNotifications?.total"
+                          class="px-2 py-2 space-y-2 border-t border-gray-default"
                         >
-                          <AnimatedLoader
-                            v-if="isLoading"
-                            class="size-5"
-                          />
-                          <RiAddLine
-                            v-else
-                            class="size-5"
-                          />
-                          {{ t('Charger plus de notifications') }}
-                        </button>
+                          <BrandedButton
+                            v-if="nextPage"
+                            type="button"
+                            color="primary"
+                            size="xs"
+                            :icon="RiAddLine"
+                            :loading="isLoading"
+                            class="w-full rounded-full"
+                            @click="loadMoreNotifications"
+                          >
+                            {{ t('Charger plus de notifications') }}
+                          </BrandedButton>
+                          <BrandedButton
+                            v-if="pendingNotifications?.total"
+                            type="button"
+                            color="secondary"
+                            size="xs"
+                            :icon="RiCheckLine"
+                            :loading="loading"
+                            class="w-full rounded-full"
+                            @click="() => markWithoutActionAsRead(notificationsCombinedList)"
+                          >
+                            {{ t('Marquer comme lues') }}
+                          </BrandedButton>
+                        </div>
                       </template>
                     </Toggletip>
                   </li>
@@ -508,12 +520,13 @@
 <script setup lang="ts">
 import { NuxtImg as _NuxtImg } from '#components'
 import type { Component } from 'vue'
-import { AnimatedLoader, BrandedButton, Toggletip, useGetUserAvatar, toast } from '@datagouv/components-next'
-import { RiAccountCircleLine, RiAddLine, RiDatabase2Line, RiInbox2Line, RiLockLine, RiMenuLine, RiSearchLine, RiTerminalLine, RiLineChartLine, RiServerLine, RiArticleLine, RiSettings3Line, RiLogoutBoxRLine, RiBuilding2Line, RiCloseLine } from '@remixicon/vue'
+import { BrandedButton, Toggletip, useGetUserAvatar, toast } from '@datagouv/components-next'
+import { RiAccountCircleLine, RiAddLine, RiCheckLine, RiDatabase2Line, RiInbox2Line, RiLockLine, RiMenuLine, RiSearchLine, RiTerminalLine, RiLineChartLine, RiServerLine, RiArticleLine, RiSettings3Line, RiLogoutBoxRLine, RiBuilding2Line, RiCloseLine } from '@remixicon/vue'
 import { Disclosure, DisclosureButton, DisclosurePanel, Menu, MenuButton, MenuItem, MenuItems, Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
 import CdataLink from '../CdataLink.vue'
 import LogoAsText from '../LogoAsText.vue'
 import LogoImage from '../LogoImage.vue'
+import { useMarkAsRead } from '~/composables/useMarkAsRead'
 import { useNotifications } from '~/composables/useNotifications.client'
 import { useLogout, useMaybeMe } from '~/utils/auth'
 
@@ -534,6 +547,7 @@ const router = useRouter()
 const route = useRoute()
 const { isLoading } = useLoadingIndicator()
 const { refreshNotifications, loadMoreNotifications, pendingNotifications, nextPage, notificationsCombinedList } = useNotifications()
+const { markWithoutActionAsRead, loading } = useMarkAsRead()
 
 const menu = [
   { label: t('Données'), link: '/datasets' },
diff --git a/composables/useMarkAsRead.ts b/composables/useMarkAsRead.ts
index c0bb7fa77..ad8d921be 100644
--- a/composables/useMarkAsRead.ts
+++ b/composables/useMarkAsRead.ts
@@ -20,8 +20,38 @@ export function useMarkAsRead() {
     }
   }
 
+  const markWithoutActionAsRead = async (notifications: Array<UserNotification>) => {
+    const withoutActionUnread = notifications.filter((n) => {
+      const cls = n.details.class
+      if (cls === 'MembershipRequestNotificationDetails') return false
+      if (cls === 'TransferRequestNotificationDetails') return false
+      if (cls === 'ValidateHarvesterNotificationDetails') {
+        return n.details.status !== 'pending'
+      }
+      return !n.handled_at
+    })
+
+    if (withoutActionUnread.length === 0) {
+      return
+    }
+
+    try {
+      loading.value = true
+      await Promise.all(
+        withoutActionUnread.map(notification =>
+          $api(`/api/1/notifications/${notification.id}/read/`, { method: 'POST' }),
+        ),
+      )
+      await refreshNotifications()
+    }
+    finally {
+      loading.value = false
+    }
+  }
+
   return {
     markAsRead,
+    markWithoutActionAsRead,
     loading,
   }
 }

From c4443405a35d7275ad884c404a844832684525ed Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Fri, 29 May 2026 14:39:02 +0200
Subject: [PATCH 2/3] fix(notifications): type

---
 composables/useMarkAsRead.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/composables/useMarkAsRead.ts b/composables/useMarkAsRead.ts
index ad8d921be..3f8935b8b 100644
--- a/composables/useMarkAsRead.ts
+++ b/composables/useMarkAsRead.ts
@@ -1,3 +1,4 @@
+import type { DeepReadonly } from 'vue'
 import type { UserNotification } from '~/types/notifications'
 
 export function useMarkAsRead() {
@@ -20,7 +21,7 @@ export function useMarkAsRead() {
     }
   }
 
-  const markWithoutActionAsRead = async (notifications: Array<UserNotification>) => {
+  const markWithoutActionAsRead = async (notifications: DeepReadonly<Array<UserNotification>> | Array<UserNotification>) => {
     const withoutActionUnread = notifications.filter((n) => {
       const cls = n.details.class
       if (cls === 'MembershipRequestNotificationDetails') return false

From 6bae7179c4c6fde4fcc4b21cb9c443a43c719719 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Mon, 1 Jun 2026 10:38:14 +0200
Subject: [PATCH 3/3] refac(notifications): improve detection of actions
 consistency

---
 components/Notifications/MembershipRequest.vue |  1 -
 .../Notifications/NotificationLayout.vue       | 10 +++++-----
 components/Notifications/NotificationsList.vue |  3 +--
 components/Notifications/TransferRequest.vue   |  1 -
 components/Notifications/ValidateHarvester.vue |  1 -
 components/SiteHeader/SiteHeader.vue           |  6 +++---
 composables/useMarkAsRead.ts                   | 18 ++++++------------
 composables/useNotifications.client.ts         |  9 ++++++---
 utils/notifications.ts                         |  9 +++++++++
 9 files changed, 30 insertions(+), 28 deletions(-)
 create mode 100644 utils/notifications.ts

diff --git a/components/Notifications/MembershipRequest.vue b/components/Notifications/MembershipRequest.vue
index ca7ca7520..115cbdfa3 100644
--- a/components/Notifications/MembershipRequest.vue
+++ b/components/Notifications/MembershipRequest.vue
@@ -3,7 +3,6 @@
     :icon="notification.details.kind === 'invitation' ? RiMailSendLine : RiUserAddLine"
     :title="notification.details.kind === 'invitation' ? $t('Invitation à rejoindre une organisation') : $t('Demande d\'adhésion')"
     :notification="notification"
-    :requires-action="true"
     :title-link="notification.details.kind === 'invitation' ? '/admin/me/profile' : `/admin/organizations/${notification.details.request_organization.id}/members`"
     :title-link-title="$t('Voir la demande')"
   >
diff --git a/components/Notifications/NotificationLayout.vue b/components/Notifications/NotificationLayout.vue
index 24bba6b2f..58e2d6234 100644
--- a/components/Notifications/NotificationLayout.vue
+++ b/components/Notifications/NotificationLayout.vue
@@ -34,12 +34,12 @@
       <div
         v-else-if="!notification.handled_at"
         class="size-2 rounded-full mt-0.5"
-        :class="requiresAction ? 'bg-danger' : 'bg-new-primary'"
+        :class="requireAction(notification) ? 'bg-danger' : 'bg-new-primary'"
       />
     </div>
-    <!-- Auto overlay: only when no titleLink and unread -->
+    <!-- overlay: only when no titleLink and unread -->
     <button
-      v-if="!titleLink && !notification.handled_at && !requiresAction"
+      v-if="!titleLink && !notification.handled_at && !requireAction(notification)"
       class="after:absolute after:inset-0 bg-none"
       :title="$t('Marquer la notification comme lue')"
       @click="handleMarkAsRead"
@@ -52,6 +52,7 @@ import { AnimatedLoader, useFormatDate } from '@datagouv/components-next'
 import type { Component } from 'vue'
 import CdataLink from '../CdataLink.vue'
 import type { UserNotification } from '~/types/notifications'
+import { requireAction } from '~/utils/notifications'
 
 const props = defineProps<{
   icon: Component
@@ -59,14 +60,13 @@ const props = defineProps<{
   notification: UserNotification
   titleLink?: string
   titleLinkTitle?: string
-  requiresAction?: boolean
 }>()
 
 const { formatDate } = useFormatDate()
 const { loading, markAsRead } = useMarkAsRead()
 
 const handleMarkAsRead = () => {
-  if (!props.requiresAction) {
+  if (!props.notification.handled_at && !requireAction(props.notification)) {
     markAsRead(props.notification)
   }
 }
diff --git a/components/Notifications/NotificationsList.vue b/components/Notifications/NotificationsList.vue
index acee91cd5..8e668140a 100644
--- a/components/Notifications/NotificationsList.vue
+++ b/components/Notifications/NotificationsList.vue
@@ -46,12 +46,11 @@
 </template>
 
 <script setup lang="ts">
-import type { DeepReadonly } from 'vue'
 import type { DiscussionSubjectTypes } from '~/types/discussions'
 import type { DiscussionNotification, MembershipAcceptedNotification, MembershipRefusedNotification, MembershipRequestNotification, NewBadgeNotification, DataserviceCreatedNotification, ReuseCreatedNotification, TransferRequestNotification, UserNotification, ValidateHarvesterNotification } from '~/types/notifications'
 
 const props = defineProps<{
-  notifications: DeepReadonly<Array<UserNotification>>
+  notifications: Array<UserNotification>
 }>()
 
 const subjects = ref<Record<string, DiscussionSubjectTypes | null>>({})
diff --git a/components/Notifications/TransferRequest.vue b/components/Notifications/TransferRequest.vue
index 6c4b7c166..407f5dca1 100644
--- a/components/Notifications/TransferRequest.vue
+++ b/components/Notifications/TransferRequest.vue
@@ -3,7 +3,6 @@
     :icon="RiSendPlaneLine"
     :title="$t('Demande de transfert')"
     :notification="notification"
-    :requires-action="true"
     :title-link="link"
     :title-link-title="$t('Voir la demande')"
   >
diff --git a/components/Notifications/ValidateHarvester.vue b/components/Notifications/ValidateHarvester.vue
index c50b1a3e9..163ae892d 100644
--- a/components/Notifications/ValidateHarvester.vue
+++ b/components/Notifications/ValidateHarvester.vue
@@ -3,7 +3,6 @@
     :icon="harvesterIcon"
     :title="statusLabel"
     :notification="notification"
-    :requires-action="notification.details.status === 'pending'"
     :title-link="`/admin/harvesters/${notification.details.source.id}`"
     :title-link-title="$t('Voir le moissonneur')"
   >
diff --git a/components/SiteHeader/SiteHeader.vue b/components/SiteHeader/SiteHeader.vue
index 5d9e7ce73..45a41f567 100644
--- a/components/SiteHeader/SiteHeader.vue
+++ b/components/SiteHeader/SiteHeader.vue
@@ -321,7 +321,7 @@
                           </div>
                         </template>
                         <div
-                          v-if="nextPage || pendingNotifications?.total"
+                          v-if="nextPage || notificationsToRead.length > 0"
                           class="px-2 py-2 space-y-2 border-t border-gray-default"
                         >
                           <BrandedButton
@@ -337,7 +337,7 @@
                             {{ t('Charger plus de notifications') }}
                           </BrandedButton>
                           <BrandedButton
-                            v-if="pendingNotifications?.total"
+                            v-if="notificationsToRead.length > 0"
                             type="button"
                             color="secondary"
                             size="xs"
@@ -546,7 +546,7 @@ const currentRoute = useRoute()
 const router = useRouter()
 const route = useRoute()
 const { isLoading } = useLoadingIndicator()
-const { refreshNotifications, loadMoreNotifications, pendingNotifications, nextPage, notificationsCombinedList } = useNotifications()
+const { refreshNotifications, loadMoreNotifications, pendingNotifications, nextPage, notificationsCombinedList, notificationsToRead } = useNotifications()
 const { markWithoutActionAsRead, loading } = useMarkAsRead()
 
 const menu = [
diff --git a/composables/useMarkAsRead.ts b/composables/useMarkAsRead.ts
index 3f8935b8b..707d8e6e4 100644
--- a/composables/useMarkAsRead.ts
+++ b/composables/useMarkAsRead.ts
@@ -1,5 +1,5 @@
-import type { DeepReadonly } from 'vue'
 import type { UserNotification } from '~/types/notifications'
+import { requireAction } from '~/utils/notifications'
 
 export function useMarkAsRead() {
   const loading = ref(false)
@@ -21,25 +21,19 @@ export function useMarkAsRead() {
     }
   }
 
-  const markWithoutActionAsRead = async (notifications: DeepReadonly<Array<UserNotification>> | Array<UserNotification>) => {
-    const withoutActionUnread = notifications.filter((n) => {
-      const cls = n.details.class
-      if (cls === 'MembershipRequestNotificationDetails') return false
-      if (cls === 'TransferRequestNotificationDetails') return false
-      if (cls === 'ValidateHarvesterNotificationDetails') {
-        return n.details.status !== 'pending'
-      }
-      return !n.handled_at
+  const markWithoutActionAsRead = async (notifications: Array<UserNotification>) => {
+    const withoutAction = notifications.filter((n) => {
+      return !n.handled_at && !requireAction(n)
     })
 
-    if (withoutActionUnread.length === 0) {
+    if (withoutAction.length === 0) {
       return
     }
 
     try {
       loading.value = true
       await Promise.all(
-        withoutActionUnread.map(notification =>
+        withoutAction.map(notification =>
           $api(`/api/1/notifications/${notification.id}/read/`, { method: 'POST' }),
         ),
       )
diff --git a/composables/useNotifications.client.ts b/composables/useNotifications.client.ts
index 903dc12d3..b998661bc 100644
--- a/composables/useNotifications.client.ts
+++ b/composables/useNotifications.client.ts
@@ -1,11 +1,13 @@
 import type { UserNotification } from '~/types/notifications'
 import type { PaginatedArray } from '~/types/types'
+import { requireAction } from '~/utils/notifications'
 
 const page = ref(1)
 const PAGE_SIZE = 10
 const nextPage = ref<string | null>(null)
 const pendingNotifications = ref<PaginatedArray<UserNotification> | null>(null)
 const notificationsCombinedList = ref<Array<UserNotification>>([])
+const notificationsToRead = computed(() => notificationsCombinedList.value.filter(n => !n.handled_at && !requireAction(n)))
 
 export function useNotifications() {
   const { start, finish } = useLoadingIndicator()
@@ -58,9 +60,10 @@ export function useNotifications() {
     return loadNotifications()
   }
   return {
-    pendingNotifications: readonly(pendingNotifications),
-    nextPage: readonly(nextPage),
-    notificationsCombinedList: readonly(notificationsCombinedList),
+    pendingNotifications: pendingNotifications,
+    nextPage: nextPage,
+    notificationsCombinedList: notificationsCombinedList,
+    notificationsToRead,
     loadNotifications,
     loadMoreNotifications,
     refreshNotifications,
diff --git a/utils/notifications.ts b/utils/notifications.ts
new file mode 100644
index 000000000..a1c89d5ba
--- /dev/null
+++ b/utils/notifications.ts
@@ -0,0 +1,9 @@
+import type { UserNotification } from '~/types/notifications'
+
+export function requireAction(notification: UserNotification) {
+  const cls = notification.details.class
+  if (notification.handled_at) return false
+  return cls === 'MembershipRequestNotificationDetails'
+    || cls === 'TransferRequestNotificationDetails'
+    || (cls === 'ValidateHarvesterNotificationDetails' && notification.details.status === 'pending')
+}