feat: Apply localization to Login, Dashboard, and Navigation (Phase 9 - Batch 1)
**Pages Localized:** - Login page: All UI strings (titles, labels, buttons, links) - Dashboard page: Welcome message, quick actions, daily summary, predictions - AppShell: Connection status and presence indicators - MobileNav: Menu items and app branding - TabBar: Bottom navigation labels **Translation Files:** - Created dashboard.json for all 5 languages (en, es, fr, pt, zh) - Enhanced common.json with navigation and connection strings - Updated i18n config to include dashboard namespace **Languages Supported:** - English, Spanish, French, Portuguese, Chinese (Simplified) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -7,12 +7,14 @@ import { useMediaQuery } from '@/hooks/useMediaQuery';
|
||||
import { ReactNode } from 'react';
|
||||
import { useWebSocket } from '@/hooks/useWebSocket';
|
||||
import { Wifi, WifiOff, People } from '@mui/icons-material';
|
||||
import { useTranslation } from '@/hooks/useTranslation';
|
||||
|
||||
interface AppShellProps {
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
export const AppShell = ({ children }: AppShellProps) => {
|
||||
const { t } = useTranslation('common');
|
||||
const isMobile = useMediaQuery('(max-width: 768px)');
|
||||
const isTablet = useMediaQuery('(max-width: 1024px)');
|
||||
const { isConnected, presence } = useWebSocket();
|
||||
@@ -38,10 +40,10 @@ export const AppShell = ({ children }: AppShellProps) => {
|
||||
gap: 1,
|
||||
}}
|
||||
>
|
||||
<Tooltip title={isConnected ? 'Real-time sync active' : 'Real-time sync disconnected'}>
|
||||
<Tooltip title={isConnected ? t('connection.syncActive') : t('connection.syncDisconnected')}>
|
||||
<Chip
|
||||
icon={isConnected ? <Wifi /> : <WifiOff />}
|
||||
label={isConnected ? 'Live' : 'Offline'}
|
||||
label={isConnected ? t('connection.live') : t('connection.offline')}
|
||||
size="small"
|
||||
color={isConnected ? 'success' : 'default'}
|
||||
sx={{
|
||||
@@ -52,7 +54,7 @@ export const AppShell = ({ children }: AppShellProps) => {
|
||||
</Tooltip>
|
||||
|
||||
{isConnected && presence.count > 1 && (
|
||||
<Tooltip title={`${presence.count} family members online`}>
|
||||
<Tooltip title={t('connection.familyMembersOnline', { count: presence.count })}>
|
||||
<Chip
|
||||
icon={<People />}
|
||||
label={presence.count}
|
||||
|
||||
Reference in New Issue
Block a user