1import { ScreenScrollView as ScrollView } from "../../components/ui/ScreenScrollView";
2
3import { useNavigation } from "@react-navigation/native";
4import type { EnvironmentId } from "@t3tools/contracts";
5import { useState } from "react";
6import { View } from "react-native";
7import { useSafeAreaInsets } from "react-native-safe-area-context";
8
9import { AppBar } from "../../components/ui/AppBar";
10import { useRemoteConnections } from "../../state/use-remote-environment-registry";
11import { LocalEnvironmentList } from "./LocalEnvironmentList";
12import { PullRequestRoutingSettings } from "./PullRequestRoutingSettings";
13import { LinkedEnvironmentsSection } from "./LinkedEnvironmentsSection";
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 = (environmentId: EnvironmentId) => {
27 setExpandedId((prev) => (prev === environmentId ? null : environmentId));
28 };
29
30 return (
31 <View collapsable={false} className="flex-1 bg-sheet">
32 <AppBar
33 title="Environments"
34 onClose={() => navigation.goBack()}
35 closeAccessibilityLabel="Close environments"
36 actions={[
37 {
38 accessibilityLabel: "Add environment",
39 icon: "plus",
40 onPress: () => navigation.navigate("ConnectionsNew"),
41 },
42 ]}
43 />
44 <ScrollView
45 contentInsetAdjustmentBehavior="automatic"
46 showsVerticalScrollIndicator={false}
47 className="flex-1"
48 contentContainerStyle={{
49 paddingBottom: Math.max(insets.bottom, 18) + 18,
50 paddingHorizontal: 20,
51 paddingTop: 16,
52 }}
53 >
54 <LocalEnvironmentList
55 environments={connectedEnvironments}
56 expandedId={expandedId}
57 onToggle={handleToggle}
58 onReconnect={onReconnectEnvironment}
59 onRemove={onRemoveEnvironmentPress}
60 onSetEnabled={onSetEnvironmentEnabled}
61 onUpdate={onUpdateEnvironment}
62 />
63 {connectedEnvironments
64 .filter((environment) => environment.connectionState === "connected")
65 .map((environment) => (
66 <LinkedEnvironmentsSection
67 key={environment.environmentId}
68 environmentId={environment.environmentId}
69 environmentLabel={environment.environmentLabel}
70 />
71 ))}
72 <PullRequestRoutingSettings />
73 </ScrollView>
74 </View>
75 );
76}