@djangocfg/layouts 2.1.449 → 2.1.452

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.449",
+  "version": "2.1.452",
   "description": "Simple, straightforward layout components for Next.js - import and use with props",
   "keywords": [
     "layouts",
@@ -89,12 +89,12 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.449",
-    "@djangocfg/centrifugo": "^2.1.449",
-    "@djangocfg/debuger": "^2.1.449",
-    "@djangocfg/i18n": "^2.1.449",
-    "@djangocfg/monitor": "^2.1.449",
-    "@djangocfg/ui-core": "^2.1.449",
+    "@djangocfg/api": "^2.1.452",
+    "@djangocfg/centrifugo": "^2.1.452",
+    "@djangocfg/debuger": "^2.1.452",
+    "@djangocfg/i18n": "^2.1.452",
+    "@djangocfg/monitor": "^2.1.452",
+    "@djangocfg/ui-core": "^2.1.452",
     "@hookform/resolvers": "^5.2.2",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
@@ -125,14 +125,14 @@
     "uuid": "^11.1.0"
   },
   "devDependencies": {
-    "@djangocfg/api": "^2.1.449",
-    "@djangocfg/centrifugo": "^2.1.449",
-    "@djangocfg/debuger": "^2.1.449",
-    "@djangocfg/i18n": "^2.1.449",
-    "@djangocfg/monitor": "^2.1.449",
-    "@djangocfg/typescript-config": "^2.1.449",
-    "@djangocfg/ui-core": "^2.1.449",
-    "@djangocfg/ui-tools": "^2.1.449",
+    "@djangocfg/api": "^2.1.452",
+    "@djangocfg/centrifugo": "^2.1.452",
+    "@djangocfg/debuger": "^2.1.452",
+    "@djangocfg/i18n": "^2.1.452",
+    "@djangocfg/monitor": "^2.1.452",
+    "@djangocfg/typescript-config": "^2.1.452",
+    "@djangocfg/ui-core": "^2.1.452",
+    "@djangocfg/ui-tools": "^2.1.452",
     "@types/node": "^25.2.3",
     "@types/react": "^19.2.15",
     "@types/react-dom": "^19.2.3",

package/src/layouts/PrivateLayout/hooks/useAuthGuard.ts

@@ -9,11 +9,23 @@
 import { useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
 
-import { useAuth } from '@djangocfg/api/auth';
+import {
+  useAuth,
+  resolveGuardIsLoading,
+  resolveGuardIsAuthenticated,
+  shouldRedirectToAuth,
+} from '@djangocfg/api/auth';
 
 interface UseAuthGuardOptions {
   requireAuth?: boolean;
   authPath?: string;
+  /**
+   * Safety net: if auth is still "loading" this many ms after mount, stop
+   * waiting and let the guard decide from whatever token state we have. Prevents
+   * an endless preloader if AuthContext initialization ever wedges (a hung
+   * request, a CSP-swallowed response, an unresolved promise). Default 8s.
+   */
+  loadingTimeoutMs?: number;
 }
 
 interface UseAuthGuardResult {
@@ -28,6 +40,7 @@ interface UseAuthGuardResult {
 export function useAuthGuard({
   requireAuth = true,
   authPath = '/auth',
+  loadingTimeoutMs = 8000,
 }: UseAuthGuardOptions): UseAuthGuardResult {
   const { isAuthenticated, isLoading: authLoading, saveRedirectUrl } = useAuth();
   const router = useRouter();
@@ -41,23 +54,46 @@ export function useAuthGuard({
   const [mounted, setMounted] = useState(false);
   useEffect(() => setMounted(true), []);
 
+  // Safety-net timeout: force auth to be considered "resolved" if it hasn't
+  // settled within loadingTimeoutMs, so the guard can act (render or redirect)
+  // instead of spinning forever. Only armed while actually loading.
+  const [authTimedOut, setAuthTimedOut] = useState(false);
   useEffect(() => {
-    if (!mounted || !requireAuth) return;
-    if (!authLoading && !isAuthenticated && !isRedirecting) {
+    if (!mounted || !authLoading || authTimedOut) return;
+    const t = setTimeout(() => setAuthTimedOut(true), loadingTimeoutMs);
+    return () => clearTimeout(t);
+  }, [mounted, authLoading, authTimedOut, loadingTimeoutMs]);
+
+  // Guard state derives from a single pure resolver (see @djangocfg/api/auth
+  // utils/guard) so the "spinner vs redirect vs render" decision is unit-tested
+  // in isolation and can't silently regress into the "stuck on Authenticating…"
+  // state where a resolved-but-unauthenticated session never redirects.
+  // `authLoading` is forced false once the safety-net timeout fires.
+  const effectiveAuthLoading = authLoading && !authTimedOut;
+  const guardState = {
+    mounted,
+    requireAuth,
+    authLoading: effectiveAuthLoading,
+    isRedirecting,
+    isAuthenticated,
+  };
+
+  useEffect(() => {
+    if (shouldRedirectToAuth(guardState)) {
       const currentUrl = window.location.pathname + window.location.search;
       saveRedirectUrl(currentUrl);
       setIsRedirecting(true);
       router.push(authPath);
     }
-  }, [mounted, requireAuth, isAuthenticated, authLoading, isRedirecting, router, saveRedirectUrl, authPath]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [mounted, requireAuth, isAuthenticated, effectiveAuthLoading, isRedirecting, router, saveRedirectUrl, authPath]);
 
-  const isLoading =
-    !mounted || (requireAuth && (authLoading || isRedirecting || !isAuthenticated));
+  const isLoading = resolveGuardIsLoading(guardState);
   const loadingText = isRedirecting ? 'Redirecting to login...' : 'Authenticating...';
 
   return {
     isLoading,
-    isAuthenticated: !requireAuth || isAuthenticated,
+    isAuthenticated: resolveGuardIsAuthenticated(guardState),
     loadingText,
   };
 }

package/src/layouts/SettingsLayout/components/AvatarSection.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { Check, Upload, X } from 'lucide-react';
-import React, { useState } from 'react';
+import { Loader2, Upload } from 'lucide-react';
+import React, { useRef, useState } from 'react';
 import { toast } from '@djangocfg/ui-core/hooks';
 
 import { useAuth } from '@djangocfg/api/auth';
@@ -9,144 +9,124 @@ import { Avatar, AvatarFallback, Button } from '@djangocfg/ui-core/components';
 
 import { profileLogger } from '../../../utils/logger';
 
+const MAX_AVATAR_BYTES = 5 * 1024 * 1024;
+
+/**
+ * Avatar header — a centered profile identity block that sits *above* the
+ * settings rows, not inside one. Avatar isn't a form field like "First name";
+ * it's the user's identity, so it gets the canonical Apple-ID / Slack / Linear
+ * treatment: large centered avatar → name/email → a single "Change avatar"
+ * action.
+ *
+ * UX: the avatar is a preview only; "Change avatar" opens the picker and
+ * uploads immediately (no Save/Cancel step). The preview is optimistic — shown
+ * instantly from a local object URL — and rolls back if the upload fails.
+ * The whole avatar is also clickable for a faster path.
+ */
 export const AvatarSection = () => {
   const { user, uploadAvatar } = useAuth();
-  const [avatarFile, setAvatarFile] = useState<File | null>(null);
-  const [avatarPreview, setAvatarPreview] = useState<string | null>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
   const [isUploading, setIsUploading] = useState(false);
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
 
-  const getInitials = (name: string) => {
-    if (!name) return 'UN';
-    return name
-      .split(' ')
-      .map((word) => word[0])
-      .join('')
-      .toUpperCase()
-      .slice(0, 2);
-  };
+  const handlePick = () => inputRef.current?.click();
 
-  const formatFileSize = (bytes: number) => {
-    return (bytes / 1024 / 1024).toFixed(2);
-  };
-
-  const handleAvatarChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0];
-    if (file) {
-      if (!file.type.startsWith('image/')) {
-        toast.error('Please select an image file');
-        return;
-      }
-      if (file.size > 5 * 1024 * 1024) {
-        toast.error('File size must be less than 5MB');
-        return;
-      }
-      setAvatarFile(file);
-      const reader = new FileReader();
-      reader.onload = (e) => setAvatarPreview(e.target?.result as string);
-      reader.readAsDataURL(file);
-    } else {
-      setAvatarFile(null);
-      setAvatarPreview(null);
+    // Reset so picking the same file twice still fires onChange.
+    event.target.value = '';
+    if (!file) return;
+
+    if (!file.type.startsWith('image/')) {
+      toast.error('Please select an image file');
+      return;
+    }
+    if (file.size > MAX_AVATAR_BYTES) {
+      toast.error('File size must be less than 5MB');
+      return;
     }
-  };
 
-  const handleAvatarUpload = async () => {
-    if (!avatarFile) return;
+    const objectUrl = URL.createObjectURL(file);
+    setPreviewUrl(objectUrl);
     setIsUploading(true);
     try {
-      await uploadAvatar(avatarFile);
-      toast.success('Avatar updated successfully');
-      setAvatarFile(null);
-      setAvatarPreview(null);
+      await uploadAvatar(file);
+      toast.success('Avatar updated');
     } catch (error) {
+      setPreviewUrl(null); // roll back optimistic preview
       toast.error('Failed to upload avatar');
       profileLogger.error('Avatar upload error:', error);
     } finally {
       setIsUploading(false);
+      URL.revokeObjectURL(objectUrl);
+      setPreviewUrl(null); // fall back to the fresh server user.avatar
     }
   };
 
-  const resetAvatar = () => {
-    setAvatarFile(null);
-    setAvatarPreview(null);
-  };
+  const displayUrl = previewUrl ?? user?.avatar ?? null;
+  const displayName = user?.display_username || user?.email || '';
+  // Server computes `initials` for the avatar fallback — use it verbatim
+  // instead of re-deriving (keeps the letters consistent with the backend).
+  const initials = user?.initials || 'UN';
 
   return (
-    <div className="flex flex-col items-center flex-shrink-0">
-      <div className="relative group">
-        <Avatar
-          className="w-14 h-14 md:w-20 md:h-20 aspect-square rounded-full overflow-hidden ring-1 ring-foreground/20 transition-transform group-hover:scale-105"
-        >
-          {avatarPreview ? (
-            <img
-              src={avatarPreview}
-              alt="Avatar preview"
-              className="w-full h-full object-cover"
-              style={{ borderRadius: '50%' }}
-            />
-          ) : user?.avatar ? (
-            <img
-              src={user.avatar}
-              alt="User avatar"
-              className="w-full h-full object-cover"
-              style={{ borderRadius: '50%' }}
-            />
+    <div className="flex flex-col items-center gap-3 py-2">
+      <button
+        type="button"
+        onClick={handlePick}
+        disabled={isUploading}
+        className="group relative rounded-full focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+        aria-label="Change avatar"
+      >
+        <Avatar className="h-16 w-16 overflow-hidden rounded-full ring-1 ring-foreground/10 transition-transform group-hover:scale-105 md:h-20 md:w-20">
+          {displayUrl ? (
+            <img src={displayUrl} alt="Avatar" className="h-full w-full object-cover" />
           ) : (
-            <AvatarFallback className="text-2xl font-semibold bg-gradient-to-br from-primary to-primary/80 text-primary-foreground">
-              {getInitials(user?.display_username || user?.email || '')}
+            <AvatarFallback className="bg-gradient-to-br from-primary to-primary/80 text-xl font-semibold text-primary-foreground">
+              {initials}
             </AvatarFallback>
           )}
         </Avatar>
 
-        {/* Upload overlay - appears on hover */}
-        <label className="absolute inset-0 rounded-full bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center cursor-pointer">
-          <div className="p-3 rounded-full bg-primary/80 text-primary-foreground hover:bg-primary transition-colors">
-            <Upload className="w-5 h-5" />
-          </div>
-          <input
-            type="file"
-            accept="image/*"
-            onChange={handleAvatarChange}
-            className="hidden"
-          />
-        </label>
-
-        {/* Action buttons - appear when file is selected */}
-        {avatarFile && (
-          <div className="absolute -bottom-2 left-1/2 transform -translate-x-1/2 flex items-center space-x-1 bg-card border border-border rounded-full shadow-lg p-1">
-            <Button
-              size="sm"
-              onClick={handleAvatarUpload}
-              disabled={isUploading}
-              className="h-7 px-3 rounded-full"
-            >
-              {isUploading ? (
-                <div className="animate-spin rounded-full h-3 w-3 border-b-2 border-white" />
-              ) : (
-                <Check className="w-3 h-3" />
-              )}
-            </Button>
-            <Button
-              size="sm"
-              variant="outline"
-              onClick={resetAvatar}
-              className="h-7 w-7 rounded-full p-0"
-            >
-              <X className="w-3 h-3" />
-            </Button>
-          </div>
-        )}
-      </div>
+        {/* Hover / uploading overlay */}
+        <span className="absolute inset-0 flex items-center justify-center rounded-full bg-black/45 text-white opacity-0 transition-opacity group-hover:opacity-100 data-[busy=true]:opacity-100"
+          data-busy={isUploading}
+        >
+          {isUploading ? (
+            <Loader2 className="h-5 w-5 animate-spin" />
+          ) : (
+            <Upload className="h-5 w-5" />
+          )}
+        </span>
+      </button>
 
-      {/* File info - shows when file is selected */}
-      {avatarFile && (
-        <div className="mt-3 text-center">
-          <p className="text-xs text-muted-foreground">
-            {avatarFile.name} ({formatFileSize(avatarFile.size)} MB)
-          </p>
+      {displayName && (
+        <div className="text-center">
+          <p className="text-sm font-medium text-foreground">{displayName}</p>
+          {user?.email && user.display_username && (
+            <p className="text-xs text-muted-foreground">{user.email}</p>
+          )}
         </div>
       )}
+
+      <Button
+        type="button"
+        variant="outline"
+        size="sm"
+        onClick={handlePick}
+        disabled={isUploading}
+        className="h-8"
+      >
+        {isUploading ? 'Uploading…' : 'Change avatar'}
+      </Button>
+
+      <input
+        ref={inputRef}
+        type="file"
+        accept="image/*"
+        onChange={handleFileChange}
+        className="hidden"
+      />
     </div>
   );
 };
-

package/src/layouts/SettingsLayout/sections/AccountSection.tsx

@@ -33,16 +33,11 @@ export const AccountSection: React.FC<AccountSectionProps> = ({
 
   return (
     <div className="mx-auto max-w-2xl space-y-7">
+      {/* Avatar is the profile's identity header — centered above the fields,
+          not a form row. */}
+      <AvatarSection />
+
       <SettingsBlock title={labels.personalInfo}>
-        <SettingRow label="Avatar">
-          {/* AvatarSection ships a 56–80px avatar; constrain to ~40px without
-              forking it (the fixed box drives row height, inner scale shrinks). */}
-          <div className="flex h-10 w-10 items-center justify-center">
-            <div className="origin-center scale-[0.5]">
-              <AvatarSection />
-            </div>
-          </div>
-        </SettingRow>
         <SettingRow
           label={labels.firstName}
           value={user.first_name || ''}