feat(ui): redesign devices and settings tabs

lib/pages/settings_page.dart

@@ -1,10 +1,14 @@
+import 'package:abawo_bt_app/util/sharedPrefs.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
 
-class SettingsPage extends StatelessWidget {
+class SettingsPage extends ConsumerWidget {
   const SettingsPage({super.key});
 
   @override
-  Widget build(BuildContext context) {
+  Widget build(BuildContext context, WidgetRef ref) {
+    final themePreference = ref.watch(appThemePreferenceProvider);
+
     return ListView(
       padding: const EdgeInsets.fromLTRB(20, 16, 20, 24),
       children: [
@@ -25,25 +29,89 @@ class SettingsPage extends StatelessWidget {
               ),
         ),
         const SizedBox(height: 20),
+        Card(
+          child: Padding(
+            padding: const EdgeInsets.all(18),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Text(
+                  'Appearance',
+                  style: Theme.of(context).textTheme.titleLarge?.copyWith(
+                        fontWeight: FontWeight.w700,
+                      ),
+                ),
+                const SizedBox(height: 8),
+                Text(
+                  'Choose whether the app follows the system theme or stays in a fixed mode.',
+                  style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                        color: Theme.of(context)
+                            .colorScheme
+                            .onSurface
+                            .withValues(alpha: 0.68),
+                      ),
+                ),
+                const SizedBox(height: 16),
+                SegmentedButton<AppThemePreference>(
+                  multiSelectionEnabled: false,
+                  selected: {themePreference},
+                  segments: const [
+                    ButtonSegment(
+                      value: AppThemePreference.system,
+                      icon: Icon(Icons.brightness_auto_rounded),
+                      label: Text('System'),
+                    ),
+                    ButtonSegment(
+                      value: AppThemePreference.light,
+                      icon: Icon(Icons.light_mode_rounded),
+                      label: Text('Light'),
+                    ),
+                    ButtonSegment(
+                      value: AppThemePreference.dark,
+                      icon: Icon(Icons.dark_mode_rounded),
+                      label: Text('Dark'),
+                    ),
+                  ],
+                  onSelectionChanged: (selection) {
+                    ref
+                        .read(appThemePreferenceProvider.notifier)
+                        .update(selection.first);
+                  },
+                ),
+              ],
+            ),
+          ),
+        ),
+        const SizedBox(height: 16),
         Card(
           child: Column(
-            children: const [
+            children: [
               ListTile(
-                leading: Icon(Icons.brightness_6),
-                title: Text('Theme'),
-                subtitle: Text('Theme controls arrive in the next phase'),
+                leading: const Icon(Icons.bluetooth_searching_rounded),
+                title: const Text('Bluetooth'),
+                subtitle: const Text('Manage connections and pairing behavior'),
+                trailing: Text(
+                  'Enabled',
+                  style: Theme.of(context).textTheme.bodySmall?.copyWith(
+                        color: Theme.of(context).colorScheme.primary,
+                        fontWeight: FontWeight.w700,
+                      ),
+                ),
               ),
-              Divider(height: 1),
+              const Divider(height: 1),
               ListTile(
-                leading: Icon(Icons.bluetooth),
-                title: Text('Bluetooth Settings'),
-                subtitle: Text('Configure Bluetooth connections'),
-              ),
-              Divider(height: 1),
-              ListTile(
-                leading: Icon(Icons.info),
-                title: Text('About'),
-                subtitle: Text('App information'),
+                leading: const Icon(Icons.info_outline_rounded),
+                title: const Text('About'),
+                subtitle: const Text('Version, credits, and legal information'),
+                trailing: const Icon(Icons.chevron_right_rounded),
+                onTap: () {
+                  showAboutDialog(
+                    context: context,
+                    applicationName: 'Abawo BT App',
+                    applicationVersion: '1.0.0',
+                    applicationLegalese: 'abawo Bluetooth control and setup app',
+                  );
+                },
               ),
             ],
           ),