From 52d51663633166ea8a7a5f18fc9670827b993058 Mon Sep 17 00:00:00 2001
From: Xenuel <XenuelG@proton.me>
Date: Mon, 16 Mar 2026 22:38:29 +0100
Subject: [PATCH] feat(ui): add "In Your Library" section to artist detail page

Show liked tracks and playlist tracks by the artist with source
labels, collapsible chevron toggle, and real-time updates via
favorites-changed and playlist-tracks-changed events.
---
 index.html |  22 ++++++
 js/db.js   |   5 ++
 js/ui.js   | 227 ++++++++++++++++++++++++++++++++++++++++++++++++++---
 styles.css |  55 +++++++++++++
 4 files changed, 300 insertions(+), 9 deletions(-)

diff --git a/index.html b/index.html
index ec355eb..ce0ac89 100644
--- a/index.html
+++ b/index.html
@@ -1115,6 +1115,19 @@
             </div>
         </div>
 
+        <div id="goto-playlist-modal" class="modal">
+            <div class="modal-overlay"></div>
+            <div class="modal-content">
+                <h3>Go to Playlist</h3>
+                <div id="goto-playlist-list" class="modal-list">
+                    <!-- Options will be injected here -->
+                </div>
+                <div class="modal-actions">
+                    <button id="goto-playlist-cancel" class="btn-secondary">Cancel</button>
+                </div>
+            </div>
+        </div>
+
         <div id="shortcuts-modal" class="modal">
             <div class="modal-overlay"></div>
             <div class="modal-content medium">
@@ -3283,6 +3296,15 @@
                         <h2 class="section-title">Popular Tracks</h2>
                         <div class="track-list" id="artist-detail-tracks"></div>
                     </section>
+                    <section class="content-section" id="artist-section-in-library" style="display: none">
+                        <h2 class="section-title in-library-toggle" id="in-library-toggle" style="cursor: pointer; display: flex; align-items: center; gap: 0.5rem; user-select: none;">
+                            In Your Library
+                            <svg id="in-library-chevron" xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="transition: transform 0.25s ease; flex-shrink: 0;">
+                                <polyline points="9 18 15 12 9 6"></polyline>
+                            </svg>
+                        </h2>
+                        <div class="track-list" id="artist-detail-in-library" style="display: none;"></div>
+                    </section>
                     <section class="content-section">
                         <h2 class="section-title">Albums</h2>
                         <div class="card-grid" id="artist-detail-albums"></div>
diff --git a/js/db.js b/js/db.js
index 76477aa..122155b 100644
--- a/js/db.js
+++ b/js/db.js
@@ -172,11 +172,13 @@ export class MusicDatabase {
 
         if (exists) {
             await this.performTransaction(storeName, 'readwrite', (store) => store.delete(key));
+            window.dispatchEvent(new CustomEvent('favorites-changed'));
             return false; // Removed
         } else {
             const minified = this._minifyItem(type, item);
             const entry = { ...minified, addedAt: Date.now() };
             await this.performTransaction(storeName, 'readwrite', (store) => store.put(entry));
+            window.dispatchEvent(new CustomEvent('favorites-changed'));
             return true; // Added
         }
     }
@@ -600,6 +602,7 @@ export class MusicDatabase {
         await this.performTransaction('user_playlists', 'readwrite', (store) => store.put(playlist));
 
         this._dispatchPlaylistSync('update', playlist);
+        window.dispatchEvent(new CustomEvent('playlist-tracks-changed'));
 
         return playlist;
     }
@@ -623,6 +626,7 @@ export class MusicDatabase {
             this._updatePlaylistMetadata(playlist);
             await this.performTransaction('user_playlists', 'readwrite', (store) => store.put(playlist));
             this._dispatchPlaylistSync('update', playlist);
+            window.dispatchEvent(new CustomEvent('playlist-tracks-changed'));
         }
 
         return playlist;
@@ -643,6 +647,7 @@ export class MusicDatabase {
         await this.performTransaction('user_playlists', 'readwrite', (store) => store.put(playlist));
 
         this._dispatchPlaylistSync('update', playlist);
+        window.dispatchEvent(new CustomEvent('playlist-tracks-changed'));
 
         return playlist;
     }
diff --git a/js/ui.js b/js/ui.js
index 1998434..e363cc8 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -3072,10 +3072,10 @@ export class UIRenderer {
                     dateDisplay =
                         window.innerWidth > 768
                             ? releaseDate.toLocaleDateString('en-US', {
-                                  year: 'numeric',
-                                  month: 'long',
-                                  day: 'numeric',
-                              })
+                                year: 'numeric',
+                                month: 'long',
+                                day: 'numeric',
+                            })
                             : year;
                 }
             }
@@ -3927,6 +3927,8 @@ export class UIRenderer {
         const epsSection = document.getElementById('artist-section-eps');
         const similarContainer = document.getElementById('artist-detail-similar');
         const similarSection = document.getElementById('artist-section-similar');
+        const inLibraryContainer = document.getElementById('artist-detail-in-library');
+        const inLibrarySection = document.getElementById('artist-section-in-library');
         const dlBtn = document.getElementById('download-discography-btn');
         if (dlBtn) dlBtn.innerHTML = `${SVG_DOWNLOAD}<span>Download Discography</span>`;
 
@@ -3948,6 +3950,14 @@ export class UIRenderer {
         if (loadUnreleasedSection) loadUnreleasedSection.style.display = 'none';
         if (similarContainer) similarContainer.innerHTML = this.createSkeletonCards(6, true);
         if (similarSection) similarSection.style.display = 'block';
+        if (inLibrarySection) inLibrarySection.style.display = 'none';
+        if (inLibraryContainer) {
+            inLibraryContainer.innerHTML = '';
+            inLibraryContainer.style.display = 'none';
+        }
+        // Reset chevron state
+        const chevronEl = document.getElementById('in-library-chevron');
+        if (chevronEl) chevronEl.style.transform = 'rotate(0deg)';
 
         try {
             const artist = await this.api.getArtist(artistId, provider);
@@ -4168,9 +4178,9 @@ export class UIRenderer {
                 <span>${artist.popularity}% popularity</span>
                 <div class="artist-tags">
                     ${(artist.artistRoles || [])
-                        .filter((role) => role.category)
-                        .map((role) => `<span class="artist-tag">${role.category}</span>`)
-                        .join('')}
+                    .filter((role) => role.category)
+                    .map((role) => `<span class="artist-tag">${role.category}</span>`)
+                    .join('')}
                 </div>
             `;
 
@@ -4182,6 +4192,205 @@ export class UIRenderer {
 
             this.renderListWithTracks(tracksContainer, artist.tracks, true);
 
+            // "In your library" section: find liked tracks and playlist tracks for this artist
+            if (inLibraryContainer && inLibrarySection) {
+                const artistNameLower = artist.name.toLowerCase();
+
+                const isTrackByArtist = (track) => {
+                    if (track.artists && Array.isArray(track.artists)) {
+                        return track.artists.some(
+                            (a) => a && a.name && a.name.toLowerCase() === artistNameLower
+                        );
+                    }
+                    if (track.artist) {
+                        const artistStr = typeof track.artist === 'string' ? track.artist : track.artist.name;
+                        if (artistStr && artistStr.toLowerCase() === artistNameLower) return true;
+                    }
+                    return false;
+                };
+
+                const refreshInLibrary = async () => {
+                    try {
+                        const seenIds = new Set();
+                        const libraryTracks = [];
+                        const trackSourceMap = new Map(); // trackId -> Array<{ label, href }>
+
+                        const addSource = (trackId, source) => {
+                            if (!trackSourceMap.has(trackId)) {
+                                trackSourceMap.set(trackId, []);
+                            }
+                            trackSourceMap.get(trackId).push(source);
+                        };
+
+                        // Get liked tracks
+                        const likedTracks = await db.getFavorites('track');
+                        for (const track of likedTracks) {
+                            if (isTrackByArtist(track)) {
+                                if (!seenIds.has(track.id)) {
+                                    seenIds.add(track.id);
+                                    libraryTracks.push(track);
+                                }
+                                addSource(track.id, { label: 'Liked Tracks', href: '/library' });
+                            }
+                        }
+
+                        // Get tracks from user playlists
+                        const userPlaylists = await db.getPlaylists(true);
+                        for (const playlist of userPlaylists) {
+                            if (playlist.tracks && Array.isArray(playlist.tracks)) {
+                                for (const track of playlist.tracks) {
+                                    if (isTrackByArtist(track)) {
+                                        if (!seenIds.has(track.id)) {
+                                            seenIds.add(track.id);
+                                            libraryTracks.push(track);
+                                        }
+                                        const label = playlist.name || playlist.title || 'Playlist';
+                                        addSource(track.id, {
+                                            label,
+                                            href: `/userplaylist/${playlist.id}`
+                                        });
+                                    }
+                                }
+                            }
+                        }
+
+                        // Sort alphabetically by title
+                        libraryTracks.sort((a, b) => (a.title || '').localeCompare(b.title || ''));
+
+                        if (libraryTracks.length > 0) {
+                            inLibrarySection.style.display = 'block';
+                            this.renderListWithTracks(inLibraryContainer, libraryTracks, true);
+
+                            // Inject source labels into each track's .artist div
+                            const trackElements = inLibraryContainer.querySelectorAll('.track-item');
+                            trackElements.forEach((el, idx) => {
+                                const track = libraryTracks[idx];
+                                if (!track) return;
+                                const sources = trackSourceMap.get(track.id);
+                                if (!sources || sources.length === 0) return;
+                                const artistDiv = el.querySelector('.track-item-details .artist');
+                                if (!artistDiv) return;
+
+                                // Extract artist name and year from existing content
+                                const artistLinks = artistDiv.querySelectorAll('.artist-link');
+                                const artistNames = Array.from(artistLinks).map(a => a.textContent).join(', ');
+                                const truncatedArtist = artistNames.length > 15 ? artistNames.slice(0, 20) + '…' : artistNames;
+
+                                // Extract year from text content (pattern: " • 2024")
+                                const fullText = artistDiv.textContent;
+                                const yearMatch = fullText.match(/\s•\s(\d{4})/);
+                                const yearText = yearMatch ? ` • ${yearMatch[1]}` : '';
+
+                                // Build source content
+                                const sourceSpan = document.createElement('span');
+                                sourceSpan.className = 'library-source';
+
+                                if (sources.length === 1) {
+                                    const srcLabel = sources[0].label.length > 15 ? sources[0].label.slice(0, 15) + '…' : sources[0].label;
+                                    sourceSpan.innerHTML = `<span class="library-source-label">· Source:&nbsp;</span><span class="library-source-link">${srcLabel}</span>`;
+                                    sourceSpan.style.cursor = 'pointer';
+                                    sourceSpan.addEventListener('click', (e) => {
+                                        e.preventDefault();
+                                        e.stopPropagation();
+                                        navigate(sources[0].href);
+                                    });
+                                } else {
+                                    sourceSpan.innerHTML = `<span class="library-source-label">· Source:&nbsp;</span><span class="library-source-link">Multiple Playlists</span>`;
+                                    sourceSpan.style.cursor = 'pointer';
+                                    sourceSpan.addEventListener('click', (e) => {
+                                        e.preventDefault();
+                                        e.stopPropagation();
+
+                                        const modal = document.getElementById('goto-playlist-modal');
+                                        const list = document.getElementById('goto-playlist-list');
+                                        const cancelBtn = document.getElementById('goto-playlist-cancel');
+                                        const overlay = modal.querySelector('.modal-overlay');
+
+                                        list.innerHTML = sources.map((s) =>
+                                            `<div class="modal-option" data-href="${s.href}">
+                                                <span>${s.label}</span>
+                                            </div>`
+                                        ).join('');
+
+                                        const closeModal = () => {
+                                            modal.classList.remove('active');
+                                        };
+
+                                        list.onclick = (ev) => {
+                                            const option = ev.target.closest('.modal-option');
+                                            if (!option) return;
+                                            const href = option.dataset.href;
+                                            closeModal();
+                                            if (href) navigate(href);
+                                        };
+
+                                        cancelBtn.onclick = closeModal;
+                                        overlay.onclick = closeModal;
+                                        modal.classList.add('active');
+                                    });
+                                }
+
+                                // Rebuild artist div with structured layout
+                                artistDiv.innerHTML = '';
+                                artistDiv.classList.add('library-artist-flex');
+
+                                const artistNameSpan = document.createElement('span');
+                                artistNameSpan.className = 'library-artist-name';
+                                artistNameSpan.textContent = truncatedArtist;
+
+                                const yearSpan = document.createElement('span');
+                                yearSpan.className = 'library-year';
+                                yearSpan.textContent = yearText;
+
+                                artistDiv.appendChild(artistNameSpan);
+                                artistDiv.appendChild(yearSpan);
+                                artistDiv.appendChild(sourceSpan);
+                            });
+                        } else {
+                            inLibrarySection.style.display = 'none';
+                        }
+                    } catch (err) {
+                        console.warn('Failed to load library tracks for artist:', err);
+                        inLibrarySection.style.display = 'none';
+                    }
+                };
+
+                // Initial load
+                refreshInLibrary().then(() => {
+                    inLibraryContainer.style.display = 'none';
+                });
+
+                // Setup chevron toggle (once)
+                const toggle = document.getElementById('in-library-toggle');
+                const chevron = document.getElementById('in-library-chevron');
+                if (toggle) {
+                    toggle.onclick = () => {
+                        const isOpen = inLibraryContainer.style.display !== 'none';
+                        inLibraryContainer.style.display = isOpen ? 'none' : '';
+                        if (chevron) {
+                            chevron.style.transform = isOpen ? 'rotate(0deg)' : 'rotate(90deg)';
+                        }
+                    };
+                }
+
+                // Real-time updates: refresh when favorites or playlists change
+                let refreshTimeout;
+                const debouncedRefresh = () => {
+                    clearTimeout(refreshTimeout);
+                    refreshTimeout = setTimeout(() => refreshInLibrary(), 300);
+                };
+                window.addEventListener('favorites-changed', debouncedRefresh);
+                window.addEventListener('playlist-tracks-changed', debouncedRefresh);
+
+                // Cleanup listeners when navigating away
+                const cleanupOnNav = () => {
+                    window.removeEventListener('favorites-changed', debouncedRefresh);
+                    window.removeEventListener('playlist-tracks-changed', debouncedRefresh);
+                    window.removeEventListener('popstate', cleanupOnNav);
+                };
+                window.addEventListener('popstate', cleanupOnNav, { once: true });
+            }
+
             // Update header like button
             const artistLikeBtn = document.getElementById('like-artist-btn');
             if (artistLikeBtn) {
@@ -4812,13 +5021,13 @@ export class UIRenderer {
                             <div class="controls">
                                 ${
                                     isUser
-                                        ? `
+                                    ? `
                                 <button class="delete-instance" title="Delete Instance">
                                     <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                         <path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
                                     </svg>
                                 </button>`
-                                        : ''
+                                    : ''
                                 }
                                 <button class="move-up" title="Move Up" ${index === 0 ? 'disabled' : ''}>
                                     <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
diff --git a/styles.css b/styles.css
index c0ef4be..71a5579 100644
--- a/styles.css
+++ b/styles.css
@@ -1988,6 +1988,58 @@ input[type='search']::-webkit-search-cancel-button {
     gap: 2px var(--spacing-xl);
 }
 
+#artist-detail-in-library {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(580px, 1fr));
+    gap: 2px var(--spacing-xl);
+}
+
+.library-source {
+    color: var(--muted-foreground);
+    font-size: inherit;
+    display: flex;
+    align-items: center;
+    min-width: 0;
+    flex-shrink: 1;
+    overflow: hidden;
+    cursor: pointer;
+}
+
+.library-artist-flex {
+    display: flex;
+    align-items: center;
+    gap: 0.35em;
+    min-width: 0;
+}
+
+.library-artist-name {
+    flex-shrink: 0;
+    white-space: nowrap;
+}
+
+.library-year {
+    flex-shrink: 0;
+    white-space: nowrap;
+}
+
+.library-source-label {
+    flex-shrink: 0;
+    white-space: nowrap;
+}
+
+.library-source-link {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-width: 0;
+    transition: color var(--transition);
+}
+
+.library-source:hover .library-source-link {
+    color: var(--highlight);
+    text-decoration: underline;
+}
+
 #playlist-detail-recommended .track-item {
     grid-template-columns: 40px 1fr 32px auto;
 }
@@ -1995,6 +2047,7 @@ input[type='search']::-webkit-search-cancel-button {
 @media (max-width: 1100px) {
     #home-recommended-songs,
     #artist-detail-tracks,
+    #artist-detail-in-library,
     #playlist-detail-recommended {
         grid-template-columns: 1fr;
     }
@@ -2313,6 +2366,8 @@ input[type='search']::-webkit-search-cancel-button {
     gap: 1rem;
     flex-wrap: wrap;
     overflow-wrap: break-word;
+    word-break: break-word;
+    min-width: 0;
 }
 
 .detail-header-info .title.long-title {