v69: слоги в таблице истории — hover жёлтым

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();

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();

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('');