Andrei
c1e37d30b0
Implemented comprehensive frontend localization infrastructure supporting 5 languages (English, Spanish, French, Portuguese, Chinese) with measurement unit preferences (Metric/Imperial). This lays the foundation for international user support. **Core Infrastructure:** - Installed i18next, react-i18next, i18next-browser-languagedetector - Created I18nProvider component integrated into app layout - Configured i18next with language detection and localStorage persistence - Created 35 translation files (5 languages × 7 namespaces) **Translation Namespaces:** - common: App-wide UI elements, navigation, actions - tracking: Activity tracking (feeding, sleep, diaper, milestones) - ai: AI assistant chat interface - auth: Authentication flows (login, signup, password reset) - settings: Settings and preferences - onboarding: Onboarding flow - errors: Error messages and validation **Custom Hooks:** - useTranslation: Type-safe translation wrapper - useLocale: Language and measurement system management - useFormatting: Date, time, number, and unit formatting **Measurement Unit Support:** - Created unit conversion utilities (weight, height, temperature, volume) - Metric: kg, cm, °C, ml - Imperial: lb, in, °F, oz - Bidirectional conversion functions **UI Components:** - LanguageSelector: Dropdown to change app language - MeasurementUnitSelector: Toggle between Metric/Imperial - Integrated both into Settings page Preferences section **Next Steps (Remaining):** - Add measurement preferences to backend user schema - Create onboarding flow with language/measurement selection - Apply translations to existing components (dashboard, tracking forms) - Implement multi-language AI responses - Add professional translations (currently using basic translations) **File Highlights:** - lib/i18n/config.ts: i18next configuration - hooks/useFormatting.ts: Formatting utilities with locale support - lib/utils/unitConversion.ts: Unit conversion logic - components/settings/*Selector.tsx: Language and measurement selectors - locales/*/: Translation files for 5 languages 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
77 lines
2.7 KiB
TypeScript
77 lines
2.7 KiB
TypeScript
import type { Metadata } from 'next';
|
|
import { Inter } from 'next/font/google';
|
|
import { ThemeRegistry } from '@/components/ThemeRegistry';
|
|
import { ErrorBoundary } from '@/components/common/ErrorBoundary';
|
|
import { ReduxProvider } from '@/components/providers/ReduxProvider';
|
|
import { ApolloProvider } from '@/components/providers/ApolloProvider';
|
|
import { AxeProvider } from '@/components/providers/AxeProvider';
|
|
import { SkipNavigation } from '@/components/common/SkipNavigation';
|
|
import { VoiceFloatingButton } from '@/components/voice/VoiceFloatingButton';
|
|
import { FocusManagementProvider } from '@/components/providers/FocusManagementProvider';
|
|
import { BackgroundSyncProvider } from '@/components/providers/BackgroundSyncProvider';
|
|
import { InstallPrompt } from '@/components/pwa/InstallPrompt';
|
|
import { I18nProvider } from '@/components/providers/I18nProvider';
|
|
// import { PerformanceMonitor } from '@/components/common/PerformanceMonitor'; // Temporarily disabled
|
|
import './globals.css';
|
|
|
|
const inter = Inter({ subsets: ['latin'] });
|
|
|
|
export const metadata: Metadata = {
|
|
title: 'Maternal - AI-Powered Child Care Assistant',
|
|
description: 'Track, analyze, and get AI-powered insights for your child\'s development, sleep, feeding, and more.',
|
|
manifest: '/manifest.json',
|
|
themeColor: '#FFB6C1',
|
|
viewport: {
|
|
width: 'device-width',
|
|
initialScale: 1,
|
|
maximumScale: 1,
|
|
userScalable: false,
|
|
},
|
|
appleWebApp: {
|
|
capable: true,
|
|
statusBarStyle: 'default',
|
|
title: 'Maternal',
|
|
},
|
|
};
|
|
|
|
export default function RootLayout({
|
|
children,
|
|
}: Readonly<{
|
|
children: React.ReactNode;
|
|
}>) {
|
|
return (
|
|
<html lang="en">
|
|
<head>
|
|
<link rel="manifest" href="/manifest.json" />
|
|
<meta name="theme-color" content="#FFB6C1" />
|
|
<link rel="apple-touch-icon" href="/icon-192x192.png" />
|
|
</head>
|
|
<body className={inter.className}>
|
|
<AxeProvider>
|
|
<I18nProvider>
|
|
<ErrorBoundary>
|
|
<ReduxProvider>
|
|
<ApolloProvider>
|
|
<BackgroundSyncProvider>
|
|
<ThemeRegistry>
|
|
<FocusManagementProvider>
|
|
<SkipNavigation />
|
|
{/* <PerformanceMonitor /> */}
|
|
<main id="main-content" tabIndex={-1}>
|
|
{children}
|
|
</main>
|
|
<VoiceFloatingButton />
|
|
<InstallPrompt />
|
|
</FocusManagementProvider>
|
|
</ThemeRegistry>
|
|
</BackgroundSyncProvider>
|
|
</ApolloProvider>
|
|
</ReduxProvider>
|
|
</ErrorBoundary>
|
|
</I18nProvider>
|
|
</AxeProvider>
|
|
</body>
|
|
</html>
|
|
);
|
|
}
|