From 014d1ef74e187b74e1e08bf06b88bbe6820b08cb Mon Sep 17 00:00:00 2001
From: binimum <uimax.bai@gmail.com>
Date: Sun, 5 Apr 2026 14:44:40 +0000
Subject: [PATCH 1/3] feat: change loading eagerness to make lcp faster

---
 index.html    | 17 +++++++++++++++--
 js/app.js     |  4 ++--
 js/tracker.js |  4 ++--
 js/ui.js      | 11 ++++++++---
 styles.css    |  2 +-
 5 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/index.html b/index.html
index d6b1c6e..2773b81 100644
--- a/index.html
+++ b/index.html
@@ -80,10 +80,23 @@
         <link rel="apple-touch-icon" href="/assets/logo.svg" />
         <link rel="manifest" href="/manifest.json" />
         <link rel="icon" href="/assets/logo.svg" type="image/svg+xml" />
+        <link
+            rel="preload"
+            as="style"
+            href="https://api.fonts.coollabs.io/css2?family=Inter:wght@400;500;600;700;800&display=swap"
+        />
         <link
             href="https://api.fonts.coollabs.io/css2?family=Inter:wght@400;500;600;700;800&display=swap"
             rel="stylesheet"
+            media="print"
+            onload="this.media='all'"
         />
+        <noscript>
+            <link
+                href="https://api.fonts.coollabs.io/css2?family=Inter:wght@400;500;600;700;800&display=swap"
+                rel="stylesheet"
+            />
+        </noscript>
         <link rel="stylesheet" href="/styles.css" />
     </head>
 
@@ -1751,7 +1764,7 @@
                             </p>
                         </div>
 
-                        <section class="content-section" id="home-editors-picks-section-empty" style="margin-top: 0">
+                        <section class="content-section" id="home-editors-picks-section-empty" style="margin-top: 0; display: none;">
                             <div
                                 style="
                                     display: flex;
@@ -5530,7 +5543,7 @@
 
             <footer class="now-playing-bar">
                 <div class="track-info">
-                    <img src="/assets/appicon.png" alt="Current Track Cover" class="cover" />
+                    <img src="/assets/appicon.png" alt="Current Track Cover" class="cover" fetchpriority="high" />
                     <div class="details">
                         <div class="title">Select a song</div>
                         <div class="album"></div>
diff --git a/js/app.js b/js/app.js
index 74db58a..eb31eb9 100644
--- a/js/app.js
+++ b/js/app.js
@@ -149,7 +149,7 @@ async function fetchcontributors() {
             const userDIV = document.createElement('div');
             userDIV.innerHTML = `
             <a href="${user.html_url}" target="_blank">
-            <img src="${user.avatar_url}" alt="${user.login}" width="50" style="border-radius: 50%;">
+            <img src="${user.avatar_url}&s=50" alt="${user.login}" width="50" height="50" style="border-radius: 50%;">
             <span>${user.login}</span>
             <span class="contrib">Contributions: ${user.contributions}</span>
             </a>
@@ -2894,7 +2894,7 @@ document.addEventListener('DOMContentLoaded', async () => {
             if (user) {
                 const data = await syncManager.getUserData();
                 if (data && data.profile && data.profile.avatar_url) {
-                    headerAccountImg.src = data.profile.avatar_url;
+                    headerAccountImg.src = data.profile.avatar_url + '&s=100';
                     headerAccountImg.style.display = 'block';
                     headerAccountIcon.style.display = 'none';
                     return;
diff --git a/js/tracker.js b/js/tracker.js
index de42676..5b29cd1 100644
--- a/js/tracker.js
+++ b/js/tracker.js
@@ -304,7 +304,7 @@ export function createProjectCardHTML(era, _artist, sheetId, trackCount) {
                 ${playBtnHTML}
             </div>
             <div class="card-info">
-                <h4 class="card-title">${escapeHtml(era.name)}</h4>
+                <h3 class="card-title">${escapeHtml(era.name)}</h3>
                 <p class="card-subtitle">${era.timeline || 'Unreleased'} • ${trackCount} tracks</p>
             </div>
         </div>
@@ -784,7 +784,7 @@ export async function renderUnreleasedPage(container) {
                 <img class="card-image" src="${coverImage}" alt="${artist.name}" loading="lazy" onerror="this.src='assets/logo.svg'">
             </div>
             <div class="card-info">
-                <h4 class="card-title">${artist.name}</h4>
+                <h3 class="card-title">${artist.name}</h3>
                 <p class="card-subtitle">Unreleased Music</p>
             </div>
         `;
diff --git a/js/ui.js b/js/ui.js
index 8019611..20b0c84 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -577,7 +577,7 @@ export class UIRenderer {
 
         const cardContent = `
             <div class="card-info">
-                <h4 class="card-title">${title}</h4>
+                <h3 class="card-title">${title}</h3>
                 ${subtitle ? `<p class="card-subtitle">${subtitle}</p>` : ''}
             </div>`;
 
@@ -749,7 +749,7 @@ export class UIRenderer {
                 album.cover,
                 escapeHtml(album.title),
                 'card-image',
-                'lazy',
+                album._lazy === false ? 'eager' : 'lazy',
                 album.videoCoverUrl
             ),
             actionButtonsHTML: `
@@ -821,7 +821,7 @@ export class UIRenderer {
             href: `/artist/${artist.id}`,
             title: escapeHtml(artist.name),
             subtitle: '',
-            imageHTML: `<img src="${this.api.getArtistPictureUrl(artist.picture)}" alt="${escapeHtml(artist.name)}" class="card-image" loading="lazy">`,
+            imageHTML: `<img src="${this.api.getArtistPictureUrl(artist.picture)}" alt="${escapeHtml(artist.name)}" class="card-image" loading="${artist._lazy === false ? 'eager' : 'lazy'}">`,
             actionButtonsHTML: `
                 <button class="like-btn card-like-btn" data-action="toggle-like" data-type="artist" title="Add to Liked">
                     ${this.createHeartIcon(false)}
@@ -2621,6 +2621,7 @@ export class UIRenderer {
                                     audioQuality: item.audioQuality,
                                     mediaMetadata: item.mediaMetadata,
                                     type: 'ALBUM',
+                                    _lazy: cardsHTML.length >= 6
                                 };
                                 cardsHTML.push(this.createAlbumCardHTML(album));
                                 itemsToStore.push({ el: null, data: album, type: 'album' });
@@ -2628,6 +2629,7 @@ export class UIRenderer {
                                 // Fall back to API call for legacy format
                                 const result = await this.api.getAlbum(item.id);
                                 if (result && result.album) {
+                                    result.album._lazy = cardsHTML.length >= 6;
                                     cardsHTML.push(this.createAlbumCardHTML(result.album));
                                     itemsToStore.push({ el: null, data: result.album, type: 'album' });
                                 }
@@ -2650,6 +2652,7 @@ export class UIRenderer {
                                         releaseDate: item.releaseDate,
                                         type: 'ALBUM',
                                         _href: `/userplaylist/${item.id}`,
+                                        _lazy: cardsHTML.length >= 6
                                     })
                                 );
                                 itemsToStore.push({ el: null, data: playlist, type: 'user-playlist' });
@@ -2661,6 +2664,7 @@ export class UIRenderer {
                                     id: item.id,
                                     name: item.name,
                                     picture: item.picture,
+                                    _lazy: cardsHTML.length >= 6
                                 };
                                 cardsHTML.push(this.createArtistCardHTML(artist));
                                 itemsToStore.push({ el: null, data: artist, type: 'artist' });
@@ -2668,6 +2672,7 @@ export class UIRenderer {
                                 // Fall back to API call
                                 const artist = await this.api.getArtist(item.id);
                                 if (artist) {
+                                    artist._lazy = cardsHTML.length >= 6;
                                     cardsHTML.push(this.createArtistCardHTML(artist));
                                     itemsToStore.push({ el: null, data: artist, type: 'artist' });
                                 }
diff --git a/styles.css b/styles.css
index 2d3d2e4..07cd9a3 100644
--- a/styles.css
+++ b/styles.css
@@ -3570,7 +3570,7 @@ input:checked + .slider::before {
 }
 
 .player-controls .progress-container span {
-    min-width: 40px;
+    min-width: 45px;
     font-variant-numeric: tabular-nums;
     flex-shrink: 0;
 }

From c710855874f8c88eba4651a85b322cf8cf59d135 Mon Sep 17 00:00:00 2001
From: binimum <61615730+binimum@users.noreply.github.com>
Date: Sun, 5 Apr 2026 14:45:25 +0000
Subject: [PATCH 2/3] style: auto-fix linting issues

---
 index.html | 8 ++++++--
 js/ui.js   | 6 +++---
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index d374edc..a5bc13a 100644
--- a/index.html
+++ b/index.html
@@ -89,7 +89,7 @@
             href="https://api.fonts.coollabs.io/css2?family=Inter:wght@400;500;600;700;800&display=swap"
             rel="stylesheet"
             media="print"
-            onload="this.media='all'"
+            onload="this.media = 'all'"
         />
         <noscript>
             <link
@@ -1764,7 +1764,11 @@
                             </p>
                         </div>
 
-                        <section class="content-section" id="home-editors-picks-section-empty" style="margin-top: 0; display: none;">
+                        <section
+                            class="content-section"
+                            id="home-editors-picks-section-empty"
+                            style="margin-top: 0; display: none"
+                        >
                             <div
                                 style="
                                     display: flex;
diff --git a/js/ui.js b/js/ui.js
index 20b0c84..6d4d6e2 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -2621,7 +2621,7 @@ export class UIRenderer {
                                     audioQuality: item.audioQuality,
                                     mediaMetadata: item.mediaMetadata,
                                     type: 'ALBUM',
-                                    _lazy: cardsHTML.length >= 6
+                                    _lazy: cardsHTML.length >= 6,
                                 };
                                 cardsHTML.push(this.createAlbumCardHTML(album));
                                 itemsToStore.push({ el: null, data: album, type: 'album' });
@@ -2652,7 +2652,7 @@ export class UIRenderer {
                                         releaseDate: item.releaseDate,
                                         type: 'ALBUM',
                                         _href: `/userplaylist/${item.id}`,
-                                        _lazy: cardsHTML.length >= 6
+                                        _lazy: cardsHTML.length >= 6,
                                     })
                                 );
                                 itemsToStore.push({ el: null, data: playlist, type: 'user-playlist' });
@@ -2664,7 +2664,7 @@ export class UIRenderer {
                                     id: item.id,
                                     name: item.name,
                                     picture: item.picture,
-                                    _lazy: cardsHTML.length >= 6
+                                    _lazy: cardsHTML.length >= 6,
                                 };
                                 cardsHTML.push(this.createArtistCardHTML(artist));
                                 itemsToStore.push({ el: null, data: artist, type: 'artist' });

From fb3099386d3c39e893f6b14c598611222972f3c1 Mon Sep 17 00:00:00 2001
From: binimum <uimax.bai@gmail.com>
Date: Sun, 5 Apr 2026 14:45:26 +0000
Subject: [PATCH 3/3] finish merge

---
 js/ui.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/js/ui.js b/js/ui.js
index 20b0c84..6d4d6e2 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -2621,7 +2621,7 @@ export class UIRenderer {
                                     audioQuality: item.audioQuality,
                                     mediaMetadata: item.mediaMetadata,
                                     type: 'ALBUM',
-                                    _lazy: cardsHTML.length >= 6
+                                    _lazy: cardsHTML.length >= 6,
                                 };
                                 cardsHTML.push(this.createAlbumCardHTML(album));
                                 itemsToStore.push({ el: null, data: album, type: 'album' });
@@ -2652,7 +2652,7 @@ export class UIRenderer {
                                         releaseDate: item.releaseDate,
                                         type: 'ALBUM',
                                         _href: `/userplaylist/${item.id}`,
-                                        _lazy: cardsHTML.length >= 6
+                                        _lazy: cardsHTML.length >= 6,
                                     })
                                 );
                                 itemsToStore.push({ el: null, data: playlist, type: 'user-playlist' });
@@ -2664,7 +2664,7 @@ export class UIRenderer {
                                     id: item.id,
                                     name: item.name,
                                     picture: item.picture,
-                                    _lazy: cardsHTML.length >= 6
+                                    _lazy: cardsHTML.length >= 6,
                                 };
                                 cardsHTML.push(this.createArtistCardHTML(artist));
                                 itemsToStore.push({ el: null, data: artist, type: 'artist' });