From 869f21ee2efaefed6a5aa4fbd417c25df8dec02a Mon Sep 17 00:00:00 2001
From: soryu <soryu@soryu.co>
Date: Sun, 18 Jan 2026 17:44:50 +0000
Subject: Add React Native mobile app for Makima (#3)

* [WIP] Heartbeat checkpoint - 2026-01-18 02:58:27 UTC

* feat(mobile): complete mobile app integration and verification

- Add ThemeColors type export to Colors.ts for type safety
- Export SUPABASE_URL from supabase.ts and use environment variables
- Update .env.example with correct default URLs
- Add comprehensive README.md with setup instructions

Verified:
- TypeScript compiles without errors
- App exports successfully for iOS and Android
- All screens accessible (login, dashboard, tasks, settings, task detail)
- Auth flow working with Zustand store and Supabase

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* Task completion checkpoint

---------

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
---
 apps/mobile/components/LoadingScreen.tsx | 55 ++++++++++++++++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 apps/mobile/components/LoadingScreen.tsx

(limited to 'apps/mobile/components/LoadingScreen.tsx')

diff --git a/apps/mobile/components/LoadingScreen.tsx b/apps/mobile/components/LoadingScreen.tsx
new file mode 100644
index 0000000..c64c79d
--- /dev/null
+++ b/apps/mobile/components/LoadingScreen.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import { View, Text, ActivityIndicator, StyleSheet, useColorScheme } from 'react-native';
+import { Colors } from '../constants/Colors';
+
+interface LoadingScreenProps {
+  /** Optional message to display */
+  message?: string;
+}
+
+/**
+ * Loading screen component
+ * Displayed while checking authentication state
+ */
+export function LoadingScreen({ message = 'Loading...' }: LoadingScreenProps) {
+  const colorScheme = useColorScheme() ?? 'dark';
+  const colors = Colors[colorScheme];
+
+  return (
+    <View style={[styles.container, { backgroundColor: colors.background }]}>
+      <View style={styles.content}>
+        <Text style={[styles.title, { color: colors.tint }]}>Makima</Text>
+        <ActivityIndicator
+          size="large"
+          color={colors.tint}
+          style={styles.spinner}
+        />
+        <Text style={[styles.message, { color: colors.textSecondary }]}>
+          {message}
+        </Text>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  content: {
+    alignItems: 'center',
+  },
+  title: {
+    fontSize: 42,
+    fontWeight: 'bold',
+    marginBottom: 24,
+  },
+  spinner: {
+    marginBottom: 16,
+  },
+  message: {
+    fontSize: 14,
+  },
+});
-- 
cgit v1.2.3