Instant scrolling on restore, animated on user action

app/javascript/controllers/collapsible_columns_controller.js

@@ -50,7 +50,7 @@ export default class extends Controller {
   focusOnColumn({ target }) {
     if (this.#isDesktop && this.#isCollapsed(target)) {
       this.#collapseAllExcept(target)
-      this.#expand(target)
+      this.#expand({ column: target })
     }
   }
 
@@ -75,7 +75,7 @@ export default class extends Controller {
     this.#collapseAllExcept(column)
 
     if (this.#isCollapsed(column)) {
-      this.#expand(column)
+      this.#expand({ column })
     } else {
       this.#collapse(column)
     }
@@ -104,7 +104,7 @@ export default class extends Controller {
     localStorage.removeItem(key)
   }
 
-  #expand(column, saveState = true) {
+  #expand({ column, saveState = true, scrollBehavior = "smooth" }) {
     this.#buttonFor(column)?.setAttribute("aria-expanded", "true")
     column.classList.remove(this.collapsedClass)
     column.classList.add(this.expandedClass)
@@ -115,7 +115,7 @@ export default class extends Controller {
     }
 
     if (window.matchMedia('(max-width: 639px)').matches) {
-      column.scrollIntoView({ behavior: isNative() ? "instant" : "smooth", inline: "center" })
+      column.scrollIntoView({ behavior: scrollBehavior, inline: "center" })
     }
   }
 
@@ -133,7 +133,7 @@ export default class extends Controller {
     const key = this.#localStorageKeyFor(column)
     if (localStorage.getItem(key)) {
       this.#collapseAllExcept(column)
-      this.#expand(column)
+      this.#expand({ column, scrollBehavior: isNative() ? "instant" : "smooth" })
     }
   }
 
@@ -169,7 +169,7 @@ export default class extends Controller {
   }
 
   async #handleDesktopMode() {
-    this.#expand(this.maybeColumnTarget, false)
+    this.#expand({ column: this.maybeColumnTarget, saveState: false })
     this.#maybeButton.setAttribute("disabled", true)
   }
 
@@ -182,7 +182,7 @@ export default class extends Controller {
       this.#collapseAllExcept(expandedColumn)
     } else {
       this.#collapseAllExcept(this.maybeColumnTarget)
-      this.#expand(this.maybeColumnTarget, false)
+      this.#expand({ column: this.maybeColumnTarget, saveState: false })
     }
   }