feat: add camera functionality with permission handling and image analysis, refactor color scheme hooks, and update themed components

Author: tuke307

tree-disk-capture/app.json

@@ -35,7 +35,15 @@
       "favicon": "./assets/images/favicon.png"
     },
     "plugins": [
-      "expo-router"
+      "expo-router",
+      [
+        "expo-camera",
+        {
+          "cameraPermission": "Allow $(PRODUCT_NAME) to access your camera",
+          "microphonePermission": "Allow $(PRODUCT_NAME) to access your microphone",
+          "recordAudioAndroid": true
+        }
+      ]
     ],
     "experiments": {
       "tsconfigPaths": true,

tree-disk-capture/app/(history)/[id].tsx

@@ -0,0 +1,38 @@
+import { View, Text, Image } from 'react-native';
+import { useLocalSearchParams } from 'expo-router';
+import { useCaptures } from '@/hooks/use-captures';
+import { ThemedView } from '@/components/ThemedView';
+import { ThemedText } from '@/components/ThemedText';
+
+export default function CaptureDetails() {
+  const { id } = useLocalSearchParams();
+  const { getCaptureById } = useCaptures();
+  const capture = getCaptureById(id as string);
+
+  if (!capture) {
+    return (
+      <ThemedView className="flex-1 items-center justify-center p-4">
+        <ThemedText className="text-xl">Capture not found</ThemedText>
+      </ThemedView>
+    );
+  }
+
+  return (
+    <ThemedView className="flex-1 p-4">
+      <Image
+        source={{ uri: capture.uri }}
+        className="w-full h-64 rounded-lg mb-4"
+        resizeMode="cover"
+      />
+      <ThemedText className="text-lg mb-2">
+        Predicted Age: {capture.analysis.predictedAge}
+      </ThemedText>
+      <ThemedText className="text-lg mb-2">
+        Location: {capture.analysis.predictedLocation}
+      </ThemedText>
+      <ThemedText className="text-lg">
+        Captured: {new Date(capture.timestamp).toLocaleDateString()}
+      </ThemedText>
+    </ThemedView>
+  );
+}

tree-disk-capture/app/(history)/_layout.tsx

@@ -0,0 +1,12 @@
+import { Stack } from 'expo-router';
+
+export default function HistoryLayout() {
+  return (
+    <Stack
+      screenOptions={{
+        headerStyle: { backgroundColor: '#1f2937' },
+        headerTintColor: '#fff',
+      }}
+    />
+  );
+}

tree-disk-capture/app/(tabs)/_layout.tsx

@@ -1,9 +1,10 @@
+import { ThemedView } from "@/components/ThemedView";
 import "../global.css";
 import FontAwesome from "@expo/vector-icons/FontAwesome";
 import { useFonts } from "expo-font";
 import { SplashScreen, Stack } from "expo-router";
 import { memo, useEffect } from "react";
-import { View, StyleSheet } from "react-native";
+import { View, StyleSheet, StatusBar } from "react-native";
 
 export {
   // Catch any errors thrown by the Layout component.
@@ -39,10 +40,28 @@ export default function RootLayout() {
 
 function RootLayoutNav() {
   return (
-    <View style={StyleSheet.absoluteFill}>
-      <Stack>
-        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+    <ThemedView style={StyleSheet.absoluteFill}>
+      <StatusBar/>
+      <Stack
+        screenOptions={{
+          headerShown: false,
+          presentation: 'fullScreenModal'
+        }}
+      >
+        <Stack.Screen 
+          name="index" 
+          options={{ 
+            title: 'Tree Rings',
+          }} 
+        />
+        <Stack.Screen 
+          name="capture" 
+          options={{ 
+            title: 'New Capture',
+            presentation: 'fullScreenModal',
+          }} 
+        />
       </Stack>
-    </View>
+    </ThemedView>
   );
 }

tree-disk-capture/app/(tabs)/index.tsx

@@ -0,0 +1,26 @@
+import { View } from 'react-native';
+import { router } from 'expo-router';
+import { CameraContainer } from '@/components/camera/camera-container';
+import { useCamera } from '@/hooks/use-camera';
+import { PermissionRequest } from '@/components/camera/permission-request';
+import { ThemedView } from '@/components/ThemedView';
+
+export default function Capture() {
+  const { permission, requestPermission, handleCapture } = useCamera();
+
+  if (!permission?.granted) {
+    return <PermissionRequest onRequestPermission={requestPermission} />;
+  }
+
+  if (!permission) {
+    // Camera permissions are still loading.
+    return <ThemedView />;
+  }
+
+  return (
+    <CameraContainer 
+      onCapture={handleCapture}
+      onCaptureSaved={() => router.replace('/')}
+    />
+  );
+}

tree-disk-capture/app/(tabs)/two.tsx

@@ -0,0 +1,25 @@
+import { View, ScrollView, Text } from 'react-native';
+import { router } from 'expo-router';
+import { HistoryList } from '@/components/history/history-list';
+import { NewCaptureButton } from '@/components/buttons/new-capture-button';
+import { useCaptures } from '@/hooks/use-captures';
+import { ThemedView } from '@/components/ThemedView';
+import { ThemedText } from '@/components/ThemedText';
+
+export default function Home() {
+  const { captures } = useCaptures();
+
+  return (
+    <ThemedView className="flex-1 bg-gray-900">
+      <NewCaptureButton onPress={() => router.push('/capture')} />
+      <ThemedView className="flex-1">
+        <ScrollView className="flex-1">
+          <ThemedView className="p-4">
+            <ThemedText className="text-white text-xl font-bold mb-4">History</ThemedText>
+            <HistoryList captures={captures} />
+          </ThemedView>
+        </ScrollView>
+      </ThemedView>
+    </ThemedView>
+  );
+}