Persist Elements Window width in session

Makes sure the elements window width is the same across pages.
Uses a cookie, so we can read the value from Rails and put it on
the body tag, so it is immediatly available on page render.
Otherwise we would see the element window resizing on every
page visit. SSR ftw \o/

app/javascript/alchemy_admin/components/elements_window.js

@@ -20,6 +20,7 @@ class ElementsWindow extends HTMLElement {
         ?.trigger("FocusElementEditor.Alchemy")
     }
     SortableElements()
+    this.resize()
   }
 
   collapseAllElements() {
@@ -39,6 +40,7 @@ class ElementsWindow extends HTMLElement {
     this.toggleButton
       .querySelector("alchemy-icon")
       .setAttribute("name", "menu-unfold")
+    this.resize()
   }
 
   hide() {
@@ -52,7 +54,14 @@ class ElementsWindow extends HTMLElement {
   }
 
   resize(width) {
-    document.body.style.setProperty("--elements-window-width", `${width}px`)
+    if (width === undefined) {
+      width = this.widthFromCookie
+    }
+
+    if (width) {
+      document.body.style.setProperty("--elements-window-width", `${width}px`)
+      document.cookie = `alchemy-elements-window-width=${width}; SameSite=Lax; Path=/;`
+    }
   }
 
   get collapseButton() {
@@ -74,6 +83,13 @@ class ElementsWindow extends HTMLElement {
     return this.#turboFrame
   }
 
+  get widthFromCookie() {
+    return document.cookie
+      .split("; ")
+      .find((row) => row.startsWith("alchemy-elements-window-width="))
+      ?.split("=")[1]
+  }
+
   set isDragged(dragged) {
     this.turboFrame.style.transitionProperty = dragged ? "none" : null
     this.turboFrame.style.pointerEvents = dragged ? "none" : null

app/views/layouts/alchemy/admin.html.erb

@@ -31,7 +31,9 @@
     <% end %>
     <%= yield :javascript_includes %>
   </head>
-  <%= content_tag :body, id: 'alchemy', class: alchemy_body_class + ["alchemy-light"] do %>
+  <%= content_tag :body, id: 'alchemy',
+    class: alchemy_body_class + ["alchemy-light"],
+    style: cookies["alchemy-elements-window-width"] && "--elements-window-width: #{cookies["alchemy-elements-window-width"]}px" do %>
     <noscript>
       <h1><%= Alchemy.t(:javascript_disabled_headline) %></h1>
       <p><%= Alchemy.t(:javascript_disabled_text) %></p>