feat(dashcam): show converting badge and date on mobile video rows

Co-authored-by: Copilot <[email protected]>

static/js/local-videos.js

@@ -112,6 +112,18 @@
             mobileLabel.style.maxWidth = "5rem";
             mobileLabel.textContent = file.path.split("/").pop();
             preview.appendChild(mobileLabel);
+            // Date shown only on mobile (desktop has its own column)
+            const mobileMeta = document.createElement("div");
+            mobileMeta.className = "dash-thumb-meta text-muted";
+            mobileMeta.textContent = new Date(file.modified_at * 1000).toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
+            preview.appendChild(mobileMeta);
+            // Converting badge shown on mobile inside thumbnail cell
+            if (file.converting) {
+                const mobileBadge = document.createElement("span");
+                mobileBadge.className = "badge bg-info text-dark dash-thumb-converting mt-1";
+                mobileBadge.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
+                preview.appendChild(mobileBadge);
+            }
             row.appendChild(preview);
             thumbnailObserver.observe(image);
 

static/yaris.css

@@ -272,6 +272,8 @@ body {
 /* Desktop: truncate long filenames */
 @media (min-width: 576px) {
     .dash-thumb-name { display: none; }
+    .dash-thumb-meta { display: none; }
+    .dash-thumb-converting { display: none; }
     .dash-col-file { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
     .dash-thumb-td { width: 9rem; padding: 0.25rem; }
 }
@@ -318,6 +320,10 @@ body {
     /* Filename under thumbnail */
     .dash-thumb-name { display: block !important; font-size: .7rem; margin-top: .2rem; }
 
+    /* Date + converting badge under thumbnail (mobile only) */
+    .dash-thumb-meta { display: block; font-size: .65rem; line-height: 1.2; }
+    .dash-thumb-converting { display: inline-block; font-size: .65rem; padding: .1rem .3rem; }
+
     /* Icon-only buttons */
     .btn-icon-mobile .btn-label { display: none; }
 }