@djangocfg/layouts 2.1.110 → 2.1.111

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>

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

@@ -11,6 +11,7 @@
 import { ArrowDownToLine, Check, Menu, Monitor, Plus, Search } from 'lucide-react';
 import React, { useMemo } from 'react';
 
+import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
 import {
     Button, Card, CardContent, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader,
     DialogTitle
@@ -32,28 +33,29 @@ function getBrowserCategory(browser: {
   return 'unknown';
 }
 
-function getBrowserSteps(category: BrowserCategory, browserName: string): InstallStep[] {
+type TranslationFn = (key: string) => string;
+
+function getBrowserSteps(category: BrowserCategory, t: TranslationFn): InstallStep[] {
   switch (category) {
     case 'chromium':
-      // Chrome, Edge, Brave, Arc, Vivaldi, Opera, Yandex, etc.
       return [
         {
           number: 1,
-          title: 'Find Install Icon',
+          title: t('layouts.pwa.chromiumStep1Title'),
           icon: ArrowDownToLine,
-          description: 'Look for install icon in address bar (right side)',
+          description: t('layouts.pwa.chromiumStep1Desc'),
         },
         {
           number: 2,
-          title: 'Click Install',
+          title: t('layouts.pwa.chromiumStep2Title'),
           icon: Plus,
-          description: 'Click the icon and select "Install"',
+          description: t('layouts.pwa.chromiumStep2Desc'),
         },
         {
           number: 3,
-          title: 'Confirm',
+          title: t('layouts.pwa.chromiumStep3Title'),
           icon: Check,
-          description: 'Click "Install" in the popup dialog',
+          description: t('layouts.pwa.chromiumStep3Desc'),
         },
       ];
 
@@ -61,21 +63,21 @@ function getBrowserSteps(category: BrowserCategory, browserName: string): Instal
       return [
         {
           number: 1,
-          title: 'Open Menu',
+          title: t('layouts.pwa.firefoxStep1Title'),
           icon: Menu,
-          description: 'Click the menu button (three lines)',
+          description: t('layouts.pwa.firefoxStep1Desc'),
         },
         {
           number: 2,
-          title: 'Find Install Option',
+          title: t('layouts.pwa.firefoxStep2Title'),
           icon: Search,
-          description: 'Look for "Install" or "Add to Home Screen"',
+          description: t('layouts.pwa.firefoxStep2Desc'),
         },
         {
           number: 3,
-          title: 'Confirm',
+          title: t('layouts.pwa.firefoxStep3Title'),
           icon: Check,
-          description: 'Follow the installation prompts',
+          description: t('layouts.pwa.firefoxStep3Desc'),
         },
       ];
 
@@ -83,15 +85,15 @@ function getBrowserSteps(category: BrowserCategory, browserName: string): Instal
       return [
         {
           number: 1,
-          title: 'Limited Support',
+          title: t('layouts.pwa.safariStep1Title'),
           icon: Monitor,
-          description: 'Safari on macOS has limited PWA support',
+          description: t('layouts.pwa.safariStep1Desc'),
         },
         {
           number: 2,
-          title: 'Use Chromium Browser',
+          title: t('layouts.pwa.safariStep2Title'),
           icon: ArrowDownToLine,
-          description: 'Consider using Chrome, Edge, or Brave for full PWA experience',
+          description: t('layouts.pwa.safariStep2Desc'),
         },
       ];
 
@@ -99,21 +101,21 @@ function getBrowserSteps(category: BrowserCategory, browserName: string): Instal
       return [
         {
           number: 1,
-          title: 'Check Address Bar',
+          title: t('layouts.pwa.unknownStep1Title'),
           icon: ArrowDownToLine,
-          description: 'Look for an install or download icon',
+          description: t('layouts.pwa.unknownStep1Desc'),
         },
         {
           number: 2,
-          title: 'Or Use Menu',
+          title: t('layouts.pwa.unknownStep2Title'),
           icon: Menu,
-          description: 'Check browser menu for install option',
+          description: t('layouts.pwa.unknownStep2Desc'),
         },
         {
           number: 3,
-          title: 'Confirm',
+          title: t('layouts.pwa.unknownStep3Title'),
           icon: Check,
-          description: 'Follow the installation prompts',
+          description: t('layouts.pwa.unknownStep3Desc'),
         },
       ];
   }
@@ -157,15 +159,25 @@ export function DesktopGuide({ onDismiss, open = true }: IOSGuideModalProps) {
     isOpera,
     isYandex,
   } = useInstall();
+  const t = useTypedT<I18nTranslations>();
+
+  const labels = useMemo(() => ({
+    title: t('layouts.pwa.desktopTitle'),
+    description: t('layouts.pwa.desktopDescription'),
+    descSafari: t('layouts.pwa.desktopDescSafari'),
+    tip: t('layouts.pwa.desktopTip'),
+    firefoxNote: t('layouts.pwa.desktopFirefoxNote'),
+    gotIt: t('layouts.pwa.gotIt'),
+  }), [t]);
 
   const category = useMemo(
     () => getBrowserCategory({ isChromium, isFirefox, isSafari }),
     [isChromium, isFirefox, isSafari]
   );
 
-  const steps = useMemo(() => getBrowserSteps(category, browserName), [category, browserName]);
+  const steps = useMemo(() => getBrowserSteps(category, t), [category, t]);
 
-  // Get specific browser display name with emoji
+  // Get specific browser display name
   const displayName = useMemo(() => {
     if (isEdge) return 'Edge';
     if (isBrave) return 'Brave';
@@ -182,12 +194,12 @@ export function DesktopGuide({ onDismiss, open = true }: IOSGuideModalProps) {
         <DialogHeader className="text-left">
           <DialogTitle className="flex items-center gap-2">
             <Monitor className="w-5 h-5 text-primary" />
-            Install App on Desktop
+            {labels.title}
           </DialogTitle>
           <DialogDescription className="text-left">
             {isSafari
-              ? 'Safari on macOS has limited PWA support. For the best experience, use Chrome, Edge, or Brave.'
-              : `Install this app on ${displayName} for quick access from your desktop`
+              ? labels.descSafari
+              : labels.description.replace('{browser}', displayName)
             }
           </DialogDescription>
         </DialogHeader>
@@ -200,20 +212,20 @@ export function DesktopGuide({ onDismiss, open = true }: IOSGuideModalProps) {
 
         {category === 'chromium' && (
           <div className="p-3 bg-muted/30 rounded-lg text-xs text-muted-foreground">
-            💡 Tip: You can also right-click the page and look for "Install" option in {displayName}
+            💡 {labels.tip.replace('{browser}', displayName)}
           </div>
         )}
 
         {category === 'firefox' && (
           <div className="p-3 bg-amber-500/10 rounded-lg text-xs text-amber-700 dark:text-amber-400">
-            ℹ️ Note: Firefox has limited PWA support. Some features may not work as expected.
+            ℹ️ {labels.firefoxNote}
           </div>
         )}
 
         <DialogFooter>
           <Button onClick={onDismiss} variant="default" className="w-full">
             <Check className="w-4 h-4 mr-2" />
-            Got It
+            {labels.gotIt}
           </Button>
         </DialogFooter>
       </DialogContent>

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

@@ -8,35 +8,15 @@
  */
 
 import { ArrowDown, ArrowUpRight, Check, CheckCircle, Share } from 'lucide-react';
-import React from 'react';
+import React, { useMemo } from 'react';
 
+import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
 import {
     Button, Card, CardContent, Drawer, DrawerContent, DrawerDescription, DrawerHeader, DrawerTitle
 } from '@djangocfg/ui-core/components';
 
 import type { IOSGuideModalProps, InstallStep } from '../types';
 
-const steps: InstallStep[] = [
-  {
-    number: 1,
-    title: 'Tap Share',
-    icon: ArrowUpRight,
-    description: 'At the bottom of Safari',
-  },
-  {
-    number: 2,
-    title: 'Scroll & Tap',
-    icon: ArrowDown,
-    description: '"Add to Home Screen"',
-  },
-  {
-    number: 3,
-    title: 'Confirm',
-    icon: CheckCircle,
-    description: 'Tap "Add" in top-right',
-  },
-];
-
 function StepCard({ step }: { step: InstallStep }) {
   return (
     <Card className="border border-border">
@@ -63,16 +43,45 @@ function StepCard({ step }: { step: InstallStep }) {
 }
 
 export function IOSGuideDrawer({ onDismiss, open = true }: IOSGuideModalProps) {
+  const t = useTypedT<I18nTranslations>();
+
+  const labels = useMemo(() => ({
+    title: t('layouts.pwa.iosTitle'),
+    description: t('layouts.pwa.iosDescription'),
+    gotIt: t('layouts.pwa.gotIt'),
+  }), [t]);
+
+  const steps: InstallStep[] = useMemo(() => [
+    {
+      number: 1,
+      title: t('layouts.pwa.iosStep1Title'),
+      icon: ArrowUpRight,
+      description: t('layouts.pwa.iosStep1Desc'),
+    },
+    {
+      number: 2,
+      title: t('layouts.pwa.iosStep2Title'),
+      icon: ArrowDown,
+      description: t('layouts.pwa.iosStep2Desc'),
+    },
+    {
+      number: 3,
+      title: t('layouts.pwa.iosStep3Title'),
+      icon: CheckCircle,
+      description: t('layouts.pwa.iosStep3Desc'),
+    },
+  ], [t]);
+
   return (
     <Drawer open={open} onOpenChange={(isOpen) => !isOpen && onDismiss()}>
       <DrawerContent>
         <DrawerHeader className="text-left">
           <DrawerTitle className="flex items-center gap-2">
             <Share className="w-5 h-5 text-primary" />
-            Add to Home Screen
+            {labels.title}
           </DrawerTitle>
           <DrawerDescription className="text-left">
-            Install this app on your iPhone for quick access and a better experience
+            {labels.description}
           </DrawerDescription>
         </DrawerHeader>
 
@@ -85,7 +94,7 @@ export function IOSGuideDrawer({ onDismiss, open = true }: IOSGuideModalProps) {
         <div className="p-4 pt-0">
           <Button onClick={onDismiss} variant="default" className="w-full">
             <Check className="w-4 h-4 mr-2" />
-            Got It
+            {labels.gotIt}
           </Button>
         </div>
       </DrawerContent>

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

@@ -7,8 +7,9 @@
  */
 
 import { ArrowDown, ArrowUpRight, Check, CheckCircle, Share } from 'lucide-react';
-import React from 'react';
+import React, { useMemo } from 'react';
 
+import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
 import {
     Button, Card, CardContent, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader,
     DialogTitle
@@ -16,27 +17,6 @@ import {
 
 import type { IOSGuideModalProps, InstallStep } from '../types';
 
-const steps: InstallStep[] = [
-  {
-    number: 1,
-    title: 'Tap Share',
-    icon: ArrowUpRight,
-    description: 'At the bottom of Safari',
-  },
-  {
-    number: 2,
-    title: 'Scroll & Tap',
-    icon: ArrowDown,
-    description: '"Add to Home Screen"',
-  },
-  {
-    number: 3,
-    title: 'Confirm',
-    icon: CheckCircle,
-    description: 'Tap "Add" in top-right',
-  },
-];
-
 function StepCard({ step }: { step: InstallStep }) {
   return (
     <Card className="border border-border">
@@ -63,16 +43,45 @@ function StepCard({ step }: { step: InstallStep }) {
 }
 
 export function IOSGuideModal({ onDismiss, open = true }: IOSGuideModalProps) {
+  const t = useTypedT<I18nTranslations>();
+
+  const labels = useMemo(() => ({
+    title: t('layouts.pwa.iosTitle'),
+    description: t('layouts.pwa.iosDescription'),
+    gotIt: t('layouts.pwa.gotIt'),
+  }), [t]);
+
+  const steps: InstallStep[] = useMemo(() => [
+    {
+      number: 1,
+      title: t('layouts.pwa.iosStep1Title'),
+      icon: ArrowUpRight,
+      description: t('layouts.pwa.iosStep1Desc'),
+    },
+    {
+      number: 2,
+      title: t('layouts.pwa.iosStep2Title'),
+      icon: ArrowDown,
+      description: t('layouts.pwa.iosStep2Desc'),
+    },
+    {
+      number: 3,
+      title: t('layouts.pwa.iosStep3Title'),
+      icon: CheckCircle,
+      description: t('layouts.pwa.iosStep3Desc'),
+    },
+  ], [t]);
+
   return (
     <Dialog open={open} onOpenChange={(isOpen) => !isOpen && onDismiss()}>
       <DialogContent className="sm:max-w-md">
         <DialogHeader className="text-left">
           <DialogTitle className="flex items-center gap-2">
             <Share className="w-5 h-5 text-primary" />
-            Add to Home Screen
+            {labels.title}
           </DialogTitle>
           <DialogDescription className="text-left">
-            Install this app on your iPhone for quick access and a better experience
+            {labels.description}
           </DialogDescription>
         </DialogHeader>
 
@@ -85,7 +94,7 @@ export function IOSGuideModal({ onDismiss, open = true }: IOSGuideModalProps) {
         <DialogFooter>
           <Button onClick={onDismiss} variant="default" className="w-full">
             <Check className="w-4 h-4 mr-2" />
-            Got It
+            {labels.gotIt}
           </Button>
         </DialogFooter>
       </DialogContent>