@djangocfg/layouts 1.2.1 → 1.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "Layout system and components for Unrealon applications",
   "author": {
     "name": "DjangoCFG",
@@ -53,9 +53,9 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^1.2.1",
-    "@djangocfg/og-image": "^1.2.1",
-    "@djangocfg/ui": "^1.2.1",
+    "@djangocfg/api": "^1.2.2",
+    "@djangocfg/og-image": "^1.2.2",
+    "@djangocfg/ui": "^1.2.2",
     "@hookform/resolvers": "^5.2.0",
     "consola": "^3.4.2",
     "lucide-react": "^0.468.0",
@@ -76,7 +76,7 @@
     "vidstack": "0.6.15"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^1.2.1",
+    "@djangocfg/typescript-config": "^1.2.2",
     "@types/node": "^24.7.2",
     "@types/react": "19.2.2",
     "@types/react-dom": "19.2.1",

package/src/layouts/AppLayout/AppLayout.tsx

@@ -51,6 +51,12 @@ export interface AppLayoutProps {
    * @example fontFamily="Inter, sans-serif"
    */
   fontFamily?: string;
+  /**
+   * Show package versions button in sidebar footer
+   * @default false
+   * @example showPackageVersions={true}
+   */
+  showPackageVersions?: boolean;
 }
 
 /**
@@ -115,6 +121,9 @@ function LayoutRouter({
 
     // Auth routes: render inside AuthLayout
     case 'auth':
+      // Check if we're on a private route that requires auth
+      const isPrivateRoute = config.routes.detectors.isPrivateRoute(router.pathname);
+
       return (
         <AuthLayout
           termsUrl={config.auth?.termsUrl}
@@ -122,7 +131,8 @@ function LayoutRouter({
           supportUrl={config.auth?.supportUrl}
           enablePhoneAuth={config.auth?.enablePhoneAuth}
         >
-          {children}
+          {/* Don't render children if redirected from private route */}
+          {!isPrivateRoute && children}
         </AuthLayout>
       );
 
@@ -136,6 +146,9 @@ function LayoutRouter({
         );
       }
       return <PrivateLayout>{children}</PrivateLayout>;
+
+    default:
+      return <PublicLayout>{children}</PublicLayout>;
   }
 }
 
@@ -168,7 +181,7 @@ function LayoutRouter({
  * </AppLayout>
  * ```
  */
-export function AppLayout({ children, config, disableLayout = false, forceLayout, fontFamily }: AppLayoutProps) {
+export function AppLayout({ children, config, disableLayout = false, forceLayout, fontFamily, showPackageVersions }: AppLayoutProps) {
   const router = useRouter();
 
   // Check if ErrorBoundary is enabled (default: true)
@@ -186,7 +199,7 @@ export function AppLayout({ children, config, disableLayout = false, forceLayout
       )}
 
       <CoreProviders config={config}>
-        <AppContextProvider config={config}>
+        <AppContextProvider config={config} showPackageVersions={showPackageVersions}>
           {/* SEO Meta Tags */}
           <Seo
             pageConfig={{

package/src/layouts/AppLayout/components/PackageVersions/PackageVersions.tsx

@@ -0,0 +1,101 @@
+/**
+ * Package Versions Display
+ *
+ * Shows all @djangocfg packages versions in a popover
+ * Works in both sidebar (PrivateLayout) and footer (PublicLayout)
+ */
+
+'use client';
+
+import React from 'react';
+import { Info, Package } from 'lucide-react';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@djangocfg/ui/components';
+import { Button } from '@djangocfg/ui/components';
+import { getPackageVersions } from './packageVersions.config';
+
+export interface PackageVersionsProps {
+  /**
+   * Display variant
+   * - 'sidebar': Adapts to sidebar collapsed state (PrivateLayout)
+   * - 'footer': Simple button for footer (PublicLayout)
+   * - 'footer-minimal': Only icon, no text (for compact footer)
+   */
+  variant?: 'sidebar' | 'footer' | 'footer-minimal';
+}
+
+export function PackageVersions({ variant = 'footer' }: PackageVersionsProps) {
+  // Try to use sidebar state if available (only in PrivateLayout)
+  let isCollapsed = false;
+  if (variant === 'sidebar') {
+    try {
+      // Dynamic import to avoid errors in PublicLayout
+      const { useSidebar } = require('@djangocfg/ui/components');
+      const { state } = useSidebar();
+      isCollapsed = state === 'collapsed';
+    } catch (e) {
+      // Sidebar not available, use default
+    }
+  }
+
+  const isSidebarVariant = variant === 'sidebar';
+  const isMinimalVariant = variant === 'footer-minimal';
+  const popoverAlign = isSidebarVariant ? 'start' : 'center';
+  const popoverSide = isSidebarVariant ? 'right' : 'top';
+
+  // Determine if we should show text
+  const showText = !isCollapsed && !isMinimalVariant;
+
+  // Get package versions dynamically
+  const packages = getPackageVersions();
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          variant="ghost"
+          size={isCollapsed || isMinimalVariant ? "icon" : "sm"}
+          className={isSidebarVariant
+            ? "w-full justify-start text-xs text-muted-foreground hover:text-foreground"
+            : isMinimalVariant
+              ? "h-auto w-auto p-1 text-muted-foreground hover:text-primary transition-colors"
+              : "text-xs text-muted-foreground hover:text-foreground"
+          }
+          title={isMinimalVariant ? "Package Versions" : undefined}
+        >
+          <Info className={isMinimalVariant ? "h-3 w-3" : "h-3.5 w-3.5"} />
+          {showText && <span className="ml-2">Package Versions</span>}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent align={popoverAlign} side={popoverSide} className="w-80">
+        <div className="space-y-3">
+          <div className="flex items-center gap-2">
+            <Package className="h-4 w-4 text-primary" />
+            <h4 className="font-semibold text-sm">Package Versions</h4>
+          </div>
+          <div className="space-y-1.5">
+            {packages.map((pkg) => (
+              <a
+                key={pkg.name}
+                href={`https://www.npmjs.com/package/${pkg.name}`}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex items-center justify-between py-1.5 px-2 rounded-sm hover:bg-accent/50 transition-colors cursor-pointer group"
+              >
+                <span className="text-xs font-mono text-muted-foreground group-hover:text-foreground transition-colors">
+                  {pkg.name}
+                </span>
+                <span className="text-xs font-semibold bg-primary/10 text-primary px-2 py-0.5 rounded group-hover:bg-primary/20 transition-colors">
+                  v{pkg.version}
+                </span>
+              </a>
+            ))}
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/layouts/AppLayout/components/PackageVersions/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Package Versions Module
+ */
+
+export { PackageVersions } from './PackageVersions';
+export { getPackageVersions, getPackageVersion } from './packageVersions.config';
+export type { PackageInfo } from './packageVersions.config';

package/src/layouts/AppLayout/components/PackageVersions/packageVersions.config.ts

@@ -0,0 +1,65 @@
+/**
+ * Package Versions Configuration
+ *
+ * NOTE: This file is auto-generated by packages/scripts/sync-package-versions.js
+ * Do not edit manually! Run 'make build' or 'pnpm sync-versions' to update.
+ *
+ * Versions are synced from actual package.json files in the monorepo.
+ * This ensures compatibility with both monorepo (dev) and npm (production).
+ */
+
+export interface PackageInfo {
+  name: string;
+  version: string;
+}
+
+/**
+ * Package versions registry
+ * Auto-synced from package.json files
+ * Last updated: 2025-10-23T06:57:54.947Z
+ */
+const PACKAGE_VERSIONS: PackageInfo[] = [
+  {
+    "name": "@djangocfg/ui",
+    "version": "1.2.2"
+  },
+  {
+    "name": "@djangocfg/api",
+    "version": "1.2.2"
+  },
+  {
+    "name": "@djangocfg/layouts",
+    "version": "1.2.2"
+  },
+  {
+    "name": "@djangocfg/markdown",
+    "version": "1.2.2"
+  },
+  {
+    "name": "@djangocfg/og-image",
+    "version": "1.2.2"
+  },
+  {
+    "name": "@djangocfg/eslint-config",
+    "version": "1.2.2"
+  },
+  {
+    "name": "@djangocfg/typescript-config",
+    "version": "1.2.2"
+  }
+];
+
+/**
+ * Get all package versions
+ */
+export function getPackageVersions(): PackageInfo[] {
+  return PACKAGE_VERSIONS;
+}
+
+/**
+ * Get single package version by name
+ */
+export function getPackageVersion(packageName: string): string | undefined {
+  const packages = getPackageVersions();
+  return packages.find((pkg) => pkg.name === packageName)?.version;
+}

package/src/layouts/AppLayout/components/UserMenu.tsx

@@ -0,0 +1,340 @@
+/**
+ * Universal User Menu Component
+ *
+ * Single unified component for both Desktop and Mobile user menus
+ * Uses AppContext and Auth context directly - no prop drilling!
+ */
+
+'use client';
+
+import React from 'react';
+import { useRouter } from 'next/router';
+import { User, ChevronDown, Crown, LogOut, Settings } from 'lucide-react';
+import { Button, ButtonLink, Card, CardContent } from '@djangocfg/ui/components';
+import { ThemeToggle } from '@djangocfg/ui/theme';
+import { useAppContext } from '../context';
+import { useAuth } from '../../../auth';
+
+export interface UserMenuProps {
+  variant: 'desktop' | 'mobile';
+  /** Mobile only: callback when navigation happens */
+  onNavigate?: () => void;
+}
+
+interface MenuItem {
+  id: string;
+  type: 'link' | 'button';
+  icon: React.ReactNode;
+  label: string;
+  href?: string;
+  onClick?: () => void;
+  variant?: 'default' | 'ghost' | 'destructive';
+  className?: string;
+}
+
+export function UserMenu({ variant, onNavigate }: UserMenuProps) {
+  const router = useRouter();
+  const { config, userMenuOpen, toggleUserMenu, closeUserMenu } = useAppContext();
+  const { user, isAuthenticated, logout } = useAuth();
+
+  const { publicLayout, routes } = config;
+
+  // Desktop: determine if user is on dashboard
+  const isDashboard = variant === 'desktop' && publicLayout.userMenu.dashboardPath
+    ? router.pathname.includes(publicLayout.userMenu.dashboardPath)
+    : false;
+
+  // === DATA PREPARATION (before rendering) ===
+
+  // Handle logout
+  const handleLogout = React.useCallback(() => {
+    logout();
+    if (variant === 'desktop') {
+      closeUserMenu();
+    } else if (onNavigate) {
+      onNavigate();
+    }
+  }, [logout, variant, closeUserMenu, onNavigate]);
+
+  // Prepare menu items
+  const menuItems = React.useMemo<MenuItem[]>(() => {
+    const items: MenuItem[] = [];
+
+    // Profile
+    items.push({
+      id: 'profile',
+      type: 'link',
+      icon: <Settings className="size-4" />,
+      label: 'Profile',
+      href: publicLayout.userMenu.profilePath,
+      variant: 'ghost',
+    });
+
+    // Logout
+    items.push({
+      id: 'logout',
+      type: 'button',
+      icon: <LogOut className="size-4" />,
+      label: 'Sign out',
+      onClick: handleLogout,
+      variant: 'ghost',
+      className: 'text-destructive hover:text-destructive hover:bg-destructive/10',
+    });
+
+    return items;
+  }, [publicLayout.userMenu.profilePath, handleLogout]);
+
+  // === UNIFIED MENU ITEM RENDERER ===
+
+  /**
+   * Renders a single menu item (link or button)
+   * Used for both desktop dropdown and mobile icons
+   */
+  const renderMenuItem = React.useCallback((
+    item: MenuItem,
+    mode: 'desktop' | 'mobile-icon',
+    onClick?: () => void
+  ) => {
+    if (mode === 'mobile-icon') {
+      // Mobile: render as icon-only button
+      const iconElement = item.icon as React.ReactElement;
+      const resizedIcon = React.isValidElement(iconElement)
+        ? React.cloneElement(iconElement, { className: 'h-5 w-5' } as any)
+        : iconElement;
+
+      if (item.type === 'link' && item.href) {
+        return (
+          <ButtonLink
+            key={item.id}
+            href={item.href}
+            variant={item.variant as any}
+            size="icon"
+            className="h-9 w-9"
+            onClick={onClick}
+            aria-label={item.label}
+          >
+            {resizedIcon}
+          </ButtonLink>
+        );
+      }
+
+      return (
+        <Button
+          key={item.id}
+          onClick={item.onClick}
+          variant={item.variant as any}
+          size="icon"
+          className={`h-9 w-9 ${item.className || ''}`}
+          aria-label={item.label}
+        >
+          {resizedIcon}
+        </Button>
+      );
+    }
+
+    // Desktop: render with text and icon
+    const baseClassName = `w-full justify-start gap-2 ${item.className || ''}`;
+
+    if (item.type === 'link' && item.href) {
+      return (
+        <ButtonLink
+          key={item.id}
+          href={item.href}
+          variant={item.variant as any}
+          size="sm"
+          className={baseClassName}
+          onClick={onClick}
+        >
+          {item.icon}
+          {item.label}
+        </ButtonLink>
+      );
+    }
+
+    return (
+      <Button
+        key={item.id}
+        onClick={item.onClick}
+        variant={item.variant as any}
+        size="sm"
+        className={baseClassName}
+      >
+        {item.icon}
+        {item.label}
+      </Button>
+    );
+  }, []);
+
+  // === RENDERING ===
+
+  // Desktop variant
+  if (variant === 'desktop') {
+    return (
+      <div className="flex items-center gap-3">
+        {isAuthenticated ? (
+          <div className="flex items-center gap-3">
+            {/* Dashboard button (only if not on dashboard) */}
+            {publicLayout.userMenu.dashboardPath && !isDashboard && (
+              <ButtonLink
+                href={publicLayout.userMenu.dashboardPath}
+                variant="default"
+                size="sm"
+                className="gap-2"
+              >
+                <Crown className="size-4" />
+                Dashboard
+              </ButtonLink>
+            )}
+
+            {/* User Dropdown */}
+            <div className="relative">
+              <button
+                className="flex items-center gap-2 px-3 py-2 rounded-sm text-sm font-medium transition-colors text-foreground hover:text-primary hover:bg-accent/50"
+                onClick={toggleUserMenu}
+                aria-haspopup="true"
+                aria-expanded={userMenuOpen}
+              >
+                <User className="size-4" />
+                <span className="max-w-[120px] truncate">{user?.email}</span>
+                <ChevronDown
+                  className={`size-4 transition-transform ${
+                    userMenuOpen ? 'rotate-180' : ''
+                  }`}
+                />
+              </button>
+
+              {userMenuOpen && (
+                <>
+                  {/* Backdrop */}
+                  <div
+                    className="fixed inset-0 z-[9995]"
+                    onClick={closeUserMenu}
+                    aria-hidden="true"
+                  />
+                  {/* Dropdown */}
+                  <div
+                    className="absolute top-full right-0 mt-2 w-48 rounded-sm shadow-sm backdrop-blur-xl z-[9996] bg-popover border border-border"
+                    role="menu"
+                    aria-label="User menu"
+                  >
+                    <div className="p-2">
+                      {/* User info */}
+                      <div className="px-3 py-2 text-sm mb-2 border-b border-border">
+                        <div className="text-muted-foreground">Signed in as:</div>
+                        <div className="font-medium truncate text-popover-foreground mt-1">
+                          {user?.email}
+                        </div>
+                      </div>
+
+                      {/* Menu items - unified rendering */}
+                      {menuItems.map((item) => renderMenuItem(item, 'desktop', closeUserMenu))}
+                    </div>
+                  </div>
+                </>
+              )}
+            </div>
+          </div>
+        ) : (
+          /* Guest - Sign in button */
+          <ButtonLink href={routes.auth} variant="default" size="sm" className="h-9 gap-1.5">
+            <User className="w-4 h-4" />
+            Sign In
+          </ButtonLink>
+        )}
+      </div>
+    );
+  }
+
+  // Mobile variant
+  if (isAuthenticated) {
+    return (
+      <Card className="border-primary/20 shadow-lg !bg-accent/50">
+        <CardContent className="p-4">
+          {/* User Info Header */}
+          <div className="flex items-center gap-3 mb-4 p-3 rounded-sm border border-border bg-accent/70">
+            <div className="w-10 h-10 rounded-full flex items-center justify-center bg-primary flex-shrink-0 overflow-hidden relative">
+              {user?.avatar ? (
+                <img
+                  src={user.avatar}
+                  alt={user?.email || 'User'}
+                  className="w-10 h-10 rounded-full object-cover"
+                />
+              ) : (
+                <User className="w-5 h-5 text-primary-foreground" />
+              )}
+              {/* Active indicator */}
+              <div className="absolute -bottom-0.5 -right-0.5 size-3 rounded-full bg-green-500 border-2 border-background" />
+            </div>
+            <div className="flex-1 min-w-0">
+              <p className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
+                Signed in as
+              </p>
+              <p className="text-sm font-semibold truncate text-foreground">
+                {user?.email}
+              </p>
+            </div>
+          </div>
+
+          {/* Action Buttons */}
+          <div className="space-y-3">
+            {/* Dashboard link */}
+            {publicLayout.userMenu.dashboardPath && (
+              <ButtonLink
+                href={publicLayout.userMenu.dashboardPath}
+                variant="default"
+                size="sm"
+                className="w-full h-9 gap-2"
+                onClick={onNavigate}
+              >
+                <Crown className="size-4" />
+                Dashboard
+              </ButtonLink>
+            )}
+
+            {/* Quick Actions - Icons only - unified rendering */}
+            <div className="flex items-center justify-center gap-2 pt-3 mt-1 border-t border-border/30">
+              {menuItems.map((item) => renderMenuItem(item, 'mobile-icon', onNavigate))}
+
+              {/* Theme Toggle */}
+              <ThemeToggle />
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  // Mobile Guest Card
+  return (
+    <Card className="border-border !bg-accent/50">
+      <CardContent className="p-4">
+        <div className="text-center space-y-4">
+          <div className="w-12 h-12 rounded-full flex items-center justify-center mx-auto bg-muted">
+            <User className="w-6 h-6 text-muted-foreground" />
+          </div>
+          <div>
+            <p className="text-sm font-medium mb-1 text-foreground">Welcome!</p>
+            <p className="text-xs text-muted-foreground">
+              Sign in to access your dashboard
+            </p>
+          </div>
+          <ButtonLink
+            href={routes.auth}
+            variant="default"
+            size="default"
+            className="w-full gap-2"
+            onClick={onNavigate}
+          >
+            <User className="w-5 h-5" />
+            Sign In
+          </ButtonLink>
+
+          {/* Theme toggle */}
+          <div className="flex justify-center pt-2 border-t border-border/30">
+            <ThemeToggle />
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/src/layouts/AppLayout/components/index.ts

@@ -5,3 +5,7 @@
 export { default as Seo } from './Seo';
 export { default as PageProgress } from './PageProgress';
 export { ErrorBoundary } from './ErrorBoundary';
+export { PackageVersions, getPackageVersions, getPackageVersion } from './PackageVersions';
+export { UserMenu } from './UserMenu';
+export type { PackageInfo } from './PackageVersions';
+export type { UserMenuProps } from './UserMenu';

package/src/layouts/AppLayout/context/AppContext.tsx

@@ -24,11 +24,11 @@ interface AppContextValue {
   currentPath: string;
   layoutMode: LayoutMode;
 
-  // Mobile menu state
-  mobileMenuOpen: boolean;
-  openMobileMenu: () => void;
-  closeMobileMenu: () => void;
-  toggleMobileMenu: () => void;
+  // Mobile drawer state
+  mobileDrawerOpen: boolean;
+  openMobileDrawer: () => void;
+  closeMobileDrawer: () => void;
+  toggleMobileDrawer: () => void;
 
   // User menu state (desktop dropdown)
   userMenuOpen: boolean;
@@ -41,6 +41,9 @@ interface AppContextValue {
   collapseSidebar: () => void;
   expandSidebar: () => void;
   toggleSidebar: () => void;
+
+  // Features
+  showPackageVersions?: boolean;
 }
 
 // ═══════════════════════════════════════════════════════════════════════════
@@ -56,6 +59,7 @@ const AppContext = createContext<AppContextValue | null>(null);
 export interface AppContextProviderProps {
   children: ReactNode;
   config: AppLayoutConfig;
+  showPackageVersions?: boolean;
 }
 
 /**
@@ -64,11 +68,11 @@ export interface AppContextProviderProps {
  * Provides unified application context to all child components
  * Manages layout state and exposes configuration
  */
-export function AppContextProvider({ children, config }: AppContextProviderProps) {
+export function AppContextProvider({ children, config, showPackageVersions }: AppContextProviderProps) {
   const router = useRouter();
 
   // UI state
-  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const [mobileDrawerOpen, setMobileDrawerOpen] = useState(false);
   const [userMenuOpen, setUserMenuOpen] = useState(false);
   const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
 
@@ -81,10 +85,10 @@ export function AppContextProvider({ children, config }: AppContextProviderProps
     return 'public';
   }, [router.pathname, config.routes.detectors]);
 
-  // Mobile menu handlers
-  const openMobileMenu = () => setMobileMenuOpen(true);
-  const closeMobileMenu = () => setMobileMenuOpen(false);
-  const toggleMobileMenu = () => setMobileMenuOpen(prev => !prev);
+  // Mobile drawer handlers
+  const openMobileDrawer = () => setMobileDrawerOpen(true);
+  const closeMobileDrawer = () => setMobileDrawerOpen(false);
+  const toggleMobileDrawer = () => setMobileDrawerOpen(prev => !prev);
 
   // User menu handlers
   const openUserMenu = () => setUserMenuOpen(true);
@@ -101,10 +105,10 @@ export function AppContextProvider({ children, config }: AppContextProviderProps
     routes: config.routes.detectors,
     currentPath: router.pathname,
     layoutMode,
-    mobileMenuOpen,
-    openMobileMenu,
-    closeMobileMenu,
-    toggleMobileMenu,
+    mobileDrawerOpen,
+    openMobileDrawer,
+    closeMobileDrawer,
+    toggleMobileDrawer,
     userMenuOpen,
     openUserMenu,
     closeUserMenu,
@@ -113,6 +117,7 @@ export function AppContextProvider({ children, config }: AppContextProviderProps
     collapseSidebar,
     expandSidebar,
     toggleSidebar,
+    showPackageVersions,
   };
 
   return <AppContext.Provider value={value}>{children}</AppContext.Provider>;
@@ -129,7 +134,7 @@ export function AppContextProvider({ children, config }: AppContextProviderProps
  *
  * @example
  * ```tsx
- * const { config, layoutMode, toggleMobileMenu } = useAppContext();
+ * const { config, layoutMode, toggleMobileDrawer } = useAppContext();
  * ```
  */
 export function useAppContext(): AppContextValue {

package/src/layouts/AppLayout/layouts/PrivateLayout/components/DashboardHeader.tsx

@@ -152,8 +152,8 @@ export function DashboardHeader() {
 
               <DropdownMenuSeparator />
 
-              <DropdownMenuItem onClick={logout}>
-                <LogOut className="mr-2 h-4 w-4" />
+              <DropdownMenuItem onClick={logout} className="gap-2">
+                <LogOut className="h-4 w-4" />
                 Logout
               </DropdownMenuItem>
             </DropdownMenuContent>

package/src/layouts/AppLayout/layouts/PrivateLayout/components/DashboardSidebar.tsx

@@ -29,6 +29,7 @@ import {
 } from '@djangocfg/ui/components';
 import { useAppContext } from '../../../context';
 import { useNavigation } from '../../../hooks';
+import { PackageVersions } from '../../../components';
 
 /**
  * Dashboard Sidebar Component
@@ -44,7 +45,7 @@ import { useNavigation } from '../../../hooks';
  * All data from context!
  */
 export function DashboardSidebar() {
-  const { config } = useAppContext();
+  const { config, showPackageVersions } = useAppContext();
   const { currentPath } = useNavigation();
   const { state, isMobile } = useSidebar();
 
@@ -157,8 +158,11 @@ export function DashboardSidebar() {
         ))}
       </SidebarContent>
 
-      {/* TODO: implement footer content if needed */}
-      {/* <SidebarFooter>Footer content here</SidebarFooter> */}
+      {showPackageVersions && (
+        <SidebarFooter>
+          <PackageVersions variant="sidebar" />
+        </SidebarFooter>
+      )}
     </Sidebar>
   );
 }

package/src/layouts/AppLayout/layouts/PublicLayout/components/Footer.tsx

@@ -11,6 +11,7 @@ import React from 'react';
 import Link from 'next/link';
 import { useIsMobile } from '@djangocfg/ui/hooks';
 import { useAppContext } from '../../../context';
+import { PackageVersions } from '../../../components';
 
 /**
  * Footer Component
@@ -27,7 +28,7 @@ import { useAppContext } from '../../../context';
  * All data from context!
  */
 export function Footer() {
-  const { config } = useAppContext();
+  const { config, showPackageVersions } = useAppContext();
   const isMobile = useIsMobile();
 
   const { app, publicLayout } = config;
@@ -58,7 +59,10 @@ export function Footer() {
           </div>
 
           {/* Quick Links */}
-          <div className="flex flex-wrap justify-center gap-4 mb-6">
+          <div className="flex flex-wrap justify-center gap-4 mb-6 items-center">
+            {showPackageVersions && (
+              <PackageVersions variant="footer-minimal" />
+            )}
             {footer.links.docs && (
               <a
                 href={footer.links.docs}
@@ -209,6 +213,9 @@ export function Footer() {
               </a>
             </div>
             <div className="flex flex-wrap items-center gap-4">
+              {showPackageVersions && (
+                <PackageVersions variant="footer-minimal" />
+              )}
               {footer.links.docs && (
                 <a
                   href={footer.links.docs}

package/src/layouts/AppLayout/layouts/PublicLayout/components/{MobileMenu.tsx → MobileDrawer.tsx}

@@ -1,7 +1,7 @@
 /**
- * Mobile Menu Drawer
+ * Mobile Drawer
  *
- * Full-screen slide-in menu for mobile devices
+ * Full-screen slide-in drawer for mobile navigation
  * Refactored from _old/MainLayout - uses context only!
  */
 
@@ -12,29 +12,25 @@ import { createPortal } from 'react-dom';
 import Link from 'next/link';
 import { X } from 'lucide-react';
 import { useAppContext } from '../../../context';
-import { useAuth } from '../../../../../auth';
 import { useNavigation } from '../../../hooks';
-import { MobileMenuUserCard } from './MobileMenuUserCard';
+import { UserMenu } from '../../../components';
 
 /**
- * Mobile Menu Component
+ * Mobile Drawer Component
  *
  * Features:
  * - Slide-in drawer from right
- * - User card with info (authenticated)
- * - Welcome card with sign in (guest)
+ * - UserMenu component (authenticated/guest)
  * - Navigation sections
- * - Theme toggle
  * - Backdrop overlay
  *
  * All data from context!
  */
-export function MobileMenu() {
-  const { config, mobileMenuOpen, closeMobileMenu } = useAppContext();
-  const { user, isAuthenticated, logout } = useAuth();
+export function MobileDrawer() {
+  const { config, mobileDrawerOpen, closeMobileDrawer } = useAppContext();
   const { isActive } = useNavigation();
 
-  const { app, publicLayout, routes } = config;
+  const { app, publicLayout } = config;
 
   // Track if we should render (stays true during close animation)
   const [shouldRender, setShouldRender] = React.useState(false);
@@ -44,7 +40,7 @@ export function MobileMenu() {
 
   // Handle opening
   React.useEffect(() => {
-    if (mobileMenuOpen) {
+    if (mobileDrawerOpen) {
       setShouldRender(true);
       // Trigger animation after render
       requestAnimationFrame(() => {
@@ -61,19 +57,14 @@ export function MobileMenu() {
       }, 300);
       return () => clearTimeout(timer);
     }
-  }, [mobileMenuOpen]);
-
-  const handleLogout = () => {
-    logout();
-    closeMobileMenu();
-  };
+  }, [mobileDrawerOpen]);
 
   const handleClose = () => {
-    closeMobileMenu();
+    closeMobileDrawer();
   };
 
   const handleNavigate = () => {
-    closeMobileMenu();
+    closeMobileDrawer();
   };
 
   // Prepare menu sections before render
@@ -137,15 +128,7 @@ export function MobileMenu() {
           {/* Scrollable Content */}
           <div className="flex-1 overflow-y-auto p-4 space-y-6">
             {/* User Menu Card */}
-            <MobileMenuUserCard
-              isAuthenticated={isAuthenticated}
-              user={user}
-              dashboardPath={publicLayout.userMenu.dashboardPath}
-              profilePath={publicLayout.userMenu.profilePath}
-              authPath={routes.auth}
-              onLogout={handleLogout}
-              onNavigate={handleNavigate}
-            />
+            <UserMenu variant="mobile" onNavigate={handleNavigate} />
 
             {/* Navigation Sections */}
             <div className="space-y-6">

package/src/layouts/AppLayout/layouts/PublicLayout/components/Navigation.tsx

@@ -20,10 +20,9 @@ import { ThemeToggle } from '@djangocfg/ui/theme';
 import { cn } from '@djangocfg/ui/lib';
 import { useIsMobile } from '@djangocfg/ui/hooks';
 import { useAppContext } from '../../../context';
-import { useAuth } from '../../../../../auth';
 import { useNavigation } from '../../../hooks';
-import { DesktopUserMenu } from './DesktopUserMenu';
-import { MobileMenu } from './MobileMenu';
+import { UserMenu } from '../../../components';
+import { MobileDrawer } from './MobileDrawer';
 
 /**
  * Navigation Component
@@ -38,8 +37,7 @@ import { MobileMenu } from './MobileMenu';
  * All data from context - zero prop drilling!
  */
 export function Navigation() {
-  const { config, toggleMobileMenu } = useAppContext();
-  const { user, isAuthenticated, logout } = useAuth();
+  const { config, toggleMobileDrawer } = useAppContext();
   const { isActive } = useNavigation();
   const isMobile = useIsMobile();
   const [openDropdown, setOpenDropdown] = React.useState<string | null>(null);
@@ -147,14 +145,14 @@ export function Navigation() {
           {!isMobile && (
           <div className="flex items-center gap-2">
             <ThemeToggle />
-            <DesktopUserMenu />
+            <UserMenu variant="desktop" />
           </div>
           )}
 
           {/* Mobile Menu Button - Only visible on mobile */}
           {isMobile && (
           <button
-            onClick={toggleMobileMenu}
+            onClick={toggleMobileDrawer}
             className="p-3 rounded-sm border shadow-sm transition-all duration-200 bg-card/50 hover:bg-card border-border/50 hover:border-primary/50 text-foreground hover:text-primary"
             aria-label="Toggle mobile menu"
           >
@@ -164,8 +162,8 @@ export function Navigation() {
         </div>
       </div>
 
-      {/* Mobile Menu Drawer */}
-      <MobileMenu />
+      {/* Mobile Drawer */}
+      <MobileDrawer />
     </nav>
   );
 }

package/src/layouts/ProfileLayout/ProfileLayout.tsx

@@ -22,13 +22,15 @@ interface ProfileLayoutProps {
   title?: string;
   description?: string;
   showMemberSince?: boolean;
+  showLastLogin?: boolean;
 }
 
 const ProfileContent = ({
   onUnauthenticated,
   title = 'Profile Settings',
   description = 'Manage your account information and preferences',
-  showMemberSince = true
+  showMemberSince = true,
+  showLastLogin = true
 }: ProfileLayoutProps) => {
   const { user, isLoading } = useAuth();
 
@@ -83,11 +85,18 @@ const ProfileContent = ({
             <CardTitle className="text-xl">
               {user?.display_username || user?.email}
             </CardTitle>
-            {showMemberSince && user?.date_joined && (
-              <CardDescription className="text-muted-foreground">
-                Member since {formatDate(user.date_joined)}
-              </CardDescription>
-            )}
+            <div className="space-y-1">
+              {showMemberSince && user?.date_joined && (
+                <CardDescription className="text-muted-foreground">
+                  Member since {formatDate(user.date_joined)}
+                </CardDescription>
+              )}
+              {showLastLogin && user?.last_login && (
+                <CardDescription className="text-muted-foreground text-sm">
+                  Last login: {formatDate(user.last_login)}
+                </CardDescription>
+              )}
+            </div>
           </CardHeader>
 
           <CardContent className="space-y-6">

package/src/layouts/AppLayout/layouts/PublicLayout/components/DesktopUserMenu.tsx

@@ -1,136 +0,0 @@
-/**
- * Desktop User Menu
- *
- * User dropdown menu for desktop navigation
- * Refactored from _old/MainLayout - uses context only!
- */
-
-'use client';
-
-import React from 'react';
-import { useRouter } from 'next/router';
-import { ChevronDown, LayoutDashboard, LogOut, User } from 'lucide-react';
-import { ButtonLink } from '@djangocfg/ui/components';
-import { useAppContext } from '../../../context';
-import { useAuth } from '../../../../../auth';
-
-/**
- * Desktop User Menu Component
- *
- * Features:
- * - Sign in button for guests
- * - Dashboard link for authenticated users (if not on dashboard)
- * - User dropdown with email and profile link
- * - Logout button
- *
- * All data from context!
- */
-export function DesktopUserMenu() {
-  const router = useRouter();
-  const { config, userMenuOpen, toggleUserMenu, closeUserMenu } = useAppContext();
-  const { user, isAuthenticated, logout } = useAuth();
-
-  const { routes, publicLayout } = config;
-
-  const handleLogout = () => {
-    logout();
-    closeUserMenu();
-  };
-
-  const isDashboard = publicLayout.userMenu.dashboardPath
-    ? router.pathname.includes(publicLayout.userMenu.dashboardPath)
-    : false;
-
-  return (
-    <div className="flex items-center gap-3">
-      {/* Authenticated user */}
-      {isAuthenticated ? (
-        <div className="flex items-center gap-3">
-          {/* Dashboard button (only if not on dashboard) */}
-          {publicLayout.userMenu.dashboardPath && !isDashboard && (
-            <ButtonLink
-              href={publicLayout.userMenu.dashboardPath}
-              variant="default"
-              size="sm"
-            >
-              <LayoutDashboard className="size-4 mr-2" />
-              Dashboard
-            </ButtonLink>
-          )}
-
-          {/* User Dropdown */}
-          <div className="relative">
-            <button
-              className="flex items-center gap-2 px-3 py-2 rounded-sm text-sm font-medium transition-colors text-foreground hover:text-primary hover:bg-accent/50"
-              onClick={toggleUserMenu}
-              aria-haspopup="true"
-              aria-expanded={userMenuOpen}
-            >
-              <User className="size-4" />
-              <span className="max-w-[120px] truncate">{user?.email}</span>
-              <ChevronDown
-                className={`size-4 transition-transform ${
-                  userMenuOpen ? 'rotate-180' : ''
-                }`}
-              />
-            </button>
-
-            {userMenuOpen && (
-              <>
-                {/* Backdrop */}
-                <div
-                  className="fixed inset-0 z-[9995]"
-                  onClick={closeUserMenu}
-                  aria-hidden="true"
-                />
-                {/* Dropdown */}
-                <div
-                  className="absolute top-full right-0 mt-2 w-48 rounded-sm shadow-sm backdrop-blur-xl z-[9996] bg-popover border border-border"
-                  role="menu"
-                  aria-label="User menu"
-                >
-                  <div className="p-2">
-                    {/* User info */}
-                    <div className="px-3 py-2 text-sm mb-2 border-b border-border">
-                      <div className="text-muted-foreground">Signed in as:</div>
-                      <div className="font-medium truncate text-popover-foreground mt-1">
-                        {user?.email}
-                      </div>
-                    </div>
-
-                    {/* Profile link */}
-                    <ButtonLink
-                      href={publicLayout.userMenu.profilePath}
-                      variant="ghost"
-                      size="sm"
-                      className="w-full justify-start"
-                      onClick={closeUserMenu}
-                    >
-                      <User className="size-4 mr-2" />
-                      Profile
-                    </ButtonLink>
-
-                    {/* Logout button */}
-                    <button
-                      onClick={handleLogout}
-                      className="w-full flex items-center gap-2 px-3 py-2 text-sm rounded-sm transition-colors text-destructive hover:bg-destructive/[0.1]"
-                    >
-                      <LogOut className="size-4" />
-                      <span>Sign out</span>
-                    </button>
-                  </div>
-                </div>
-              </>
-            )}
-          </div>
-        </div>
-      ) : (
-        /* Guest - Sign in button */
-        <ButtonLink href={routes.auth} variant="default" size="sm" className="h-9 gap-1.5">
-          <User className="w-4 h-4" />
-          Sign In
-        </ButtonLink>
-      )}
-    </div>
-  );
-}

package/src/layouts/AppLayout/layouts/PublicLayout/components/MobileMenuUserCard.tsx

@@ -1,150 +0,0 @@
-/**
- * Mobile Menu User Card Component
- *
- * Displays user information and action buttons in mobile menu
- * - Authenticated: shows user info with dashboard, profile, and logout
- * - Guest: shows welcome message with sign in button
- */
-
-'use client';
-
-import React from 'react';
-import { Crown, LogOut, Settings, User } from 'lucide-react';
-import { Button, ButtonLink, Card, CardContent } from '@djangocfg/ui/components';
-import { ThemeToggle } from '@djangocfg/ui/theme';
-
-interface MobileMenuUserCardProps {
-  isAuthenticated: boolean;
-  user?: {
-    email?: string;
-    avatar?: string;
-  } | null;
-  dashboardPath?: string;
-  profilePath: string;
-  authPath: string;
-  onLogout: () => void;
-  onNavigate: () => void;
-}
-
-export function MobileMenuUserCard({
-  isAuthenticated,
-  user,
-  dashboardPath,
-  profilePath,
-  authPath,
-  onLogout,
-  onNavigate,
-}: MobileMenuUserCardProps) {
-  if (isAuthenticated) {
-    return (
-      <Card className="border-primary/20 shadow-lg !bg-accent/50">
-        <CardContent className="p-4">
-          {/* User Info Header */}
-          <div className="flex items-center gap-3 mb-4 p-3 rounded-sm border border-border bg-accent/70">
-            <div className="w-10 h-10 rounded-full flex items-center justify-center bg-primary flex-shrink-0 overflow-hidden relative">
-              {user?.avatar ? (
-                <img
-                  src={user.avatar}
-                  alt={user?.email || 'User'}
-                  className="w-10 h-10 rounded-full object-cover"
-                />
-              ) : (
-                <User className="w-5 h-5 text-primary-foreground" />
-              )}
-              {/* Active indicator */}
-              <div className="absolute -bottom-0.5 -right-0.5 size-3 rounded-full bg-green-500 border-2 border-background" />
-            </div>
-            <div className="flex-1 min-w-0">
-              <p className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
-                Signed in as
-              </p>
-              <p className="text-sm font-semibold truncate text-foreground">
-                {user?.email}
-              </p>
-            </div>
-          </div>
-
-          {/* Action Buttons */}
-          <div className="space-y-3">
-            {/* Dashboard link */}
-            {dashboardPath && (
-              <ButtonLink
-                href={dashboardPath}
-                variant="default"
-                size="sm"
-                className="w-full h-9"
-                onClick={onNavigate}
-              >
-                <Crown className="w-4 h-4 mr-2" />
-                Dashboard
-              </ButtonLink>
-            )}
-
-            {/* Quick Actions - Icons only */}
-            <div className="flex items-center justify-center gap-2 pt-3 mt-1 border-t border-border/30">
-              {/* Profile Settings */}
-              <ButtonLink
-                href={profilePath}
-                variant="ghost"
-                size="icon"
-                className="h-9 w-9"
-                onClick={onNavigate}
-                aria-label="Profile Settings"
-              >
-                <Settings className="h-5 w-5" />
-              </ButtonLink>
-
-              {/* Theme Toggle */}
-              <ThemeToggle />
-
-              {/* Sign Out */}
-              <Button
-                onClick={onLogout}
-                variant="ghost"
-                size="icon"
-                className="h-9 w-9 text-destructive hover:bg-destructive/10 hover:text-destructive"
-                aria-label="Sign Out"
-              >
-                <LogOut className="h-5 w-5" />
-              </Button>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-    );
-  }
-
-  // Guest Card
-  return (
-    <Card className="border-border !bg-accent/50">
-      <CardContent className="p-4">
-        <div className="text-center space-y-4">
-          <div className="w-12 h-12 rounded-full flex items-center justify-center mx-auto bg-muted">
-            <User className="w-6 h-6 text-muted-foreground" />
-          </div>
-          <div>
-            <p className="text-sm font-medium mb-1 text-foreground">Welcome!</p>
-            <p className="text-xs text-muted-foreground">
-              Sign in to access your dashboard
-            </p>
-          </div>
-          <ButtonLink
-            href={authPath}
-            variant="default"
-            size="default"
-            className="w-full"
-            onClick={onNavigate}
-          >
-            <User className="w-5 h-5 mr-2" />
-            Sign In
-          </ButtonLink>
-
-          {/* Theme toggle */}
-          <div className="flex justify-center pt-2 border-t border-border/30">
-            <ThemeToggle />
-          </div>
-        </div>
-      </CardContent>
-    </Card>
-  );
-}