feat: add home screen with agent list and orchestrator navigation

2025-10-23 11:11:20 +02:00
parent a930c4156a
commit 8177aa0c2a
27 changed files with 1912 additions and 2038 deletions
@@ -0,0 +1,76 @@
+import { View, Pressable, Text } from "react-native";
+import { router } from "expo-router";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import { ArrowLeft } from "lucide-react-native";
+
+interface BackHeaderProps {
+  title?: string;
+}
+
+export function BackHeader({ title }: BackHeaderProps) {
+  const { theme } = useUnistyles();
+  const insets = useSafeAreaInsets();
+
+  return (
+    <View style={styles.header}>
+      <View style={{ paddingTop: insets.top + 12 }}>
+        <View style={styles.headerRow}>
+          {/* Left side - Back button */}
+          <View style={styles.headerLeft}>
+            <Pressable
+              onPress={() => router.back()}
+              style={styles.backButton}
+            >
+              <ArrowLeft size={20} color={theme.colors.foreground} />
+            </Pressable>
+            {title && (
+              <Text style={styles.title} numberOfLines={1}>
+                {title}
+              </Text>
+            )}
+          </View>
+
+          {/* Right side - Empty for now */}
+          <View style={styles.headerRight} />
+        </View>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create((theme) => ({
+  header: {
+    backgroundColor: theme.colors.background,
+  },
+  headerRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: theme.spacing[3],
+    paddingBottom: theme.spacing[2],
+    borderBottomWidth: theme.borderWidth[1],
+    borderBottomColor: theme.colors.border,
+  },
+  headerLeft: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[3],
+  },
+  headerRight: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[2],
+  },
+  backButton: {
+    padding: theme.spacing[3],
+    borderRadius: theme.borderRadius.lg,
+  },
+  title: {
+    flex: 1,
+    fontSize: theme.fontSize.lg,
+    fontWeight: theme.fontWeight.semibold,
+    color: theme.colors.foreground,
+  },
+}));
@@ -0,0 +1,79 @@
+import { View, Pressable } from "react-native";
+import { router } from "expo-router";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import { Settings, MessageSquare, Plus } from "lucide-react-native";
+
+interface HomeHeaderProps {
+  onCreateAgent: () => void;
+}
+
+export function HomeHeader({ onCreateAgent }: HomeHeaderProps) {
+  const { theme } = useUnistyles();
+  const insets = useSafeAreaInsets();
+
+  return (
+    <View style={styles.header}>
+      <View style={{ paddingTop: insets.top + 12 }}>
+        <View style={styles.headerRow}>
+          {/* Left side - Settings */}
+          <View style={styles.headerLeft}>
+            <Pressable
+              onPress={() => router.push("/settings")}
+              style={styles.iconButton}
+            >
+              <Settings size={20} color={theme.colors.foreground} />
+            </Pressable>
+          </View>
+
+          {/* Right side - Activity and New Agent */}
+          <View style={styles.headerRight}>
+            <Pressable
+              onPress={() => router.push("/orchestrator")}
+              style={styles.iconButton}
+            >
+              <MessageSquare size={20} color={theme.colors.foreground} />
+            </Pressable>
+            <Pressable
+              onPress={onCreateAgent}
+              style={styles.iconButton}
+            >
+              <Plus size={20} color={theme.colors.foreground} />
+            </Pressable>
+          </View>
+        </View>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create((theme) => ({
+  header: {
+    backgroundColor: theme.colors.background,
+  },
+  headerRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: theme.spacing[3],
+    paddingBottom: theme.spacing[2],
+    borderBottomWidth: theme.borderWidth[1],
+    borderBottomColor: theme.colors.border,
+  },
+  headerLeft: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[2],
+  },
+  headerRight: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[2],
+  },
+  iconButton: {
+    padding: theme.spacing[3],
+    borderRadius: theme.borderRadius.lg,
+    backgroundColor: theme.colors.muted,
+  },
+}));