From 77cd3fdadd09a3cd5faf40b9d786b51e76ccb37b Mon Sep 17 00:00:00 2001
From: Mathieu Moran <mathieumoran1@gmail.com>
Date: Mon, 10 Aug 2026 01:18:03 -0400
Subject: [PATCH] feat(dashcam): show converting badge and date on mobile video
 rows

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 static/js/local-videos.js | 12 ++++++++++++
 static/yaris.css          |  6 ++++++
 2 files changed, 18 insertions(+)

diff --git a/static/js/local-videos.js b/static/js/local-videos.js
index cb3d548..4f0ae40 100644
--- a/static/js/local-videos.js
+++ b/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);
 
diff --git a/static/yaris.css b/static/yaris.css
index 5de2654..bde7388 100644
--- a/static/yaris.css
+++ b/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; }
 }