From de3134f1f38b691c87051acd6e409bd32449fe75 Mon Sep 17 00:00:00 2001
From: PalmDevs <git@palmdevs.me>
Date: Sat, 18 Oct 2025 19:07:09 +0700
Subject: [PATCH] fix(plugins/developer-kit): make address fields no longer
 sticky

---
 .../screens/RevengeDeveloperSettingScreen.tsx | 199 ++++++++++--------
 1 file changed, 108 insertions(+), 91 deletions(-)

diff --git a/src/plugins/start/developer-kit/screens/RevengeDeveloperSettingScreen.tsx b/src/plugins/start/developer-kit/screens/RevengeDeveloperSettingScreen.tsx
index 5c96a2a..cf74727 100644
--- a/src/plugins/start/developer-kit/screens/RevengeDeveloperSettingScreen.tsx
+++ b/src/plugins/start/developer-kit/screens/RevengeDeveloperSettingScreen.tsx
@@ -1,9 +1,9 @@
-import { styles } from '@revenge-mod/components/_'
 import { ToastActionCreators } from '@revenge-mod/discord/actions'
 import { Design } from '@revenge-mod/discord/design'
 import { SettingListRenderer } from '@revenge-mod/discord/modules/settings/renderer'
 import { lookupGeneratedIconComponent } from '@revenge-mod/utils/discord'
-import { View } from 'react-native'
+import { StyleSheet, View } from 'react-native'
+import { styles } from '#components/src/_internal'
 import { api } from '..'
 import { Setting } from '../constants'
 import { DTContext, useIsConnected as useIsDTConnected } from '../devtools'
@@ -18,39 +18,62 @@ const CircleCheckIcon = lookupGeneratedIconComponent(
     'CircleCheckIcon-primary',
 )
 
-// TODO(plugins/settings): debug bridge
+import { ScrollView } from 'react-native'
+
+const listStyles = StyleSheet.create({
+    container: {
+        flexGrow: 0,
+        flexShrink: 0,
+        height: 'auto',
+    },
+})
+
 export default function RevengeDeveloperSettingScreen() {
     return (
-        <Design.Stack spacing={0} style={styles.flex}>
-            <DTAddrSetting />
-            {globalThis.__REACT_DEVTOOLS__ && <RDTAddrSetting />}
-            <SettingListRenderer.SettingsList
-                sections={[
-                    {
-                        settings: [
-                            Setting.DTAutoConnect,
-                            Setting.DTConnect,
-                            Setting.DTDisconnect,
-                        ],
-                    },
-                    {
-                        settings: [
-                            Setting.RDTAutoConnect,
-                            Setting.RDTConnect,
-                            Setting.RDTDisconnect,
-                        ],
-                    },
-                    {
-                        label: 'Tools',
-                        settings: [
-                            Setting.EvalJS,
-                            Setting.AssetBrowser,
-                            Setting.TestErrorBoundary,
-                        ],
-                    },
-                ]}
-            />
-        </Design.Stack>
+        <ScrollView style={styles.flex}>
+            <Design.Stack spacing={8}>
+                <View>
+                    <SettingListRenderer.SettingsList
+                        containerStyle={listStyles.container}
+                        ListHeaderComponent={DTAddrSetting}
+                        sections={[
+                            {
+                                settings: [
+                                    Setting.DTAutoConnect,
+                                    Setting.DTConnect,
+                                    Setting.DTDisconnect,
+                                ],
+                            },
+                        ]}
+                    />
+                </View>
+                <View>
+                    <SettingListRenderer.SettingsList
+                        containerStyle={listStyles.container}
+                        ListHeaderComponent={
+                            RDTContext.active ? RDTAddrSetting : undefined
+                        }
+                        sections={[
+                            {
+                                settings: [
+                                    Setting.RDTAutoConnect,
+                                    Setting.RDTConnect,
+                                    Setting.RDTDisconnect,
+                                ],
+                            },
+                            {
+                                label: 'Tools',
+                                settings: [
+                                    Setting.EvalJS,
+                                    Setting.AssetBrowser,
+                                    Setting.TestErrorBoundary,
+                                ],
+                            },
+                        ]}
+                    />
+                </View>
+            </Design.Stack>
+        </ScrollView>
     )
 }
 
@@ -59,34 +82,32 @@ export function DTAddrSetting() {
     const settings = api.storage.use(s => s.devTools?.address)
 
     return (
-        <View style={{ paddingHorizontal: 16, paddingTop: 16 }}>
-            <Design.TextInput
-                defaultValue={settings?.devTools.address ?? DTContext.addr}
-                editable={!open}
-                isDisabled={open}
-                label="DevTools"
-                leadingText="ws://"
-                onBlur={() =>
-                    api.storage
-                        .set({
-                            devTools: {
-                                address: DTContext.addr,
-                            },
-                        })
-                        .then(() =>
-                            ToastActionCreators.open({
-                                IconComponent: CircleCheckIcon,
-                                key: 'DEVTOOLS_ADDRESS_SAVED',
-                                content: 'Address saved',
-                            }),
-                        )
-                }
-                onChange={text => {
-                    DTContext.addr = text
-                }}
-                returnKeyType="done"
-            />
-        </View>
+        <Design.TextInput
+            defaultValue={settings?.devTools.address ?? DTContext.addr}
+            editable={!open}
+            isDisabled={open}
+            label="DevTools"
+            leadingText="ws://"
+            onBlur={() =>
+                api.storage
+                    .set({
+                        devTools: {
+                            address: DTContext.addr,
+                        },
+                    })
+                    .then(() =>
+                        ToastActionCreators.open({
+                            IconComponent: CircleCheckIcon,
+                            key: 'DEVTOOLS_ADDRESS_SAVED',
+                            content: 'Address saved',
+                        }),
+                    )
+            }
+            onChange={text => {
+                DTContext.addr = text
+            }}
+            returnKeyType="done"
+        />
     )
 }
 
@@ -95,35 +116,31 @@ export function RDTAddrSetting() {
     const settings = api.storage.use(s => s.reactDevTools?.address)
 
     return (
-        <View style={{ paddingHorizontal: 16, paddingTop: 16 }}>
-            <Design.TextInput
-                defaultValue={
-                    settings?.reactDevTools.address ?? RDTContext.addr
-                }
-                editable={!open}
-                isDisabled={open}
-                label="React DevTools"
-                leadingText="ws://"
-                onBlur={() =>
-                    api.storage
-                        .set({
-                            reactDevTools: {
-                                address: RDTContext.addr,
-                            },
-                        })
-                        .then(() =>
-                            ToastActionCreators.open({
-                                IconComponent: CircleCheckIcon,
-                                key: 'REACT_DEVTOOLS_ADDRESS_SAVED',
-                                content: 'Address saved',
-                            }),
-                        )
-                }
-                onChange={text => {
-                    RDTContext.addr = text
-                }}
-                returnKeyType="done"
-            />
-        </View>
+        <Design.TextInput
+            defaultValue={settings?.reactDevTools.address ?? RDTContext.addr}
+            editable={!open}
+            isDisabled={open}
+            label="React DevTools"
+            leadingText="ws://"
+            onBlur={() =>
+                api.storage
+                    .set({
+                        reactDevTools: {
+                            address: RDTContext.addr,
+                        },
+                    })
+                    .then(() =>
+                        ToastActionCreators.open({
+                            IconComponent: CircleCheckIcon,
+                            key: 'REACT_DEVTOOLS_ADDRESS_SAVED',
+                            content: 'Address saved',
+                        }),
+                    )
+            }
+            onChange={text => {
+                RDTContext.addr = text
+            }}
+            returnKeyType="done"
+        />
     )
 }