UI: разделить входящий и активный звонок

shine-UI/js/services/call-ui-service.js

@@ -15,6 +15,8 @@ let panelEl = null;
 let headerEl = null;
 let titleEl = null;
 let statusEl = null;
+let incomingActionsEl = null;
+let activeActionsEl = null;
 let speakerBtn = null;
 let muteBtn = null;
 let acceptBtn = null;
@@ -217,8 +219,11 @@ function ensureUi() {
   statusEl = document.createElement('div');
   statusEl.className = 'call-overlay-status';
 
-  const controls = document.createElement('div');
-  controls.className = 'call-overlay-controls';
+  incomingActionsEl = document.createElement('div');
+  incomingActionsEl.className = 'call-overlay-controls call-overlay-controls--incoming';
+
+  activeActionsEl = document.createElement('div');
+  activeActionsEl.className = 'call-overlay-controls call-overlay-controls--active';
 
   speakerBtn = document.createElement('button');
   speakerBtn.type = 'button';
@@ -252,9 +257,10 @@ function ensureUi() {
   setButtonIcon(hangupBtn, 'hangup', 'Положить трубку');
   hangupBtn.addEventListener('click', handleEndCallClick);
 
-  controls.append(speakerBtn, muteBtn, acceptBtn, declineBtn, hangupBtn);
+  incomingActionsEl.append(acceptBtn, declineBtn);
+  activeActionsEl.append(speakerBtn, muteBtn, hangupBtn);
   headerEl.append(titleEl, minimizeBtn);
-  panelEl.append(headerEl, statusEl, controls);
+  panelEl.append(headerEl, statusEl, incomingActionsEl, activeActionsEl);
   overlayEl.append(panelEl);
   rootEl.append(barEl, overlayEl);
   resolveAppShell().append(rootEl);
@@ -275,15 +281,18 @@ function applyExpandedState(snapshot) {
   minimizeBtn.hidden = incomingStage;
   minimizeBtn.disabled = incomingStage;
 
-  speakerBtn.hidden = incomingStage || !snapshot.canToggleSpeaker;
+  incomingActionsEl.hidden = !incomingStage;
+  activeActionsEl.hidden = incomingStage;
+
+  speakerBtn.hidden = !snapshot.canToggleSpeaker;
   speakerBtn.disabled = !snapshot.canToggleSpeaker;
 
-  muteBtn.hidden = incomingStage || !snapshot.canMute;
+  muteBtn.hidden = !snapshot.canMute;
   muteBtn.disabled = !snapshot.canMute;
 
-  acceptBtn.hidden = !snapshot.canAnswer;
-  declineBtn.hidden = !snapshot.canDecline;
-  hangupBtn.hidden = incomingStage || !snapshot.canHangup;
+  acceptBtn.hidden = !incomingStage || !snapshot.canAnswer;
+  declineBtn.hidden = !incomingStage || !snapshot.canDecline;
+  hangupBtn.hidden = !snapshot.canHangup;
 }
 
 function applyMinimizedState(snapshot) {