create-next-pro-cli 0.1.4 → 0.1.5

package/templates/Projects/default/src/app/styles/globals.css

@@ -1,26 +1,305 @@
 @import "tailwindcss";
 
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap"); */
+
+/* Dark mode : fond noir, texte blanc */
+.dark {
+  --background: 0 0% 0%; /* noir */
+  --foreground: 0 0% 100%; /* blanc */
+  --card: 0 0% 0%;
+  --card-foreground: 0 0% 100%;
+  --popover: 0 0% 0%;
+  --popover-foreground: 0 0% 100%;
+  --primary: 0 0% 100%; /* blanc */
+  --primary-foreground: 0 0% 0%; /* noir */
+  --secondary: 0 0% 20%; /* gris foncé */
+  --secondary-foreground: 0 0% 100%;
+  --muted: 0 0% 20%;
+  --muted-foreground: 0 0% 80%;
+  --accent: 0 0% 20%;
+  --accent-foreground: 0 0% 100%;
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 0 0% 20%;
+  --input: 0 0% 20%;
+  --ring: 0 0% 100%;
+  --radius: 0.75rem;
 }
 
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
+/* Light mode : fond blanc, texte noir */
+.light {
+  --background: 0 0% 100%; /* blanc */
+  --foreground: 0 0% 0%; /* noir */
+  --card: 0 0% 100%;
+  --card-foreground: 0 0% 0%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 0 0% 0%;
+  --primary: 0 0% 0%; /* noir */
+  --primary-foreground: 0 0% 100%; /* blanc */
+  --secondary: 0 0% 95%; /* gris très clair */
+  --secondary-foreground: 0 0% 0%;
+  --muted: 0 0% 95%;
+  --muted-foreground: 0 0% 20%;
+  --accent: 0 0% 95%;
+  --accent-foreground: 0 0% 0%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 0 0% 80%;
+  --input: 0 0% 80%;
+  --ring: 0 0% 0%;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
+* {
+  border-color: hsl(var(--border));
 }
 
 body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Inter", sans-serif;
+  background: hsl(var(--background));
+  color: hsl(var(--foreground));
+  line-height: 1.6;
+  transition: background 0.3s, color 0.3s;
+}
+
+.gradient-text {
+  background: linear-gradient(135deg, #fff 0%, #bbb 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+.light .gradient-text {
+  background: linear-gradient(135deg, #000 0%, #888 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.dark .glass-effect {
+  background: rgba(0, 0, 0, 0.8);
+  backdrop-filter: blur(10px);
+  border: 1px solid #444;
+}
+.light .glass-effect {
+  background: rgba(0, 0, 0, 0.08);
+  border: 1px solid #ccc;
+}
+
+.chat-bubble-user {
+  background: linear-gradient(135deg, #fff 0%, #bbb 100%);
+  border-radius: 18px 18px 4px 18px;
+  color: #000;
+}
+.light .chat-bubble-user {
+  background: linear-gradient(135deg, #000 0%, #888 100%);
+  color: #fff;
+}
+
+.chat-bubble-ai {
+  background: rgba(255, 255, 255, 0.12);
+  border-radius: 18px 18px 18px 4px;
+  border: 1px solid #444;
+  color: #000;
+}
+.light .chat-bubble-ai {
+  background: rgba(0, 0, 0, 0.12);
+  border: 1px solid #ccc;
+  color: #fff;
+}
+
+.typing-indicator {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: #fff;
+  animation: typing 1.4s infinite ease-in-out;
+}
+.light .typing-indicator {
+  background-color: #000;
+}
+
+.typing-indicator:nth-child(1) {
+  animation-delay: -0.32s;
+}
+.typing-indicator:nth-child(2) {
+  animation-delay: -0.16s;
+}
+
+@keyframes typing {
+  0%,
+  80%,
+  100% {
+    transform: scale(0);
+    opacity: 0.5;
+  }
+  40% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.hero-pattern {
+  background-image: radial-gradient(
+      circle at 25% 25%,
+      rgba(255, 255, 255, 0.18) 0%,
+      transparent 50%
+    ),
+    radial-gradient(
+      circle at 75% 75%,
+      rgba(180, 180, 180, 0.18) 0%,
+      transparent 50%
+    );
+}
+.light .hero-pattern {
+  background-image: radial-gradient(
+      circle at 25% 25%,
+      rgba(0, 0, 0, 0.08) 0%,
+      transparent 50%
+    ),
+    radial-gradient(
+      circle at 75% 75%,
+      rgba(120, 120, 120, 0.08) 0%,
+      transparent 50%
+    );
+}
+
+.light .mobil-menu {
+  background: rgba(255, 255, 255, 0.9);
+}
+
+.dark .mobil-menu {
+  background: rgba(0, 0, 0, 0.9);
+}
+
+.light .text-white,
+.light .text-gray-300,
+.light .text-gray-400 {
+  color: black;
+}
+
+.light button.text-white:hover,
+.light a:hover {
+  color: rgb(142, 197, 255);
+}
+.gsi-material-button {
+  user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  appearance: none;
+  -webkit-appearance: none;
+  /* background-color: linear-gradient(135deg, #fff 0%, #a78bfa 100%);
+  backdrop-filter: blur(8px); */
+  /* background-color: #131314; */
+  /* background-image: none; */
+  /* background: linear-gradient(135deg, #ffffff 0%, #a78bfa 100%); */
+  backdrop-filter: blur(8px);
+  border: 1px solid #747775;
+  border-radius: 4px;
+  box-sizing: border-box;
+  color: #e3e3e3;
+  /* color: #000000; */
+  cursor: pointer;
+  font-family: "Roboto", arial, sans-serif;
+  font-size: 14px;
+  height: 40px;
+  letter-spacing: 0.25px;
+  outline: none;
+  overflow: hidden;
+  padding: 0 12px;
+  position: relative;
+  text-align: center;
+  transition: background-color 0.218s, border-color 0.218s, box-shadow 0.218s;
+  vertical-align: middle;
+  white-space: nowrap;
+  width: auto;
+  max-width: 400px;
+  min-width: min-content;
+  border-color: #8e918f;
+}
+.light .gsi-material-button {
+  color: #222;
+  background: #fff;
+  border-color: #d1d5db;
+}
+
+.gsi-material-button .gsi-material-button-icon {
+  height: 20px;
+  margin-right: 12px;
+  min-width: 20px;
+  width: 20px;
+}
+
+.gsi-material-button .gsi-material-button-content-wrapper {
+  -webkit-align-items: center;
+  align-items: center;
+  display: flex;
+  -webkit-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  height: 100%;
+  justify-content: space-between;
+  position: relative;
+  width: 100%;
+}
+
+.gsi-material-button .gsi-material-button-contents {
+  -webkit-flex-grow: 1;
+  flex-grow: 1;
+  font-family: "Roboto", arial, sans-serif;
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: top;
+}
+
+.gsi-material-button .gsi-material-button-state {
+  -webkit-transition: opacity 0.218s;
+  transition: opacity 0.218s;
+  bottom: 0;
+  left: 0;
+  opacity: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.gsi-material-button:disabled {
+  cursor: default;
+  background-color: #13131461;
+  border-color: #8e918f1f;
+}
+
+.gsi-material-button:disabled .gsi-material-button-state {
+  background-color: #e3e3e31f;
+}
+
+.gsi-material-button:disabled .gsi-material-button-contents {
+  opacity: 38%;
+}
+
+.gsi-material-button:disabled .gsi-material-button-icon {
+  opacity: 38%;
+}
+
+.gsi-material-button:not(:disabled):active .gsi-material-button-state,
+.gsi-material-button:not(:disabled):focus .gsi-material-button-state {
+  background-color: white;
+  opacity: 12%;
+}
+
+.gsi-material-button:not(:disabled):hover {
+  -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3),
+    0 1px 3px 1px rgba(60, 64, 67, 0.15);
+  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3),
+    0 1px 3px 1px rgba(60, 64, 67, 0.15);
+}
+
+.gsi-material-button:not(:disabled):hover .gsi-material-button-state {
+  background-color: white;
+  opacity: 8%;
 }

package/templates/Projects/default/src/lib/auth/disconnect.ts

@@ -0,0 +1,11 @@
+// src/lib/auth/disconnect.ts
+"use server";
+import { cookies } from "next/headers";
+
+/**
+ * Supprime le cookie access_token pour déconnecter l'utilisateur côté serveur.
+ */
+export async function disconnect() {
+  const cookieStore = await cookies();
+  cookieStore.delete("access_token");
+}

package/templates/Projects/default/src/lib/auth/isConnected.ts

@@ -1,12 +1,14 @@
+"use server";
+// src/lib/auth/isConnected.ts
 import { cookies } from "next/headers";
 import { verify } from "jsonwebtoken";
 
 export async function isConnected(): Promise<boolean> {
   const cookieStore = await cookies();
-  const appToken = cookieStore.get("app_token")?.value;
-  if (appToken) {
+  const accessToken = cookieStore.get("access_token")?.value;
+  if (accessToken) {
     try {
-      verify(appToken, process.env.APP_JWT_SECRET!);
+      verify(accessToken, process.env.APP_JWT_SECRET!);
       return true;
     } catch {
       return false;

package/templates/Projects/default/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: unknown[]) {
+  return twMerge(clsx(inputs));
+}

package/templates/Projects/default/src/ui/Dashboard/LogoutButton.tsx

@@ -0,0 +1,27 @@
+// src/ui/Dashboard/LogoutButton.tsx
+"use client"; // DO NOT FORGET , this is a client component.
+import { useTranslations } from "next-intl";
+import { Button } from "@/ui/_global/Button";
+import { LogOut } from "lucide-react";
+import { disconnect } from "@/lib/auth/disconnect";
+
+const LogoutButton = () => {
+  const t = useTranslations("Dashboard");
+  const handleLogout = () => {
+    disconnect().then(() => {
+      window.location.href = "/";
+    });
+  };
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      onClick={handleLogout}
+      className="text-gray-400 hover:text-black  glass-effect"
+    >
+      <LogOut className="h-4 w-4 sm:mr-2" />
+      <span className="hidden sm:inline">{t("logout")}</span>
+    </Button>
+  );
+};
+export default LogoutButton;

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

@@ -1,11 +1,12 @@
-("");
+// src/ui/Dashboard/page-ui.tsx
+"use client";
 import { useTranslations } from "next-intl";
 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");
+  const t = useTranslations("Dashboard");
   return (
     <>
       <div className="flex items-center justify-between mb-6">

package/templates/Projects/default/src/{app/[locale]/(public)/login/page.tsx → ui/Login/page-ui.tsx}

@@ -1,11 +1,14 @@
+// src/ui/Login/page-ui.tsx
 "use client";
+
 import { useTranslations } from "next-intl";
 import { signIn } from "next-auth/react";
 
-export default function LoginPage() {
-  const t = useTranslations("login");
+export default function LoginPageUI() {
+  const t = useTranslations("Login");
+
   return (
-    <main className="py-8 px-4 max-w-3xl mx-auto">
+    <section className="py-8 px-4 max-w-3xl mx-auto">
       <h1 className="text-2xl font-bold">{t("title")}</h1>
       <p className="text-muted mt-2">{t("description")}</p>
       <button
@@ -14,6 +17,6 @@ export default function LoginPage() {
       >
         {t("login_with_google")}
       </button>
-    </main>
+    </section>
   );
 }

package/templates/Projects/default/src/{app/[locale]/(public)/register/page.tsx → ui/Register/page-ui.tsx}

@@ -1,12 +1,15 @@
+// src/ui/Register/page-ui.tsx
 "use client";
+
 import { useTranslations } from "next-intl";
 import { signIn } from "next-auth/react";
 import BackButton from "@/ui/_global/BackButton";
 
-export default function RegisterPage() {
-  const t = useTranslations("register");
+export default function RegisterPageUI() {
+  const t = useTranslations("Register");
+
   return (
-    <main className="py-8 px-4 max-w-md mx-auto">
+    <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>
         <BackButton />
@@ -18,6 +21,6 @@ export default function RegisterPage() {
       >
         {t("register_with_google")}
       </button>
-    </main>
+    </section>
   );
 }

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

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

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

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

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

@@ -1,15 +1,17 @@
 "use client"; // DO NOT FORGET , this is a client component.
 import { useRouter } from "next/navigation";
+import { StepBackIcon } from "lucide-react";
+import { Button } from "./Button";
 
 export default function BackButton({ className = "" }: { className?: string }) {
   const router = useRouter();
   return (
-    <button
+    <Button
       type="button"
       onClick={() => router.back()}
       className={`inline-flex items-center gap-2 px-3 py-1.5 rounded border border-gray-300 bg-white text-gray-700 hover:bg-gray-100 transition ${className}`}
     >
-      <span aria-hidden="true">←</span> Retour
-    </button>
+      <StepBackIcon className="h-4 w-4" /> Retour
+    </Button>
   );
 }

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

@@ -0,0 +1,75 @@
+// src/ui/_global/Button.tsx
+"use client";
+import { cn } from "@/lib/utils";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import React from "react";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 cursor-pointer disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground hover:bg-primary/90 dark:text-white",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+        negative:
+          "bg-black text-white dark:bg-white dark:text-black hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+import type { ButtonHTMLAttributes, DetailedHTMLProps, ReactNode } from "react";
+
+type ButtonProps = {
+  className?: string;
+  variant?:
+    | "default"
+    | "destructive"
+    | "outline"
+    | "secondary"
+    | "ghost"
+    | "link";
+  size?: "default" | "sm" | "lg" | "icon";
+  asChild?: boolean;
+  children?: ReactNode;
+} & DetailedHTMLProps<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  HTMLButtonElement
+>;
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, children, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      >
+        {children}
+      </Comp>
+    );
+  }
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

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

@@ -1,33 +1,54 @@
+"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;
+};
 
 export default function GlobalHeader({
-  isConnected,
-}: {
-  isConnected: boolean;
-}) {
+  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);
+  }, []);
+
   return (
-    <header className="sticky top-0 z-30 w-full border-b bg-white/80 backdrop-blur supports-[backdrop-filter]:bg-white/60 shadow-sm">
+    <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">
-        <div className="flex items-center gap-3">
-          {/* Logo Next.js SVG */}
-          <Image
-            src="/cnp-logo.svg"
-            alt="Logo"
-            width={63}
-            height={63}
-            className="mr-2"
-          />
-          <span className="text-lg font-semibold tracking-tight select-none">
-            Create Next Pro
-          </span>
-        </div>
-        <nav className="flex items-center gap-4">
-          {isConnected ? <UserNav /> : <PublicNav />}
+        <Link href="/" className="">
+          <div className="flex items-center h-16">
+            <Image
+              src="/cnp-logo.svg"
+              alt="Logo"
+              width={63}
+              height={63}
+              className="mr-2"
+            />
+            <h1 className="text-lg font-semibold tracking-tight select-none">
+              Create Next Pro
+            </h1>
+          </div>
+        </Link>
+
+        {isConnectedState ? <UserNav /> : <PublicNav />}
+        <div className="flex items-center h-16">
           <LocaleSwitcher />
-        </nav>
+        </div>
       </div>
     </header>
   );

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

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