v1.0.0

app/_layout.tsx

@@ -1,41 +1,77 @@
-import { StatusBar } from "expo-status-bar";
-import { AuthProvider, useAuth } from "../src/context/AuthContext";
-import { useEffect } from "react";
-import { Stack, useRouter } from "expo-router";
+import { Ionicons } from "@expo/vector-icons";
+import { Stack, useRouter, useSegments } from "expo-router";
+import { TouchableOpacity, Text } from "react-native";
+import { useColorScheme } from "../hooks/use-color-scheme";
+import { AuthProvider } from "../src/context/AuthContext";
 
-function RootStack() {
-  const router = useRouter();
-	const { isAuthenticated, isLoading } = useAuth();
-
-	useEffect(() => {
-		if (!isLoading) {
-			if (isAuthenticated) {
-				router.replace('/(tabs)');
-			} else {
-				router.replace('/login');
-			}
-		}
-	}, [isAuthenticated, isLoading, router]);
+function DevicesHeader() {
+	const router = useRouter();
+	const isDark = useColorScheme() === "dark";
+	const activityColor = isDark ? "#0A84FF" : "#007AFF";
 
 	return (
-		<Stack>
-			{isAuthenticated ? (
-				<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-			) : (
-				<Stack.Screen name="login" options={{ headerShown: false }} />
-			)}
-			<Stack.Screen name="add-device" options={{ headerShown: false }} />
-			<Stack.Screen name="scan-devices" options={{ headerShown: false }} />
-			<Stack.Screen name="devices/[id]" />
-		</Stack>
+		<TouchableOpacity
+			onPress={() => router.push("/scan-devices")}
+			style={{ paddingHorizontal: 8 }}
+		>
+			<Ionicons name="add-circle-outline" size={24} color={activityColor} />
+		</TouchableOpacity>
+	);
+}
+
+function TabsTitle(props: { title: string }) {
+	const segments = useSegments();
+	const last = segments[segments.length - 1];
+	const isDark = useColorScheme() === "dark";
+	const titleColor = isDark ? "#fff" : "#000";
+	const title = last === "settings" ? "Settings" : props.title;
+	return (
+		<Text style={{ color: titleColor, fontSize: 17, fontWeight: "600" }}>
+			{title}
+		</Text>
 	);
 }
 
 export default function RootLayout() {
+	const isDark = useColorScheme() === "dark";
+	const bgColor = isDark ? "#0b0b0d" : "#fff";
+	const titleColor = isDark ? "#fff" : "#000";
+
+	const segments = useSegments();
+	const last = segments[segments.length - 1];
+	const isIndex = last === "(tabs)" || last === undefined;
+
 	return (
 		<AuthProvider>
-			<RootStack />
-			<StatusBar style="auto" />
+			<Stack>
+				{/* Root index that performs auth redirect (app/index.tsx) */}
+				<Stack.Screen name="index" options={{ headerShown: false }} />
+				{/* Tabs parent - render tabs with dynamic header */}
+				<Stack.Screen
+					name="(tabs)"
+					options={
+						{
+							headerTitle: () => <TabsTitle title="Devices" />,
+							headerRight: isIndex ? () => <DevicesHeader /> : undefined,
+							headerRightContainerStyle: isIndex
+								? undefined
+								: { width: 0, paddingRight: 0 },
+							headerStyle: { backgroundColor: bgColor },
+							headerTintColor: titleColor,
+						} as any
+					}
+				/>{" "}
+				<Stack.Screen name="login" options={{ headerShown: false }} />
+				<Stack.Screen
+					name="scan-devices"
+					options={{
+						headerShown: true,
+						headerTitle: () => <TabsTitle title="Scan Devices" />,
+						headerStyle: { backgroundColor: bgColor },
+						headerBackButtonDisplayMode: "minimal",
+					}}
+				/>
+			</Stack>
 		</AuthProvider>
 	);
 }