Add beenvoice mobile companion app with full dark mode support.

Expo app with dashboard, time clock, invoices, and settings — native tabs, glass UI, theme-aware components, and iOS Live Activities.

Co-authored-by: Cursor <cursoragent@cursor.com>

app/_layout.tsx

@@ -1,30 +1,71 @@
-import { useFonts } from 'expo-font';
-import { DarkTheme, DefaultTheme, Stack, ThemeProvider } from 'expo-router';
-import * as SplashScreen from 'expo-splash-screen';
-import { useEffect } from 'react';
-import 'react-native-reanimated';
+import { Stack } from "expo-router";
+import {
+  Inter_400Regular,
+  Inter_500Medium,
+  Inter_600SemiBold,
+  Inter_700Bold,
+} from "@expo-google-fonts/inter";
+import {
+  PlayfairDisplay_600SemiBold,
+  PlayfairDisplay_700Bold,
+} from "@expo-google-fonts/playfair-display";
+import { useFonts } from "expo-font";
+import * as SplashScreen from "expo-splash-screen";
+import { useEffect, type ReactNode } from "react";
+import { View } from "react-native";
+import { StatusBar } from "expo-status-bar";
+import "react-native-reanimated";
+import { SafeAreaProvider } from "react-native-safe-area-context";
 
-import { useColorScheme } from '@/components/useColorScheme';
+import { BrandBackground } from "@/components/BrandBackground";
+import { LoadingScreen } from "@/components/LoadingScreen";
+import { AccountsProvider, useAccounts } from "@/contexts/AccountsContext";
+import { AuthProvider, useSession } from "@/contexts/AuthContext";
+import { ThemeProvider, useAppTheme } from "@/contexts/ThemeContext";
+import { TRPCProvider } from "@/lib/trpc";
 
-export {
-  // Catch any errors thrown by the Layout component.
-  ErrorBoundary,
-} from 'expo-router';
+export { ErrorBoundary } from "expo-router";
 
-export const unstable_settings = {
-  // Ensure that reloading on `/modal` keeps a back button present.
-  initialRouteName: '(tabs)',
-};
-
-// Prevent the splash screen from auto-hiding before asset loading is complete.
 SplashScreen.preventAutoHideAsync();
 
+function AppServices({ children }: { children: ReactNode }) {
+  const { apiUrl, authStoragePrefix, activeAccountId } = useAccounts();
+  const remountKey = `${activeAccountId ?? "guest"}:${apiUrl}`;
+
+  return (
+    <AuthProvider apiUrl={apiUrl} storagePrefix={authStoragePrefix} key={remountKey}>
+      <TRPCProvider apiUrl={apiUrl} key={remountKey}>
+        {children}
+      </TRPCProvider>
+    </AuthProvider>
+  );
+}
+
+function ThemedChrome({ children }: { children: ReactNode }) {
+  const { isDark } = useAppTheme();
+
+  return (
+    <View style={{ flex: 1, backgroundColor: "transparent" }}>
+      <BrandBackground />
+      <View style={{ flex: 1, zIndex: 1 }}>
+        <StatusBar style={isDark ? "light" : "dark"} />
+        {children}
+      </View>
+    </View>
+  );
+}
+
 export default function RootLayout() {
   const [loaded, error] = useFonts({
-    SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
+    SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
+    Inter_400Regular,
+    Inter_500Medium,
+    Inter_600SemiBold,
+    Inter_700Bold,
+    PlayfairDisplay_600SemiBold,
+    PlayfairDisplay_700Bold,
   });
 
-  // Expo Router uses Error Boundaries to catch errors in the navigation tree.
   useEffect(() => {
     if (error) throw error;
   }, [error]);
@@ -39,18 +80,43 @@ export default function RootLayout() {
     return null;
   }
 
-  return <RootLayoutNav />;
-}
-
-function RootLayoutNav() {
-  const colorScheme = useColorScheme();
-
   return (
-    <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
-      <Stack>
-        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-        <Stack.Screen name="modal" options={{ presentation: 'modal' }} />
-      </Stack>
-    </ThemeProvider>
+    <SafeAreaProvider>
+      <ThemeProvider>
+        <ThemedChrome>
+          <AccountsProvider>
+            <AppServices>
+              <RootNavigator />
+            </AppServices>
+          </AccountsProvider>
+        </ThemedChrome>
+      </ThemeProvider>
+    </SafeAreaProvider>
+  );
+}
+
+function RootNavigator() {
+  const { data: session, isPending } = useSession();
+
+  if (isPending) {
+    return <LoadingScreen message="Checking session…" />;
+  }
+
+  const isAuthenticated = Boolean(session?.user);
+
+  return (
+    <Stack
+      screenOptions={{
+        headerShown: false,
+        contentStyle: { backgroundColor: "transparent" },
+      }}
+    >
+      <Stack.Protected guard={!isAuthenticated}>
+        <Stack.Screen name="(auth)" />
+      </Stack.Protected>
+      <Stack.Protected guard={isAuthenticated}>
+        <Stack.Screen name="(app)" />
+      </Stack.Protected>
+    </Stack>
   );
 }