From 553a4fcf80efc85c2b3dccfe53fcddb05e03fd3b Mon Sep 17 00:00:00 2001
From: 4aiman <konsorumaniakku@ya.ru>
Date: Sat, 17 Oct 2026 10:57:08 +0300
Subject: [PATCH] Record screen: show the live HR number on the HR toggle
 button

The HR toggle (ex-wind button) showed only the heart+pulse icon. Now the
current bpm renders on it (onHrUpdate writes #rec-hr-num); it clears when HR
is toggled off, leaving just the grey icon.
---
 frontend/css/styles.css | 4 +++-
 frontend/js/main.js     | 5 ++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/frontend/css/styles.css b/frontend/css/styles.css
index 28d8214..f580eaa 100644
--- a/frontend/css/styles.css
+++ b/frontend/css/styles.css
@@ -726,9 +726,11 @@ select {
 .workout-screen .btn-primary, .workout-screen .btn-secondary { margin-top: 8px; width: 100%; }
 
 /* HR on/off toggle on the record screen (replaces the wind button): grey = off, coloured = on. */
-.rec-hr-toggle { color: #888; display: inline-flex; align-items: center; justify-content: center; min-width: 46px; padding: 6px 10px; }
+.rec-hr-toggle { color: #888; display: inline-flex; align-items: center; justify-content: center; gap: 3px; padding: 6px 10px; }
 .rec-hr-toggle svg { display: block; }
 .rec-hr-toggle.active { color: #ef5350; background: rgba(239, 83, 80, 0.18); }
+.rec-hr-num { font-size: 14px; font-weight: 700; min-width: 0; }
+.rec-hr-num:empty { display: none; }
 
 /* Progress fill for long-running action buttons: the background fills left-to-right by
    --pct (0-100%, set from JS). The label stays on top and readable; the unfilled part keeps
diff --git a/frontend/js/main.js b/frontend/js/main.js
index 2e0d2b8..615aa17 100644
--- a/frontend/js/main.js
+++ b/frontend/js/main.js
@@ -4602,7 +4602,7 @@ async function renderRecordingInline(container) {
         </div>
         <div class="rec-bottom">
           <div class="rec-status" id="rec-status">${GPS.recording.state === "waiting_gps" ? "Поиск GPS..." : GPS.recording.state === "ready" ? "Начните движение..." : ""}</div>
-          <button id="rec-hr-toggle" class="btn-secondary rec-hr-toggle${GPS.recording.hrOn ? " active" : ""}" title="Пульсометр вкл/выкл" aria-label="ЧСС"><svg viewBox="0 0 24 22" width="22" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20S3 14.5 3 8.3C3 5.6 5 4 7.2 4 9 4 10.6 5.1 12 7 13.4 5.1 15 4 16.8 4 19 4 21 5.6 21 8.3c0 1.3-.4 2.5-1 3.7"/><path d="M2 13h5l2-3 2.4 6 2-3H22"/></svg></button>
+          <button id="rec-hr-toggle" class="btn-secondary rec-hr-toggle${GPS.recording.hrOn ? " active" : ""}" title="Пульсометр вкл/выкл" aria-label="ЧСС"><svg viewBox="0 0 24 22" width="22" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20S3 14.5 3 8.3C3 5.6 5 4 7.2 4 9 4 10.6 5.1 12 7 13.4 5.1 15 4 16.8 4 19 4 21 5.6 21 8.3c0 1.3-.4 2.5-1 3.7"/><path d="M2 13h5l2-3 2.4 6 2-3H22"/></svg><span id="rec-hr-num" class="rec-hr-num"></span></button>
           <button id="rec-pause" class="btn-secondary">${GPS.recording.manualPaused ? "Продолжить" : "Пауза"}</button>
           <button id="rec-stop" class="btn-primary gps-rec recording">Стоп</button>
         </div>
@@ -5089,6 +5089,8 @@ async function renderRecordingInline(container) {
         hrEl.textContent = reading.hr;
         hrEl.className = "rec-hr-val " + hrZoneClass(reading.hr);
       }
+      let hrNum = document.querySelector("#rec-hr-num"); // live HR on the toggle button itself
+      if (hrNum) hrNum.textContent = reading.hr;
       let spo2El = document.querySelector("#rec-spo2");
       if (spo2El) spo2El.textContent = reading.spo2 ? `SpO2: ${reading.spo2}%` : "";
       let bpEl = document.querySelector("#rec-bp");
@@ -5149,6 +5151,7 @@ async function renderRecordingInline(container) {
       hrToggle.disabled = true;
       await GPS.setHrOn(!GPS.recording.hrOn);
       hrToggle.classList.toggle("active", !!GPS.recording.hrOn);
+      if (!GPS.recording.hrOn) { let n = container.querySelector("#rec-hr-num"); if (n) n.textContent = ""; } // off -> icon only
       hrToggle.disabled = false;
     };