Feat: Mobile Settings menu with preserve scroll + scroll on connect (#2278)

* feat: preserve scroll and scroll on connect, better responsive mobile settings menu

* Update app/javascript/controllers/scroll_on_connect_controller.js

Signed-off-by: Zach Gollwitzer <zach.gollwitzer@gmail.com>

* Update app/javascript/controllers/scroll_on_connect_controller.js

Signed-off-by: Zach Gollwitzer <zach.gollwitzer@gmail.com>

---------

Signed-off-by: Zach Gollwitzer <zach.gollwitzer@gmail.com>
Co-authored-by: Zach Gollwitzer <zach.gollwitzer@gmail.com>

app/javascript/controllers/preserve_scroll_controller.js

@@ -0,0 +1,44 @@
+import { Controller } from "@hotwired/stimulus"
+
+/*
+  https://dev.to/konnorrogers/maintain-scroll-position-in-turbo-without-data-turbo-permanent-2b1i
+  modified to add support for horizontal scrolling
+
+  only requirement is that the element has an id
+ */
+export default class extends Controller {
+  static scrollPositions = {}
+
+  connect() {
+    this.preserveScrollBound = this.preserveScroll.bind(this)
+    this.restoreScrollBound = this.restoreScroll.bind(this)
+
+    window.addEventListener("turbo:before-cache", this.preserveScrollBound)
+    window.addEventListener("turbo:before-render", this.restoreScrollBound)
+    window.addEventListener("turbo:render", this.restoreScrollBound)
+  }
+
+  disconnect() {
+    window.removeEventListener("turbo:before-cache", this.preserveScrollBound)
+    window.removeEventListener("turbo:before-render", this.restoreScrollBound)
+    window.removeEventListener("turbo:render", this.restoreScrollBound)
+  }
+
+  preserveScroll() {
+    if (!this.element.id) return
+
+    this.constructor.scrollPositions[this.element.id] = {
+      top: this.element.scrollTop,
+      left: this.element.scrollLeft
+    }
+  }
+
+  restoreScroll(event) {
+    if (!this.element.id) return
+
+    if (this.constructor.scrollPositions[this.element.id]) {
+      this.element.scrollTop = this.constructor.scrollPositions[this.element.id].top
+      this.element.scrollLeft = this.constructor.scrollPositions[this.element.id].left
+    }
+  }
+}

app/javascript/controllers/scroll_on_connect_controller.js

@@ -0,0 +1,41 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static values = {
+    selector: { type: String, default: "[aria-current=\"page\"]" },
+    delay: { type: Number, default: 500 }
+  }
+
+  connect() {
+    setTimeout(() => {
+      this.scrollToActiveItem()
+    }, this.delayValue)
+  }
+
+  scrollToActiveItem() {
+    const activeItem = this.element?.querySelector(this.selectorValue)
+
+
+    if (!activeItem) return
+
+    const scrollContainer = this.element
+    const containerRect = scrollContainer.getBoundingClientRect()
+    const activeItemRect = activeItem.getBoundingClientRect()
+
+    const scrollPositionX = (activeItemRect.left + scrollContainer.scrollLeft) -
+                          (containerRect.width / 2) +
+                          (activeItemRect.width / 2)
+
+    const scrollPositionY = (activeItemRect.top + scrollContainer.scrollTop) -
+                          (containerRect.height / 2) +
+                          (activeItemRect.height / 2)
+
+
+    // Smooth scroll to position
+    scrollContainer.scrollTo({
+      top: Math.max(0, scrollPositionY),
+      left: Math.max(0, scrollPositionX),
+      behavior: 'smooth'
+    })
+  }
+}

app/views/settings/_settings_nav.html.erb

@@ -67,7 +67,7 @@ nav_sections = [
       <% end %>
     </section>
   </nav>
-  <nav class="space-y-4 overflow-y-auto md:hidden" id="mobile-settings-nav">
+  <nav class="space-y-4 overflow-y-auto md:hidden" id="mobile-settings-nav" data-controller="preserve-scroll scroll-on-connect">
     <ul class="flex space-y-1">
       <li>
         <%= render LinkComponent.new(