feat: add notification center with bell dropdown, full page, and workspace scoping (Story 3.3)

Enhance NotificationDropdown with type-specific icons, French description builder,
click-to-navigate with mark-as-read, and "Voir toutes les notifications" link.
Add full notifications page at /notifications with pagination (25/page), individual
mark-as-read, and empty state. Includes code review fixes: workspace-scoped unread
count and dropdown items, race condition fix (mark-as-read before navigate),
efficient markAllAsRead via direct update, deleted declaration URL handling,
and per-workspace cache keys. 7 new feature tests.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

resources/js/components/NotificationDropdown.vue

@@ -1,6 +1,13 @@
 <script setup lang="ts">
 import { router, usePage } from '@inertiajs/vue3';
-import { Bell } from 'lucide-vue-next';
+import {
+    AlertTriangle,
+    Bell,
+    FileUp,
+    Mail,
+    RefreshCw,
+    Send,
+} from 'lucide-vue-next';
 import { computed } from 'vue';
 import { Button } from '@/components/ui/button';
 import {
@@ -11,15 +18,16 @@ import {
     DropdownMenuSeparator,
     DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
+import type { NotificationType } from '@/types/notification';
 
 type NotificationItem = {
     id: string;
     type: string;
     data: {
+        notification_type?: NotificationType;
         declaration_id?: number;
         declaration_title?: string;
-        mentioned_by_name?: string;
-        message?: string;
+        sender_name?: string;
         url?: string;
     };
     read_at: string | null;
@@ -30,9 +38,18 @@ type UserNotifications = {
     unread_count: number;
     readUrl: string | null;
     readAllUrl: string | null;
+    notificationsUrl: string | null;
     items: NotificationItem[] | undefined;
 };
 
+const iconMap: Record<NotificationType, typeof Send> = {
+    nudge: Send,
+    declaration_overdue: AlertTriangle,
+    document_uploaded: FileUp,
+    bulk_notification: Mail,
+    status_changed: RefreshCw,
+};
+
 const page = usePage();
 
 const userNotifications = computed<UserNotifications>(() => {
@@ -44,32 +61,64 @@ const unreadCount = computed(() => userNotifications.value?.unread_count ?? 0);
 const items = computed(() => userNotifications.value?.items ?? []);
 const isLoading = computed(() => userNotifications.value?.items === undefined);
 
+function getIcon(notificationType?: NotificationType) {
+    if (!notificationType) return Bell;
+    return iconMap[notificationType] ?? Bell;
+}
+
+function getDescription(notification: NotificationItem): string {
+    const type = notification.data?.notification_type;
+    const title = notification.data?.declaration_title ?? 'Déclaration';
+    const sender = notification.data?.sender_name;
+
+    switch (type) {
+        case 'nudge':
+            return sender
+                ? `Relance de ${sender} sur ${title}`
+                : `Relance sur ${title}`;
+        case 'declaration_overdue':
+            return `Déclaration en retard : ${title}`;
+        case 'document_uploaded':
+            return `Document téléversé pour ${title}`;
+        case 'status_changed':
+            return `Statut modifié : ${title}`;
+        case 'bulk_notification':
+            return `Notification groupée : ${title}`;
+        default:
+            return title;
+    }
+}
+
 function markAsRead(notification: NotificationItem) {
     const readUrl = userNotifications.value?.readUrl;
     if (!readUrl) return;
 
-    // Replace __ID__ placeholder with actual notification ID
-    // This is a convention: the server provides a URL template with __ID__ as placeholder
     const url = readUrl.replace('__ID__', notification.id);
     router.post(url, {}, { preserveScroll: true });
 }
 
 function navigateToNotification(notification: NotificationItem) {
     const targetUrl = notification.data?.url;
-    if (!targetUrl) return;
 
     if (!notification.read_at) {
-        markAsRead(notification);
+        const readUrl = userNotifications.value?.readUrl;
+        if (readUrl) {
+            const url = readUrl.replace('__ID__', notification.id);
+            router.post(url, {}, {
+                preserveScroll: true,
+                onSuccess: () => {
+                    if (targetUrl) {
+                        router.visit(targetUrl);
+                    }
+                },
+            });
+            return;
+        }
     }
 
-    router.visit(targetUrl, {
-        onError: () => {
-            // Declaration may have been deleted — mark as read anyway
-            if (!notification.read_at) {
-                markAsRead(notification);
-            }
-        },
-    });
+    if (targetUrl) {
+        router.visit(targetUrl);
+    }
 }
 
 function markAllAsRead() {
@@ -78,6 +127,13 @@ function markAllAsRead() {
 
     router.post(readAllUrl, {}, { preserveScroll: true });
 }
+
+function navigateToAll() {
+    const url = userNotifications.value?.notificationsUrl;
+    if (url) {
+        router.visit(url);
+    }
+}
 </script>
 
 <template>
@@ -94,7 +150,18 @@ function markAllAsRead() {
             </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent align="end" class="w-80">
-            <DropdownMenuLabel>Notifications</DropdownMenuLabel>
+            <div class="flex items-center justify-between px-2 py-1.5">
+                <DropdownMenuLabel class="p-0">
+                    Notifications
+                </DropdownMenuLabel>
+                <button
+                    v-if="unreadCount > 0"
+                    class="text-xs text-muted-foreground hover:text-foreground"
+                    @click.stop="markAllAsRead"
+                >
+                    Tout marquer comme lu
+                </button>
+            </div>
             <DropdownMenuSeparator />
 
             <div
@@ -106,57 +173,50 @@ function markAllAsRead() {
 
             <div
                 v-else-if="!items.length"
-                class="px-2 py-4 text-center text-sm text-muted-foreground"
+                class="flex flex-col items-center gap-2 px-2 py-6 text-center text-sm text-muted-foreground"
             >
-                Aucune notification.
+                <Bell class="size-8 text-muted-foreground/50" />
+                Aucune notification
             </div>
 
             <template v-else>
                 <DropdownMenuItem
                     v-for="notification in items"
                     :key="notification.id"
-                    class="flex cursor-pointer flex-col items-start gap-1 p-3"
-                    :class="{ 'opacity-50': notification.read_at }"
+                    class="flex cursor-pointer items-start gap-3 p-3"
+                    :class="{
+                        'bg-muted/50': !notification.read_at,
+                        'opacity-60': notification.read_at,
+                    }"
                     @click="navigateToNotification(notification)"
                 >
-                    <div class="flex w-full items-center justify-between gap-2">
-                        <span class="text-xs font-medium">
-                            {{
-                                notification.data?.mentioned_by_name ??
-                                'Système'
-                            }}
-                        </span>
-                        <span class="text-xs text-muted-foreground">
+                    <component
+                        :is="getIcon(notification.data?.notification_type)"
+                        class="mt-0.5 size-4 shrink-0 text-muted-foreground"
+                    />
+                    <div class="flex-1 space-y-1">
+                        <p class="text-xs leading-snug">
+                            {{ getDescription(notification) }}
+                        </p>
+                        <p class="text-xs text-muted-foreground">
                             {{ notification.created_at }}
-                        </span>
+                        </p>
                     </div>
-                    <p class="text-xs text-muted-foreground">
-                        <span
-                            v-if="notification.data?.declaration_title"
-                            class="font-medium text-foreground"
-                        >
-                            {{ notification.data.declaration_title }}
-                        </span>
-                        {{
-                            notification.data?.message
-                                ? ` — ${notification.data.message}`
-                                : ''
-                        }}
-                    </p>
                     <span
                         v-if="!notification.read_at"
-                        class="size-1.5 rounded-full bg-primary"
+                        class="mt-1 size-2 shrink-0 rounded-full bg-primary"
                     />
                 </DropdownMenuItem>
+
             </template>
 
-            <DropdownMenuSeparator v-if="items.length > 0" />
+            <DropdownMenuSeparator v-if="!isLoading" />
             <DropdownMenuItem
-                v-if="unreadCount > 0"
+                v-if="!isLoading"
                 class="justify-center text-xs text-muted-foreground"
-                @click="markAllAsRead"
+                @click="navigateToAll"
             >
-                Marquer tout comme lu
+                Voir toutes les notifications
             </DropdownMenuItem>
         </DropdownMenuContent>
     </DropdownMenu>

resources/js/pages/notifications/Index.vue

@@ -0,0 +1,199 @@
+<script setup lang="ts">
+import { Head, router } from '@inertiajs/vue3';
+import { computed } from 'vue';
+import {
+    AlertTriangle,
+    Bell,
+    CheckCheck,
+    FileUp,
+    Mail,
+    RefreshCw,
+    Send,
+} from 'lucide-vue-next';
+import Heading from '@/components/Heading.vue';
+import { Button } from '@/components/ui/button';
+import AppLayout from '@/layouts/AppLayout.vue';
+import type { AppNotification, NotificationType } from '@/types/notification';
+
+type Props = {
+    notifications: {
+        data: AppNotification[];
+        links: { url: string | null; label: string; active: boolean }[];
+        current_page: number;
+        last_page: number;
+    };
+    markAllReadUrl: string;
+    readUrl: string;
+};
+
+const props = defineProps<Props>();
+
+const hasUnread = computed(() =>
+    props.notifications.data.some((n) => !n.read_at),
+);
+
+const iconMap: Record<NotificationType, typeof Send> = {
+    nudge: Send,
+    declaration_overdue: AlertTriangle,
+    document_uploaded: FileUp,
+    bulk_notification: Mail,
+    status_changed: RefreshCw,
+};
+
+function getIcon(notificationType?: NotificationType) {
+    if (!notificationType) return Bell;
+    return iconMap[notificationType] ?? Bell;
+}
+
+function getDescription(notification: AppNotification): string {
+    const type = notification.data?.notification_type;
+    const title = notification.data?.declaration_title ?? 'Déclaration';
+    const sender = notification.data?.sender_name;
+
+    switch (type) {
+        case 'nudge':
+            return sender
+                ? `Relance de ${sender} sur ${title}`
+                : `Relance sur ${title}`;
+        case 'declaration_overdue':
+            return `Déclaration en retard : ${title}`;
+        case 'document_uploaded':
+            return `Document téléversé pour ${title}`;
+        case 'status_changed':
+            return `Statut modifié : ${title}`;
+        case 'bulk_notification':
+            return `Notification groupée : ${title}`;
+        default:
+            return title;
+    }
+}
+
+function markAllRead() {
+    router.post(props.markAllReadUrl);
+}
+
+function markAsRead(notification: AppNotification) {
+    if (notification.read_at) return;
+
+    const url = props.readUrl.replace('__ID__', notification.id);
+    router.post(url, {}, { preserveScroll: true });
+}
+
+function navigateToNotification(notification: AppNotification) {
+    const targetUrl = notification.data?.url;
+
+    if (!notification.read_at) {
+        const url = props.readUrl.replace('__ID__', notification.id);
+        router.post(url, {}, {
+            preserveScroll: true,
+            onSuccess: () => {
+                if (targetUrl) {
+                    router.visit(targetUrl);
+                }
+            },
+        });
+        return;
+    }
+
+    if (targetUrl) {
+        router.visit(targetUrl);
+    }
+}
+
+function goToPage(url: string | null) {
+    if (url) {
+        router.visit(url);
+    }
+}
+</script>
+
+<template>
+    <AppLayout :breadcrumbs="[{ title: 'Notifications', href: '#' }]">
+        <Head title="Notifications" />
+
+        <div class="flex items-center justify-between">
+            <Heading
+                title="Notifications"
+                description="Consultez vos notifications."
+            />
+            <Button
+                v-if="hasUnread"
+                variant="outline"
+                size="sm"
+                @click="markAllRead"
+            >
+                <CheckCheck class="mr-1.5 size-4" />
+                Tout marquer comme lu
+            </Button>
+        </div>
+
+        <div
+            v-if="notifications.data.length === 0"
+            class="mt-8 flex flex-col items-center justify-center py-12 text-center"
+        >
+            <Bell class="mb-4 h-12 w-12 text-muted-foreground" />
+            <p class="text-muted-foreground">
+                Aucune notification
+            </p>
+        </div>
+
+        <div v-else class="mt-6 space-y-2">
+            <div
+                v-for="notification in notifications.data"
+                :key="notification.id"
+                class="flex cursor-pointer items-start gap-4 rounded-lg border p-4 transition-colors hover:bg-muted/30"
+                :class="{
+                    'border-primary/20 bg-muted/50': !notification.read_at,
+                    'opacity-70': notification.read_at,
+                }"
+                @click="navigateToNotification(notification)"
+            >
+                <component
+                    :is="getIcon(notification.data?.notification_type)"
+                    class="mt-0.5 size-5 shrink-0 text-muted-foreground"
+                />
+                <div class="flex-1 space-y-1">
+                    <p class="text-sm font-medium">
+                        {{ getDescription(notification) }}
+                    </p>
+                    <p class="text-xs text-muted-foreground">
+                        {{ notification.created_at }}
+                    </p>
+                </div>
+                <div class="flex shrink-0 items-center gap-2">
+                    <button
+                        v-if="!notification.read_at"
+                        class="text-xs text-muted-foreground hover:text-foreground"
+                        @click.stop="markAsRead(notification)"
+                    >
+                        Marquer lu
+                    </button>
+                    <span
+                        v-if="!notification.read_at"
+                        class="size-2 rounded-full bg-primary"
+                    />
+                </div>
+            </div>
+
+            <!-- Pagination -->
+            <div
+                v-if="notifications.last_page > 1"
+                class="flex items-center justify-center gap-2 pt-4"
+            >
+                <template
+                    v-for="(link, index) in notifications.links"
+                    :key="index"
+                >
+                    <Button
+                        v-if="link.url || link.active"
+                        variant="outline"
+                        size="sm"
+                        :disabled="!link.url || link.active"
+                        @click="goToPage(link.url)"
+                        v-html="link.label"
+                    />
+                </template>
+            </div>
+        </div>
+    </AppLayout>
+</template>

resources/js/types/index.ts

@@ -1,5 +1,6 @@
 export * from './auth';
 export * from './dashboard';
 export * from './navigation';
+export * from './notification';
 export * from './team';
 export * from './ui';

resources/js/types/notification.ts

@@ -0,0 +1,26 @@
+export type NotificationType =
+    | 'nudge'
+    | 'declaration_overdue'
+    | 'document_uploaded'
+    | 'bulk_notification'
+    | 'status_changed';
+
+export type NotificationData = {
+    workspace_id: number;
+    notification_type: NotificationType;
+    declaration_id?: number;
+    sender_id?: number;
+    client_id?: number;
+    declaration_title?: string;
+    sender_name?: string;
+    url?: string;
+};
+
+export type AppNotification = {
+    id: string;
+    type: string;
+    data: NotificationData;
+    read_at: string | null;
+    created_at: string;
+    updated_at: string;
+};