refactor: mobile app, configuration and enhance user interface

app/app.json

@@ -1,12 +1,12 @@
 {
   "expo": {
-    "name": "friend-lite-app",
-    "slug": "friend-lite-app",
+    "name": "chronicle",
+    "slug": "chronicle",
     "version": "1.0.0",
+    "scheme": "chronicle",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
-    "entryPoint": "./app/index.tsx",
-    "userInterfaceStyle": "light",
+    "userInterfaceStyle": "automatic",
     "splash": {
       "image": "./assets/splash.png",
       "resizeMode": "contain",
@@ -17,17 +17,21 @@
     ],
     "ios": {
       "supportsTablet": true,
-      "bundleIdentifier": "com.cupbearer5517.friendlite",
+      "bundleIdentifier": "com.cupbearer5517.chronicle",
       "infoPlist": {
-        "NSMicrophoneUsageDescription": "Friend Lite needs access to your microphone to stream audio to the backend for processing."
+        "NSMicrophoneUsageDescription": "Chronicle needs access to your microphone to stream audio to the backend for processing.",
+        "NSAppTransportSecurity": {
+          "NSAllowsArbitraryLoads": true,
+          "NSAllowsLocalNetworking": true
+        }
       }
     },
     "android": {
       "adaptiveIcon": {
         "foregroundImage": "./assets/adaptive-icon.png",
         "backgroundColor": "#ffffff"
       },
-      "package": "com.cupbearer5517.friendlite",
+      "package": "com.cupbearer5517.chronicle",
       "permissions": [
         "android.permission.BLUETOOTH",
         "android.permission.BLUETOOTH_ADMIN",
@@ -91,7 +95,8 @@
             ]
           }
         }
-      ]
+      ],
+      "./plugins/with-ats"
     ],
     "extra": {
       "eas": {

app/app/_layout.tsx

@@ -1,5 +1,23 @@
 import { Stack } from "expo-router";
+import { useTheme } from "@/theme";
+import { ConnectionLogProvider } from "@/contexts/ConnectionLogContext";
 
 export default function RootLayout() {
-  return <Stack />;
+  const { colors, isDark } = useTheme();
+
+  return (
+    <ConnectionLogProvider>
+      <Stack
+        screenOptions={{
+          headerStyle: { backgroundColor: colors.card },
+          headerTintColor: colors.text,
+          headerTitleStyle: { fontWeight: '600' },
+          contentStyle: { backgroundColor: colors.background },
+        }}
+      >
+        <Stack.Screen name="index" options={{ title: 'Chronicle', headerShown: false }} />
+        <Stack.Screen name="diagnostics" options={{ title: 'Diagnostics', presentation: 'card' }} />
+      </Stack>
+    </ConnectionLogProvider>
+  );
 }