feat: Implement frontend localization with i18n and measurement units

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>

maternal-web/app/settings/page.tsx

@@ -13,6 +13,8 @@ import { DeviceTrustManagement } from '@/components/settings/DeviceTrustManageme
 import { BiometricSettings } from '@/components/settings/BiometricSettings';
 import { DataExport } from '@/components/settings/DataExport';
 import { AccountDeletion } from '@/components/settings/AccountDeletion';
+import { LanguageSelector } from '@/components/settings/LanguageSelector';
+import { MeasurementUnitSelector } from '@/components/settings/MeasurementUnitSelector';
 import { motion } from 'framer-motion';
 
 export default function SettingsPage() {
@@ -150,6 +152,25 @@ export default function SettingsPage() {
         </Card>
       </motion.div>
 
+      {/* Preferences (Language & Measurement Units) */}
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.4, delay: 0.05 }}
+      >
+        <Card sx={{ mb: 3 }}>
+          <CardContent>
+            <Typography variant="h6" component="h2" fontWeight="600" gutterBottom>
+              Preferences
+            </Typography>
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, mt: 2 }}>
+              <LanguageSelector />
+              <MeasurementUnitSelector />
+            </Box>
+          </CardContent>
+        </Card>
+      </motion.div>
+
       {/* Notification Settings */}
       <motion.div
         initial={{ opacity: 0, y: 20 }}