feat: Redesign mobile UI with centered voice button and user menu

- Repositioned Voice Command button to center of bottom navigation bar
- Added floating user menu icon in top-left corner on mobile
- User menu includes: Settings, Children, Family, and Logout options
- Updated bottom nav to show: Home, Track, Voice (center), Insights, History
- Hide original floating voice button on mobile to avoid duplication
- Improved mobile UX with easier thumb access to voice commands
- User avatar displays first letter of user's name

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

maternal-web/components/layouts/TabBar/TabBar.tsx

@@ -1,13 +1,14 @@
 'use client';
 
 import { usePathname, useRouter } from 'next/navigation';
-import { BottomNavigation, BottomNavigationAction, Paper } from '@mui/material';
+import { useState } from 'react';
+import { BottomNavigation, BottomNavigationAction, Paper, Fab, Box } from '@mui/material';
 import {
   Home,
   Timeline,
-  Chat,
   Insights,
-  Settings,
+  History,
+  Mic,
 } from '@mui/icons-material';
 import { useTranslation } from '@/hooks/useTranslation';
 
@@ -15,53 +16,102 @@ export const TabBar = () => {
   const { t } = useTranslation('common');
   const router = useRouter();
   const pathname = usePathname();
+  const [voiceOpen, setVoiceOpen] = useState(false);
 
   const tabs = [
     { label: t('navigation.home'), icon: <Home />, value: '/' },
     { label: t('navigation.track'), icon: <Timeline />, value: '/track' },
-    { label: t('navigation.aiChat'), icon: <Chat />, value: '/ai-assistant' },
+    { label: '', icon: null, value: 'voice' }, // Placeholder for center button
     { label: t('navigation.insights'), icon: <Insights />, value: '/insights' },
-    { label: t('navigation.settings'), icon: <Settings />, value: '/settings' },
+    { label: t('navigation.history'), icon: <History />, value: '/history' },
   ];
 
   return (
-    <Paper
-      component="nav"
-      aria-label="Primary navigation"
-      sx={{
-        position: 'fixed',
-        bottom: 0,
-        left: 0,
-        right: 0,
-        zIndex: 1000,
-      }}
-      elevation={3}
-    >
-      <BottomNavigation
-        value={pathname}
-        onChange={(event, newValue) => {
-          router.push(newValue);
-        }}
-        showLabels
+    <>
+      <Paper
+        component="nav"
+        aria-label="Primary navigation"
         sx={{
-          height: 64,
-          '& .MuiBottomNavigationAction-root': {
-            minWidth: 60,
-            '&.Mui-selected': {
-              color: 'primary.main',
+          position: 'fixed',
+          bottom: 0,
+          left: 0,
+          right: 0,
+          zIndex: 1000,
+        }}
+        elevation={3}
+      >
+        <BottomNavigation
+          value={pathname}
+          onChange={(event, newValue) => {
+            if (newValue !== 'voice') {
+              router.push(newValue);
+            }
+          }}
+          showLabels
+          sx={{
+            height: 64,
+            '& .MuiBottomNavigationAction-root': {
+              minWidth: 60,
+              '&.Mui-selected': {
+                color: 'primary.main',
+              },
             },
+          }}
+        >
+          {tabs.map((tab) => {
+            if (tab.value === 'voice') {
+              // Center voice button placeholder
+              return (
+                <Box
+                  key="voice-placeholder"
+                  sx={{
+                    flex: 1,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                  }}
+                />
+              );
+            }
+            return (
+              <BottomNavigationAction
+                key={tab.value}
+                label={tab.label}
+                icon={tab.icon}
+                value={tab.value}
+              />
+            );
+          })}
+        </BottomNavigation>
+      </Paper>
+
+      {/* Voice Command Floating Button - Centered */}
+      <Fab
+        color="secondary"
+        aria-label="voice command"
+        onClick={() => {
+          // Trigger voice command - will integrate with existing VoiceFloatingButton
+          const voiceButton = document.querySelector('[aria-label="voice input"]') as HTMLButtonElement;
+          if (voiceButton) {
+            voiceButton.click();
+          }
+        }}
+        sx={{
+          position: 'fixed',
+          bottom: 40,
+          left: '50%',
+          transform: 'translateX(-50%)',
+          zIndex: 1100,
+          width: 56,
+          height: 56,
+          bgcolor: 'secondary.main',
+          '&:hover': {
+            bgcolor: 'secondary.dark',
           },
         }}
       >
-        {tabs.map((tab) => (
-          <BottomNavigationAction
-            key={tab.value}
-            label={tab.label}
-            icon={tab.icon}
-            value={tab.value}
-          />
-        ))}
-      </BottomNavigation>
-    </Paper>
+        <Mic />
+      </Fab>
+    </>
   );
 };