From 111e48b044d1deba8cb432239b08f81e29abec86 Mon Sep 17 00:00:00 2001
From: Ramon <dev@ramonbesselink.nl>
Date: Sat, 18 Jul 2026 04:22:17 +0200
Subject: [PATCH] fix: toevoegformulier duidelijk anders dan een
 bestaande-gebruikersrij (v0.4.06-beta)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Een uitgeklapt "＋ ..."-formulier (nieuwe schoolbeheerder/leerkracht/leerling/
school/klas) zag er in het beheerpaneel bijna hetzelfde uit als het
bewerkpaneel van een bestaande gebruiker - beide gewoon een rij velden
zonder duidelijk onderscheid.

- .am-add krijgt nu een eigen kader (accentkleur, stippellijn) i.p.v. de
  neutrale achtergrond van een gebruikersrij
- het formulier toont bovenaan een titel die herhaalt wát je toevoegt (bv.
  "LEERLING"), ook zodra de knoptekst erboven uit beeld is
- de dichtgeklapte "＋ ..."-knop zelf krijgt ook de accentkleur, zodat
  collapsed en uitgeklapt dezelfde "dit is toevoegen"-taal spreken
- geverifieerd in een echte headless Chromium: duidelijk visueel onderscheid
  tussen een toevoegformulier en een echte gebruikersrij
---
 VERSION              |  2 +-
 public/css/teach.css | 18 +++++++++++++++---
 public/js/admin.js   |  6 ++++++
 public/js/core.js    |  2 +-
 4 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/VERSION b/VERSION
index b2f381e..43f08c8 100644
--- a/VERSION
+++ b/VERSION
@@ -1 +1 @@
-0.4.05-beta
+0.4.06-beta
diff --git a/public/css/teach.css b/public/css/teach.css
index 29589a8..7d3c1e7 100644
--- a/public/css/teach.css
+++ b/public/css/teach.css
@@ -1276,7 +1276,19 @@
 }
 .am-schoolbar-lbl{font-size:16px;}
 .am-schoolbar .am-sel{flex:1; min-width:0;}
-.am-add{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:8px 0;}
+/* een uitgeklapt toevoegformulier moet nooit op een bestaande-gebruikersrij
+   lijken: duidelijk eigen kader (accentkleur, stippellijn) i.p.v. de neutrale
+   achtergrond van .am-row/.am-row-tools, plus een titel die herhaalt wát je
+   aan het toevoegen bent zodra de knoptekst zelf uit beeld is. */
+.am-add{
+  display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:8px 0;
+  background:var(--accent-soft); border:1.5px dashed var(--accent);
+  border-radius:var(--radius); padding:10px;
+}
+.am-add-title{
+  flex:1 1 100%; font-weight:800; font-size:12.5px; color:var(--accent-ink);
+  text-transform:uppercase; letter-spacing:.4px;
+}
 .am-inp,.am-sel,.am-pw{
   border:1px solid var(--line); border-radius:var(--radius); height:var(--control-h);
   padding:0 11px; font:inherit; font-size:14px; outline:none;
@@ -1936,8 +1948,8 @@ body.dark .world-fact{background:#1d3b2a;color:#a9e5b7}body.dark .world-fact .wo
 #settingsModal .am-h3{font-size:12px; letter-spacing:.5px;}
 #settingsModal .am-field-lbl{font-size:10px; letter-spacing:.5px;}
 #settingsModal .am-add{border-radius:var(--radius-s);}
-#settingsModal .am-add-wrap > .tbtn{border-style:dashed; color:var(--muted); font-weight:550;}
-#settingsModal .am-add-wrap > .tbtn:hover{color:var(--ink);}
+#settingsModal .am-add-wrap > .tbtn{border-style:dashed; border-color:var(--accent); color:var(--accent-ink); font-weight:550;}
+#settingsModal .am-add-wrap > .tbtn:hover{color:var(--ink); background:var(--accent-soft);}
 /* weergave-sectie: vlakke segmentknoppen */
 #settingsModal .seg{border:1px solid var(--line); border-radius:var(--radius-s); background:var(--surface); padding:2px; box-shadow:none;}
 #settingsModal .seg button{border-radius:5px; box-shadow:none; font-size:12.5px;}
diff --git a/public/js/admin.js b/public/js/admin.js
index 6d63607..0742762 100644
--- a/public/js/admin.js
+++ b/public/js/admin.js
@@ -615,6 +615,10 @@
 
     const f = h("div","am-add");
     f.style.display = "none";
+    /* het formulier zelf herhaalt wat je aan het toevoegen bent, zodat het
+       nooit met een bestaande-gebruikersrij te verwarren is zodra de
+       knoptekst erboven uit beeld is (zie ook .am-add's eigen kader in css) */
+    f.appendChild(h("div","am-add-title", label));
     const name = h("input","am-inp");
     name.placeholder = T("amUserPh");
     name.addEventListener("keydown", ev=>ev.stopPropagation());
@@ -862,6 +866,7 @@
     wrap.appendChild(toggle);
     const f = h("div","am-add");
     f.style.display = "none";
+    f.appendChild(h("div","am-add-title", T("amNewSchool")));
     const inp = h("input","am-inp");
     inp.placeholder = T("amSchoolNamePh");
     inp.maxLength = 80;
@@ -956,6 +961,7 @@
     }
     if(canResetPw){
       const f = h("div","am-add");
+      f.appendChild(h("div","am-add-title", T("amNewClass")));
       const inp = h("input","am-inp");
       inp.placeholder = T("amClassNamePh");
       inp.maxLength = 80;
diff --git a/public/js/core.js b/public/js/core.js
index 6614e6c..a2fba94 100644
--- a/public/js/core.js
+++ b/public/js/core.js
@@ -2,7 +2,7 @@
 "use strict";
 /* version — shown until /api/version resolves (or if the fetch fails, e.g. offline).
    Kept in sync by hand with the VERSION file at the repo root on every release. */
-const VERSION = "0.4.05-beta";
+const VERSION = "0.4.06-beta";
 (function(){
   const tag = document.getElementById("verTag");
   tag.textContent = "v"+VERSION;