From fe1c900063d4ae4540df1a149f2e9423bd6c12c7 Mon Sep 17 00:00:00 2001
From: Julien Maille <julien.maille@data-pixel.com>
Date: Sun, 28 Dec 2025 11:49:55 +0100
Subject: [PATCH] remove broken image caching, improve css

---
 index.html |  2 ++
 styles.css | 11 +++++++++++
 sw.js      | 23 +----------------------
 3 files changed, 14 insertions(+), 22 deletions(-)

diff --git a/index.html b/index.html
index 7ca22e7..717ed41 100644
--- a/index.html
+++ b/index.html
@@ -463,6 +463,8 @@
                         <ul>
                             <li>High-quality lossless audio streaming</li>
                             <li>Lyrics support with karaoke mode</li>
+                            <li>Recently Played tracking for easy history access</li>
+                            <li>Comprehensive Personal Library for favorites</li>
                             <li>Intelligent API caching for improved performance</li>
                             <li>Offline-capable Progressive Web App (PWA)</li>
                             <li>Media Session API integration for system controls</li>
diff --git a/styles.css b/styles.css
index 95a220c..59d5406 100644
--- a/styles.css
+++ b/styles.css
@@ -602,6 +602,10 @@ body.has-page-background .track-item:hover {
     transition: transform 0.2s ease, color 0.2s ease;
 }
 
+.like-btn:hover .heart-icon {
+    color: #ef4444;
+}
+
 .heart-icon.filled {
     color: #ef4444;
     fill: #ef4444;
@@ -3242,3 +3246,10 @@ input:checked + .slider::before {
     align-items: center;
     justify-content: center;
 }
+
+/* Show a grey box for images with no source, hiding the broken icon */
+img:not([src]), img[src=''] {
+    content: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
+    background-color: var(--muted);
+}
+
diff --git a/sw.js b/sw.js
index 00c279f..589f884 100644
--- a/sw.js
+++ b/sw.js
@@ -1,6 +1,5 @@
 //sw.js
 const CACHE_NAME = 'monochrome-v4';
-const IMAGE_CACHE_NAME = 'monochrome-images-v1';
 const urlsToCache = [
     '/',
     '/index.html',
@@ -38,26 +37,6 @@ self.addEventListener('install', event => {
 self.addEventListener('fetch', event => {
     const url = new URL(event.request.url);
 
-    // Cache Images (Cache-First)
-    if (url.hostname === 'resources.tidal.com' || url.hostname === 'picsum.photos') {
-        event.respondWith(
-            caches.open(IMAGE_CACHE_NAME).then(cache => {
-                return cache.match(event.request).then(response => {
-                    return response || fetch(event.request).then(networkResponse => {
-                        if (networkResponse.ok) {
-                            cache.put(event.request, networkResponse.clone());
-                        }
-                        return networkResponse;
-                    }).catch(() => {
-                        // If fetch fails (e.g. CORS), return null/error so client handles it
-                        return new Response(null, { status: 404, statusText: 'Image fetch failed' });
-                    });
-                });
-            })
-        );
-        return;
-    }
-
     // Static Assets & App Shell (Cache-First)
     event.respondWith(
         caches.match(event.request)
@@ -72,7 +51,7 @@ self.addEventListener('fetch', event => {
 });
 
 self.addEventListener('activate', event => {
-    const cacheWhitelist = [CACHE_NAME, IMAGE_CACHE_NAME];
+    const cacheWhitelist = [CACHE_NAME];
     event.waitUntil(
         caches.keys().then(cacheNames => {
             return Promise.all(