Centralize editable card visibility toggle

public/assets/styles.portal.css

@@ -438,10 +438,6 @@ body.sg-lager-mobile-detail-open > :not([data-lager-mobile-detail-host]) {
   gap: var(--spacing-small);
 }
 
-.market-checklist-card--collapsed [data-shared-editable-card-read] {
-  display: none;
-}
-
 .market-checklist-item,
 .market-checklist-edit-item {
   display: flex;

public/scripts/shared-editable-action-card.js

@@ -6,6 +6,35 @@
 
   const getCard = (element) => element.closest(cardSelector);
 
+  const setToggleEnabled = (card, enabled) => {
+    const toggle = card?.querySelector('[data-shared-editable-card-toggle]');
+    if (!toggle) {
+      return;
+    }
+    toggle.disabled = !enabled;
+    toggle.setAttribute('aria-disabled', String(!enabled));
+    toggle.classList.toggle('sg-button--inactive', !enabled);
+  };
+
+  const setVisibility = (card, visible) => {
+    if (!card || !card.hasAttribute('data-shared-editable-card-collapsible')) {
+      return;
+    }
+    const readView = card.querySelector('[data-shared-editable-card-read]');
+    const toggle = card.querySelector('[data-shared-editable-card-toggle]');
+    card.dataset.sharedEditableCardVisible = String(visible);
+    card.classList.toggle('shared-editable-action-card--collapsed', !visible);
+    if (readView && card.querySelector('[data-shared-editable-card-form]')?.hidden !== false) {
+      readView.hidden = !visible;
+    }
+    if (toggle) {
+      toggle.textContent = visible ? 'Verbergen' : 'Anzeigen';
+      toggle.setAttribute('aria-expanded', String(visible));
+    }
+  };
+
+  const isVisible = (card) => card?.dataset.sharedEditableCardVisible === 'true';
+
   const getScrollContainer = (element) => {
     let candidate = element?.parentElement || null;
 
@@ -66,6 +95,15 @@
     const editView = card.querySelector('[data-shared-editable-card-form]');
     const editButtons = card.querySelectorAll('[data-shared-editable-card-edit]');
 
+    if (card.hasAttribute('data-shared-editable-card-collapsible')) {
+      if (enabled) {
+        setVisibility(card, true);
+      } else if (!card.dataset.sharedEditableCardVisible) {
+        setVisibility(card, !card.hasAttribute('data-shared-editable-card-collapsed'));
+      }
+      setToggleEnabled(card, !enabled);
+    }
+
     if (readView) {
       readView.hidden = enabled;
     }
@@ -77,6 +115,10 @@
       editButton.setAttribute('aria-disabled', String(enabled));
       editButton.classList.toggle('sg-button--inactive', enabled);
     });
+
+    if (card.hasAttribute('data-shared-editable-card-collapsible') && enabled && readView) {
+      readView.hidden = true;
+    }
   };
 
   const resetDeleteConfirmation = (card) => {
@@ -140,6 +182,16 @@
     root.dataset.sharedEditableActionCardsInitialized = 'true';
     root.querySelectorAll(cardSelector).forEach((card) => setEditMode(card, false));
     root.addEventListener('click', (event) => {
+      const toggle = event.target.closest('[data-shared-editable-card-toggle]');
+      if (toggle && root.contains(toggle)) {
+        const card = getCard(toggle);
+        if (card?.querySelector('[data-shared-editable-card-form]')?.hidden === false) {
+          return;
+        }
+        setVisibility(card, !isVisible(card));
+        return;
+      }
+
       const edit = event.target.closest('[data-shared-editable-card-edit]');
       if (edit && root.contains(edit)) {
         const card = getCard(edit);
@@ -185,5 +237,5 @@
     });
   };
 
-  window.SharedEditableActionCard = { init, resetDeleteConfirmation, setEditMode };
+  window.SharedEditableActionCard = { init, resetDeleteConfirmation, setEditMode, setToggleEnabled, setVisibility, isVisible };
 }());