Redesign the mobile app iOS-first with native chrome and Liquid Glass

apps/mobile/app.json

@@ -68,8 +68,18 @@
       "expo-image",
       "expo-audio",
       "expo-web-browser",
-      "expo-font",
-      "expo-splash-screen",
+      [
+        "expo-splash-screen",
+        {
+          "image": "./assets/splash-icon.png",
+          "imageWidth": 200,
+          "backgroundColor": "#ffffff",
+          "dark": {
+            "image": "./assets/splash-icon-dark.png",
+            "backgroundColor": "#000000"
+          }
+        }
+      ],
       [
         "expo-notifications",
         {

apps/mobile/app/_layout.tsx

@@ -17,18 +17,21 @@ import {
 } from "@/app-shell";
 import { RootNavigator, RouteErrorBoundary } from "@/screens";
 import { ThemeProvider } from "@/theme";
-import { useAppFonts } from "@/theme/useAppFonts";
 import { SheetProvider, Toaster } from "@/ui";
 
+// Keep the native splash up until boot finishes; `RootLayout` hides it once
+// `useAppBoot` is ready. Module scope so it runs before the first render
+// (fonts are the platform system faces, so nothing else is awaited).
+void SplashScreen.preventAutoHideAsync().catch(() => undefined);
+
 // Deep links into a pushed screen still get home underneath.
 export const unstable_settings = { anchor: "index" };
 
 export { RouteErrorBoundary as ErrorBoundary };
 
 export default function RootLayout() {
-  const fonts = useAppFonts();
   const boot = useAppBoot();
-  const ready = fonts.ready && boot.ready;
+  const ready = boot.ready;
 
   useEffect(() => {
     if (ready) void SplashScreen.hideAsync().catch(() => undefined);