refactor: update search functionality with SearchAnchor and improve navigation to settings and composition pages

dialer/lib/presentation/features/home/home_page.dart

@@ -4,7 +4,7 @@ import '../contacts/contact_page.dart';
 import '../favorites/favorites_page.dart';
 import '../history/history_page.dart';
 import '../dialer/composition_page.dart';
-import '../settings/settings_page.dart';
+import '../settings/settings.dart';
 import '../voicemail/voicemail_page.dart';
 import '../contacts/contact_state.dart';
 import '../contacts/widgets/contact_modal.dart';
@@ -23,7 +23,7 @@ class _MyHomePageState extends State<MyHomePage>
   List<Contact> _allContacts = [];
   List<Contact> _contactSuggestions = [];
   final ObfuscateService _obfuscateService = ObfuscateService();
-  final TextEditingController _searchController = TextEditingController();
+  final SearchController _searchController = SearchController();
   bool _isInitialized = false;
 
   @override
@@ -61,11 +61,6 @@ class _MyHomePageState extends State<MyHomePage>
     }
   }
 
-  void _clearSearch() {
-    _searchController.clear();
-    _onSearchChanged('');
-  }
-
   void _onSearchChanged(String query) {
     setState(() {
       if (query.isEmpty) {
@@ -132,31 +127,105 @@ class _MyHomePageState extends State<MyHomePage>
             child: Row(
               children: [
                 Expanded(
-                  child: Container(
+                  child: SearchAnchor(
-                    decoration: BoxDecoration(
+                    builder: (BuildContext context, SearchController controller) {
-                      color: const Color.fromARGB(255, 30, 30, 30),
+                      return GestureDetector(
-                      borderRadius: BorderRadius.circular(12.0),
+                        onTap: () {
-                      border: Border.all(color: Colors.grey.shade800, width: 1),
+                          controller.openView(); // Open the search view
-                    ),
+                        },
-                    child: TextField(
+                        child: Container(
-                      controller: _searchController,
+                          decoration: BoxDecoration(
-                      decoration: InputDecoration(
+                            color: const Color.fromARGB(255, 30, 30, 30),
-                        hintText: 'Search contacts',
+                            borderRadius: BorderRadius.circular(12.0),
-                        hintStyle: const TextStyle(color: Colors.grey),
+                            border: Border.all(color: Colors.grey.shade800, width: 1),
-                        prefixIcon: const Icon(Icons.search, color: Colors.grey),
+                          ),
-                        suffixIcon: _searchController.text.isNotEmpty
+                          padding: const EdgeInsets.symmetric(
-                            ? IconButton(
+                              vertical: 12.0, horizontal: 16.0),
-                                icon: const Icon(Icons.clear, color: Colors.grey),
+                          child: Row(
-                                onPressed: _clearSearch,
+                            children: [
-                              )
+                              const Icon(Icons.search,
-                            : null,
+                                  color: Colors.grey, size: 24.0),
-                        border: InputBorder.none,
+                              const SizedBox(width: 8.0),
-                        contentPadding: const EdgeInsets.symmetric(
+                              Text(
-                            vertical: 12.0, horizontal: 16.0),
+                                controller.text.isEmpty
-                      ),
+                                    ? 'Search contacts'
-                      style: const TextStyle(color: Colors.white),
+                                    : controller.text,
-                      onChanged: _onSearchChanged,
+                                style: const TextStyle(
-                    ),
+                                    color: Colors.grey, fontSize: 16.0),
+                              ),
+                              const Spacer(),
+                              if (controller.text.isNotEmpty)
+                                GestureDetector(
+                                  onTap: () {
+                                    controller.clear();
+                                    _onSearchChanged('');
+                                  },
+                                  child: const Icon(
+                                    Icons.clear,
+                                    color: Colors.grey,
+                                    size: 24.0,
+                                  ),
+                                ),
+                            ],
+                          ),
+                        ),
+                      );
+                    },
+                    viewOnChanged: _onSearchChanged, // Update immediately
+                    suggestionsBuilder:
+                        (BuildContext context, SearchController controller) {
+                      return _contactSuggestions.map((contact) {
+                        return ListTile(
+                          key: ValueKey(contact.id),
+                          title: Text(_obfuscateService.obfuscateData(contact.displayName),
+                              style: const TextStyle(color: Colors.white)),
+                          onTap: () {
+                            // Clear the search text input
+                            controller.text = '';
+
+                            // Close the search view
+                            controller.closeView(contact.displayName);
+
+                            // Show the ContactModal when a contact is tapped
+                            showModalBottomSheet(
+                              context: context,
+                              isScrollControlled: true,
+                              backgroundColor: Colors.transparent,
+                              builder: (context) {
+                                return ContactModal(
+                                  contact: contact,
+                                  onEdit: () async {
+                                    if (await FlutterContacts.requestPermission()) {
+                                      final updatedContact =
+                                          await FlutterContacts.openExternalEdit(contact.id);
+                                      if (updatedContact != null) {
+                                        _fetchContacts();
+                                        Navigator.of(context).pop();
+                                        ScaffoldMessenger.of(context).showSnackBar(
+                                          SnackBar(
+                                            content: Text(
+                                                '${contact.displayName} updated successfully!'),
+                                          ),
+                                        );
+                                      } else {
+                                        ScaffoldMessenger.of(context).showSnackBar(
+                                          SnackBar(
+                                            content: Text(
+                                                'Edit canceled or failed.'),
+                                          ),
+                                        );
+                                      }
+                                    }
+                                  },
+                                  onToggleFavorite: () => _toggleFavorite(contact),
+                                  isFavorite: contact.isStarred,
+                                );
+                              },
+                            );
+                          },
+                        );
+                      }).toList();
+                    },
                   ),
                 ),
                 // 3-dot menu
@@ -170,7 +239,10 @@ class _MyHomePageState extends State<MyHomePage>
                   ],
                   onSelected: (String value) {
                     if (value == 'settings') {
-                      Navigator.pushNamed(context, '/settings');
+                      Navigator.push(
+                        context,
+                        MaterialPageRoute(builder: (context) => const SettingsPage()),
+                      );
                     }
                   },
                 ),
@@ -195,7 +267,12 @@ class _MyHomePageState extends State<MyHomePage>
                   bottom: 20,
                   child: FloatingActionButton(
                     onPressed: () {
-                      Navigator.pushNamed(context, '/composition');
+                      Navigator.push(
+                        context,
+                        MaterialPageRoute(
+                          builder: (context) => const CompositionPage(),
+                        ),
+                      );
                     },
                     backgroundColor: Colors.blue,
                     shape: RoundedRectangleBorder(