Jaar naar Instellingen, instellingen-accordeon, vak toevoegen per tijdvak

frontend/src/pages.jsx

@@ -2179,6 +2179,17 @@ export function RoosterScherm({ mode }) {
     setBewerkBlok(null);
     setToonForm(true);
   }
+  // Direct vanuit een tijdvak in het rooster een vak toevoegen: tijdslot vast,
+  // en het doel alvast op de actieve scope (klas/leerling) zetten.
+  function openNieuwBlokVoorSlot(tijdslotId) {
+    setBewerkBlok(null);
+    const basis = { ...leeg, tijdslot: String(tijdslotId) };
+    if (scopeType === "klas" && scopeId) { basis.doel_type = "groep"; basis.doel = String(scopeId); }
+    else if (scopeType === "leerling" && scopeId) { basis.doel_type = "leerling"; basis.doel = String(scopeId); }
+    setForm(basis);
+    resetNieuweSplit();
+    setToonForm(true);
+  }
   function sluitNieuwBlok() {
     setToonForm(false);
     resetNieuweSplit();
@@ -2471,7 +2482,6 @@ export function RoosterScherm({ mode }) {
             <button className="link small" title="Naar deze week" onClick={() => setMaandag(maandagVan(new Date()))}>vandaag</button>
           </div>
         )}
-        {edit && schooljaar && tab === "week" && <button className="btn primary icon-label" title="Vak toevoegen" onClick={toonForm ? sluitNieuwBlok : openNieuwBlok}>{toonForm ? "×" : "＋"} <span>{toonForm ? "Sluiten" : "Vak"}</span></button>}
         {schooljaar && (edit ? tab === "week" : true) && (
           <button className="btn icon-label weergave-knop" title={weergave === "kolom" ? "Toon dagen onder elkaar" : "Toon dagen als kolommen"} onClick={() => setWeergave(weergave === "kolom" ? "lijst" : "kolom")}>{weergave === "kolom" ? "☰" : "▦"} <span>{weergave === "kolom" ? "Dagen onder elkaar" : "Kolommen"}</span></button>
         )}
@@ -2528,7 +2538,6 @@ export function RoosterScherm({ mode }) {
       {edit && (
         <div className="tabbar no-print">
           <button className={tab === "week" ? "tab on" : "tab"} title="Weekrooster" onClick={() => setTab("week")}><span className="ico">▦</span><span className="tab-tekst">Week</span></button>
-          <button className={tab === "schooljaar" ? "tab on" : "tab"} title="Schooljaar" onClick={() => setTab("schooljaar")}><span className="ico">◷</span><span className="tab-tekst">Jaar</span></button>
           {(blokwizardAan || autoroosterAan) && (
             <div className="tab-dropdown">
               <button className={(tab === "wizard" || tab === "auto") ? "tab on" : "tab"} title="Rooster genereren" onClick={() => setGenOpen((v) => !v)}><span className="ico">✨</span><span className="tab-tekst">Genereren ▾</span></button>
@@ -2696,19 +2705,15 @@ export function RoosterScherm({ mode }) {
                     >
                       <div className="slot-tijd">{t.start_tijd?.slice(0, 5)} {t.naam}</div>
                       {renderSlotBlokken(slotBlokken, iso, kal)}
-                    </div>
+                      {edit && !kal && (
-                  );
+                        <button type="button" className="slot-add no-print" title="Vak toevoegen in dit tijdvak" onClick={() => openNieuwBlokVoorSlot(t.id)}>＋ vak</button>
-                })}
-              </div>
-            );
-          })}
-        </div>
                       )}
-
+                    </div>
-      {tab === "schooljaar" && (
+                  );
-        <div className="instellingen">
+                })}
-          <p className="muted">Maak hier snel een schooljaar aan en beheer de kalender (studiedagen, vrije dagen, vakanties).</p>
+              </div>
-          <SchooljaarPage />
+            );
+          })}
         </div>
       )}
 
@@ -2717,12 +2722,28 @@ export function RoosterScherm({ mode }) {
       {edit && tab === "auto" && autoroosterAan && <AutoRoosterPage />}
 
       {tab === "instellingen" && (
-        <div className="instellingen">
+        <div className="instellingen instellingen-secties">
-          <p className="muted">Bouwstenen van het rooster — beheer ze hier zonder het Rooster te verlaten.</p>
+          <p className="muted">Beheer hier alle bouwstenen van het rooster. Klik een onderdeel open om het te bewerken.</p>
-          <TijdslotenPage />
+          <details className="inst-sectie" open>
-          <ActiviteitenPage />
+            <summary><span className="ico">📅</span> Schooljaar &amp; kalender</summary>
-          <LokalenPage />
+            <div className="inst-body"><p className="muted small">Maak een schooljaar aan en beheer de kalender (studiedagen, vrije dagen, vakanties).</p><SchooljaarPage /></div>
-          <LocatiesPage />
+          </details>
+          <details className="inst-sectie">
+            <summary><span className="ico">🕒</span> Tijdvakken</summary>
+            <div className="inst-body"><p className="muted small">De dag- en tijdindeling waarop vakken geplaatst kunnen worden.</p><TijdslotenPage /></div>
+          </details>
+          <details className="inst-sectie">
+            <summary><span className="ico">📚</span> Vakken &amp; activiteiten</summary>
+            <div className="inst-body"><p className="muted small">De vakken/activiteiten met kleur en icoon.</p><ActiviteitenPage /></div>
+          </details>
+          <details className="inst-sectie">
+            <summary><span className="ico">🚪</span> Lokalen</summary>
+            <div className="inst-body"><p className="muted small">Ruimtes met capaciteit; meetellen in de dubbele-boekingcheck.</p><LokalenPage /></div>
+          </details>
+          <details className="inst-sectie">
+            <summary><span className="ico">📍</span> Locaties</summary>
+            <div className="inst-body"><p className="muted small">Vrije locatie-aanduidingen (bv. gymzaal, zwembad).</p><LocatiesPage /></div>
+          </details>
         </div>
       )}
 

frontend/src/styles.css

@@ -166,6 +166,18 @@ input[type="color"] { padding: 2px; width: 44px; min-width: 44px; height: 38px;
 .slot-cel { border: 1px dashed transparent; border-radius: 8px; padding: 4px; margin-bottom: 8px; transition: background .1s, border-color .1s; }
 .slot-cel.hover { border-color: var(--brand); background: var(--brand-soft); }
 .slot-tijd { font-size: 11px; color: var(--muted); padding: 2px 2px 4px; }
+/* Snel een vak toevoegen direct in een tijdvak */
+.slot-add { width: 100%; margin-top: 4px; border: 1px dashed var(--line); background: transparent; color: var(--muted); border-radius: 8px; padding: 5px; font: inherit; font-size: 12px; cursor: pointer; opacity: .55; transition: opacity .1s, border-color .1s, color .1s, background .1s; }
+.slot-cel:hover .slot-add, .slot-add:focus-visible { opacity: 1; }
+.slot-add:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
+/* Instellingen als overzichtelijke uitklapsecties */
+.instellingen-secties { display: flex; flex-direction: column; gap: 10px; }
+.inst-sectie { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); padding: 0 14px; }
+.inst-sectie > summary { cursor: pointer; font-weight: 600; padding: 12px 0; list-style: none; display: flex; align-items: center; gap: 8px; }
+.inst-sectie > summary::-webkit-details-marker { display: none; }
+.inst-sectie > summary::after { content: "▸"; color: var(--muted); margin-left: auto; }
+.inst-sectie[open] > summary::after { content: "▾"; }
+.inst-body { padding: 0 0 14px; border-top: 1px solid var(--line); margin-top: -2px; padding-top: 12px; }
 
 .rooster-blok { touch-action: none; }
 .rooster-blok.vervallen { opacity: .55; }