From 6a3c29b5c3517514211d3cbf3c59c12b501e464e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Tue, 16 Jun 2026 08:39:41 +0200
Subject: [PATCH] Show duplicate list name validation

---
 patterns/delete-confirmation-overlay.html | 52 ++++++++++++++++++++---
 1 file changed, 45 insertions(+), 7 deletions(-)

diff --git a/patterns/delete-confirmation-overlay.html b/patterns/delete-confirmation-overlay.html
index 2100b90..d840706 100644
--- a/patterns/delete-confirmation-overlay.html
+++ b/patterns/delete-confirmation-overlay.html
@@ -157,13 +157,17 @@
                   <div class="sg-form-sections-card__field-group">
                     <label class="sg-labeled-input-row">
                       <span class="sg-label">Name</span>
-                      <input
-                        class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable"
-                        type="text"
-                        placeholder="Name eingeben"
-                        aria-label="Name"
-                        maxlength="80"
-                      >
+                      <span class="sg-input-validation-stack">
+                        <input
+                          class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable"
+                          type="text"
+                          placeholder="Name eingeben"
+                          aria-label="Name"
+                          maxlength="80"
+                          aria-describedby="create-list-name-error"
+                        >
+                        <span class="sg-form-validation-text" id="create-list-name-error" data-create-list-name-error hidden>Eine Liste mit diesem Namen existiert bereits.</span>
+                      </span>
                     </label>
 
                     <label class="sg-labeled-input-row">
@@ -206,6 +210,7 @@
       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 createListNameError = stage.querySelector('[data-create-list-name-error]');
       const createListDescriptionInput = stage.querySelector('[data-create-list-form] textarea[aria-label="Beschreibung"]');
       const isAddToListOverlay = stage.dataset.pattern === 'add-to-list-overlay';
       const committedListIds = new Set(
@@ -289,6 +294,20 @@
         return listId;
       };
 
+      const setCreateListNameErrorState = (isInvalid) => {
+        if (!createListNameInput || !createListNameError) {
+          return;
+        }
+
+        createListNameInput.setAttribute('aria-invalid', String(isInvalid));
+        createListNameError.hidden = !isInvalid;
+        if (!isInvalid) {
+          createListNameInput.removeAttribute('aria-describedby');
+        } else {
+          createListNameInput.setAttribute('aria-describedby', 'create-list-name-error');
+        }
+      };
+
       if (confirmationInput && confirmationSubmitButton) {
         const updateConfirmationState = () => {
           const isValid = confirmationInput.value === expectedConfirmationValue;
@@ -310,6 +329,7 @@
         resetAddToListDraftState = () => {
           draftListIds = new Set(committedListIds);
           syncOverlayListState();
+          setCreateListNameErrorState(false);
 
           if (createListSegment) {
             createListSegment.hidden = true;
@@ -331,6 +351,7 @@
 
         createListFormToggle.addEventListener('click', (event) => {
           event.preventDefault();
+          setCreateListNameErrorState(false);
           if (createListSegment) {
             createListSegment.hidden = false;
           }
@@ -393,6 +414,23 @@
           event.preventDefault();
           if (isAddToListOverlay) {
             const createdListTitle = createListNameInput?.value.trim() ?? '';
+            const existingListNames = new Set(
+              Array.from(stage.querySelectorAll('.sg-delete-confirmation-pattern__list-label'))
+                .map((label) => label.textContent?.trim().toLowerCase())
+                .filter(Boolean)
+            );
+
+            if (!createdListTitle) {
+              setCreateListNameErrorState(true);
+              return;
+            }
+
+            if (existingListNames.has(createdListTitle.toLowerCase())) {
+              setCreateListNameErrorState(true);
+              return;
+            }
+
+            setCreateListNameErrorState(false);
             if (createdListTitle) {
               const createdListId = appendCreatedListButton(createdListTitle);
               if (createdListId) {