fix edit driver

src/app.js

@@ -976,6 +976,7 @@ let appVersionPollTimer = null;
 let baselineAppVersion = "";
 let selectedLeaderboardKey = null;
 let selectedGridSessionId = null;
+let selectedDriverEditId = null;
 let quickAddDraft = null;
 let overlaySyncTimer = null;
 let overlayRotationTimer = null;
@@ -2044,6 +2045,7 @@ function renderDrivers() {
   const classOptions = state.classes
     .map((c) => `<option value="${c.id}">${escapeHtml(c.name)}</option>`)
     .join("");
+  const editingDriver = state.drivers.find((driver) => driver.id === selectedDriverEditId) || null;
 
   dom.view.innerHTML = `
     <section class="panel">
@@ -2077,6 +2079,37 @@ function renderDrivers() {
         )}
       </div>
     </section>
+
+    ${
+      editingDriver
+        ? `
+            <div class="modal-overlay" id="driverEditModalOverlay">
+              <div class="modal-card">
+                <div class="panel-header">
+                  <h3>${t("common.edit")}</h3>
+                  <button class="btn" id="driverEditCancel">${t("common.cancel")}</button>
+                </div>
+                <form id="driverEditForm" class="panel-body form-grid cols-3">
+                  <input name="name" required value="${escapeHtml(editingDriver.name)}" placeholder="${t("drivers.name_placeholder")}" />
+                  <select name="classId">
+                    ${state.classes
+                      .map(
+                        (item) =>
+                          `<option value="${item.id}" ${item.id === editingDriver.classId ? "selected" : ""}>${escapeHtml(item.name)}</option>`
+                      )
+                      .join("")}
+                  </select>
+                  <input name="transponder" value="${escapeHtml(editingDriver.transponder || "")}" placeholder="${t("drivers.transponder_placeholder")}" />
+                  <div class="actions-inline">
+                    <button class="btn btn-primary" type="submit">${t("common.save")}</button>
+                    <button class="btn" id="driverEditCancelFooter" type="button">${t("common.cancel")}</button>
+                  </div>
+                </form>
+              </div>
+            </div>
+          `
+        : ""
+    }
   `;
 
   document.getElementById("driverForm")?.addEventListener("submit", (e) => {
@@ -2094,34 +2127,7 @@ function renderDrivers() {
 
   state.drivers.forEach((d) => {
     document.getElementById(`driver-edit-${d.id}`)?.addEventListener("click", () => {
-      const nextName = prompt(t("edit.driver_name"), d.name);
+      selectedDriverEditId = d.id;
-      if (nextName === null) {
-        return;
-      }
-      const classPrompt = state.classes.map((item) => `${item.id}: ${item.name}`).join("\n");
-      const nextClassId = prompt(
-        `${t("edit.driver_class")}\n${classPrompt}`,
-        d.classId || state.classes[0]?.id || ""
-      );
-      if (nextClassId === null) {
-        return;
-      }
-      const nextTp = prompt(t("edit.driver_transponder"), d.transponder || "");
-      if (nextTp === null) {
-        return;
-      }
-      const cleanedName = nextName.trim();
-      const cleanedClassId = nextClassId.trim();
-      if (!cleanedName) {
-        return;
-      }
-      if (cleanedClassId && !state.classes.some((item) => item.id === cleanedClassId)) {
-        return;
-      }
-      d.name = cleanedName;
-      d.classId = cleanedClassId || d.classId;
-      d.transponder = nextTp.trim();
-      saveState();
       renderView();
     });
 
@@ -2134,6 +2140,46 @@ function renderDrivers() {
       renderView();
     });
   });
+
+  document.getElementById("driverEditCancel")?.addEventListener("click", () => {
+    selectedDriverEditId = null;
+    renderView();
+  });
+
+  document.getElementById("driverEditCancelFooter")?.addEventListener("click", () => {
+    selectedDriverEditId = null;
+    renderView();
+  });
+
+  document.getElementById("driverEditModalOverlay")?.addEventListener("click", (event) => {
+    if (event.target?.id === "driverEditModalOverlay") {
+      selectedDriverEditId = null;
+      renderView();
+    }
+  });
+
+  document.getElementById("driverEditForm")?.addEventListener("submit", (event) => {
+    event.preventDefault();
+    if (!editingDriver) {
+      return;
+    }
+    const form = new FormData(event.currentTarget);
+    const cleanedName = String(form.get("name") || "").trim();
+    const cleanedClassId = String(form.get("classId") || "").trim();
+    const cleanedTp = String(form.get("transponder") || "").trim();
+    if (!cleanedName) {
+      return;
+    }
+    if (cleanedClassId && !state.classes.some((item) => item.id === cleanedClassId)) {
+      return;
+    }
+    editingDriver.name = cleanedName;
+    editingDriver.classId = cleanedClassId || editingDriver.classId;
+    editingDriver.transponder = cleanedTp;
+    selectedDriverEditId = null;
+    saveState();
+    renderView();
+  });
 }
 
 function renderCars() {