@djangocfg/layouts 2.1.267 → 2.1.270

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.267",
+  "version": "2.1.270",
   "description": "Simple, straightforward layout components for Next.js - import and use with props",
   "keywords": [
     "layouts",
@@ -74,14 +74,14 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.267",
-    "@djangocfg/centrifugo": "^2.1.267",
-    "@djangocfg/debuger": "^2.1.267",
-    "@djangocfg/i18n": "^2.1.267",
-    "@djangocfg/monitor": "^2.1.267",
-    "@djangocfg/ui-core": "^2.1.267",
-    "@djangocfg/ui-nextjs": "^2.1.267",
-    "@djangocfg/ui-tools": "^2.1.267",
+    "@djangocfg/api": "^2.1.270",
+    "@djangocfg/centrifugo": "^2.1.270",
+    "@djangocfg/debuger": "^2.1.270",
+    "@djangocfg/i18n": "^2.1.270",
+    "@djangocfg/monitor": "^2.1.270",
+    "@djangocfg/ui-core": "^2.1.270",
+    "@djangocfg/ui-nextjs": "^2.1.270",
+    "@djangocfg/ui-tools": "^2.1.270",
     "@hookform/resolvers": "^5.2.2",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
@@ -110,15 +110,15 @@
     "uuid": "^11.1.0"
   },
   "devDependencies": {
-    "@djangocfg/api": "^2.1.267",
-    "@djangocfg/centrifugo": "^2.1.267",
-    "@djangocfg/debuger": "^2.1.267",
-    "@djangocfg/i18n": "^2.1.267",
-    "@djangocfg/monitor": "^2.1.267",
-    "@djangocfg/typescript-config": "^2.1.267",
-    "@djangocfg/ui-core": "^2.1.267",
-    "@djangocfg/ui-nextjs": "^2.1.267",
-    "@djangocfg/ui-tools": "^2.1.267",
+    "@djangocfg/api": "^2.1.270",
+    "@djangocfg/centrifugo": "^2.1.270",
+    "@djangocfg/debuger": "^2.1.270",
+    "@djangocfg/i18n": "^2.1.270",
+    "@djangocfg/monitor": "^2.1.270",
+    "@djangocfg/typescript-config": "^2.1.270",
+    "@djangocfg/ui-core": "^2.1.270",
+    "@djangocfg/ui-nextjs": "^2.1.270",
+    "@djangocfg/ui-tools": "^2.1.270",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

package/src/layouts/AuthLayout/components/steps/SetupStep/SetupQRCode.tsx

@@ -81,7 +81,7 @@ export const SetupQRCode: React.FC<SetupQRCodeProps> = ({
           </div>
         </div>
 
-        <Collapsible>
+        <Collapsible className="auth-collapsible-centered">
           <CollapsibleTrigger asChild>
             <AuthLink>{content.manualEntry}</AuthLink>
           </CollapsibleTrigger>

package/src/layouts/AuthLayout/styles/auth.css

@@ -509,6 +509,13 @@
   box-shadow: 0 2px 12px hsl(0 0% 0% / 0.1);
 }
 
+/* Collapsible with centered trigger (e.g. "Can't scan? Enter manually") */
+.auth-collapsible-centered {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
 /* ===== SECRET CODE ===== */
 
 .auth-secret-container {

package/src/layouts/ProfileLayout/components/TwoFactorSection.tsx

@@ -215,7 +215,7 @@ export const TwoFactorSection: React.FC = () => {
             Scan the QR code with your authenticator app (Google Authenticator, Authy, etc.)
           </CardDescription>
         </CardHeader>
-        <CardContent>
+        <CardContent className="flex justify-center">
           <SetupStepStandalone
             onComplete={handleSetupDone}
             onSkip={() => setView('status')}

package/src/layouts/_components/UserAvatar.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import React from 'react';
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from '@djangocfg/ui-core/components';
+import { cn } from '@djangocfg/ui-core/lib';
+
+export interface UserAvatarProps {
+  src?: string;
+  name: string;
+  /** 'sm' = 32px (navbar), 'md' = 44px (drawer header). Defaults to 'sm'. */
+  size?: 'sm' | 'md';
+  className?: string;
+}
+
+const SIZE = {
+  sm: { avatar: 'h-8 w-8', text: 'text-sm' },
+  md: { avatar: 'h-11 w-11', text: 'text-base' },
+} as const;
+
+export function UserAvatar({ src, name, size = 'sm', className }: UserAvatarProps) {
+  const initial = name.charAt(0).toUpperCase();
+  const s = SIZE[size];
+
+  return (
+    <Avatar
+      className={cn(
+        s.avatar,
+        'ring-2 ring-border/60 hover:ring-primary/70 transition-all shrink-0',
+        className,
+      )}
+    >
+      <AvatarImage src={src} alt={name} />
+      <AvatarFallback
+        className={cn(
+          'bg-primary text-primary-foreground font-semibold',
+          s.text,
+        )}
+      >
+        {initial}
+      </AvatarFallback>
+    </Avatar>
+  );
+}

package/src/layouts/_components/UserMenu.tsx

@@ -39,9 +39,6 @@ import { useAppT } from '@djangocfg/i18n';
 
 import { useLogout } from '../../hooks';
 import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
   Button,
   DropdownMenu,
   DropdownMenuContent,
@@ -57,6 +54,7 @@ import {
 } from '@djangocfg/ui-core/components';
 
 import { LOCALE_LABELS } from './LocaleSwitcher';
+import { UserAvatar } from './UserAvatar';
 
 import type { UserMenuGroup, UserMenuLocaleConfig } from '../types';
 
@@ -163,13 +161,10 @@ export function UserMenu({
   if (variant === 'mobile') {
     return (
       <div className="space-y-3">
-        <div className="flex items-center gap-3 px-4 py-3">
-          <Avatar className="h-10 w-10">
-            <AvatarImage src={userAvatar} alt={displayName} />
-            <AvatarFallback>{userInitial}</AvatarFallback>
-          </Avatar>
+        <div className="flex items-center gap-3 px-4 py-3 rounded-xl bg-accent/30">
+          <UserAvatar src={userAvatar} name={displayName} size="md" />
           <div className="flex-1 min-w-0">
-            <p className="text-sm font-medium text-foreground truncate">
+            <p className="text-sm font-semibold text-foreground truncate">
               {displayName}
             </p>
             <p className="text-xs text-muted-foreground truncate">
@@ -269,11 +264,8 @@ export function UserMenu({
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="ghost" size="icon" className="rounded-full">
-          <Avatar className="h-8 w-8">
-            <AvatarImage src={userAvatar} alt={displayName} />
-            <AvatarFallback>{userInitial}</AvatarFallback>
-          </Avatar>
+        <Button variant="ghost" size="icon" className="rounded-full p-0">
+          <UserAvatar src={userAvatar} name={displayName} size="sm" />
           <span className="sr-only">{labels.userMenu}</span>
         </Button>
       </DropdownMenuTrigger>

package/src/layouts/_components/index.ts

@@ -8,3 +8,6 @@ export type { LocaleSwitcherProps } from './LocaleSwitcher';
 export { UserMenu } from './UserMenu';
 export type { UserMenuProps } from './UserMenu';
 
+export { UserAvatar } from './UserAvatar';
+export type { UserAvatarProps } from './UserAvatar';
+