From da82a465911e32887732daa379692eb497039c90 Mon Sep 17 00:00:00 2001
From: MarekWo <mwojtaszek@gmail.com>
Date: Sun, 26 Apr 2026 20:18:44 +0200
Subject: [PATCH] fix(regions): use explicit None entry to clear default in
 Region Registry
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace the click-the-selected-radio-again gesture with a top-row
"None — use firmware default" radio, mirroring the per-channel region
picker. Users found the toggle gesture unintuitive; an explicit option
matches the picker pattern they already know.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 app/static/js/app.js    | 30 ++++++++++++++++--------------
 app/templates/base.html |  2 +-
 2 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/app/static/js/app.js b/app/static/js/app.js
index e1e12ab..e345a85 100644
--- a/app/static/js/app.js
+++ b/app/static/js/app.js
@@ -2863,7 +2863,20 @@ function renderRegionsList() {
         listEl.innerHTML = '<div class="text-center text-muted small py-3">No regions defined. Add one below.</div>';
         return;
     }
-    listEl.innerHTML = regions.map(r => {
+    const noDefault = !regions.some(r => r.is_default);
+    const noneRow = `
+        <div class="list-group-item d-flex align-items-center gap-2 py-2">
+            <div class="form-check mb-0">
+                <input class="form-check-input" type="radio" name="regionDefault"
+                       id="regionDefault_none" ${noDefault ? 'checked' : ''}
+                       onchange="clearDefaultRegion()">
+            </div>
+            <div class="flex-grow-1 text-muted">
+                <i class="bi bi-dash-circle"></i> None — use firmware default
+            </div>
+        </div>
+    `;
+    const regionRows = regions.map(r => {
         const isDefault = r.is_default ? 'checked' : '';
         const keyShort = (r.key_hex || '').slice(0, 8) + '…';
         return `
@@ -2871,8 +2884,7 @@ function renderRegionsList() {
                 <div class="form-check mb-0">
                     <input class="form-check-input" type="radio" name="regionDefault"
                            id="regionDefault_${r.id}" ${isDefault}
-                           title="Click again to clear the default"
-                           onclick="handleRegionRadioClick(${r.id}, this)">
+                           onchange="setDefaultRegion(${r.id})">
                 </div>
                 <div class="flex-grow-1">
                     <div><strong>${escapeHtml(r.name)}</strong></div>
@@ -2886,6 +2898,7 @@ function renderRegionsList() {
             </div>
         `;
     }).join('');
+    listEl.innerHTML = noneRow + regionRows;
 }
 
 async function addRegion(name, inputEl) {
@@ -2928,17 +2941,6 @@ async function deleteRegion(id, name) {
     }
 }
 
-function handleRegionRadioClick(id, inputEl) {
-    // Click on the already-selected default clears the default; otherwise sets it.
-    const wasDefault = (window.regionRegistry || []).some(r => r.id === id && r.is_default);
-    if (wasDefault) {
-        inputEl.checked = false;
-        clearDefaultRegion();
-    } else {
-        setDefaultRegion(id);
-    }
-}
-
 async function setDefaultRegion(id) {
     try {
         const resp = await fetch(`/api/regions/${id}/default`, { method: 'POST' });
diff --git a/app/templates/base.html b/app/templates/base.html
index a71a71e..c0a00c0 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -792,7 +792,7 @@
                                 </div>
                             </form>
                             <div class="form-text small">
-                                Tip: pick the default region via the radio button. Click the selected radio again to clear it. The default is also pushed to the firmware so any untagged channel uses it.
+                                Tip: pick the default region via the radio button, or select <em>None</em> to fall back to the firmware default. The chosen region is also pushed to the firmware so any untagged channel uses it.
                             </div>
                         </div>
                     </div>