From 44d3a3979da2ecf2d590645a57552615c440eaf4 Mon Sep 17 00:00:00 2001
From: Thomas von Deyen <thomas@vondeyen.com>
Date: Fri, 29 Nov 2024 20:12:54 +0100
Subject: [PATCH] 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/
---
 .../components/elements_window.js              | 18 +++++++++++++++++-
 app/views/layouts/alchemy/admin.html.erb       |  4 +++-
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/app/javascript/alchemy_admin/components/elements_window.js b/app/javascript/alchemy_admin/components/elements_window.js
index 510ff89eff..ea9e60fae3 100644
--- a/app/javascript/alchemy_admin/components/elements_window.js
+++ b/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
diff --git a/app/views/layouts/alchemy/admin.html.erb b/app/views/layouts/alchemy/admin.html.erb
index 7559711262..0fe8f3f67f 100644
--- a/app/views/layouts/alchemy/admin.html.erb
+++ b/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>