@djangocfg/layouts 2.1.226 → 2.1.228

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

@@ -1,167 +1,128 @@
 'use client';
 
-import { AlertTriangle, Loader2, Trash2 } from 'lucide-react';
-import React, { useState } from 'react';
+import { AlertTriangle, ChevronLeft, Loader2, Trash2 } from 'lucide-react';
+import React, { useMemo, useState } from 'react';
 
 import { useAuth, useDeleteAccount } from '@djangocfg/api/auth';
-import {
-  Alert,
-  AlertDescription,
-  Button,
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  Input,
-} from '@djangocfg/ui-core/components';
-
-const CONFIRMATION_TEXT = 'DELETE';
-
-/**
- * Delete Account section for ProfileLayout.
- * Allows users to permanently delete their account.
- */
+import { useAppT } from '@djangocfg/i18n';
+import { Alert, AlertDescription, Button, Input } from '@djangocfg/ui-core/components';
+
+import { useProfileContext } from '../context';
+import { ActionButton } from './ActionButton';
+
+// ─── Entry point: single action row on main screen ───────────────────────────
+
 export const DeleteAccountSection: React.FC = () => {
-  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
-  const [confirmationInput, setConfirmationInput] = useState('');
+  const { setStep } = useProfileContext();
+  const t = useAppT();
+
+  return (
+    <ActionButton
+      icon={<Trash2 className="w-4 h-4 text-destructive" />}
+      label={<span className="text-destructive">{t('layouts.profilePage.deleteAccount')}</span>}
+      onClick={() => setStep('delete-account')}
+    />
+  );
+};
+
+// ─── Full delete screen ───────────────────────────────────────────────────────
+
+export const DeleteAccountScreen: React.FC = () => {
+  const { back } = useProfileContext();
   const { logout } = useAuth();
+  const [confirmationInput, setConfirmationInput] = useState('');
+  const t = useAppT();
 
-  const {
-    isLoading,
-    error,
-    deleteAccount,
-    clearError,
-  } = useDeleteAccount();
+  const { isLoading, error, deleteAccount, clearError } = useDeleteAccount();
 
-  const handleDeleteClick = () => {
-    setShowDeleteDialog(true);
-    setConfirmationInput('');
-    clearError();
-  };
+  const confirmationWord = t('layouts.profilePage.confirmationWord');
+  const isValid = confirmationInput.toUpperCase() === confirmationWord.toUpperCase();
+
+  const labels = useMemo(() => ({
+    back: t('layouts.navigation.back'),
+    title: t('layouts.profilePage.deleteAccountTitle'),
+    desc: t('layouts.profilePage.deleteAccountDesc'),
+    typeToConfirm: t('layouts.profilePage.typeToConfirm').replace('{word}', confirmationWord),
+    deleting: t('layouts.profilePage.deleting'),
+    deleteAccount: t('layouts.profilePage.deleteAccount'),
+    cancel: t('layouts.profilePage.cancel'),
+  }), [t, confirmationWord]);
 
-  const handleDeleteConfirm = async () => {
+  const handleDelete = async () => {
+    clearError();
     const result = await deleteAccount();
-    if (result.success) {
-      setShowDeleteDialog(false);
-      // Perform logout after successful deletion (no confirmation needed since user already confirmed deletion)
-      logout();
-    }
+    if (result.success) logout();
   };
 
-  const handleDeleteCancel = () => {
-    setShowDeleteDialog(false);
-    setConfirmationInput('');
+  const handleBack = () => {
     clearError();
+    setConfirmationInput('');
+    back();
   };
 
-  const isConfirmationValid = confirmationInput.toUpperCase() === CONFIRMATION_TEXT;
-
   return (
-    <>
-      <Card className="bg-card/50 backdrop-blur-sm border-red-200 dark:border-red-800/50">
-        <CardHeader>
-          <CardTitle className="flex items-center gap-2 text-red-600 dark:text-red-400">
-            <Trash2 className="w-5 h-5" />
-            Delete Account
-          </CardTitle>
-          <CardDescription>
-            Permanently delete your account and all associated data
-          </CardDescription>
-        </CardHeader>
-
-        <CardContent className="space-y-4">
-          <Alert variant="destructive" className="bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800">
-            <AlertTriangle className="w-4 h-4" />
-            <AlertDescription>
-              This action is irreversible. Your account will be deactivated and your personal data will be anonymized.
-            </AlertDescription>
+    <div className="container mx-auto px-4 py-12 max-w-md">
+      {/* Back */}
+      <button
+        type="button"
+        onClick={handleBack}
+        className="flex items-center gap-1 text-sm text-muted-foreground mb-8 hover:text-foreground transition-colors"
+      >
+        <ChevronLeft className="w-4 h-4" />
+        {labels.back}
+      </button>
+
+      {/* Header */}
+      <div className="flex items-center gap-3 mb-2">
+        <div className="w-10 h-10 rounded-full bg-destructive/10 flex items-center justify-center">
+          <AlertTriangle className="w-5 h-5 text-destructive" />
+        </div>
+        <h1 className="text-xl font-semibold">{labels.title}</h1>
+      </div>
+      <p className="text-sm text-muted-foreground mb-8">{labels.desc}</p>
+
+      {/* Confirmation */}
+      <div className="space-y-3">
+        {error && (
+          <Alert variant="destructive">
+            <AlertDescription>{error}</AlertDescription>
           </Alert>
-
-          <div className="flex items-center justify-between p-4 bg-muted/50 rounded-lg">
-            <div>
-              <p className="font-medium">Delete your account</p>
-              <p className="text-sm text-muted-foreground">
-                You will lose access to all your data and workspaces
-              </p>
-            </div>
-            <Button
-              variant="destructive"
-              onClick={handleDeleteClick}
-              disabled={isLoading}
-            >
-              Delete Account
-            </Button>
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Delete Account Dialog */}
-      <Dialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle className="flex items-center gap-2 text-red-600">
-              <AlertTriangle className="w-5 h-5" />
-              Delete Account
-            </DialogTitle>
-            <DialogDescription>
-              This action cannot be undone. This will permanently deactivate your account
-              and anonymize your personal data.
-            </DialogDescription>
-          </DialogHeader>
-
-          <div className="py-4 space-y-4">
-            {error && (
-              <Alert variant="destructive">
-                <AlertDescription>{error}</AlertDescription>
-              </Alert>
-            )}
-
-            <div className="space-y-2">
-              <p className="text-sm text-muted-foreground">
-                To confirm, type <span className="font-mono font-bold">{CONFIRMATION_TEXT}</span> below:
-              </p>
-              <Input
-                value={confirmationInput}
-                onChange={(e) => setConfirmationInput(e.target.value)}
-                placeholder={CONFIRMATION_TEXT}
-                disabled={isLoading}
-                autoComplete="off"
-              />
-            </div>
-          </div>
-
-          <DialogFooter>
-            <Button
-              variant="outline"
-              onClick={handleDeleteCancel}
-              disabled={isLoading}
-            >
-              Cancel
-            </Button>
-            <Button
-              variant="destructive"
-              onClick={handleDeleteConfirm}
-              disabled={isLoading || !isConfirmationValid}
-            >
-              {isLoading ? (
-                <>
-                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                  Deleting...
-                </>
-              ) : (
-                'Delete Account'
-              )}
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </>
+        )}
+
+        <p className="text-sm text-muted-foreground">{labels.typeToConfirm}</p>
+
+        <Input
+          value={confirmationInput}
+          onChange={(e) => setConfirmationInput(e.target.value)}
+          placeholder={confirmationWord}
+          disabled={isLoading}
+          autoFocus
+          autoComplete="off"
+          className="font-mono"
+        />
+
+        <Button
+          variant="destructive"
+          className="w-full"
+          onClick={handleDelete}
+          disabled={isLoading || !isValid}
+        >
+          {isLoading ? (
+            <><Loader2 className="mr-2 h-4 w-4 animate-spin" />{labels.deleting}</>
+          ) : (
+            labels.deleteAccount
+          )}
+        </Button>
+
+        <Button
+          variant="ghost"
+          className="w-full"
+          onClick={handleBack}
+          disabled={isLoading}
+        >
+          {labels.cancel}
+        </Button>
+      </div>
+    </div>
   );
 };

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

@@ -0,0 +1,119 @@
+'use client';
+
+import React, { useEffect, useMemo, useState } from 'react';
+
+import { useAppT } from '@djangocfg/i18n';
+import { Button, Input, PhoneInput } from '@djangocfg/ui-core/components';
+import { cn } from '@djangocfg/ui-core/lib';
+
+interface EditableFieldProps {
+  label: string;
+  value: string;
+  placeholder: string;
+  onSave: (value: string) => Promise<void>;
+  disabled?: boolean;
+  type?: 'text' | 'phone';
+}
+
+export const EditableField = ({
+  label,
+  value,
+  placeholder,
+  onSave,
+  disabled,
+  type = 'text',
+}: EditableFieldProps) => {
+  const t = useAppT();
+  const [isEditing, setIsEditing] = useState(false);
+  const [editValue, setEditValue] = useState(value);
+  const [isSaving, setIsSaving] = useState(false);
+
+  const labels = useMemo(() => ({
+    save: t('layouts.profilePage.save'),
+    saving: t('layouts.profilePage.saving'),
+    cancel: t('layouts.profilePage.cancel'),
+  }), [t]);
+
+  useEffect(() => {
+    setEditValue(value);
+  }, [value]);
+
+  const handleSave = async () => {
+    if (editValue === value) {
+      setIsEditing(false);
+      return;
+    }
+    setIsSaving(true);
+    try {
+      await onSave(editValue);
+      setIsEditing(false);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleCancel = () => {
+    setEditValue(value);
+    setIsEditing(false);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') handleSave();
+    else if (e.key === 'Escape') handleCancel();
+  };
+
+  if (isEditing) {
+    return (
+      <div className="py-4 border-b border-border/50 last:border-0">
+        <label className="block text-[13px] text-muted-foreground mb-1.5">{label}</label>
+        {type === 'phone' ? (
+          <div className="space-y-2">
+            <PhoneInput
+              value={editValue}
+              onChange={(val) => setEditValue(val ?? '')}
+              placeholder={placeholder}
+              disabled={isSaving}
+            />
+            <div className="flex gap-2">
+              <Button size="sm" onClick={handleSave} disabled={isSaving}>
+                {isSaving ? labels.saving : labels.save}
+              </Button>
+              <Button size="sm" variant="ghost" onClick={handleCancel} disabled={isSaving}>
+                {labels.cancel}
+              </Button>
+            </div>
+          </div>
+        ) : (
+          <Input
+            value={editValue}
+            onChange={(e) => setEditValue(e.target.value)}
+            onKeyDown={handleKeyDown}
+            onBlur={handleSave}
+            placeholder={placeholder}
+            autoFocus
+            disabled={isSaving}
+            className="h-9 text-[15px]"
+          />
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={() => !disabled && setIsEditing(true)}
+      disabled={disabled}
+      className={cn(
+        'w-full py-4 border-b border-border/50 last:border-0 text-left',
+        'transition-colors hover:bg-muted/30',
+        disabled && 'cursor-default hover:bg-transparent'
+      )}
+    >
+      <div className="text-[13px] text-muted-foreground mb-0.5">{label}</div>
+      <div className={cn('text-[15px]', value ? 'text-foreground' : 'text-muted-foreground/60')}>
+        {value || placeholder}
+      </div>
+    </button>
+  );
+};

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

@@ -0,0 +1,22 @@
+'use client';
+
+import React from 'react';
+
+import { cn } from '@djangocfg/ui-core/lib';
+
+interface SectionProps {
+  title?: string;
+  children: React.ReactNode;
+  className?: string;
+}
+
+export const Section = ({ title, children, className }: SectionProps) => (
+  <div className={cn('mb-10', className)}>
+    {title && (
+      <h2 className="text-[11px] font-medium text-muted-foreground uppercase tracking-wider mb-2 px-1">
+        {title}
+      </h2>
+    )}
+    <div className="bg-card rounded-xl px-4">{children}</div>
+  </div>
+);

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

@@ -1,5 +1,8 @@
+export { ActionButton } from './ActionButton';
 export { AvatarSection } from './AvatarSection';
+export { DeleteAccountSection, DeleteAccountScreen } from './DeleteAccountSection';
+export { EditableField } from './EditableField';
 export { ProfileForm } from './ProfileForm';
+export { Section } from './Section';
 export { TwoFactorSection } from './TwoFactorSection';
-export { DeleteAccountSection } from './DeleteAccountSection';
 

package/src/layouts/ProfileLayout/context.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import React, { createContext, useCallback, useContext, useState } from 'react';
+
+export type ProfileStep = 'main' | 'delete-account';
+
+interface ProfileContextValue {
+  step: ProfileStep;
+  setStep: (step: ProfileStep) => void;
+  back: () => void;
+}
+
+const ProfileContext = createContext<ProfileContextValue>({
+  step: 'main',
+  setStep: () => {},
+  back: () => {},
+});
+
+export const ProfileProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [step, setStep] = useState<ProfileStep>('main');
+
+  const back = useCallback(() => setStep('main'), []);
+
+  return (
+    <ProfileContext.Provider value={{ step, setStep, back }}>
+      {children}
+    </ProfileContext.Provider>
+  );
+};
+
+export const useProfileContext = () => useContext(ProfileContext);

package/src/layouts/PublicLayout/components/PublicMobileDrawer.tsx

@@ -11,7 +11,7 @@ import Link from 'next/link';
 import React, { useMemo } from 'react';
 
 import { useAuth } from '@djangocfg/api/auth';
-import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
+import { useAppT } from '@djangocfg/i18n';
 import {
     Drawer, DrawerClose, DrawerContent, DrawerHeader, DrawerTitle
 } from '@djangocfg/ui-core/components';
@@ -39,7 +39,7 @@ export function PublicMobileDrawer({
   userMenu,
 }: PublicMobileDrawerProps) {
   const { isAuthenticated: _isAuthenticated } = useAuth();
-  const t = useTypedT<I18nTranslations>();
+  const t = useAppT();
 
   const labels = useMemo(() => ({
     closeMenu: t('layouts.mobile.closeMenu'),

package/src/layouts/PublicLayout/components/PublicNavigation.tsx

@@ -11,7 +11,7 @@ import Link from 'next/link';
 import React, { useMemo } from 'react';
 
 import { useAuth } from '@djangocfg/api/auth';
-import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
+import { useAppT } from '@djangocfg/i18n';
 import { Button } from '@djangocfg/ui-core/components';
 // useIsMobile is used for conditional rendering
 import { useIsMobile } from '@djangocfg/ui-core/hooks';
@@ -45,7 +45,7 @@ export function PublicNavigation({
 }: PublicNavigationProps) {
   const { isAuthenticated: _isAuthenticated } = useAuth();
   const isMobile = useIsMobile();
-  const t = useTypedT<I18nTranslations>();
+  const t = useAppT();
 
   const toggleMobileLabel = useMemo(() => t('layouts.navigation.toggleMobile'), [t]);
 

package/src/layouts/_components/UserMenu.tsx

@@ -35,7 +35,7 @@ import Link from 'next/link';
 import React, { useMemo } from 'react';
 
 import { useAuth } from '@djangocfg/api/auth';
-import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
+import { useAppT } from '@djangocfg/i18n';
 
 import { useLogout } from '../../hooks';
 import {
@@ -63,7 +63,7 @@ export function UserMenu({
   const { user, isAuthenticated } = useAuth();
   const handleLogout = useLogout();
   const [mounted, setMounted] = React.useState(false);
-  const t = useTypedT<I18nTranslations>();
+  const t = useAppT();
 
   const labels = useMemo(() => ({
     signIn: t('layouts.profile.login'),

package/src/layouts/types/README.md

@@ -15,7 +15,6 @@ This module provides shared TypeScript types used across all layout components i
 - **`ErrorTrackingConfig`** - Error tracking settings
 - **`ErrorBoundaryConfig`** - Error boundary options
 - **`SWRConfigOptions`** - SWR data fetching configuration
-- **`McpChatConfig`** - MCP AI chat widget settings
 
 ### Layout Component Types
 
@@ -34,7 +33,6 @@ This module provides shared TypeScript types used across all layout components i
 ```typescript
 import type {
   BaseLayoutProps,
-  McpChatConfig,
   ThemeConfig,
   FooterConfig,
 } from '@djangocfg/layouts';
@@ -50,24 +48,6 @@ interface MyCustomLayoutProps extends BaseLayoutProps {
 }
 ```
 
-### MCP Chat Configuration
-
-```typescript
-import { AppLayout } from '@djangocfg/layouts';
-
-<AppLayout
-  mcpChat={{
-    enabled: true,
-    autoDetectEnvironment: true,
-    title: 'My AI Assistant',
-    position: 'bottom-right',
-    enableStreaming: true,
-  }}
->
-  {children}
-</AppLayout>
-```
-
 ## Benefits
 
 1. **No Duplication** - Define types once, use everywhere

package/src/layouts/types/index.ts

@@ -10,11 +10,11 @@
 // ============================================================================
 
 // Local provider configs
-export type { ThemeConfig, SWRConfigOptions, McpChatConfig, CentrifugoConfig } from './providers.types';
+export type { ThemeConfig, SWRConfigOptions, CentrifugoConfig } from './providers.types';
 
 // External provider configs (re-export for convenience)
 export type { AnalyticsConfig } from '../../snippets/Analytics/types';
-export type { PwaInstallConfig } from '../../snippets/PWAInstall/types';
+export type { PwaInstallConfig } from '@djangocfg/ui-nextjs/pwa';
 export type {
   ErrorBoundaryConfig,
   ErrorTrackingConfig,

package/src/layouts/types/layout.types.ts

@@ -10,11 +10,11 @@ import type { AuthConfig } from '@djangocfg/api/auth';
 // Import provider configs from their modules
 import type { DebugButtonProps } from '@djangocfg/debuger';
 import type { AnalyticsConfig } from '../../snippets/Analytics/types';
-import type { PwaInstallConfig } from '../../snippets/PWAInstall/types';
+import type { PwaInstallConfig } from '@djangocfg/ui-nextjs/pwa';
 import type { ErrorBoundaryConfig, ErrorTrackingConfig } from '../../components/errors/types';
 
 // Import local provider configs
-import type { ThemeConfig, SWRConfigOptions, McpChatConfig, CentrifugoConfig } from './providers.types';
+import type { ThemeConfig, SWRConfigOptions, CentrifugoConfig } from './providers.types';
 import type { MonitorConfig } from '@djangocfg/monitor';
 
 // ============================================================================
@@ -54,9 +54,6 @@ export interface BaseLayoutProps {
   /** Error boundary configuration (from components/errors, enabled by default) */
   errorBoundary?: ErrorBoundaryConfig;
 
-  /** MCP chat configuration */
-  mcpChat?: McpChatConfig;
-
   /** PWA Install configuration (from snippets/PWAInstall) */
   pwaInstall?: PwaInstallConfig;
 

package/src/layouts/types/providers.types.ts

@@ -24,33 +24,6 @@ export interface SWRConfigOptions {
   dedupingInterval?: number;
 }
 
-// ============================================================================
-// MCP Chat Configuration
-// ============================================================================
-
-export interface McpChatConfig {
-  /** Enable MCP chat widget */
-  enabled?: boolean;
-  /** API endpoint for chat */
-  apiEndpoint?: string;
-  /** Chat widget title */
-  title?: string;
-  /** Input placeholder */
-  placeholder?: string;
-  /** Greeting message */
-  greeting?: string;
-  /** Widget position */
-  position?: 'bottom-right' | 'bottom-left';
-  /** Widget variant */
-  variant?: 'default' | 'minimal';
-  /** Enable streaming responses */
-  enableStreaming?: boolean;
-  /** Auto-detect environment (dev/prod) */
-  autoDetectEnvironment?: boolean;
-  /** Custom class name */
-  className?: string;
-}
-
 // ============================================================================
 // Centrifugo Configuration
 // ============================================================================

package/src/snippets/AuthDialog/AuthDialog.tsx

@@ -4,7 +4,7 @@ import { LogIn } from 'lucide-react';
 import React, { useMemo, useState } from 'react';
 
 import { useCfgRouter } from '@djangocfg/api/auth';
-import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
+import { useAppT } from '@djangocfg/i18n';
 import {
     Button, Dialog, DialogContent, DialogHeader, DialogTitle
 } from '@djangocfg/ui-core/components';
@@ -28,7 +28,7 @@ export const AuthDialog: React.FC<AuthDialogProps> = ({
   authPath = '/auth'
 }) => {
   const [open, setOpen] = useState(false);
-  const t = useTypedT<I18nTranslations>();
+  const t = useAppT();
 
   const labels = useMemo(() => ({
     authRequired: t('layouts.auth.authRequired'),

package/src/snippets/Breadcrumbs.tsx

@@ -4,7 +4,7 @@ import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import React, { useMemo } from 'react';
 
-import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
+import { useAppT } from '@djangocfg/i18n';
 
 export interface BreadcrumbItem {
   path: string;
@@ -19,7 +19,7 @@ interface BreadcrumbsProps {
 
 const Breadcrumbs: React.FC<BreadcrumbsProps> = ({ items, className = "" }) => {
   const pathname = usePathname();
-  const t = useTypedT<I18nTranslations>();
+  const t = useAppT();
 
   const labels = useMemo(() => ({
     home: t('layouts.navigation.home'),