@greatapps/greatauth-ui 0.3.11 → 0.3.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@greatapps/greatauth-ui",
-  "version": "0.3.11",
+  "version": "0.3.13",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/src/components/app-header.tsx

@@ -1,16 +1,19 @@
 "use client";
 
-import { Fragment } from "react";
+import { Fragment, useMemo } from "react";
 import { usePathname } from "next/navigation";
+import Link from "next/link";
 import type { AppShellConfig } from "../types";
 import { SidebarTrigger } from "./ui/sidebar";
 import { Separator } from "./ui/separator";
 import {
   Breadcrumb,
   BreadcrumbItem,
+  BreadcrumbLink,
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
+  BreadcrumbEllipsis,
 } from "./ui/breadcrumb";
 import { ThemeToggle } from "./theme-toggle";
 
@@ -21,9 +24,21 @@ interface AppHeaderProps {
 export function AppHeader({ config }: AppHeaderProps) {
   const pathname = usePathname();
   const segments = pathname.split("/").filter(Boolean);
-  const breadcrumbs = segments
-    .map((seg) => config.routeLabels[seg])
-    .filter(Boolean);
+
+  const breadcrumbs = useMemo(() => {
+    const items: { label: string; href: string }[] = [];
+    for (let i = 0; i < segments.length; i++) {
+      const label = config.routeLabels[segments[i]];
+      if (label) {
+        const href = "/" + segments.slice(0, i + 1).join("/");
+        items.push({ label, href });
+      }
+    }
+    return items;
+  }, [segments, config.routeLabels]);
+
+  const isLast = (i: number) => i === breadcrumbs.length - 1;
+  const showEllipsis = breadcrumbs.length > 2;
 
   return (
     <header className="flex h-14 shrink-0 items-center gap-2 border-b px-4">
@@ -33,14 +48,33 @@ export function AppHeader({ config }: AppHeaderProps) {
       <Breadcrumb className="flex-1">
         <BreadcrumbList>
           {breadcrumbs.length > 0 ? (
-            breadcrumbs.map((label, i) => (
-              <Fragment key={i}>
-                {i > 0 && <BreadcrumbSeparator />}
-                <BreadcrumbItem>
-                  <BreadcrumbPage>{label}</BreadcrumbPage>
-                </BreadcrumbItem>
-              </Fragment>
-            ))
+            breadcrumbs.map((crumb, i) => {
+              // On mobile (< sm), hide early items when there are more than 2
+              const hiddenOnMobile = showEllipsis && i < breadcrumbs.length - 2;
+
+              return (
+                <Fragment key={i}>
+                  {/* Ellipsis shown on mobile only, before the last 2 items */}
+                  {showEllipsis && i === breadcrumbs.length - 2 && (
+                    <BreadcrumbItem className="sm:hidden">
+                      <BreadcrumbEllipsis />
+                    </BreadcrumbItem>
+                  )}
+                  {i > 0 && (
+                    <BreadcrumbSeparator className={hiddenOnMobile ? "hidden sm:flex" : undefined} />
+                  )}
+                  <BreadcrumbItem className={hiddenOnMobile ? "hidden sm:flex" : undefined}>
+                    {isLast(i) ? (
+                      <BreadcrumbPage>{crumb.label}</BreadcrumbPage>
+                    ) : (
+                      <BreadcrumbLink asChild>
+                        <Link href={crumb.href}>{crumb.label}</Link>
+                      </BreadcrumbLink>
+                    )}
+                  </BreadcrumbItem>
+                </Fragment>
+              );
+            })
           ) : config.defaultBreadcrumb ? (
             <BreadcrumbItem>
               <BreadcrumbPage>{config.defaultBreadcrumb}</BreadcrumbPage>

package/src/components/app-sidebar.tsx

@@ -111,7 +111,7 @@ export function AppSidebar({ config }: AppSidebarProps) {
         <SidebarMenu>
           <SidebarMenuItem>
             <SidebarMenuButton size="lg" asChild>
-              <div className="flex items-center gap-2">
+              <div className="flex items-center gap-2 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:gap-0">
                 <div className="shrink-0">{config.appIcon}</div>
                 <span className="font-semibold truncate group-data-[collapsible=icon]:hidden">{config.appName}</span>
                 {config.appBadge && (

package/src/components/login-form.tsx

@@ -2,7 +2,7 @@
 
 import { useState } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
-import { Loader2, Mail, Lock, AlertCircle } from "lucide-react";
+import { Loader2, Mail, Lock, AlertCircle, Eye, EyeOff } from "lucide-react";
 import type { LoginFormConfig } from "../types";
 import { authClient } from "../auth";
 import { Button } from "./ui/button";
@@ -10,6 +10,7 @@ import { Input } from "./ui/input";
 import { Label } from "./ui/label";
 import { Badge } from "./ui/badge";
 import { cn } from "../lib/utils";
+import { ThemeToggle } from "./theme-toggle";
 
 interface LoginFormProps {
   config: LoginFormConfig;
@@ -24,6 +25,7 @@ export function LoginForm({ config }: LoginFormProps) {
   const [password, setPassword] = useState("");
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
@@ -64,97 +66,145 @@ export function LoginForm({ config }: LoginFormProps) {
   };
 
   return (
-    <div className="flex min-h-svh items-center justify-center bg-muted/30 p-4">
-      <div className="w-full max-w-[400px]">
-        {/* Header */}
-        <div className="mb-8 text-center">
-          <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-primary text-primary-foreground shadow-sm">
+    <div className="relative flex min-h-svh">
+      {/* Theme Toggle */}
+      <div className="fixed top-4 right-4 z-50">
+        <ThemeToggle />
+      </div>
+
+      {/* Left Panel — Branding (desktop only) */}
+      <div
+        className="relative hidden items-center justify-center overflow-hidden bg-primary md:flex md:w-1/2"
+        style={{
+          backgroundImage:
+            "radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px)",
+          backgroundSize: "24px 24px",
+        }}
+      >
+        {/* Gradient overlay */}
+        <div className="absolute inset-0 bg-gradient-to-br from-primary/80 via-primary to-primary/90" />
+
+        <div className="relative z-10 flex flex-col items-center gap-4 px-8 text-center text-primary-foreground">
+          <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-primary-foreground/15 shadow-lg backdrop-blur-sm">
             {config.icon}
           </div>
-          <div className="flex items-center justify-center gap-2">
-            <h1 className="text-2xl font-semibold tracking-tight">
-              {config.appName}
-            </h1>
-            {config.appBadge && (
-              <Badge variant={config.appBadge.variant} className="text-xs">
-                {config.appBadge.text}
-              </Badge>
-            )}
-          </div>
-          <p className="mt-1.5 text-sm text-muted-foreground">
+          <h2 className="text-3xl font-bold tracking-tight">
+            {config.appName}
+          </h2>
+          <p className="max-w-xs text-base text-primary-foreground/80">
             {config.description}
           </p>
         </div>
+      </div>
 
-        {/* Form Card */}
-        <div className="rounded-xl border bg-card p-6 shadow-sm">
-          <form onSubmit={handleSubmit} className="space-y-4">
-            {error && (
-              <div className="flex items-center gap-2 rounded-lg border border-destructive/30 bg-destructive/5 px-3 py-2.5 text-sm text-destructive">
-                <AlertCircle className="h-4 w-4 shrink-0" />
-                {error}
-              </div>
-            )}
-
-            <div className="space-y-1.5">
-              <Label htmlFor="login-email" className="text-sm font-medium">
-                Email
-              </Label>
-              <div className="relative">
-                <Mail className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-                <Input
-                  id="login-email"
-                  type="email"
-                  placeholder="email@exemplo.com"
-                  value={email}
-                  onChange={(e) => setEmail(e.target.value)}
-                  className="pl-9"
-                  autoComplete="email"
-                  required
-                />
-              </div>
+      {/* Right Panel — Form */}
+      <div className="flex w-full items-center justify-center bg-background p-4 md:w-1/2">
+        <div className="w-full max-w-sm">
+          {/* Header (visible always, primary branding on mobile) */}
+          <div className="mb-8 text-center">
+            <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-primary text-primary-foreground shadow-sm md:hidden">
+              {config.icon}
             </div>
-
-            <div className="space-y-1.5">
-              <Label htmlFor="login-password" className="text-sm font-medium">
-                Senha
-              </Label>
-              <div className="relative">
-                <Lock className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-                <Input
-                  id="login-password"
-                  type="password"
-                  placeholder="••••••••"
-                  value={password}
-                  onChange={(e) => setPassword(e.target.value)}
-                  className="pl-9"
-                  autoComplete="current-password"
-                  required
-                />
-              </div>
+            <div className="flex items-center justify-center gap-2">
+              <h1 className="text-3xl font-bold tracking-tight">
+                {config.appName}
+              </h1>
+              {config.appBadge && (
+                <Badge variant={config.appBadge.variant} className="text-xs">
+                  {config.appBadge.text}
+                </Badge>
+              )}
             </div>
+            <p className="mt-1.5 text-base text-muted-foreground">
+              {config.description}
+            </p>
+          </div>
 
-            <Button
-              type="submit"
-              className={cn("w-full", loading && "cursor-wait")}
-              disabled={loading}
-            >
-              {loading ? (
-                <>
-                  <Loader2 className="h-4 w-4 animate-spin" />
-                  A entrar...
-                </>
-              ) : (
-                "Entrar"
+          {/* Form Card */}
+          <div className="rounded-xl border bg-card p-6 shadow-sm">
+            <form onSubmit={handleSubmit} className="space-y-4">
+              {error && (
+                <div className="flex items-center gap-2 rounded-lg border border-destructive/30 bg-destructive/5 px-3 py-2.5 text-sm text-destructive">
+                  <AlertCircle className="h-4 w-4 shrink-0" />
+                  {error}
+                </div>
               )}
-            </Button>
-          </form>
-        </div>
 
-        {/* Footer */}
-        <p className="mt-6 text-center text-xs text-muted-foreground">
-          {config.footerText || "Acesso restrito a utilizadores autorizados"}
-        </p>
+              <div className="space-y-1.5">
+                <Label htmlFor="login-email" className="text-sm font-medium">
+                  Email
+                </Label>
+                <div className="relative">
+                  <Mail className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+                  <Input
+                    id="login-email"
+                    type="email"
+                    placeholder="email@exemplo.com"
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                    className="pl-9"
+                    autoComplete="email"
+                    required
+                  />
+                </div>
+              </div>
+
+              <div className="space-y-1.5">
+                <Label htmlFor="login-password" className="text-sm font-medium">
+                  Senha
+                </Label>
+                <div className="relative">
+                  <Lock className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+                  <Input
+                    id="login-password"
+                    type={showPassword ? "text" : "password"}
+                    placeholder="••••••••"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    className="pl-9 pr-10"
+                    autoComplete="current-password"
+                    required
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setShowPassword(!showPassword)}
+                    className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors"
+                    aria-label={showPassword ? "Ocultar senha" : "Mostrar senha"}
+                  >
+                    {showPassword ? (
+                      <EyeOff className="h-4 w-4" />
+                    ) : (
+                      <Eye className="h-4 w-4" />
+                    )}
+                  </button>
+                </div>
+              </div>
+
+              <Button
+                type="submit"
+                className={cn("w-full", loading && "cursor-wait")}
+                disabled={loading}
+              >
+                {loading ? (
+                  <>
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                    A entrar...
+                  </>
+                ) : (
+                  "Entrar"
+                )}
+              </Button>
+            </form>
+          </div>
+
+          {/* Footer */}
+          <p className="mt-6 text-center text-xs text-muted-foreground">
+            {config.footerText || "Acesso restrito a utilizadores autorizados"}
+          </p>
+          <p className="mt-1 text-center text-xs text-muted-foreground">
+            &copy; {new Date().getFullYear()} {config.appName}
+          </p>
+        </div>
       </div>
     </div>
   );

package/src/components/ui/sidebar.tsx

@@ -24,8 +24,7 @@ import {
   TooltipTrigger,
 } from "./tooltip"
 
-const SIDEBAR_COOKIE_NAME = "sidebar_state"
-const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+const SIDEBAR_STORAGE_KEY = "sidebar_state"
 const SIDEBAR_WIDTH = "16rem"
 const SIDEBAR_WIDTH_MOBILE = "18rem"
 const SIDEBAR_WIDTH_ICON = "3rem"
@@ -70,7 +69,13 @@ function SidebarProvider({
 
   // This is the internal state of the sidebar.
   // We use openProp and setOpenProp for control from outside the component.
-  const [_open, _setOpen] = React.useState(defaultOpen)
+  const [_open, _setOpen] = React.useState(() => {
+    if (typeof window === "undefined") return defaultOpen
+    const stored = localStorage.getItem(SIDEBAR_STORAGE_KEY)
+    if (stored === "true") return true
+    if (stored === "false") return false
+    return defaultOpen
+  })
   const open = openProp ?? _open
   const setOpen = React.useCallback(
     (value: boolean | ((value: boolean) => boolean)) => {
@@ -81,8 +86,7 @@ function SidebarProvider({
         _setOpen(openState)
       }
 
-      // This sets the cookie to keep the sidebar state.
-      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+      try { localStorage.setItem(SIDEBAR_STORAGE_KEY, String(openState)) } catch {}
     },
     [setOpenProp, open]
   )

package/src/components/users/users-page.tsx

@@ -188,7 +188,7 @@ export function UsersPage({ config, renderPhones }: UsersPageProps) {
   }
 
   return (
-    <div className="flex flex-col gap-4 p-4">
+    <div className="flex flex-col gap-4 p-4 md:p-6">
       <div className="flex items-center justify-between">
         <div>
           <h1 className="text-xl font-semibold">Usuários</h1>

package/src/theme.css

@@ -31,6 +31,7 @@
   --color-input: var(--input);
   --color-border: var(--border);
   --color-destructive: var(--destructive);
+  --color-success: var(--success);
   --color-accent-foreground: var(--accent-foreground);
   --color-accent: var(--accent);
   --color-muted-foreground: var(--muted-foreground);
@@ -64,18 +65,19 @@
   --secondary: oklch(0.967 0.001 286.375);
   --secondary-foreground: oklch(0.21 0.006 285.885);
   --muted: oklch(0.967 0.001 286.375);
-  --muted-foreground: oklch(0.552 0.016 285.938);
+  --muted-foreground: oklch(0.50 0.016 285.938);
   --accent: oklch(0.967 0.001 286.375);
   --accent-foreground: oklch(0.21 0.006 285.885);
   --destructive: oklch(0.577 0.245 27.325);
+  --success: oklch(0.527 0.154 150.069);
   --border: oklch(0.92 0.004 286.32);
   --input: oklch(0.92 0.004 286.32);
-  --ring: oklch(0.705 0.015 286.067);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
+  --ring: oklch(0.588 0.158 241.966);
+  --chart-1: oklch(0.588 0.158 241.966);
+  --chart-2: oklch(0.637 0.179 163.223);
+  --chart-3: oklch(0.553 0.195 255.065);
+  --chart-4: oklch(0.705 0.213 47.604);
+  --chart-5: oklch(0.637 0.237 25.331);
   --radius: 0.625rem;
   --sidebar: oklch(0.985 0 0);
   --sidebar-foreground: oklch(0.141 0.005 285.823);
@@ -103,14 +105,15 @@
   --accent: oklch(0.274 0.006 286.033);
   --accent-foreground: oklch(0.985 0 0);
   --destructive: oklch(0.704 0.191 22.216);
+  --success: oklch(0.696 0.17 162.48);
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
   --ring: oklch(0.552 0.016 285.938);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
+  --chart-1: oklch(0.688 0.158 241.966);
+  --chart-2: oklch(0.737 0.179 163.223);
+  --chart-3: oklch(0.653 0.195 255.065);
+  --chart-4: oklch(0.765 0.183 47.604);
+  --chart-5: oklch(0.717 0.217 25.331);
   --sidebar: oklch(0.21 0.006 285.885);
   --sidebar-foreground: oklch(0.985 0 0);
   --sidebar-primary: oklch(0.488 0.243 264.376);
@@ -128,6 +131,9 @@
   body {
     @apply bg-background text-foreground;
   }
+  a, button, input, select, textarea {
+    @apply transition-colors duration-150;
+  }
 }
 
 /* View Transition — dark/light mode circle reveal */