Playlist: click a track name to (re)start it from the beginning

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/control.html

@@ -53,7 +53,7 @@
         </div>
         <input type="file" id="tracks-input" accept="audio/*" multiple hidden />
         <ol id="playlist" class="playlist"></ol>
-        <div class="hint-mini">Trascina ⠿ per riordinare · ⌨ tasto rapido · ▶/⏸ avvia/pausa</div>
+        <div class="hint-mini">Clic sul <b>nome</b> = avvia/riavvia dall'inizio · ▶/⏸ pausa/riprendi · ⠿ trascina per riordinare · ⌨ tasto rapido</div>
       </section>
 
       <section>

src/control.js

@@ -274,7 +274,7 @@ function renderPlaylist() {
     const prog = (isCur && playDur > 0) ? Math.min(100, playCur / playDur * 100) : 0;
     li.innerHTML =
       '<span class="grip">⠿</span>' +
-      '<span class="tname" title="' + tr.name.replace(/"/g, '&quot;') + '">' + tr.name + '</span>' +
+      '<span class="tname" title="Avvia / riavvia dall\'inizio — ' + tr.name.replace(/"/g, '&quot;') + '">' + tr.name + '</span>' +
       '<span class="ttime">' + timeLabel + '</span>' +
       '<button class="key-btn" title="Assegna tasto rapido">' +
         (capturingFor === i ? '…' : (tr.key ? tr.key.toUpperCase() : '⌨')) + '</button>' +
@@ -282,6 +282,8 @@ function renderPlaylist() {
       '<button class="del-btn" title="Rimuovi">✕</button>' +
       (isCur ? '<i class="tprog" style="width:' + prog.toFixed(1) + '%"></i>' : '');
 
+    // Clicking the name (re)starts the track from the beginning.
+    li.querySelector('.tname').addEventListener('click', () => playIndex(i));
     // On the current track the button pauses/resumes/replays; on others it starts that track.
     li.querySelector('.play-btn').addEventListener('click', () => {
       if (i === currentIndex) togglePlayPause();

src/style.css

@@ -331,7 +331,9 @@ textarea.textarea-lg {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  cursor: pointer;
 }
+.track .tname:hover { color: #cde0ff; }
 .track button {
   flex: 0 0 auto;
   padding: 3px 8px;