apps/mobile UI 全面對齊 apps/web 窄螢幕樣式

apps/mobile/app/(tabs)/_layout.tsx

@@ -1,59 +1,70 @@
-import { SymbolView } from 'expo-symbols';
 import { Tabs } from 'expo-router';
 import { useAuth } from '@clerk/expo';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
-import Colors from '@/constants/Colors';
-import { useColorScheme } from '@/components/useColorScheme';
+import Icon from '@/components/Icon';
+import TabBarButton from '@/components/TabBarButton';
+import { colors, fonts } from '@/constants/theme';
 
-// 對應 apps/web 的 Navbar.tsx 四個分頁（home/notes/stats/profile）
+const TAB_BAR_CONTENT_HEIGHT = 62;
+
+// 對應 apps/web 的 Navbar.tsx 四個分頁（home/notes/stats/profile），樣式對照
+// index.css @media(max-width:640px) 底部 tab bar 那組規則（.navbar/.navbar-tab 系列）。
 export default function TabLayout() {
-  const colorScheme = useColorScheme();
   const { isSignedIn } = useAuth();
+  const insets = useSafeAreaInsets();
 
   return (
     <Tabs
       screenOptions={{
-        tabBarActiveTintColor: Colors[colorScheme].tint,
         headerShown: false,
+        tabBarActiveTintColor: colors.primary,
+        tabBarInactiveTintColor: colors.navbarTabInactive,
+        tabBarShowLabel: true,
+        tabBarLabelStyle: {
+          fontFamily: fonts.mono.bold,
+          fontSize: 10,
+          fontWeight: '700',
+        },
+        tabBarStyle: {
+          backgroundColor: colors.navbarBg,
+          borderTopWidth: 1,
+          borderTopColor: colors.navbarBorder,
+          height: TAB_BAR_CONTENT_HEIGHT + insets.bottom,
+          paddingBottom: insets.bottom,
+          paddingTop: 0,
+        },
+        tabBarItemStyle: {
+          paddingVertical: 0,
+        },
+        tabBarButton: (props) => <TabBarButton {...props} />,
       }}>
       <Tabs.Screen
         name="index"
         options={{
           title: '每日刷題',
-          tabBarIcon: ({ color }) => (
-            <SymbolView name={{ ios: 'house', android: 'home', web: 'home' }} tintColor={color} size={26} />
-          ),
+          tabBarIcon: ({ color }) => <Icon name="home" size={18} color={color as string} />,
         }}
       />
       <Tabs.Screen
         name="notes"
         options={{
           title: '精選筆記',
-          tabBarIcon: ({ color }) => (
-            <SymbolView name={{ ios: 'book', android: 'book', web: 'book' }} tintColor={color} size={26} />
-          ),
+          tabBarIcon: ({ color }) => <Icon name="book-open" size={18} color={color as string} />,
         }}
       />
       <Tabs.Screen
         name="stats"
         options={{
           title: '學習數據',
-          tabBarIcon: ({ color }) => (
-            <SymbolView
-              name={{ ios: 'chart.bar', android: 'bar_chart', web: 'bar_chart' }}
-              tintColor={color}
-              size={26}
-            />
-          ),
+          tabBarIcon: ({ color }) => <Icon name="bar-chart" size={18} color={color as string} />,
         }}
       />
       <Tabs.Screen
         name="profile"
         options={{
           title: isSignedIn ? '個人資料' : '登入',
-          tabBarIcon: ({ color }) => (
-            <SymbolView name={{ ios: 'person', android: 'person', web: 'person' }} tintColor={color} size={26} />
-          ),
+          tabBarIcon: ({ color }) => <Icon name="user" size={18} color={color as string} />,
         }}
       />
     </Tabs>

apps/mobile/app/(tabs)/index.tsx

@@ -3,6 +3,7 @@ import { ActivityIndicator, StyleSheet } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { View } from '@/components/Themed';
+import { colors } from '@/constants/theme';
 import { useProgress } from '@/context/ProgressContext';
 import Home from '@/screens/Home';
 import ChapterMap from '@/screens/ChapterMap';
@@ -27,7 +28,7 @@ export default function HomeScreen() {
   if (!hydrated) {
     return (
       <View style={[styles.loading, { paddingTop: insets.top }]}>
-        <ActivityIndicator />
+        <ActivityIndicator color={colors.primary} />
       </View>
     );
   }

apps/mobile/app/(tabs)/notes.tsx

@@ -3,6 +3,7 @@ import { ActivityIndicator, StyleSheet } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { View } from '@/components/Themed';
+import { colors } from '@/constants/theme';
 import { useProgress } from '@/context/ProgressContext';
 import Notes from '@/screens/Notes';
 import QuestionBook from '@/screens/QuestionBook';
@@ -34,7 +35,7 @@ export default function NotesScreen() {
   if (!hydrated) {
     return (
       <View style={[styles.loading, { paddingTop: insets.top }]}>
-        <ActivityIndicator />
+        <ActivityIndicator color={colors.primary} />
       </View>
     );
   }