From 7f1ada1d4837ec0d30e45182822632ee238913d9 Mon Sep 17 00:00:00 2001
From: bes-r <27369668+bes-r@users.noreply.github.com>
Date: Thu, 18 Jun 2026 22:58:41 +0200
Subject: [PATCH] =?UTF-8?q?scope-/filterbalk=20vereenvoudigd:=20chips=20+?=
 =?UTF-8?q?=20=C3=A9=C3=A9n=20persoon-keuzelijst?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages.jsx  | 40 ++++++++++++++++++++++++----------------
 frontend/src/styles.css |  8 ++++++--
 2 files changed, 30 insertions(+), 18 deletions(-)

diff --git a/frontend/src/pages.jsx b/frontend/src/pages.jsx
index 7ee59c3..b002420 100644
--- a/frontend/src/pages.jsx
+++ b/frontend/src/pages.jsx
@@ -2478,22 +2478,7 @@ export function RoosterScherm({ mode }) {
 
       {schooljaar && (edit ? tab === "week" : true) && (
         <div className="rooster-balk no-print scope-balk">
-          <label className="veld">Toon
-            <select value={scopeType} onChange={(e) => { setScopeType(e.target.value); setScopeId(""); }}>
-              <option value="alles">Alles</option>
-              <option value="klas">Per klas</option>
-              <option value="leerplein">Per {BOVENGROEP_LABEL_LC}</option>
-              <option value="leerling">Per leerling</option>
-              <option value="personeel">Per personeel</option>
-            </select>
-          </label>
-          {(scopeType === "leerling" || scopeType === "personeel") && (
-            <select value={scopeId} onChange={(e) => setScopeId(e.target.value)}>
-              <option value="">— kies —</option>
-              {scopeOpties.map((o) => <option key={o.id} value={o.id}>{o.naam || o.volledige_naam}</option>)}
-            </select>
-          )}
-          {scopeType !== "alles" && scopeId && <span className="muted small">{zichtbareBlokken.length} blok(ken)</span>}
+          <span className="scope-label">Toon</span>
           {(groepen.length > 0 || leerpleinen.length > 0) && (
             <div className="klas-strip">
               <button type="button" className={scopeType === "alles" ? "chip on" : "chip"} onClick={() => { setScopeType("alles"); setScopeId(""); }}>Alle</button>
@@ -2505,6 +2490,29 @@ export function RoosterScherm({ mode }) {
               ))}
             </div>
           )}
+          <select
+            className={(scopeType === "leerling" || scopeType === "personeel") ? "scope-persoon on" : "scope-persoon"}
+            value={scopeType === "leerling" ? "l" + scopeId : scopeType === "personeel" ? "p" + scopeId : ""}
+            onChange={(e) => {
+              const v = e.target.value;
+              if (!v) { setScopeType("alles"); setScopeId(""); }
+              else if (v[0] === "l") { setScopeType("leerling"); setScopeId(v.slice(1)); }
+              else { setScopeType("personeel"); setScopeId(v.slice(1)); }
+            }}
+          >
+            <option value="">👤 Eén persoon…</option>
+            {leerlingen.length > 0 && (
+              <optgroup label="Leerlingen">
+                {leerlingen.map((l) => <option key={"l" + l.id} value={"l" + l.id}>{l.volledige_naam}</option>)}
+              </optgroup>
+            )}
+            {medewerkers.length > 0 && (
+              <optgroup label="Personeel">
+                {medewerkers.map((m) => <option key={"p" + m.id} value={"p" + m.id}>{m.volledige_naam}</option>)}
+              </optgroup>
+            )}
+          </select>
+          {scopeType !== "alles" && scopeId && <span className="muted small scope-aantal">{zichtbareBlokken.length} blok(ken)</span>}
         </div>
       )}
 
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 8ca111e..bcd4f24 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -214,7 +214,7 @@ input[type="color"] { padding: 2px; width: 44px; min-width: 44px; height: 38px;
 .split-vak-kop { display: flex; align-items: center; gap: 5px; }
 .split-vak-kop strong { min-width: 0; flex: 1; font-size: 12px; }
 .split-vak-meta { display: flex; flex-direction: column; gap: 1px; color: var(--muted); font-size: 11px; margin-top: 2px; }
-.klas-strip { display: flex; flex-wrap: nowrap; gap: 6px; flex-basis: 100%; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
+.klas-strip { display: flex; flex-wrap: nowrap; gap: 6px; flex: 1 1 auto; min-width: 0; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
 .klas-strip .chip { white-space: nowrap; flex: 0 0 auto; }
 
 /* --- Blok-bewerker --- */
@@ -271,7 +271,11 @@ input[type="color"] { padding: 2px; width: 44px; min-width: 44px; height: 38px;
 .modal-hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0 12px; }
 .rooster-blok.klikbaar { cursor: pointer; }
 .rooster-blok.klikbaar:hover { box-shadow: 0 0 0 2px var(--brand-soft); }
-.scope-balk { margin-top: -6px; }
+.scope-balk { margin-top: -6px; align-items: center; gap: 8px; }
+.scope-label { color: var(--muted); font-size: 14px; flex: 0 0 auto; }
+.scope-persoon { flex: 0 0 auto; max-width: 200px; }
+.scope-persoon.on { border-color: var(--brand); color: var(--brand); font-weight: 600; }
+.scope-aantal { flex: 0 0 auto; white-space: nowrap; }
 
 /* --- Afdrukken --- */
 .print-knop { margin-left: auto; background: #fff; }