Pull out moveDividerTo

app/javascript/controllers/divider_controller.js

@@ -13,7 +13,7 @@ export default class extends Controller {
   }
 
   install() {
-    this.#positionDividerBefore(this.startCountValue)
+    this.#moveDividerTo(this.startCountValue)
     this.dividerTarget.classList.add(this.positionedClass)
   }
 
@@ -25,17 +25,9 @@ export default class extends Controller {
     }
   }
 
-  moveDivider(event) {
-    if (event.target.nodeName != DIVIDER_ITEM_NODE_NAME) return
-
-    const targetIndex = this.#items.indexOf(event.target)
-
-    if (targetIndex != this.#dividerIndex && targetIndex <= this.maxCountValue) {
-      if (this.#dividerIndex < targetIndex) {
-        this.#positionDividerAfter(targetIndex)
-      } else {
-        this.#positionDividerBefore(targetIndex)
-      }
+  moveDivider({ target }) {
+    if (target.nodeName == DIVIDER_ITEM_NODE_NAME) {
+      this.#moveDividerTo(this.#items.indexOf(target))
     }
   }
 
@@ -48,6 +40,16 @@ export default class extends Controller {
     if (isDroppable) event.preventDefault()
   }
 
+  #moveDividerTo(index) {
+    if (index <= this.maxCountValue) {
+      if (this.#dividerIndex < index) {
+        this.#positionDividerAfter(index)
+      } else if (this.#dividerIndex > index) {
+        this.#positionDividerBefore(index)
+      }
+    }
+  }
+
   #positionDividerBefore(index) {
     const position = Math.max(index, 1)
     this.#items[position].before(this.dividerTarget)

app/views/bubbles/list/_divider.html.erb

@@ -6,7 +6,7 @@
   </button>
   <hr class="separator--horizontal flex-item-grow">
   <strong class="bubbles-list__count border-radius">
-    Top <span data-divider-target="count"></span>
+    Top <span data-divider-target="count">10</span>
   </strong>
   <hr class="separator--horizontal flex-item-grow">
   <span></span>