Fix create trade offer flow and other related bugs

static/css/base.css

@@ -1,3 +1,11 @@
+[x-cloak] { display: none !important; }
+
+select.card-multiselect {
+  height: calc(var(--spacing) * 35);
+  /*background-image: linear-gradient(45deg, #0000 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, #0000 50%); */
+  background-image: none;
+}
+
 .choices.is-disabled .choices__inner,
 .choices.is-disabled .choices__input {
   background-color: var(--color-neutral);

static/js/base.js

@@ -1,20 +1,137 @@
-const $ = x => Array.from(document.querySelectorAll(x));
-const $$ = x => Array.from(document.querySelector(x));
+/* global window, document, localStorage */
 
-document.addEventListener('DOMContentLoaded', function() {
-  const themeToggleBtn = document.getElementById('theme-toggle-btn');
-  if (themeToggleBtn) {
-    themeToggleBtn.addEventListener('click', function() {
-      const root = document.documentElement;
-      if (root.classList.contains("dark")) {
-        root.classList.remove("dark");
-        root.setAttribute("data-theme", "light");
-        localStorage.setItem("theme", "light");
+const $ = selector => Array.from(document.querySelectorAll(selector));
+const $$ = selector => Array.from(document.querySelector(selector));
+
+(() => {
+  "use strict";
+
+  /**
+   * Initialize the theme toggle button functionality.
+   * Toggles between 'dark' and 'light' themes and persists the state in localStorage.
+   */
+  function initThemeToggle() {
+    const themeToggleButton = document.getElementById("theme-toggle-btn");
+    if (!themeToggleButton) return;
+    themeToggleButton.addEventListener("click", () => {
+      const documentRoot = document.documentElement;
+      const isDarkTheme = documentRoot.classList.contains("dark");
+      const newTheme = isDarkTheme ? "light" : "dark";
+
+      if (newTheme === "light") {
+        documentRoot.classList.remove("dark");
       } else {
-        root.classList.add("dark");
-        root.setAttribute("data-theme", "dark");
-        localStorage.setItem("theme", "dark");
+        documentRoot.classList.add("dark");
+      }
+      documentRoot.setAttribute("data-theme", newTheme);
+      localStorage.setItem("theme", newTheme);
+    });
+  }
+
+  /**
+   * Initialize event listeners for forms containing multiselect fields.
+   * When the form is submitted, process each 'card-multiselect' to create hidden inputs.
+   */
+  function initCardMultiselectHandling() {
+    const forms = document.querySelectorAll("form");
+    forms.forEach(form => {
+      if (form.querySelector("select.card-multiselect")) {
+        form.addEventListener("submit", () => {
+          processMultiselectForm(form);
+        });
       }
     });
   }
-});
+
+  /**
+   * Process multiselect fields within a form before submission by:
+   *  - Creating hidden inputs for each selected option with value in 'card_id:quantity' format.
+   *  - Removing the original name attribute to avoid duplicate submissions.
+   *
+   * @param {HTMLFormElement} form - The form element to process.
+   */
+  function processMultiselectForm(form) {
+    const multiselectFields = form.querySelectorAll("select.card-multiselect");
+    multiselectFields.forEach(selectField => {
+      const originalFieldName =
+        selectField.getAttribute("data-original-name") || selectField.getAttribute("name");
+      if (!originalFieldName) return;
+      selectField.setAttribute("data-original-name", originalFieldName);
+
+      // Remove any previously generated hidden inputs for this multiselect.
+      form
+        .querySelectorAll(`input[data-generated-for-card-multiselect="${originalFieldName}"]`)
+        .forEach(input => input.remove());
+
+      // For each selected option, create a hidden input.
+      selectField.querySelectorAll("option:checked").forEach(option => {
+        const cardId = option.value;
+        const quantity = option.getAttribute("data-quantity") || "1";
+        const hiddenInput = document.createElement("input");
+        hiddenInput.type = "hidden";
+        hiddenInput.name = originalFieldName;
+        hiddenInput.value = `${cardId}:${quantity}`;
+        hiddenInput.setAttribute("data-generated-for-card-multiselect", originalFieldName);
+        form.appendChild(hiddenInput);
+      });
+
+      // Prevent the browser from submitting the select field directly.
+      selectField.removeAttribute("name");
+    });
+  }
+
+  /**
+   * Reset stale selections in all card multiselect fields.
+   * This is triggered on the window's 'pageshow' event to clear any lingering selections.
+   */
+  function resetCardMultiselectState() {
+    const multiselectFields = document.querySelectorAll("select.card-multiselect");
+    multiselectFields.forEach(selectField => {
+      // Deselect all options.
+      selectField.querySelectorAll("option").forEach(option => {
+        option.selected = false;
+      });
+
+      // If the select field has an associated Choices.js instance, clear its selection.
+      if (selectField.choicesInstance) {
+        const activeSelections = selectField.choicesInstance.getValue(true);
+        if (activeSelections.length > 0) {
+          selectField.choicesInstance.removeActiveItemsByValue(activeSelections);
+        }
+        selectField.choicesInstance.setValue([]);
+      }
+    });
+  }
+
+  // On DOMContentLoaded, initialize theme toggling and form processing.
+  document.addEventListener("DOMContentLoaded", () => {
+    initThemeToggle();
+    initCardMultiselectHandling();
+  });
+
+  // On pageshow, only reset multiselect state if the page was loaded from bfcache.
+  window.addEventListener("pageshow", function(event) {
+    if (event.persisted) {
+      resetCardMultiselectState();
+    }
+  });
+
+  // Expose tradeOfferCard globally if not already defined.
+  if (!window.tradeOfferCard) {
+    window.tradeOfferCard = function() {
+      return {
+        flipped: false,
+        badgeExpanded: false,
+        acceptanceExpanded: false,
+        /**
+         * Update the badge's expanded state.
+         *
+         * @param {boolean} expanded - The new state of the badge.
+         */
+        setBadge(expanded) {
+          this.badgeExpanded = expanded;
+        },
+      };
+    };
+  }
+})();