From 87fed820dc6599acee819a3fbac77318cfb64feb Mon Sep 17 00:00:00 2001
From: byGalax <dennis@landmann.dev>
Date: Sat, 16 May 2026 16:23:26 +0200
Subject: [PATCH] feat(mobile): BootSplash + BootError fallback views for
 AppBootstrap

---
 apps/mobile/components/BootError.tsx  | 51 +++++++++++++++++++++++++++
 apps/mobile/components/BootSplash.tsx | 22 ++++++++++++
 2 files changed, 73 insertions(+)
 create mode 100644 apps/mobile/components/BootError.tsx
 create mode 100644 apps/mobile/components/BootSplash.tsx

diff --git a/apps/mobile/components/BootError.tsx b/apps/mobile/components/BootError.tsx
new file mode 100644
index 0000000..f4267bf
--- /dev/null
+++ b/apps/mobile/components/BootError.tsx
@@ -0,0 +1,51 @@
+import { ScrollView, StyleSheet, Text, View } from 'react-native';
+
+import { colors } from '../theme/colors';
+
+interface Props {
+  error: Error;
+}
+
+// Last-resort fallback. Renders whenever AppBootstrap's init effect throws or
+// when the global JS error handler catches an unhandled exception. The
+// env-diagnostic line ("env-ok" / "env-missing") makes future bug reports
+// triageable from a single screenshot.
+export function BootError({ error }: Props) {
+  const envOk = Boolean(process.env.EXPO_PUBLIC_SUPABASE_URL);
+  return (
+    <ScrollView contentContainerStyle={styles.container}>
+      <Text style={styles.title}>App-Start fehlgeschlagen</Text>
+      <Text style={styles.message}>{error.message}</Text>
+      <View style={styles.diagnostic}>
+        <Text style={styles.diagnosticLabel}>EXPO_PUBLIC_SUPABASE_URL:</Text>
+        <Text style={[styles.diagnosticValue, envOk ? styles.ok : styles.bad]}>
+          {envOk ? 'env-ok' : 'env-missing'}
+        </Text>
+      </View>
+      {error.stack && <Text style={styles.stack}>{error.stack}</Text>}
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexGrow: 1,
+    backgroundColor: colors.bg,
+    padding: 24,
+    paddingTop: 64,
+    gap: 12,
+  },
+  title: { color: colors.text, fontSize: 20, fontWeight: '700' },
+  message: { color: colors.danger, fontSize: 14, lineHeight: 20 },
+  diagnostic: { flexDirection: 'row', gap: 8, marginTop: 8 },
+  diagnosticLabel: { color: colors.textMuted, fontSize: 12 },
+  diagnosticValue: { fontSize: 12, fontWeight: '700' },
+  ok: { color: colors.success },
+  bad: { color: colors.danger },
+  stack: {
+    color: colors.textDim,
+    fontSize: 11,
+    fontFamily: 'Courier',
+    marginTop: 16,
+  },
+});
diff --git a/apps/mobile/components/BootSplash.tsx b/apps/mobile/components/BootSplash.tsx
new file mode 100644
index 0000000..3cf6421
--- /dev/null
+++ b/apps/mobile/components/BootSplash.tsx
@@ -0,0 +1,22 @@
+import { ActivityIndicator, StyleSheet, View } from 'react-native';
+
+import { colors } from '../theme/colors';
+
+// Shown while AppBootstrap is initialising the crypto backend. Identical
+// background to the Expo splash so the handoff is invisible to the user.
+export function BootSplash() {
+  return (
+    <View style={styles.container}>
+      <ActivityIndicator color={colors.accent} />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: colors.bg,
+  },
+});