feat: guess what, more changes

frontend/src/js/autosize.js

@@ -1,11 +1,3 @@
-document.addEventListener("input", function (e) {
-    // Check if the element that triggered the input event is a <textarea>
-    if (e.target.tagName.toLowerCase() === "textarea") {
+import autosize from "autosize/dist/autosize";
 
-        // Reset height to 'auto' to allow the textarea to shrink
-        e.target.style.height = "auto";
-
-        // Set the height to its scrollHeight (the full height of the content)
-        e.target.style.height = (e.target.scrollHeight + 5) + "px";
-    }
-}, false);
+window.autosize = autosize;

frontend/src/js/bootstrap.js

@@ -24,4 +24,4 @@ function initiateToasts() {
 
 document.addEventListener('DOMContentLoaded', initiateToasts, false);
 document.addEventListener('htmx:afterSwap', initiateToasts, false);
-initiateToasts();
+initiateToasts();

frontend/src/js/htmx.js

@@ -2,6 +2,8 @@ import _hyperscript from 'hyperscript.org/dist/_hyperscript.min';
 import './_htmx.js';
 import Alpine from "alpinejs";
 import mask from '@alpinejs/mask';
+import collapse from '@alpinejs/collapse'
+import Autosize from '@marcreichel/alpine-autosize';
 import {create, all} from 'mathjs';
 
 window.Alpine = Alpine;
@@ -15,9 +17,15 @@ window.math = create(all, {
 });
 
 Alpine.plugin(mask);
+Alpine.plugin(collapse);
+Alpine.plugin(Autosize);
 Alpine.start();
 _hyperscript.browserInit();
 
+document.body.addEventListener('htmx:afterSettle', function (evt) {
+    Alpine.initTree(evt.detail.elt);
+});
+
 
 const successAudio = new Audio("/static/sounds/success.mp3");
 const popAudio = new Audio("/static/sounds/pop.mp3");

frontend/src/js/select.js

@@ -13,6 +13,7 @@ window.TomSelect = function createDynamicTomSelect(element) {
         // Extract 'create' option from data attribute
         create: element.dataset.create === 'true',
         copyClassesToDropdown: true,
+        loadingClass: "ts-loading",
         allowEmptyOption: element.dataset.allowEmptyOption === 'true',
         render: {
             no_results: function () {
@@ -23,19 +24,14 @@ window.TomSelect = function createDynamicTomSelect(element) {
             },
         },
 
-        onDropdownOpen: function () {
-            // Move dropdown to body to escape stacking context issues
-            document.body.appendChild(this.dropdown);
-
-
+        onInitialize: function () {
             this.popper = Popper.createPopper(this.control, this.dropdown, {
                 placement: "bottom-start",
-                strategy: "fixed",
                 modifiers: [
                     {
                         name: "sameWidth",
                         enabled: true,
-                        fn: ({ state }) => {
+                        fn: ({state}) => {
                             state.styles.popper.width = `${state.rects.reference.width}px`;
                         },
                         phase: "beforeWrite",
@@ -47,21 +43,13 @@ window.TomSelect = function createDynamicTomSelect(element) {
                             fallbackPlacements: ['top-start'],
                         },
                     },
-                    {
-                        name: 'preventOverflow',
-                        options: {
-                            boundary: 'viewport',
-                            padding: 8,
-                        },
-                    },
                 ]
 
             });
 
         },
-        onDropdownClose: function () {
-            this.popper.destroy();
-            this.dropdown.remove();
+        onDropdownOpen: function () {
+            this.popper.update();
         }
     };