Resizable elements window

Allows to drag the divider between the preview and
elements windows in order to resize the elements window.

This is very helpful, if the elements window is too narrow when
lots of nested elements exist.

app/javascript/alchemy_admin/components/elements_window.js

@@ -2,6 +2,7 @@ import SortableElements from "alchemy_admin/sortable_elements"
 
 class ElementsWindow extends HTMLElement {
   #visible = true
+  #turboFrame = null
 
   constructor() {
     super()
@@ -42,13 +43,18 @@ class ElementsWindow extends HTMLElement {
 
   hide() {
     document.body.classList.remove("elements-window-visible")
+    document.body.style.removeProperty("--elements-window-width")
     this.#visible = false
     this.toggleButton.closest("sl-tooltip").content = Alchemy.t("Show elements")
     this.toggleButton
       .querySelector("alchemy-icon")
       .setAttribute("name", "menu-fold")
   }
 
+  resize(width) {
+    document.body.style.setProperty("--elements-window-width", `${width}px`)
+  }
+
   get collapseButton() {
     return this.querySelector("#collapse-all-elements-button")
   }
@@ -61,6 +67,18 @@ class ElementsWindow extends HTMLElement {
     return document.getElementById("alchemy_preview_window")
   }
 
+  get turboFrame() {
+    if (!this.#turboFrame) {
+      this.#turboFrame = this.closest("turbo-frame")
+    }
+    return this.#turboFrame
+  }
+
+  set isDragged(dragged) {
+    this.turboFrame.style.transitionProperty = dragged ? "none" : null
+    this.turboFrame.style.pointerEvents = dragged ? "none" : null
+  }
+
   #attachEvents() {
     this.collapseButton?.addEventListener("click", () => {
       this.collapseAllElements()