Move create-list action to save

patterns/delete-confirmation-overlay.html

@@ -180,11 +180,6 @@
                 </section>
               </div>
 
-              <footer class="sg-form-sections-card__actions-segment" data-pattern-part="form-actions-segment">
-                <div class="sg-form-sections-card__actions" data-pattern-part="form-actions">
-                  <button class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive sg-form-sections-card__action" type="submit" disabled aria-disabled="true">Liste anlegen</button>
-                </div>
-              </footer>
             </form>
           </div>
         </div>
@@ -205,13 +200,13 @@
       const confirmationSubmitButton = stage.querySelector('[data-overlay-confirmation-submit]');
       const expectedConfirmationValue = stage.dataset.overlayConfirmationValue ?? '';
       const overlayListButtons = Array.from(stage.querySelectorAll('[data-overlay-list-toggle]'));
+      const overlayList = stage.querySelector('.sg-delete-confirmation-pattern__list');
       const createListForm = stage.querySelector('[data-create-list-form]');
       const createListFormToggle = stage.querySelector('[data-create-list-form-toggle]');
       const createListTitle = stage.querySelector('[data-create-list-title]');
       const createListSegment = stage.querySelector('[data-create-list-form]');
       const createListNameInput = stage.querySelector('[data-create-list-form] input[aria-label="Name"]');
       const createListDescriptionInput = stage.querySelector('[data-create-list-form] textarea[aria-label="Beschreibung"]');
-      const createListSubmitButton = stage.querySelector('[data-create-list-form] button[type="submit"]');
       const isAddToListOverlay = stage.dataset.pattern === 'add-to-list-overlay';
       const committedListIds = new Set(
         (stage.dataset.overlaySelectedLists ?? '')
@@ -220,7 +215,6 @@
           .filter(Boolean)
       );
       let draftListIds = new Set(committedListIds);
-      let updateCreateListButtonState = () => {};
       let resetAddToListDraftState = () => {};
 
       const closeStageDialogs = ({ resetAddToListDraft = false } = {}) => {
@@ -242,23 +236,7 @@
         });
       };
 
-      if (confirmationInput && confirmationSubmitButton) {
+      const bindOverlayListButton = (button) => {
-        const updateConfirmationState = () => {
-          const isValid = confirmationInput.value === expectedConfirmationValue;
-
-          confirmationSubmitButton.disabled = !isValid;
-          confirmationSubmitButton.setAttribute('aria-disabled', String(!isValid));
-          confirmationSubmitButton.classList.toggle('sg-button--process-inactive', !isValid);
-        };
-
-        confirmationInput.addEventListener('input', updateConfirmationState);
-        updateConfirmationState();
-      }
-
-      if (overlayListButtons.length > 0) {
-        syncOverlayListState();
-
-        overlayListButtons.forEach((button) => {
         button.addEventListener('click', (event) => {
           event.preventDefault();
 
@@ -275,30 +253,60 @@
 
           syncOverlayListState();
         });
-        });
+      };
+
+      const appendCreatedListButton = (title) => {
+        if (!overlayList) {
+          return null;
+        }
+
+        const listId = `created-${Date.now()}`;
+        const listItem = document.createElement('li');
+        listItem.className = 'sg-delete-confirmation-pattern__list-item';
+
+        const button = document.createElement('button');
+        button.type = 'button';
+        button.className = 'sg-interaction-element sg-button sg-delete-confirmation-pattern__list-button';
+        button.dataset.overlayListToggle = '';
+        button.dataset.overlayListId = listId;
+        button.dataset.selected = 'true';
+        button.setAttribute('aria-pressed', 'true');
+
+        const icon = document.createElement('span');
+        icon.className = 'sg-delete-confirmation-pattern__list-icon';
+        icon.setAttribute('aria-hidden', 'true');
+
+        const label = document.createElement('span');
+        label.className = 'sg-delete-confirmation-pattern__list-label';
+        label.textContent = title;
+
+        button.append(icon, label);
+        listItem.appendChild(button);
+        overlayList.appendChild(listItem);
+        overlayListButtons.push(button);
+        bindOverlayListButton(button);
+
+        return listId;
+      };
+
+      if (confirmationInput && confirmationSubmitButton) {
+        const updateConfirmationState = () => {
+          const isValid = confirmationInput.value === expectedConfirmationValue;
+
+          confirmationSubmitButton.disabled = !isValid;
+          confirmationSubmitButton.setAttribute('aria-disabled', String(!isValid));
+          confirmationSubmitButton.classList.toggle('sg-button--process-inactive', !isValid);
+        };
+
+        confirmationInput.addEventListener('input', updateConfirmationState);
+        updateConfirmationState();
+      }
+
+      if (overlayListButtons.length > 0) {
+        syncOverlayListState();
       }
 
       if (createListForm && createListFormToggle) {
-        updateCreateListButtonState = () => {
-          if (!createListSubmitButton) {
-            return;
-          }
-
-          const hasName = Boolean(createListNameInput?.value.trim());
-          const hasDescription = Boolean(createListDescriptionInput?.value.trim());
-          const isActive = hasName || hasDescription;
-
-          createListSubmitButton.disabled = !isActive;
-          createListSubmitButton.setAttribute('aria-disabled', String(!isActive));
-          createListSubmitButton.classList.toggle('sg-button--process-inactive', !isActive);
-        };
-
-        createListNameInput?.addEventListener('input', updateCreateListButtonState);
-        createListDescriptionInput?.addEventListener('input', updateCreateListButtonState);
-        createListForm.addEventListener('submit', (event) => {
-          event.preventDefault();
-        });
-
         resetAddToListDraftState = () => {
           draftListIds = new Set(committedListIds);
           syncOverlayListState();
@@ -319,11 +327,8 @@
           if (createListDescriptionInput) {
             createListDescriptionInput.value = '';
           }
-          updateCreateListButtonState();
         };
 
-        updateCreateListButtonState();
-
         createListFormToggle.addEventListener('click', (event) => {
           event.preventDefault();
           if (createListSegment) {
@@ -334,7 +339,6 @@
           createListFormToggle.classList.add('sg-button--inactive');
           createListFormToggle.disabled = true;
           createListFormToggle.setAttribute('aria-disabled', 'true');
-          updateCreateListButtonState();
         });
       }
 
@@ -388,6 +392,15 @@
         button.addEventListener('click', (event) => {
           event.preventDefault();
           if (isAddToListOverlay) {
+            const createdListTitle = createListNameInput?.value.trim() ?? '';
+            if (createdListTitle) {
+              const createdListId = appendCreatedListButton(createdListTitle);
+              if (createdListId) {
+                draftListIds.add(createdListId);
+                committedListIds.add(createdListId);
+              }
+            }
+
             committedListIds.clear();
             draftListIds.forEach((value) => committedListIds.add(value));
             stage.dataset.overlaySelectedLists = Array.from(committedListIds).join(',');