1import { ScreenScrollView as ScrollView } from "../../components/ScreenScrollView";
2import { NativeHeaderToolbar } from "../../native/StackHeader";
3import { useNavigation } from "@react-navigation/native";
4import type { EnvironmentId } from "@t3tools/contracts";
5import { useCallback, useState } from "react";
6import { Platform, View } from "react-native";
7import { useSafeAreaInsets } from "react-native-safe-area-context";
8
9import { AndroidScreenHeader } from "../../components/AndroidScreenHeader";
10import { useRemoteConnections } from "../../state/use-remote-environment-registry";
11import { LocalEnvironmentList } from "./LocalEnvironmentList";
12import { GitHubRoutingSettings } from "./GitHubRoutingSettings";
13import { SelfHostedServerSection } from "./SelfHostedServerSection";
14
15export function ConnectionsRouteScreen() {
16 const {
17 connectedEnvironments,
18 onReconnectEnvironment,
19 onRemoveEnvironmentPress,
20 onSetEnvironmentEnabled,
21 onUpdateEnvironment,
22 } = useRemoteConnections();
23 const navigation = useNavigation();
24 const insets = useSafeAreaInsets();
25 const [expandedId, setExpandedId] = useState<EnvironmentId | null>(null);
26 const handleToggle = useCallback((environmentId: EnvironmentId) => {
27 setExpandedId((prev) => (prev === environmentId ? null : environmentId));
28 }, []);
29
30 return (
31 <View collapsable={false} className="flex-1 bg-sheet">
32 {Platform.OS === "android" ? (
33 <AndroidScreenHeader
34 title="Environments"
35 onBack={() => navigation.goBack()}
36 actions={[
37 {
38 accessibilityLabel: "Add environment",
39 icon: "plus",
40 onPress: () => navigation.navigate("ConnectionsNew"),
41 },
42 ]}
43 />
44 ) : (
45 <NativeHeaderToolbar placement="right">
46 <NativeHeaderToolbar.Button
47 icon="plus"
48 onPress={() => navigation.navigate("ConnectionsNew")}
49 separateBackground
50 />
51 </NativeHeaderToolbar>
52 )}
53 <ScrollView
54 contentInsetAdjustmentBehavior="automatic"
55 showsVerticalScrollIndicator={false}
56 className="flex-1"
57 contentContainerStyle={{
58 paddingBottom: Math.max(insets.bottom, 18) + 18,
59 paddingHorizontal: 20,
60 paddingTop: 16,
61 }}
62 >
63 <SelfHostedServerSection />
64 <LocalEnvironmentList
65 environments={connectedEnvironments}
66 expandedId={expandedId}
67 onToggle={handleToggle}
68 onReconnect={onReconnectEnvironment}
69 onRemove={onRemoveEnvironmentPress}
70 onSetEnabled={onSetEnvironmentEnabled}
71 onUpdate={onUpdateEnvironment}
72 />
73 <GitHubRoutingSettings />
74 </ScrollView>
75 </View>
76 );
77}