Force tab-gallery section active display and add image load warning logs

Author: JasonDoug

web_studio/static/app.js

@@ -1091,9 +1091,9 @@ function initStudioApp() {
                 grid.innerHTML = data.images.map(img => {
                     const timeStr = img.mtime_str ? (img.mtime_str.split(' ')[1] || img.mtime_str) : '';
                     return `
-                    <div class="gallery-card" style="background: rgba(30,30,40,0.7); border: 1px solid var(--border-color); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; width: 100%; transition: transform 0.2s, border-color 0.2s;">
+                    <div class="gallery-card" style="background: rgba(30,30,40,0.8); border: 1px solid var(--border-color); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; width: 100%; transition: transform 0.2s, border-color 0.2s;">
                         <div style="width: 100%; height: 260px; overflow: hidden; background: #111; cursor: pointer; position: relative;" class="gallery-img-container" data-url="${img.url}" data-filename="${img.filename}" data-subfolder="${img.subfolder}">
-                            <img src="${img.url}" alt="${img.filename}" loading="lazy" style="width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease;" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
+                            <img src="${img.url}" alt="${img.filename}" loading="lazy" style="width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease;" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'" onerror="console.warn('[Studio UI] Image failed to load:', '${img.url}')">
                         </div>
                         <div style="padding: 10px 12px; font-size: 11px; display: flex; flex-direction: column; gap: 4px; border-top: 1px solid rgba(255,255,255,0.05);">
                             <div style="font-weight: 600; color: #e2e8f0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" title="${img.filename}">
@@ -1111,6 +1111,20 @@ function initStudioApp() {
                     </div>
                     `;
                 }).join('');
+
+                console.log(`[Studio UI] Rendered ${data.images.length} cards into #gallery-grid (innerHTML length: ${grid.innerHTML.length})`);
+                
+                // Force parent tab section display if inactive
+                const gallerySec = document.getElementById('tab-gallery');
+                if (gallerySec && !gallerySec.classList.contains('active')) {
+                    const navButtons = document.querySelectorAll('.nav-btn');
+                    const tabContents = document.querySelectorAll('.tab-content');
+                    navButtons.forEach(b => b.classList.remove('active'));
+                    tabContents.forEach(t => t.classList.remove('active'));
+                    const btn = document.querySelector('.nav-btn[data-tab="tab-gallery"]');
+                    if (btn) btn.classList.add('active');
+                    gallerySec.classList.add('active');
+                }
             }
         } catch (e) {
             console.error("Gallery fetch error:", e);