refactor: navigation rehaul

lib/core/services/navigation_service.dart

@@ -3,7 +3,6 @@ import 'package:flutter/material.dart';
 import '../../features/auth/views/connect_signin_page.dart';
 import '../../features/chat/views/chat_page.dart';
 import '../../features/files/views/files_page.dart';
-import '../../features/navigation/views/chats_list_page.dart';
 import '../../features/profile/views/profile_page.dart';
 import '../../shared/widgets/themed_dialogs.dart';
 
@@ -92,10 +91,7 @@ class NavigationService {
     return navigateTo(Routes.serverConnection);
   }
 
-  /// Navigate to chats list
+  // Chats list is now provided as a left drawer in ChatPage
-  static Future<void> navigateToChatsList() {
-    return navigateTo(Routes.chatsList);
-  }
 
   /// Clear navigation stack (useful for logout)
   static void clearNavigationStack() {
@@ -138,9 +134,7 @@ class NavigationService {
         page = const FilesPage();
         break;
 
-      case Routes.chatsList:
+      // chats list route removed (replaced by drawer)
-        page = const ChatsListPage();
-        break;
 
       // Removed navigation drawer route
 
@@ -161,5 +155,4 @@ class Routes {
   static const String profile = '/profile';
   static const String serverConnection = '/server-connection';
   static const String files = '/files';
-  static const String chatsList = '/chats-list';
 }

lib/features/chat/views/chat_page.dart

@@ -1,5 +1,4 @@
 import 'package:flutter/material.dart';
-import '../../../core/services/navigation_service.dart';
 import '../../../core/widgets/error_boundary.dart';
 import '../../../shared/widgets/optimized_list.dart';
 import '../../../shared/theme/theme_extensions.dart';
@@ -19,10 +18,10 @@ import '../widgets/assistant_message_widget.dart' as assistant;
 import '../widgets/file_attachment_widget.dart';
 import '../services/voice_input_service.dart';
 import '../services/file_attachment_service.dart';
-import '../../navigation/views/chats_list_page.dart';
 import '../../files/views/files_page.dart';
 import '../../profile/views/profile_page.dart';
 import '../../tools/providers/tools_providers.dart';
+import '../../navigation/widgets/chats_drawer.dart';
 import '../../../shared/widgets/offline_indicator.dart';
 import '../../../core/services/connectivity_service.dart';
 import '../../../core/models/chat_message.dart';
@@ -463,47 +462,7 @@ class _ChatPageState extends ConsumerState<ChatPage> {
     }
   }
 
-  void _showChatsListOverlay() {
+  // Replaced bottom-sheet chat list with left drawer (see ChatsDrawer)
-    showModalBottomSheet(
-      context: context,
-      isScrollControlled: true,
-      backgroundColor: Colors.transparent,
-      builder: (context) => Container(
-        height: MediaQuery.of(context).size.height * 0.9,
-        decoration: BoxDecoration(
-          color: context.conduitTheme.surfaceBackground,
-          borderRadius: const BorderRadius.vertical(
-            top: Radius.circular(AppBorderRadius.bottomSheet),
-          ),
-          border: Border.all(
-            color: context.conduitTheme.dividerColor,
-            width: BorderWidth.regular,
-          ),
-          boxShadow: ConduitShadows.modal,
-        ),
-        child: SafeArea(
-          top: false,
-          bottom: true,
-          child: Column(
-            mainAxisSize: MainAxisSize.min,
-            children: [
-              // Handle bar
-              Container(
-                width: 40,
-                height: 4,
-                margin: const EdgeInsets.symmetric(vertical: Spacing.sm),
-                decoration: BoxDecoration(
-                  color: context.conduitTheme.dividerColor,
-                  borderRadius: BorderRadius.circular(AppBorderRadius.xs),
-                ),
-              ),
-              Expanded(child: const ChatsListPage(isOverlay: true)),
-            ],
-          ),
-        ),
-      ),
-    );
-  }
 
   void _showQuickAccessMenu() {
     showModalBottomSheet(
@@ -1117,27 +1076,13 @@ class _ChatPageState extends ConsumerState<ChatPage> {
         onPopInvokedWithResult: (bool didPop, Object? result) async {
           if (didPop) return;
 
-          // Check if there's unsaved content
+          // Auto-handle leaving without confirmation
           final messages = ref.read(chatMessagesProvider);
-          if (messages.isNotEmpty) {
-            // Check if currently streaming
           final isStreaming = messages.any((msg) => msg.isStreaming);
-
-            final shouldPop = await NavigationService.confirmNavigation(
-              title: 'Leave Chat?',
-              message: isStreaming
-                  ? 'The AI is still responding. Leave anyway?'
-                  : 'Your conversation will be saved.',
-              confirmText: 'Leave',
-              cancelText: 'Stay',
-            );
-            if (shouldPop && context.mounted) {
-              // If streaming, stop it first
           if (isStreaming) {
             ref.read(chatMessagesProvider.notifier).finishStreaming();
           }
 
-              // Save the conversation before leaving
           await _saveConversationBeforeLeaving(ref);
 
           if (context.mounted) {
@@ -1148,18 +1093,17 @@ class _ChatPageState extends ConsumerState<ChatPage> {
               SystemNavigator.pop();
             }
           }
-            }
-          } else if (context.mounted) {
-            final canPopNavigator = Navigator.of(context).canPop();
-            if (canPopNavigator) {
-              Navigator.of(context).pop();
-            } else {
-              SystemNavigator.pop();
-            }
-          }
         },
         child: Scaffold(
           backgroundColor: context.conduitTheme.surfaceBackground,
+          // Left navigation drawer with draggable edge open
+          drawerEnableOpenDragGesture: true,
+          drawerEdgeDragWidth: 32,
+          drawer: Drawer(
+            width: (MediaQuery.of(context).size.width * 0.88).clamp(280.0, 420.0),
+            backgroundColor: context.conduitTheme.surfaceBackground,
+            child: const SafeArea(child: ChatsDrawer()),
+          ),
           appBar: AppBar(
             backgroundColor: context.conduitTheme.surfaceBackground,
             elevation: Elevation.none,
@@ -1176,9 +1120,11 @@ class _ChatPageState extends ConsumerState<ChatPage> {
                     ),
                     onPressed: _clearSelection,
                   )
-                : GestureDetector(
+                : Builder(
+                    builder: (ctx) => GestureDetector(
                       onTap: () {
-                      _showChatsListOverlay();
+                        // Open left drawer instead of bottom sheet
+                        Scaffold.of(ctx).openDrawer();
                       },
                       onLongPress: () {
                         HapticFeedback.mediumImpact();
@@ -1195,6 +1141,7 @@ class _ChatPageState extends ConsumerState<ChatPage> {
                         ),
                       ),
                     ),
+                  ),
             title: _isSelectionMode
                 ? Text(
                     '${_selectedMessageIds.length} selected',

lib/features/chat/widgets/modern_chat_input.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter/cupertino.dart';
+import 'package:flutter/services.dart';
 import '../../../shared/theme/theme_extensions.dart';
 
 import 'package:flutter_riverpod/flutter_riverpod.dart';
@@ -220,18 +221,17 @@ class _ModernChatInputState extends ConsumerState<ModernChatInput>
               ),
               border: Border(
                 top: BorderSide(
-                  color: context.conduitTheme.inputBorder,
+                  color: context.conduitTheme.dividerColor,
                   width: BorderWidth.regular,
                 ),
                 left: BorderSide(
-                  color: context.conduitTheme.inputBorder,
+                  color: context.conduitTheme.dividerColor,
                   width: BorderWidth.regular,
                 ),
                 right: BorderSide(
-                  color: context.conduitTheme.inputBorder,
+                  color: context.conduitTheme.dividerColor,
                   width: BorderWidth.regular,
                 ),
-                // Removed bottom border to eliminate divider
               ),
               boxShadow: ConduitShadows.input,
             ),
@@ -431,8 +431,18 @@ class _ModernChatInputState extends ConsumerState<ModernChatInput>
     if (isGenerating) {
       return Tooltip(
         message: 'Stop generating',
-        child: GestureDetector(
+        child: Material(
-          onTap: stopGeneration,
+          color: Colors.transparent,
+          shape: RoundedRectangleBorder(
+            borderRadius: BorderRadius.circular(radius),
+            side: BorderSide(color: context.conduitTheme.error, width: BorderWidth.regular),
+          ),
+          child: InkWell(
+            borderRadius: BorderRadius.circular(radius),
+            onTap: () {
+              HapticFeedback.lightImpact();
+              stopGeneration();
+            },
             child: Container(
               width: buttonSize,
               height: buttonSize,
@@ -441,10 +451,6 @@ class _ModernChatInputState extends ConsumerState<ModernChatInput>
                   alpha: Alpha.buttonPressed,
                 ),
                 borderRadius: BorderRadius.circular(radius),
-              border: Border.all(
-                color: context.conduitTheme.error,
-                width: BorderWidth.regular,
-              ),
                 boxShadow: ConduitShadows.button,
               ),
               child: Stack(
@@ -469,32 +475,42 @@ class _ModernChatInputState extends ConsumerState<ModernChatInput>
               ),
             ),
           ),
+        ),
       );
     }
 
     // Default SEND variant
     return Tooltip(
       message: enabled ? 'Send message' : 'Send',
-      child: GestureDetector(
-        onTap: enabled ? _sendMessage : null,
       child: Opacity(
           opacity: enabled ? Alpha.primary : Alpha.disabled,
         child: IgnorePointer(
           ignoring: !enabled,
+          child: Material(
+            color: Colors.transparent,
+            shape: RoundedRectangleBorder(
+              borderRadius: BorderRadius.circular(radius),
+              side: BorderSide(
+                color: enabled
+                    ? context.conduitTheme.cardBorder
+                    : context.conduitTheme.cardBorder.withValues(alpha: Alpha.medium),
+                width: BorderWidth.regular,
+              ),
+            ),
+            child: InkWell(
+              borderRadius: BorderRadius.circular(radius),
+              onTap: enabled
+                  ? () {
+                      PlatformUtils.lightHaptic();
+                      _sendMessage();
+                    }
+                  : null,
               child: Container(
                 width: buttonSize,
                 height: buttonSize,
                 decoration: BoxDecoration(
                   color: context.conduitTheme.cardBackground,
                   borderRadius: BorderRadius.circular(radius),
-                border: Border.all(
-                  color: enabled
-                      ? context.conduitTheme.cardBorder
-                      : context.conduitTheme.cardBorder.withValues(
-                          alpha: Alpha.medium,
-                        ),
-                  width: BorderWidth.regular,
-                ),
                   boxShadow: ConduitShadows.button,
                 ),
                 child: Icon(
@@ -502,8 +518,7 @@ class _ModernChatInputState extends ConsumerState<ModernChatInput>
                   size: IconSize.medium,
                   color: enabled
                       ? context.conduitTheme.textPrimary
-                    : context.conduitTheme.textPrimary.withValues(
+                      : context.conduitTheme.textPrimary.withValues(alpha: Alpha.disabled),
-                        alpha: Alpha.disabled,
                 ),
               ),
             ),
@@ -522,8 +537,29 @@ class _ModernChatInputState extends ConsumerState<ModernChatInput>
   }) {
     return Tooltip(
       message: tooltip ?? '',
-      child: GestureDetector(
+      child: Material(
-        onTap: onTap,
+        color: Colors.transparent,
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(AppBorderRadius.xl),
+          side: BorderSide(
+            color: isActive
+                ? context.conduitTheme.textPrimary.withValues(
+                    alpha: Alpha.buttonHover + Alpha.subtle,
+                  )
+                : showBackground
+                    ? context.conduitTheme.cardBorder
+                    : Colors.transparent,
+            width: BorderWidth.regular,
+          ),
+        ),
+        child: InkWell(
+          borderRadius: BorderRadius.circular(AppBorderRadius.xl),
+          onTap: onTap == null
+              ? null
+              : () {
+                  HapticFeedback.selectionClick();
+                  onTap();
+                },
           child: Container(
           width: TouchTarget.comfortable,
           height: TouchTarget.comfortable,
@@ -536,16 +572,6 @@ class _ModernChatInputState extends ConsumerState<ModernChatInput>
                 ? context.conduitTheme.cardBackground
                 : Colors.transparent,
             borderRadius: BorderRadius.circular(AppBorderRadius.xl),
-            border: Border.all(
-              color: isActive
-                  ? context.conduitTheme.textPrimary.withValues(
-                      alpha: Alpha.buttonHover + Alpha.subtle,
-                    )
-                  : showBackground
-                  ? context.conduitTheme.cardBorder
-                  : Colors.transparent,
-              width: BorderWidth.regular,
-            ),
             boxShadow: (isActive || showBackground)
                 ? ConduitShadows.button
                 : null,
@@ -565,10 +591,11 @@ class _ModernChatInputState extends ConsumerState<ModernChatInput>
           ),
         ),
       ),
-    );
+    ));
   }
 
   void _showAttachmentOptions() {
+    HapticFeedback.selectionClick();
     showModalBottomSheet(
       context: context,
       backgroundColor: Colors.transparent,
@@ -578,6 +605,10 @@ class _ModernChatInputState extends ConsumerState<ModernChatInput>
           borderRadius: const BorderRadius.vertical(
             top: Radius.circular(AppBorderRadius.bottomSheet),
           ),
+          border: Border.all(
+            color: context.conduitTheme.dividerColor,
+            width: BorderWidth.regular,
+          ),
           boxShadow: ConduitShadows.modal,
         ),
         padding: const EdgeInsets.all(Spacing.bottomSheetPadding),
@@ -599,34 +630,41 @@ class _ModernChatInputState extends ConsumerState<ModernChatInput>
 
             // Options grid
             Row(
-              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
               children: [
-                _buildAttachmentOption(
+                Expanded(
+                  child: _buildAttachmentOption(
                   icon: Platform.isIOS ? CupertinoIcons.doc : Icons.attach_file,
                   label: 'File',
                   onTap: () {
+                    HapticFeedback.lightImpact();
                     Navigator.pop(context); // Close modal
                     widget.onFileAttachment?.call();
                   },
-                ),
+                )),
-                _buildAttachmentOption(
+                const SizedBox(width: Spacing.md),
+                Expanded(
+                  child: _buildAttachmentOption(
                   icon: Platform.isIOS ? CupertinoIcons.photo : Icons.image,
                   label: 'Photo',
                   onTap: () {
+                    HapticFeedback.lightImpact();
                     Navigator.pop(context); // Close modal
                     widget.onImageAttachment?.call();
                   },
-                ),
+                )),
-                _buildAttachmentOption(
+                const SizedBox(width: Spacing.md),
+                Expanded(
+                  child: _buildAttachmentOption(
                   icon: Platform.isIOS
                       ? CupertinoIcons.camera
                       : Icons.camera_alt,
                   label: 'Camera',
                   onTap: () {
+                    HapticFeedback.lightImpact();
                     Navigator.pop(context); // Close modal
                     widget.onCameraCapture?.call();
                   },
-                ),
+                )),
               ],
             ),
             const SizedBox(height: Spacing.lg),
@@ -637,6 +675,7 @@ class _ModernChatInputState extends ConsumerState<ModernChatInput>
   }
 
   void _showUnifiedToolsModal() {
+    HapticFeedback.selectionClick();
     showModalBottomSheet(
       context: context,
       backgroundColor: Colors.transparent,
@@ -649,8 +688,16 @@ class _ModernChatInputState extends ConsumerState<ModernChatInput>
     required String label,
     VoidCallback? onTap,
   }) {
-    return GestureDetector(
+    return Material(
-      onTap: onTap,
+      color: Colors.transparent,
+      child: InkWell(
+        borderRadius: BorderRadius.circular(AppBorderRadius.lg),
+        onTap: onTap == null
+            ? null
+            : () {
+                HapticFeedback.selectionClick();
+                onTap();
+              },
         child: Column(
           mainAxisSize: MainAxisSize.min,
           children: [
@@ -658,20 +705,16 @@ class _ModernChatInputState extends ConsumerState<ModernChatInput>
               width: 64,
               height: 64,
               decoration: BoxDecoration(
-              color: context.conduitTheme.textPrimary.withValues(
+                color: context.conduitTheme.cardBackground,
-                alpha: Alpha.subtle,
-              ),
                 borderRadius: BorderRadius.circular(AppBorderRadius.lg),
                 border: Border.all(
-                color: context.conduitTheme.textPrimary.withValues(
+                  color: context.conduitTheme.cardBorder,
-                  alpha: Alpha.subtle,
-                ),
                   width: BorderWidth.regular,
                 ),
               ),
               child: Icon(
                 icon,
-              color: context.conduitTheme.textPrimary,
+                color: context.conduitTheme.iconPrimary,
                 size: IconSize.xl,
               ),
             ),
@@ -684,6 +727,7 @@ class _ModernChatInputState extends ConsumerState<ModernChatInput>
             ),
           ],
         ),
+      ),
     );
   }
 }

lib/features/profile/views/profile_page.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import '../../../shared/theme/theme_extensions.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
@@ -797,7 +798,7 @@ class _DefaultModelBottomSheetState extends ConsumerState<_DefaultModelBottomShe
                     width: Spacing.xxl,
                     height: Spacing.xs,
                     decoration: BoxDecoration(
-                      color: context.conduitTheme.dividerColor,
+                      color: context.conduitTheme.textPrimary.withValues(alpha: Alpha.medium),
                       borderRadius: BorderRadius.circular(AppBorderRadius.xs),
                     ),
                   ),
@@ -807,6 +808,11 @@ class _DefaultModelBottomSheetState extends ConsumerState<_DefaultModelBottomShe
                     padding: const EdgeInsets.only(bottom: Spacing.md),
                     child: Row(
                       children: [
+                        Icon(
+                          Platform.isIOS ? CupertinoIcons.cube : Icons.psychology,
+                          color: context.conduitTheme.iconPrimary,
+                        ),
+                        const SizedBox(width: Spacing.sm),
                         Expanded(
                           child: Text(
                             'Default Model',
@@ -817,7 +823,10 @@ class _DefaultModelBottomSheetState extends ConsumerState<_DefaultModelBottomShe
                           ),
                         ),
                         TextButton(
-                          onPressed: () => Navigator.pop(context, _selectedModelId),
+                          onPressed: () {
+                            HapticFeedback.lightImpact();
+                            Navigator.pop(context, _selectedModelId);
+                          },
                           child: Text(
                             'Save',
                             style: context.conduitTheme.bodyMedium?.copyWith(
@@ -837,7 +846,7 @@ class _DefaultModelBottomSheetState extends ConsumerState<_DefaultModelBottomShe
                       controller: _searchController,
                       style: TextStyle(color: context.conduitTheme.textPrimary),
                       decoration: InputDecoration(
-                        hintText: 'Search...',
+                        hintText: 'Search models...',
                         hintStyle: TextStyle(
                           color: context.conduitTheme.inputPlaceholder,
                         ),
@@ -874,6 +883,41 @@ class _DefaultModelBottomSheetState extends ConsumerState<_DefaultModelBottomShe
                     ),
                   ),
 
+                  // Section header (cohesive with Chats Drawer)
+                  Padding(
+                    padding: const EdgeInsets.only(bottom: Spacing.sm),
+                    child: Row(
+                      children: [
+                        Text(
+                          'Available Models',
+                          style: AppTypography.bodySmallStyle.copyWith(
+                            fontWeight: FontWeight.w600,
+                            color: context.conduitTheme.textSecondary,
+                            letterSpacing: 0.2,
+                          ),
+                        ),
+                        const SizedBox(width: Spacing.xs),
+                        Container(
+                          padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
+                          decoration: BoxDecoration(
+                            color: context.conduitTheme.surfaceBackground.withValues(alpha: 0.6),
+                            borderRadius: BorderRadius.circular(AppBorderRadius.xs),
+                            border: Border.all(
+                              color: context.conduitTheme.dividerColor,
+                              width: BorderWidth.thin,
+                            ),
+                          ),
+                          child: Text(
+                            '${_filteredModels.length}',
+                            style: AppTypography.bodySmallStyle.copyWith(
+                              color: context.conduitTheme.textSecondary,
+                            ),
+                          ),
+                        ),
+                      ],
+                    ),
+                  ),
+
                   const SizedBox(height: Spacing.sm),
 
                   // Models list
@@ -919,6 +963,7 @@ class _DefaultModelBottomSheetState extends ConsumerState<_DefaultModelBottomShe
                                   isSelected: isSelected,
                                   isAutoSelect: isAutoSelect,
                                   onTap: () {
+                                    HapticFeedback.selectionClick();
                                     setState(() {
                                       _selectedModelId = isAutoSelect ? 'auto-select' : model.id;
                                     });

lib/features/tools/widgets/unified_tools_modal.dart

@@ -25,39 +25,42 @@ class _UnifiedToolsModalState extends ConsumerState<UnifiedToolsModal> {
     final selectedToolIds = ref.watch(selectedToolIdsProvider);
     final toolsAsync = ref.watch(toolsListProvider);
 
+    final theme = context.conduitTheme;
     return Container(
       decoration: BoxDecoration(
-        color: context.conduitTheme.surfaceBackground,
+        color: theme.surfaceBackground,
         borderRadius: const BorderRadius.vertical(
           top: Radius.circular(AppBorderRadius.bottomSheet),
         ),
+        border: Border.all(color: theme.dividerColor, width: BorderWidth.regular),
         boxShadow: ConduitShadows.modal,
       ),
+      child: SafeArea(
+        top: false,
+        bottom: true,
+        child: ConstrainedBox(
+          constraints: BoxConstraints(
+            maxHeight: MediaQuery.of(context).size.height * 0.8,
+          ),
+          child: SingleChildScrollView(
             padding: const EdgeInsets.all(Spacing.bottomSheetPadding),
             child: Column(
-        mainAxisSize: MainAxisSize.min,
+              crossAxisAlignment: CrossAxisAlignment.stretch,
               children: [
                 // Handle bar
-          Container(
+                Center(
+                  child: Container(
                     width: 40,
                     height: 4,
                     decoration: BoxDecoration(
-              color: context.conduitTheme.textPrimary.withValues(
+                      color: theme.textPrimary.withValues(alpha: Alpha.medium),
-                alpha: Alpha.medium,
-              ),
                       borderRadius: BorderRadius.circular(2),
                     ),
                   ),
-          const SizedBox(height: Spacing.lg),
+                ),
+                const SizedBox(height: Spacing.md),
 
-          // Title
+                // Removed header for minimal, focused layout
-          Text(
-            'Tools & Search',
-            style: AppTypography.headlineSmallStyle.copyWith(
-              color: context.conduitTheme.textPrimary,
-            ),
-          ),
-          const SizedBox(height: Spacing.lg),
 
                 // Web Search Toggle
                 _buildWebSearchToggle(webSearchEnabled),
@@ -73,21 +76,11 @@ class _UnifiedToolsModalState extends ConsumerState<UnifiedToolsModal> {
                 toolsAsync.when(
                   data: (tools) {
                     if (tools.isEmpty) {
-                return Container(
+                      return _buildNeutralCard(
-                  width: double.infinity,
-                  padding: const EdgeInsets.all(Spacing.md),
-                  decoration: BoxDecoration(
-                    color: context.conduitTheme.cardBackground,
-                    borderRadius: BorderRadius.circular(AppBorderRadius.md),
-                    border: Border.all(
-                      color: context.conduitTheme.cardBorder,
-                      width: BorderWidth.regular,
-                    ),
-                  ),
                         child: Text(
                           'No tools available',
                           style: AppTypography.bodySmallStyle.copyWith(
-                      color: context.conduitTheme.textSecondary,
+                            color: theme.textSecondary,
                           ),
                         ),
                       );
@@ -96,13 +89,7 @@ class _UnifiedToolsModalState extends ConsumerState<UnifiedToolsModal> {
                     return Column(
                       crossAxisAlignment: CrossAxisAlignment.start,
                       children: [
-                  Text(
+                        _buildSectionHeader('Available Tools', tools.length),
-                    'Available Tools',
-                    style: AppTypography.labelStyle.copyWith(
-                      color: context.conduitTheme.textPrimary,
-                      fontWeight: FontWeight.w600,
-                    ),
-                  ),
                         const SizedBox(height: Spacing.sm),
                         ...tools.map(
                           (tool) => Padding(
@@ -116,17 +103,7 @@ class _UnifiedToolsModalState extends ConsumerState<UnifiedToolsModal> {
                       ],
                     );
                   },
-            loading: () => Container(
+                  loading: () => _buildNeutralCard(
-              width: double.infinity,
-              padding: const EdgeInsets.all(Spacing.md),
-              decoration: BoxDecoration(
-                color: context.conduitTheme.cardBackground,
-                borderRadius: BorderRadius.circular(AppBorderRadius.md),
-                border: Border.all(
-                  color: context.conduitTheme.cardBorder,
-                  width: BorderWidth.regular,
-                ),
-              ),
                     child: const Center(
                       child: SizedBox(
                         width: 24,
@@ -135,7 +112,25 @@ class _UnifiedToolsModalState extends ConsumerState<UnifiedToolsModal> {
                       ),
                     ),
                   ),
-            error: (error, stack) => Container(
+                  error: (error, stack) => _buildNeutralCard(
+                    child: Text(
+                      'Failed to load tools',
+                      style: AppTypography.bodySmallStyle.copyWith(
+                        color: theme.error,
+                      ),
+                    ),
+                  ),
+                ),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+
+  Widget _buildNeutralCard({required Widget child}) {
+    return Container(
       width: double.infinity,
       padding: const EdgeInsets.all(Spacing.md),
       decoration: BoxDecoration(
@@ -146,21 +141,55 @@ class _UnifiedToolsModalState extends ConsumerState<UnifiedToolsModal> {
           width: BorderWidth.regular,
         ),
       ),
-              child: Text(
+      child: child,
-                'Failed to load tools',
+    );
+  }
+
+  Widget _buildSectionHeader(String title, int count) {
+    final theme = context.conduitTheme;
+    return Row(
+      children: [
+        Text(
+          title,
           style: AppTypography.bodySmallStyle.copyWith(
-                  color: context.conduitTheme.error,
+            fontWeight: FontWeight.w600,
+            color: theme.textSecondary,
+            letterSpacing: 0.2,
           ),
         ),
+        const SizedBox(width: Spacing.xs),
+        Container(
+          padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
+          decoration: BoxDecoration(
+            color: theme.surfaceBackground.withValues(alpha: 0.6),
+            borderRadius: BorderRadius.circular(AppBorderRadius.xs),
+            border: Border.all(color: theme.dividerColor, width: BorderWidth.thin),
+          ),
+          child: Text(
+            '$count',
+            style: AppTypography.bodySmallStyle.copyWith(
+              color: theme.textSecondary,
+            ),
           ),
         ),
       ],
-      ),
     );
   }
 
   Widget _buildWebSearchToggle(bool webSearchEnabled) {
-    return GestureDetector(
+    return Material(
+      color: Colors.transparent,
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(AppBorderRadius.md),
+        side: BorderSide(
+          color: webSearchEnabled
+              ? context.conduitTheme.buttonPrimary
+              : context.conduitTheme.cardBorder,
+          width: BorderWidth.regular,
+        ),
+      ),
+      child: InkWell(
+        borderRadius: BorderRadius.circular(AppBorderRadius.md),
         onTap: () {
           HapticFeedback.lightImpact();
           ref.read(webSearchEnabledProvider.notifier).state = !webSearchEnabled;
@@ -173,12 +202,6 @@ class _UnifiedToolsModalState extends ConsumerState<UnifiedToolsModal> {
                 ? context.conduitTheme.buttonPrimary
                 : context.conduitTheme.cardBackground,
             borderRadius: BorderRadius.circular(AppBorderRadius.md),
-          border: Border.all(
-            color: webSearchEnabled
-                ? context.conduitTheme.buttonPrimary
-                : context.conduitTheme.cardBorder,
-            width: BorderWidth.regular,
-          ),
           ),
         child: Row(
           children: [
@@ -232,11 +255,24 @@ class _UnifiedToolsModalState extends ConsumerState<UnifiedToolsModal> {
           ],
         ),
         ),
+      ),
     );
   }
 
   Widget _buildImageGenerationToggle(bool imageGenEnabled) {
-    return GestureDetector(
+    return Material(
+      color: Colors.transparent,
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(AppBorderRadius.md),
+        side: BorderSide(
+          color: imageGenEnabled
+              ? context.conduitTheme.buttonPrimary
+              : context.conduitTheme.cardBorder,
+          width: BorderWidth.regular,
+        ),
+      ),
+      child: InkWell(
+        borderRadius: BorderRadius.circular(AppBorderRadius.md),
         onTap: () {
           HapticFeedback.lightImpact();
           ref.read(imageGenerationEnabledProvider.notifier).state =
@@ -250,12 +286,6 @@ class _UnifiedToolsModalState extends ConsumerState<UnifiedToolsModal> {
                 ? context.conduitTheme.buttonPrimary
                 : context.conduitTheme.cardBackground,
             borderRadius: BorderRadius.circular(AppBorderRadius.md),
-          border: Border.all(
-            color: imageGenEnabled
-                ? context.conduitTheme.buttonPrimary
-                : context.conduitTheme.cardBorder,
-            width: BorderWidth.regular,
-          ),
           ),
         child: Row(
           children: [
@@ -307,11 +337,24 @@ class _UnifiedToolsModalState extends ConsumerState<UnifiedToolsModal> {
           ],
         ),
         ),
+      ),
     );
   }
 
   Widget _buildToolCard(Tool tool, bool isSelected) {
-    return GestureDetector(
+    return Material(
+      color: Colors.transparent,
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(AppBorderRadius.md),
+        side: BorderSide(
+          color: isSelected
+              ? context.conduitTheme.buttonPrimary
+              : context.conduitTheme.cardBorder,
+          width: BorderWidth.regular,
+        ),
+      ),
+      child: InkWell(
+        borderRadius: BorderRadius.circular(AppBorderRadius.md),
         onTap: () {
           HapticFeedback.lightImpact();
           final currentIds = ref.read(selectedToolIdsProvider);
@@ -334,12 +377,6 @@ class _UnifiedToolsModalState extends ConsumerState<UnifiedToolsModal> {
                 ? context.conduitTheme.buttonPrimary
                 : context.conduitTheme.cardBackground,
             borderRadius: BorderRadius.circular(AppBorderRadius.md),
-          border: Border.all(
-            color: isSelected
-                ? context.conduitTheme.buttonPrimary
-                : context.conduitTheme.cardBorder,
-            width: BorderWidth.regular,
-          ),
           ),
           child: Row(
           children: [
@@ -393,6 +430,7 @@ class _UnifiedToolsModalState extends ConsumerState<UnifiedToolsModal> {
           ],
           ),
         ),
+      ),
     );
   }