@lastbrain/app 0.1.30 → 0.1.32

package/dist/templates/DefaultDoc.js

@@ -33,7 +33,70 @@ const proxyUrl = await uploadFile(
 import { storagePathToProxyUrl } from "@/lib/storage";
 
 const proxyUrl = storagePathToProxyUrl("avatar/user_128_123456.webp");
-// Retourne: "/api/storage/avatar/user_128_123456.webp"` }) })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-2", children: "Avantages du syst\u00E8me" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3 text-sm", children: [_jsxs("div", { className: "flex items-start gap-2", children: [_jsx("span", { className: "text-green-600", children: "\u2705" }), _jsx("span", { children: "URLs plus courtes et lisibles" })] }), _jsxs("div", { className: "flex items-start gap-2", children: [_jsx("span", { className: "text-green-600", children: "\u2705" }), _jsx("span", { children: "Contr\u00F4le d'acc\u00E8s granulaire" })] }), _jsxs("div", { className: "flex items-start gap-2", children: [_jsx("span", { className: "text-green-600", children: "\u2705" }), _jsx("span", { children: "Cache optimis\u00E9 (1 an)" })] }), _jsxs("div", { className: "flex items-start gap-2", children: [_jsx("span", { className: "text-green-600", children: "\u2705" }), _jsx("span", { children: "S\u00E9curit\u00E9 am\u00E9lior\u00E9e" })] }), _jsxs("div", { className: "flex items-start gap-2", children: [_jsx("span", { className: "text-green-600", children: "\u2705" }), _jsx("span", { children: "D\u00E9tection auto des types MIME" })] }), _jsxs("div", { className: "flex items-start gap-2", children: [_jsx("span", { className: "text-green-600", children: "\u2705" }), _jsx("span", { children: "Extensible facilement" })] })] })] })] })] }), _jsxs(Card, { id: "section-module-docs", className: "scroll-mt-32", children: [_jsx(CardHeader, { children: _jsxs("h2", { className: "text-2xl font-semibold flex items-center gap-2", children: [_jsx(BookOpen, { size: 24 }), "Documenter ses modules"] }) }), _jsxs(CardBody, { className: "space-y-4", children: [_jsx("p", { className: "text-slate-600 dark:text-slate-400", children: "Chaque module peut exporter un composant de documentation qui sera automatiquement int\u00E9gr\u00E9 dans cette page." }), _jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-2", children: "Cr\u00E9er une documentation" }), _jsxs("p", { className: "text-sm text-slate-600 dark:text-slate-400 mb-2", children: ["Dans votre module, cr\u00E9ez", " ", _jsx("code", { className: "text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded", children: "src/components/Doc.tsx" }), " ", ":"] }), _jsx("div", { className: "bg-slate-50 dark:bg-slate-900 p-4 rounded-lg text-sm font-mono overflow-x-auto", children: _jsx("pre", { children: `export function MonModuleDoc() {
+// Retourne: "/api/storage/avatar/user_128_123456.webp"` }) })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-2", children: "Avantages du syst\u00E8me" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3 text-sm", children: [_jsxs("div", { className: "flex items-start gap-2", children: [_jsx("span", { className: "text-green-600", children: "\u2705" }), _jsx("span", { children: "URLs plus courtes et lisibles" })] }), _jsxs("div", { className: "flex items-start gap-2", children: [_jsx("span", { className: "text-green-600", children: "\u2705" }), _jsx("span", { children: "Contr\u00F4le d'acc\u00E8s granulaire" })] }), _jsxs("div", { className: "flex items-start gap-2", children: [_jsx("span", { className: "text-green-600", children: "\u2705" }), _jsx("span", { children: "Cache optimis\u00E9 (1 an)" })] }), _jsxs("div", { className: "flex items-start gap-2", children: [_jsx("span", { className: "text-green-600", children: "\u2705" }), _jsx("span", { children: "S\u00E9curit\u00E9 am\u00E9lior\u00E9e" })] }), _jsxs("div", { className: "flex items-start gap-2", children: [_jsx("span", { className: "text-green-600", children: "\u2705" }), _jsx("span", { children: "D\u00E9tection auto des types MIME" })] }), _jsxs("div", { className: "flex items-start gap-2", children: [_jsx("span", { className: "text-green-600", children: "\u2705" }), _jsx("span", { children: "Extensible facilement" })] })] })] })] })] }), _jsxs(Card, { id: "section-realtime", className: "scroll-mt-32", children: [_jsx(CardHeader, { children: _jsxs("h2", { className: "text-2xl font-semibold flex items-center gap-2", children: [_jsx(Zap, { size: 24 }), "Syst\u00E8me Realtime"] }) }), _jsxs(CardBody, { className: "space-y-4", children: [_jsx("p", { className: "text-slate-600 dark:text-slate-400", children: "LastBrain int\u00E8gre un syst\u00E8me de notifications et de synchronisation en temps r\u00E9el bas\u00E9 sur Supabase Realtime. Le syst\u00E8me est enti\u00E8rement automatis\u00E9 et scalable." }), _jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-2", children: "Configuration dans les modules" }), _jsxs("p", { className: "text-sm text-slate-600 dark:text-slate-400 mb-3", children: ["Ajoutez la configuration realtime dans votre", " ", _jsx("code", { className: "text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded", children: "build.config.ts" }), " ", "pour activer la synchronisation en temps r\u00E9el :"] }), _jsx("div", { className: "bg-slate-50 dark:bg-slate-900 p-4 rounded-lg text-sm font-mono overflow-x-auto", children: _jsx("pre", { children: `export default {
+  name: "Module Auth",
+  description: "Gestion de l'authentification",
+  
+  // Configuration realtime
+  realtime: {
+    moduleId: "module-auth",
+    tables: [
+      {
+        schema: "public",
+        table: "user_notifications",
+        event: "*", // INSERT, UPDATE, DELETE ou *
+        filter: "owner_id=eq.\${USER_ID}",
+        broadcast: "user_notifications_updated"
+      },
+      {
+        schema: "public", 
+        table: "user_profiles",
+        event: "*",
+        filter: "owner_id=eq.\${USER_ID}",
+        broadcast: "user_profile_updated"
+      }
+    ]
+  },
+  
+  pages: [
+    // vos pages...
+  ]
+}` }) })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-2", children: "G\u00E9n\u00E9ration automatique de la configuration" }), _jsx("p", { className: "text-sm text-slate-600 dark:text-slate-400 mb-2", children: "Lors du build des modules, la configuration realtime est automatiquement g\u00E9n\u00E9r\u00E9e :" }), _jsx(Snippet, { symbol: "", hideSymbol: true, className: "text-sm mb-3", children: "pnpm build:modules" }), _jsxs("p", { className: "text-sm text-slate-600 dark:text-slate-400", children: ["Cela g\u00E9n\u00E8re automatiquement", " ", _jsx("code", { className: "text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded", children: "config/realtime.ts" }), " ", "avec toutes les configurations des modules."] })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-2", children: "Utilisation dans les composants" }), _jsx("p", { className: "text-sm text-slate-600 dark:text-slate-400 mb-3", children: "Utilisez les hooks pr\u00E9-construits pour \u00E9couter les changements :" }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("h4", { className: "font-medium mb-2", children: "1. Hook g\u00E9n\u00E9rique pour une table" }), _jsx("div", { className: "bg-slate-50 dark:bg-slate-900 p-4 rounded-lg text-sm font-mono overflow-x-auto", children: _jsx("pre", { children: `import { useTableRealtime } from "@lastbrain/core";
+
+function MonComposant() {
+  const signal = useTableRealtime("user_notifications");
+  
+  useEffect(() => {
+    if (signal.hasUpdates) {
+      console.log("Nouvelle notification!");
+      // Recharger vos données
+      refetchNotifications();
+    }
+  }, [signal.tick]);
+}` }) })] }), _jsxs("div", { children: [_jsx("h4", { className: "font-medium mb-2", children: "2. Hook sp\u00E9cialis\u00E9 pour les notifications" }), _jsx("div", { className: "bg-slate-50 dark:bg-slate-900 p-4 rounded-lg text-sm font-mono overflow-x-auto", children: _jsx("pre", { children: `import { useNotifications } from "../hooks/useNotifications";
+
+function NotificationBell() {
+  const { notifications, loading, hasUpdates } = useNotifications();
+  
+  return (
+    <div>
+      🔔 {notifications.length}
+      {hasUpdates && <span>•</span>}
+    </div>
+  );
+}` }) })] }), _jsxs("div", { children: [_jsx("h4", { className: "font-medium mb-2", children: "3. Hook bas niveau avec EventBus" }), _jsx("div", { className: "bg-slate-50 dark:bg-slate-900 p-4 rounded-lg text-sm font-mono overflow-x-auto", children: _jsx("pre", { children: `import { useRealtimeSignal } from "@lastbrain/core";
+
+function MonComposant() {
+  const signal = useRealtimeSignal("user_notifications_updated");
+  
+  useEffect(() => {
+    if (signal.hasUpdates) {
+      // Événement spécifique reçu
+      const payload = signal.lastPayload;
+      console.log("Données reçues:", payload);
+    }
+  }, [signal.tick]);
+}` }) })] })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-2", children: "Architecture du syst\u00E8me" }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "border-l-4 border-blue-500 pl-4", children: [_jsx("h4", { className: "font-semibold text-blue-600 dark:text-blue-400", children: "\uD83C\uDFAF EventBus Global" }), _jsx("p", { className: "text-sm text-slate-600 dark:text-slate-400", children: "Syst\u00E8me central de coordination des \u00E9v\u00E9nements realtime \u00E0 travers toute l'application." })] }), _jsxs("div", { className: "border-l-4 border-green-500 pl-4", children: [_jsx("h4", { className: "font-semibold text-green-600 dark:text-green-400", children: "\uD83D\uDD0C RealtimeProvider" }), _jsx("p", { className: "text-sm text-slate-600 dark:text-slate-400", children: "Provider React qui \u00E9tablit les connexions Supabase Realtime bas\u00E9es sur la configuration des modules." })] }), _jsxs("div", { className: "border-l-4 border-purple-500 pl-4", children: [_jsx("h4", { className: "font-semibold text-purple-600 dark:text-purple-400", children: "\u26A1 Hooks Scalables" }), _jsx("p", { className: "text-sm text-slate-600 dark:text-slate-400", children: "Collection de hooks React pour \u00E9couter des tables ou \u00E9v\u00E9nements sp\u00E9cifiques avec auto-refresh." })] }), _jsxs("div", { className: "border-l-4 border-orange-500 pl-4", children: [_jsx("h4", { className: "font-semibold text-orange-600 dark:text-orange-400", children: "\uD83D\uDEE0\uFE0F Build int\u00E9gr\u00E9" }), _jsx("p", { className: "text-sm text-slate-600 dark:text-slate-400", children: "G\u00E9n\u00E9ration automatique de la configuration TypeScript lors du build des modules." })] })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-2", children: "Avantages du syst\u00E8me" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3 text-sm", children: [_jsxs("div", { className: "flex items-start gap-2", children: [_jsx("span", { className: "text-green-600", children: "\u2705" }), _jsx("span", { children: "Configuration d\u00E9clarative dans les modules" })] }), _jsxs("div", { className: "flex items-start gap-2", children: [_jsx("span", { className: "text-green-600", children: "\u2705" }), _jsx("span", { children: "G\u00E9n\u00E9ration automatique de config" })] }), _jsxs("div", { className: "flex items-start gap-2", children: [_jsx("span", { className: "text-green-600", children: "\u2705" }), _jsx("span", { children: "Hooks React pr\u00EAts \u00E0 l'emploi" })] }), _jsxs("div", { className: "flex items-start gap-2", children: [_jsx("span", { className: "text-green-600", children: "\u2705" }), _jsx("span", { children: "S\u00E9curit\u00E9 RLS de Supabase" })] }), _jsxs("div", { className: "flex items-start gap-2", children: [_jsx("span", { className: "text-green-600", children: "\u2705" }), _jsx("span", { children: "Scalable pour n'importe quelle table" })] }), _jsxs("div", { className: "flex items-start gap-2", children: [_jsx("span", { className: "text-green-600", children: "\u2705" }), _jsx("span", { children: "TypeScript avec types g\u00E9n\u00E9r\u00E9s" })] })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-2", children: "Exemples d'utilisation" }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "p-3 bg-blue-50 dark:bg-blue-950 rounded-lg", children: [_jsx("h4", { className: "font-medium text-blue-700 dark:text-blue-300 mb-1", children: "\uD83D\uDD14 Notifications" }), _jsx("p", { className: "text-sm text-blue-600 dark:text-blue-400", children: "Affichage en temps r\u00E9el des nouvelles notifications avec badge et auto-refresh" })] }), _jsxs("div", { className: "p-3 bg-purple-50 dark:bg-purple-950 rounded-lg", children: [_jsx("h4", { className: "font-medium text-purple-700 dark:text-purple-300 mb-1", children: "\uD83D\uDC65 Utilisateurs en ligne" }), _jsx("p", { className: "text-sm text-purple-600 dark:text-purple-400", children: "Suivi des connexions/d\u00E9connexions des utilisateurs en direct" })] }), _jsxs("div", { className: "p-3 bg-green-50 dark:bg-green-950 rounded-lg", children: [_jsx("h4", { className: "font-medium text-green-700 dark:text-green-300 mb-1", children: "\uD83D\uDCCA Donn\u00E9es collaboratives" }), _jsx("p", { className: "text-sm text-green-600 dark:text-green-400", children: "Synchronisation automatique des modifications de donn\u00E9es entre utilisateurs" })] })] })] })] })] }), _jsxs(Card, { id: "section-module-docs", className: "scroll-mt-32", children: [_jsx(CardHeader, { children: _jsxs("h2", { className: "text-2xl font-semibold flex items-center gap-2", children: [_jsx(BookOpen, { size: 24 }), "Documenter ses modules"] }) }), _jsxs(CardBody, { className: "space-y-4", children: [_jsx("p", { className: "text-slate-600 dark:text-slate-400", children: "Chaque module peut exporter un composant de documentation qui sera automatiquement int\u00E9gr\u00E9 dans cette page." }), _jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-2", children: "Cr\u00E9er une documentation" }), _jsxs("p", { className: "text-sm text-slate-600 dark:text-slate-400 mb-2", children: ["Dans votre module, cr\u00E9ez", " ", _jsx("code", { className: "text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded", children: "src/components/Doc.tsx" }), " ", ":"] }), _jsx("div", { className: "bg-slate-50 dark:bg-slate-900 p-4 rounded-lg text-sm font-mono overflow-x-auto", children: _jsx("pre", { children: `export function MonModuleDoc() {
   return (
     <div>
       <h1>Mon Module</h1>

package/dist/templates/DocPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DocPage.d.ts","sourceRoot":"","sources":["../../src/templates/DocPage.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAC;AA6FnD,UAAU,eAAe;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EACF,SAAS,GACT,WAAW,GACX,SAAS,GACT,QAAQ,GACR,SAAS,GACT,SAAS,GACT,SAAS,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,UAAU,YAAY;IACpB,OAAO,CAAC,EAAE,eAAe,EAAE,CAAC;IAC5B,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAClC;AAED,wBAAgB,OAAO,CAAC,EAAE,OAAY,EAAE,cAAc,EAAE,EAAE,YAAY,2CAySrE"}
+{"version":3,"file":"DocPage.d.ts","sourceRoot":"","sources":["../../src/templates/DocPage.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAC;AA6FnD,UAAU,eAAe;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EACF,SAAS,GACT,WAAW,GACX,SAAS,GACT,QAAQ,GACR,SAAS,GACT,SAAS,GACT,SAAS,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,UAAU,YAAY;IACpB,OAAO,CAAC,EAAE,eAAe,EAAE,CAAC;IAC5B,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAClC;AAED,wBAAgB,OAAO,CAAC,EAAE,OAAY,EAAE,cAAc,EAAE,EAAE,YAAY,2CAgTrE"}

package/dist/templates/DocPage.js

@@ -32,6 +32,7 @@ export function DocPage({ modules = [], defaultContent }) {
                 "section-create-module",
                 "section-database",
                 "section-storage",
+                "section-realtime",
                 "section-ui",
                 "section-module-docs",
                 "section-links",
@@ -128,6 +129,12 @@ export function DocPage({ modules = [], defaultContent }) {
             description: "Gestion des fichiers",
             icon: HardDrive,
         },
+        {
+            id: "section-realtime",
+            name: "Système Realtime",
+            description: "Synchronisation temps réel",
+            icon: Sparkles,
+        },
         {
             id: "section-ui",
             name: "Interface utilisateur",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lastbrain/app",
-  "version": "0.1.30",
+  "version": "0.1.32",
   "description": "Framework modulaire Next.js avec CLI et système de modules",
   "private": false,
   "type": "module",
@@ -32,7 +32,6 @@
   ],
   "dependencies": {
     "@lastbrain/core": "^0.1.0",
-    "@lastbrain/module-auth": "^0.1.2",
     "@lastbrain/ui": "^0.1.4",
     "@supabase/supabase-js": "^2.36.0",
     "chalk": "^5.3.0",

package/src/auth/useAuthSession.ts

@@ -22,6 +22,9 @@ export function useAuthSession() {
       } catch (error) {
         console.error("Error checking superadmin status:", error);
         setIsSuperAdmin(false);
+      } finally {
+        // Ne terminer le loading qu'après avoir vérifié le status admin
+        setLoading(false);
       }
     };
 
@@ -30,8 +33,9 @@ export function useAuthSession() {
       setUser(session?.user ?? null);
       if (session?.user) {
         checkSuperAdmin(session.user.id);
+      } else {
+        setLoading(false);
       }
-      setLoading(false);
     });
 
     // Écouter les changements d'auth
@@ -43,8 +47,8 @@ export function useAuthSession() {
         checkSuperAdmin(session.user.id);
       } else {
         setIsSuperAdmin(false);
+        setLoading(false);
       }
-      setLoading(false);
     });
 
     return () => subscription.unsubscribe();

package/src/components/NotificationContainer.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { Notification } from "@lastbrain/ui";
+import { useNotifications } from "../layouts/AppProviders.js";
+
+export function NotificationContainer() {
+  const { data, loading, markAsRead, markAllAsRead, deleteNotification } =
+    useNotifications();
+
+  return (
+    <Notification
+      notifications={data.notifications}
+      unreadCount={data.unreadCount}
+      loading={loading}
+      onMarkAsRead={markAsRead}
+      onMarkAllAsRead={markAllAsRead}
+      onDelete={deleteNotification}
+    />
+  );
+}

package/src/hooks/useNotifications.ts

@@ -0,0 +1,216 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { useTableRealtime, supabaseBrowserClient } from "@lastbrain/core";
+import type { User } from "@supabase/supabase-js";
+
+export interface UserNotification {
+  id: string;
+  owner_id: string;
+  title: string;
+  body?: string;
+  type: string;
+  read: boolean;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface NotificationsData {
+  notifications: UserNotification[];
+  unreadCount: number;
+}
+
+export function useNotifications(user?: User | null) {
+  const [data, setData] = useState<NotificationsData>({
+    notifications: [],
+    unreadCount: 0,
+  });
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchNotifications = useCallback(async () => {
+    if (!user?.id) {
+      if (user === null) {
+        // Utilisateur explicitement non connecté
+        setData({ notifications: [], unreadCount: 0 });
+        setLoading(false);
+      }
+      // Si user === undefined, on est encore en train de charger l'auth, on ne fait rien
+      return;
+    }
+
+    try {
+      setLoading(true);
+      setError(null);
+
+      // Utilisation directe du client Supabase côté navigateur
+      const { data: notifications, error: fetchError } =
+        await supabaseBrowserClient
+          .from("user_notifications")
+          .select("*")
+          .eq("owner_id", user.id)
+          .order("created_at", { ascending: false });
+
+      if (fetchError) {
+        throw fetchError;
+      }
+
+      const unreadCount = notifications?.filter((n) => !n.read).length || 0;
+
+      setData({
+        notifications: notifications || [],
+        unreadCount,
+      });
+    } catch (err: unknown) {
+      setError(
+        err instanceof Error
+          ? err.message
+          : "Erreur lors du chargement des notifications",
+      );
+      console.error("[useNotifications] Erreur:", err);
+    } finally {
+      setLoading(false);
+    }
+  }, [user]);
+
+  // Utiliser le hook realtime scalable pour les notifications
+  const { tick: realtimeTick, lastPayload } = useTableRealtime(
+    "user_notifications",
+    {
+      eventName: "user_notifications_updated",
+      onUpdate: (payload) => {
+        console.log("🔔 Nouvelle notification détectée via realtime:", payload);
+        console.log("🔔 User ID actuel:", user?.id);
+        // Recharger immédiatement les notifications
+        if (user?.id) {
+          console.log("🔔 Rechargement des notifications...");
+          fetchNotifications();
+        }
+      },
+    },
+  );
+
+  // Marquer une notification comme lue
+  const markAsRead = useCallback(
+    async (notificationId: string) => {
+      if (!user?.id) return;
+
+      try {
+        const { error: updateError } = await supabaseBrowserClient
+          .from("user_notifications")
+          .update({
+            read: true,
+            updated_at: new Date().toISOString(),
+          })
+          .eq("id", notificationId)
+          .eq("owner_id", user.id);
+
+        if (updateError) {
+          throw updateError;
+        }
+
+        // Mettre à jour localement en attendant le realtime
+        setData((prev) => ({
+          ...prev,
+          notifications: prev.notifications.map((n) =>
+            n.id === notificationId ? { ...n, read: true } : n,
+          ),
+          unreadCount: Math.max(0, prev.unreadCount - 1),
+        }));
+      } catch (err: unknown) {
+        console.error("Erreur mark as read:", err);
+        throw err;
+      }
+    },
+    [user?.id],
+  );
+
+  // Marquer toutes les notifications comme lues
+  const markAllAsRead = useCallback(async () => {
+    if (!user?.id || data.unreadCount === 0) return;
+
+    try {
+      const { error: updateError } = await supabaseBrowserClient
+        .from("user_notifications")
+        .update({
+          read: true,
+          updated_at: new Date().toISOString(),
+        })
+        .eq("owner_id", user.id)
+        .eq("read", false);
+
+      if (updateError) {
+        throw updateError;
+      }
+
+      // Mettre à jour localement
+      setData((prev) => ({
+        ...prev,
+        notifications: prev.notifications.map((n) => ({ ...n, read: true })),
+        unreadCount: 0,
+      }));
+    } catch (err: unknown) {
+      console.error("Erreur mark all as read:", err);
+      throw err;
+    }
+  }, [user?.id, data.unreadCount]);
+
+  // Supprimer une notification
+  const deleteNotification = useCallback(
+    async (notificationId: string) => {
+      if (!user?.id) return;
+
+      try {
+        const { error: deleteError } = await supabaseBrowserClient
+          .from("user_notifications")
+          .delete()
+          .eq("id", notificationId)
+          .eq("owner_id", user.id);
+
+        if (deleteError) {
+          throw deleteError;
+        }
+
+        // Mettre à jour localement
+        setData((prev) => {
+          const notification = prev.notifications.find(
+            (n) => n.id === notificationId,
+          );
+          return {
+            notifications: prev.notifications.filter(
+              (n) => n.id !== notificationId,
+            ),
+            unreadCount:
+              notification && !notification.read
+                ? Math.max(0, prev.unreadCount - 1)
+                : prev.unreadCount,
+          };
+        });
+      } catch (err: unknown) {
+        console.error("Erreur delete notification:", err);
+        throw err;
+      }
+    },
+    [user?.id],
+  );
+
+  // Charger les notifications initiales
+  useEffect(() => {
+    fetchNotifications();
+  }, [fetchNotifications]);
+
+  return {
+    data,
+    loading,
+    error,
+    refetch: fetchNotifications,
+    markAsRead,
+    markAllAsRead,
+    deleteNotification,
+    isEmpty: data.notifications.length === 0,
+    hasUnread: data.unreadCount > 0,
+    // Informations realtime
+    realtimeActive: realtimeTick > 0,
+    lastRealtimePayload: lastPayload,
+  };
+}

package/src/index.ts

@@ -2,12 +2,15 @@ export {
   AppProviders,
   useAuth,
   useModules,
-  useNotifications,
+  useNotifications as useNotificationsContext,
 } from "./layouts/AppProviders.js";
+export { useNotifications } from "./hooks/useNotifications.js";
+export { NotificationContainer } from "./components/NotificationContainer.js";
 export { useAuthSession } from "./auth/useAuthSession.js";
 export { signOut, signIn } from "./auth/authHelpers.js";
 export { RootLayout } from "./layouts/RootLayout.js";
 export { PublicLayout } from "./layouts/PublicLayout.js";
+export { PublicLayoutWithSidebar } from "./layouts/PublicLayoutWithSidebar.js";
 export { AuthLayout } from "./layouts/AuthLayout.js";
 export { AuthLayoutWithSidebar } from "./layouts/AuthLayoutWithSidebar.js";
 export { AdminLayout } from "./layouts/AdminLayout.js";

package/src/layouts/AdminLayoutWithSidebar.tsx

@@ -3,6 +3,7 @@
 import { AdminLayout } from "./AdminLayout.js";
 import { AppAside, AppAsideSkeleton } from "@lastbrain/ui";
 import { useAuthSession } from "../auth/useAuthSession.js";
+import { usePathname } from "next/navigation";
 
 interface AdminLayoutWithSidebarProps {
   children: React.ReactNode;
@@ -15,17 +16,27 @@ export function AdminLayoutWithSidebar({
   menuConfig,
   className = "",
 }: AdminLayoutWithSidebarProps) {
-  const { isSuperAdmin } = useAuthSession();
+  const { isSuperAdmin, loading, user } = useAuthSession();
+  const pathname = usePathname();
 
   // Détecter si on est dans la section admin pour le skeleton
-  const isAdminSection =
-    typeof window !== "undefined" &&
-    window.location.pathname.startsWith("/admin");
+  const isAdminSection = pathname.startsWith("/admin");
+
+  // Vérifier si menuConfig est vraiment disponible et valide
+  const hasValidMenuConfig =
+    menuConfig &&
+    typeof menuConfig === "object" &&
+    (menuConfig.admin?.length > 0 ||
+      menuConfig.auth?.length > 0 ||
+      menuConfig.public?.length > 0);
+
+  // Afficher le skeleton pendant le chargement de la session ou si pas de menuConfig valide
+  const shouldShowSkeleton = loading || !hasValidMenuConfig;
 
   return (
     <div className="flex min-h-screen">
-      {/* Afficher le skeleton pendant le chargement ou si pas de menuConfig */}
-      {!menuConfig ? (
+      {/* Afficher le skeleton pendant le chargement ou si pas de menuConfig valide */}
+      {shouldShowSkeleton ? (
         <AppAsideSkeleton
           className={className}
           isAdminSection={isAdminSection}
@@ -34,6 +45,7 @@ export function AdminLayoutWithSidebar({
         <AppAside
           menuConfig={menuConfig}
           isSuperAdmin={isSuperAdmin}
+          isAuthenticated={!!user}
           className={className}
         />
       )}

package/src/layouts/AppProviders.tsx

@@ -3,11 +3,40 @@
 import { createContext, useContext, useMemo } from "react";
 import { getModuleConfigs } from "../modules/module-loader.js";
 import { ToastProvider } from "@lastbrain/ui";
+import { RealtimeProvider } from "@lastbrain/core";
 import { useAuthSession } from "../auth/useAuthSession.js";
+import { useNotifications as useNotificationsHook } from "../hooks/useNotifications.js";
 import type { User } from "@supabase/supabase-js";
+import type { ModuleRealtimeConfig } from "@lastbrain/core";
+import type { NotificationsData } from "../hooks/useNotifications.js";
 
 const ModuleContext = createContext(getModuleConfigs());
-const NotificationContext = createContext({ messages: [] as string[] });
+const NotificationContext = createContext<{
+  data: NotificationsData;
+  loading: boolean;
+  error: string | null;
+  refetch: () => Promise<void>;
+  markAsRead: (id: string) => Promise<void>;
+  markAllAsRead: () => Promise<void>;
+  deleteNotification: (id: string) => Promise<void>;
+  isEmpty: boolean;
+  hasUnread: boolean;
+  realtimeActive: boolean;
+  lastRealtimePayload: unknown;
+}>({
+  data: { notifications: [], unreadCount: 0 },
+  loading: true,
+  error: null,
+  refetch: async () => {},
+  markAsRead: async () => {},
+  markAllAsRead: async () => {},
+  deleteNotification: async () => {},
+  isEmpty: true,
+  hasUnread: false,
+  realtimeActive: false,
+  lastRealtimePayload: null,
+});
+
 const AuthContext = createContext<{
   user: User | null;
   loading: boolean;
@@ -30,17 +59,23 @@ export function useAuth() {
   return useContext(AuthContext);
 }
 
-export function AppProviders({ children }: { children: React.ReactNode }) {
+export function AppProviders({
+  children,
+  realtimeConfig = [],
+}: {
+  children: React.ReactNode;
+  realtimeConfig?: ModuleRealtimeConfig[];
+}) {
   const modules = useMemo(() => getModuleConfigs(), []);
-  const notifications = useMemo(() => ({ messages: [] as string[] }), []);
-  const { user, loading, isSuperAdmin } = useAuthSession();
-  // const router = useRouter();
-  const authValue = useMemo(
-    () => ({ user, loading, isSuperAdmin }),
-    [user, loading, isSuperAdmin],
-  );
+  const { user, loading: authLoading, isSuperAdmin } = useAuthSession();
 
-  // const handleLogout = async () => {
+  // Hook de notifications seulement quand l'auth est prête
+  const notificationsData = useNotificationsHook(user);
+
+  const authValue = useMemo(
+    () => ({ user, loading: authLoading, isSuperAdmin }),
+    [user, authLoading, isSuperAdmin],
+  ); // const handleLogout = async () => {
   //   const { signOut } = await import("../auth/authHelpers.js");
   //   await signOut();
   //   router.push("/auth/signin");
@@ -49,9 +84,11 @@ export function AppProviders({ children }: { children: React.ReactNode }) {
   return (
     <AuthContext.Provider value={authValue}>
       <ModuleContext.Provider value={modules}>
-        <NotificationContext.Provider value={notifications}>
-          {children}
-          <ToastProvider placement="top-right" toastOffset={75} />
+        <NotificationContext.Provider value={notificationsData}>
+          <RealtimeProvider userId={user?.id} config={realtimeConfig}>
+            {children}
+            <ToastProvider placement="bottom-right" toastOffset={5} />
+          </RealtimeProvider>
         </NotificationContext.Provider>
       </ModuleContext.Provider>
     </AuthContext.Provider>

package/src/layouts/AuthLayoutWithSidebar.tsx

@@ -15,16 +15,27 @@ export function AuthLayoutWithSidebar({
   menuConfig,
   className = "",
 }: AuthLayoutWithSidebarProps) {
-  const { isSuperAdmin } = useAuthSession();
+  const { isSuperAdmin, loading, user } = useAuthSession();
 
   // Pour la section auth, isAdminSection sera false
   const isAdminSection = false;
 
+  // Vérifier si menuConfig est vraiment disponible et valide
+  const hasValidMenuConfig =
+    menuConfig &&
+    typeof menuConfig === "object" &&
+    (menuConfig.admin?.length > 0 ||
+      menuConfig.auth?.length > 0 ||
+      menuConfig.public?.length > 0);
+
+  // Afficher le skeleton pendant le chargement de la session ou si pas de menuConfig valide
+  const shouldShowSkeleton = loading || !hasValidMenuConfig;
+
   return (
     <div className="flex min-h-screen">
-      {/* Afficher le skeleton pendant le chargement ou si pas de menuConfig */}
-      {!menuConfig ? (
-        <AppAsideSkeleton 
+      {/* Afficher le skeleton pendant le chargement ou si pas de menuConfig valide */}
+      {shouldShowSkeleton ? (
+        <AppAsideSkeleton
           className={className}
           isAdminSection={isAdminSection}
         />
@@ -32,6 +43,7 @@ export function AuthLayoutWithSidebar({
         <AppAside
           menuConfig={menuConfig}
           isSuperAdmin={isSuperAdmin}
+          isAuthenticated={!!user}
           className={className}
         />
       )}

package/src/layouts/PublicLayout.tsx

@@ -1,5 +1,5 @@
 "use client";
 
 export function PublicLayout({ children }: { children: React.ReactNode }) {
-  return <section className=" px-4 ">{children}</section>;
+  return <section className=" ">{children}</section>;
 }

package/src/layouts/PublicLayoutWithSidebar.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { PublicLayout } from "./PublicLayout.js";
+import { AppAside, AppAsideSkeleton } from "@lastbrain/ui";
+import { useAuthSession } from "../auth/useAuthSession.js";
+
+interface PublicLayoutWithSidebarProps {
+  children: React.ReactNode;
+  menuConfig?: any;
+  className?: string;
+}
+
+export function PublicLayoutWithSidebar({
+  children,
+  menuConfig,
+  className = "",
+}: PublicLayoutWithSidebarProps) {
+  const { user, loading } = useAuthSession();
+
+  // Pour la section public, isAdminSection sera false
+  const isAdminSection = false;
+
+  // Vérifier si menuConfig est vraiment disponible et valide
+  const hasValidMenuConfig =
+    menuConfig &&
+    typeof menuConfig === "object" &&
+    (menuConfig.admin?.length > 0 ||
+      menuConfig.auth?.length > 0 ||
+      menuConfig.public?.length > 0);
+
+  // Afficher le skeleton pendant le chargement de la session ou si pas de menuConfig valide
+  const shouldShowSkeleton = loading || !hasValidMenuConfig;
+
+  return (
+    <div className="flex min-h-screen">
+      {/* Afficher le skeleton pendant le chargement ou si pas de menuConfig valide */}
+      {shouldShowSkeleton ? (
+        <AppAsideSkeleton
+          className={className}
+          isAdminSection={isAdminSection}
+        />
+      ) : (
+        <AppAside
+          menuConfig={menuConfig}
+          isSuperAdmin={false}
+          isAuthenticated={!!user}
+          className={className}
+        />
+      )}
+      {/* Contenu principal avec marge pour la sidebar */}
+      <div className="flex-1 lg:ml-72">
+        <PublicLayout>{children}</PublicLayout>
+      </div>
+    </div>
+  );
+}