create-next-pro-cli 0.1.26 → 0.1.28

package/templates/Projects/default/src/ui/_global/GlobalHeader.tsx

@@ -1,51 +1,33 @@
-"use client";
 import Image from "next/image";
 import UserNav from "@/ui/_global/UserNav";
 import LocaleSwitcher from "@/ui/_global/LocaleSwitcher";
 import PublicNav from "@/ui/_global/PublicNav";
-import { useEffect, useState } from "react";
 import { Link } from "@/lib/i18n/navigation";
-import { isConnected } from "@/lib/auth/isConnected";
 
 type GlobalHeaderProps = {
-  isConnectedInitial: boolean;
+  hasSessionInitial: boolean;
 };
 
-export default function GlobalHeader({
-  isConnectedInitial,
-}: GlobalHeaderProps) {
-  const [isConnectedState, setIsConnectedState] = useState(isConnectedInitial);
-
-  // Vérification dynamique côté client (exemple via /api/me)
-  useEffect(() => {
-    async function checkConnection() {
-      setIsConnectedState(await isConnected());
-    }
-    checkConnection();
-    // Optionnel : timer pour rafraîchir périodiquement
-    // const interval = setInterval(checkConnection, 60000);
-    // return () => clearInterval(interval);
-  }, []);
-
+export default function GlobalHeader({ hasSessionInitial }: GlobalHeaderProps) {
   return (
-    <header className="fixed top-0 w-full z-50 glass-effect border-b">
-      <div className="mx-auto flex h-16 max-w-6xl items-center justify-between px-6">
-        <Link href="/" className="">
-          <div className="flex items-center h-16">
+    <header className="fixed top-0 z-50 w-full border-b bg-background/80 glass-effect">
+      <div className="mx-auto grid h-16 max-w-6xl grid-cols-[auto_1fr_auto] items-center gap-2 px-3 sm:px-4 md:px-6">
+        <Link href="/" aria-label="Create Next Pro home" className="min-w-0">
+          <div className="flex h-16 min-w-0 items-center">
             <Image
-              src="/cnp-logo.svg"
+              src="/logo.svg"
               alt="Logo"
               width={63}
               height={63}
-              className="mr-2"
+              className="mr-2 h-11 w-11 sm:h-[52px] sm:w-[52px] md:h-[63px] md:w-[63px]"
             />
-            <h1 className="text-lg font-semibold tracking-tight select-none">
+            <h1 className="hidden whitespace-nowrap text-base font-semibold tracking-tight select-none sm:block md:text-lg">
               Create Next Pro
             </h1>
           </div>
         </Link>
 
-        {isConnectedState ? <UserNav /> : <PublicNav />}
+        {hasSessionInitial ? <UserNav /> : <PublicNav />}
         <div className="flex items-center h-16">
           <LocaleSwitcher />
         </div>

package/templates/Projects/default/src/ui/_global/GlobalMain.tsx

@@ -6,7 +6,7 @@ export default function GlobalMain({
   children: React.ReactNode;
 }) {
   return (
-    <main className="mt-0 min-h-screen bg-neutral-50 font-sans text-gray-900 flex flex-col">
+    <main className="mt-0 flex min-h-screen flex-col bg-neutral-50 text-foreground font-sans hero-pattern">
       <div className="flex-1 flex flex-col justify-center items-stretch mx-auto w-full  px-6 self-stretch">
         {children}
       </div>

package/templates/Projects/default/src/ui/_global/LocaleSwitcher.tsx

@@ -1,6 +1,6 @@
-"use client"; // DO NOT FORGET , this is a client component.
-import { useRouter, usePathname } from "next/navigation";
-import { useParams } from "next/navigation";
+"use client";
+import { useLocale, useTranslations } from "next-intl";
+import { usePathname, useRouter } from "@/lib/i18n/navigation";
 
 const locales = [
   { code: "fr", label: "Français" },
@@ -10,23 +10,22 @@ const locales = [
 export default function LocaleSwitcher() {
   const router = useRouter();
   const pathname = usePathname();
-  const params = useParams();
-  const currentLocale = params?.locale || "fr";
+  const currentLocale = useLocale();
+  const t = useTranslations("_global_ui");
 
   const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
     const newLocale = e.target.value;
     if (newLocale === currentLocale) return;
-    // Replace locale in pathname
-    const newPath = pathname.replace(`/${currentLocale}`, `/${newLocale}`);
-    router.push(newPath);
+
+    router.replace(pathname, { locale: newLocale });
   };
 
   return (
     <select
-      className="ml-2 ring rounded px-2 py-1 text-sm  dark:bg-gray-800 dark:text-gray-200"
+      className="w-[7.5rem] rounded px-2 py-1 text-sm ring dark:bg-stone-800 dark:text-gray-200 light:bg-stone-200 light:text-stone-800 sm:w-auto"
       value={currentLocale}
       onChange={handleChange}
-      aria-label="Select language"
+      aria-label={t("select_language")}
     >
       {locales.map((l) => (
         <option key={l.code} value={l.code}>

package/templates/Projects/default/src/ui/_global/PublicNav.tsx

@@ -1,4 +1,4 @@
-"use client"; // DO NOT FORGET , this is a client component.
+"use client";
 import { Link } from "@/lib/i18n/navigation";
 import { useTranslations } from "next-intl";
 import { useEffect, useState, useRef } from "react";
@@ -8,14 +8,17 @@ import { Menu, X } from "lucide-react";
 
 const navLinks = [
   { href: "/", labelKey: "public_nav.links.home" },
-  { href: "/Login", labelKey: "public_nav.links.login" },
-  { href: "/Register", labelKey: "public_nav.links.register" },
+  { href: "/login", labelKey: "public_nav.links.login" },
+  { href: "/register", labelKey: "public_nav.links.register" },
 ];
 
 const PublicNav = () => {
   const t = useTranslations("_global_ui");
   const [open, setOpen] = useState(false);
   const menuRef = useRef<HTMLDivElement>(null);
+  const menuButtonRef = useRef<HTMLButtonElement>(null);
+  const firstLinkRef = useRef<HTMLAnchorElement>(null);
+
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
@@ -25,6 +28,7 @@ const PublicNav = () => {
 
     if (open) {
       document.addEventListener("mousedown", handleClickOutside);
+      firstLinkRef.current?.focus();
     }
 
     return () => {
@@ -32,32 +36,47 @@ const PublicNav = () => {
     };
   }, [open]);
 
+  useEffect(() => {
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === "Escape" && open) {
+        setOpen(false);
+        menuButtonRef.current?.focus();
+      }
+    };
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [open]);
+
   return (
-    <nav aria-label="Public navigation">
-      <div className="flex justify-between items-center h-16">
-        <ul className="flex gap-2 md:gap-4 hidden md:flex items-center space-x-4">
+    <nav aria-label="Public navigation" className="justify-self-end">
+      <div className="flex h-16 items-center gap-1 sm:gap-2">
+        <ul className="hidden items-center gap-2 md:flex lg:gap-4">
           {navLinks.map((link) => (
             <li key={link.href}>
               <Link
                 href={link.href}
-                className="inline-block rounded px-3 py-1.5 text-sm font-medium dark:text-gray-400 light:text-gray-700 hover:text-blue-600 hover:bg-blue-50 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
+                className="inline-block rounded px-3 py-1.5 text-sm font-medium dark:text-stone-100 light:text-stone-900 dark:hover:bg-white/10 light:hover:bg-black/10 transition-colors focus:outline-none focus-visible:ring-2"
               >
                 {t(link.labelKey)}
               </Link>
             </li>
           ))}
         </ul>
-        <div className="flex items-center space-x-4">
+        <div className="flex items-center">
           <ThemeToggle />
         </div>
-        <div className="md:hidden flex items-center">
+        <div className="flex items-center md:hidden">
           <Button
-            variant="default"
-            onClick={() => setOpen((o) => !o)}
+            ref={menuButtonRef}
+            variant="ghost"
+            size="icon"
             className="focus:outline-none"
+            onClick={() => setOpen((o) => !o)}
             aria-label="Menu"
+            aria-expanded={open}
+            aria-controls="public-mobile-menu"
           >
-            {open ? <X className="h-7 w-7" /> : <Menu className="h-7 w-7" />}
+            {open ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
           </Button>
         </div>
       </div>
@@ -66,19 +85,34 @@ const PublicNav = () => {
         <div className="fixed inset-0 z-40 md:hidden">
           <div className="absolute inset-0 bg-black/40" aria-hidden="true" />
           <div
+            id="public-mobile-menu"
             ref={menuRef}
-            className="mobil-menu absolute top-4 left-1/2 -translate-x-1/2 flex flex-col gap-2  rounded-xl p-4 shadow-lg animate-fade-in z-50 w-11/12 max-w-xs"
+            role="dialog"
+            aria-modal="true"
+            aria-label={t("public_nav.menu")}
+            className="mobil-menu absolute top-20 left-1/2 z-50 flex w-11/12 max-w-xs -translate-x-1/2 flex-col gap-2 rounded-xl p-4 shadow-lg animate-fade-in"
           >
-            <Link href="/Login" onClick={() => setOpen(false)}>
+            <Link ref={firstLinkRef} href="/" onClick={() => setOpen(false)}>
               <Button
                 variant="ghost"
-                className="w-full text-white justify-center hover:text-blue-300  cursor-pointer glass-effect"
+                className="w-full justify-center cursor-pointer glass-effect"
+              >
+                {t("public_nav.links.home")}
+              </Button>
+            </Link>
+            <Link href="/login" onClick={() => setOpen(false)}>
+              <Button
+                variant="ghost"
+                className="w-full justify-center cursor-pointer glass-effect"
               >
                 {t("public_nav.links.login")}
               </Button>
             </Link>
-            <Link href="/Register" onClick={() => setOpen(false)}>
-              <Button className="w-full bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 justify-center cursor-pointer">
+            <Link href="/register" onClick={() => setOpen(false)}>
+              <Button
+                className="w-full justify-center cursor-pointer"
+                variant="ghost"
+              >
                 {t("public_nav.links.register")}
               </Button>
             </Link>

package/templates/Projects/default/src/ui/_global/ThemeToggle.tsx

@@ -1,53 +1,59 @@
 "use client";
-import { useEffect, useState } from "react";
+import { useSyncExternalStore } from "react";
 import { Moon, Sun } from "lucide-react";
 import { Button } from "./Button";
+import { useTranslations } from "next-intl";
 
-export default function ThemeToggle() {
-  const [isDark, setIsDark] = useState(false);
-
-  useEffect(() => {
-    // Initial state from html class
-    setIsDark(document.documentElement.classList.contains("dark"));
-  }, []);
-
-  const toggleTheme = () => {
-    const html = document.documentElement;
-    if (html.classList.contains("dark")) {
-      html.classList.add("light");
-      html.classList.remove("dark");
-      setIsDark(false);
-      localStorage.setItem("theme", "light");
-    } else {
-      html.classList.add("dark");
-      html.classList.remove("light");
-      setIsDark(true);
-      localStorage.setItem("theme", "dark");
-    }
+const themeChangeEvent = "template-theme-change";
+
+function getThemeSnapshot() {
+  return document.documentElement.classList.contains("dark") ? "dark" : "light";
+}
+
+function getServerThemeSnapshot() {
+  return "light";
+}
+
+function subscribeToThemeChange(onStoreChange: () => void) {
+  window.addEventListener(themeChangeEvent, onStoreChange);
+  window.addEventListener("storage", onStoreChange);
+
+  return () => {
+    window.removeEventListener(themeChangeEvent, onStoreChange);
+    window.removeEventListener("storage", onStoreChange);
   };
+}
+
+export default function ThemeToggle() {
+  const t = useTranslations("_global_ui");
+  const theme = useSyncExternalStore(
+    subscribeToThemeChange,
+    getThemeSnapshot,
+    getServerThemeSnapshot,
+  );
+  const isDark = theme === "dark";
 
-  useEffect(() => {
-    // On mount, set theme from localStorage
-    const theme = localStorage.getItem("theme");
-    if (theme === "dark") {
-      document.documentElement.classList.add("dark");
-      document.documentElement.classList.remove("light");
-      setIsDark(true);
-    } else if (theme === "light") {
-      document.documentElement.classList.add("light");
-      document.documentElement.classList.remove("dark");
-      setIsDark(false);
-    }
-  }, []);
+  const applyTheme = (dark: boolean) => {
+    document.documentElement.classList.toggle("dark", dark);
+    document.documentElement.classList.toggle("light", !dark);
+    localStorage.setItem("theme", dark ? "dark" : "light");
+    window.dispatchEvent(new Event(themeChangeEvent));
+  };
 
   return (
     <Button
-      onClick={toggleTheme}
-      className="ml-2 p-2 rounded-full hover:bg-white/10 transition-colors  "
-      aria-label="Toggle theme"
+      onClick={() => applyTheme(!isDark)}
+      className="rounded-full p-0 dark:hover:bg-white/10 light:hover:bg-black/10 transition-colors"
+      aria-label={t("toggle_theme")}
+      variant="ghost"
+      size="icon"
       type="button"
     >
-      {isDark ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
+      {isDark ? (
+        <Sun className="h-5 w-5 text-white" />
+      ) : (
+        <Moon className="h-5 w-5 text-black" />
+      )}
     </Button>
   );
 }

package/templates/Projects/default/src/ui/_global/UserNav.tsx

@@ -1,12 +1,12 @@
-"use client"; // DO NOT FORGET , this is a client component.
+"use client";
 import { Link } from "@/lib/i18n/navigation";
 import { useTranslations } from "next-intl";
-import LogoutButton from "../Dashboard/LogoutButton";
+import LogoutButton from "../dashboard/LogoutButton";
 
 const navLinks = [
-  { href: "/Dashboard", labelKey: "user_nav.links.dashboard" },
-  { href: "/Settings", labelKey: "user_nav.links.settings" },
-  { href: "/UserInfo", labelKey: "user_nav.links.user_info" },
+  { href: "/dashboard", labelKey: "user_nav.links.dashboard" },
+  { href: "/settings", labelKey: "user_nav.links.settings" },
+  { href: "/userInfo", labelKey: "user_nav.links.user_info" },
 ];
 
 const UserNav = () => {
@@ -18,7 +18,7 @@ const UserNav = () => {
           <li key={link.href}>
             <Link
               href={link.href}
-              className="inline-block rounded px-3 py-1.5 text-sm font-medium text-gray-700 hover:text-blue-600 hover:bg-blue-50 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
+              className="inline-block rounded px-3 py-1.5 text-sm font-medium text-gray-700 hover:text-stone-600 hover:bg-stone-50 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-stone-500"
             >
               {t(link.labelKey)}
             </Link>

package/templates/Projects/default/src/ui/_home/page-ui.tsx

@@ -1,14 +1,12 @@
 // src/ui/_home/page-ui.tsx
-"use client";
+import { getTranslations } from "next-intl/server";
 
-import { useTranslations } from "next-intl";
-
-export default function HomePageUI() {
-  const t = useTranslations("_home");
+export default async function HomePageUI() {
+  const t = await getTranslations("_home");
 
   return (
     <>
-      <section className="pt-32 pb-20 px-4 sm:px-6 lg:px-8 hero-pattern">
+      <section className="pt-32 pb-20 px-4 sm:px-6 lg:px-8">
         <div className="max-w-7xl mx-auto">
           <div className="grid lg:grid-cols-2 gap-12 items-center">
             <h1 className="text-5xl lg:text-6xl font-bold mb-6 leading-tight">
@@ -18,7 +16,7 @@ export default function HomePageUI() {
                 ),
               })}
             </h1>
-            <p className="text-lg text-gray-400">{t("description")}</p>
+            <p className="text-lg">{t("description")}</p>
           </div>
         </div>
       </section>

package/templates/Projects/default/src/ui/{Dashboard → dashboard}/LogoutButton.tsx

@@ -1,17 +1,19 @@
-// src/ui/Dashboard/LogoutButton.tsx
-"use client"; // DO NOT FORGET , this is a client component.
+// src/ui/dashboard/LogoutButton.tsx
+"use client";
 import { useTranslations } from "next-intl";
+import { useLocale } from "next-intl";
+import { signOut } from "next-auth/react";
 import { Button } from "@/ui/_global/Button";
 import { LogOut } from "lucide-react";
-import { disconnect } from "@/lib/auth/disconnect";
 
 const LogoutButton = () => {
-  const t = useTranslations("Dashboard");
+  const t = useTranslations("dashboard");
+  const locale = useLocale();
+
   const handleLogout = () => {
-    disconnect().then(() => {
-      window.location.href = "/";
-    });
+    void signOut({ redirectTo: `/${locale}` });
   };
+
   return (
     <Button
       variant="ghost"

package/templates/Projects/default/src/ui/{Dashboard → dashboard}/StatsCard.tsx

@@ -3,11 +3,11 @@ import React from "react";
 export default function StatsCard({ t }: { t: (key: string) => string }) {
   return (
     <div className="rounded border bg-white p-6 shadow-sm">
-      <h2 className="text-lg font-semibold mb-2">Statistiques</h2>
+      <h2 className="text-lg font-semibold mb-2">{t("widgets.stats.title")}</h2>
       <ul className="text-sm text-gray-600 space-y-1">
-        <li>• {t("widgets.stats.views")}: 123</li>
-        <li>• {t("widgets.stats.likes")}: 45</li>
-        <li>• {t("widgets.stats.comments")}: 7</li>
+        <li>{t("widgets.stats.views")}: 123</li>
+        <li>{t("widgets.stats.likes")}: 45</li>
+        <li>{t("widgets.stats.comments")}: 7</li>
       </ul>
     </div>
   );

package/templates/Projects/default/src/ui/{Dashboard → dashboard}/page-ui.tsx

@@ -1,19 +1,18 @@
-// src/ui/Dashboard/page-ui.tsx
-"use client";
-import { useTranslations } from "next-intl";
+// src/ui/dashboard/page-ui.tsx
+import { getTranslations } from "next-intl/server";
 import BackButton from "@/ui/_global/BackButton";
-import WelcomeCard from "@/ui/Dashboard/WelcomeCard";
-import StatsCard from "@/ui/Dashboard/StatsCard";
+import WelcomeCard from "@/ui/dashboard/WelcomeCard";
+import StatsCard from "@/ui/dashboard/StatsCard";
 
-export default function Dashboard() {
-  const t = useTranslations("Dashboard");
+export default async function Dashboard() {
+  const t = await getTranslations("dashboard");
   return (
     <>
       <div className="flex items-center justify-between mb-6">
         <h1 className="text-2xl font-bold">{t("title")}</h1>
         <BackButton />
       </div>
-      <p className="text-muted mb-8">{t("description")}</p>
+      <p className="mb-8">{t("description")}</p>
       <section className="grid grid-cols-1 md:grid-cols-2 gap-6">
         <WelcomeCard t={t} />
         <StatsCard t={t} />

package/templates/Projects/default/src/ui/login/page-ui.tsx

@@ -0,0 +1,36 @@
+// src/ui/login/page-ui.tsx
+"use client";
+
+import { useTranslations } from "next-intl";
+import { useLocale } from "next-intl";
+import { signIn } from "next-auth/react";
+import { siGoogle } from "simple-icons";
+
+export default function LoginPageUI() {
+  const t = useTranslations("login");
+  const locale = useLocale();
+
+  return (
+    <section className="py-8 px-4 max-w-3xl mx-auto">
+      <h1 className="text-2xl font-bold">{t("title")}</h1>
+      <p className="mt-2">{t("description")}</p>
+      <button
+        onClick={() => signIn("google", { redirectTo: `/${locale}/dashboard` })}
+        className="mt-6 w-full py-2 px-4 rounded bg-[rgb(var(--background))]  font-semibold hover:bg-stone-700 transition"
+      >
+        <svg
+          role="img"
+          viewBox="0 0 24 24"
+          width="25"
+          height="25"
+          aria-label={siGoogle.title}
+          fill={`#${siGoogle.hex}`}
+          className="inline-block mr-4"
+        >
+          <path d={siGoogle.path} />
+        </svg>
+        {t("login_with_google")}
+      </button>
+    </section>
+  );
+}

package/templates/Projects/default/src/ui/register/page-ui.tsx

@@ -0,0 +1,38 @@
+// src/ui/register/page-ui.tsx
+"use client";
+
+import { useTranslations } from "next-intl";
+import { useLocale } from "next-intl";
+import { signIn } from "next-auth/react";
+import { siGoogle } from "simple-icons";
+
+export default function RegisterPageUI() {
+  const t = useTranslations("register");
+  const locale = useLocale();
+
+  return (
+    <section className="py-8 px-4 max-w-md mx-auto">
+      <div className="flex items-center justify-between mb-6">
+        <h1 className="text-2xl font-bold">{t("title")}</h1>
+      </div>
+      <p className="mb-6">{t("description")}</p>
+      <button
+        onClick={() => signIn("google", { redirectTo: `/${locale}/dashboard` })}
+        className="w-full py-2 px-4 rounded font-semibold bg-[rgb(var(--background))] hover:bg-[rgb(var(--secondary))] transition"
+      >
+        <svg
+          role="img"
+          viewBox="0 0 24 24"
+          width="25"
+          height="25"
+          aria-label={siGoogle.title}
+          fill={`#${siGoogle.hex}`}
+          className="inline-block mr-4"
+        >
+          <path d={siGoogle.path} />
+        </svg>
+        {t("register_with_google")}
+      </button>
+    </section>
+  );
+}

package/templates/Projects/default/src/ui/settings/page-ui.tsx

@@ -0,0 +1,15 @@
+// src/ui/settings/page-ui.tsx
+import { getTranslations } from "next-intl/server";
+
+export default async function SettingsPageUI() {
+  const t = await getTranslations("settings");
+
+  return (
+    <>
+      <section className="py-8 px-4 max-w-3xl mx-auto">
+        <h1 className="text-2xl font-bold">{t("title")}</h1>
+        <p className="mt-2">{t("description")}</p>
+      </section>
+    </>
+  );
+}

package/templates/Projects/default/src/ui/userInfo/page-ui.tsx

@@ -0,0 +1,15 @@
+// src/ui/userInfo/page-ui.tsx
+import { getTranslations } from "next-intl/server";
+
+export default async function UserInfoPageUI() {
+  const t = await getTranslations("userInfo");
+
+  return (
+    <>
+      <section className="py-8 px-4 max-w-3xl mx-auto">
+        <h1 className="text-2xl font-bold">{t("title")}</h1>
+        <p className="mt-2">{t("description")}</p>
+      </section>
+    </>
+  );
+}