From fca1eea1c97c7d0635ac23e03e1018cfce8e898a Mon Sep 17 00:00:00 2001
From: Florian Griffon <florian.griffon@epitech.eu>
Date: Sun, 15 Dec 2024 17:51:56 +0000
Subject: [PATCH] contact-modal (#10)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Feat: contact-modal et refonte du contact-state pour la page de favori et possibilité de update les contacts. Aussi mis la composition page avec le service de contact, on évite de fetch dans la page directement
Reviewed-on: https://git.gmoker.com/icing/G-EIP-700-TLS-7-1-eip-stephane.corbiere/pulls/10
Co-authored-by: Florian Griffon <florian.griffon@epitech.eu>
Co-committed-by: Florian Griffon <florian.griffon@epitech.eu>
---
 .../android/app/src/debug/AndroidManifest.xml |   2 +
 .../android/app/src/main/AndroidManifest.xml  |   2 +
 .../app/src/profile/AndroidManifest.xml       |   2 +
 .../lib/features/composition/composition.dart |  61 +++--
 .../lib/features/contacts/contact_page.dart   |   2 +-
 .../features/contacts/contact_service.dart    |  15 --
 .../lib/features/contacts/contact_state.dart  |  23 +-
 .../widgets/alphabet_scroll_page.dart         | 145 +++++++++--
 .../contacts/widgets/contact_modal.dart       | 228 ++++++++++++++++++
 dialer/lib/features/home/home_page.dart       |   9 +-
 dialer/lib/widgets/contact_service.dart       |  31 +++
 dialer/pubspec.yaml                           |   1 +
 12 files changed, 447 insertions(+), 74 deletions(-)
 delete mode 100644 dialer/lib/features/contacts/contact_service.dart
 create mode 100644 dialer/lib/features/contacts/widgets/contact_modal.dart
 create mode 100644 dialer/lib/widgets/contact_service.dart

diff --git a/dialer/android/app/src/debug/AndroidManifest.xml b/dialer/android/app/src/debug/AndroidManifest.xml
index 9d570eb..be93e62 100644
--- a/dialer/android/app/src/debug/AndroidManifest.xml
+++ b/dialer/android/app/src/debug/AndroidManifest.xml
@@ -1,6 +1,8 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android">
     <uses-permission android:name="android.permission.READ_CONTACTS"/>
     <uses-permission android:name="android.permission.WRITE_CONTACTS"/>
+    <uses-permission android:name="android.permission.CALL_PHONE" />
+    <uses-permission android:name="android.permission.SEND_SMS" />
     <uses-feature android:name="android.hardware.camera" android:required="false" />
     <!-- The INTERNET permission is required for development. Specifically,
          the Flutter tool needs it to communicate with the running application
diff --git a/dialer/android/app/src/main/AndroidManifest.xml b/dialer/android/app/src/main/AndroidManifest.xml
index 90bf154..4ba2a7b 100644
--- a/dialer/android/app/src/main/AndroidManifest.xml
+++ b/dialer/android/app/src/main/AndroidManifest.xml
@@ -1,6 +1,8 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android">
     <uses-permission android:name="android.permission.READ_CONTACTS"/>
     <uses-permission android:name="android.permission.WRITE_CONTACTS"/>
+    <uses-permission android:name="android.permission.CALL_PHONE" />
+    <uses-permission android:name="android.permission.SEND_SMS" />
     <application
         android:label="com.example.dialer"
         android:name="${applicationName}"
diff --git a/dialer/android/app/src/profile/AndroidManifest.xml b/dialer/android/app/src/profile/AndroidManifest.xml
index 01dbfc9..767714e 100644
--- a/dialer/android/app/src/profile/AndroidManifest.xml
+++ b/dialer/android/app/src/profile/AndroidManifest.xml
@@ -1,6 +1,8 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android">
     <uses-permission android:name="android.permission.READ_CONTACTS"/>
     <uses-permission android:name="android.permission.WRITE_CONTACTS"/>
+    <uses-permission android:name="android.permission.CALL_PHONE" />
+    <uses-permission android:name="android.permission.SEND_SMS" />
     <uses-permission android:name="android.permission.CAMERA"/>
     <uses-feature android:name="android.hardware.camera" android:required="false" />
     <!-- The INTERNET permission is required for development. Specifically,
diff --git a/dialer/lib/features/composition/composition.dart b/dialer/lib/features/composition/composition.dart
index bdaf048..b224f05 100644
--- a/dialer/lib/features/composition/composition.dart
+++ b/dialer/lib/features/composition/composition.dart
@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_contacts/flutter_contacts.dart';
+import '../../widgets/contact_service.dart';
 
 class CompositionPage extends StatefulWidget {
   const CompositionPage({super.key});
@@ -12,6 +13,7 @@ class _CompositionPageState extends State<CompositionPage> {
   String dialedNumber = "";
   List<Contact> _allContacts = [];
   List<Contact> _filteredContacts = [];
+  final ContactService _contactService = ContactService();
 
   @override
   void initState() {
@@ -20,11 +22,9 @@ class _CompositionPageState extends State<CompositionPage> {
   }
 
   Future<void> _fetchContacts() async {
-    if (await FlutterContacts.requestPermission()) {
-      _allContacts = await FlutterContacts.getContacts(withProperties: true);
-      _filteredContacts = _allContacts;
-      setState(() {});
-    }
+    _allContacts = await _contactService.fetchContacts();
+    _filteredContacts = _allContacts;
+    setState(() {});
   }
 
   void _filterContacts() {
@@ -79,9 +79,9 @@ class _CompositionPageState extends State<CompositionPage> {
               // Top half: Display contacts matching dialed number
               Expanded(
                 flex: 2,
-                child:
-                Container(
-                  padding: const EdgeInsets.only(top: 42.0, left: 16.0, right: 16.0, bottom: 16.0),
+                child: Container(
+                  padding: const EdgeInsets.only(
+                      top: 42.0, left: 16.0, right: 16.0, bottom: 16.0),
                   color: Colors.black,
                   child: Column(
                     crossAxisAlignment: CrossAxisAlignment.start,
@@ -93,12 +93,14 @@ class _CompositionPageState extends State<CompositionPage> {
                                   return ListTile(
                                     title: Text(
                                       contact.displayName,
-                                      style: const TextStyle(color: Colors.white),
+                                      style:
+                                          const TextStyle(color: Colors.white),
                                     ),
                                     subtitle: contact.phones.isNotEmpty
                                         ? Text(
                                             contact.phones.first.number,
-                                            style: const TextStyle(color: Colors.grey),
+                                            style: const TextStyle(
+                                                color: Colors.grey),
                                           )
                                         : null,
                                     trailing: Row(
@@ -106,16 +108,22 @@ class _CompositionPageState extends State<CompositionPage> {
                                       children: [
                                         // Call button
                                         IconButton(
-                                          icon: Icon(Icons.phone, color: Colors.green[300], size: 20),
+                                          icon: Icon(Icons.phone,
+                                              color: Colors.green[300],
+                                              size: 20),
                                           onPressed: () {
-                                            print('Calling ${contact.displayName}');
+                                            print(
+                                                'Calling ${contact.displayName}');
                                           },
                                         ),
                                         // Text button
                                         IconButton(
-                                          icon: Icon(Icons.message, color: Colors.blue[300], size: 20),
+                                          icon: Icon(Icons.message,
+                                              color: Colors.blue[300],
+                                              size: 20),
                                           onPressed: () {
-                                            print('Texting ${contact.displayName}');
+                                            print(
+                                                'Texting ${contact.displayName}');
                                           },
                                         ),
                                       ],
@@ -125,7 +133,12 @@ class _CompositionPageState extends State<CompositionPage> {
                                     },
                                   );
                                 }).toList()
-                              : [Center(child: Text('No contacts found', style: TextStyle(color: Colors.white)))],
+                              : [
+                                  Center(
+                                      child: Text('No contacts found',
+                                          style:
+                                              TextStyle(color: Colors.white)))
+                                ],
                         ),
                       ),
                     ],
@@ -150,14 +163,16 @@ class _CompositionPageState extends State<CompositionPage> {
                               alignment: Alignment.center,
                               child: Text(
                                 dialedNumber,
-                                style: const TextStyle(fontSize: 24, color: Colors.white),
+                                style: const TextStyle(
+                                    fontSize: 24, color: Colors.white),
                                 overflow: TextOverflow.ellipsis,
                               ),
                             ),
                           ),
                           IconButton(
                             onPressed: _onClearPress,
-                            icon: const Icon(Icons.backspace, color: Colors.white),
+                            icon: const Icon(Icons.backspace,
+                                color: Colors.white),
                           ),
                         ],
                       ),
@@ -170,7 +185,8 @@ class _CompositionPageState extends State<CompositionPage> {
                             mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                             children: [
                               Row(
-                                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+                                mainAxisAlignment:
+                                    MainAxisAlignment.spaceEvenly,
                                 children: [
                                   _buildDialButton('1'),
                                   _buildDialButton('2'),
@@ -178,7 +194,8 @@ class _CompositionPageState extends State<CompositionPage> {
                                 ],
                               ),
                               Row(
-                                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+                                mainAxisAlignment:
+                                    MainAxisAlignment.spaceEvenly,
                                 children: [
                                   _buildDialButton('4'),
                                   _buildDialButton('5'),
@@ -186,7 +203,8 @@ class _CompositionPageState extends State<CompositionPage> {
                                 ],
                               ),
                               Row(
-                                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+                                mainAxisAlignment:
+                                    MainAxisAlignment.spaceEvenly,
                                 children: [
                                   _buildDialButton('7'),
                                   _buildDialButton('8'),
@@ -194,7 +212,8 @@ class _CompositionPageState extends State<CompositionPage> {
                                 ],
                               ),
                               Row(
-                                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+                                mainAxisAlignment:
+                                    MainAxisAlignment.spaceEvenly,
                                 children: [
                                   _buildDialButton('*'),
                                   _buildDialButton('0'),
diff --git a/dialer/lib/features/contacts/contact_page.dart b/dialer/lib/features/contacts/contact_page.dart
index 7374f49..93acc45 100644
--- a/dialer/lib/features/contacts/contact_page.dart
+++ b/dialer/lib/features/contacts/contact_page.dart
@@ -18,7 +18,7 @@ class _ContactPageState extends State<ContactPage> {
       body: contactState.loading
           ? const LoadingIndicatorWidget()
           // : ContactListWidget(contacts: contactState.contacts),
-          : AlphabetScrollPage(contacts: contactState.contacts, scrollOffset: contactState.scrollOffset),
+          : AlphabetScrollPage(scrollOffset: contactState.scrollOffset),
     );
   }
 }
diff --git a/dialer/lib/features/contacts/contact_service.dart b/dialer/lib/features/contacts/contact_service.dart
deleted file mode 100644
index a448e6c..0000000
--- a/dialer/lib/features/contacts/contact_service.dart
+++ /dev/null
@@ -1,15 +0,0 @@
-import 'package:flutter_contacts/flutter_contacts.dart';
-
-// Service to manage contact-related operations
-class ContactService {
-  Future<List<Contact>> fetchContacts() async {
-    if (await FlutterContacts.requestPermission()) {
-      return await FlutterContacts.getContacts(withProperties: true, withThumbnail: true, withAccounts: true, withGroups: true);
-    }
-    return [];
-  }
-
-  Future<void> addNewContact(Contact contact) async {
-    await FlutterContacts.insertContact(contact);
-  }
-}
\ No newline at end of file
diff --git a/dialer/lib/features/contacts/contact_state.dart b/dialer/lib/features/contacts/contact_state.dart
index 45ab56a..75e70d8 100644
--- a/dialer/lib/features/contacts/contact_state.dart
+++ b/dialer/lib/features/contacts/contact_state.dart
@@ -1,6 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_contacts/flutter_contacts.dart';
-import 'contact_service.dart';
+import '../../widgets/contact_service.dart';
 
 class ContactState extends StatefulWidget {
   final Widget child;
@@ -8,7 +8,9 @@ class ContactState extends StatefulWidget {
   const ContactState({super.key, required this.child});
 
   static _ContactStateState of(BuildContext context) {
-    return context.dependOnInheritedWidgetOfExactType<_InheritedContactState>()!.data;
+    return context
+        .dependOnInheritedWidgetOfExactType<_InheritedContactState>()!
+        .data;
   }
 
   @override
@@ -30,13 +32,13 @@ class _ContactStateState extends State<ContactState> {
   @override
   void initState() {
     super.initState();
-    _fetchContacts();
+    fetchContacts();
 
     // Add listener for contact changes
     FlutterContacts.addListener(_onContactChange);
   }
 
-  void _onContactChange() => _fetchContacts();
+  void _onContactChange() => fetchContacts();
 
   @override
   void dispose() {
@@ -45,16 +47,20 @@ class _ContactStateState extends State<ContactState> {
     super.dispose();
   }
 
-  Future<void> _fetchContacts() async {
-    List<Contact> contacts = await _contactService.fetchContacts();
+  Future<void> fetchContacts({bool onlyStarred = false}) async {
+    List<Contact> contacts = onlyStarred
+        ? await _contactService.fetchFavoriteContacts()
+        : await _contactService.fetchContacts();
 
-    debugPrint("Fetched ${contacts.length} contacts");
+    debugPrint(
+        "Fetched ${contacts.length} ${onlyStarred ? 'favorite' : ''} contacts");
 
     // Find selfContact before filtering
     _selfContact = contacts.firstWhere(
       (contact) => contact.displayName.toLowerCase() == "user",
       orElse: () => Contact(),
     );
+
     if (_selfContact!.phones.isEmpty) {
       debugPrint("Self contact has no phone numbers");
       _selfContact = null;
@@ -62,6 +68,7 @@ class _ContactStateState extends State<ContactState> {
 
     contacts = contacts.where((contact) => contact.phones.isNotEmpty).toList();
     contacts.sort((a, b) => a.displayName.compareTo(b.displayName));
+
     setState(() {
       _contacts = contacts;
       _loading = false;
@@ -71,7 +78,7 @@ class _ContactStateState extends State<ContactState> {
 
   Future<void> addNewContact(Contact contact) async {
     await _contactService.addNewContact(contact);
-    await _fetchContacts();
+    await fetchContacts();
   }
 
   void setScrollOffset(double offset) {
diff --git a/dialer/lib/features/contacts/widgets/alphabet_scroll_page.dart b/dialer/lib/features/contacts/widgets/alphabet_scroll_page.dart
index 5bf096b..7453181 100644
--- a/dialer/lib/features/contacts/widgets/alphabet_scroll_page.dart
+++ b/dialer/lib/features/contacts/widgets/alphabet_scroll_page.dart
@@ -1,16 +1,16 @@
 import 'package:dialer/widgets/username_color_generator.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_contacts/flutter_contacts.dart';
-import '../../../widgets/color_darkener.dart';
 import '../contact_state.dart';
+import '../../../widgets/color_darkener.dart';
 import 'add_contact_button.dart';
+import 'contact_modal.dart';
 import 'share_own_qr.dart';
 
 class AlphabetScrollPage extends StatefulWidget {
-  final List<Contact> contacts;
   final double scrollOffset;
 
-  const AlphabetScrollPage({super.key, required this.contacts, required this.scrollOffset});
+  const AlphabetScrollPage({super.key, required this.scrollOffset});
 
   @override
   _AlphabetScrollPageState createState() => _AlphabetScrollPageState();
@@ -22,7 +22,8 @@ class _AlphabetScrollPageState extends State<AlphabetScrollPage> {
   @override
   void initState() {
     super.initState();
-    _scrollController = ScrollController(initialScrollOffset: widget.scrollOffset);
+    _scrollController =
+        ScrollController(initialScrollOffset: widget.scrollOffset);
     _scrollController.addListener(_onScroll);
   }
 
@@ -31,11 +32,54 @@ class _AlphabetScrollPageState extends State<AlphabetScrollPage> {
     contactState.setScrollOffset(_scrollController.offset);
   }
 
+  Future<void> _refreshContacts() async {
+    final contactState = ContactState.of(context);
+    try {
+      await contactState.fetchContacts();
+    } catch (e) {
+      print('Error refreshing contacts: $e');
+      ScaffoldMessenger.of(context).showSnackBar(
+        SnackBar(content: Text('Failed to refresh contacts')),
+      );
+    }
+  }
+
+  void _toggleFavorite(Contact contact) async {
+    try {
+      if (await FlutterContacts.requestPermission()) {
+        Contact? fullContact = await FlutterContacts.getContact(contact.id,
+            withProperties: true,
+            withAccounts: true,
+            withPhoto: true,
+            withThumbnail: true);
+
+        if (fullContact != null) {
+          fullContact.isStarred = !fullContact.isStarred;
+          await FlutterContacts.updateContact(fullContact);
+        }
+        await _refreshContacts();
+      } else {
+        print("Could not fetch contact details");
+      }
+    } catch (e) {
+      print("Error updating favorite status: $e");
+      ScaffoldMessenger.of(context).showSnackBar(
+        SnackBar(content: Text('Failed to update contact favorite status')),
+      );
+    }
+  }
+
   @override
   Widget build(BuildContext context) {
+    final contactState = ContactState.of(context);
+    final contacts = contactState.contacts;
+    final selfContact = contactState.selfContact;
+
     Map<String, List<Contact>> alphabetizedContacts = {};
-    for (var contact in widget.contacts) {
-      String firstLetter = contact.displayName.isNotEmpty ? contact.displayName[0].toUpperCase() : '#';
+    for (var contact in contacts) {
+      String firstLetter = contact.displayName.isNotEmpty
+          ? contact.displayName[0].toUpperCase()
+          : '#';
       if (!alphabetizedContacts.containsKey(firstLetter)) {
         alphabetizedContacts[firstLetter] = [];
       }
@@ -47,7 +91,8 @@ class _AlphabetScrollPageState extends State<AlphabetScrollPage> {
     return Scaffold(
       backgroundColor: Colors.black,
       body: Column(
-        children: [  // Top buttons row
+        children: [
+          // Top buttons row
           Container(
             color: Colors.black,
             padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
@@ -55,7 +100,7 @@ class _AlphabetScrollPageState extends State<AlphabetScrollPage> {
               mainAxisAlignment: MainAxisAlignment.spaceBetween,
               children: [
                 AddContactButton(),
-                QRCodeButton(contacts: widget.contacts, selfContact: ContactState.of(context).selfContact),
+                QRCodeButton(contacts: contacts, selfContact: selfContact),
               ],
             ),
           ),
@@ -66,13 +111,14 @@ class _AlphabetScrollPageState extends State<AlphabetScrollPage> {
               itemCount: alphabetKeys.length,
               itemBuilder: (context, index) {
                 String letter = alphabetKeys[index];
-                List<Contact> contacts = alphabetizedContacts[letter]!;
+                List<Contact> contactsForLetter = alphabetizedContacts[letter]!;
                 return Column(
                   crossAxisAlignment: CrossAxisAlignment.start,
                   children: [
                     // Alphabet Letter Header
                     Padding(
-                      padding: const EdgeInsets.symmetric(vertical: 8.0, horizontal: 16.0),
+                      padding: const EdgeInsets.symmetric(
+                          vertical: 8.0, horizontal: 16.0),
                       child: Text(
                         letter,
                         style: TextStyle(
@@ -83,25 +129,74 @@ class _AlphabetScrollPageState extends State<AlphabetScrollPage> {
                       ),
                     ),
                     // Contact Entries
-                    ...contacts.map((contact) {
-                      String phoneNumber = contact.phones.isNotEmpty ? contact.phones.first.number : 'No phone number';
-                      Color avatarColor = generateColorFromName(contact.displayName);
+                    ...contactsForLetter.map((contact) {
+                      String phoneNumber = contact.phones.isNotEmpty
+                          ? contact.phones.first.number
+                          : 'No phone number';
+                      Color avatarColor =
+                          generateColorFromName(contact.displayName);
                       return ListTile(
-                        leading: (contact.thumbnail != null && contact.thumbnail!.isNotEmpty)
+                        leading: (contact.thumbnail != null &&
+                                contact.thumbnail!.isNotEmpty)
                             ? CircleAvatar(
-                          backgroundImage: MemoryImage(contact.thumbnail!),
-                        )
+                                backgroundImage:
+                                    MemoryImage(contact.thumbnail!),
+                              )
                             : CircleAvatar(
-                          backgroundColor: avatarColor,
-                          child: Text(
-                            contact.displayName.isNotEmpty ? contact.displayName[0].toUpperCase() : '?',
-                            style: TextStyle(color: darken(avatarColor, 0.4)),
-                          ),
-                        ),
-                        title: Text(contact.displayName, style: TextStyle(color: Colors.white)),
-                        subtitle: Text(phoneNumber, style: TextStyle(color: Colors.white70)),
+                                backgroundColor: avatarColor,
+                                child: Text(
+                                  contact.displayName.isNotEmpty
+                                      ? contact.displayName[0].toUpperCase()
+                                      : '?',
+                                  style: TextStyle(
+                                      color: darken(avatarColor, 0.4)),
+                                ),
+                              ),
+                        title: Text(contact.displayName,
+                            style: TextStyle(color: Colors.white)),
+                        subtitle: Text(phoneNumber,
+                            style: TextStyle(color: Colors.white70)),
                         onTap: () {
-                          // Handle contact tap
+                          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) {
+                                      await _refreshContacts();
+                                      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,
+                              );
+                            },
+                          );
                         },
                       );
                     }),
diff --git a/dialer/lib/features/contacts/widgets/contact_modal.dart b/dialer/lib/features/contacts/widgets/contact_modal.dart
new file mode 100644
index 0000000..6514500
--- /dev/null
+++ b/dialer/lib/features/contacts/widgets/contact_modal.dart
@@ -0,0 +1,228 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_contacts/flutter_contacts.dart';
+import 'package:url_launcher/url_launcher.dart';
+import 'package:dialer/widgets/username_color_generator.dart';
+import 'package:flutter/material.dart';
+
+class ContactModal extends StatelessWidget {
+  final Contact contact;
+  final Function onEdit;
+  final Function onToggleFavorite;
+  final bool isFavorite;
+
+  const ContactModal({
+    super.key,
+    required this.contact,
+    required this.onEdit,
+    required this.onToggleFavorite,
+    required this.isFavorite,
+  });
+
+  void _launchPhoneDialer(String phoneNumber) async {
+    final uri = Uri(scheme: 'tel', path: phoneNumber);
+    if (await canLaunchUrl(uri)) {
+      await launchUrl(uri);
+    } else {
+      debugPrint('Could not launch $phoneNumber');
+    }
+  }
+
+  void _launchSms(String phoneNumber) async {
+    final uri = Uri(scheme: 'sms', path: phoneNumber);
+    if (await canLaunchUrl(uri)) {
+      await launchUrl(uri);
+    } else {
+      debugPrint('Could not launch SMS to $phoneNumber');
+    }
+  }
+
+  void _launchEmail(String email) async {
+    final uri = Uri(scheme: 'mailto', path: email);
+    if (await canLaunchUrl(uri)) {
+      await launchUrl(uri);
+    } else {
+      debugPrint('Could not launch email to $email');
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    String phoneNumber = contact.phones.isNotEmpty
+        ? contact.phones.first.number
+        : 'No phone number';
+    String email =
+        contact.emails.isNotEmpty ? contact.emails.first.address : 'No email';
+
+    return GestureDetector(
+      onTap: () => Navigator.of(context).pop(),
+      child: Container(
+        color: Colors.black.withOpacity(0.5),
+        child: GestureDetector(
+          onTap: () {},
+          child: FractionallySizedBox(
+            heightFactor: 0.7,
+            child: Container(
+              decoration: BoxDecoration(
+                color: Colors.grey[900],
+                borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
+              ),
+              child: Column(
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  // Modal Handle
+                  // Top Bar with Handle and Three-Dot Menu
+                  Stack(
+                    children: [
+                      Align(
+                        alignment: Alignment.center,
+                        child: Padding(
+                          padding: const EdgeInsets.symmetric(vertical: 10),
+                          child: Container(
+                            width: 50,
+                            height: 5,
+                            decoration: BoxDecoration(
+                              color: Colors.grey.shade300,
+                              borderRadius: BorderRadius.circular(5),
+                            ),
+                          ),
+                        ),
+                      ),
+                      Align(
+                        alignment: Alignment.topRight,
+                        child: Padding(
+                          padding: const EdgeInsets.only(top: 10, right: 10),
+                          child: PopupMenuButton<String>(
+                            icon: Icon(Icons.more_vert, color: Colors.white),
+                            onSelected: (String choice) {
+                              print(
+                                  'Selected: $choice'); // Placeholder for menu actions
+                            },
+                            itemBuilder: (BuildContext context) {
+                              return <PopupMenuEntry<String>>[
+                                PopupMenuItem<String>(
+                                  value: 'show_associated_contacts',
+                                  child: Text('Show associated contacts'),
+                                ),
+                                PopupMenuItem<String>(
+                                  value: 'delete',
+                                  child: Text('Delete'),
+                                ),
+                                PopupMenuItem<String>(
+                                  value: 'share',
+                                  child: Text('Share (via QR code)'),
+                                ),
+                                PopupMenuItem<String>(
+                                  value: 'create_shortcut',
+                                  child:
+                                      Text('Create shortcut (to home screen)'),
+                                ),
+                                PopupMenuItem<String>(
+                                  value: 'set_ringtone',
+                                  child: Text('Set ringtone'),
+                                ),
+                              ];
+                            },
+                          ),
+                        ),
+                      ),
+                    ],
+                  ),
+
+                  // Contact Profile
+                  Padding(
+                    padding: const EdgeInsets.all(16.0),
+                    child: Column(
+                      children: [
+                        CircleAvatar(
+                          radius: 50,
+                          backgroundImage: (contact.thumbnail != null &&
+                                  contact.thumbnail!.isNotEmpty)
+                              ? MemoryImage(contact.thumbnail!)
+                              : null,
+                          backgroundColor:
+                              generateColorFromName(contact.displayName),
+                          child: (contact.thumbnail == null ||
+                                  contact.thumbnail!.isEmpty)
+                              ? Text(
+                                  contact.displayName.isNotEmpty
+                                      ? contact.displayName[0].toUpperCase()
+                                      : '?',
+                                  style: TextStyle(
+                                      fontSize: 40, color: Colors.white),
+                                )
+                              : null,
+                        ),
+                        SizedBox(height: 10),
+                        Text(
+                          contact.displayName,
+                          style: TextStyle(
+                              fontSize: 24, fontWeight: FontWeight.bold),
+                        ),
+                      ],
+                    ),
+                  ),
+                  // Contact Actions
+                  Divider(),
+                  ListTile(
+                    leading: Icon(Icons.phone, color: Colors.green),
+                    title: Text(phoneNumber),
+                    onTap: () {
+                      if (contact.phones.isNotEmpty) {
+                        _launchPhoneDialer(phoneNumber);
+                      }
+                    },
+                  ),
+                  ListTile(
+                    leading: Icon(Icons.message, color: Colors.blue),
+                    title: Text(phoneNumber),
+                    onTap: () {
+                      if (contact.phones.isNotEmpty) {
+                        _launchSms(phoneNumber);
+                      }
+                    },
+                  ),
+                  ListTile(
+                    leading: Icon(Icons.email, color: Colors.orange),
+                    title: Text(email),
+                    onTap: () {
+                      if (contact.emails.isNotEmpty) {
+                        _launchEmail(email);
+                      }
+                    },
+                  ),
+                  Divider(),
+                  // Favorite and Edit Buttons
+                  Padding(
+                    padding: const EdgeInsets.symmetric(horizontal: 16.0),
+                    child: Row(
+                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                      children: [
+                        ElevatedButton.icon(
+                          onPressed: () {
+                            Navigator.of(context).pop();
+                            onToggleFavorite();
+                          },
+                          icon: Icon(contact.isStarred
+                              ? Icons.star
+                              : Icons.star_border),
+                          label: Text(
+                              contact.isStarred ? 'Unfavorite' : 'Favorite'),
+                        ),
+                        ElevatedButton.icon(
+                          onPressed: () => onEdit(),
+                          icon: Icon(Icons.edit),
+                          label: Text('Edit Contact'),
+                        ),
+                      ],
+                    ),
+                  ),
+                  SizedBox(height: 16),
+                ],
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
diff --git a/dialer/lib/features/home/home_page.dart b/dialer/lib/features/home/home_page.dart
index f16de1f..6cb729b 100644
--- a/dialer/lib/features/home/home_page.dart
+++ b/dialer/lib/features/home/home_page.dart
@@ -5,12 +5,15 @@ import 'package:dialer/features/history/history_page.dart';
 import 'package:dialer/features/composition/composition.dart';
 import 'package:flutter_contacts/flutter_contacts.dart';
 import 'package:dialer/features/settings/settings.dart';
+import '../../widgets/contact_service.dart';
 
 class _MyHomePageState extends State<MyHomePage>
     with SingleTickerProviderStateMixin {
   late TabController _tabController;
   List<Contact> _allContacts = [];
   List<Contact> _contactSuggestions = [];
+  final ContactService _contactService = ContactService();
+
 
   @override
   void initState() {
@@ -21,10 +24,8 @@ class _MyHomePageState extends State<MyHomePage>
   }
 
   void _fetchContacts() async {
-    if (await FlutterContacts.requestPermission()) {
-      _allContacts = await FlutterContacts.getContacts(withProperties: true);
-      setState(() {});
-    }
+    _allContacts = await _contactService.fetchContacts();
+    setState(() {});
   }
 
   void _onSearchChanged(String query) {
diff --git a/dialer/lib/widgets/contact_service.dart b/dialer/lib/widgets/contact_service.dart
new file mode 100644
index 0000000..61d365d
--- /dev/null
+++ b/dialer/lib/widgets/contact_service.dart
@@ -0,0 +1,31 @@
+import 'package:flutter_contacts/flutter_contacts.dart';
+
+// Service to manage contact-related operations
+class ContactService {
+  Future<List<Contact>> fetchContacts() async {
+    if (await FlutterContacts.requestPermission()) {
+      return await FlutterContacts.getContacts(
+          withProperties: true,
+          withThumbnail: true,
+          withAccounts: true,
+          withGroups: true,
+          withPhoto: true);
+    }
+    return [];
+  }
+
+  Future<List<Contact>> fetchFavoriteContacts() async {
+    // Fetch all contacts
+    List<Contact> contacts = await fetchContacts();
+
+    // Filter contacts to only include those with isStarred: true
+    List<Contact> favoriteContacts =
+        contacts.where((contact) => contact.isStarred).toList();
+
+    return favoriteContacts;
+  }
+
+  Future<void> addNewContact(Contact contact) async {
+    await FlutterContacts.insertContact(contact);
+  }
+}
diff --git a/dialer/pubspec.yaml b/dialer/pubspec.yaml
index 501f488..9c84ba5 100644
--- a/dialer/pubspec.yaml
+++ b/dialer/pubspec.yaml
@@ -34,6 +34,7 @@ dependencies:
 
   # The following adds the Cupertino Icons font to your application.
   # Use with the CupertinoIcons class for iOS style icons.
+  url_launcher: ^6.1.9  # To manage system dialer. Call, message...
   cupertino_icons: ^1.0.8
   flutter_contacts: ^1.1.9+2
   permission_handler: ^11.3.1 # For handling permissions