split settings into tiles

app/lib/features/settings/presentation/screens/developer_settings.dart

@@ -38,18 +38,11 @@ import 'package:weblibre/features/user/domain/repositories/engine_settings.dart'
 import 'package:weblibre/utils/exit_app.dart';
 import 'package:weblibre/utils/ui_helper.dart';
 
-class DeveloperSettingsScreen extends HookConsumerWidget {
+class DeveloperSettingsScreen extends StatelessWidget {
   const DeveloperSettingsScreen();
 
   @override
-  Widget build(BuildContext context, WidgetRef ref) {
+  Widget build(BuildContext context) {
-    final engineSettings = ref.watch(engineSettingsWithDefaultsProvider);
-
-    final userAgentTextController = useTextEditingController(
-      text: engineSettings.userAgent,
-      keys: [engineSettings.userAgent],
-    );
-
     return Scaffold(
       appBar: AppBar(title: const Text('Developer Settings')),
       body: FadingScroll(
@@ -57,170 +50,16 @@ class DeveloperSettingsScreen extends HookConsumerWidget {
         builder: (context, controller) {
           return ListView(
             controller: controller,
-            children: [
+            padding: const EdgeInsets.symmetric(horizontal: 12.0),
-              SwitchListTile.adaptive(
+            children: const [
-                title: const Text('Enable JavaScript'),
+              _JavaScriptTile(),
-                subtitle: const Text(
+              _UserAgentTile(),
-                  'While turning off JavaScript can boost security, privacy, and speed, it may cause some sites to not work as intended.',
+              _EnterpriseRootsTile(),
-                ),
+              _FingerprintProtectionTile(),
-                // ignore: deprecated_member_use use this icon for now
+              _ErrorLogsTile(),
-                secondary: const Icon(MdiIcons.languageJavascript),
+              _DartVmTile(),
-                value: engineSettings.javascriptEnabled,
+              _AddonCollectionTile(),
-                onChanged: (value) async {
+              _ResetUITile(),
-                  await ref
-                      .read(saveEngineSettingsControllerProvider.notifier)
-                      .save(
-                        (currentSettings) =>
-                            currentSettings.copyWith.javascriptEnabled(value),
-                      );
-                },
-              ),
-              ListTile(
-                leading: const Icon(MdiIcons.cardAccountDetails),
-                title: TextField(
-                  controller: userAgentTextController,
-                  decoration: const InputDecoration(
-                    labelText: 'Custom User Agent',
-                    floatingLabelBehavior: FloatingLabelBehavior.always,
-                    hintText: 'Mozilla/5.0 …',
-                  ),
-                  onSubmitted: (value) async {
-                    await ref
-                        .read(saveEngineSettingsControllerProvider.notifier)
-                        .save(
-                          (currentSettings) =>
-                              currentSettings.copyWith.userAgent(value),
-                        );
-
-                    if (context.mounted) {
-                      final restart = await showUserAgentRestartDialog(context);
-
-                      if (restart == true) {
-                        await exitApp(ref.container);
-                      }
-                    }
-                  },
-                ),
-              ),
-              SwitchListTile.adaptive(
-                title: const Text('Use third party CA certificates'),
-                subtitle: const Text(
-                  'Allows the use of third party certificates from the Android CA store',
-                ),
-                secondary: const Icon(MdiIcons.certificate),
-                value: engineSettings.enterpriseRootsEnabled,
-                onChanged: (value) async {
-                  await ref
-                      .read(saveEngineSettingsControllerProvider.notifier)
-                      .save(
-                        (currentSettings) => currentSettings.copyWith
-                            .enterpriseRootsEnabled(value),
-                      );
-                },
-              ),
-              ListTile(
-                title: const Text('Fingerprint Protection'),
-                contentPadding: const EdgeInsets.symmetric(
-                  vertical: 8.0,
-                  horizontal: 16.0,
-                ),
-                leading: const Icon(MdiIcons.fingerprint),
-                trailing: const Icon(Icons.chevron_right),
-                onTap: () async {
-                  await FingerprintSettingsRoute().push(context);
-                },
-              ),
-              CustomListTile(
-                title: 'Error Logs',
-                subtitle: 'Copy logs for issue reporting',
-                prefix: Padding(
-                  padding: const EdgeInsets.only(right: 16.0),
-                  child: Icon(
-                    Icons.bug_report,
-                    size: 24,
-                    color: Theme.of(context).colorScheme.onSurfaceVariant,
-                  ),
-                ),
-                suffix: FilledButton.icon(
-                  onPressed: () async {
-                    await Clipboard.setData(
-                      ClipboardData(
-                        text: loggerMemory.buffer
-                            .map((e) => e.lines.join('\n'))
-                            .join('\n\n'),
-                      ),
-                    );
-
-                    if (context.mounted) {
-                      showInfoMessage(context, 'Logs copied');
-                    }
-                  },
-                  icon: const Icon(Icons.copy),
-                  label: const Text('Copy'),
-                ),
-              ),
-              if (kDebugMode)
-                CustomListTile(
-                  title: 'Dart VM',
-                  subtitle: 'Copy Dart VM service URL',
-                  prefix: Padding(
-                    padding: const EdgeInsets.only(right: 16.0),
-                    child: Icon(
-                      Icons.bug_report,
-                      size: 24,
-                      color: Theme.of(context).colorScheme.onSurfaceVariant,
-                    ),
-                  ),
-                  suffix: FilledButton.icon(
-                    onPressed: () async {
-                      final serviceProtocolInfo = await Service.getInfo();
-
-                      await Clipboard.setData(
-                        ClipboardData(
-                          text:
-                              serviceProtocolInfo.serverUri?.toString() ??
-                              'Error',
-                        ),
-                      );
-
-                      if (context.mounted) {
-                        showInfoMessage(context, 'Service URL copied');
-                      }
-                    },
-                    icon: const Icon(Icons.copy),
-                    label: const Text('Copy'),
-                  ),
-                ),
-              ListTile(
-                leading: const Icon(MdiIcons.puzzle),
-                title: const Text('Custom Extension Collection'),
-                subtitle: const Text(
-                  'Custom Add-on Collections are curated lists of extensions that users can create and share.',
-                ),
-                trailing: const Icon(Icons.chevron_right),
-                onTap: () async {
-                  await AddonCollectionRoute().push(context);
-                },
-              ),
-              CustomListTile(
-                title: 'Reset UI',
-                subtitle: 'Rebuild the entire browser UI',
-                prefix: Padding(
-                  padding: const EdgeInsets.only(right: 16.0),
-                  child: Icon(
-                    Icons.bug_report,
-                    size: 24,
-                    color: Theme.of(context).colorScheme.onSurfaceVariant,
-                  ),
-                ),
-                suffix: FilledButton.icon(
-                  onPressed: () {
-                    ref.read(appStateKeyProvider.notifier).reset();
-                  },
-                  icon: const Icon(Icons.restore),
-                  label: const Text('Reset'),
-                ),
-              ),
             ],
           );
         },
@@ -228,3 +67,249 @@ class DeveloperSettingsScreen extends HookConsumerWidget {
     );
   }
 }
+
+class _JavaScriptTile extends HookConsumerWidget {
+  const _JavaScriptTile();
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final javascriptEnabled = ref.watch(
+      engineSettingsWithDefaultsProvider.select(
+        (s) => s.javascriptEnabled,
+      ),
+    );
+
+    return SwitchListTile.adaptive(
+      title: const Text('Enable JavaScript'),
+      subtitle: const Text(
+        'While turning off JavaScript can boost security, privacy, and speed, it may cause some sites to not work as intended.',
+      ),
+      // ignore: deprecated_member_use use this icon for now
+      secondary: const Icon(MdiIcons.languageJavascript),
+      value: javascriptEnabled,
+      onChanged: (value) async {
+        await ref
+            .read(saveEngineSettingsControllerProvider.notifier)
+            .save(
+              (currentSettings) =>
+                  currentSettings.copyWith.javascriptEnabled(value),
+            );
+      },
+    );
+  }
+}
+
+class _UserAgentTile extends HookConsumerWidget {
+  const _UserAgentTile();
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final userAgent = ref.watch(
+      engineSettingsWithDefaultsProvider.select((s) => s.userAgent),
+    );
+
+    final userAgentTextController = useTextEditingController(
+      text: userAgent,
+      keys: [userAgent],
+    );
+
+    return ListTile(
+      leading: const Icon(MdiIcons.cardAccountDetails),
+      title: TextField(
+        controller: userAgentTextController,
+        decoration: const InputDecoration(
+          labelText: 'Custom User Agent',
+          floatingLabelBehavior: FloatingLabelBehavior.always,
+          hintText: 'Mozilla/5.0 …',
+        ),
+        onSubmitted: (value) async {
+          await ref
+              .read(saveEngineSettingsControllerProvider.notifier)
+              .save(
+                (currentSettings) => currentSettings.copyWith.userAgent(value),
+              );
+
+          if (context.mounted) {
+            final restart = await showUserAgentRestartDialog(context);
+
+            if (restart == true) {
+              await exitApp(ref.container);
+            }
+          }
+        },
+      ),
+    );
+  }
+}
+
+class _EnterpriseRootsTile extends HookConsumerWidget {
+  const _EnterpriseRootsTile();
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final enterpriseRootsEnabled = ref.watch(
+      engineSettingsWithDefaultsProvider.select(
+        (s) => s.enterpriseRootsEnabled,
+      ),
+    );
+
+    return SwitchListTile.adaptive(
+      title: const Text('Use third party CA certificates'),
+      subtitle: const Text(
+        'Allows the use of third party certificates from the Android CA store',
+      ),
+      secondary: const Icon(MdiIcons.certificate),
+      value: enterpriseRootsEnabled,
+      onChanged: (value) async {
+        await ref
+            .read(saveEngineSettingsControllerProvider.notifier)
+            .save(
+              (currentSettings) =>
+                  currentSettings.copyWith.enterpriseRootsEnabled(value),
+            );
+      },
+    );
+  }
+}
+
+class _FingerprintProtectionTile extends StatelessWidget {
+  const _FingerprintProtectionTile();
+
+  @override
+  Widget build(BuildContext context) {
+    return ListTile(
+      title: const Text('Fingerprint Protection'),
+      contentPadding: const EdgeInsets.symmetric(
+        vertical: 8.0,
+        horizontal: 16.0,
+      ),
+      leading: const Icon(MdiIcons.fingerprint),
+      trailing: const Icon(Icons.chevron_right),
+      onTap: () async {
+        await FingerprintSettingsRoute().push(context);
+      },
+    );
+  }
+}
+
+class _ErrorLogsTile extends StatelessWidget {
+  const _ErrorLogsTile();
+
+  @override
+  Widget build(BuildContext context) {
+    return CustomListTile(
+      title: 'Error Logs',
+      subtitle: 'Copy logs for issue reporting',
+      prefix: Padding(
+        padding: const EdgeInsets.only(right: 16.0),
+        child: Icon(
+          Icons.bug_report,
+          size: 24,
+          color: Theme.of(context).colorScheme.onSurfaceVariant,
+        ),
+      ),
+      suffix: FilledButton.icon(
+        onPressed: () async {
+          await Clipboard.setData(
+            ClipboardData(
+              text: loggerMemory.buffer
+                  .map((e) => e.lines.join('\n'))
+                  .join('\n\n'),
+            ),
+          );
+
+          if (context.mounted) {
+            showInfoMessage(context, 'Logs copied');
+          }
+        },
+        icon: const Icon(Icons.copy),
+        label: const Text('Copy'),
+      ),
+    );
+  }
+}
+
+class _DartVmTile extends StatelessWidget {
+  const _DartVmTile();
+
+  @override
+  Widget build(BuildContext context) {
+    if (!kDebugMode) return const SizedBox.shrink();
+
+    return CustomListTile(
+      title: 'Dart VM',
+      subtitle: 'Copy Dart VM service URL',
+      prefix: Padding(
+        padding: const EdgeInsets.only(right: 16.0),
+        child: Icon(
+          Icons.bug_report,
+          size: 24,
+          color: Theme.of(context).colorScheme.onSurfaceVariant,
+        ),
+      ),
+      suffix: FilledButton.icon(
+        onPressed: () async {
+          final serviceProtocolInfo = await Service.getInfo();
+
+          await Clipboard.setData(
+            ClipboardData(
+              text: serviceProtocolInfo.serverUri?.toString() ?? 'Error',
+            ),
+          );
+
+          if (context.mounted) {
+            showInfoMessage(context, 'Service URL copied');
+          }
+        },
+        icon: const Icon(Icons.copy),
+        label: const Text('Copy'),
+      ),
+    );
+  }
+}
+
+class _AddonCollectionTile extends StatelessWidget {
+  const _AddonCollectionTile();
+
+  @override
+  Widget build(BuildContext context) {
+    return ListTile(
+      leading: const Icon(MdiIcons.puzzle),
+      title: const Text('Custom Extension Collection'),
+      subtitle: const Text(
+        'Custom Add-on Collections are curated lists of extensions that users can create and share.',
+      ),
+      trailing: const Icon(Icons.chevron_right),
+      onTap: () async {
+        await AddonCollectionRoute().push(context);
+      },
+    );
+  }
+}
+
+class _ResetUITile extends ConsumerWidget {
+  const _ResetUITile();
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return CustomListTile(
+      title: 'Reset UI',
+      subtitle: 'Rebuild the entire browser UI',
+      prefix: Padding(
+        padding: const EdgeInsets.only(right: 16.0),
+        child: Icon(
+          Icons.bug_report,
+          size: 24,
+          color: Theme.of(context).colorScheme.onSurfaceVariant,
+        ),
+      ),
+      suffix: FilledButton.icon(
+        onPressed: () {
+          ref.read(appStateKeyProvider.notifier).reset();
+        },
+        icon: const Icon(Icons.restore),
+        label: const Text('Reset'),
+      ),
+    );
+  }
+}