Show duplicate list name validation

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>
+                      <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) {