From b9dd7fe808fe7b8c601e5ef372a33dd7ff0f166c Mon Sep 17 00:00:00 2001
From: Jorge Manrubia <jorge@37signals.com>
Date: Thu, 5 Jun 2025 08:54:31 +0200
Subject: [PATCH] Tidy up code

---
 app/javascript/controllers/knob_controller.js | 36 +++++++-----
 app/views/entropy/_auto_close.html.erb        | 24 ++++----
 app/views/entropy/_knob.html.erb              | 57 ++++++++-----------
 3 files changed, 59 insertions(+), 58 deletions(-)

diff --git a/app/javascript/controllers/knob_controller.js b/app/javascript/controllers/knob_controller.js
index f8413cb76..d097a824c 100644
--- a/app/javascript/controllers/knob_controller.js
+++ b/app/javascript/controllers/knob_controller.js
@@ -3,26 +3,36 @@ import { Controller } from "@hotwired/stimulus"
 export default class extends Controller {
   static targets = [ "field", "option", "slider" ]
 
-  optionChanged(e) {
-    this.#setIndex(e.target.getAttribute("data-index"))
+  connect() {
+    this.#index = this.#selectedOption.dataset.index
   }
 
-  sliderChanged(e) {
-    const index = e.target.value
-    this.#setIndex(index)
-    this.#setValue(index)
+  optionChanged({ target }) {
+    this.#index = target.dataset.index
   }
 
-  #setIndex(index) {
+  sliderChanged({ target }) {
+    this.#index = target.value
+  }
+
+  get #selectedOption() {
+    return this.optionTargets.find(option => {
+      return option.checked
+    })
+  }
+
+  set #index(index) {
     this.fieldTarget.style.setProperty("--knob-index", `${index}`);
-    this.sliderTarget.value = index;
+    this.sliderTarget.value = index
   }
 
-  #setValue(index) {
-    const option = this.optionTargets.find(option => {
-      return option.dataset.index === index;
-    });
+  set #value(index) {
+    this.#optionForIndex(index).checked = true
+  }
 
-    option.checked = true;
+  #optionForIndex(index) {
+    return this.optionTargets.find(option => {
+      return option.dataset.index === index;
+    })
   }
 }
diff --git a/app/views/entropy/_auto_close.html.erb b/app/views/entropy/_auto_close.html.erb
index db12171b7..fe0eb1c3a 100644
--- a/app/views/entropy/_auto_close.html.erb
+++ b/app/views/entropy/_auto_close.html.erb
@@ -4,24 +4,24 @@
   <div class="flex flex-column full-width" style="flex-basis: 48%">
     <strong>Cards in Considering</strong>
     <p class="txt-x-small margin-none-block-start">Auto-close after…</p>
-    <%= form_with model: model, url: url || collection_path(model), data: { controller: "form" } do |form| %>
-      <%= render "entropy/knob", 
-          knob_options: collection_auto_close_options.map(&:first).map(&:to_i), 
-          label: "Days until auto-close",
-          period: model.auto_close_period,
-          field_name: url ? "entropy_configuration[auto_close_period]" : "collection[auto_close_period]" %>
+    <%= form_with model: model, url: url, data: { controller: "form" } do |form| %>
+      <%= render "entropy/knob",
+            form: form,
+            name: :auto_close_period,
+            knob_options: collection_auto_close_options.map(&:first).map(&:to_i),
+            label: "Days until auto-close" %>
     <% end %>
   </div>
   <div class="separator margin-block-half" style="--border-color: var(--color-ink-light); min-block-size: 3lh;"></div>
   <div class="flex flex-column full-width" style="flex-basis: 48%">
     <strong>Cards in Doing</strong>
     <p class="txt-x-small margin-none-block-start">Fall back to Considering after…</p>
-    <%= form_with model: model, url: url || collection_path(model), data: { controller: "form" } do |form| %>
-      <%= render "entropy/knob", 
-          knob_options: collection_auto_close_options.map(&:first).map(&:to_i), 
-          label: "Days until auto-close",
-          period: model.auto_reconsider_period,
-          field_name: url ? "entropy_configuration[auto_reconsider_period]" : "collection[auto_reconsider_period]" %>
+    <%= form_with model: model, url: url, data: { controller: "form" } do |form| %>
+      <%= render "entropy/knob",
+            form: form,
+            name: :auto_reconsider_period,
+            knob_options: collection_auto_close_options.map(&:first).map(&:to_i),
+            label: "Days until auto-close" %>
     <% end %>
   </div>
 </div>
diff --git a/app/views/entropy/_knob.html.erb b/app/views/entropy/_knob.html.erb
index ed0a19eca..bfe92ed71 100644
--- a/app/views/entropy/_knob.html.erb
+++ b/app/views/entropy/_knob.html.erb
@@ -1,42 +1,33 @@
-<% 
-  name = label.parameterize
-  default_index = if period
-    knob_options.index(period.to_i / 1.day)
-  else
-    knob_options.index(Entropy::Configuration.default.auto_close_period.to_i / 1.day)
-  end
+<%
+  period = form.object.send(name)
+  current_index = knob_options.index(period.to_i / 1.day)
 %>
 
-<fieldset class="knob" data-controller="knob" data-knob-target="field" style="--knob-options: <%= knob_options.length %>; --knob-index: <%= default_index %>;">
-
-  <div class="position-relative" role="radiogroup" aria-labelledby="<%= name %>">
-    <% knob_options.each_with_index do |value, i| %>
-      <label class="knob__option" style="--i: <%= i %>">
-        <input
-          <%= "checked" if value == knob_options[default_index] %>
-          data-action="change->knob#optionChanged change->form#submit"
-          data-index="<%= i %>"
-          data-knob-target="option"
-          name="<%= field_name %>"
-          type="radio"
-          value="<%= value.days %>"
-        />
+<fieldset class="knob" data-controller="knob" data-knob-target="field" style="--knob-options: <%= knob_options.length %>; --knob-index: <%= current_index %>">
+  <div class="position-relative" role="radiogroup" aria-labelledby="<%= dom_id(form.object, name) %>">
+    <% knob_options.each_with_index do |value, index| %>
+      <label class="knob__option" style="--i: <%= index %>">
+        <%= form.radio_button name,
+              value.days,
+              data: {
+                action: "change->knob#optionChanged change->form#submit",
+                index: index,
+                knob_target: "option"
+              } %>
         <span><%= value %></span>
       </label>
     <% end %>
-    <input
-      aria-hidden
-      class="knob__slider"
-      data-action="input->knob#sliderChanged change->form#submit"
-      data-knob-target="slider"
-      max="<%= knob_options.length - 1 %>"
-      min="0"
-      type="range"
-      value="<%= default_index %>"
-    />
+
+    <%= form.range_field :slider,
+          class: "knob__slider",
+          data: { action: "input->knob#sliderChanged change->form#submit", knob_target: "slider" },
+          "aria-hidden": true,
+          max: knob_options.length - 1,
+          min: 0
+    %>
 
     <div class="knob__knob" aria-hidden></div>
   </div>
 
-  <div id="<%= name %>" class="knob__label">Days</div>
-</fieldset>
\ No newline at end of file
+  <div id="<%= dom_id(form.object, name) %>" class="knob__label">Days</div>
+</fieldset>