@lastbrain/module-auth 0.1.16 → 0.1.18

package/dist/auth.build.config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"auth.build.config.d.ts","sourceRoot":"","sources":["../src/auth.build.config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEzD,QAAA,MAAM,eAAe,EAAE,iBA6NtB,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"auth.build.config.d.ts","sourceRoot":"","sources":["../src/auth.build.config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEzD,QAAA,MAAM,eAAe,EAAE,iBAqUtB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/auth.build.config.js

@@ -120,18 +120,34 @@ const authBuildConfig = {
     menu: {
         public: [
             {
-                title: "Connexion",
-                description: "Connectez-vous à votre compte",
-                icon: "LogIn",
-                path: "/signin",
-                order: 1,
+                title: "Notifications",
+                description: "Vos notifications",
+                icon: "Bell",
+                path: "#",
+                order: 998,
+                type: "icon",
+                position: "end",
+                componentExport: "NotificationButton",
             },
             {
-                title: "Inscription",
-                description: "Créez votre compte",
-                icon: "UserPlus2",
-                path: "/signup",
-                order: 2,
+                title: "Compte",
+                description: "Gérer votre compte",
+                icon: "User",
+                path: "#",
+                order: 999,
+                type: "icon",
+                position: "end",
+                componentExport: "AccountButton",
+            },
+            {
+                title: "Theme",
+                description: "Changer le thème",
+                icon: "Palette",
+                path: "#",
+                order: 9999,
+                type: "icon",
+                position: "end",
+                componentExport: "ThemeSwitcherButton",
             },
         ],
         admin: [
@@ -144,6 +160,36 @@ const authBuildConfig = {
                 shortcut: "cmd+shift+u",
                 shortcutDisplay: "⌘⇧U",
             },
+            {
+                title: "Notifications",
+                description: "Vos notifications",
+                icon: "Bell",
+                path: "#",
+                order: 998,
+                type: "icon",
+                position: "end",
+                componentExport: "NotificationButton",
+            },
+            {
+                title: "Compte",
+                description: "Gérer votre compte",
+                icon: "User",
+                path: "#",
+                order: 999,
+                type: "icon",
+                position: "end",
+                componentExport: "AccountButton",
+            },
+            {
+                title: "Theme",
+                description: "Changer le thème",
+                icon: "Palette",
+                path: "#",
+                order: 9999,
+                type: "icon",
+                position: "end",
+                componentExport: "ThemeSwitcherButton",
+            },
         ],
         auth: [
             {
@@ -164,6 +210,36 @@ const authBuildConfig = {
                 shortcut: "cmd+shift+f",
                 shortcutDisplay: "⌘⇧F",
             },
+            {
+                title: "Notifications",
+                description: "Vos notifications",
+                icon: "Bell",
+                path: "#",
+                order: 998,
+                type: "icon",
+                position: "end",
+                componentExport: "NotificationButton",
+            },
+            {
+                title: "Compte",
+                description: "Gérer votre compte",
+                icon: "User",
+                path: "#",
+                order: 999,
+                type: "icon",
+                position: "end",
+                componentExport: "AccountButton",
+            },
+            {
+                title: "Theme",
+                description: "Changer le thème",
+                icon: "Palette",
+                path: "#",
+                order: 9999,
+                type: "icon",
+                position: "end",
+                componentExport: "ThemeSwitcherButton",
+            },
         ],
         account: [
             {
@@ -219,5 +295,33 @@ const authBuildConfig = {
             },
         ],
     },
+    storage: {
+        buckets: [
+            {
+                name: "app",
+                public: false,
+                description: "Private user files and documents /{userId}/...",
+                maxFileSize: 100 * 1024 * 1024, // 100MB
+                customAccessControl: (userId, filePath) => {
+                    // Users can only access files in their own folder (app/{userId}/...)
+                    return filePath.startsWith(`${userId}/`);
+                },
+            },
+            {
+                name: "avatar",
+                public: true,
+                description: "Public user avatar images",
+                allowedMimeTypes: [
+                    "image/jpeg",
+                    "image/jpg",
+                    "image/png",
+                    "image/webp",
+                    "image/gif",
+                ],
+                maxFileSize: 5242880, // 5MB
+                fileSizeLimit: "5MB",
+            },
+        ],
+    },
 };
 export default authBuildConfig;

package/dist/components/AccountButton.d.ts

@@ -0,0 +1,18 @@
+import type { User } from "@supabase/supabase-js";
+interface AccountButtonProps {
+    item: {
+        path: string;
+        title: string;
+    };
+    user?: User | null;
+    accountMenu?: Array<{
+        title: string;
+        description?: string;
+        icon?: string;
+        path: string;
+    }>;
+    onLogout?: () => void | Promise<void>;
+}
+export declare const AccountButton: ({ user, accountMenu, onLogout, }: AccountButtonProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=AccountButton.d.ts.map

package/dist/components/AccountButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccountButton.d.ts","sourceRoot":"","sources":["../../src/components/AccountButton.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAGlD,UAAU,kBAAkB;IAC1B,IAAI,EAAE;QACJ,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IACF,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,WAAW,CAAC,EAAE,KAAK,CAAC;QAClB,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;KACd,CAAC,CAAC;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACvC;AASD,eAAO,MAAM,aAAa,GAAI,kCAI3B,kBAAkB,4CAoHpB,CAAC"}

package/dist/components/AccountButton.js

@@ -0,0 +1,40 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, Link } from "@lastbrain/ui";
+import { Avatar } from "@lastbrain/ui";
+import { Dropdown, DropdownItem, DropdownMenu, DropdownTrigger, } from "@lastbrain/ui";
+import * as LucideIcons from "lucide-react";
+// Fonction pour récupérer l'icône Lucide
+const getIcon = (iconName) => {
+    if (!iconName)
+        return null;
+    const Icon = LucideIcons[iconName];
+    return Icon ? Icon : null;
+};
+export const AccountButton = ({ user, accountMenu = [], onLogout, }) => {
+    if (!user)
+        return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "block md:hidden", children: [_jsx(Button, { as: Link, href: "/signin", radius: "full", isIconOnly: true, variant: "light", color: "primary", children: _jsx(LucideIcons.LogIn, { size: 16 }) }), _jsx(Button, { as: Link, href: "/signup", radius: "full", isIconOnly: true, variant: "flat", className: "ml-2", color: "secondary", children: _jsx(LucideIcons.UserPlus2, { size: 16 }) })] }), _jsxs("div", { className: "hidden md:block", children: [_jsx(Button, { as: Link, href: "/signin", startContent: _jsx(LucideIcons.LogIn, { size: 16 }), variant: "light", color: "primary", children: "Se connecter" }), _jsx(Button, { as: Link, href: "/signup", variant: "flat", className: "ml-2", color: "secondary", startContent: _jsx(LucideIcons.UserPlus2, { size: 16 }), children: "S'inscrire" })] })] }));
+    return (_jsxs(Dropdown, { children: [_jsx(DropdownTrigger, { children: _jsx(Avatar, { size: "sm", src: `/api/storage/${user?.user_metadata.avatar}`, title: user.email, fallback: _jsx(LucideIcons.User2, { size: 18 }), classNames: {
+                        base: "bg-white/0",
+                        icon: "text-default-700",
+                    } }) }), _jsx(DropdownMenu, { items: [
+                    {
+                        key: "hello",
+                        label: `Bonjour ${user?.user_metadata?.full_name || user.email}`,
+                        isReadOnly: true,
+                    },
+                    ...accountMenu.map((item) => ({
+                        key: item.path,
+                        label: item.title,
+                        description: item.description,
+                        icon: item.icon,
+                        isLogout: item.path.includes("signout") || item.path.includes("logout"),
+                        href: item.path.includes("signout") || item.path.includes("logout")
+                            ? undefined
+                            : item.path,
+                    })),
+                ], children: (item) => {
+                    const Icon = item.icon ? getIcon(item.icon) : null;
+                    return (_jsx(DropdownItem, { href: item.href, onPress: item.isLogout ? () => onLogout?.() : undefined, color: item.isLogout ? "danger" : "default", description: item.description, startContent: Icon && _jsx(Icon, { size: 16 }), isDisabled: item.isReadOnly, isReadOnly: item.isReadOnly, children: item.label }, item.key));
+                } })] }));
+};

package/dist/components/NotificationButton.d.ts

@@ -0,0 +1,18 @@
+import { type UserNotification } from "@lastbrain/ui";
+import type { User } from "@supabase/supabase-js";
+interface NotificationButtonProps {
+    item: {
+        path: string;
+        title: string;
+    };
+    user?: User | null;
+    notifications?: UserNotification[];
+    unreadCount?: number;
+    notificationsLoading?: boolean;
+    onMarkAsRead?: (id: string) => void;
+    onMarkAllAsRead?: () => void;
+    onDeleteNotification?: (id: string) => void;
+}
+export declare const NotificationButton: ({ user, notifications, unreadCount, notificationsLoading, onMarkAsRead, onMarkAllAsRead, onDeleteNotification, }: NotificationButtonProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=NotificationButton.d.ts.map

package/dist/components/NotificationButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationButton.d.ts","sourceRoot":"","sources":["../../src/components/NotificationButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAgB,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACpE,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAElD,UAAU,uBAAuB;IAC/B,IAAI,EAAE;QACJ,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IACF,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,aAAa,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACnC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,YAAY,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,oBAAoB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C;AAED,eAAO,MAAM,kBAAkB,GAAI,kHAQhC,uBAAuB,mDAazB,CAAC"}

package/dist/components/NotificationButton.js

@@ -0,0 +1,8 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Notification } from "@lastbrain/ui";
+export const NotificationButton = ({ user, notifications = [], unreadCount = 0, notificationsLoading = false, onMarkAsRead = () => { }, onMarkAllAsRead = () => { }, onDeleteNotification = () => { }, }) => {
+    if (!user)
+        return null;
+    return (_jsx(Notification, { notifications: notifications, unreadCount: unreadCount, loading: notificationsLoading, onMarkAsRead: onMarkAsRead, onMarkAllAsRead: onMarkAllAsRead, onDelete: onDeleteNotification }));
+};

package/dist/components/ThemeSwitcherButton.d.ts

@@ -0,0 +1,9 @@
+interface ThemeSwitcherButtonProps {
+    item: {
+        path: string;
+        title: string;
+    };
+}
+export declare const ThemeSwitcherButton: (_props: ThemeSwitcherButtonProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ThemeSwitcherButton.d.ts.map

package/dist/components/ThemeSwitcherButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeSwitcherButton.d.ts","sourceRoot":"","sources":["../../src/components/ThemeSwitcherButton.tsx"],"names":[],"mappings":"AAIA,UAAU,wBAAwB;IAChC,IAAI,EAAE;QACJ,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;CACH;AAED,eAAO,MAAM,mBAAmB,GAAI,QAAQ,wBAAwB,4CAEnE,CAAC"}

package/dist/components/ThemeSwitcherButton.js

@@ -0,0 +1,6 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ThemeSwitcher } from "@lastbrain/ui";
+export const ThemeSwitcherButton = (_props) => {
+    return _jsx(ThemeSwitcher, {});
+};

package/dist/index.d.ts

@@ -8,6 +8,9 @@ export { ReglagePage } from "./web/auth/reglage.js";
 export { AdminUsersPage } from "./web/admin/users.js";
 export { default as UserPage } from "./web/admin/users/[id].js";
 export { UserDetailPage } from "./web/admin/user-detail.js";
+export { AccountButton } from "./components/AccountButton.js";
+export { NotificationButton } from "./components/NotificationButton.js";
+export { ThemeSwitcherButton } from "./components/ThemeSwitcherButton.js";
 export { Doc } from "./components/Doc.js";
 export { Doc as AuthModuleDoc } from "./components/Doc.js";
 export { default as authBuildConfig } from "./auth.build.config.js";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAE5D,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,GAAG,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAE3D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAG5D,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AACxE,OAAO,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAG1E,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,GAAG,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAE3D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/index.js

@@ -9,6 +9,10 @@ export { ReglagePage } from "./web/auth/reglage.js";
 export { AdminUsersPage } from "./web/admin/users.js";
 export { default as UserPage } from "./web/admin/users/[id].js";
 export { UserDetailPage } from "./web/admin/user-detail.js";
+// Header Components
+export { AccountButton } from "./components/AccountButton.js";
+export { NotificationButton } from "./components/NotificationButton.js";
+export { ThemeSwitcherButton } from "./components/ThemeSwitcherButton.js";
 // Documentation
 export { Doc } from "./components/Doc.js";
 export { Doc as AuthModuleDoc } from "./components/Doc.js";

package/dist/web/auth/profile.js

@@ -174,21 +174,21 @@ export function ProfilePage() {
     if (isLoading) {
         return (_jsx("div", { className: "flex justify-center items-center min-h-[400px]", children: _jsx(Spinner, { size: "lg", label: "Loading profile..." }) }));
     }
-    return (_jsxs("div", { className: "pt-12 pb-12 max-w-4xl mx-auto px-4", children: [_jsxs("div", { className: "flex items-center gap-2 mb-8", children: [_jsx(User, { className: "w-8 h-8" }), _jsx("h1", { className: "text-3xl font-bold", children: "Edit Profile" })] }), _jsx("form", { onSubmit: handleSubmit, children: _jsxs("div", { className: "space-y-6", children: [_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx("h3", { className: "text-lg font-semibold", children: "Photo de profil" }) }), _jsx(Divider, {}), _jsx(CardBody, { children: _jsx("div", { className: "flex justify-center", children: _jsx(AvatarUploader, { userId: currentUser?.id, bucket: "avatar", shape: "circle", onUpload: handleAvatarUpload, onDelete: handleAvatarDelete, initialAvatarPath: currentUser?.user_metadata?.avatar ||
-                                                profile.avatar_url ||
-                                                null, initialAvatarSizes: (() => {
-                                                const sizes = currentUser?.user_metadata
-                                                    ?.avatar_sizes;
-                                                if (!sizes)
-                                                    return null;
-                                                return {
-                                                    small: sizes.small ?? null,
-                                                    medium: sizes.medium ?? null,
-                                                    large: sizes.large ?? null,
-                                                };
-                                            })(), onUploaded: (urls) => {
-                                                setProfile((prev) => ({ ...prev, avatar_url: urls.large }));
-                                            }, onDeleted: () => {
-                                                setProfile((prev) => ({ ...prev, avatar_url: "" }));
-                                            } }) }) })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx("h3", { className: "text-lg font-semibold", children: "Personal Information" }) }), _jsx(Divider, {}), _jsx(CardBody, { children: _jsxs("div", { className: "grid gap-4 md:grid-cols-2", children: [_jsx(Input, { label: "First Name", placeholder: "Enter your first name", value: profile.first_name || "", onChange: (e) => handleChange("first_name", e.target.value) }), _jsx(Input, { label: "Last Name", placeholder: "Enter your last name", value: profile.last_name || "", onChange: (e) => handleChange("last_name", e.target.value) }), _jsx(Input, { label: "Phone", placeholder: "Enter your phone number", type: "tel", value: profile.phone || "", onChange: (e) => handleChange("phone", e.target.value), className: "md:col-span-2" }), _jsx(Textarea, { label: "Bio", placeholder: "Tell us about yourself", value: profile.bio || "", onChange: (e) => handleChange("bio", e.target.value), minRows: 3, className: "md:col-span-2" })] }) })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx("h3", { className: "text-lg font-semibold", children: "Professional Information" }) }), _jsx(Divider, {}), _jsx(CardBody, { children: _jsxs("div", { className: "grid gap-4 md:grid-cols-2", children: [_jsx(Input, { label: "Company", placeholder: "Enter your company name", value: profile.company || "", onChange: (e) => handleChange("company", e.target.value) }), _jsx(Input, { label: "Website", placeholder: "https://example.com", type: "url", value: profile.website || "", onChange: (e) => handleChange("website", e.target.value) }), _jsx(Input, { label: "Location", placeholder: "City, Country", value: profile.location || "", onChange: (e) => handleChange("location", e.target.value), className: "md:col-span-2" })] }) })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx("h3", { className: "text-lg font-semibold", children: "Preferences" }) }), _jsx(Divider, {}), _jsx(CardBody, { children: _jsxs("div", { className: "grid gap-4 md:grid-cols-2", children: [_jsx(Input, { label: "Language", placeholder: "en, fr, es...", value: profile.language || "", onChange: (e) => handleChange("language", e.target.value) }), _jsx(Input, { label: "Timezone", placeholder: "Europe/Paris, America/New_York...", value: profile.timezone || "", onChange: (e) => handleChange("timezone", e.target.value) })] }) })] }), _jsxs("div", { className: "flex justify-end gap-3", children: [_jsx(Button, { type: "button", variant: "flat", onPress: () => fetchProfile(), isDisabled: isSaving, children: "Cancel" }), _jsx(Button, { type: "submit", color: "primary", isLoading: isSaving, startContent: !isSaving && _jsx(Save, { className: "w-4 h-4" }), children: isSaving ? "Saving..." : "Save Changes" })] })] }) })] }));
+    return (_jsxs("div", { className: "pt-12 pb-12 max-w-4xl mx-auto px-4", children: [_jsxs("div", { className: "flex items-center gap-2 mb-8", children: [_jsx(User, { className: "w-8 h-8" }), _jsx("h1", { className: "text-3xl font-bold", children: "Edit Profile" })] }), _jsx("form", { onSubmit: handleSubmit, children: _jsxs("div", { className: "space-y-6", children: [_jsx("div", { className: "flex justify-center", children: _jsx(AvatarUploader, { userId: currentUser?.id, bucket: "avatar", shape: "circle", onUpload: handleAvatarUpload, onDelete: handleAvatarDelete, initialAvatarPath: currentUser?.user_metadata?.avatar ||
+                                    profile.avatar_url ||
+                                    null, initialAvatarSizes: (() => {
+                                    const sizes = currentUser?.user_metadata
+                                        ?.avatar_sizes;
+                                    if (!sizes)
+                                        return null;
+                                    return {
+                                        small: sizes.small ?? null,
+                                        medium: sizes.medium ?? null,
+                                        large: sizes.large ?? null,
+                                    };
+                                })(), onUploaded: (urls) => {
+                                    setProfile((prev) => ({ ...prev, avatar_url: urls.large }));
+                                }, onDeleted: () => {
+                                    setProfile((prev) => ({ ...prev, avatar_url: "" }));
+                                } }) }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx("h3", { className: "text-lg font-semibold", children: "Personal Information" }) }), _jsx(Divider, {}), _jsx(CardBody, { children: _jsxs("div", { className: "grid gap-4 md:grid-cols-2", children: [_jsx(Input, { label: "First Name", placeholder: "Enter your first name", value: profile.first_name || "", onChange: (e) => handleChange("first_name", e.target.value) }), _jsx(Input, { label: "Last Name", placeholder: "Enter your last name", value: profile.last_name || "", onChange: (e) => handleChange("last_name", e.target.value) }), _jsx(Input, { label: "Phone", placeholder: "Enter your phone number", type: "tel", value: profile.phone || "", onChange: (e) => handleChange("phone", e.target.value), className: "md:col-span-2" }), _jsx(Textarea, { label: "Bio", placeholder: "Tell us about yourself", value: profile.bio || "", onChange: (e) => handleChange("bio", e.target.value), minRows: 3, className: "md:col-span-2" })] }) })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx("h3", { className: "text-lg font-semibold", children: "Professional Information" }) }), _jsx(Divider, {}), _jsx(CardBody, { children: _jsxs("div", { className: "grid gap-4 md:grid-cols-2", children: [_jsx(Input, { label: "Company", placeholder: "Enter your company name", value: profile.company || "", onChange: (e) => handleChange("company", e.target.value) }), _jsx(Input, { label: "Website", placeholder: "https://example.com", type: "url", value: profile.website || "", onChange: (e) => handleChange("website", e.target.value) }), _jsx(Input, { label: "Location", placeholder: "City, Country", value: profile.location || "", onChange: (e) => handleChange("location", e.target.value), className: "md:col-span-2" })] }) })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx("h3", { className: "text-lg font-semibold", children: "Preferences" }) }), _jsx(Divider, {}), _jsx(CardBody, { children: _jsxs("div", { className: "grid gap-4 md:grid-cols-2", children: [_jsx(Input, { label: "Language", placeholder: "en, fr, es...", value: profile.language || "", onChange: (e) => handleChange("language", e.target.value) }), _jsx(Input, { label: "Timezone", placeholder: "Europe/Paris, America/New_York...", value: profile.timezone || "", onChange: (e) => handleChange("timezone", e.target.value) })] }) })] }), _jsxs("div", { className: "flex justify-end gap-3", children: [_jsx(Button, { type: "button", variant: "flat", onPress: () => fetchProfile(), isDisabled: isSaving, children: "Cancel" }), _jsx(Button, { type: "submit", color: "primary", isLoading: isSaving, startContent: !isSaving && _jsx(Save, { className: "w-4 h-4" }), children: isSaving ? "Saving..." : "Save Changes" })] })] }) })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lastbrain/module-auth",
-  "version": "0.1.16",
+  "version": "0.1.18",
   "description": "Module d'authentification complet pour LastBrain avec Supabase",
   "private": false,
   "type": "module",
@@ -31,6 +31,7 @@
   "dependencies": {
     "@lastbrain/core": "^0.1.0",
     "@lastbrain/ui": "^0.1.4",
+    "@supabase/supabase-js": "^2.86.0",
     "lucide-react": "^0.554.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"

package/src/auth.build.config.ts

@@ -122,18 +122,34 @@ const authBuildConfig: ModuleBuildConfig = {
   menu: {
     public: [
       {
-        title: "Connexion",
-        description: "Connectez-vous à votre compte",
-        icon: "LogIn",
-        path: "/signin",
-        order: 1,
+        title: "Notifications",
+        description: "Vos notifications",
+        icon: "Bell",
+        path: "#",
+        order: 998,
+        type: "icon",
+        position: "end",
+        componentExport: "NotificationButton",
       },
       {
-        title: "Inscription",
-        description: "Créez votre compte",
-        icon: "UserPlus2",
-        path: "/signup",
-        order: 2,
+        title: "Compte",
+        description: "Gérer votre compte",
+        icon: "User",
+        path: "#",
+        order: 999,
+        type: "icon",
+        position: "end",
+        componentExport: "AccountButton",
+      },
+      {
+        title: "Theme",
+        description: "Changer le thème",
+        icon: "Palette",
+        path: "#",
+        order: 9999,
+        type: "icon",
+        position: "end",
+        componentExport: "ThemeSwitcherButton",
       },
     ],
     admin: [
@@ -146,6 +162,36 @@ const authBuildConfig: ModuleBuildConfig = {
         shortcut: "cmd+shift+u",
         shortcutDisplay: "⌘⇧U",
       },
+      {
+        title: "Notifications",
+        description: "Vos notifications",
+        icon: "Bell",
+        path: "#",
+        order: 998,
+        type: "icon",
+        position: "end",
+        componentExport: "NotificationButton",
+      },
+      {
+        title: "Compte",
+        description: "Gérer votre compte",
+        icon: "User",
+        path: "#",
+        order: 999,
+        type: "icon",
+        position: "end",
+        componentExport: "AccountButton",
+      },
+      {
+        title: "Theme",
+        description: "Changer le thème",
+        icon: "Palette",
+        path: "#",
+        order: 9999,
+        type: "icon",
+        position: "end",
+        componentExport: "ThemeSwitcherButton",
+      },
     ],
     auth: [
       {
@@ -166,6 +212,36 @@ const authBuildConfig: ModuleBuildConfig = {
         shortcut: "cmd+shift+f",
         shortcutDisplay: "⌘⇧F",
       },
+      {
+        title: "Notifications",
+        description: "Vos notifications",
+        icon: "Bell",
+        path: "#",
+        order: 998,
+        type: "icon",
+        position: "end",
+        componentExport: "NotificationButton",
+      },
+      {
+        title: "Compte",
+        description: "Gérer votre compte",
+        icon: "User",
+        path: "#",
+        order: 999,
+        type: "icon",
+        position: "end",
+        componentExport: "AccountButton",
+      },
+      {
+        title: "Theme",
+        description: "Changer le thème",
+        icon: "Palette",
+        path: "#",
+        order: 9999,
+        type: "icon",
+        position: "end",
+        componentExport: "ThemeSwitcherButton",
+      },
     ],
     account: [
       {
@@ -221,6 +297,34 @@ const authBuildConfig: ModuleBuildConfig = {
       },
     ],
   },
+  storage: {
+    buckets: [
+      {
+        name: "app",
+        public: false,
+        description: "Private user files and documents /{userId}/...",
+        maxFileSize: 100 * 1024 * 1024, // 100MB
+        customAccessControl: (userId: string, filePath: string) => {
+          // Users can only access files in their own folder (app/{userId}/...)
+          return filePath.startsWith(`${userId}/`);
+        },
+      },
+      {
+        name: "avatar",
+        public: true,
+        description: "Public user avatar images",
+        allowedMimeTypes: [
+          "image/jpeg",
+          "image/jpg",
+          "image/png",
+          "image/webp",
+          "image/gif",
+        ],
+        maxFileSize: 5242880, // 5MB
+        fileSizeLimit: "5MB",
+      },
+    ],
+  },
 };
 
 export default authBuildConfig;

package/src/components/AccountButton.tsx

@@ -0,0 +1,157 @@
+"use client";
+
+import { Button, Link } from "@lastbrain/ui";
+import { Avatar } from "@lastbrain/ui";
+import {
+  Dropdown,
+  DropdownItem,
+  DropdownMenu,
+  DropdownTrigger,
+} from "@lastbrain/ui";
+import * as LucideIcons from "lucide-react";
+import type { User } from "@supabase/supabase-js";
+import { use } from "react";
+
+interface AccountButtonProps {
+  item: {
+    path: string;
+    title: string;
+  };
+  user?: User | null;
+  accountMenu?: Array<{
+    title: string;
+    description?: string;
+    icon?: string;
+    path: string;
+  }>;
+  onLogout?: () => void | Promise<void>;
+}
+
+// Fonction pour récupérer l'icône Lucide
+const getIcon = (iconName?: string) => {
+  if (!iconName) return null;
+  const Icon = (LucideIcons as any)[iconName];
+  return Icon ? Icon : null;
+};
+
+export const AccountButton = ({
+  user,
+  accountMenu = [],
+  onLogout,
+}: AccountButtonProps) => {
+  if (!user)
+    return (
+      <>
+        <div className="block md:hidden">
+          <Button
+            as={Link}
+            href="/signin"
+            radius="full"
+            isIconOnly
+            variant="light"
+            color="primary"
+          >
+            <LucideIcons.LogIn size={16} />
+          </Button>
+          <Button
+            as={Link}
+            href="/signup"
+            radius="full"
+            isIconOnly
+            variant="flat"
+            className="ml-2"
+            color="secondary"
+          >
+            <LucideIcons.UserPlus2 size={16} />
+          </Button>
+        </div>
+        <div className="hidden md:block">
+          <Button
+            as={Link}
+            href="/signin"
+            startContent={<LucideIcons.LogIn size={16} />}
+            variant="light"
+            color="primary"
+          >
+            Se connecter
+          </Button>
+          <Button
+            as={Link}
+            href="/signup"
+            variant="flat"
+            className="ml-2"
+            color="secondary"
+            startContent={<LucideIcons.UserPlus2 size={16} />}
+          >
+            S'inscrire
+          </Button>
+        </div>
+      </>
+    );
+
+  return (
+    <Dropdown>
+      <DropdownTrigger>
+        <Avatar
+          size="sm"
+          src={`/api/storage/${user?.user_metadata.avatar}`}
+          title={user.email}
+          fallback={<LucideIcons.User2 size={18} />}
+          classNames={{
+            base: "bg-white/0",
+            icon: "text-default-700",
+          }}
+        />
+      </DropdownTrigger>
+
+      <DropdownMenu
+        items={[
+          {
+            key: "hello",
+            label: `Bonjour ${user?.user_metadata?.full_name || user.email}`,
+            isReadOnly: true,
+          },
+          ...accountMenu.map((item) => ({
+            key: item.path,
+            label: item.title,
+            description: item.description,
+            icon: item.icon,
+            isLogout:
+              item.path.includes("signout") || item.path.includes("logout"),
+            href:
+              item.path.includes("signout") || item.path.includes("logout")
+                ? undefined
+                : item.path,
+          })),
+        ]}
+      >
+        {(item: {
+          key: string;
+          label: string;
+          description?: string;
+          icon?: string;
+          isLogout?: boolean;
+          href?: string;
+          isReadOnly?: boolean;
+        }) => {
+          const Icon = item.icon ? getIcon(item.icon) : null;
+
+          return (
+            <DropdownItem
+              key={item.key}
+              href={item.href}
+              onPress={item.isLogout ? () => onLogout?.() : undefined}
+              color={item.isLogout ? "danger" : "default"}
+              description={item.description}
+              startContent={Icon && <Icon size={16} />}
+              isDisabled={item.isReadOnly}
+              isReadOnly={item.isReadOnly}
+            >
+              {item.label}
+            </DropdownItem>
+          );
+        }}
+      </DropdownMenu>
+    </Dropdown>
+  );
+};

package/src/components/NotificationButton.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { Notification, type UserNotification } from "@lastbrain/ui";
+import type { User } from "@supabase/supabase-js";
+
+interface NotificationButtonProps {
+  item: {
+    path: string;
+    title: string;
+  };
+  user?: User | null;
+  notifications?: UserNotification[];
+  unreadCount?: number;
+  notificationsLoading?: boolean;
+  onMarkAsRead?: (id: string) => void;
+  onMarkAllAsRead?: () => void;
+  onDeleteNotification?: (id: string) => void;
+}
+
+export const NotificationButton = ({
+  user,
+  notifications = [],
+  unreadCount = 0,
+  notificationsLoading = false,
+  onMarkAsRead = () => {},
+  onMarkAllAsRead = () => {},
+  onDeleteNotification = () => {},
+}: NotificationButtonProps) => {
+  if (!user) return null;
+
+  return (
+    <Notification
+      notifications={notifications}
+      unreadCount={unreadCount}
+      loading={notificationsLoading}
+      onMarkAsRead={onMarkAsRead}
+      onMarkAllAsRead={onMarkAllAsRead}
+      onDelete={onDeleteNotification}
+    />
+  );
+};

package/src/components/ThemeSwitcherButton.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import { ThemeSwitcher } from "@lastbrain/ui";
+
+interface ThemeSwitcherButtonProps {
+  item: {
+    path: string;
+    title: string;
+  };
+}
+
+export const ThemeSwitcherButton = (_props: ThemeSwitcherButtonProps) => {
+  return <ThemeSwitcher />;
+};

package/src/index.ts

@@ -9,6 +9,12 @@ export { ReglagePage } from "./web/auth/reglage.js";
 export { AdminUsersPage } from "./web/admin/users.js";
 export { default as UserPage } from "./web/admin/users/[id].js";
 export { UserDetailPage } from "./web/admin/user-detail.js";
+
+// Header Components
+export { AccountButton } from "./components/AccountButton.js";
+export { NotificationButton } from "./components/NotificationButton.js";
+export { ThemeSwitcherButton } from "./components/ThemeSwitcherButton.js";
+
 // Documentation
 export { Doc } from "./components/Doc.js";
 export { Doc as AuthModuleDoc } from "./components/Doc.js";

package/src/web/auth/profile.tsx

@@ -260,44 +260,44 @@ export function ProfilePage() {
       <form onSubmit={handleSubmit}>
         <div className="space-y-6">
           {/* Avatar Section */}
-          <Card>
+          {/* <Card className="max-w-sm mx-auto">
             <CardHeader>
               <h3 className="text-lg font-semibold">Photo de profil</h3>
             </CardHeader>
             <Divider />
-            <CardBody>
-              <div className="flex justify-center">
-                <AvatarUploader
-                  userId={currentUser?.id}
-                  bucket="avatar"
-                  shape="circle"
-                  onUpload={handleAvatarUpload}
-                  onDelete={handleAvatarDelete}
-                  initialAvatarPath={
-                    (currentUser?.user_metadata as UserMetadata)?.avatar ||
-                    profile.avatar_url ||
-                    null
-                  }
-                  initialAvatarSizes={(() => {
-                    const sizes = (currentUser?.user_metadata as UserMetadata)
-                      ?.avatar_sizes;
-                    if (!sizes) return null;
-                    return {
-                      small: sizes.small ?? null,
-                      medium: sizes.medium ?? null,
-                      large: sizes.large ?? null,
-                    };
-                  })()}
-                  onUploaded={(urls) => {
-                    setProfile((prev) => ({ ...prev, avatar_url: urls.large }));
-                  }}
-                  onDeleted={() => {
-                    setProfile((prev) => ({ ...prev, avatar_url: "" }));
-                  }}
-                />
-              </div>
-            </CardBody>
-          </Card>
+            <CardBody> */}
+          <div className="flex justify-center">
+            <AvatarUploader
+              userId={currentUser?.id}
+              bucket="avatar"
+              shape="circle"
+              onUpload={handleAvatarUpload}
+              onDelete={handleAvatarDelete}
+              initialAvatarPath={
+                (currentUser?.user_metadata as UserMetadata)?.avatar ||
+                profile.avatar_url ||
+                null
+              }
+              initialAvatarSizes={(() => {
+                const sizes = (currentUser?.user_metadata as UserMetadata)
+                  ?.avatar_sizes;
+                if (!sizes) return null;
+                return {
+                  small: sizes.small ?? null,
+                  medium: sizes.medium ?? null,
+                  large: sizes.large ?? null,
+                };
+              })()}
+              onUploaded={(urls) => {
+                setProfile((prev) => ({ ...prev, avatar_url: urls.large }));
+              }}
+              onDeleted={() => {
+                setProfile((prev) => ({ ...prev, avatar_url: "" }));
+              }}
+            />
+          </div>
+          {/* </CardBody>
+          </Card> */}
 
           {/* Personal Information */}
           <Card>

package/supabase/migrations/20251127100000_rename_body_to_message.sql

@@ -0,0 +1,9 @@
+-- Migration: Add message column to user_notifications table
+-- message: short text summary (required)
+-- body: rich HTML content (optional)
+
+ALTER TABLE public.user_notifications
+ADD COLUMN IF NOT EXISTS message TEXT NOT NULL DEFAULT '';
+
+-- If you have existing data, you might want to copy body to message:
+-- UPDATE public.user_notifications SET message = COALESCE(body, title) WHERE message = '';