@djangocfg/layouts 2.1.110 → 2.1.112

package/src/layouts/_components/LocaleSwitcher.tsx

@@ -0,0 +1,114 @@
+/**
+ * LocaleSwitcher Component (Presentational)
+ *
+ * "Dumb" locale switcher that receives data via props.
+ * For the "smart" version with next-intl hooks, use @djangocfg/nextjs/i18n/components
+ *
+ * @example
+ * ```tsx
+ * <LocaleSwitcher
+ *   locale="en"
+ *   locales={['en', 'ru', 'ko']}
+ *   onChange={(locale) => router.push(`/${locale}`)}
+ * />
+ * ```
+ */
+
+'use client';
+
+import { Globe } from 'lucide-react';
+
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@djangocfg/ui-core/components';
+
+// Default locale labels
+const DEFAULT_LABELS: Record<string, string> = {
+  en: 'English',
+  ru: 'Русский',
+  ko: '한국어',
+  zh: '中文',
+  ja: '日本語',
+  es: 'Español',
+  fr: 'Français',
+  de: 'Deutsch',
+  pt: 'Português',
+  it: 'Italiano',
+  ar: 'العربية',
+  hi: 'हिन्दी',
+  tr: 'Türkçe',
+  pl: 'Polski',
+  nl: 'Nederlands',
+  uk: 'Українська',
+};
+
+export interface LocaleSwitcherProps {
+  /** Current locale */
+  locale: string;
+  /** Available locales */
+  locales: string[];
+  /** Callback when locale changes */
+  onChange: (locale: string) => void;
+  /** Custom labels for locales */
+  labels?: Record<string, string>;
+  /** Show locale code instead of/with label */
+  showCode?: boolean;
+  /** Button variant */
+  variant?: 'ghost' | 'outline' | 'default';
+  /** Button size */
+  size?: 'sm' | 'default' | 'lg' | 'icon';
+  /** Show icon */
+  showIcon?: boolean;
+  /** Custom className */
+  className?: string;
+}
+
+export function LocaleSwitcher({
+  locale,
+  locales,
+  onChange,
+  labels = {},
+  showCode = false,
+  variant = 'ghost',
+  size = 'sm',
+  showIcon = true,
+  className,
+}: LocaleSwitcherProps) {
+  const allLabels = { ...DEFAULT_LABELS, ...labels };
+
+  const getLabel = (code: string) => {
+    const label = allLabels[code] || code.toUpperCase();
+    if (showCode) {
+      return `${code.toUpperCase()} - ${label}`;
+    }
+    return label;
+  };
+
+  const currentLabel = showCode ? locale.toUpperCase() : getLabel(locale);
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant={variant} size={size} className={className}>
+          {showIcon && <Globe className="h-4 w-4 mr-1" />}
+          <span>{currentLabel}</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        {locales.map((code) => (
+          <DropdownMenuItem
+            key={code}
+            onClick={() => onChange(code)}
+            className={code === locale ? 'bg-accent' : ''}
+          >
+            {getLabel(code)}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/src/layouts/_components/UserMenu.tsx

@@ -32,9 +32,10 @@
 
 import { LogOut } from 'lucide-react';
 import Link from 'next/link';
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import { useAuth } from '@djangocfg/api/auth';
+import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
 import {
     Avatar, AvatarFallback, AvatarImage, Button, DropdownMenu, DropdownMenuContent,
     DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator,
@@ -59,6 +60,13 @@ export function UserMenu({
 }: UserMenuProps) {
   const { user, isAuthenticated, logout } = useAuth();
   const [mounted, setMounted] = React.useState(false);
+  const t = useTypedT<I18nTranslations>();
+
+  const labels = useMemo(() => ({
+    signIn: t('layouts.profile.login'),
+    signOut: t('layouts.profile.signOut'),
+    userMenu: t('layouts.profile.userMenu'),
+  }), [t]);
 
   React.useEffect(() => {
     setMounted(true);
@@ -78,7 +86,7 @@ export function UserMenu({
     allGroups.push({
       items: [
         {
-          label: 'Sign Out',
+          label: labels.signOut,
           onClick: () => logout(),
           icon: LogOut,
           variant: 'destructive',
@@ -87,7 +95,7 @@ export function UserMenu({
     });
 
     return allGroups;
-  }, [groups, logout]);
+  }, [groups, logout, labels.signOut]);
 
   if (!mounted) {
     return null;
@@ -99,7 +107,7 @@ export function UserMenu({
       return (
         <Link href={authPath}>
           <Button variant="default" className="w-full">
-            Sign In
+            {labels.signIn}
           </Button>
         </Link>
       );
@@ -107,7 +115,7 @@ export function UserMenu({
     return (
       <Link href={authPath}>
         <Button variant="default" size="sm">
-          Sign In
+          {labels.signIn}
         </Button>
       </Link>
     );
@@ -194,7 +202,7 @@ export function UserMenu({
             <AvatarImage src={userAvatar} alt={displayName} />
             <AvatarFallback>{userInitial}</AvatarFallback>
           </Avatar>
-          <span className="sr-only">User menu</span>
+          <span className="sr-only">{labels.userMenu}</span>
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end" className="w-56">

package/src/layouts/_components/index.ts

@@ -2,6 +2,9 @@
  * Shared Layout Components
  */
 
+export { LocaleSwitcher } from './LocaleSwitcher';
+export type { LocaleSwitcherProps } from './LocaleSwitcher';
+
 export { UserMenu } from './UserMenu';
 export type { UserMenuProps } from './UserMenu';
 

package/src/layouts/index.ts

@@ -11,8 +11,8 @@
 export * from './types';
 
 // Shared components
-export { UserMenu } from './_components';
-export type { UserMenuProps } from './_components';
+export { LocaleSwitcher, UserMenu } from './_components';
+export type { LocaleSwitcherProps, UserMenuProps } from './_components';
 
 // Smart layout router
 export * from './AppLayout';

package/src/snippets/AuthDialog/AuthDialog.tsx

@@ -1,12 +1,13 @@
 'use client';
 
 import { LogIn } from 'lucide-react';
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 
+import { useCfgRouter } from '@djangocfg/api/auth';
+import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
 import {
     Button, Dialog, DialogContent, DialogHeader, DialogTitle
 } from '@djangocfg/ui-core/components';
-import { useCfgRouter } from '@djangocfg/api/auth';
 import { useEventListener } from '@djangocfg/ui-core';
 
 // Re-export events for backwards compatibility
@@ -27,7 +28,15 @@ export const AuthDialog: React.FC<AuthDialogProps> = ({
   authPath = '/auth'
 }) => {
   const [open, setOpen] = useState(false);
-  const [message, setMessage] = useState<string>('Please sign in to continue');
+  const t = useTypedT<I18nTranslations>();
+
+  const labels = useMemo(() => ({
+    authRequired: t('layouts.auth.authRequired'),
+    pleaseSignIn: t('layouts.auth.pleaseSignIn'),
+    goToSignIn: t('layouts.auth.goToSignIn'),
+  }), [t]);
+
+  const [message, setMessage] = useState<string>(labels.pleaseSignIn);
   const router = useCfgRouter();
 
   // Listen for open auth dialog event
@@ -44,7 +53,7 @@ export const AuthDialog: React.FC<AuthDialogProps> = ({
   });
 
   const handleClose = () => {
-    setMessage('Please sign in to continue');
+    setMessage(labels.pleaseSignIn);
     setOpen(false);
   };
 
@@ -67,7 +76,7 @@ export const AuthDialog: React.FC<AuthDialogProps> = ({
     <Dialog open={open} onOpenChange={handleClose}>
       <DialogContent className="max-w-sm">
         <DialogHeader>
-          <DialogTitle>Authentication Required</DialogTitle>
+          <DialogTitle>{labels.authRequired}</DialogTitle>
         </DialogHeader>
 
         <div className="space-y-4">
@@ -75,7 +84,7 @@ export const AuthDialog: React.FC<AuthDialogProps> = ({
 
           <Button onClick={handleGoToAuth} className="w-full">
             <LogIn className="h-4 w-4 mr-2" />
-            Go to Sign In
+            {labels.goToSignIn}
           </Button>
         </div>
       </DialogContent>

package/src/snippets/Breadcrumbs.tsx

@@ -2,7 +2,9 @@
 import { ChevronRight, Home } from 'lucide-react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
-import React from 'react';
+import React, { useMemo } from 'react';
+
+import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
 
 export interface BreadcrumbItem {
   path: string;
@@ -17,23 +19,32 @@ interface BreadcrumbsProps {
 
 const Breadcrumbs: React.FC<BreadcrumbsProps> = ({ items, className = "" }) => {
   const pathname = usePathname();
-  
+  const t = useTypedT<I18nTranslations>();
+
+  const labels = useMemo(() => ({
+    home: t('layouts.navigation.home'),
+    breadcrumb: t('layouts.navigation.breadcrumb'),
+  }), [t]);
+
   // Use provided items or generate from pathname
-  const breadcrumbs = items || generateBreadcrumbsFromPath(pathname);
+  const breadcrumbs = useMemo(() => {
+    if (items) return items;
+    return generateBreadcrumbsFromPath(pathname, labels.home);
+  }, [items, pathname, labels.home]);
 
   if (breadcrumbs.length <= 1) {
     return null;
   }
 
   return (
-    <nav className={`flex items-center space-x-2 text-sm ${className}`} aria-label="Breadcrumb">
+    <nav className={`flex items-center space-x-2 text-sm ${className}`} aria-label={labels.breadcrumb}>
       <ol className="flex items-center space-x-2">
         {breadcrumbs.map((item: BreadcrumbItem, index: number) => (
           <li key={item.path} className="flex items-center">
             {index > 0 && (
               <ChevronRight className="w-4 h-4 text-gray-400 mx-2" />
             )}
-            
+
             {item.isActive ? (
               <span className="text-gray-900 dark:text-white font-medium flex items-center gap-1">
                 {index === 0 && <Home className="w-4 h-4" />}
@@ -42,7 +53,7 @@ const Breadcrumbs: React.FC<BreadcrumbsProps> = ({ items, className = "" }) => {
             ) : (
               <Link
                 href={item.path}
-                className="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 
+                className="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200
                          transition-colors duration-200 flex items-center gap-1 hover:underline"
               >
                 {index === 0 && <Home className="w-4 h-4" />}
@@ -57,10 +68,10 @@ const Breadcrumbs: React.FC<BreadcrumbsProps> = ({ items, className = "" }) => {
 };
 
 // Helper function to generate breadcrumbs from pathname
-function generateBreadcrumbsFromPath(pathname: string): BreadcrumbItem[] {
+function generateBreadcrumbsFromPath(pathname: string, homeLabel: string = 'Home'): BreadcrumbItem[] {
   const segments = pathname.split('/').filter(Boolean);
   const breadcrumbs: BreadcrumbItem[] = [
-    { path: '/', label: 'Home', isActive: pathname === '/' }
+    { path: '/', label: homeLabel, isActive: pathname === '/' }
   ];
 
   let currentPath = '';

package/src/snippets/McpChat/components/ChatPanel.tsx

@@ -1,8 +1,9 @@
 'use client';
 
 import { Bot, PanelRight, RotateCcw, X } from 'lucide-react';
-import React from 'react';
+import React, { useMemo } from 'react';
 
+import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
 import { Button, Card, CardContent, CardFooter, CardHeader } from '@djangocfg/ui-core';
 
 import { useAIChatContext } from '../context/AIChatContext';
@@ -21,6 +22,15 @@ export const ChatPanel = React.memo(() => {
     stopStreaming,
     clearMessages,
   } = useAIChatContext();
+  const t = useTypedT<I18nTranslations>();
+
+  const labels = useMemo(() => ({
+    aiAssistant: t('layouts.chat.aiAssistant'),
+    defaultTitle: t('layouts.chat.defaultTitle'),
+    newChat: t('layouts.chat.newChat'),
+    closeChat: t('layouts.chat.closeChat'),
+    switchToSidebar: t('layouts.chat.switchToSidebar'),
+  }), [t]);
 
   // Mobile: fullscreen, Desktop: floating panel
   const panelStyles: React.CSSProperties = isMobile
@@ -60,8 +70,8 @@ export const ChatPanel = React.memo(() => {
             <Bot className="h-4 w-4 text-primary" />
           </div>
           <div>
-            <h3 className="font-semibold text-sm">{config.title || 'DjangoCFG AI'}</h3>
-            <p className="text-xs text-muted-foreground">AI Assistant</p>
+            <h3 className="font-semibold text-sm">{config.title || labels.defaultTitle}</h3>
+            <p className="text-xs text-muted-foreground">{labels.aiAssistant}</p>
           </div>
         </div>
         <div className="flex gap-1">
@@ -71,7 +81,7 @@ export const ChatPanel = React.memo(() => {
               size="icon"
               className="h-8 w-8"
               onClick={clearMessages}
-              title="New chat"
+              title={labels.newChat}
             >
               <RotateCcw className="h-4 w-4" />
             </Button>
@@ -83,12 +93,12 @@ export const ChatPanel = React.memo(() => {
               size="icon"
               className="h-8 w-8"
               onClick={() => setDisplayMode('sidebar')}
-              title="Switch to sidebar mode"
+              title={labels.switchToSidebar}
             >
               <PanelRight className="h-4 w-4" />
             </Button>
           )}
-          <Button variant="ghost" size="icon" className="h-8 w-8" onClick={closeChat} title="Close">
+          <Button variant="ghost" size="icon" className="h-8 w-8" onClick={closeChat} title={labels.closeChat}>
             <X className="h-4 w-4" />
           </Button>
         </div>

package/src/snippets/McpChat/components/ChatSidebar.tsx

@@ -1,8 +1,9 @@
 'use client';
 
 import { Bot, GripVertical, PanelRightClose, RotateCcw, X } from 'lucide-react';
-import React, { useEffect } from 'react';
+import React, { useEffect, useMemo } from 'react';
 
+import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
 import { Button } from '@djangocfg/ui-core';
 
 import { useAIChatContext } from '../context/AIChatContext';
@@ -34,6 +35,17 @@ export const ChatSidebar = React.memo<ChatSidebarProps>(({
     stopStreaming,
     clearMessages,
   } = useAIChatContext();
+  const t = useTypedT<I18nTranslations>();
+
+  const labels = useMemo(() => ({
+    aiAssistant: t('layouts.chat.aiAssistant'),
+    defaultTitle: t('layouts.chat.defaultTitle'),
+    newChat: t('layouts.chat.newChat'),
+    closeChat: t('layouts.chat.closeChat'),
+    switchToFloating: t('layouts.chat.switchToFloating'),
+    dragToResize: t('layouts.chat.dragToResize'),
+    howCanIHelp: t('layouts.chat.howCanIHelp'),
+  }), [t]);
 
   // Use the layout hook for content pushing and resizing
   const { applyLayout, getSidebarStyles, startResize, isResizing } = useChatLayout();
@@ -65,7 +77,7 @@ export const ChatSidebar = React.memo<ChatSidebarProps>(({
         `}
         style={{ width: resizeHandleWidth }}
         onMouseDown={startResize}
-        title="Drag to resize"
+        title={labels.dragToResize}
       >
         {showResizeIcon && (
           <GripVertical className={`h-4 w-4 ${isResizing ? 'text-primary' : 'text-muted-foreground/50'}`} />
@@ -87,8 +99,8 @@ export const ChatSidebar = React.memo<ChatSidebarProps>(({
               <Bot className="h-4 w-4 text-primary" />
             </div>
             <div>
-              <h3 className="font-semibold text-sm">{config.title || 'DjangoCFG AI'}</h3>
-              <p className="text-xs text-muted-foreground">AI Assistant</p>
+              <h3 className="font-semibold text-sm">{config.title || labels.defaultTitle}</h3>
+              <p className="text-xs text-muted-foreground">{labels.aiAssistant}</p>
             </div>
           </div>
           <div className="flex gap-1">
@@ -98,7 +110,7 @@ export const ChatSidebar = React.memo<ChatSidebarProps>(({
                 size="icon"
                 className="h-8 w-8"
                 onClick={clearMessages}
-                title="New chat"
+                title={labels.newChat}
               >
                 <RotateCcw className="h-4 w-4" />
               </Button>
@@ -108,11 +120,11 @@ export const ChatSidebar = React.memo<ChatSidebarProps>(({
               size="icon"
               className="h-8 w-8"
               onClick={() => setDisplayMode('floating')}
-              title="Switch to floating mode"
+              title={labels.switchToFloating}
             >
               <PanelRightClose className="h-4 w-4" />
             </Button>
-            <Button variant="ghost" size="icon" className="h-8 w-8" onClick={closeChat} title="Close chat">
+            <Button variant="ghost" size="icon" className="h-8 w-8" onClick={closeChat} title={labels.closeChat}>
               <X className="h-4 w-4" />
             </Button>
           </div>
@@ -128,7 +140,7 @@ export const ChatSidebar = React.memo<ChatSidebarProps>(({
             isCompact={false}
             largeGreetingIcon
             greetingIcon="message"
-            greetingTitle="How can I help?"
+            greetingTitle={labels.howCanIHelp}
           />
         </div>
 

package/src/snippets/PWAInstall/components/A2HSHint.tsx

@@ -12,8 +12,9 @@
  */
 
 import { ChevronRight, Download, Share, X } from 'lucide-react';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 
+import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
 import { cn } from '@djangocfg/ui-core/lib';
 
 import { useInstall } from '../context/InstallContext';
@@ -69,6 +70,18 @@ export function A2HSHint({
   const [show, setShow] = useState(false);
   const [showGuide, setShowGuide] = useState(false);
   const [installing, setInstalling] = useState(false);
+  const t = useTypedT<I18nTranslations>();
+
+  const labels = useMemo(() => ({
+    addToHomeScreen: t('layouts.pwa.addToHomeScreen'),
+    installApp: t('layouts.pwa.installApp'),
+    tapToLearnHow: t('layouts.pwa.tapToLearnHow'),
+    clickToSeeGuide: t('layouts.pwa.clickToSeeGuide'),
+    tapToInstall: t('layouts.pwa.tapToInstall'),
+    installing: t('layouts.pwa.installing'),
+    dismiss: t('layouts.pwa.dismiss'),
+    appLogo: t('layouts.pwa.appLogo'),
+  }), [t]);
 
   // Determine if should show hint
   // Production: iOS (all browsers support PWA via Share) & Android Chrome with native prompt
@@ -141,15 +154,15 @@ export function A2HSHint({
   let subtitle: React.ReactNode;
 
   if (isIOS) {
-    title = 'Add to Home Screen';
-    subtitle = <>Tap to learn how <ChevronRight className="w-3 h-3" /></>;
+    title = labels.addToHomeScreen;
+    subtitle = <>{labels.tapToLearnHow} <ChevronRight className="w-3 h-3" /></>;
   } else if (isDesktop) {
-    title = 'Install App';
-    subtitle = <>Click to see desktop guide <ChevronRight className="w-3 h-3" /></>;
+    title = labels.installApp;
+    subtitle = <>{labels.clickToSeeGuide} <ChevronRight className="w-3 h-3" /></>;
   } else {
     // Android or other mobile with native prompt
-    title = 'Install App';
-    subtitle = <>Tap to install <Download className="w-3 h-3" /></>;
+    title = labels.installApp;
+    subtitle = <>{labels.tapToInstall} <Download className="w-3 h-3" /></>;
   }
 
   return (
@@ -180,7 +193,7 @@ export function A2HSHint({
             {/* App logo or icon */}
             <div className="flex-shrink-0">
               {logo ? (
-                <img src={logo} alt="App logo" className="w-10 h-10 rounded-lg" />
+                <img src={logo} alt={labels.appLogo} className="w-10 h-10 rounded-lg" />
               ) : (
                 <Share className="w-5 h-5 text-blue-400" />
               )}
@@ -190,7 +203,7 @@ export function A2HSHint({
             <div className="flex-1 min-w-0">
               <p className="text-sm font-medium text-white mb-1">{title}</p>
               <p className="text-xs text-zinc-400 flex items-center gap-1">
-                {installing ? 'Installing...' : subtitle}
+                {installing ? labels.installing : subtitle}
               </p>
             </div>
 
@@ -201,7 +214,7 @@ export function A2HSHint({
                 handleDismiss();
               }}
               className="flex-shrink-0 p-1 hover:bg-zinc-700 rounded transition-colors"
-              aria-label="Dismiss"
+              aria-label={labels.dismiss}
             >
               <X className="w-4 h-4 text-zinc-400" />
             </button>