@lastbrain/app 2.0.18 → 2.0.23

package/src/i18n/server-helpers.ts

@@ -0,0 +1,48 @@
+import { type Language, loadTranslations } from "./server-lang";
+
+/**
+ * Helper pour créer une fonction de traduction côté serveur
+ *
+ * @example
+ * ```tsx
+ * export default async function MyPage({ params }) {
+ *   const t = await createServerTranslator(params);
+ *   return <h1>{t("module-auth.welcome")}</h1>;
+ * }
+ * ```
+ */
+export async function createServerTranslator(
+  params: Promise<{ lang?: string }> | { lang?: string }
+): Promise<(key: string) => string> {
+  // Si params est une Promise, l'attendre
+  const resolvedParams = params instanceof Promise ? await params : params;
+  const lang = (resolvedParams.lang as Language) || "fr";
+  const translations = await loadTranslations(lang);
+
+  return (key: string): string => {
+    return translations[key] || key;
+  };
+}
+
+/**
+ * Hook pour utiliser les traductions côté serveur avec namespace
+ *
+ * @example
+ * ```tsx
+ * export default async function MyPage({ params }) {
+ *   const t = await createNamespacedTranslator(params, "module-auth");
+ *   return <h1>{t("welcome")}</h1>; // Cherche "module-auth.welcome"
+ * }
+ * ```
+ */
+export async function createNamespacedTranslator(
+  params: Promise<{ lang?: string }> | { lang?: string },
+  namespace: string
+): Promise<(key: string) => string> {
+  const t = await createServerTranslator(params);
+
+  return (key: string): string => {
+    const fullKey = `${namespace}.${key}`;
+    return t(fullKey);
+  };
+}

package/src/i18n/server-lang.ts

@@ -0,0 +1,51 @@
+import { cookies } from "next/headers";
+import fs from "node:fs";
+import path from "node:path";
+
+export type Language = "fr" | "en";
+
+/**
+ * Récupère la langue depuis les cookies côté serveur
+ */
+export async function getServerLanguage(): Promise<Language> {
+  const cookieStore = await cookies();
+  const lang = cookieStore.get("NEXT_LOCALE")?.value as Language | undefined;
+  return lang || "fr";
+}
+
+/**
+ * Charge les traductions pour une langue donnée côté serveur
+ */
+export async function loadTranslations(
+  lang: Language
+): Promise<Record<string, string>> {
+  try {
+    // Charger depuis l'app final (source unique = concaténation de tous les modules)
+    // En développement et production, chercher dans apps/recipe/i18n (ou apps/lastbrain/i18n)
+    const appPaths = [
+      path.join(process.cwd(), "apps", "recipe", "i18n", `${lang}.json`),
+      path.join(process.cwd(), "apps", "lastbrain", "i18n", `${lang}.json`),
+      path.join(process.cwd(), "i18n", `${lang}.json`),
+      path.join("/app", "i18n", `${lang}.json`),
+    ];
+
+    let translationPath = "";
+    for (const appPath of appPaths) {
+      if (fs.existsSync(appPath)) {
+        translationPath = appPath;
+        break;
+      }
+    }
+
+    if (!fs.existsSync(translationPath)) {
+      return {};
+    }
+
+    const content = fs.readFileSync(translationPath, "utf-8");
+    const parsed = JSON.parse(content);
+
+    return parsed;
+  } catch (_error) {
+    return {};
+  }
+}

package/src/i18n/server.ts

@@ -0,0 +1,13 @@
+/**
+ * Server-only exports for i18n
+ *
+ * Import from "@lastbrain/app/i18n/server-lang" in Server Components
+ * Ne pas importer depuis "@lastbrain/app" pour éviter les erreurs côté client
+ */
+
+export { getServerLanguage, loadTranslations } from "./server-lang";
+export {
+  createServerTranslator,
+  createNamespacedTranslator,
+} from "./server-helpers";
+export type { Language } from "./LanguageProvider";

package/src/i18n/types.ts

@@ -0,0 +1,39 @@
+/**
+ * Types pour le système i18n
+ */
+
+export type Language = "fr" | "en";
+
+export type TranslationKey = string;
+
+export interface Translations {
+  [key: string]: string;
+}
+
+export interface I18nConfig {
+  defaultLocale: Language;
+  locales: Language[];
+}
+
+/**
+ * Type pour les paramètres de page avec langue
+ */
+export interface LangParams {
+  params: Promise<{ lang: Language }>;
+}
+
+/**
+ * Type pour les paramètres de page avec langue et ID
+ */
+export interface LangIdParams {
+  params: Promise<{ lang: Language; id: string }>;
+}
+
+/**
+ * Helper type pour extraire les clés de traduction d'un module
+ *
+ * @example
+ * type AuthTranslations = ModuleTranslations<"module-auth">;
+ * // "module-auth.welcome" | "module-auth.signin" | ...
+ */
+export type ModuleTranslations<T extends string> = `${T}.${string}`;

package/src/i18n/useLangRouter.ts

@@ -0,0 +1,21 @@
+"use client";
+
+import { useLocalizedRouter } from "@lastbrain/core";
+import { useLink } from "./useLink";
+
+/**
+ * Wrapper autour de router.push/replace avec injection automatique du préfixe [lang].
+ */
+export function useLangRouter() {
+  const router = useLocalizedRouter();
+  const link = useLink();
+
+  return {
+    push: (href: string) => router.push(link(href)),
+    replace: (href: string) => router.replace(link(href)),
+    prefetch: (href: string) => router.prefetch(link(href)),
+    back: () => router.back(),
+    forward: () => router.forward(),
+    refresh: () => router.refresh(),
+  };
+}

package/src/i18n/useLink.ts

@@ -0,0 +1,60 @@
+"use client";
+
+import { useLanguage } from "./LanguageProvider";
+import type { Language } from "./types";
+
+/**
+ * Helper pour transformer un URL avec le paramètre [lang]
+ * Utile pour les transformations statiques avant le rendu React
+ *
+ * @example
+ * ```tsx
+ * const href = langHref("/settings", "fr"); // "/fr/settings"
+ * const href = langHref("/api/users", "en"); // "/api/users" (API non modifiée)
+ * ```
+ */
+export function langHref(href: string, lang: Language): string {
+  const normalizedHref = String(href);
+  const isAbsolute = normalizedHref.startsWith("http");
+  const hasLangPrefix = normalizedHref.startsWith(`/${lang}/`);
+
+  if (isAbsolute) {
+    return normalizedHref;
+  } else if (hasLangPrefix) {
+    return normalizedHref;
+  } else if (normalizedHref === "/") {
+    return `/${lang}`;
+  } else if (normalizedHref.startsWith("/api/")) {
+    return normalizedHref;
+  } else {
+    return `/${lang}${normalizedHref}`;
+  }
+}
+
+/**
+ * Hook pour générer des URLs avec le paramètre [lang] injecté automatiquement
+ *
+ * @example
+ * ```tsx
+ * "use client";
+ * import { useLink } from "@lastbrain/app";
+ *
+ * export function MyComponent() {
+ *   const link = useLink();
+ *
+ *   return (
+ *     <>
+ *       <img src={link("/api/storage/avatar.jpg")} />
+ *       <a href={link("/recipes")}>Recettes</a>
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+export function useLink() {
+  const { lang } = useLanguage();
+
+  return (href: string): string => {
+    return langHref(href, lang);
+  };
+}

package/src/i18n/useModuleTranslation.ts

@@ -0,0 +1,27 @@
+"use client";
+
+import { useLanguage } from "./LanguageProvider";
+
+/**
+ * Hook pour utiliser les traductions d'un module spécifique
+ * Préfixe automatiquement les clés avec le nom du module
+ *
+ * @example
+ * const t = useModuleTranslation("auth");
+ * t("hello") // -> cherche "module-auth.hello"
+ * t("hello", "Hello") // -> cherche "module-auth.hello", fallback à "Hello"
+ */
+export function useModuleTranslation(moduleName: string) {
+  const { t: globalT } = useLanguage();
+
+  return (key: string, defaultValue?: string): string => {
+    const prefixedKey = `module-${moduleName}.${key}`;
+    const translation = globalT(prefixedKey);
+
+    // Si la traduction retourne exactement la clé (non trouvée), utiliser le fallback
+    if (translation === prefixedKey && defaultValue !== undefined) {
+      return defaultValue;
+    }
+    return translation;
+  };
+}

package/src/index.ts

@@ -22,6 +22,26 @@ export { AdminLayout } from "./layouts/AdminLayout";
 export { AdminLayoutWithSidebar } from "./layouts/AdminLayoutWithSidebar";
 export { getModuleConfigs } from "./modules/module-loader";
 
+// i18n
+export {
+  LanguageProvider,
+  useLanguage,
+  type Language,
+} from "./i18n/LanguageProvider";
+export { useLink, langHref } from "./i18n/useLink";
+export { useLangRouter } from "./i18n/useLangRouter";
+export { useModuleTranslation } from "@lastbrain/core";
+export { transformLangHrefs, transformLangHref } from "./i18n/langHrefHelper";
+export { LanguageSwitcher } from "./components/LanguageSwitcher";
+export type {
+  TranslationKey,
+  Translations,
+  I18nConfig,
+  LangParams,
+  LangIdParams,
+  ModuleTranslations,
+} from "./i18n/types";
+
 // Components
 export { AppAside } from "@lastbrain/ui";
 export type { AppAsideMenuItem, AppAsideMenuConfig } from "@lastbrain/ui";

package/src/layouts/AdminLayout.tsx

@@ -1,3 +1,3 @@
 export function AdminLayout({ children }: { children: React.ReactNode }) {
-  return <div className="max-w-screen pt-12 px-2 md:px-5">{children}</div>;
+  return <div className="max-w-screen  px-2 md:px-5">{children}</div>;
 }

package/src/layouts/AppProviders.tsx

@@ -2,10 +2,11 @@
 
 import { createContext, useContext, useMemo } from "react";
 import { getModuleConfigs } from "../modules/module-loader";
-import { ToastProvider } from "@lastbrain/ui";
+import { ToastProvider, AppLinkProvider } from "@lastbrain/ui";
 import { RealtimeProvider } from "@lastbrain/core";
 import { useAuthSession } from "../auth/useAuthSession";
 import { useNotifications as useNotificationsHook } from "../hooks/useNotifications";
+import { LanguageProvider, type Language } from "../i18n/LanguageProvider";
 import type { User } from "@supabase/supabase-js";
 import type { ModuleRealtimeConfig } from "@lastbrain/core";
 import type { NotificationsData } from "../hooks/useNotifications";
@@ -62,9 +63,13 @@ export function useAuth() {
 export function AppProviders({
   children,
   realtimeConfig = [],
+  lang = "fr",
+  translations = {},
 }: {
   children: React.ReactNode;
   realtimeConfig?: ModuleRealtimeConfig[];
+  lang?: Language;
+  translations?: Record<string, string>;
 }) {
   const modules = useMemo(() => getModuleConfigs(), []);
   const { user, loading: authLoading, isSuperAdmin } = useAuthSession();
@@ -75,22 +80,36 @@ export function AppProviders({
   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");
-  // };
+  );
+
+  // Mémoriser les traductions pour éviter les changements
+  const memoizedTranslations = useMemo(() => {
+    // Si des traductions non-vides sont fournies, les utiliser
+    if (Object.keys(translations).length > 0) {
+      return translations;
+    }
+    // Sinon, tenter de récupérer celles du script injecté côté client
+    if (typeof window !== "undefined" && (window as any).__TRANSLATIONS__) {
+      return (window as any).__TRANSLATIONS__ as Record<string, string>;
+    }
+    // Ne retourner un objet vide que si vraiment rien n'est disponible
+    return {};
+  }, [translations]);
 
   return (
-    <AuthContext.Provider value={authValue}>
-      <ModuleContext.Provider value={modules}>
-        <NotificationContext.Provider value={notificationsData}>
-          <RealtimeProvider userId={user?.id} config={realtimeConfig}>
-            {children}
-            <ToastProvider placement="bottom-right" toastOffset={5} />
-          </RealtimeProvider>
-        </NotificationContext.Provider>
-      </ModuleContext.Provider>
-    </AuthContext.Provider>
+    <LanguageProvider initialLang={lang} translations={memoizedTranslations}>
+      <AppLinkProvider lang={lang || "fr"}>
+        <AuthContext.Provider value={authValue}>
+          <ModuleContext.Provider value={modules}>
+            <NotificationContext.Provider value={notificationsData}>
+              <RealtimeProvider userId={user?.id} config={realtimeConfig}>
+                {children}
+                <ToastProvider placement="bottom-right" toastOffset={5} />
+              </RealtimeProvider>
+            </NotificationContext.Provider>
+          </ModuleContext.Provider>
+        </AuthContext.Provider>
+      </AppLinkProvider>
+    </LanguageProvider>
   );
 }

package/src/layouts/AuthLayout.tsx

@@ -1,3 +1,3 @@
 export function AuthLayout({ children }: { children: React.ReactNode }) {
-  return <div className="pt-18 px-2 md:px-5 max-w-screen">{children}</div>;
+  return <div className="pt-4 px-2 md:px-5 max-w-screen">{children}</div>;
 }

package/src/layouts/AuthLayoutWithSidebar.tsx

@@ -8,6 +8,7 @@ import {
   type MenuItem,
 } from "@lastbrain/ui";
 import { useAuthSession } from "../auth/useAuthSession";
+import { usePathname } from "next/navigation";
 import type { MenuIgnored, MenuCustom } from "../types/menu";
 import { useEffect, useState } from "react";
 
@@ -29,6 +30,7 @@ export function AuthLayoutWithSidebar({
   menuCustom,
 }: AuthLayoutWithSidebarProps) {
   const { isSuperAdmin, loading, user } = useAuthSession();
+  const pathname = usePathname();
   const [isCollapsed, setIsCollapsed] = useState(() => {
     if (typeof window !== "undefined") {
       const savedState = localStorage.getItem("aside-collapsed");
@@ -77,8 +79,8 @@ export function AuthLayoutWithSidebar({
     }
   }, []);
 
-  // Pour la section auth, isAdminSection sera false
-  const isAdminSection = false;
+  // Détecter si on est dans la section auth pour le skeleton (avec support [lang])
+  const isAuthSection = pathname.includes("/auth");
 
   // Créer un menuConfig sûr avec des valeurs par défaut
   const safeMenuConfig = {
@@ -104,7 +106,7 @@ export function AuthLayoutWithSidebar({
       {shouldShowSkeleton ? (
         <AppAsideSkeleton
           className={className}
-          isAdminSection={isAdminSection}
+          isAdminSection={isAuthSection}
         />
       ) : (
         <AppAside

package/src/layouts/RootLayout.tsx

@@ -3,18 +3,23 @@
 import { ThemeProvider } from "next-themes";
 import { AppProviders } from "./AppProviders";
 import type { ModuleRealtimeConfig } from "@lastbrain/core";
+import type { Language } from "../i18n/LanguageProvider";
 
 // Note: L'app Next.js doit importer son propre globals.css dans son layout
 // Note: La configuration realtime doit être fournie par l'app qui utilise ce layout
 export function RootLayout({
   children,
   realtimeConfig = [],
+  lang = "fr",
+  translations = {},
 }: {
   children: React.ReactNode;
   realtimeConfig?: ModuleRealtimeConfig[];
+  lang?: Language;
+  translations?: Record<string, string>;
 }) {
   return (
-    <html lang="fr" suppressHydrationWarning>
+    <html lang={lang} suppressHydrationWarning>
       <body className="min-h-screen max-w-screen">
         <ThemeProvider
           attribute="class"
@@ -22,10 +27,12 @@ export function RootLayout({
           enableSystem={false}
           storageKey="lastbrain-theme"
         >
-          <AppProviders realtimeConfig={realtimeConfig}>
-            <div className=" min-h-screen bg-slate-50 text-slate-900 dark:bg-slate-950 dark:text-white">
-              {children}
-            </div>
+          <AppProviders
+            realtimeConfig={realtimeConfig}
+            lang={lang}
+            translations={translations}
+          >
+            <div className=" min-h-screen pt-12">{children}</div>
           </AppProviders>
         </ThemeProvider>
       </body>

package/src/scripts/i18n-build.ts

@@ -0,0 +1,122 @@
+#!/usr/bin/env node
+/**
+ * Script pour collecter tous les fichiers i18n des modules et les concaténer
+ * dans le dossier i18n de l'application
+ */
+
+import fs from "node:fs";
+import path from "node:path";
+
+const projectRoot = process.env.PROJECT_ROOT || process.cwd();
+const monorepoRoot = projectRoot.includes("/apps/")
+  ? path.resolve(projectRoot, "..", "..")
+  : projectRoot;
+
+const packagesDir = path.join(monorepoRoot, "packages");
+const appI18nDir = path.join(projectRoot, "i18n");
+
+interface TranslationMap {
+  [key: string]: Record<string, string>;
+}
+
+/**
+ * Collecte tous les fichiers i18n des modules
+ */
+async function collectTranslations(): Promise<TranslationMap> {
+  const translations: TranslationMap = {
+    fr: {},
+    en: {},
+  };
+
+  try {
+    // Importer glob dynamiquement
+    const { glob } = await import("glob");
+
+    // Rechercher tous les fichiers i18n dans packages/**/src/i18n/*.json
+    const pattern = path.join(packagesDir, "**/src/i18n/*.json");
+    const files = await glob(pattern, {
+      ignore: ["**/node_modules/**", "**/dist/**"],
+    });
+
+    console.log(`\n🔍 Found ${files.length} i18n files\n`);
+
+    for (const file of files) {
+      const fileName = path.basename(file, ".json");
+      const lang = fileName; // fr.json -> fr, en.json -> en
+
+      if (!translations[lang]) {
+        translations[lang] = {};
+      }
+
+      try {
+        const content = JSON.parse(fs.readFileSync(file, "utf-8"));
+        const moduleName = extractModuleName(file);
+
+        console.log(`  ✓ ${moduleName} (${lang})`);
+
+        // Préfixer les clés avec le nom du module pour éviter les collisions
+        for (const [key, value] of Object.entries(content)) {
+          const prefixedKey = `${moduleName}.${key}`;
+          translations[lang][prefixedKey] = value as string;
+        }
+      } catch (error) {
+        console.warn(`  ⚠️  Error reading ${file}:`, error);
+      }
+    }
+  } catch (error) {
+    console.error("❌ Error collecting translations:", error);
+  }
+
+  return translations;
+}
+
+/**
+ * Extrait le nom du module depuis le chemin du fichier
+ */
+function extractModuleName(filePath: string): string {
+  // packages/module-auth/src/i18n/fr.json -> module-auth
+  const parts = filePath.split(path.sep);
+  const packagesIndex = parts.indexOf("packages");
+  if (packagesIndex !== -1 && packagesIndex < parts.length - 1) {
+    return parts[packagesIndex + 1];
+  }
+  return "unknown";
+}
+
+/**
+ * Écrit les traductions concaténées dans le dossier i18n de l'app
+ */
+function writeTranslations(translations: TranslationMap) {
+  // Créer le dossier i18n s'il n'existe pas
+  if (!fs.existsSync(appI18nDir)) {
+    fs.mkdirSync(appI18nDir, { recursive: true });
+  }
+
+  for (const [lang, content] of Object.entries(translations)) {
+    const filePath = path.join(appI18nDir, `${lang}.json`);
+    fs.writeFileSync(filePath, JSON.stringify(content, null, 2), "utf-8");
+    const keyCount = Object.keys(content).length;
+    console.log(`\n✅ Generated ${filePath} (${keyCount} keys)`);
+  }
+}
+
+/**
+ * Point d'entrée principal
+ */
+async function buildI18n() {
+  console.log("🌍 Building i18n files...\n");
+  console.log(`📁 Project root: ${projectRoot}`);
+  console.log(`📦 Packages dir: ${packagesDir}`);
+  console.log(`🎯 App i18n dir: ${appI18nDir}\n`);
+
+  const translations = await collectTranslations();
+  writeTranslations(translations);
+
+  console.log("\n✨ i18n build complete!\n");
+}
+
+// Exécuter
+buildI18n().catch((error) => {
+  console.error("\n❌ Error:", error);
+  process.exit(1);
+});