refactor: mprove UI settings structure with NestedSettingsGroup

ui/src/components/NestedSettingsGroup.tsx

@@ -0,0 +1,22 @@
+import { cx } from "@/cva.config";
+
+interface NestedSettingsGroupProps {
+  readonly children: React.ReactNode;
+  readonly className?: string;
+}
+
+export function NestedSettingsGroup(props: NestedSettingsGroupProps) {
+  const { children, className } = props;
+
+  return (
+    <div
+      className={cx(
+        "space-y-4 border-l-2 border-slate-200 ml-2 pl-4 dark:border-slate-700",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+

ui/src/routes/devices.$id.settings.access._index.tsx

@@ -11,6 +11,7 @@ import { SelectMenuBasic } from "@components/SelectMenuBasic";
 import { SettingsItem } from "@components/SettingsItem";
 import { SettingsPageHeader } from "@components/SettingsPageheader";
 import { SettingsSectionHeader } from "@components/SettingsSectionHeader";
+import { NestedSettingsGroup } from "@components/NestedSettingsGroup";
 import { TextAreaWithLabel } from "@components/TextArea";
 import api from "@/api";
 import notifications from "@/notifications";
@@ -237,13 +238,11 @@ export default function SettingsAccessIndexRoute() {
               </SettingsItem>
 
               {tlsMode === "custom" && (
-                <div className="mt-4 space-y-4">
+                <NestedSettingsGroup className="mt-4">
-                  <div className="space-y-4">
                   <SettingsItem
                     title={m.access_tls_certificate_title()}
                     description={m.access_tls_certificate_description()}
                   />
-                    <div className="space-y-4">
                   <TextAreaWithLabel
                     label={m.access_certificate_label()}
                     rows={3}
@@ -253,10 +252,6 @@ export default function SettingsAccessIndexRoute() {
                     value={tlsCert}
                     onChange={e => handleTlsCertChange(e.target.value)}
                   />
-                    </div>
-
-                    <div className="space-y-4">
-                      <div className="space-y-4">
                   <TextAreaWithLabel
                     label={m.access_private_key_label()}
                     description={m.access_private_key_description()}
@@ -267,9 +262,6 @@ export default function SettingsAccessIndexRoute() {
                     value={tlsKey}
                     onChange={e => handleTlsKeyChange(e.target.value)}
                   />
-                      </div>
-                    </div>
-                  </div>
                   <div className="flex items-center gap-x-2">
                     <Button
                       size="SM"
@@ -278,7 +270,7 @@ export default function SettingsAccessIndexRoute() {
                       onClick={handleCustomTlsUpdate}
                     />
                   </div>
-                </div>
+                </NestedSettingsGroup>
               )}
 
               <SettingsItem
@@ -352,7 +344,7 @@ export default function SettingsAccessIndexRoute() {
               </SettingsItem>
 
               {selectedProvider === "custom" && (
-                <div className="mt-4 space-y-4">
+                <NestedSettingsGroup className="mt-4">
                   <div className="flex items-end gap-x-2">
                     <InputFieldWithLabel
                       size="SM"
@@ -371,7 +363,7 @@ export default function SettingsAccessIndexRoute() {
                       placeholder="https://app.example.com"
                     />
                   </div>
-                </div>
+                </NestedSettingsGroup>
               )}
             </>
           )}

ui/src/routes/devices.$id.settings.advanced.tsx

@@ -8,6 +8,7 @@ import { ConfirmDialog } from "@components/ConfirmDialog";
 import { GridCard } from "@components/Card";
 import { SettingsItem } from "@components/SettingsItem";
 import { SettingsPageHeader } from "@components/SettingsPageheader";
+import { NestedSettingsGroup } from "@components/NestedSettingsGroup";
 import { TextAreaWithLabel } from "@components/TextArea";
 import { isOnDevice } from "@/main";
 import notifications from "@/notifications";
@@ -201,8 +202,8 @@ export default function SettingsAdvancedRoute() {
             onChange={e => handleDevModeChange(e.target.checked)}
           />
         </SettingsItem>
-
+        {settings.developerMode ? (
-        {settings.developerMode && (
+          <NestedSettingsGroup>
             <GridCard>
               <div className="flex items-start gap-x-4 p-4 select-none">
                 <svg
@@ -235,25 +236,13 @@ export default function SettingsAdvancedRoute() {
                 </div>
               </div>
             </GridCard>
-        )}
 
-        <SettingsItem
+            {isOnDevice && (
-          title={m.advanced_loopback_only_title()}
-          description={m.advanced_loopback_only_description()}
-        >
-          <Checkbox
-            checked={localLoopbackOnly}
-            onChange={e => handleLoopbackOnlyModeChange(e.target.checked)}
-          />
-        </SettingsItem>
-
-        {isOnDevice && settings.developerMode && (
               <div className="space-y-4">
                 <SettingsItem
                   title={m.advanced_ssh_access_title()}
                   description={m.advanced_ssh_access_description()}
                 />
-            <div className="space-y-4">
                 <TextAreaWithLabel
                   label={m.advanced_ssh_public_key_label()}
                   value={sshKey || ""}
@@ -273,8 +262,21 @@ export default function SettingsAdvancedRoute() {
                   />
                 </div>
               </div>
-          </div>
             )}
+          </NestedSettingsGroup>
+        ) : null}
+
+        <SettingsItem
+          title={m.advanced_loopback_only_title()}
+          description={m.advanced_loopback_only_description()}
+        >
+          <Checkbox
+            checked={localLoopbackOnly}
+            onChange={e => handleLoopbackOnlyModeChange(e.target.checked)}
+          />
+        </SettingsItem>
+
+
 
         <SettingsItem
           title={m.advanced_troubleshooting_mode_title()}
@@ -289,7 +291,7 @@ export default function SettingsAdvancedRoute() {
         </SettingsItem>
 
         {settings.debugMode && (
-          <>
+          <NestedSettingsGroup>
             <SettingsItem
               title={m.advanced_usb_emulation_title()}
               description={m.advanced_usb_emulation_description()}
@@ -320,7 +322,7 @@ export default function SettingsAdvancedRoute() {
                 }}
               />
             </SettingsItem>
-          </>
+          </NestedSettingsGroup>
         )}
       </div>
 

ui/src/routes/devices.$id.settings.general._index.tsx

@@ -12,13 +12,11 @@ import notifications from "@/notifications";
 import { getLocale, setLocale, locales, baseLocale } from '@localizations/runtime.js';
 import { m } from "@localizations/messages.js";
 import { deleteCookie, map_locale_code_to_name } from "@/utils";
-import { useVersion } from "@hooks/useVersion";
 
 export default function SettingsGeneralRoute() {
   const { send } = useJsonRpc();
   const { navigateTo } = useDeviceUiNavigation();
   const [autoUpdate, setAutoUpdate] = useState(true);
-  const { isOnDevVersion } = useVersion();
   const currentVersions = useDeviceStore(state => {
     const { appVersion, systemVersion } = state;
     if (!appVersion || !systemVersion) return null;
@@ -75,10 +73,6 @@ export default function SettingsGeneralRoute() {
     notifications.success(m.locale_change_success({ locale: validLocale || m.locale_auto() }));
   };
 
-  const downgradeAvailable = useMemo(() => {
-    return isOnDevVersion;
-  }, [isOnDevVersion]);
-
   return (
     <div className="space-y-4">
       <SettingsPageHeader
@@ -114,12 +108,6 @@ export default function SettingsGeneralRoute() {
               }
             />
             <div className="flex items-center justify-start gap-x-2">
-              {downgradeAvailable && <Button
-                size="SM"
-                theme="danger"
-                text={m.general_check_for_stable_updates()}
-                onClick={() => navigateTo("./update?channel=stable")}
-              />}
               <Button
                 size="SM"
                 theme="light"

ui/src/routes/devices.$id.settings.general.update.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useLocation, useNavigate, useSearchParams } from "react-router";
+import { useLocation, useNavigate } from "react-router";
 
 import { useJsonRpc } from "@hooks/useJsonRpc";
 import { UpdateState, useUpdateStore } from "@hooks/stores";

ui/src/routes/devices.$id.settings.hardware.tsx

@@ -8,6 +8,7 @@ import { SelectMenuBasic } from "@components/SelectMenuBasic";
 import { SettingsItem } from "@components/SettingsItem";
 import { SettingsPageHeader } from "@components/SettingsPageheader";
 import { SettingsSectionHeader } from "@components/SettingsSectionHeader";
+import { NestedSettingsGroup } from "@components/NestedSettingsGroup";
 import { UsbDeviceSetting } from "@components/UsbDeviceSetting";
 import { UsbInfoSetting } from "@components/UsbInfoSetting";
 import notifications from "@/notifications";
@@ -156,7 +157,7 @@ export default function SettingsHardwareRoute() {
           />
         </SettingsItem>
         {backlightSettings.max_brightness != 0 && (
-          <>
+          <NestedSettingsGroup>
             <SettingsItem
               title={m.hardware_dim_display_after_title()}
               description={m.hardware_dim_display_after_description()}
@@ -198,7 +199,7 @@ export default function SettingsHardwareRoute() {
                 }}
               />
             </SettingsItem>
-          </>
+          </NestedSettingsGroup>
         )}
         <p className="text-xs text-slate-600 dark:text-slate-400">
           {m.hardware_display_wake_up_note()}

ui/src/routes/devices.$id.settings.video.tsx

@@ -7,6 +7,7 @@ import { JsonRpcResponse, useJsonRpc } from "@/hooks/useJsonRpc";
 import { SettingsItem } from "@components/SettingsItem";
 import { SettingsPageHeader } from "@components/SettingsPageheader";
 import { SelectMenuBasic } from "@components/SelectMenuBasic";
+import { NestedSettingsGroup } from "@components/NestedSettingsGroup";
 import Fieldset from "@components/Fieldset";
 import notifications from "@/notifications";
 import { m } from "@localizations/messages.js";
@@ -174,7 +175,7 @@ export default function SettingsVideoRoute() {
               description={m.video_enhancement_description()}
             />
 
-            <div className="space-y-4 pl-4">
+            <NestedSettingsGroup>
               <SettingsItem
                 title={m.video_saturation_title()}
                 description={m.video_saturation_description({ value: videoSaturation.toFixed(1) })}
@@ -232,7 +233,7 @@ export default function SettingsVideoRoute() {
                   }}
                 />
               </div>
-            </div>
+            </NestedSettingsGroup>
             <Fieldset disabled={edidLoading} className="space-y-2">
               <SettingsItem
                 title={m.video_edid_title()}