From 1f08e3a525adcbb242eaf733d8dee61c15080561 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CNaeel=E2=80=9D?= <tazet@narod.ru>
Date: Fri, 22 May 2026 19:01:50 +0400
Subject: [PATCH] =?UTF-8?q?v69:=20=D1=81=D0=BB=D0=BE=D0=B3=D0=B8=20=D0=B2?=
 =?UTF-8?q?=20=D1=82=D0=B0=D0=B1=D0=BB=D0=B8=D1=86=D0=B5=20=D0=B8=D1=81?=
 =?UTF-8?q?=D1=82=D0=BE=D1=80=D0=B8=D0=B8=20=E2=80=94=20hover=20=D0=B6?=
 =?UTF-8?q?=D1=91=D0=BB=D1=82=D1=8B=D0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dist/index.html | 44 ++++++++++++++++++--------------------------
 js/main.js      | 26 +-------------------------
 js/storage.js   | 18 +++++++++++++++++-
 3 files changed, 36 insertions(+), 52 deletions(-)

diff --git a/dist/index.html b/dist/index.html
index aabc33e..2a30556 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -112,6 +112,22 @@ async function renderRecHistory() {
     recs.map(r => {
       const d = new Date(r.ts);
       const time = d.toLocaleTimeString('ru-RU', {hour:'2-digit',minute:'2-digit'});
+      let trHTML = '';
+      if (r.transcription) {
+        trHTML = '<span style="color:#aaa;font-size:0.82em;margin:0 4px">' +
+          r.transcription.split(/\s+/).map(w => {
+            const sy = syllabifyIT(w);
+            if (sy.includes('-')) {
+              return sy.split('-').map(s =>
+                '<span style="cursor:pointer;padding:0 2px;border-radius:3px"' +
+                ' onmouseover="this.style.background=\'#ffeb3b\'"' +
+                ' onmouseout="this.style.background=\'\'">' + s + '</span>'
+              ).join('<span style="color:#ccc">·</span>');
+            }
+            return w;
+          }).join(' ') +
+        '</span>';
+      }
       return '<div class="recItem">' +
         '<span style="cursor:pointer" onclick="document.getElementById(\'inputText\').value=\'' +
         r.word.replace(/'/g, "\\'") + '\';ttsText=\'' + r.word.replace(/'/g, "\\'") + '\'">' + r.word + '</span>' +
@@ -119,7 +135,7 @@ async function renderRecHistory() {
         '<button onclick="playRec(' + r.id + ')">▶</button>' +
         '<button onclick="stereoRec(' + r.id + ')">🎧</button>' +
         '<button onclick="compareRec(' + r.id + ')">📊</button>' +
-        (r.transcription ? '<span style="color:#aaa;font-size:0.82em;margin:0 4px">' + syllabifyPhrase(r.transcription) + '</span>' : '') +
+        trHTML +
         '<button onclick="deleteRec(' + r.id + ')" style="background:#e44;padding:4px 8px">🗑</button>' +
         '</div>';
     }).join('');
@@ -666,7 +682,7 @@ async function doCompare(blob, originalText, duration) {
 <script>
 // ---------- Глобальные переменные и инициализация ----------
 const GROQ_API_KEY = '';
-const VERSION = 'v68';
+const VERSION = 'v69';
 
 let mediaRecorder, audioChunks = [], userAudioBlob = null, ttsText = '';
 let isRecording = false, isAnalyzing = false, micAnalyser = null, micAnimId = null;
@@ -675,30 +691,6 @@ let recordStartTime = 0, recordDuration = 0;
 function setStatus(msg) { document.getElementById('status').textContent = msg; }
 function enable(id, val) { document.getElementById(id).disabled = !val; }
 
-// ---------- ТЕСТ: жёсткие слоги при загрузке (только hover) ----------
-(function testSylHover() {
-  const div = document.getElementById('syllables');
-  if (!div) return;
-  const syls = ['Buon','gior','no'];
-  const wrap = document.createElement('div');
-  wrap.style.cssText = 'margin-top:8px;font-size:1.4em;letter-spacing:3px;user-select:none';
-  syls.forEach((s, i) => {
-    if (i > 0) {
-      const sep = document.createElement('span');
-      sep.style.cssText = 'color:#aaa;margin:0 2px';
-      sep.textContent = '·';
-      wrap.appendChild(sep);
-    }
-    const chip = document.createElement('span');
-    chip.textContent = s;
-    chip.style.cssText = 'cursor:pointer;padding:3px 8px;border-radius:6px;border:1px solid #ccc';
-    chip.onmouseenter = function() { this.style.background = '#ffeb3b'; this.style.borderColor = '#f9a825'; };
-    chip.onmouseleave = function() { this.style.background = ''; this.style.borderColor = '#ccc'; };
-    wrap.appendChild(chip);
-  });
-  div.appendChild(wrap);
-})();
-
 // ---------- Инициализация ----------
 document.getElementById('ver').textContent = VERSION;
 renderHistory();
diff --git a/js/main.js b/js/main.js
index aea175b..03f6d01 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,6 +1,6 @@
 // ---------- Глобальные переменные и инициализация ----------
 const GROQ_API_KEY = '';
-const VERSION = 'v68';
+const VERSION = 'v69';
 
 let mediaRecorder, audioChunks = [], userAudioBlob = null, ttsText = '';
 let isRecording = false, isAnalyzing = false, micAnalyser = null, micAnimId = null;
@@ -9,30 +9,6 @@ let recordStartTime = 0, recordDuration = 0;
 function setStatus(msg) { document.getElementById('status').textContent = msg; }
 function enable(id, val) { document.getElementById(id).disabled = !val; }
 
-// ---------- ТЕСТ: жёсткие слоги при загрузке (только hover) ----------
-(function testSylHover() {
-  const div = document.getElementById('syllables');
-  if (!div) return;
-  const syls = ['Buon','gior','no'];
-  const wrap = document.createElement('div');
-  wrap.style.cssText = 'margin-top:8px;font-size:1.4em;letter-spacing:3px;user-select:none';
-  syls.forEach((s, i) => {
-    if (i > 0) {
-      const sep = document.createElement('span');
-      sep.style.cssText = 'color:#aaa;margin:0 2px';
-      sep.textContent = '·';
-      wrap.appendChild(sep);
-    }
-    const chip = document.createElement('span');
-    chip.textContent = s;
-    chip.style.cssText = 'cursor:pointer;padding:3px 8px;border-radius:6px;border:1px solid #ccc';
-    chip.onmouseenter = function() { this.style.background = '#ffeb3b'; this.style.borderColor = '#f9a825'; };
-    chip.onmouseleave = function() { this.style.background = ''; this.style.borderColor = '#ccc'; };
-    wrap.appendChild(chip);
-  });
-  div.appendChild(wrap);
-})();
-
 // ---------- Инициализация ----------
 document.getElementById('ver').textContent = VERSION;
 renderHistory();
diff --git a/js/storage.js b/js/storage.js
index 39d3f72..00e54db 100644
--- a/js/storage.js
+++ b/js/storage.js
@@ -55,6 +55,22 @@ async function renderRecHistory() {
     recs.map(r => {
       const d = new Date(r.ts);
       const time = d.toLocaleTimeString('ru-RU', {hour:'2-digit',minute:'2-digit'});
+      let trHTML = '';
+      if (r.transcription) {
+        trHTML = '<span style="color:#aaa;font-size:0.82em;margin:0 4px">' +
+          r.transcription.split(/\s+/).map(w => {
+            const sy = syllabifyIT(w);
+            if (sy.includes('-')) {
+              return sy.split('-').map(s =>
+                '<span style="cursor:pointer;padding:0 2px;border-radius:3px"' +
+                ' onmouseover="this.style.background=\'#ffeb3b\'"' +
+                ' onmouseout="this.style.background=\'\'">' + s + '</span>'
+              ).join('<span style="color:#ccc">·</span>');
+            }
+            return w;
+          }).join(' ') +
+        '</span>';
+      }
       return '<div class="recItem">' +
         '<span style="cursor:pointer" onclick="document.getElementById(\'inputText\').value=\'' +
         r.word.replace(/'/g, "\\'") + '\';ttsText=\'' + r.word.replace(/'/g, "\\'") + '\'">' + r.word + '</span>' +
@@ -62,7 +78,7 @@ async function renderRecHistory() {
         '<button onclick="playRec(' + r.id + ')">▶</button>' +
         '<button onclick="stereoRec(' + r.id + ')">🎧</button>' +
         '<button onclick="compareRec(' + r.id + ')">📊</button>' +
-        (r.transcription ? '<span style="color:#aaa;font-size:0.82em;margin:0 4px">' + syllabifyPhrase(r.transcription) + '</span>' : '') +
+        trHTML +
         '<button onclick="deleteRec(' + r.id + ')" style="background:#e44;padding:4px 8px">🗑</button>' +
         '</div>';
     }).join('');