From 2e1014d726a2c83993837961fab05ccd3e86a1ce Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Mon, 23 Feb 2026 18:44:35 +0700
Subject: [PATCH] style(communications): center play control on call waveform

---
 .../components/workspace/CrmWorkspaceApp.vue  | 66 +++++++++++--------
 1 file changed, 38 insertions(+), 28 deletions(-)

diff --git a/frontend/app/components/workspace/CrmWorkspaceApp.vue b/frontend/app/components/workspace/CrmWorkspaceApp.vue
index 0e47810..036670f 100644
--- a/frontend/app/components/workspace/CrmWorkspaceApp.vue
+++ b/frontend/app/components/workspace/CrmWorkspaceApp.vue
@@ -5106,28 +5106,29 @@ async function decideFeedCard(card: FeedCard, decision: "accepted" | "rejected")
                             {{ formatDay(entry.item.at) }} · {{ formatTime(entry.item.at) }}
                             <span v-if="entry.item.duration"> · {{ entry.item.duration }}</span>
                           </p>
-                          <div class="comm-call-wave mb-2" :ref="(el) => setCommCallWaveHost(entry.item.id, el as Element | null)" />
-                          <div class="mt-2 flex items-center gap-2" :class="entry.item.direction === 'out' ? 'justify-end' : 'justify-start'">
+                          <div class="comm-call-wave-wrap mb-2">
+                            <div class="comm-call-wave" :ref="(el) => setCommCallWaveHost(entry.item.id, el as Element | null)" />
                             <button
-                              class="call-play-toggle"
+                              class="call-wave-center-play"
                               :disabled="!isCommCallPlayable(entry.item)"
                               :title="isCommCallPlayable(entry.item) ? 'Play voice message' : 'Audio unavailable'"
                               @click="toggleCommCallPlayback(entry.item)"
                             >
-                              <svg v-if="!isCommCallPlaying(entry.item.id)" viewBox="0 0 20 20" class="h-3.5 w-3.5">
+                              <svg v-if="!isCommCallPlaying(entry.item.id)" viewBox="0 0 20 20" class="h-4 w-4">
                                 <path
                                   fill="currentColor"
                                   d="M6.5 4.75a.75.75 0 0 1 1.12-.65l7.5 4.25a.75.75 0 0 1 0 1.3l-7.5 4.25a.75.75 0 0 1-1.12-.65v-8.5Z"
                                 />
                               </svg>
-                              <svg v-else viewBox="0 0 20 20" class="h-3.5 w-3.5">
+                              <svg v-else viewBox="0 0 20 20" class="h-4 w-4">
                                 <path
                                   fill="currentColor"
                                   d="M6.75 4.5a.75.75 0 0 1 .75.75v9.5a.75.75 0 0 1-1.5 0v-9.5a.75.75 0 0 1 .75-.75Zm6.5 0a.75.75 0 0 1 .75.75v9.5a.75.75 0 0 1-1.5 0v-9.5a.75.75 0 0 1 .75-.75Z"
                                 />
                               </svg>
-                              <span>{{ isCommCallPlaying(entry.item.id) ? "Pause" : "Play" }}</span>
                             </button>
+                          </div>
+                          <div class="mt-2 flex" :class="entry.item.direction === 'out' ? 'justify-end' : 'justify-start'">
                             <button class="call-transcript-toggle" @click="toggleCallTranscript(entry.item)">
                               <span>
                                 {{
@@ -5772,6 +5773,10 @@ async function decideFeedCard(card: FeedCard, decision: "accepted" | "rejected")
   background: var(--color-base-100);
 }
 
+.comm-call-wave-wrap {
+  position: relative;
+}
+
 .comm-call-wave {
   height: 30px;
   width: 100%;
@@ -5787,6 +5792,33 @@ async function decideFeedCard(card: FeedCard, decision: "accepted" | "rejected")
   height: 100% !important;
 }
 
+.call-wave-center-play {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 2;
+  width: 34px;
+  height: 34px;
+  border: 1px solid color-mix(in oklab, var(--color-base-content) 22%, transparent);
+  border-radius: 999px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: color-mix(in oklab, var(--color-base-content) 88%, transparent);
+  background: color-mix(in oklab, var(--color-base-100) 72%, transparent);
+  backdrop-filter: blur(2px);
+}
+
+.call-wave-center-play:hover:not(:disabled) {
+  background: color-mix(in oklab, var(--color-base-100) 58%, var(--color-base-200));
+}
+
+.call-wave-center-play:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
 .call-transcript-toggle {
   display: inline-flex;
   align-items: center;
@@ -5800,28 +5832,6 @@ async function decideFeedCard(card: FeedCard, decision: "accepted" | "rejected")
   background: color-mix(in oklab, var(--color-base-100) 90%, transparent);
 }
 
-.call-play-toggle {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  border: 1px solid color-mix(in oklab, var(--color-base-content) 18%, transparent);
-  border-radius: 999px;
-  padding: 4px 10px;
-  font-size: 11px;
-  font-weight: 500;
-  color: color-mix(in oklab, var(--color-base-content) 72%, transparent);
-  background: color-mix(in oklab, var(--color-base-100) 90%, transparent);
-}
-
-.call-play-toggle:hover:not(:disabled) {
-  background: color-mix(in oklab, var(--color-base-100) 72%, var(--color-base-200));
-}
-
-.call-play-toggle:disabled {
-  opacity: 0.45;
-  cursor: not-allowed;
-}
-
 .call-transcript-toggle:hover {
   background: color-mix(in oklab, var(--color-base-100) 72%, var(--color-base-200));
 }