feat(mobile): replace starter template with dashboard-driven app flow

2026-03-07 10:20:00 +00:00
parent d03b22a99f
commit 64684eaae6
34 changed files with 4645 additions and 895 deletions
--- a/MobileApp/app/onboarding.tsx
+++ b/MobileApp/app/onboarding.tsx
@@ -0,0 +1,198 @@
+import { Redirect } from 'expo-router';
+import React from 'react';
+import {
+  ActivityIndicator,
+  KeyboardAvoidingView,
+  Platform,
+  Pressable,
+  SafeAreaView,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+} from 'react-native';
+
+import { useApp } from '@/src/app-context';
+
+export default function OnboardingScreen() {
+  const { ready, state, actions } = useApp();
+
+  if (!ready) {
+    return (
+      <View style={styles.loading}>
+        <ActivityIndicator color="#60a5fa" size="large" />
+      </View>
+    );
+  }
+
+  if (!state.session?.session) {
+    return <Redirect href={'/auth' as any} />;
+  }
+
+  if (state.deviceToken) {
+    return <Redirect href="/(tabs)" />;
+  }
+
+  return (
+    <SafeAreaView style={styles.safe}>
+      <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined} style={styles.container}>
+        <View style={styles.heading}>
+          <Text style={styles.title}>Configure Device</Text>
+          <Text style={styles.subtitle}>Set up this mobile dashboard role.</Text>
+        </View>
+
+        <View style={styles.card}>
+          <Text style={styles.label}>Device Name</Text>
+          <TextInput
+            style={styles.input}
+            placeholder="e.g. Living Room Client"
+            placeholderTextColor="#6b7280"
+            value={state.onboardingForm.name}
+            onChangeText={(value) => actions.setOnboardingField('name', value)}
+          />
+
+          <Text style={styles.label}>Role</Text>
+          <View style={styles.roleRow}>
+            <Pressable
+              style={[styles.roleButton, state.onboardingForm.role === 'camera' ? styles.roleButtonActive : null]}
+              onPress={() => actions.selectRole('camera')}>
+              <Text style={[styles.roleText, state.onboardingForm.role === 'camera' ? styles.roleTextActive : null]}>
+                Camera
+              </Text>
+            </Pressable>
+            <Pressable
+              style={[styles.roleButton, state.onboardingForm.role === 'client' ? styles.roleButtonActive : null]}
+              onPress={() => actions.selectRole('client')}>
+              <Text style={[styles.roleText, state.onboardingForm.role === 'client' ? styles.roleTextActive : null]}>
+                Client
+              </Text>
+            </Pressable>
+          </View>
+
+          <Text style={styles.label}>Push Token (Optional)</Text>
+          <TextInput
+            style={styles.input}
+            placeholder="simulated_token_123"
+            placeholderTextColor="#6b7280"
+            value={state.onboardingForm.pushToken}
+            onChangeText={(value) => actions.setOnboardingField('pushToken', value)}
+          />
+
+          <Pressable style={styles.primaryButton} onPress={() => void actions.registerDevice()}>
+            <Text style={styles.primaryText}>Complete Setup</Text>
+          </Pressable>
+
+          <Pressable style={styles.secondaryButton} onPress={() => void actions.loadSavedDevice()}>
+            <Text style={styles.secondaryText}>Load previously saved device</Text>
+          </Pressable>
+        </View>
+      </KeyboardAvoidingView>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  safe: {
+    flex: 1,
+    backgroundColor: '#0a0a0c',
+  },
+  loading: {
+    flex: 1,
+    backgroundColor: '#0a0a0c',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    paddingHorizontal: 20,
+  },
+  heading: {
+    marginBottom: 20,
+  },
+  title: {
+    color: '#f9fafb',
+    fontSize: 28,
+    fontWeight: '700',
+  },
+  subtitle: {
+    color: '#9ca3af',
+    fontSize: 13,
+    marginTop: 6,
+  },
+  card: {
+    borderRadius: 20,
+    backgroundColor: '#111218',
+    borderWidth: 1,
+    borderColor: 'rgba(255,255,255,0.08)',
+    padding: 18,
+    gap: 12,
+  },
+  label: {
+    fontSize: 11,
+    letterSpacing: 0.6,
+    textTransform: 'uppercase',
+    color: '#9ca3af',
+    fontWeight: '600',
+  },
+  input: {
+    height: 48,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: 'rgba(255,255,255,0.12)',
+    backgroundColor: '#09090d',
+    color: '#f3f4f6',
+    paddingHorizontal: 12,
+  },
+  roleRow: {
+    flexDirection: 'row',
+    gap: 10,
+  },
+  roleButton: {
+    flex: 1,
+    height: 42,
+    borderRadius: 10,
+    backgroundColor: '#1f2230',
+    borderWidth: 1,
+    borderColor: 'rgba(255,255,255,0.08)',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  roleButtonActive: {
+    backgroundColor: '#1d4ed8',
+    borderColor: '#2563eb',
+  },
+  roleText: {
+    color: '#9ca3af',
+    fontWeight: '600',
+  },
+  roleTextActive: {
+    color: '#f9fafb',
+  },
+  primaryButton: {
+    marginTop: 6,
+    height: 48,
+    borderRadius: 12,
+    backgroundColor: '#2563eb',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  primaryText: {
+    color: '#f9fafb',
+    fontWeight: '600',
+    fontSize: 16,
+  },
+  secondaryButton: {
+    height: 42,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: 'rgba(255,255,255,0.08)',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  secondaryText: {
+    color: '#9ca3af',
+    fontSize: 13,
+    fontWeight: '500',
+  },
+});