85 lines
2.8 KiB
TypeScript
85 lines
2.8 KiB
TypeScript
import { Ionicons } from '@expo/vector-icons';
|
|
import { Stack, useRouter, useSegments } from 'expo-router';
|
|
import { Text, TouchableOpacity } from 'react-native';
|
|
import { useColorScheme } from '../hooks/use-color-scheme';
|
|
import { AuthProvider, useAuth } from '../src/context/AuthContext';
|
|
|
|
function DevicesHeader() {
|
|
const router = useRouter();
|
|
const isDark = useColorScheme() === 'dark';
|
|
const activityColor = isDark ? '#0A84FF' : '#007AFF';
|
|
const { canCreate } = useAuth();
|
|
|
|
return (
|
|
<TouchableOpacity
|
|
onPress={() => router.push('/scan-devices')}
|
|
disabled={!canCreate}
|
|
style={{ paddingHorizontal: 8 }}
|
|
>
|
|
<Ionicons name="add-circle-outline" size={24} color={canCreate ? activityColor : 'gray'} />
|
|
</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>
|
|
<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',
|
|
}}
|
|
/>
|
|
{/* Deep link action handler - no header, immediately redirects */}
|
|
<Stack.Screen
|
|
name="action/[action]/[deviceId]"
|
|
options={{ headerShown: false, animation: 'none' }}
|
|
/>
|
|
</Stack>
|
|
</AuthProvider>
|
|
);
|
|
}
|