From 06251183df91f906791e80a13931e5f7d1f374dd Mon Sep 17 00:00:00 2001
From: AlexisDanlos <91090088+AlexisDanlos@users.noreply.github.com>
Date: Sun, 16 Mar 2025 23:28:46 +0100
Subject: [PATCH] feat: add hold functionality and update keypad layout in
 CallPage

---
 dialer/lib/features/call/call_page.dart | 129 ++++++++++++++++--------
 1 file changed, 85 insertions(+), 44 deletions(-)

diff --git a/dialer/lib/features/call/call_page.dart b/dialer/lib/features/call/call_page.dart
index e8edf82..b502412 100644
--- a/dialer/lib/features/call/call_page.dart
+++ b/dialer/lib/features/call/call_page.dart
@@ -20,6 +20,7 @@ class _CallPageState extends State<CallPage> {
   bool isKeypadVisible = false;
   bool icingProtocolOk = true;
   String _typedDigits = ""; // New state variable for pressed digits
+  bool isOnHold = false; // New state variable for hold status
 
   void _addDigit(String digit) {
     setState(() {
@@ -51,6 +52,12 @@ class _CallPageState extends State<CallPage> {
     });
   }
 
+  void _toggleHold() {
+    setState(() {
+      isOnHold = !isOnHold;
+    });
+  }
+
   void _hangUp() {
     Navigator.pop(context);
   }
@@ -121,11 +128,9 @@ class _CallPageState extends State<CallPage> {
               Expanded(
                 child: Column(
                   children: [
-                    if (isKeypadVisible) ...[
-                      // Add spacer to push keypad down
-                      const Spacer(flex: 2),
-                      
-                      // Typed digits display
+                    if (isKeypadVisible) ...
+                      [
+                      // Typed digits display remains the same
                       Padding(
                         padding: const EdgeInsets.symmetric(horizontal: 20.0),
                         child: Row(
@@ -153,50 +158,67 @@ class _CallPageState extends State<CallPage> {
                         ),
                       ),
                       
-                      // Keypad grid
+                      // Modified keypad section
                       Container(
-                        height: MediaQuery.of(context).size.height * 0.35,
-                        margin: const EdgeInsets.symmetric(horizontal: 20),
-                        child: GridView.count(
-                          shrinkWrap: true,
-                          physics: const NeverScrollableScrollPhysics(),
-                          crossAxisCount: 3,
-                          childAspectRatio: 1.3,
-                          mainAxisSpacing: 8,
-                          crossAxisSpacing: 8,
-                          children: List.generate(12, (index) {
-                            String label;
-                            if (index < 9) {
-                              label = '${index + 1}';
-                            } else if (index == 9) {
-                              label = '*';
-                            } else if (index == 10) {
-                              label = '0';
-                            } else {
-                              label = '#';
-                            }
-                            return GestureDetector(
-                              onTap: () => _addDigit(label),
-                              child: Container(
-                                decoration: const BoxDecoration(
-                                  shape: BoxShape.circle,
-                                  color: Colors.transparent,
-                                ),
-                                child: Center(
-                                  child: Text(
-                                    label,
-                                    style: const TextStyle(fontSize: 32, color: Colors.white),
-                                  ),
-                                ),
+                        padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 20),
+                        child: Column(
+                          mainAxisSize: MainAxisSize.min,
+                          children: [
+                            for (var i = 0; i < 4; i++)
+                              Row(
+                                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+                                children: [
+                                  for (var j = 1; j <= 3; j++)
+                                    Expanded(
+                                      child: AspectRatio(
+                                        aspectRatio: 1.5,
+                                        child: Padding(
+                                          padding: const EdgeInsets.all(4.0),
+                                          child: Material(
+                                            color: Colors.transparent,
+                                            child: InkWell(
+                                              customBorder: const CircleBorder(),
+                                              onTap: () {
+                                                String label;
+                                                if (i < 3) {
+                                                  label = '${i * 3 + j}';
+                                                } else {
+                                                  if (j == 1) label = '*';
+                                                  else if (j == 2) label = '0';
+                                                  else label = '#';
+                                                }
+                                                _addDigit(label);
+                                              },
+                                              child: Container(
+                                                decoration: BoxDecoration(
+                                                  shape: BoxShape.circle,
+                                                  color: Colors.grey[900]?.withOpacity(0.5),
+                                                ),
+                                                child: Center(
+                                                  child: Text(
+                                                    i < 3 ? '${i * 3 + j}' 
+                                                         : (j == 1 ? '*' : (j == 2 ? '0' : '#')),
+                                                    style: const TextStyle(
+                                                      fontSize: 32,
+                                                      color: Colors.white,
+                                                    ),
+                                                  ),
+                                                ),
+                                              ),
+                                            ),
+                                          ),
+                                        ),
+                                      ),
+                                    ),
+                                ],
                               ),
-                            );
-                          }),
+                          ],
                         ),
                       ),
                       
-                      // Add spacer after keypad
-                      const Spacer(flex: 1),
-                    ] else ...[
+                    ] else ...
+                      [
+                      const Spacer(),
                       const Spacer(),
                       // Control buttons
                       Padding(
@@ -258,6 +280,7 @@ class _CallPageState extends State<CallPage> {
                                     ),
                                   ],
                                 ),
+                                // New "mettre en attente" / Hold button
                               ],
                             ),
                             const SizedBox(height: 20),
@@ -279,6 +302,24 @@ class _CallPageState extends State<CallPage> {
                                         style: TextStyle(color: Colors.white, fontSize: 14)),
                                   ],
                                 ),
+                                // New "Hold" button inserted between Add Contact and Change SIM
+                                Column(
+                                  mainAxisSize: MainAxisSize.min,
+                                  children: [
+                                    IconButton(
+                                      onPressed: _toggleHold,
+                                      icon: Icon(
+                                        isOnHold ? Icons.play_arrow : Icons.pause,
+                                        color: Colors.white,
+                                        size: 32,
+                                      ),
+                                    ),
+                                    Text(
+                                      isOnHold ? 'Resume' : 'Hold',
+                                      style: const TextStyle(color: Colors.white, fontSize: 14),
+                                    ),
+                                  ],
+                                ),
                                 // Change SIM
                                 Column(
                                   mainAxisSize: MainAxisSize.min,