feat(web): unify notification system with custom Zustand toast

- Create notificationStore.ts with Zustand for toast state management
- Create Toast.tsx component with animations and dark mode support
- Migrate all pages from react-hot-toast to custom toast system
- Add toast.loading() support with spinning indicator
- Remove react-hot-toast dependency from package.json
- Remove Toaster component from Layout.tsx
- Position toasts top center with auto-dismiss per type

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <[email protected]>

Author: Clément VALENTIN

apps/web/package.json

@@ -29,7 +29,6 @@
     "react-day-picker": "^9.12.0",
     "react-dom": "^18.3.1",
     "react-helmet-async": "^2.0.5",
-    "react-hot-toast": "^2.6.0",
     "react-router-dom": "^6.28.0",
     "recharts": "^3.2.1",
     "swagger-ui-react": "^5.29.3",

apps/web/src/App.tsx

@@ -2,6 +2,7 @@ import { Routes, Route, Navigate, useLocation } from 'react-router-dom'
 import { Suspense, lazy } from 'react'
 import { useAuth } from './hooks/useAuth'
 import Layout from './components/Layout'
+import ToastContainer from './components/Toast'
 import PermissionRoute from './components/PermissionRoute'
 import Landing from './pages/Landing'
 import Login from './pages/Login'
@@ -75,7 +76,9 @@ function PublicRoute({ children }: { children: React.ReactNode }) {
 
 function App() {
   return (
-    <Routes>
+    <>
+      <ToastContainer />
+      <Routes>
       {/* Public routes */}
       <Route path="/" element={<Landing />} />
       <Route
@@ -410,6 +413,7 @@ function App() {
       {/* 404 - catch all */}
       <Route path="*" element={<NotFound />} />
     </Routes>
+    </>
   )
 }
 

apps/web/src/components/DetailedCurve.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect, useRef } from 'react'
 import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts'
 import { Calendar, Download, BarChart3, Loader2, CalendarDays, CalendarRange } from 'lucide-react'
-import toast from 'react-hot-toast'
+import { toast } from '@/stores/notificationStore'
 import { useQueryClient } from '@tanstack/react-query'
 import { logger } from '@/utils/logger'
 import { useResponsiveDayCount } from '@/hooks/useResponsiveDayCount'

apps/web/src/components/Layout.tsx

@@ -4,7 +4,7 @@ import { useAuth } from '@/hooks/useAuth'
 import { usePermissions } from '@/hooks/usePermissions'
 import { useThemeStore } from '@/stores/themeStore'
 import { useState, useEffect } from 'react'
-import toast, { Toaster } from 'react-hot-toast'
+import { toast } from '@/stores/notificationStore'
 import AdminTabs from './AdminTabs'
 import ApiDocsTabs from './ApiDocsTabs'
 import ConsumptionTabs from './ConsumptionTabs'
@@ -181,7 +181,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
                      target.closest('div[style*="gradient"]')
 
       if (isToast) {
-        toast.dismiss()
+        toast.clearAll()
       }
     }
 
@@ -808,54 +808,6 @@ export default function Layout({ children }: { children: React.ReactNode }) {
         </footer>
       </div>
 
-      {/* Global Toaster */}
-      <Toaster
-        position="top-center"
-        toastOptions={{
-          duration: 5000,
-          style: {
-            background: 'linear-gradient(135deg, #4338ca 0%, #3730a3 100%)',
-            color: '#fff',
-            border: 'none',
-            borderRadius: '0.75rem',
-            padding: '1rem 1.5rem',
-            fontSize: '0.875rem',
-            fontWeight: '500',
-            cursor: 'pointer',
-            boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2)',
-            minWidth: '400px',
-            maxWidth: '600px',
-          },
-          success: {
-            iconTheme: {
-              primary: '#fff',
-              secondary: '#10b981',
-            },
-            style: {
-              background: 'linear-gradient(135deg, #059669 0%, #047857 100%)',
-              minWidth: '400px',
-              maxWidth: '600px',
-            },
-          },
-          error: {
-            iconTheme: {
-              primary: '#fff',
-              secondary: '#ef4444',
-            },
-            style: {
-              background: 'linear-gradient(135deg, #dc2626 0%, #b91c1c 100%)',
-              minWidth: '400px',
-              maxWidth: '600px',
-            },
-          },
-        }}
-        containerStyle={{
-          top: 10,
-          left: '50%',
-          right: 'auto',
-          transform: sidebarCollapsed ? 'translateX(calc(-50% + 2rem))' : 'translateX(calc(-50% + 7rem))',
-        }}
-      />
     </div>
   )
 }

apps/web/src/components/PageHeader.tsx

@@ -2,7 +2,6 @@ import { useEffect, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
 import { TrendingUp, Sun, Calculator, Download, Lock, LayoutDashboard, Calendar, Zap, Users, AlertCircle, BookOpen, Settings as SettingsIcon, Key, Shield, FileText, Activity, Euro, Scale, UserCheck } from 'lucide-react'
 import { useQuery } from '@tanstack/react-query'
-import toast from 'react-hot-toast'
 import { pdlApi } from '@/api/pdl'
 import { adminApi } from '@/api/admin'
 import { usePdlStore } from '@/stores/pdlStore'
@@ -73,7 +72,7 @@ export default function PageHeader() {
   }, [isAdmin, impersonation, clearImpersonation])
 
   // Récupérer la liste des PDLs de l'utilisateur
-  const { data: pdlsResponse } = useQuery({
+  const { data: pdlsResponse, isLoading: isPdlsLoading } = useQuery({
     queryKey: ['pdls'],
     queryFn: async () => {
       const response = await pdlApi.list()
@@ -85,7 +84,7 @@ export default function PageHeader() {
   })
 
   // Récupérer les PDL partagés (admin only)
-  const { data: sharedPdlsResponse } = useQuery({
+  const { data: sharedPdlsResponse, isLoading: isSharedPdlsLoading } = useQuery({
     queryKey: ['admin-shared-pdls'],
     queryFn: async () => {
       const response = await adminApi.getAllSharedPdls()
@@ -98,6 +97,9 @@ export default function PageHeader() {
     staleTime: 60000, // Cache for 1 minute
   })
 
+  // Determine if initial data is still loading
+  const isInitialDataLoading = isPdlsLoading || (isAdmin() && isSharedPdlsLoading)
+
   const userPdls: PDL[] = Array.isArray(pdlsResponse) ? pdlsResponse : []
   const sharedPdls: SharedPDL[] = Array.isArray(sharedPdlsResponse) ? sharedPdlsResponse : []
 
@@ -156,10 +158,6 @@ export default function PageHeader() {
   if (!config) return null
 
   const Icon = config.icon
-  const activePdls = pdls.filter((p: PDL) => p.is_active)
-
-  // Check if on a consumption page
-  const isConsumptionPage = location.pathname.startsWith('/consumption')
 
   // Get the set of production PDL IDs that are linked to consumption PDLs
   // These should be hidden from the selector (the consumption PDL will show instead)
@@ -169,47 +167,21 @@ export default function PageHeader() {
       .map((pdl: PDL) => pdl.linked_production_pdl_id)
   )
 
-  // Filter PDLs based on page
-  const displayedPdls = location.pathname === '/production'
-    ? (() => {
-        // Show: consumption PDLs with linked production + standalone production PDLs
-        const consumptionWithProduction = pdls.filter((pdl: PDL) =>
-          pdl.has_consumption &&
-          pdl.is_active &&
-          pdl.linked_production_pdl_id
-        )
-
-        const standaloneProduction = activePdls.filter((pdl: PDL) =>
-          pdl.has_production &&
-          !linkedProductionIds.has(pdl.id) // Use pdl.id (UUID) not usage_point_id
-        )
+  // Show all active PDLs, hiding only linked production PDLs (they appear via their consumption PDL)
+  const displayedPdls = pdls.filter((p: PDL) => p.is_active && !linkedProductionIds.has(p.id))
 
-        return [...consumptionWithProduction, ...standaloneProduction]
-      })()
-    : isConsumptionPage
-    ? activePdls.filter((pdl: PDL) => pdl.has_consumption)
-    : activePdls.filter((pdl: PDL) => !linkedProductionIds.has(pdl.id)) // Hide linked production PDLs globally
-
-  // Auto-select first PDL if none selected OR if current PDL is not in the displayed list
+  // Auto-select first PDL only if none is selected (first load)
+  // IMPORTANT: Wait for initial data to be loaded before auto-selecting to avoid
+  // overriding the persisted selectedPdl from localStorage during hydration
   useEffect(() => {
-    if (displayedPdls.length > 0) {
-      // Check if current PDL is in the displayed list for this page
-      const currentPdlInList = displayedPdls.some(p => p.usage_point_id === selectedPdl)
+    // Don't auto-select while data is still loading
+    if (isInitialDataLoading) return
 
-      if (!selectedPdl || !currentPdlInList) {
-        const newPdl = displayedPdls[0]
-        // Show toast only if we're switching from an incompatible PDL (not on first load)
-        if (selectedPdl && !currentPdlInList) {
-          toast(`PDL changé automatiquement vers "${newPdl.name || newPdl.usage_point_id}"`, {
-            icon: '🔄',
-            duration: 4000,
-          })
-        }
-        // Select the first available PDL for this page
-        setSelectedPdl(newPdl.usage_point_id)
-      }
+    // Only auto-select if no PDL is currently selected
+    if (!selectedPdl && displayedPdls.length > 0) {
+      setSelectedPdl(displayedPdls[0].usage_point_id)
     }
-  }, [displayedPdls, selectedPdl, setSelectedPdl])
+  }, [displayedPdls, selectedPdl, setSelectedPdl, isInitialDataLoading])
 
   return (
     <div className="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
@@ -234,11 +206,7 @@ export default function PageHeader() {
           {showPdlSelector && (
             displayedPdls.length === 0 ? (
               <div className="text-sm text-gray-600 dark:text-gray-400 italic">
-                {location.pathname === '/production'
-                  ? 'Aucun PDL de production non lié trouvé'
-                  : isConsumptionPage
-                  ? 'Aucun PDL avec l\'option consommation activée'
-                  : 'Aucun point de livraison actif trouvé'}
+                Aucun point de livraison actif trouvé
               </div>
             ) : (
             <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2 sm:gap-3 w-full lg:w-auto">

apps/web/src/components/Toast.tsx

@@ -0,0 +1,126 @@
+import { useEffect, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { CheckCircle, XCircle, AlertCircle, Info, X, Loader2 } from 'lucide-react'
+import { useNotificationStore, type Toast as ToastType, type NotificationType } from '../stores/notificationStore'
+
+// Icon and color configurations per type
+const TOAST_CONFIG: Record<
+  NotificationType,
+  {
+    icon: typeof CheckCircle
+    bgClass: string
+    borderClass: string
+    textClass: string
+    iconClass: string
+  }
+> = {
+  success: {
+    icon: CheckCircle,
+    bgClass: 'bg-green-50 dark:bg-green-900/20',
+    borderClass: 'border-green-200 dark:border-green-800',
+    textClass: 'text-green-800 dark:text-green-200',
+    iconClass: 'text-green-600 dark:text-green-400',
+  },
+  error: {
+    icon: XCircle,
+    bgClass: 'bg-red-50 dark:bg-red-900/20',
+    borderClass: 'border-red-200 dark:border-red-800',
+    textClass: 'text-red-800 dark:text-red-200',
+    iconClass: 'text-red-600 dark:text-red-400',
+  },
+  warning: {
+    icon: AlertCircle,
+    bgClass: 'bg-yellow-50 dark:bg-yellow-900/20',
+    borderClass: 'border-yellow-200 dark:border-yellow-800',
+    textClass: 'text-yellow-800 dark:text-yellow-200',
+    iconClass: 'text-yellow-600 dark:text-yellow-400',
+  },
+  info: {
+    icon: Info,
+    bgClass: 'bg-blue-50 dark:bg-blue-900/20',
+    borderClass: 'border-blue-200 dark:border-blue-800',
+    textClass: 'text-blue-800 dark:text-blue-200',
+    iconClass: 'text-blue-600 dark:text-blue-400',
+  },
+  loading: {
+    icon: Loader2,
+    bgClass: 'bg-gray-50 dark:bg-gray-800/50',
+    borderClass: 'border-gray-200 dark:border-gray-700',
+    textClass: 'text-gray-800 dark:text-gray-200',
+    iconClass: 'text-primary-600 dark:text-primary-400 animate-spin',
+  },
+}
+
+interface ToastItemProps {
+  toast: ToastType
+  onRemove: (id: string) => void
+}
+
+function ToastItem({ toast, onRemove }: ToastItemProps) {
+  const [isVisible, setIsVisible] = useState(false)
+  const [isLeaving, setIsLeaving] = useState(false)
+
+  const config = TOAST_CONFIG[toast.type]
+  const Icon = config.icon
+
+  useEffect(() => {
+    // Trigger enter animation
+    const enterTimer = setTimeout(() => setIsVisible(true), 10)
+    return () => clearTimeout(enterTimer)
+  }, [])
+
+  const handleRemove = () => {
+    setIsLeaving(true)
+    setTimeout(() => onRemove(toast.id), 200)
+  }
+
+  return (
+    <div
+      className={`
+        flex items-start gap-3 p-4 rounded-lg border shadow-lg backdrop-blur-sm
+        transition-all duration-200 ease-out
+        ${config.bgClass} ${config.borderClass}
+        ${isVisible && !isLeaving ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-2'}
+        min-w-[320px] max-w-[480px]
+      `}
+      role="alert"
+      aria-live="polite"
+    >
+      <Icon className={`${config.iconClass} flex-shrink-0 mt-0.5`} size={20} />
+      <p className={`${config.textClass} font-medium flex-1 text-sm`}>{toast.message}</p>
+      {toast.dismissible && (
+        <button
+          onClick={handleRemove}
+          className="text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 transition-colors flex-shrink-0"
+          aria-label="Fermer"
+        >
+          <X size={18} />
+        </button>
+      )}
+    </div>
+  )
+}
+
+export function ToastContainer() {
+  const toasts = useNotificationStore((state) => state.toasts)
+  const removeToast = useNotificationStore((state) => state.removeToast)
+
+  // Don't render anything if no toasts
+  if (toasts.length === 0) return null
+
+  return createPortal(
+    <div
+      className="fixed top-4 left-1/2 -translate-x-1/2 z-50 flex flex-col gap-2 pointer-events-none"
+      aria-label="Notifications"
+    >
+      {toasts.map((toast) => (
+        <div key={toast.id} className="pointer-events-auto">
+          <ToastItem toast={toast} onRemove={removeToast} />
+        </div>
+      ))}
+    </div>,
+    document.body
+  )
+}
+
+export default ToastContainer

apps/web/src/hooks/useDataFetch.ts

@@ -2,7 +2,7 @@ import { useState, useCallback } from 'react'
 import { useQueryClient } from '@tanstack/react-query'
 import { enedisApi } from '@/api/enedis'
 import { logger } from '@/utils/logger'
-import toast from 'react-hot-toast'
+import { toast } from '@/stores/notificationStore'
 import type { PDL } from '@/types/api'
 
 interface UseDataFetchResult {

apps/web/src/hooks/useUnifiedDataFetch.ts

@@ -2,7 +2,7 @@ import { useCallback } from 'react'
 import { useQueryClient } from '@tanstack/react-query'
 import { enedisApi } from '@/api/enedis'
 import { logger } from '@/utils/logger'
-import toast from 'react-hot-toast'
+import { toast } from '@/stores/notificationStore'
 import type { PDL } from '@/types/api'
 import { useDataFetchStore } from '@/stores/dataFetchStore'
 import { useCacheBroadcast } from './useCacheBroadcast'
@@ -205,7 +205,7 @@ export function useUnifiedDataFetch({
             } else if (batchData?.error) {
               updateConsumptionStatus({ detail: 'error' })
               if (batchData.error.code === 'PARTIAL_DATA') {
-                toast.success(batchData.error.message, { duration: 4000, icon: '⚠️' })
+                toast.warning(batchData.error.message, { duration: 4000 })
               } else {
                 toast.error(batchData.error.message || 'Erreur données détaillées de consommation')
               }
@@ -322,7 +322,7 @@ export function useUnifiedDataFetch({
             } else if (batchData?.error) {
               updateProductionStatus({ detail: 'error' })
               if (batchData.error.code === 'PARTIAL_DATA') {
-                toast.success(batchData.error.message, { duration: 4000, icon: '⚠️' })
+                toast.warning(batchData.error.message, { duration: 4000 })
               } else {
                 toast.error(batchData.error.message || 'Erreur données détaillées de production')
               }