diff --git a/index.html b/index.html
index 61d1a52..9c85953 100644
--- a/index.html
+++ b/index.html
@@ -151,6 +151,7 @@
+
diff --git a/src/views.js b/src/views.js
index bdffafc..5e10ec3 100644
--- a/src/views.js
+++ b/src/views.js
@@ -126,8 +126,8 @@ export async function loadArtists() {
g.innerHTML = '';
all.forEach(a => {
const c = makeCard(a.name, a.albumCount+' Alben', null, 'π€');
- c.querySelector('.card-art').onclick = (e) => { e.stopPropagation(); quickPlayArtist(a); };
- c.querySelector('.card-info').onclick = () => navigate('artist-detail', a);
+ c.classList.add('artist-card');
+ c.onclick = () => navigate('artist-detail', a);
g.appendChild(c);
getArtistImage(a.id).then(imgUrl => {
if(!imgUrl) return;
@@ -272,6 +272,31 @@ export async function loadArtistDetail(artist) {
}
}
+ // ββ Action bar ββ
+ const actionBar = document.getElementById('artist-action-bar');
+ if(actionBar) {
+ actionBar.innerHTML = '';
+ if(topSongs.length || ndAlbums.length) {
+ const playTopBtn = document.createElement('button');
+ playTopBtn.className = 'artist-action-btn';
+ playTopBtn.innerHTML = `
Top Songs`;
+ playTopBtn.onclick = () => topSongs.length ? playQueue(topSongs, 0) : quickPlayArtist(artist);
+
+ const shuffleBtn = document.createElement('button');
+ shuffleBtn.className = 'artist-action-btn';
+ shuffleBtn.innerHTML = `
Shuffle`;
+ shuffleBtn.onclick = async () => {
+ S.shuffle = true;
+ localStorage.setItem('ns_shuffle', '1');
+ import('./player.js').then(({ _applyShuffleRepeat }) => _applyShuffleRepeat());
+ await quickPlayArtist(artist);
+ };
+
+ actionBar.appendChild(playTopBtn);
+ actionBar.appendChild(shuffleBtn);
+ }
+ }
+
// ββ Albums ββ
if(albEl) { albEl.innerHTML = ''; _renderArtistAlbums(albEl, ndAlbums, iAlbums, artist); }
}
@@ -574,15 +599,14 @@ export async function doLocalSearch(q) {
const g = document.createElement('div'); g.className = 'scroll-row';
artists.forEach(a => {
const c = makeCard(a.name, a.albumCount+' Alben', null, 'π€');
- c.querySelector('.card-art').onclick = (e) => { e.stopPropagation(); quickPlayArtist(a); };
- c.querySelector('.card-info').onclick = () => navigate('artist-detail', a);
+ c.classList.add('artist-card');
+ c.onclick = () => navigate('artist-detail', a);
g.appendChild(c);
getArtistImage(a.id).then(img => {
if(!img) return;
const artEl = c.querySelector('.card-art');
if(!artEl) return;
- artEl.innerHTML = `

`;
- artEl.onclick = (e) => { e.stopPropagation(); quickPlayArtist(a); };
+ artEl.innerHTML = `

`;
});
});
s.appendChild(g); el.appendChild(s);
diff --git a/styles.css b/styles.css
index 583256e..9095c53 100644
--- a/styles.css
+++ b/styles.css
@@ -718,6 +718,10 @@ nav{flex:1;overflow-y:auto;padding:4px 10px}
.np-drag-handle{width:100%;height:36px;display:flex;align-items:center;justify-content:center;cursor:grab;flex-shrink:0;touch-action:none}
.np-drag-handle-bar{width:40px;height:4px;background:rgba(255,255,255,.25);border-radius:2px}
+.artist-card .play-overlay{display:none!important}
+.artist-action-bar{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap}
+.artist-action-btn{display:flex;align-items:center;gap:6px;padding:9px 18px;border-radius:20px;border:1px solid var(--border2);background:var(--surface);color:var(--text);font-family:var(--font);font-size:13px;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s}
+.artist-action-btn:hover{background:var(--surface2);border-color:var(--accent);color:var(--accent)}
.artist-hero{height:220px;border-radius:14px;overflow:hidden;position:relative;margin-bottom:24px;background:linear-gradient(135deg,var(--surface2),var(--surface))}
.artist-hero-overlay{position:absolute;inset:0;background:linear-gradient(to right,rgba(7,7,15,.85) 0%,transparent 100%);display:flex;align-items:flex-end;padding:20px 28px}
.artist-hero-name{font-size:32px;font-weight:800;letter-spacing:-1px}