From 1c2d925c0515b0322bb81a75eb57dc20086f4045 Mon Sep 17 00:00:00 2001
From: Julien Maille <julien.maille@gmail.com>
Date: Fri, 2 Jan 2026 00:10:29 +0100
Subject: [PATCH] NEW: collage cover for custom playlists

---
 js/ui.js   | 35 ++++++++++++++++++++++++++++++++++-
 styles.css | 26 ++++++++++++++++++++++++++
 2 files changed, 60 insertions(+), 1 deletion(-)

diff --git a/js/ui.js b/js/ui.js
index 2f7f6e5..40ca9fc 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -219,10 +219,43 @@ export class UIRenderer {
     }
 
     createUserPlaylistCardHTML(playlist) {
+        let imageHTML = '';
+        
+        if (playlist.cover) {
+             imageHTML = `<img src="${playlist.cover}" alt="${playlist.name}" class="card-image" loading="lazy">`;
+        } else {
+            const tracks = playlist.tracks || [];
+            const uniqueCovers = [];
+            const seenCovers = new Set();
+
+            for (const track of tracks) {
+                const cover = track.album?.cover;
+                if (cover && !seenCovers.has(cover)) {
+                    seenCovers.add(cover);
+                    uniqueCovers.push(cover);
+                    if (uniqueCovers.length >= 4) break;
+                }
+            }
+
+            if (uniqueCovers.length >= 2) {
+                const count = uniqueCovers.length;
+                const itemsClass = count < 4 ? `items-${count}` : '';
+                imageHTML = `
+                    <div class="card-image card-collage ${itemsClass}">
+                        ${uniqueCovers.map(cover => `<img src="${this.api.getCoverUrl(cover, '320')}" alt="" loading="lazy">`).join('')}
+                    </div>
+                `;
+            } else if (uniqueCovers.length > 0) {
+                imageHTML = `<img src="${this.api.getCoverUrl(uniqueCovers[0], '320')}" alt="${playlist.name}" class="card-image" loading="lazy">`;
+            } else {
+                imageHTML = `<img src="assets/appicon.png" alt="${playlist.name}" class="card-image" loading="lazy">`;
+            }
+        }
+
         return `
             <div class="card user-playlist" data-playlist-id="${playlist.id}" data-href="#userplaylist/${playlist.id}" style="cursor: pointer;">
                 <div class="card-image-wrapper">
-                    <img src="${playlist.cover || 'assets/appicon.png'}" alt="${playlist.name}" class="card-image" loading="lazy">
+                    ${imageHTML}
                     <button class="edit-playlist-btn" data-action="edit-playlist" title="Edit Playlist">
                         <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                             <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
diff --git a/styles.css b/styles.css
index 11ed53f..57b585b 100644
--- a/styles.css
+++ b/styles.css
@@ -721,6 +721,32 @@ body.has-page-background .track-item:hover {
     object-fit: cover;
 }
 
+.card-collage {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr 1fr;
+    overflow: hidden;
+    padding: 0;
+}
+
+.card-collage img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 0;
+    margin: 0;
+}
+
+.card-collage.items-3 img:first-child {
+    grid-row: span 2;
+    height: 100%;
+}
+
+.card-collage.items-2 {
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr;
+}
+
 .card.artist .card-image {
     border-radius: 50%;
 }