refactor: Revamp AppCustomizationPage layout and component structure

- Reorganized the layout of AppCustomizationPage to enhance readability and maintainability.
- Introduced an expandable card widget for collapsible settings sections, improving user interaction.
- Updated theme and language selection sections for better clarity and usability.
- Refactored theme and language handling methods to streamline the code and improve performance.
- Enhanced the overall UI consistency by adjusting spacing and component arrangements.

lib/features/profile/views/app_customization_page.dart

@@ -53,22 +53,26 @@ class AppCustomizationPage extends ConsumerWidget {
             vertical: Spacing.pagePadding,
           ),
           children: [
-            _buildDisplaySection(
+            _buildThemesDropdownSection(
               context,
               ref,
               themeMode,
               themeDescription,
+              activeTheme,
+            ),
+            const SizedBox(height: Spacing.xl),
+            _buildLanguageSection(
+              context,
+              ref,
               currentLanguageCode,
               languageLabel,
-              settings,
-              activeTheme,
             ),
             const SizedBox(height: Spacing.xl),
             _buildQuickPillsSection(context, ref, settings),
             const SizedBox(height: Spacing.xl),
-            _buildChatSection(context, ref, settings),
+            _buildTtsDropdownSection(context, ref, settings),
             const SizedBox(height: Spacing.xl),
-            _buildTtsSection(context, ref, settings),
+            _buildChatSection(context, ref, settings),
           ],
         ),
       ),
@@ -108,14 +112,11 @@ class AppCustomizationPage extends ConsumerWidget {
     );
   }
 
-  Widget _buildDisplaySection(
+  Widget _buildThemesDropdownSection(
     BuildContext context,
     WidgetRef ref,
     ThemeMode themeMode,
     String themeDescription,
-    String currentLanguageCode,
-    String languageLabel,
-    AppSettings settings,
     TweakcnThemeDefinition activeTheme,
   ) {
     final theme = context.conduitTheme;
@@ -130,89 +131,16 @@ class AppCustomizationPage extends ConsumerWidget {
               TextStyle(color: theme.sidebarForeground, fontSize: 18),
         ),
         const SizedBox(height: Spacing.sm),
-        _buildThemeSelector(context, ref, themeMode, themeDescription),
+        _ExpandableCard(
-        const SizedBox(height: Spacing.md),
+          title: AppLocalizations.of(context)!.darkMode,
-        _buildPaletteSelector(context, ref, activeTheme),
+          subtitle: themeDescription,
-        const SizedBox(height: Spacing.md),
+          icon: UiUtils.platformIcon(
-        _CustomizationTile(
-          leading: _buildIconBadge(
-            context,
-            UiUtils.platformIcon(
-              ios: CupertinoIcons.globe,
-              android: Icons.language,
-            ),
-            color: theme.buttonPrimary,
-          ),
-          title: AppLocalizations.of(context)!.appLanguage,
-          subtitle: languageLabel,
-          onTap: () async {
-            final selected = await _showLanguageSelector(
-              context,
-              currentLanguageCode,
-            );
-            if (selected == null) return;
-            if (selected == 'system') {
-              await ref.read(appLocaleProvider.notifier).setLocale(null);
-            } else {
-              await ref
-                  .read(appLocaleProvider.notifier)
-                  .setLocale(Locale(selected));
-            }
-          },
-        ),
-      ],
-    );
-  }
-
-  Widget _buildThemeSelector(
-    BuildContext context,
-    WidgetRef ref,
-    ThemeMode themeMode,
-    String themeDescription,
-  ) {
-    final theme = context.conduitTheme;
-
-    return ConduitCard(
-      padding: const EdgeInsets.all(Spacing.md),
-      child: Column(
-        crossAxisAlignment: CrossAxisAlignment.start,
-        children: [
-          Row(
-            crossAxisAlignment: CrossAxisAlignment.start,
-            children: [
-              _buildIconBadge(
-                context,
-                UiUtils.platformIcon(
             ios: CupertinoIcons.moon_stars,
             android: Icons.dark_mode,
           ),
-                color: theme.buttonPrimary,
-              ),
-              const SizedBox(width: Spacing.md),
-              Expanded(
           child: Column(
             crossAxisAlignment: CrossAxisAlignment.start,
             children: [
-                    Text(
-                      AppLocalizations.of(context)!.darkMode,
-                      style: theme.bodyMedium?.copyWith(
-                        color: theme.sidebarForeground,
-                        fontWeight: FontWeight.w600,
-                      ),
-                    ),
-                    const SizedBox(height: Spacing.xs),
-                    Text(
-                      themeDescription,
-                      style: theme.bodySmall?.copyWith(
-                        color: theme.sidebarForeground.withValues(alpha: 0.75),
-                      ),
-                    ),
-                  ],
-                ),
-              ),
-            ],
-          ),
-          const SizedBox(height: Spacing.md),
               Wrap(
                 spacing: Spacing.sm,
                 runSpacing: Spacing.sm,
@@ -254,6 +182,51 @@ class AppCustomizationPage extends ConsumerWidget {
               ),
             ],
           ),
+        ),
+        const SizedBox(height: Spacing.md),
+        _buildPaletteSelector(context, ref, activeTheme),
+      ],
+    );
+  }
+
+  Widget _buildLanguageSection(
+    BuildContext context,
+    WidgetRef ref,
+    String currentLanguageCode,
+    String languageLabel,
+  ) {
+    final theme = context.conduitTheme;
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        _CustomizationTile(
+          leading: _buildIconBadge(
+            context,
+            UiUtils.platformIcon(
+              ios: CupertinoIcons.globe,
+              android: Icons.language,
+            ),
+            color: theme.buttonPrimary,
+          ),
+          title: AppLocalizations.of(context)!.appLanguage,
+          subtitle: languageLabel,
+          onTap: () async {
+            final selected = await _showLanguageSelector(
+              context,
+              currentLanguageCode,
+            );
+            if (selected == null) return;
+            if (selected == 'system') {
+              await ref.read(appLocaleProvider.notifier).setLocale(null);
+            } else {
+              await ref
+                  .read(appLocaleProvider.notifier)
+                  .setLocale(Locale(selected));
+            }
+          },
+        ),
+      ],
     );
   }
 
@@ -262,37 +235,17 @@ class AppCustomizationPage extends ConsumerWidget {
     WidgetRef ref,
     TweakcnThemeDefinition activeTheme,
   ) {
-    final theme = context.conduitTheme;
     final palettes = TweakcnThemes.all;
 
-    return Column(
+    return _ExpandableCard(
-      crossAxisAlignment: CrossAxisAlignment.start,
+      title: AppLocalizations.of(context)!.themePalette,
-      children: [
+      subtitle: activeTheme.label,
-        Text(
+      icon: UiUtils.platformIcon(
-          AppLocalizations.of(context)!.themePalette,
+        ios: CupertinoIcons.square_fill_on_square_fill,
-          style:
+        android: Icons.palette,
-              theme.bodyLarge?.copyWith(
-                color: theme.sidebarForeground,
-                fontWeight: FontWeight.w600,
-              ) ??
-              TextStyle(
-                color: theme.sidebarForeground,
-                fontWeight: FontWeight.w600,
       ),
-        ),
-        const SizedBox(height: Spacing.xs),
-        Text(
-          AppLocalizations.of(context)!.themePaletteDescription,
-          style:
-              theme.bodySmall?.copyWith(
-                color: theme.sidebarForeground.withValues(alpha: 0.75),
-              ) ??
-              TextStyle(color: theme.sidebarForeground.withValues(alpha: 0.75)),
-        ),
-        const SizedBox(height: Spacing.sm),
-        ConduitCard(
-          padding: const EdgeInsets.all(Spacing.md),
       child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
         children: [
           for (final palette in palettes)
             _PaletteOption(
@@ -304,8 +257,6 @@ class AppCustomizationPage extends ConsumerWidget {
             ),
         ],
       ),
-        ),
-      ],
     );
   }
 
@@ -377,58 +328,50 @@ class AppCustomizationPage extends ConsumerWidget {
       }).toList();
     }
 
+    final l10n = AppLocalizations.of(context)!;
+    final selectedCountText = selectedCount == 0
+        ? 'No actions'
+        : '$selectedCount action${selectedCount == 1 ? '' : 's'} selected';
+
     return Column(
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
         Text(
-          AppLocalizations.of(context)!.onboardQuickTitle,
+          l10n.onboardQuickTitle,
           style:
               theme.headingSmall?.copyWith(color: theme.sidebarForeground) ??
               TextStyle(color: theme.sidebarForeground, fontSize: 18),
         ),
         const SizedBox(height: Spacing.sm),
-        ConduitCard(
+        _ExpandableCard(
-          padding: const EdgeInsets.all(Spacing.md),
+          title: l10n.quickActionsDescription,
-          child: Column(
+          subtitle: selectedCountText,
-            crossAxisAlignment: CrossAxisAlignment.start,
+          icon: UiUtils.platformIcon(
-            children: [
-              Row(
-                crossAxisAlignment: CrossAxisAlignment.start,
-                children: [
-                  _buildIconBadge(
-                    context,
-                    UiUtils.platformIcon(
             ios: CupertinoIcons.bolt,
             android: Icons.flash_on,
           ),
-                    color: theme.buttonPrimary,
+          child: Column(
-                  ),
+            crossAxisAlignment: CrossAxisAlignment.start,
-                  const SizedBox(width: Spacing.md),
+            children: [
-                  Expanded(
+              if (selected.isNotEmpty)
-                    child: Text(
+                Padding(
-                      AppLocalizations.of(context)!.quickActionsDescription,
+                  padding: const EdgeInsets.only(bottom: Spacing.md),
-                      style: theme.bodySmall?.copyWith(
+                  child: Align(
-                        color: theme.sidebarForeground.withValues(alpha: 0.75),
+                    alignment: Alignment.centerRight,
-                      ),
+                    child: TextButton(
-                    ),
+                      onPressed: () => ref
-                  ),
-                  TextButton(
-                    onPressed: selected.isEmpty
-                        ? null
-                        : () => ref
                           .read(appSettingsProvider.notifier)
                           .setQuickPills(const []),
-                    child: Text(AppLocalizations.of(context)!.clear),
+                      child: Text(l10n.clear),
+                    ),
                   ),
-                ],
                 ),
-              const SizedBox(height: Spacing.md),
               Wrap(
                 spacing: Spacing.sm,
                 runSpacing: Spacing.sm,
                 children: [
                   ConduitChip(
-                    label: AppLocalizations.of(context)!.web,
+                    label: l10n.web,
                     icon: Platform.isIOS ? CupertinoIcons.search : Icons.search,
                     isSelected: selected.contains('web'),
                     onTap: (selectedCount < 2 || selected.contains('web'))
@@ -436,7 +379,7 @@ class AppCustomizationPage extends ConsumerWidget {
                         : null,
                   ),
                   ConduitChip(
-                    label: AppLocalizations.of(context)!.imageGen,
+                    label: l10n.imageGen,
                     icon: Platform.isIOS ? CupertinoIcons.photo : Icons.image,
                     isSelected: selected.contains('image'),
                     onTap: (selectedCount < 2 || selected.contains('image'))
@@ -492,7 +435,7 @@ class AppCustomizationPage extends ConsumerWidget {
     );
   }
 
-  Widget _buildTtsSection(
+  Widget _buildTtsDropdownSection(
     BuildContext context,
     WidgetRef ref,
     AppSettings settings,
@@ -509,6 +452,19 @@ class AppCustomizationPage extends ConsumerWidget {
               TextStyle(color: theme.sidebarForeground, fontSize: 18),
         ),
         const SizedBox(height: Spacing.sm),
+        _ExpandableCard(
+          title: l10n.ttsVoice,
+          subtitle: _getDisplayVoiceName(
+            settings.ttsVoice,
+            l10n.ttsSystemDefault,
+          ),
+          icon: UiUtils.platformIcon(
+            ios: CupertinoIcons.speaker_3,
+            android: Icons.record_voice_over,
+          ),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
               // Voice Selection
               _CustomizationTile(
                 leading: _buildIconBadge(
@@ -541,8 +497,9 @@ class AppCustomizationPage extends ConsumerWidget {
                 max: 2.0,
                 divisions: 7,
                 label: '${(settings.ttsSpeechRate * 100).round()}%',
-          onChanged: (value) =>
+                onChanged: (value) => ref
-              ref.read(appSettingsProvider.notifier).setTtsSpeechRate(value),
+                    .read(appSettingsProvider.notifier)
+                    .setTtsSpeechRate(value),
               ),
               const SizedBox(height: Spacing.md),
               // Pitch Slider
@@ -596,6 +553,9 @@ class AppCustomizationPage extends ConsumerWidget {
                 onTap: () => _previewTtsVoice(context, ref),
               ),
             ],
+          ),
+        ),
+      ],
     );
   }
 
@@ -1433,3 +1393,147 @@ class _CustomizationTile extends StatelessWidget {
     );
   }
 }
+
+/// Expandable card widget for collapsible settings sections.
+class _ExpandableCard extends StatefulWidget {
+  const _ExpandableCard({
+    required this.title,
+    required this.subtitle,
+    required this.icon,
+    required this.child,
+  });
+
+  final String title;
+  final String subtitle;
+  final IconData icon;
+  final Widget child;
+
+  @override
+  State<_ExpandableCard> createState() => _ExpandableCardState();
+}
+
+class _ExpandableCardState extends State<_ExpandableCard>
+    with SingleTickerProviderStateMixin {
+  late AnimationController _animationController;
+  late Animation<double> _rotationAnimation;
+  bool _isExpanded = false;
+
+  @override
+  void initState() {
+    super.initState();
+    _animationController = AnimationController(
+      duration: const Duration(milliseconds: 300),
+      vsync: this,
+    );
+    _rotationAnimation = Tween<double>(begin: 0, end: 0.5).animate(
+      CurvedAnimation(parent: _animationController, curve: Curves.easeInOut),
+    );
+  }
+
+  @override
+  void dispose() {
+    _animationController.dispose();
+    super.dispose();
+  }
+
+  void _toggle() {
+    setState(() {
+      _isExpanded = !_isExpanded;
+    });
+    if (_isExpanded) {
+      _animationController.forward();
+    } else {
+      _animationController.reverse();
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = context.conduitTheme;
+
+    return ConduitCard(
+      padding: EdgeInsets.zero,
+      onTap: _toggle,
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Padding(
+            padding: const EdgeInsets.all(Spacing.md),
+            child: Row(
+              crossAxisAlignment: CrossAxisAlignment.center,
+              children: [
+                // Icon badge
+                Container(
+                  width: 40,
+                  height: 40,
+                  decoration: BoxDecoration(
+                    color: theme.buttonPrimary.withValues(alpha: 0.1),
+                    borderRadius: BorderRadius.circular(AppBorderRadius.small),
+                    border: Border.all(
+                      color: theme.buttonPrimary.withValues(alpha: 0.2),
+                      width: BorderWidth.thin,
+                    ),
+                  ),
+                  alignment: Alignment.center,
+                  child: Icon(
+                    widget.icon,
+                    color: theme.buttonPrimary,
+                    size: IconSize.medium,
+                  ),
+                ),
+                const SizedBox(width: Spacing.md),
+                // Title and subtitle
+                Expanded(
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      Text(
+                        widget.title,
+                        style: theme.bodyMedium?.copyWith(
+                          color: theme.sidebarForeground,
+                          fontWeight: FontWeight.w600,
+                        ),
+                      ),
+                      const SizedBox(height: Spacing.xs),
+                      Text(
+                        widget.subtitle,
+                        style: theme.bodySmall?.copyWith(
+                          color: theme.sidebarForeground.withValues(
+                            alpha: 0.75,
+                          ),
+                        ),
+                        maxLines: 1,
+                        overflow: TextOverflow.ellipsis,
+                      ),
+                    ],
+                  ),
+                ),
+                const SizedBox(width: Spacing.sm),
+                // Expand/collapse icon
+                RotationTransition(
+                  turns: _rotationAnimation,
+                  child: Icon(
+                    UiUtils.platformIcon(
+                      ios: CupertinoIcons.chevron_down,
+                      android: Icons.expand_more,
+                    ),
+                    color: theme.iconSecondary,
+                    size: IconSize.small,
+                  ),
+                ),
+              ],
+            ),
+          ),
+          // Expandable content
+          if (_isExpanded) ...[
+            const Divider(height: 1),
+            Padding(
+              padding: const EdgeInsets.all(Spacing.md),
+              child: widget.child,
+            ),
+          ],
+        ],
+      ),
+    );
+  }
+}