feat(mobile): replace starter template with dashboard-driven app flow

MobileApp/app/(tabs)/_layout.tsx

@@ -1,58 +1,46 @@
-import { Tabs } from 'expo-router';
+import Ionicons from '@expo/vector-icons/Ionicons';
+import { Redirect, Tabs } from 'expo-router';
 import React from 'react';
-import { Platform } from 'react-native';
 
-import { HapticTab } from '@/components/haptic-tab';
-import { IconSymbol } from '@/components/ui/icon-symbol';
-import { Colors } from '@/constants/theme';
-import { useColorScheme } from '@/hooks/use-color-scheme';
+import { useApp } from '@/src/app-context';
 
 export default function TabLayout() {
-  const colorScheme = useColorScheme();
+  const { ready, state, unreadCount } = useApp();
+
+  if (!ready) return null;
+  if (!state.session?.session) return <Redirect href={'/auth' as any} />;
+  if (!state.deviceToken) return <Redirect href={'/onboarding' as any} />;
 
   return (
     <Tabs
       screenOptions={{
-        tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
-        tabBarInactiveTintColor: Colors[colorScheme ?? 'light'].tabIconDefault,
-        headerShown: false,
-        tabBarButton: HapticTab,
-        tabBarStyle: Platform.select({
-          default: {
-            backgroundColor: Colors[colorScheme ?? 'light'].background,
-            borderTopColor: Colors[colorScheme ?? 'light'].border,
-            borderTopWidth: 1,
-            elevation: 0,
-            paddingTop: 8,
-          },
-        }),
+        headerStyle: { backgroundColor: '#0f1015' },
+        headerTintColor: '#f9fafb',
+        tabBarStyle: { backgroundColor: '#0f1015', borderTopColor: 'rgba(255,255,255,0.12)' },
+        tabBarActiveTintColor: '#60a5fa',
+        tabBarInactiveTintColor: '#6b7280',
+        sceneStyle: { backgroundColor: '#0a0a0c' },
       }}>
       <Tabs.Screen
         name="index"
         options={{
-          title: 'Home',
-          tabBarIcon: ({ color }) => <IconSymbol size={28} name="house.fill" color={color} />,
+          title: state.device?.role === 'camera' ? 'Camera' : 'Dashboard',
+          tabBarIcon: ({ color, size }) => <Ionicons name="speedometer-outline" size={size} color={color} />,
         }}
       />
       <Tabs.Screen
-        name="alerts"
+        name="activity"
         options={{
-          title: 'Alerts',
-          tabBarIcon: ({ color }) => <IconSymbol size={28} name="bell.fill" color={color} />,
-        }}
-      />
-      <Tabs.Screen
-        name="clips"
-        options={{
-          title: 'Clips',
-          tabBarIcon: ({ color }) => <IconSymbol size={28} name="film.fill" color={color} />,
+          title: 'Activity',
+          tabBarBadge: unreadCount > 0 ? unreadCount : undefined,
+          tabBarIcon: ({ color, size }) => <Ionicons name="notifications-outline" size={size} color={color} />,
         }}
       />
       <Tabs.Screen
         name="settings"
         options={{
           title: 'Settings',
-          tabBarIcon: ({ color }) => <IconSymbol size={28} name="gearshape.fill" color={color} />,
+          tabBarIcon: ({ color, size }) => <Ionicons name="settings-outline" size={size} color={color} />,
         }}
       />
     </Tabs>