From e80e81f4a47a201074f12c6bcd7cf1591a6722e3 Mon Sep 17 00:00:00 2001
From: Paul Buetow <paul@buetow.org>
Date: Sat, 2 May 2026 22:40:34 +0300
Subject: show audiobook covers as cards

---
 web/js/app.js | 30 +++++++++++++++---------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/web/js/app.js b/web/js/app.js
index 104c89e..a0e8893 100644
--- a/web/js/app.js
+++ b/web/js/app.js
@@ -479,23 +479,23 @@ function renderItem(m, index) {
       </div>
     `;
   }
-  const coverHtml = m.thumbnail_path
-    ? `<img src="/api/media/${m.id}/thumbnail" alt="" loading="lazy" class="row-cover">`
-    : '<span class="row-icon">🎵</span>';
   return `
-    <div class="media-row" data-id="${m.id}" data-index="${index}" tabindex="0" role="button" aria-label="${escapeHtml(m.file_name)}">
-      ${coverHtml}
-      <div class="row-body">
-        <div class="row-title">${escapeHtml(m.file_name)}</div>
-        <div class="row-meta">${escapeHtml(m.codec || '')} ${m.bitrate ? Math.round(m.bitrate/1000)+'kbps' : ''} ${sizeText ? '• ' + sizeText : ''}</div>
+    <div class="media-card audio-card" data-id="${m.id}" data-index="${index}" tabindex="0" role="button" aria-label="${escapeHtml(m.file_name)}">
+      <div class="thumb-wrap">
+        ${m.thumbnail_path ? `<img src="/api/media/${m.id}/thumbnail" alt="" loading="lazy">` : `<span class="placeholder">No cover</span>`}
+        <span class="badge">${fmtDur(m.duration)}${sizeText ? ' • ' + sizeText : ''}</span>
+        <div class="card-actions">
+          <button class="icon-btn btn-sm" data-action="play" title="Play">▶</button>
+          <button class="icon-btn btn-sm" data-action="favorite" title="Favorite">♥</button>
+          <button class="icon-btn btn-sm" data-action="notes" title="Notes">📝</button>
+          <button class="icon-btn btn-sm" data-action="download" title="Download">⬇</button>
+          <button class="icon-btn btn-sm" data-action="tags" title="Tags">🏷</button>
+        </div>
+      </div>
+      <div class="meta">
+        <div class="title">${escapeHtml(m.file_name)}</div>
+        <div class="subtitle">${escapeHtml(m.codec || '')} ${m.bitrate ? Math.round(m.bitrate/1000)+'kbps' : ''}</div>
       </div>
-      <span class="row-duration">${fmtDur(m.duration)}</span>
-      <button class="icon-btn btn-sm" data-action="play" title="Play">▶</button>
-      <button class="icon-btn btn-sm" data-action="favorite" title="Favorite">♥</button>
-      <button class="icon-btn btn-sm" data-action="notes" title="Notes">📝</button>
-      <button class="icon-btn btn-sm" data-action="download" title="Download">⬇</button>
-      <button class="icon-btn btn-sm" data-action="tags" title="Tags">🏷</button>
-      <button class="icon-btn btn-sm" data-action="regen-thumb" title="Regenerate thumbnail">🔄</button>
     </div>
   `;
 }
-- 
cgit v1.2.3