feat: notifications temps réel — cloche Supabase Realtime

[Zoubeir23]

Résumé

• Cloche de notifications dans la topbar avec badge (count non-lus)
• Supabase Realtime subscribe sur appointments INSERT filtré par clinic_id
• Toast Sonner automatique à chaque nouveau RDV (widget ou manuel)
• Dropdown avec historique des 50 dernières notifications de la session
• Marquage lu automatique 1,5s après ouverture du panel

Changements

• lib/hooks/use-realtime-notifications.ts — hook Realtime avec client stable (useRef), cleanup propre, callback de navigation injectable
• components/notifications/notification-bell.tsx — cloche + badge + dropdown, router Next.js, timer cleanup sur unmount
• components/layout/topbar.tsx — intégration de NotificationBell
• supabase/migrations/001_realtime_appointments.sql — activation RLS Realtime sur appointments

Sécurité

• Table appointments ajoutée à supabase_realtime publication → filtre clinic_id appliqué côté serveur avec RLS
• Client Supabase stable via useRef → pas de fuite de channel

Test

• Créer un RDV via le widget public → toast apparaît dans la topbar du médecin
• Cloche affiche le badge avec le bon count
• Cliquer sur une notification → redirige vers /app/appointments
• Ouvrir le dropdown → notifications marquées lues après 1,5s
• Fermer et rouvrir → badge disparu

Summary by CodeRabbit

Release Notes

• New Features
  • Ajout d'une cloche de notifications dans la barre supérieure avec badge affichant le nombre de notifications non lues.
  • Notifications en temps réel des nouveaux rendez-vous, incluant le nom du patient, le service et l'heure.
  • Possibilité de marquer les notifications comme lues et de naviguer directement vers la page des rendez-vous.

[coderabbitai]

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Free

Run ID: c39d591a-0792-4ded-afa4-598597727a23

📥 Commits

Reviewing files that changed from the base of the PR and between eea883f and bba4347.

📒 Files selected for processing (4)

• components/layout/topbar.tsx
• components/notifications/notification-bell.tsx
• lib/hooks/use-realtime-notifications.ts
• supabase/migrations/001_realtime_appointments.sql

---

📝 Walkthrough

Walkthrough

Cette PR ajoute un système complet de notifications en temps réel pour les rendez-vous cliniques. Un hook Realtime Supabase détecte les nouveaux rendez-vous filtrés par clinique, affiche des toasts formatés en français et expose un compteur de notifications non lues. Un composant NotificationBell dans la barre supérieure affiche ce compteur, gère un panneau déroulant avec actions de marquage lu et navigation.

Changes

Notifications en temps réel pour rendez-vous

Layer / File(s)	Résumé
Contrat et hook Realtime lib/hooks/use-realtime-notifications.ts, supabase/migrations/001_realtime_appointments.sql	L'interface RealtimeNotification décrit la structure des notifications. Le hook useRealtimeNotifications s'abonne au canal Supabase "clinic-appointments-{clinicId}", récupère les détails du rendez-vous (patient, service), crée une notification, met à jour l'état local (plafonné à 50), affiche un toast avec description formatée en français, et expose unreadCount, markAllRead et markRead. La migration SQL expose la table appointments dans la publication Realtime.
Composant NotificationBell components/notifications/notification-bell.tsx	Composant client affichant une cloche avec badge du nombre de notifications (capped 9+), panneau déroulant contrôlé par état avec fermeture au clic externe, récupération du clinicId depuis Supabase, timer de 1500ms pour marquer les notifications comme lues à l'ouverture, liste déroulante avec formatage de date/heure français et temps relatif, navigation vers /app/appointments au clic.
Intégration Topbar components/layout/topbar.tsx	Remplacement de l'import Bell de lucide-react par le composant NotificationBell, insertion du bloc JSX <NotificationBell /> dans la barre supérieure avant le menu utilisateur.

Sequence Diagram

sequenceDiagram
  participant User as Utilisateur
  participant Topbar as Topbar + NotificationBell
  participant Hook as useRealtimeNotifications
  participant Supabase as Supabase Realtime
  participant DB as BD appointments
  User->>Topbar: Charge la page
  Topbar->>Hook: Appelle le hook (clinicId)
  Hook->>Supabase: S'abonne au canal clinic-appointments-{clinicId}
  DB->>Supabase: Nouvel INSERT appointment
  Supabase->>Hook: Événement INSERT (clinic_id match)
  Hook->>Hook: Fetch details (patient, service)
  Hook->>Hook: Crée RealtimeNotification
  Hook->>Topbar: setNotifications (prepend + cap 50)
  Hook->>Topbar: unreadCount++ (read === false)
  Topbar->>User: Badge cloche mise à jour
  User->>Topbar: Clique sur cloche
  Topbar->>Topbar: Panel ouvert, lance timer 1500ms
  Topbar->>Hook: markAllRead()
  Hook->>Topbar: unreadCount = 0
  Topbar->>User: Affiche liste (read === true)

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Poem

🐰 Un système de cloches qui tinte joyeusement,
Les rendez-vous arrivent en temps réel, évidemment!
Supabase et React dansent en harmonie,
Notifications formatées en français, c'est la magie ✨
Des badges brillants qui comptent avec fierté.

---

Note

🎁 Summarized by CodeRabbit Free

Your organization is on the Free plan. CodeRabbit will generate a high-level summary and a walkthrough for each pull request. For a comprehensive line-by-line review, please upgrade your subscription to CodeRabbit Pro by visiting https://app.coderabbit.ai/login.

_{Comment @coderabbitai help to get the list of available commands and usage tips.}