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

(limited to 'apps/mobile/hooks/useThemeColor.ts')

diff --git a/apps/mobile/hooks/useThemeColor.ts b/apps/mobile/hooks/useThemeColor.ts
new file mode 100644
index 0000000..170a6d6
--- /dev/null
+++ b/apps/mobile/hooks/useThemeColor.ts
@@ -0,0 +1,47 @@
+import { useColorScheme } from 'react-native';
+import { Colors, type ThemeColors } from '../constants/Colors';
+
+/**
+ * Hook to get the current theme colors
+ * @returns The colors for the current color scheme
+ */
+export function useThemeColors(): ThemeColors {
+  const colorScheme = useColorScheme() ?? 'dark';
+  return Colors[colorScheme];
+}
+
+/**
+ * Hook to get a specific color from the theme
+ * @param colorName - The name of the color to retrieve
+ * @returns The color value for the current theme
+ */
+export function useThemeColor<K extends keyof ThemeColors>(
+  colorName: K
+): ThemeColors[K] {
+  const colors = useThemeColors();
+  return colors[colorName];
+}
+
+/**
+ * Hook to get multiple colors from the theme
+ * @param colorNames - Array of color names to retrieve
+ * @returns Object with requested color values
+ */
+export function useThemeColorSet<K extends keyof ThemeColors>(
+  colorNames: K[]
+): Pick<ThemeColors, K> {
+  const colors = useThemeColors();
+  return colorNames.reduce((acc, name) => {
+    acc[name] = colors[name];
+    return acc;
+  }, {} as Pick<ThemeColors, K>);
+}
+
+/**
+ * Hook to check if the current theme is dark
+ * @returns boolean indicating if dark mode is active
+ */
+export function useIsDarkMode(): boolean {
+  const colorScheme = useColorScheme();
+  return colorScheme === 'dark';
+}
-- 
cgit v1.2.3