From 1583c2e892d1465f76a755d2bd72c97a393be20b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Thu, 28 May 2026 11:44:50 +0200
Subject: [PATCH] Replace Meldungen overlay content with sectioned form and
 checkbox save flow

---
 patterns/vsf-list-detailseite.html | 62 ++++++++++++++++++++++++++++--
 1 file changed, 59 insertions(+), 3 deletions(-)

diff --git a/patterns/vsf-list-detailseite.html b/patterns/vsf-list-detailseite.html
index e638d84..4afb8aa 100644
--- a/patterns/vsf-list-detailseite.html
+++ b/patterns/vsf-list-detailseite.html
@@ -166,10 +166,33 @@
 
             <article class="sg-card sg-delete-confirmation-pattern__floating-card" aria-label="Meldungen anpassen" role="dialog" aria-modal="true" aria-labelledby="vsf-meldungen-overlay-title" data-overlay-dialog="meldungen" hidden>
               <div class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__body">
-                <p class="sg-body sg-delete-confirmation-pattern__text" id="vsf-meldungen-overlay-title"><strong>Meldungen anpassen</strong></p>
-                <p class="sg-body sg-delete-confirmation-pattern__text">Passe die Anzeige und Priorisierung der Meldungen an.</p>
+                <p class="sg-body sg-delete-confirmation-pattern__text" id="vsf-meldungen-overlay-title"><strong>Wähle, welche Meldungen angezeigt werden sollen</strong></p>
+                <section class="sg-form-sections-card__chapter" aria-labelledby="vsf-meldungen-kapitel-1">
+                  <h2 id="vsf-meldungen-kapitel-1" class="sg-strong sg-form-sections-card__chapter-title">Meldungen</h2>
+                  <div class="sg-form-sections-card__option-group" aria-label="Meldungsarten">
+                    <label class="sg-checkbox-field-option sg-body" data-component="checkbox-field" data-component-state="inactive-selectable">
+                      <button class="sg-checkbox-field sg-checkbox-field--inactive-selectable" type="button" role="checkbox" aria-checked="false" aria-label="Meldungsart 1" data-vsf-meldungen-checkbox>
+                        <span class="sg-checkbox-field__mark" aria-hidden="true">✓</span>
+                      </button>
+                      <span>Meldungsart 1</span>
+                    </label>
+                    <label class="sg-checkbox-field-option sg-body" data-component="checkbox-field" data-component-state="inactive-selectable">
+                      <button class="sg-checkbox-field sg-checkbox-field--inactive-selectable" type="button" role="checkbox" aria-checked="false" aria-label="Meldungsart 2" data-vsf-meldungen-checkbox>
+                        <span class="sg-checkbox-field__mark" aria-hidden="true">✓</span>
+                      </button>
+                      <span>Meldungsart 2</span>
+                    </label>
+                    <label class="sg-checkbox-field-option sg-body" data-component="checkbox-field" data-component-state="inactive-selectable">
+                      <button class="sg-checkbox-field sg-checkbox-field--inactive-selectable" type="button" role="checkbox" aria-checked="false" aria-label="Meldungsart 3" data-vsf-meldungen-checkbox>
+                        <span class="sg-checkbox-field__mark" aria-hidden="true">✓</span>
+                      </button>
+                      <span>Meldungsart 3</span>
+                    </label>
+                  </div>
+                </section>
                 <div class="sg-delete-confirmation-pattern__actions">
-                  <button class="sg-interaction-element sg-button sg-button--active" type="button" data-overlay-dialog-close>Schließen</button>
+                  <button class="sg-interaction-element sg-button sg-button--active" type="button" data-overlay-dialog-close>Abbrechen</button>
+                  <button class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive" type="button" disabled aria-disabled="true" data-overlay-dialog-close data-vsf-meldungen-save>Speichern</button>
                 </div>
               </div>
             </article>
@@ -425,6 +448,39 @@
       });
     });
 
+    const meldungenSaveButton = document.querySelector('[data-vsf-meldungen-save]');
+    const meldungenCheckboxes = document.querySelectorAll('[data-vsf-meldungen-checkbox]');
+
+    const updateMeldungenSaveState = () => {
+      if (!meldungenSaveButton) {
+        return;
+      }
+      const hasSelection = Array.from(meldungenCheckboxes).some((checkbox) => checkbox.getAttribute('aria-checked') === 'true');
+      meldungenSaveButton.disabled = !hasSelection;
+      meldungenSaveButton.setAttribute('aria-disabled', String(!hasSelection));
+      meldungenSaveButton.classList.toggle('sg-button--process-inactive', !hasSelection);
+    };
+
+    meldungenCheckboxes.forEach((checkbox) => {
+      checkbox.addEventListener('click', () => {
+        if (checkbox.disabled) {
+          return;
+        }
+
+        const option = checkbox.closest('[data-component="checkbox-field"]');
+        const nextState = checkbox.getAttribute('aria-checked') !== 'true';
+        checkbox.setAttribute('aria-checked', String(nextState));
+        checkbox.classList.toggle('sg-form-active', nextState);
+        checkbox.classList.toggle('sg-checkbox-field--inactive-selectable', !nextState);
+        if (option) {
+          option.setAttribute('data-component-state', nextState ? 'active' : 'inactive-selectable');
+        }
+        updateMeldungenSaveState();
+      });
+    });
+
+    updateMeldungenSaveState();
+
     const updatePulldownSelectionState = (demo) => {
       const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
       const selectableOptions = demo.querySelectorAll('[data-pulldown-option]');