Fix page 'scroll to element' behaviour when URL hash is present

app/components/lookbook/ui/app/router/router.js

@@ -37,12 +37,14 @@ export default AlpineComponent("router", (sseEndpoint = null) => {
     },
 
     async loadPage(url, updateHistory = true) {
+      const [urlPath, urlHash] = url.toString().split("#");
       this.$dispatch("page-load:start");
-      const result = await this.updateDOM(url, "main", {
+      const result = await this.updateDOM(urlPath, "main", {
         headers: { "X-Lookbook-Frame": "main" },
       });
       if (updateHistory) {
-        history.pushState({}, "", result.url);
+        const fullUrl = urlHash ? `${result.url}#${urlHash}` : result.url;
+        history.pushState({}, "", fullUrl);
       }
       this.lastUpdate = Date.now();
       this.routerLogger.debug(`Page loaded`);

app/components/lookbook/ui/pages/page/page.html.erb

@@ -1,4 +1,9 @@
-<%= render component_tag(class: {"with-footer": footer?}) do %>
+<%= render component_tag(
+  class: {"with-footer": footer?},
+  x: {
+    data: "page",
+    "@page-load:complete.document": "scrollToTarget"
+  }) do %>
   <article class="page-content-wrapper">
     <div class="page-content">
       <% if header? %>

app/components/lookbook/ui/pages/page/page.js

@@ -0,0 +1,18 @@
+import AlpineComponent from "@js/alpine/component";
+
+export default AlpineComponent("page", () => {
+  return {
+    init() {
+      setTimeout(() => this.scrollToTarget(), 1);
+    },
+
+    scrollToTarget() {
+      if (location.hash?.startsWith("#")) {
+        const scrollTarget = this.$root.querySelector(location.hash);
+        if (scrollTarget) {
+          scrollTarget.scrollIntoView({ behavior: "smooth" });
+        }
+      }
+    },
+  };
+});