@lastbrain/module-auth 0.1.16 → 0.1.19

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";