From 30561c44de89aebc5cba8f53211847660dbde42a Mon Sep 17 00:00:00 2001
From: perco <perco@percoNAS.home>
Date: Tue, 2 Jun 2026 22:41:34 +0200
Subject: [PATCH] Improve whitelist UX: inline label edit and label prompt from
 stats

Whitelist page: each entry now shows an editable label field inline
(uses INSERT OR REPLACE so it acts as update). Stats page: the
whitelist button expands a small dropdown with a label input before
confirming.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/templates/stats.html     | 20 +++++++++++++++-----
 app/templates/whitelist.html | 16 +++++++++++++---
 2 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/app/templates/stats.html b/app/templates/stats.html
index 33c350a..0c239d0 100644
--- a/app/templates/stats.html
+++ b/app/templates/stats.html
@@ -70,11 +70,21 @@
                 <button type="submit" class="text-xs text-red-400 hover:text-red-300 px-2 py-1 rounded border border-red-900 hover:border-red-700">✕ Retirer</button>
               </form>
               {% else %}
-              <form action="/whitelist/add" method="post" class="inline">
-                <input type="hidden" name="plate" value="{{ row.plate }}">
-                <input type="hidden" name="back" value="/stats">
-                <button type="submit" class="text-xs text-slate-400 hover:text-green-400 px-2 py-1 rounded border border-slate-700 hover:border-green-700">🛡 Whitelister</button>
-              </form>
+              <details class="inline-block text-left">
+                <summary class="text-xs text-slate-400 hover:text-green-400 px-2 py-1 rounded border border-slate-700 hover:border-green-700 cursor-pointer list-none">🛡 Whitelister</summary>
+                <div class="absolute z-10 mt-1 p-3 rounded-lg shadow-xl" style="background:#1e293b;border:1px solid #334155;min-width:220px;">
+                  <form action="/whitelist/add" method="post" class="space-y-2">
+                    <input type="hidden" name="plate" value="{{ row.plate }}">
+                    <input type="hidden" name="back" value="/stats">
+                    <div class="text-xs text-slate-400 mb-1">Libellé pour <strong class="text-green-400">{{ row.plate }}</strong></div>
+                    <input type="text" name="label" placeholder="Ex: Ma voiture"
+                           class="w-full text-sm"
+                           style="background:#0f172a;border:1px solid #475569;color:#e2e8f0;border-radius:6px;padding:5px 8px;">
+                    <button type="submit" class="w-full text-xs py-1.5 rounded"
+                            style="background:#166534;color:#4ade80;border:1px solid #16a34a;">✓ Confirmer</button>
+                  </form>
+                </div>
+              </details>
               {% endif %}
             </td>
           </tr>
diff --git a/app/templates/whitelist.html b/app/templates/whitelist.html
index 028cf35..d541af6 100644
--- a/app/templates/whitelist.html
+++ b/app/templates/whitelist.html
@@ -57,12 +57,22 @@
         </thead>
         <tbody>
           {% for e in entries %}
-          <tr class="border-b border-slate-800 hover:bg-slate-800/40">
+          <tr class="border-b border-slate-700">
             <td class="px-4 py-3">
               <span class="plate font-bold px-3 py-1 rounded text-sm" style="background:#14532d;color:#4ade80;border:1px solid #16a34a;">{{ e.plate }}</span>
             </td>
-            <td class="px-4 py-3 text-slate-300">{{ e.label or '—' }}</td>
-            <td class="px-4 py-3 text-slate-500 text-xs hidden sm:table-cell">{{ e.added_str }}</td>
+            <td class="px-4 py-3" colspan="2">
+              <form action="/whitelist/add" method="post" class="flex gap-2 items-center flex-wrap">
+                <input type="hidden" name="plate" value="{{ e.plate }}">
+                <input type="hidden" name="back" value="/whitelist">
+                <input type="text" name="label" value="{{ e.label or '' }}" placeholder="Libellé…"
+                       class="flex-1 text-sm font-medium"
+                       style="min-width:120px;background:#0f172a;border:1px solid #475569;color:#e2e8f0;border-radius:6px;padding:4px 8px;">
+                <button type="submit" class="text-xs px-3 py-1 rounded whitespace-nowrap"
+                        style="background:#1e3a5f;color:#60a5fa;border:1px solid #2563eb;">✓ Sauvegarder</button>
+              </form>
+            </td>
+            <td class="px-4 py-3 text-slate-500 text-xs hidden sm:table-cell whitespace-nowrap">{{ e.added_str }}</td>
             <td class="px-4 py-3 text-right">
               <form action="/whitelist/remove/{{ e.plate }}" method="post" class="inline"
                     onsubmit="return confirm('Retirer {{ e.plate }} de la liste blanche ?')">