Add TWP Softphone Flutter app and complete mobile backend API

Backend: Add /voice/token endpoint with AccessToken + VoiceGrant for mobile VoIP, implement unhold_call() with call leg detection, wire FCM push notifications into call queue and webhook missed call handlers, add data-only FCM message support for Android background wake, and add Twilio API Key / Push Credential settings fields. Flutter app: Full softphone with Twilio Voice SDK integration, JWT auth with auto-refresh, SSE real-time queue updates, FCM push notifications, Material 3 UI with dashboard, active call screen, dialpad, and call controls (mute/speaker/hold/transfer). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-06 13:01:23 -08:00
parent 03692608cc
commit 5c6932f1d1
49 changed files with 3243 additions and 28 deletions
--- a/mobile/lib/widgets/call_controls.dart
+++ b/mobile/lib/widgets/call_controls.dart
@@ -0,0 +1,118 @@
+import 'package:flutter/material.dart';
+import '../models/call_info.dart';
+
+class CallControls extends StatelessWidget {
+  final CallInfo callInfo;
+  final VoidCallback onMute;
+  final VoidCallback onSpeaker;
+  final VoidCallback onHold;
+  final VoidCallback onDialpad;
+  final VoidCallback onTransfer;
+  final VoidCallback onHangUp;
+
+  const CallControls({
+    super.key,
+    required this.callInfo,
+    required this.onMute,
+    required this.onSpeaker,
+    required this.onHold,
+    required this.onDialpad,
+    required this.onTransfer,
+    required this.onHangUp,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: 24),
+      child: Column(
+        children: [
+          Row(
+            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+            children: [
+              _ControlButton(
+                icon: callInfo.isMuted ? Icons.mic_off : Icons.mic,
+                label: 'Mute',
+                active: callInfo.isMuted,
+                onTap: onMute,
+              ),
+              _ControlButton(
+                icon: callInfo.isSpeakerOn
+                    ? Icons.volume_up
+                    : Icons.volume_down,
+                label: 'Speaker',
+                active: callInfo.isSpeakerOn,
+                onTap: onSpeaker,
+              ),
+              _ControlButton(
+                icon: callInfo.isOnHold ? Icons.play_arrow : Icons.pause,
+                label: callInfo.isOnHold ? 'Resume' : 'Hold',
+                active: callInfo.isOnHold,
+                onTap: onHold,
+              ),
+            ],
+          ),
+          const SizedBox(height: 16),
+          Row(
+            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+            children: [
+              _ControlButton(
+                icon: Icons.dialpad,
+                label: 'Dialpad',
+                onTap: onDialpad,
+              ),
+              _ControlButton(
+                icon: Icons.phone_forwarded,
+                label: 'Transfer',
+                onTap: onTransfer,
+              ),
+            ],
+          ),
+          const SizedBox(height: 24),
+          FloatingActionButton.large(
+            onPressed: onHangUp,
+            backgroundColor: Colors.red,
+            child: const Icon(Icons.call_end, color: Colors.white, size: 36),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class _ControlButton extends StatelessWidget {
+  final IconData icon;
+  final String label;
+  final bool active;
+  final VoidCallback onTap;
+
+  const _ControlButton({
+    required this.icon,
+    required this.label,
+    this.active = false,
+    required this.onTap,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        IconButton.filled(
+          onPressed: onTap,
+          icon: Icon(icon),
+          style: IconButton.styleFrom(
+            backgroundColor: active
+                ? Theme.of(context).colorScheme.primaryContainer
+                : Theme.of(context).colorScheme.surfaceContainerHighest,
+            foregroundColor: active
+                ? Theme.of(context).colorScheme.primary
+                : Theme.of(context).colorScheme.onSurface,
+          ),
+        ),
+        const SizedBox(height: 4),
+        Text(label, style: Theme.of(context).textTheme.labelSmall),
+      ],
+    );
+  }
+}