feat(mobile): (app) layout routes by userKeyState

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

@@ -1,19 +1,42 @@
 import { Redirect, Stack } from 'expo-router';
+import { ActivityIndicator, StyleSheet, View } from 'react-native';
 
 import { useAuth } from '../../lib/authContext';
+import { colors } from '../../theme/colors';
 
 export default function AppLayout() {
-  const { session, loading } = useAuth();
-  if (loading) return null;
-  if (!session) return <Redirect href="/" />;
+  const { ready, session, userKeyState } = useAuth();
+
+  if (!ready) {
     return (
-    <Stack screenOptions={{ headerShown: true }}>
+      <View style={styles.center}>
+        <ActivityIndicator color={colors.accent} />
+      </View>
+    );
+  }
+  if (!session) return <Redirect href="/" />;
+  if (userKeyState.status === 'loading') {
+    return (
+      <View style={styles.center}>
+        <ActivityIndicator color={colors.accent} />
+      </View>
+    );
+  }
+  if (userKeyState.status === 'needs-setup') return <Redirect href="/(app)/setup" />;
+  if (userKeyState.status === 'needs-unlock') return <Redirect href="/(app)/unlock" />;
+
+  return (
+    <Stack screenOptions={{ headerStyle: { backgroundColor: colors.bg } }}>
       <Stack.Screen name="chats" />
       <Stack.Screen name="conversations/[id]" />
-      <Stack.Screen
-        name="call"
-        options={{ headerShown: false, presentation: 'fullScreenModal' }}
-      />
+      <Stack.Screen name="call" options={{ presentation: 'fullScreenModal' }} />
+      <Stack.Screen name="settings" options={{ presentation: 'card' }} />
+      <Stack.Screen name="setup" options={{ headerShown: false }} />
+      <Stack.Screen name="unlock" options={{ headerShown: false }} />
     </Stack>
   );
 }
+
+const styles = StyleSheet.create({
+  center: { flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: colors.bg },
+});

apps/mobile/app/index.tsx

@@ -21,13 +21,13 @@ import { colors } from '../theme/colors';
 // they tap the email link and Expo Router routes the deep link to
 // app/auth/callback.tsx.
 export default function Landing() {
-  const { session, loading } = useAuth();
+  const { session, ready } = useAuth();
   const [email, setEmail] = useState('');
   const [submitting, setSubmitting] = useState(false);
   const [sent, setSent] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
-  if (loading) return null;
+  if (!ready) return null;
   if (session) return <Redirect href="/(app)/chats" />;
 
   async function handleSubmit() {