From f5ba6362cea8214eaf7ee36a17cab21db3775859 Mon Sep 17 00:00:00 2001
From: dirwin31 <83434411+dirwin31@users.noreply.github.com>
Date: Thu, 27 Aug 2026 17:05:45 -0700
Subject: [PATCH] Title updates and fix the ugly close button

---
 .../components/recordings/dashcam_routes.css  | 24 +++++++++++++++++--
 .../components/recordings/dashcam_routes.js   | 22 +++++++++--------
 .../the_galaxy/tests/test_dashcam_routes.py   |  1 +
 .../tests/test_dashcam_routes_helpers.py      |  9 +++++++
 starpilot/system/the_galaxy/the_galaxy.py     |  2 +-
 5 files changed, 45 insertions(+), 13 deletions(-)

diff --git a/starpilot/system/the_galaxy/assets/components/recordings/dashcam_routes.css b/starpilot/system/the_galaxy/assets/components/recordings/dashcam_routes.css
index 2791db18d..318faa6ed 100644
--- a/starpilot/system/the_galaxy/assets/components/recordings/dashcam_routes.css
+++ b/starpilot/system/the_galaxy/assets/components/recordings/dashcam_routes.css
@@ -1225,12 +1225,32 @@
   line-height: 1.25;
 }
 
+.dashcam-player-overlay .dashcam-player-close,
 .dashcam-player-close {
+  align-items: center;
   background: transparent;
   border: 0;
-  color: var(--text-muted);
+  box-shadow: none;
+  color: var(--danger-fg, #e05577);
   cursor: pointer;
-  font-size: 2rem;
+  display: inline-flex;
+  font-size: 2.75rem;
+  font-weight: 300;
+  justify-content: center;
+  line-height: 0.8;
+  margin: 0;
+  padding: 0 0.25rem;
+  transition: color var(--transition-fast, 0.15s ease), transform var(--transition-fast, 0.15s ease), opacity var(--transition-fast, 0.15s ease);
+}
+
+.dashcam-player-overlay .dashcam-player-close:hover,
+.dashcam-player-overlay .dashcam-player-close:focus-visible,
+.dashcam-player-close:hover,
+.dashcam-player-close:focus-visible {
+  background: transparent;
+  color: var(--danger-hover-bg, #ff6b8b);
+  outline: none;
+  transform: scale(1.15);
 }
 
 .dashcam-video-shell {
diff --git a/starpilot/system/the_galaxy/assets/components/recordings/dashcam_routes.js b/starpilot/system/the_galaxy/assets/components/recordings/dashcam_routes.js
index 8f426608c..246a8fe11 100644
--- a/starpilot/system/the_galaxy/assets/components/recordings/dashcam_routes.js
+++ b/starpilot/system/the_galaxy/assets/components/recordings/dashcam_routes.js
@@ -205,11 +205,13 @@ async function renameRoute(route) {
       return
     }
 
-    const updatedRoute = normalizeRoute({ ...route, timestamp: newName, isCustomName: true })
+    const payload = await response.json().catch(() => ({}))
+    const savedName = payload.name || newName
+    const updatedRoute = normalizeRoute({ ...route, timestamp: savedName, isCustomName: true })
     replaceRoute(updatedRoute)
     closeDialog(dialog)
     const title = overlay?.querySelector(".media-player-title-text")
-    if (title) title.textContent = newName
+    if (title) title.textContent = savedName
     showSnackbar("Route renamed!")
   }
 }
@@ -301,7 +303,7 @@ async function openOverlay(route) {
             <button class="dashcam-title-rename action-rename" type="button" title="Rename route" aria-label="Rename route"><i class="bi bi-pencil"></i></button>
           </div>
         </div>
-        <button class="dashcam-player-close action-close" type="button" aria-label="Close player">&times;</button>
+        <button class="dashcam-player-close" type="button" aria-label="Close player">&times;</button>
       </header>
       <div class="dashcam-video-shell">
         <video class="dashcam-video active" controls muted playsinline preload="metadata"></video>
@@ -597,7 +599,7 @@ async function openOverlay(route) {
   overlay.addEventListener("click", event => { if (event.target === overlay) closeOverlay() })
   document.addEventListener("keydown", closeOnEscape)
   overlay._closeOnEscape = closeOnEscape
-  overlay.querySelector(".action-close").onclick = closeOverlay
+  overlay.querySelector(".dashcam-player-close").onclick = closeOverlay
   overlay.querySelector(".action-delete").onclick = () => deleteRoute(state.selectedRoute || route)
   overlay.querySelector(".action-rename").onclick = () => renameRoute(state.selectedRoute || route)
 
@@ -876,10 +878,10 @@ export function RouteRecordings() {
                           </div>
                           <div class="dashcam-card-body">
                             <div class="dashcam-route-title-row">
-                              <h3 title="${route.displayName}">${route.displayName}</h3>
-                              ${route.isCustomName ? html`<span class="dashcam-custom-badge" title="Custom name"><i class="bi bi-tag-fill"></i></span>` : ""}
+                              <h3 title="${() => route.displayName}">${() => route.displayName}</h3>
+                              ${() => route.isCustomName ? html`<span class="dashcam-custom-badge" title="Custom name"><i class="bi bi-tag-fill"></i></span>` : ""}
                             </div>
-                            ${route.isCustomName ? html`<p class="dashcam-card-date">${route.displayDate}</p>` : ""}
+                            ${() => route.isCustomName ? html`<p class="dashcam-card-date">${route.displayDate}</p>` : ""}
                             <div class="dashcam-route-meta-pills">
                               <span class="meta-pill duration-pill"><i class="bi bi-clock"></i> ${formatApproxDuration(route.approxDurationSeconds)}</span>
                               <span class="meta-pill segments-pill"><i class="bi bi-collection-play"></i> ${route.segmentCount} seg</span>
@@ -910,10 +912,10 @@ export function RouteRecordings() {
                           </div>
                           <div class="dashcam-route-info">
                             <div class="dashcam-route-title-row">
-                              <h3 class="dashcam-route-title" title="${route.displayName}">${route.displayName}</h3>
-                              ${route.isCustomName ? html`<span class="dashcam-custom-badge" title="Custom name"><i class="bi bi-tag-fill"></i> Custom</span>` : ""}
+                              <h3 class="dashcam-route-title" title="${() => route.displayName}">${() => route.displayName}</h3>
+                              ${() => route.isCustomName ? html`<span class="dashcam-custom-badge" title="Custom name"><i class="bi bi-tag-fill"></i> Custom</span>` : ""}
                             </div>
-                            ${route.isCustomName ? html`<p class="dashcam-route-subdate"><i class="bi bi-calendar3"></i> ${route.displayDate}</p>` : ""}
+                            ${() => route.isCustomName ? html`<p class="dashcam-route-subdate"><i class="bi bi-calendar3"></i> ${route.displayDate}</p>` : ""}
                             <div class="dashcam-route-meta-pills">
                               <span class="meta-pill duration-pill" title="Estimated duration"><i class="bi bi-clock"></i> ${formatApproxDuration(route.approxDurationSeconds)}</span>
                               <span class="meta-pill segments-pill" title="Segments recorded"><i class="bi bi-collection-play"></i> ${route.segmentCount} segment${route.segmentCount === 1 ? "" : "s"}</span>
diff --git a/starpilot/system/the_galaxy/tests/test_dashcam_routes.py b/starpilot/system/the_galaxy/tests/test_dashcam_routes.py
index cb5d9e51d..2f8d4e86f 100644
--- a/starpilot/system/the_galaxy/tests/test_dashcam_routes.py
+++ b/starpilot/system/the_galaxy/tests/test_dashcam_routes.py
@@ -326,6 +326,7 @@ def test_rename_and_reset_keep_logs_and_use_both_reset_urls(monkeypatch, tmp_pat
 
   renamed = client.post("/api/routes/rename", json={"old": ROUTE_NAME, "new": "New name"})
   assert renamed.status_code == 200
+  assert renamed.get_json()["name"] == "New_name"
   assert all((segment / "New_name").exists() for segment in segments)
   assert all((segment / "qlog.zst").read_bytes() == b"log" for segment in segments)
 
diff --git a/starpilot/system/the_galaxy/tests/test_dashcam_routes_helpers.py b/starpilot/system/the_galaxy/tests/test_dashcam_routes_helpers.py
index a64cdfcd3..2c7007570 100644
--- a/starpilot/system/the_galaxy/tests/test_dashcam_routes_helpers.py
+++ b/starpilot/system/the_galaxy/tests/test_dashcam_routes_helpers.py
@@ -14,6 +14,7 @@ import subprocess
 import pytest
 
 HELPERS_PATH = Path(__file__).resolve().parent.parent / "assets" / "components" / "recordings" / "dashcam_routes_helpers.js"
+COMPONENT_PATH = HELPERS_PATH.with_name("dashcam_routes.js")
 
 # node infers ESM from `export` syntax in a bare .js file from 22.7 on, so the helpers
 # need no package.json and stay a normal asset next to the component that imports them.
@@ -69,6 +70,14 @@ def test_helpers_module_is_a_plain_js_asset():
   assert not list(HELPERS_PATH.parent.glob("*.mjs"))
 
 
+def test_route_titles_and_custom_name_badges_are_reactive():
+  source = COMPONENT_PATH.read_text(encoding="utf-8")
+
+  # Both grid and row views must subscribe directly to the renamed route fields.
+  assert source.count('${() => route.displayName}') >= 4
+  assert source.count('${() => route.isCustomName ? html`') >= 4
+
+
 def test_groups_routes_into_today_yesterday_dates_and_unknown():
   groups = evaluate('''
     const routes = [
diff --git a/starpilot/system/the_galaxy/the_galaxy.py b/starpilot/system/the_galaxy/the_galaxy.py
index 6ce9b2171..92771d6a6 100644
--- a/starpilot/system/the_galaxy/the_galaxy.py
+++ b/starpilot/system/the_galaxy/the_galaxy.py
@@ -6644,7 +6644,7 @@ def setup(app):
           return jsonify({"error": f"Error creating new name file: {e}"}), 500
 
     if renamed:
-      return jsonify({"message": "Route renamed successfully!"}), 200
+      return jsonify({"message": "Route renamed successfully!", "name": new_name}), 200
     else:
       return jsonify({"error": "Route not found"}), 404