🐛 fix: library liked track card link (grid plays like list); my playlists grid layout

js/events.js

@@ -2249,6 +2249,34 @@ export function initializeTrackInteractions(player, api, mainContent, contextMen
                 return;
             }
 
+            const libraryTracksContainer = card.closest('#library-tracks-container');
+            if (libraryTracksContainer && card.dataset.trackId) {
+                if (
+                    e.target.closest('.like-btn') ||
+                    e.target.closest('.card-play-btn') ||
+                    e.target.closest('.card-menu-btn')
+                ) {
+                    return;
+                }
+                e.preventDefault();
+                const clickedTrackId = card.dataset.trackId;
+                const clickedTrack = trackDataStore.get(card);
+                if (!clickedTrack) return;
+                const allTrackElements = Array.from(
+                    libraryTracksContainer.querySelectorAll('.card[data-track-id]')
+                );
+                const trackList = allTrackElements.map((el) => trackDataStore.get(el)).filter(Boolean);
+                if (trackList.length === 0) return;
+                const startIndex = trackList.findIndex((t) => t.id == clickedTrackId);
+                player.setQueue(trackList, startIndex);
+                if (ui.currentPage === 'artist' && ui.currentArtistId) {
+                    player.setArtistPopularTracksContext(ui.currentArtistId, trackList, trackList.length, true);
+                }
+                document.getElementById('shuffle-btn').classList.remove('active');
+                player.playTrackFromQueue();
+                return;
+            }
+
             const href = card.dataset.href;
             if (href) {
                 // Allow native links inside card to work if any exist

js/ui.js

@@ -1959,7 +1959,7 @@ export class UIRenderer {
 
             if (visiblePlaylists.length) {
                 myPlaylistsContainer.insertAdjacentHTML(
-                    'afterbegin',
+                    'beforeend',
                     visiblePlaylists.map((p) => this.createUserPlaylistCardHTML(p)).join('')
                 );
                 visiblePlaylists.forEach((playlist) => {

styles.css

@@ -6047,6 +6047,10 @@ img[src=''] {
     margin-bottom: var(--spacing-lg);
 }
 
+#page-library #my-playlists-container .library-create-dashed-card {
+    order: 1;
+}
+
 #page-library .library-create-dashed-card {
     display: block;
     width: 100%;