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/constants/Colors.ts | 115 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 115 insertions(+)
 create mode 100644 apps/mobile/constants/Colors.ts

(limited to 'apps/mobile/constants')

diff --git a/apps/mobile/constants/Colors.ts b/apps/mobile/constants/Colors.ts
new file mode 100644
index 0000000..13591f3
--- /dev/null
+++ b/apps/mobile/constants/Colors.ts
@@ -0,0 +1,115 @@
+/**
+ * Color constants for the Makima mobile app
+ */
+
+const tintColorLight = '#6366f1'; // Indigo
+const tintColorDark = '#818cf8';
+
+/** Type for theme colors */
+export type ThemeColors = typeof Colors.light;
+
+export const Colors = {
+  light: {
+    text: '#11181C',
+    secondaryText: '#687076',
+    textSecondary: '#687076',
+    background: '#fff',
+    secondaryBackground: '#f4f4f5',
+    tint: tintColorLight,
+    icon: '#687076',
+    tabIconDefault: '#687076',
+    tabIconSelected: tintColorLight,
+    border: '#e4e4e7',
+    card: '#fff',
+    // Input field colors
+    input: '#f4f4f5',
+    inputBorder: '#e4e4e7',
+    inputPlaceholder: '#a1a1aa',
+    // Button colors
+    buttonPrimary: tintColorLight,
+    buttonPrimaryText: '#ffffff',
+    buttonDisabled: '#d4d4d8',
+    // Status colors
+    error: '#ef4444',
+    success: '#22c55e',
+    warning: '#f59e0b',
+    // Link color
+    link: tintColorLight,
+  },
+  dark: {
+    text: '#ECEDEE',
+    secondaryText: '#9BA1A6',
+    textSecondary: '#9BA1A6',
+    background: '#09090b',
+    secondaryBackground: '#18181b',
+    tint: tintColorDark,
+    icon: '#9BA1A6',
+    tabIconDefault: '#9BA1A6',
+    tabIconSelected: tintColorDark,
+    border: '#27272a',
+    card: '#18181b',
+    // Input field colors
+    input: '#27272a',
+    inputBorder: '#3f3f46',
+    inputPlaceholder: '#71717a',
+    // Button colors
+    buttonPrimary: tintColorDark,
+    buttonPrimaryText: '#000000',
+    buttonDisabled: '#52525b',
+    // Status colors
+    error: '#f87171',
+    success: '#4ade80',
+    warning: '#fbbf24',
+    // Link color
+    link: tintColorDark,
+  },
+};
+
+// Task status colors
+export const TaskStatusColors = {
+  pending: {
+    bg: '#fef3c7',
+    text: '#92400e',
+    dot: '#f59e0b',
+  },
+  initializing: {
+    bg: '#dbeafe',
+    text: '#1e40af',
+    dot: '#3b82f6',
+  },
+  starting: {
+    bg: '#dbeafe',
+    text: '#1e40af',
+    dot: '#3b82f6',
+  },
+  running: {
+    bg: '#dcfce7',
+    text: '#166534',
+    dot: '#22c55e',
+  },
+  paused: {
+    bg: '#f3e8ff',
+    text: '#6b21a8',
+    dot: '#a855f7',
+  },
+  blocked: {
+    bg: '#fee2e2',
+    text: '#991b1b',
+    dot: '#ef4444',
+  },
+  done: {
+    bg: '#e0e7ff',
+    text: '#3730a3',
+    dot: '#6366f1',
+  },
+  failed: {
+    bg: '#fee2e2',
+    text: '#991b1b',
+    dot: '#ef4444',
+  },
+  merged: {
+    bg: '#e0e7ff',
+    text: '#3730a3',
+    dot: '#6366f1',
+  },
+};
-- 
cgit v1.2.3