feat: implement dynamic width for typed digits display in CallPage

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);
   }
@@ -61,6 +68,22 @@ class _CallPageState extends State<CallPage> {
     final double nameFontSize = isKeypadVisible ? 24.0 : 24.0; // Smaller font
     final double statusFontSize = isKeypadVisible ? 16.0 : 16.0; // Smaller status
 
+    // Calculate max visible chars based on screen width
+    double screenWidth = MediaQuery.of(context).size.width;
+    // Estimate ~14 pixels per character for the digit display (fontSize 24)
+    // Subtract some padding (40) for the margins
+    int estimatedMaxChars = ((screenWidth - 80) ~/ 14).clamp(10, 100) - 1;
+
+    // Helper function to format the displayed digits with dynamic width
+    String _formatDisplayDigits() {
+      if (_typedDigits.length <= estimatedMaxChars) {
+        return _typedDigits;
+      } else {
+        // Show ellipsis at the beginning and the most recent digits
+        return '...' + _typedDigits.substring(_typedDigits.length - estimatedMaxChars + 3);
+      }
+    }
+
     return Scaffold(
       body: Container(
         color: Colors.black,
@@ -121,11 +144,9 @@ class _CallPageState extends State<CallPage> {
               Expanded(
                 child: Column(
                   children: [
-                    if (isKeypadVisible) ...[
+                    if (isKeypadVisible) ...
-                      // Add spacer to push keypad down
+                      [
-                      const Spacer(flex: 2),
+                      // Updated typed digits display with dynamic width
-                      
-                      // Typed digits display
                       Padding(
                         padding: const EdgeInsets.symmetric(horizontal: 20.0),
                         child: Row(
@@ -133,10 +154,10 @@ class _CallPageState extends State<CallPage> {
                           children: [
                             Expanded(
                               child: Text(
-                                _typedDigits,
+                                _formatDisplayDigits(),
                                 maxLines: 1,
                                 textAlign: TextAlign.right,
-                                overflow: TextOverflow.ellipsis,
+                                overflow: TextOverflow.visible,
                                 style: const TextStyle(
                                   fontSize: 24,
                                   color: Colors.white,
@@ -153,50 +174,67 @@ class _CallPageState extends State<CallPage> {
                         ),
                       ),
                       
-                      // Keypad grid
+                      // Modified keypad section
                       Container(
-                        height: MediaQuery.of(context).size.height * 0.35,
+                        padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 20),
-                        margin: const EdgeInsets.symmetric(horizontal: 20),
+                        child: Column(
-                        child: GridView.count(
+                          mainAxisSize: MainAxisSize.min,
-                          shrinkWrap: true,
+                          children: [
-                          physics: const NeverScrollableScrollPhysics(),
+                            for (var i = 0; i < 4; i++)
-                          crossAxisCount: 3,
+                              Row(
-                          childAspectRatio: 1.3,
+                                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-                          mainAxisSpacing: 8,
+                                children: [
-                          crossAxisSpacing: 8,
+                                  for (var j = 1; j <= 3; j++)
-                          children: List.generate(12, (index) {
+                                    Expanded(
-                            String label;
+                                      child: AspectRatio(
-                            if (index < 9) {
+                                        aspectRatio: 1.5,
-                              label = '${index + 1}';
+                                        child: Padding(
-                            } else if (index == 9) {
+                                          padding: const EdgeInsets.all(4.0),
-                              label = '*';
+                                          child: Material(
-                            } else if (index == 10) {
+                                            color: Colors.transparent,
-                              label = '0';
+                                            child: InkWell(
-                            } else {
+                                              customBorder: const CircleBorder(),
-                              label = '#';
+                                              onTap: () {
-                            }
+                                                String label;
-                            return GestureDetector(
+                                                if (i < 3) {
-                              onTap: () => _addDigit(label),
+                                                  label = '${i * 3 + j}';
-                              child: Container(
+                                                } else {
-                                decoration: const BoxDecoration(
+                                                  if (j == 1) label = '*';
-                                  shape: BoxShape.circle,
+                                                  else if (j == 2) label = '0';
-                                  color: Colors.transparent,
+                                                  else label = '#';
-                                ),
+                                                }
-                                child: Center(
+                                                _addDigit(label);
-                                  child: Text(
+                                              },
-                                    label,
+                                              child: Container(
-                                    style: const TextStyle(fontSize: 32, color: Colors.white),
+                                                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
+                    ] else ...
-                      const Spacer(flex: 1),
+                      [
-                    ] else ...[
+                      const Spacer(),
                       const Spacer(),
                       // Control buttons
                       Padding(
@@ -258,6 +296,7 @@ class _CallPageState extends State<CallPage> {
                                     ),
                                   ],
                                 ),
+                                // New "mettre en attente" / Hold button
                               ],
                             ),
                             const SizedBox(height: 20),
@@ -279,6 +318,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,