@lastbrain/app 0.1.36 → 0.1.39

package/src/__tests__/module-registry.test.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from "vitest";
-import { AVAILABLE_MODULES } from "../scripts/module-add";
+import { AVAILABLE_MODULES } from "@lastbrain/core/config/modules";
 
 describe("Module Registry", () => {
   describe("AVAILABLE_MODULES", () => {
@@ -11,32 +11,20 @@ describe("Module Registry", () => {
       const authModule = AVAILABLE_MODULES.find((m) => m.name === "auth");
       expect(authModule).toBeDefined();
       expect(authModule?.package).toBe("@lastbrain/module-auth");
-      expect(authModule?.hasMigrations).toBe(true);
     });
 
     it("should have ai module defined", () => {
       const aiModule = AVAILABLE_MODULES.find((m) => m.name === "ai");
       expect(aiModule).toBeDefined();
       expect(aiModule?.package).toBe("@lastbrain/module-ai");
-      expect(aiModule?.hasMigrations).toBe(true);
     });
 
     it("should have all required properties for each module", () => {
       AVAILABLE_MODULES.forEach((module) => {
         expect(module.name).toBeDefined();
         expect(module.package).toBeDefined();
-        expect(module.displayName).toBeDefined();
+        expect(module.emoji).toBeDefined();
         expect(module.description).toBeDefined();
-        expect(typeof module.hasMigrations).toBe("boolean");
-      });
-    });
-
-    it("should have migrations paths when hasMigrations is true", () => {
-      AVAILABLE_MODULES.forEach((module) => {
-        if (module.hasMigrations) {
-          expect(module.migrationsPath).toBeDefined();
-          expect(module.migrationsDownPath).toBeDefined();
-        }
       });
     });
 
@@ -52,10 +40,10 @@ describe("Module Registry", () => {
       expect(packages.length).toBe(uniquePackages.size);
     });
 
-    it("should have display names with emoji", () => {
+    it("should have emoji", () => {
       AVAILABLE_MODULES.forEach((module) => {
-        // Check if displayName contains at least one emoji (basic check)
-        expect(module.displayName).toMatch(/[\u{1F300}-\u{1F9FF}]/u);
+        // Check if emoji contains at least one emoji (basic check)
+        expect(module.emoji).toMatch(/[\u{1F300}-\u{1F9FF}]/u);
       });
     });
 

package/src/layouts/AdminLayoutWithSidebar.tsx

@@ -4,6 +4,7 @@ import { AdminLayout } from "./AdminLayout.js";
 import { AppAside, AppAsideSkeleton } from "@lastbrain/ui";
 import { useAuthSession } from "../auth/useAuthSession.js";
 import { usePathname } from "next/navigation";
+import { useEffect, useState } from "react";
 
 interface AdminLayoutWithSidebarProps {
   children: React.ReactNode;
@@ -18,6 +19,53 @@ export function AdminLayoutWithSidebar({
 }: AdminLayoutWithSidebarProps) {
   const { isSuperAdmin, loading, user } = useAuthSession();
   const pathname = usePathname();
+  const [isCollapsed, setIsCollapsed] = useState(() => {
+    if (typeof window !== "undefined") {
+      const savedState = localStorage.getItem("aside-collapsed");
+      return savedState !== null ? JSON.parse(savedState) : false;
+    }
+    return false;
+  });
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    setMounted(true);
+  }, []);
+
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      // Écouter les changements du localStorage depuis le même onglet
+      const handleStorageChange = (_e: StorageEvent | CustomEvent) => {
+        const savedState = localStorage.getItem("aside-collapsed");
+        if (savedState !== null) {
+          // Utiliser queueMicrotask pour déférer le setState
+          queueMicrotask(() => {
+            setIsCollapsed(JSON.parse(savedState));
+          });
+        }
+      };
+
+      // Écouter l'événement storage (changements depuis d'autres onglets)
+      window.addEventListener("storage", handleStorageChange as EventListener);
+      // Écouter l'événement custom pour les changements du même onglet
+      window.addEventListener(
+        "localStorage-changed",
+        handleStorageChange as EventListener,
+      );
+
+      return () => {
+        window.removeEventListener(
+          "storage",
+          handleStorageChange as EventListener,
+        );
+        window.removeEventListener(
+          "localStorage-changed",
+          handleStorageChange as EventListener,
+        );
+      };
+    }
+  }, []);
 
   // Détecter si on est dans la section admin pour le skeleton
   const isAdminSection = pathname.startsWith("/admin");
@@ -51,7 +99,9 @@ export function AdminLayoutWithSidebar({
       )}
 
       {/* Contenu principal avec marge pour la sidebar */}
-      <div className="flex-1 lg:ml-72">
+      <div
+        className={`flex-1 transition-all duration-300 ${!mounted ? "lg:ml-72" : isCollapsed ? "lg:ml-20" : "lg:ml-72"}`}
+      >
         <AdminLayout>{children}</AdminLayout>
       </div>
     </div>

package/src/layouts/AuthLayoutWithSidebar.tsx

@@ -3,6 +3,7 @@
 import { AuthLayout } from "./AuthLayout.js";
 import { AppAside, AppAsideSkeleton } from "@lastbrain/ui";
 import { useAuthSession } from "../auth/useAuthSession.js";
+import { useEffect, useState } from "react";
 
 interface AuthLayoutWithSidebarProps {
   children: React.ReactNode;
@@ -16,6 +17,53 @@ export function AuthLayoutWithSidebar({
   className = "",
 }: AuthLayoutWithSidebarProps) {
   const { isSuperAdmin, loading, user } = useAuthSession();
+  const [isCollapsed, setIsCollapsed] = useState(() => {
+    if (typeof window !== "undefined") {
+      const savedState = localStorage.getItem("aside-collapsed");
+      return savedState !== null ? JSON.parse(savedState) : false;
+    }
+    return false;
+  });
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    setMounted(true);
+  }, []);
+
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      // Écouter les changements du localStorage depuis le même onglet
+      const handleStorageChange = (_e: StorageEvent | CustomEvent) => {
+        const savedState = localStorage.getItem("aside-collapsed");
+        if (savedState !== null) {
+          // Utiliser queueMicrotask pour déférer le setState
+          queueMicrotask(() => {
+            setIsCollapsed(JSON.parse(savedState));
+          });
+        }
+      };
+
+      // Écouter l'événement storage (changements depuis d'autres onglets)
+      window.addEventListener("storage", handleStorageChange as EventListener);
+      // Écouter l'événement custom pour les changements du même onglet
+      window.addEventListener(
+        "localStorage-changed",
+        handleStorageChange as EventListener,
+      );
+
+      return () => {
+        window.removeEventListener(
+          "storage",
+          handleStorageChange as EventListener,
+        );
+        window.removeEventListener(
+          "localStorage-changed",
+          handleStorageChange as EventListener,
+        );
+      };
+    }
+  }, []);
 
   // Pour la section auth, isAdminSection sera false
   const isAdminSection = false;
@@ -48,7 +96,9 @@ export function AuthLayoutWithSidebar({
         />
       )}
       {/* Contenu principal avec marge pour la sidebar */}
-      <div className="flex-1 lg:ml-72">
+      <div
+        className={`flex-1 transition-all duration-300 ${!mounted ? "lg:ml-72" : isCollapsed ? "lg:ml-20" : "lg:ml-72"}`}
+      >
         <AuthLayout>{children}</AuthLayout>
       </div>
     </div>

package/src/layouts/PublicLayout.tsx

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

package/src/layouts/PublicLayoutWithSidebar.tsx

@@ -3,6 +3,7 @@
 import { PublicLayout } from "./PublicLayout.js";
 import { AppAside, AppAsideSkeleton } from "@lastbrain/ui";
 import { useAuthSession } from "../auth/useAuthSession.js";
+import { useEffect, useState } from "react";
 
 interface PublicLayoutWithSidebarProps {
   children: React.ReactNode;
@@ -16,6 +17,53 @@ export function PublicLayoutWithSidebar({
   className = "",
 }: PublicLayoutWithSidebarProps) {
   const { user, loading } = useAuthSession();
+  const [isCollapsed, setIsCollapsed] = useState(() => {
+    if (typeof window !== "undefined") {
+      const savedState = localStorage.getItem("aside-collapsed");
+      return savedState !== null ? JSON.parse(savedState) : false;
+    }
+    return false;
+  });
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    setMounted(true);
+  }, []);
+
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      // Écouter les changements du localStorage depuis le même onglet
+      const handleStorageChange = (_e: StorageEvent | CustomEvent) => {
+        const savedState = localStorage.getItem("aside-collapsed");
+        if (savedState !== null) {
+          // Utiliser queueMicrotask pour déférer le setState
+          queueMicrotask(() => {
+            setIsCollapsed(JSON.parse(savedState));
+          });
+        }
+      };
+
+      // Écouter l'événement storage (changements depuis d'autres onglets)
+      window.addEventListener("storage", handleStorageChange as EventListener);
+      // Écouter l'événement custom pour les changements du même onglet
+      window.addEventListener(
+        "localStorage-changed",
+        handleStorageChange as EventListener,
+      );
+
+      return () => {
+        window.removeEventListener(
+          "storage",
+          handleStorageChange as EventListener,
+        );
+        window.removeEventListener(
+          "localStorage-changed",
+          handleStorageChange as EventListener,
+        );
+      };
+    }
+  }, []);
 
   // Pour la section public, isAdminSection sera false
   const isAdminSection = false;
@@ -48,7 +96,9 @@ export function PublicLayoutWithSidebar({
         />
       )}
       {/* Contenu principal avec marge pour la sidebar */}
-      <div className="flex-1 lg:ml-72">
+      <div
+        className={`flex-1 transition-all duration-300 ${!mounted ? "lg:ml-72" : isCollapsed ? "lg:ml-20" : "lg:ml-72"}`}
+      >
         <PublicLayout>{children}</PublicLayout>
       </div>
     </div>

package/src/scripts/init-app.ts

@@ -4,7 +4,10 @@ import { fileURLToPath } from "url";
 import chalk from "chalk";
 import inquirer from "inquirer";
 import { execSync } from "child_process";
-import { AVAILABLE_MODULES } from "./module-add.js";
+import {
+  AVAILABLE_MODULES,
+  type ModuleMetadata,
+} from "@lastbrain/core/config/modules";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -47,7 +50,7 @@ export async function initApp(options: InitAppOptions) {
         name: "modules",
         message: "Quels modules voulez-vous installer ?",
         choices: AVAILABLE_MODULES.map((module) => ({
-          name: `${module.displayName} - ${module.description}`,
+          name: `${module.emoji} ${module.name.charAt(0).toUpperCase() + module.name.slice(1)} - ${module.description}`,
           value: module.name,
           checked: false,
         })),

package/src/scripts/module-add.ts

@@ -3,6 +3,10 @@ import path from "path";
 import chalk from "chalk";
 import { execSync } from "child_process";
 import inquirer from "inquirer";
+import {
+  AVAILABLE_MODULES,
+  type ModuleMetadata,
+} from "@lastbrain/core/config/modules";
 
 interface ModuleDefinition {
   name: string;
@@ -14,44 +18,35 @@ interface ModuleDefinition {
   migrationsDownPath?: string;
 }
 
-// Registre des modules disponibles
-export const AVAILABLE_MODULES: ModuleDefinition[] = [
-  {
-    name: "auth",
-    package: "@lastbrain/module-auth",
-    displayName: "🔐 Authentication",
-    description:
-      "Système d'authentification complet (signin, signup, sessions)",
+// Convert core module metadata to local module definition
+function toModuleDefinition(meta: ModuleMetadata): ModuleDefinition {
+  return {
+    name: meta.name,
+    package: meta.package,
+    displayName: `${meta.emoji} ${meta.name.charAt(0).toUpperCase() + meta.name.slice(1)}`,
+    description: meta.description,
     hasMigrations: true,
     migrationsPath: "supabase/migrations",
     migrationsDownPath: "supabase/migrations-down",
-  },
-  {
-    name: "ai",
-    package: "@lastbrain/module-ai",
-    displayName: "🤖 AI Generation",
-    description: "Génération de texte et d'images avec gestion de tokens",
-    hasMigrations: true,
-    migrationsPath: "supabase/migrations",
-    migrationsDownPath: "supabase/migrations-down",
-  },
-  // Ajouter d'autres modules ici au fur et à mesure
-];
+  };
+}
 
 export async function addModule(moduleName: string, targetDir: string) {
   console.log(chalk.blue(`\n🔧 Ajout du module: ${moduleName}\n`));
 
-  const module = AVAILABLE_MODULES.find((m) => m.name === moduleName);
-  if (!module) {
+  const moduleMeta = AVAILABLE_MODULES.find((m) => m.name === moduleName);
+  if (!moduleMeta) {
     console.error(
       chalk.red(`❌ Module "${moduleName}" non trouvé. Modules disponibles:`),
     );
     AVAILABLE_MODULES.forEach((m) => {
-      console.log(chalk.gray(`  - ${m.name}: ${m.description}`));
+      console.log(chalk.gray(`  - ${m.emoji} ${m.name}: ${m.description}`));
     });
     process.exit(1);
   }
 
+  const module = toModuleDefinition(moduleMeta);
+
   // 1. Vérifier qu'on est dans un projet LastBrain
   const pkgPath = path.join(targetDir, "package.json");
   if (!fs.existsSync(pkgPath)) {
@@ -85,6 +80,43 @@ export async function addModule(moduleName: string, targetDir: string) {
     process.exit(1);
   }
 
+  // 3.1 Build du module ajouté (pour générer dist/ et éviter les erreurs d'import)
+  console.log(chalk.yellow(`\n🏗️  Build du module ${module.package}...`));
+  try {
+    // Trouver la racine du monorepo (chercher pnpm-workspace.yaml en remontant)
+    let workspaceRoot = targetDir;
+    let attempts = 0;
+    const maxAttempts = 6;
+    while (attempts < maxAttempts) {
+      if (fs.existsSync(path.join(workspaceRoot, "pnpm-workspace.yaml"))) {
+        break;
+      }
+      const parent = path.resolve(workspaceRoot, "..");
+      if (parent === workspaceRoot) break;
+      workspaceRoot = parent;
+      attempts++;
+    }
+    if (!fs.existsSync(path.join(workspaceRoot, "pnpm-workspace.yaml"))) {
+      console.log(
+        chalk.gray(
+          "  ℹ️  Impossible de localiser la racine du monorepo, build ignoré",
+        ),
+      );
+    } else {
+      execSync(`pnpm --filter ${module.package} build`, {
+        cwd: workspaceRoot,
+        stdio: "inherit",
+      });
+      console.log(chalk.green("  ✓ Module compilé"));
+    }
+  } catch {
+    console.log(
+      chalk.yellow("  ⚠️  Build du module échoué, essayez: pnpm --filter"),
+      module.package,
+      "build",
+    );
+  }
+
   // 5. Copier les migrations du module
   const copiedMigrationFiles: string[] = [];
   if (module.hasMigrations) {

package/src/scripts/module-build.ts

@@ -13,6 +13,10 @@ import type {
 
 // Utiliser PROJECT_ROOT si défini (pour pnpm --filter), sinon process.cwd()
 const projectRoot = process.env.PROJECT_ROOT || process.cwd();
+// Si on est dans une app, monter jusqu'à la racine du monorepo
+const monorepoRoot = projectRoot.includes("/apps/")
+  ? path.resolve(projectRoot, "..", "..")
+  : projectRoot;
 const appDirectory = path.join(projectRoot, "app");
 
 // Créer un require dans le contexte de l'application pour résoudre les modules installés dans l'app
@@ -207,9 +211,40 @@ function buildPage(moduleConfig: ModuleBuildConfig, page: ModulePageConfig) {
       page.path.includes("signup") ||
       page.path.includes("reset-password"));
 
+  // Détecter si c'est la page de détail utilisateur qui a besoin des user tabs
+  const isUserDetailPage =
+    page.section === "admin" &&
+    page.path.includes("users/[id]") &&
+    page.componentExport === "UserPage";
+
   let content: string;
 
-  if (isPublicAuthPage) {
+  if (isUserDetailPage) {
+    // Page spéciale SSR avec injection des user tabs
+    // On importe directement depuis app/config au lieu de passer via props
+    content = `// GENERATED BY LASTBRAIN MODULE BUILD
+import { UserDetailPage } from "${moduleConfig.moduleName}";
+
+interface UserPageProps { params: Promise<{ id: string }> }
+
+async function getModuleUserTabs() {
+  try {
+    // Depuis /app/admin/auth/users/[id]/ vers /apps/test-01/config/user-tabs
+    const { moduleUserTabs } = await import("../../../../../config/user-tabs");
+    return moduleUserTabs || [];
+  } catch (e) {
+    console.warn("[user-detail-wrapper] erreur chargement user-tabs", e);
+    return [];
+  }
+}
+
+export default async function ${wrapperName}(props: UserPageProps) {
+  const { id } = await props.params;
+  const moduleUserTabs = await getModuleUserTabs();
+  return <UserDetailPage userId={id} moduleUserTabs={moduleUserTabs} />;
+}
+`;
+  } else if (isPublicAuthPage) {
     content = `// GENERATED BY LASTBRAIN MODULE BUILD
 "use client";
 
@@ -314,6 +349,8 @@ export interface MenuItem {
   icon?: string;
   path: string;
   order?: number;
+  shortcut?: string;
+  shortcutDisplay?: string;
 }
 
 export interface MenuConfig {
@@ -838,6 +875,73 @@ export default realtimeConfig;
   }
 }
 
+async function generateUserTabsConfig(moduleConfigs: ModuleBuildConfig[]) {
+  try {
+    // Extraire les configurations user tabs des modules
+    const userTabsConfigs = moduleConfigs
+      .filter((config) => config.userTabs && config.userTabs.length > 0)
+      .flatMap((config) =>
+        config.userTabs!.map((tab) => ({
+          ...tab,
+          moduleName: config.moduleName,
+        })),
+      )
+      .sort((a, b) => (a.order || 0) - (b.order || 0));
+
+    if (userTabsConfigs.length === 0) {
+      console.log("⏭️ No user tabs configuration found in modules");
+      return;
+    }
+
+    // Générer les imports statiques (Next/dynamic pour chaque composant)
+    const importsForApp = userTabsConfigs
+      .map(
+        (tab) =>
+          `const ${tab.componentExport} = dynamic(() => import("${tab.moduleName}").then(mod => ({ default: mod.${tab.componentExport} })), { ssr: true });`,
+      )
+      .join("\n");
+
+    // Générer le tableau des tabs
+    const tabsArray = userTabsConfigs
+      .map(
+        (tab) => `  {
+    key: "${tab.key}",
+    title: "${tab.title}",
+    icon: "${tab.icon || ""}",
+    component: ${tab.componentExport},
+  }`,
+      )
+      .join(",\n");
+
+    const timestamp = new Date().toISOString();
+    const appContent = `// GENERATED FILE - DO NOT EDIT MANUALLY\n// User tabs configuration\n// Generated at: ${timestamp}\n\n"use client";\n\nimport dynamic from "next/dynamic";\nimport type React from "react";\n\n${importsForApp}\n\nexport interface ModuleUserTab {\n  key: string;\n  title: string;\n  icon?: string;\n  component: React.ComponentType<{ userId: string }>;\n}\n\nexport const moduleUserTabs: ModuleUserTab[] = [\n${tabsArray}\n];\n\nexport default moduleUserTabs;\n`;
+
+    // Créer le fichier de configuration (uniquement dans /config)
+    const outputPath = path.join(projectRoot, "config", "user-tabs.ts");
+    const configDir = path.dirname(outputPath);
+
+    // Créer le dossier config s'il n'existe pas
+    if (!fs.existsSync(configDir)) {
+      fs.mkdirSync(configDir, { recursive: true });
+    }
+
+    // Écrire le fichier TypeScript
+    fs.writeFileSync(outputPath, appContent);
+
+    console.log(`✅ Generated user tabs configuration: ${outputPath}`);
+    console.log(`📊 User tabs count: ${userTabsConfigs.length}`);
+
+    // Afficher un résumé
+    userTabsConfigs.forEach((tab) => {
+      console.log(`   - ${tab.title} (${tab.moduleName})`);
+    });
+
+    // Plus de copie vers app/config ni stub core
+  } catch (error) {
+    console.error("❌ Error generating user tabs configuration:", error);
+  }
+}
+
 export async function runModuleBuild() {
   ensureDirectory(appDirectory);
 
@@ -886,4 +990,8 @@ export async function runModuleBuild() {
   // Générer la configuration realtime
   console.log("🔄 Generating realtime configuration...");
   await generateRealtimeConfig(moduleConfigs);
+
+  // Générer la configuration des user tabs
+  console.log("📑 Generating user tabs configuration...");
+  await generateUserTabsConfig(moduleConfigs);
 }