From cb8f37304423ff421d9981839227825d4e1c7298 Mon Sep 17 00:00:00 2001
From: Adam Shiervani <adam.shiervani@gmail.com>
Date: Thu, 27 Feb 2025 16:43:05 +0100
Subject: [PATCH] feat(ui): Add dev channel toggle to advanced settings

Move dev channel update option from general settings to advanced settings
- Introduced new state and handler for dev channel toggle
- Removed dev channel option from general settings route
- Added dev channel toggle in advanced settings with error handling
---
 .../routes/devices.$id.settings.advanced.tsx  | 110 +++++++++++-------
 .../devices.$id.settings.general._index.tsx   |  29 -----
 2 files changed, 68 insertions(+), 71 deletions(-)

diff --git a/ui/src/routes/devices.$id.settings.advanced.tsx b/ui/src/routes/devices.$id.settings.advanced.tsx
index c311040..6178bd5 100644
--- a/ui/src/routes/devices.$id.settings.advanced.tsx
+++ b/ui/src/routes/devices.$id.settings.advanced.tsx
@@ -17,10 +17,12 @@ export default function SettingsAdvancedRoute() {
 
   const [sshKey, setSSHKey] = useState<string>("");
   const setDeveloperMode = useSettingsStore(state => state.setDeveloperMode);
+  const [devChannel, setDevChannel] = useState(false);
+  const [usbEmulationEnabled, setUsbEmulationEnabled] = useState(false);
+
   const settings = useSettingsStore();
 
   useEffect(() => {
-
     send("getDevModeState", {}, resp => {
       if ("error" in resp) return;
       const result = resp.result as { enabled: boolean };
@@ -36,6 +38,11 @@ export default function SettingsAdvancedRoute() {
       if ("error" in resp) return;
       setUsbEmulationEnabled(resp.result as boolean);
     });
+
+    send("getDevChannelState", {}, resp => {
+      if ("error" in resp) return;
+      setDevChannel(resp.result as boolean);
+    });
   }, [send, setDeveloperMode]);
 
   const getUsbEmulationState = useCallback(() => {
@@ -45,7 +52,6 @@ export default function SettingsAdvancedRoute() {
     });
   }, [send]);
 
-
   const handleUsbEmulationToggle = useCallback(
     (enabled: boolean) => {
       send("setUsbEmulationState", { enabled: enabled }, resp => {
@@ -101,7 +107,17 @@ export default function SettingsAdvancedRoute() {
     [send, setDeveloperMode],
   );
 
-  const [usbEmulationEnabled, setUsbEmulationEnabled] = useState(false);
+  const handleDevChannelChange = (enabled: boolean) => {
+    send("setDevChannelState", { enabled }, resp => {
+      if ("error" in resp) {
+        notifications.error(
+          `Failed to set dev channel state: ${resp.error.data || "Unknown error"}`,
+        );
+        return;
+      }
+      setDevChannel(enabled);
+    });
+  };
 
   return (
     <div className="space-y-4">
@@ -112,51 +128,16 @@ export default function SettingsAdvancedRoute() {
 
       <div className="space-y-4">
         <SettingsItem
-          title="Troubleshooting Mode"
-          description="Diagnostic tools and additional controls for troubleshooting and development purposes"
+          title="Dev Channel Updates"
+          description="Receive early updates from the development channel"
         >
           <Checkbox
-            defaultChecked={settings.debugMode}
+            checked={devChannel}
             onChange={e => {
-              settings.setDebugMode(e.target.checked);
+              handleDevChannelChange(e.target.checked);
             }}
           />
         </SettingsItem>
-
-        {settings.debugMode && (
-          <>
-            <SettingsItem
-              title="USB Emulation"
-              description="Control the USB emulation state"
-            >
-              <Button
-                size="SM"
-                theme="light"
-                text={
-                  usbEmulationEnabled ? "Disable USB Emulation" : "Enable USB Emulation"
-                }
-                onClick={() => handleUsbEmulationToggle(!usbEmulationEnabled)}
-              />
-            </SettingsItem>
-
-            <SettingsItem
-              title="Reset Configuration"
-              description="Reset configuration to default. This will log you out."
-            >
-              <Button
-                size="SM"
-                theme="light"
-                text="Reset Config"
-                onClick={() => {
-                  handleResetConfig();
-                  window.location.reload();
-                }}
-              />
-            </SettingsItem>
-            <div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20" />
-          </>
-        )}
-
         <SettingsItem
           title="Developer Mode"
           description="Enable advanced features for developers"
@@ -231,6 +212,51 @@ export default function SettingsAdvancedRoute() {
             </div>
           </div>
         )}
+
+        <SettingsItem
+          title="Troubleshooting Mode"
+          description="Diagnostic tools and additional controls for troubleshooting and development purposes"
+        >
+          <Checkbox
+            defaultChecked={settings.debugMode}
+            onChange={e => {
+              settings.setDebugMode(e.target.checked);
+            }}
+          />
+        </SettingsItem>
+
+        {settings.debugMode && (
+          <>
+            <SettingsItem
+              title="USB Emulation"
+              description="Control the USB emulation state"
+            >
+              <Button
+                size="SM"
+                theme="light"
+                text={
+                  usbEmulationEnabled ? "Disable USB Emulation" : "Enable USB Emulation"
+                }
+                onClick={() => handleUsbEmulationToggle(!usbEmulationEnabled)}
+              />
+            </SettingsItem>
+
+            <SettingsItem
+              title="Reset Configuration"
+              description="Reset configuration to default. This will log you out."
+            >
+              <Button
+                size="SM"
+                theme="light"
+                text="Reset Config"
+                onClick={() => {
+                  handleResetConfig();
+                  window.location.reload();
+                }}
+              />
+            </SettingsItem>
+          </>
+        )}
       </div>
     </div>
   );
diff --git a/ui/src/routes/devices.$id.settings.general._index.tsx b/ui/src/routes/devices.$id.settings.general._index.tsx
index 75fa7b6..f4d258d 100644
--- a/ui/src/routes/devices.$id.settings.general._index.tsx
+++ b/ui/src/routes/devices.$id.settings.general._index.tsx
@@ -14,7 +14,6 @@ export default function SettingsGeneralRoute() {
   const [send] = useJsonRpc();
   const { navigateTo } = useDeviceUiNavigation();
 
-  const [devChannel, setDevChannel] = useState(false);
   const [autoUpdate, setAutoUpdate] = useState(true);
   const [currentVersions, setCurrentVersions] = useState<{
     appVersion: string;
@@ -38,11 +37,6 @@ export default function SettingsGeneralRoute() {
       if ("error" in resp) return;
       setAutoUpdate(resp.result as boolean);
     });
-
-    send("getDevChannelState", {}, resp => {
-      if ("error" in resp) return;
-      setDevChannel(resp.result as boolean);
-    });
   }, [getCurrentVersions, send]);
 
   const handleAutoUpdateChange = (enabled: boolean) => {
@@ -57,18 +51,6 @@ export default function SettingsGeneralRoute() {
     });
   };
 
-  const handleDevChannelChange = (enabled: boolean) => {
-    send("setDevChannelState", { enabled }, resp => {
-      if ("error" in resp) {
-        notifications.error(
-          `Failed to set dev channel state: ${resp.error.data || "Unknown error"}`,
-        );
-        return;
-      }
-      setDevChannel(enabled);
-    });
-  };
-
   return (
     <div className="space-y-4">
       <SettingsPageHeader
@@ -118,17 +100,6 @@ export default function SettingsGeneralRoute() {
                 }}
               />
             </SettingsItem>
-            <SettingsItem
-              title="Dev Channel Updates"
-              description="Receive early updates from the development channel"
-            >
-              <Checkbox
-                checked={devChannel}
-                onChange={e => {
-                  handleDevChannelChange(e.target.checked);
-                }}
-              />
-            </SettingsItem>
           </div>
         </div>
       </div>