fix: thumbnail system - 500px, always show placeholder, compact sidebar footer

dental-server/public/app.js

@@ -457,12 +457,11 @@ function patientCardHTML(p, index) {
     const doctor   = p.doctor  || '—';
     const remark   = p.remark  || '—';
 
-    // <img loading="lazy"> permite ao browser adiar miniaturas fora da viewport;
+    // SEMPRE exibir imagem ou placeholder — thumb em primeiro plano, cinza como fallback
-    // sem thumb, mantém o gradiente de fallback.
+    // loading="lazy" adia o download de miniaturas fora da viewport
     const preview = thumb
-        ? `<img class="preview-img" src="${thumb}" alt="" loading="lazy" decoding="async">`
+        ? `<img class="preview-img" src="${thumb}" alt="" loading="lazy" decoding="async" style="background: #e0e7ff;">`
-        : '';
+        : `<div class="preview-img-placeholder"></div>`;
-    const previewStyle = thumb ? '' : ' style="background: linear-gradient(135deg,#667eea22,#764ba222);"';
 
     return `
     <div class="image-card patient-card" onclick="openPatientByIndex(${index})">

dental-server/public/style.css

@@ -171,7 +171,7 @@ body {
 }
 
 .sidebar-footer {
-    padding: 12px 16px;
+    padding: 8px 12px;
     border-top: 1px solid var(--border-color);
     margin-top: auto;
     flex-shrink: 0;
@@ -179,7 +179,7 @@ body {
 
 .logout-btn {
     width: 100%;
-    padding: 10px;
+    padding: 8px;
     background: transparent;
     border: 1px solid var(--glass-border);
     color: #a0aec0;
@@ -188,10 +188,10 @@ body {
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: 8px;
+    gap: 6px;
     font-family: 'Inter', sans-serif;
     font-weight: 500;
-    font-size: 0.92rem;
+    font-size: 0.85rem;
     transition: all 0.3s;
 }
 
@@ -438,6 +438,19 @@ body {
     display: block;
 }
 
+.preview-img-placeholder {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #94a3b8;
+    font-size: 40px;
+}
+
 .image-card:hover .image-preview {
     transform: scale(1.03);
 }

dental-server/routes/images.js

@@ -44,7 +44,7 @@ router.post('/upload', async (req, res) => {
     
     let thumbFilename = null;
     try {
-      const thumbBuffer = await imageProcessor.getThumbnail(imageBuffer, 400, 400);
+      const thumbBuffer = await imageProcessor.getThumbnail(imageBuffer, 500, 500);
       thumbFilename = `thumb_${filename}`;
       await storage.saveImage(thumbFilename, thumbBuffer, clientName, patientName, false);
     } catch (e) {

dental-server/server.js

@@ -906,10 +906,10 @@ io.on('connection', (socket) => {
       const filename = `${timestamp}_${data.metadata.guid}.png`;
       await storage.saveImage(filename, imageBuffer, clientName, patientName, false);
       
-      // Gerar e salvar miniatura (Thumbnail)
+      // Gerar e salvar miniatura (Thumbnail) — 500x500, qualidade 80%
       let thumbFilename = null;
       try {
-        const thumbBuffer = await imageProcessor.getThumbnail(imageBuffer, 400, 400);
+        const thumbBuffer = await imageProcessor.getThumbnail(imageBuffer, 500, 500);
         thumbFilename = `thumb_${filename}`;
         await storage.saveImage(thumbFilename, thumbBuffer, clientName, patientName, false);
       } catch (thumbErr) {