fix: per-span hover highlight, use • as artist separator everywhere

- CSS: target #player-artist-name span:hover and #np-artist-name span:hover so only the hovered artist name highlights, not all at once
- change artist separator from / to • in song items, player bar, now playing overlay, album header

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/components.js

@@ -39,7 +39,7 @@ export function makeSongItem(s, idx, list, { noArtistLink = false, noAlbumLink =
         return noArtistLink
           ? `<span style="color:var(--text2)">${esc(name)}</span>`
           : `<span class="song-link" onclick="event.stopPropagation();s_goArtist(event,'${esc(name)}','${aid}')">${esc(name)}</span>`;
-      }).join('<span style="color:var(--text3)"> / </span>')
+      }).join('<span style="color:var(--text3)"> • </span>')
     : '';
   const albumHtml = !noAlbumLink && (s.albumId||s.album)
     ? `<span style="color:var(--text3)"> · </span><span class="song-link" onclick="event.stopPropagation();s_goAlbum(event,'${s.albumId||''}','${esc(s.album||'')}','${esc(s.artist||'')}','${s.artistId||''}')">${esc(s.album||'')}</span>`

src/player.js

@@ -31,7 +31,7 @@ export function updatePlayerUI(s) {
     ? artistParts.map((name, i) => {
         const aid = i === 0 ? (s.artistId || '') : '';
         return `<span style="cursor:pointer" onclick="s_goArtist(event,'${esc(name)}','${aid}')">${esc(name)}</span>`;
-      }).join('<span style="color:var(--text3)"> / </span>')
+      }).join('<span style="color:var(--text3)"> • </span>')
     : '—';
   document.getElementById('player-album-sep').style.display = s.album ? '' : 'none';
   document.getElementById('player-album-name').textContent = s.album || '';
@@ -70,7 +70,7 @@ export function _syncNpDirect(s) {
       ? parts.map((name, i) => {
           const aid = i === 0 ? (s.artistId || '') : '';
           return `<span style="cursor:pointer" onclick="closeNowPlaying();s_goArtist(event,'${esc(name)}','${aid}')">${esc(name)}</span>`;
-        }).join('<span style="opacity:.5"> / </span>')
+        }).join('<span style="opacity:.5"> • </span>')
       : '—';
   }
   const asep = document.getElementById('np-album-sep'); if(asep) asep.style.display = s.album ? '' : 'none';
@@ -365,7 +365,7 @@ export function _restoreLastPlayed() {
       ? artistParts.map((name, i) => {
           const aid = i === 0 ? (s.artistId || '') : '';
           return `<span style="cursor:pointer" onclick="s_goArtist(event,'${esc(name)}','${aid}')">${esc(name)}</span>`;
-        }).join('<span style="color:var(--text3)"> / </span>')
+        }).join('<span style="color:var(--text3)"> • </span>')
       : '—';
     document.getElementById('player-album-sep').style.display = s.album ? '' : 'none';
     document.getElementById('player-album-name').textContent = s.album || '';

src/views.js

@@ -426,7 +426,7 @@ export async function loadAlbumDetail(album) {
   artistEl.innerHTML = albumArtistParts.map((name, i) => {
     const aid = i === 0 ? (album.artistId || '') : '';
     return `<span class="song-link" onclick="s_goArtist(event,${JSON.stringify(name)},${JSON.stringify(aid)})">${esc(name)}</span>`;
-  }).join('<span style="color:var(--text3)"> / </span>') || '';
+  }).join('<span style="color:var(--text3)"> • </span>') || '';
   const cw = document.getElementById('album-cover-wrap');
   const cv = coverUrl(album.coverArt, 300);
   cw.innerHTML = cv ? `<img src="${cv}" onerror="this.parentNode.innerHTML='<div class=\\'no-art\\'>💿</div>'">` : '<div class="no-art">💿</div>';

styles.css

@@ -193,7 +193,7 @@ nav{flex:1;overflow-y:auto;padding:4px 10px}
 /* Player bar clickable title/artist */
 .player-title:hover{color:var(--accent);text-decoration:underline}
 #player-artist-name{color:var(--text2)}
-#player-artist-name:hover{color:var(--accent-2,#f0b840)}
+#player-artist-name span:hover{color:var(--accent-2,#f0b840)}
 #player-album-name{color:var(--text3)}
 #player-album-name:hover{color:var(--accent)}
 
@@ -537,7 +537,7 @@ nav{flex:1;overflow-y:auto;padding:4px 10px}
 .np-text{flex:1;min-width:0}
 .np-title{font-size:22px;font-weight:800;letter-spacing:-.4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:5px}
 .np-artist{font-size:15px;color:rgba(255,255,255,.65);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .15s}
-#np-artist-name:hover,#np-album-name:hover{color:var(--accent);cursor:pointer}
+#np-artist-name span:hover,#np-album-name:hover{color:var(--accent);cursor:pointer}
 .np-star{
   background:none;border:none;cursor:pointer;
   padding:8px;margin-left:8px;flex-shrink:0;