From 1a2a03f44b7ef6e3159a67a262c1586dbd3d3d5b Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Thu, 17 Sep 2026 20:20:12 -0700
Subject: [PATCH] refactor(mobile): share local environment lists (#12365)

---
 .../connection/ConnectionsRouteScreen.tsx     | 51 ++++------------
 .../connection/LocalEnvironmentList.tsx       | 60 +++++++++++++++++++
 .../SettingsEnvironmentsRouteScreen.tsx       | 53 ++++------------
 3 files changed, 81 insertions(+), 83 deletions(-)
 create mode 100644 apps/mobile/src/features/connection/LocalEnvironmentList.tsx

diff --git a/apps/mobile/src/features/connection/ConnectionsRouteScreen.tsx b/apps/mobile/src/features/connection/ConnectionsRouteScreen.tsx
index 28bb5327043455896905f991c67bbfa28faae415..1e7f128ed43b929ee399953f78eacfc62b4d398c 100644
--- a/apps/mobile/src/features/connection/ConnectionsRouteScreen.tsx
+++ b/apps/mobile/src/features/connection/ConnectionsRouteScreen.tsx
@@ -1,17 +1,14 @@
 import { ScreenScrollView as ScrollView } from "../../components/ScreenScrollView";
 import { NativeHeaderToolbar } from "../../native/StackHeader";
 import { useNavigation } from "@react-navigation/native";
-import { SymbolView } from "../../components/AppSymbol";
 import type { EnvironmentId } from "@t3tools/contracts";
 import { useCallback, useState } from "react";
 import { Platform, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 import { AndroidScreenHeader } from "../../components/AndroidScreenHeader";
-import { AppText as Text } from "../../components/AppText";
-import { cn } from "../../lib/cn";
 import { useRemoteConnections } from "../../state/use-remote-environment-registry";
-import { ConnectionEnvironmentRow } from "./ConnectionEnvironmentRow";
+import { LocalEnvironmentList } from "./LocalEnvironmentList";
 import { GitHubRoutingSettings } from "./GitHubRoutingSettings";
 
 export function ConnectionsRouteScreen() {
@@ -24,7 +21,6 @@ export function ConnectionsRouteScreen() {
   } = useRemoteConnections();
   const navigation = useNavigation();
   const insets = useSafeAreaInsets();
-  const hasEnvironments = connectedEnvironments.length > 0;
   const [expandedId, setExpandedId] = useState<EnvironmentId | null>(null);
   const handleToggle = useCallback((environmentId: EnvironmentId) => {
     setExpandedId((prev) => (prev === environmentId ? null : environmentId));
@@ -63,42 +59,15 @@ export function ConnectionsRouteScreen() {
           paddingTop: 16,
         }}
       >
-        {hasEnvironments ? (
-          <View collapsable={false} className="overflow-hidden rounded-[24px] bg-card">
-            {connectedEnvironments.map((environment, index) => (
-              <View
-                key={environment.environmentId}
-                collapsable={false}
-                className={cn(index !== 0 && "border-t border-border")}
-              >
-                <ConnectionEnvironmentRow
-                  environment={environment}
-                  expanded={expandedId === environment.environmentId}
-                  onToggle={() => handleToggle(environment.environmentId)}
-                  onReconnect={onReconnectEnvironment}
-                  onRemove={onRemoveEnvironmentPress}
-                  onSetEnabled={onSetEnvironmentEnabled}
-                  onUpdate={onUpdateEnvironment}
-                />
-              </View>
-            ))}
-          </View>
-        ) : (
-          <View collapsable={false} className="items-center gap-3 rounded-[24px] bg-card px-6 py-8">
-            <View className="h-12 w-12 items-center justify-center rounded-[16px] bg-subtle">
-              <SymbolView
-                name="point.3.connected.trianglepath.dotted"
-                size={20}
-                tintColorClassName={"accent-icon-muted"}
-                type="monochrome"
-              />
-            </View>
-            <Text className="text-center text-sm leading-normal text-foreground-muted">
-              No environments connected yet.{"\n"}Tap{" "}
-              <Text className="font-t3-bold text-foreground">+</Text> to add one.
-            </Text>
-          </View>
-        )}
+        <LocalEnvironmentList
+          environments={connectedEnvironments}
+          expandedId={expandedId}
+          onToggle={handleToggle}
+          onReconnect={onReconnectEnvironment}
+          onRemove={onRemoveEnvironmentPress}
+          onSetEnabled={onSetEnvironmentEnabled}
+          onUpdate={onUpdateEnvironment}
+        />
         <GitHubRoutingSettings />
       </ScrollView>
     </View>
diff --git a/apps/mobile/src/features/connection/LocalEnvironmentList.tsx b/apps/mobile/src/features/connection/LocalEnvironmentList.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..dca29e092f64eb4c099e1c80426e5d3b5670292b
--- /dev/null
+++ b/apps/mobile/src/features/connection/LocalEnvironmentList.tsx
@@ -0,0 +1,60 @@
+import type { EnvironmentId } from "@t3tools/contracts";
+import type { ComponentProps } from "react";
+import { View } from "react-native";
+
+import { SymbolView } from "../../components/AppSymbol";
+import { AppText as Text } from "../../components/AppText";
+import { cn } from "../../lib/cn";
+import { ConnectionEnvironmentRow } from "./ConnectionEnvironmentRow";
+
+type EnvironmentRowProps = ComponentProps<typeof ConnectionEnvironmentRow>;
+
+/** Shared list and empty state for environment management entry points. */
+export function LocalEnvironmentList({
+  environments,
+  expandedId,
+  onToggle,
+  ...rowActions
+}: Pick<EnvironmentRowProps, "onReconnect" | "onRemove" | "onSetEnabled" | "onUpdate"> & {
+  readonly environments: ReadonlyArray<EnvironmentRowProps["environment"]>;
+  readonly expandedId: EnvironmentId | null;
+  readonly onToggle: (environmentId: EnvironmentId) => void;
+}) {
+  if (environments.length === 0) {
+    return (
+      <View collapsable={false} className="items-center gap-3 rounded-[24px] bg-card px-6 py-8">
+        <View className="h-12 w-12 items-center justify-center rounded-[16px] bg-subtle">
+          <SymbolView
+            name="point.3.connected.trianglepath.dotted"
+            size={20}
+            tintColorClassName="accent-icon-muted"
+            type="monochrome"
+          />
+        </View>
+        <Text className="text-center text-sm leading-normal text-foreground-muted">
+          No environments connected yet.{"\n"}Tap{" "}
+          <Text className="font-t3-bold text-foreground">+</Text> to add one.
+        </Text>
+      </View>
+    );
+  }
+
+  return (
+    <View collapsable={false} className="overflow-hidden rounded-[24px] bg-card">
+      {environments.map((environment, index) => (
+        <View
+          key={environment.environmentId}
+          collapsable={false}
+          className={cn(index !== 0 && "border-t border-border")}
+        >
+          <ConnectionEnvironmentRow
+            environment={environment}
+            expanded={expandedId === environment.environmentId}
+            onToggle={() => onToggle(environment.environmentId)}
+            {...rowActions}
+          />
+        </View>
+      ))}
+    </View>
+  );
+}
diff --git a/apps/mobile/src/features/settings/SettingsEnvironmentsRouteScreen.tsx b/apps/mobile/src/features/settings/SettingsEnvironmentsRouteScreen.tsx
index 1ca43b5a73cfa3d920bb97da917c7423a32196f5..90c4d0ef73d934ce3a0fcaa7cee4afa23a9b6e16 100644
--- a/apps/mobile/src/features/settings/SettingsEnvironmentsRouteScreen.tsx
+++ b/apps/mobile/src/features/settings/SettingsEnvironmentsRouteScreen.tsx
@@ -1,19 +1,16 @@
 import { ScreenScrollView as ScrollView } from "../../components/ScreenScrollView";
 import { NativeHeaderToolbar } from "../../native/StackHeader";
 import { useNavigation } from "@react-navigation/native";
-import { SymbolView } from "../../components/AppSymbol";
 import type { EnvironmentId } from "@t3tools/contracts";
 import { useCallback, useState } from "react";
-import { Platform, View } from "react-native";
+import { Platform } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
-import { AppText as Text } from "../../components/AppText";
 import { SettingsScreen } from "./components/SettingsScreen";
 import { CloudEnvironmentRows } from "../connection/CloudEnvironmentRows";
-import { ConnectionEnvironmentRow } from "../connection/ConnectionEnvironmentRow";
+import { LocalEnvironmentList } from "../connection/LocalEnvironmentList";
 import { GitHubRoutingSettings } from "../connection/GitHubRoutingSettings";
 import { splitEnvironmentSections } from "../connection/environmentSections";
-import { cn } from "../../lib/cn";
 import { useUniwindTheme } from "../../lib/useUniwindTheme";
 import { useRemoteConnections } from "../../state/use-remote-environment-registry";
 import {
@@ -45,7 +42,6 @@ export function SettingsEnvironmentsRouteScreen() {
   const connectedCloudEnvironments = SHOWCASE_ENABLED
     ? SHOWCASE_CONNECTED_CLOUD_ENVIRONMENTS
     : environmentSections.connectedCloudEnvironments;
-  const hasLocalEnvironments = localEnvironments.length > 0;
   const [expandedId, setExpandedId] = useState<EnvironmentId | null>(null);
   const headerIconColor = useUniwindTheme()["--color-icon"];
 
@@ -118,42 +114,15 @@ export function SettingsEnvironmentsRouteScreen() {
           paddingBottom: Math.max(insets.bottom, 18) + 18,
         }}
       >
-        {hasLocalEnvironments ? (
-          <View collapsable={false} className="overflow-hidden rounded-[24px] bg-card">
-            {localEnvironments.map((environment, index) => (
-              <View
-                key={environment.environmentId}
-                collapsable={false}
-                className={cn(index !== 0 && "border-t border-border")}
-              >
-                <ConnectionEnvironmentRow
-                  environment={environment}
-                  expanded={expandedId === environment.environmentId}
-                  onToggle={() => handleToggle(environment.environmentId)}
-                  onReconnect={onReconnectEnvironment}
-                  onRemove={onRemoveEnvironmentPress}
-                  onSetEnabled={onSetEnvironmentEnabled}
-                  onUpdate={handleUpdateEnvironment}
-                />
-              </View>
-            ))}
-          </View>
-        ) : (
-          <View collapsable={false} className="items-center gap-3 rounded-[24px] bg-card px-6 py-8">
-            <View className="h-12 w-12 items-center justify-center rounded-[16px] bg-subtle">
-              <SymbolView
-                name="point.3.connected.trianglepath.dotted"
-                size={20}
-                tintColorClassName={"accent-icon-muted"}
-                type="monochrome"
-              />
-            </View>
-            <Text className="text-center text-sm leading-normal text-foreground-muted">
-              No environments connected yet.{"\n"}Tap{" "}
-              <Text className="font-t3-bold text-foreground">+</Text> to add one.
-            </Text>
-          </View>
-        )}
+        <LocalEnvironmentList
+          environments={localEnvironments}
+          expandedId={expandedId}
+          onToggle={handleToggle}
+          onReconnect={onReconnectEnvironment}
+          onRemove={onRemoveEnvironmentPress}
+          onSetEnabled={onSetEnvironmentEnabled}
+          onUpdate={handleUpdateEnvironment}
+        />
 
         {/* Always mounted: already-connected relay environments must stay
             visible (and removable) even when cloud config is missing or the
-- 
2.54.0