responsive design and better image handling

src/content/image-handler.js

@@ -1,22 +1,48 @@
+let masonryTimer = null;
+function scheduleMasonryRelayout(grid) {
+    clearTimeout(masonryTimer);
+    masonryTimer = setTimeout(() => {
+        relayoutMasonry(grid);
+    }, 50);
+}
+
 export function createImageCard(id, tags, imageUrl, thumbnailUrl, type, options = {}) {
-    const { 
-        showMessage, 
-        showTagModal, 
-        favoriteIds = new Set() 
+    const {
+        showMessage,
+        showTagModal,
+        favoriteIds = new Set()
     } = options;
 
     const card = document.createElement('div');
-    card.className = 'image-entry';
-    card.dataset.id = id; 
+    card.className = 'image-entry loading newly-added';
+    card.dataset.id = id;
     card.dataset.type = type;
-    card.title = tags.join(', '); 
+    card.title = tags.join(', ');
 
     const img = document.createElement('img');
     img.src = thumbnailUrl || imageUrl;
     img.loading = 'lazy';
     img.alt = tags.join(' ');
-    img.onload = () => img.classList.add('loaded');
-    
+
+    img.onload = () => {
+        img.classList.add('loaded');
+        card.classList.remove('loading');
+
+        if (type !== 'book') {
+            setTimeout(() => resizeMasonryItem(card), 20);
+            scheduleMasonryRelayout(card.parentElement);
+        }
+
+        setTimeout(() => {
+            card.classList.remove('newly-added');
+        }, 400);
+    };
+
+    img.onerror = () => {
+        card.classList.remove('loading');
+        img.classList.add('loaded');
+    };
+
     card.appendChild(img);
 
     if (type === 'book') {
@@ -30,7 +56,6 @@ export function createImageCard(id, tags, imageUrl, thumbnailUrl, type, options
             <span>Click To Read</span>
         `;
         card.appendChild(readOverlay);
-        
         return card;
     }
 
@@ -40,12 +65,12 @@ export function createImageCard(id, tags, imageUrl, thumbnailUrl, type, options
     const favBtn = document.createElement('button');
     favBtn.className = 'heart-button';
     favBtn.dataset.id = id;
-    
+
     const isFavorited = favoriteIds.has(String(id));
     updateHeartIcon(favBtn, isFavorited);
 
     favBtn.onclick = async (e) => {
-        e.stopPropagation(); 
+        e.stopPropagation();
         e.preventDefault();
 
         const currentlyFavorited = favoriteIds.has(String(id));
@@ -99,6 +124,32 @@ export function createImageCard(id, tags, imageUrl, thumbnailUrl, type, options
     return card;
 }
 
+function resizeMasonryItem(item) {
+    if (item.dataset.type === 'book') return;
+
+    const grid = item.parentElement;
+    const rowHeight = parseInt(getComputedStyle(grid).gridAutoRows);
+    const rowGap = parseInt(getComputedStyle(grid).gap);
+
+    const img = item.querySelector("img");
+
+    if (!img) return;
+
+    if (!img.complete || img.naturalWidth === 0) {
+        return;
+    }
+
+    const width = img.clientWidth;
+    const imageHeight = (img.naturalHeight / img.naturalWidth) * width;
+
+    const extra = 2;
+    const totalHeight = imageHeight + extra;
+    const rowSpan = Math.ceil((totalHeight + rowGap) / (rowHeight + rowGap));
+    item.style.gridRowEnd = "span " + rowSpan;
+
+    item.style.height = totalHeight + "px";
+}
+
 function updateHeartIcon(btn, isFavorited) {
     if (isFavorited) {
         btn.innerHTML = `<svg viewBox="0 0 24 24" fill="#ef4444" stroke="#ef4444" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>`;
@@ -109,6 +160,11 @@ function updateHeartIcon(btn, isFavorited) {
     }
 }
 
+function relayoutMasonry(grid) {
+    const items = grid.querySelectorAll('.image-entry:not([data-type="book"])');
+    items.forEach(item => resizeMasonryItem(item));
+}
+
 export function populateTagModal(container, tags) {
     container.innerHTML = '';
     if (!tags || tags.length === 0) {