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/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'
+    })
+  }
+}