Migrate all inline JS to Stimulus controllers

Add stimulus-rails gem and wire up 7 controllers:
- measurements_view_controller: view toggle (compact/wide) via localStorage
- measurements_controller: grouped rows MutationObserver
- charts_controller: Plotly chart rendering
- form_controller: keyboard shortcuts (Escape/Enter) and submit validation
- details_controller: quantity picker state, focusout close, MutationObserver
- readout_unit_controller: default unit button enable/disable + PATCH submission
- drag_controller: drag-and-drop for quantity reparenting and unit rebasing

Remove all inline onclick/onkeydown/ondrag*/onsubmit handlers from templates.
Remove all window.* global exports from application.js.
Remove bare <script> block from measurements/_form.html.erb.
Remove turbo:load listeners for behavior now in controller connect().

application.js now only contains: Turbo Stream custom action definitions
and the showPage visibility listener.

Document Stimulus conventions in CLAUDE.md.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

CLAUDE.md

@@ -77,6 +77,44 @@ default/       namespace for default units import/export and admin panel
 root           → /units (authenticated), /sign_in (unauthenticated)
 ```
 
+## JavaScript Conventions
+
+### Use Stimulus for all JS behavior
+
+This app uses **Hotwire = Turbo + Stimulus**. All JavaScript behavior must be in Stimulus controllers under `app/javascript/controllers/`. Never use:
+- Inline HTML event handlers: `onclick="..."`, `onkeydown="..."`, `ondragstart="..."` etc.
+- Global `window.*` function exports
+- Bare `<script>` blocks in templates
+- `turbo:load` listeners for behavior that belongs in a controller's `connect()` lifecycle
+
+**Instead:**
+- Put behavior in a Stimulus controller method
+- Wire it with `data-action="event->controller#method"` in the template
+- Use `data-controller="name"` on the root element, `data-[name]-target="targetName"` for targets, `data-[name]-[valueName]-value="..."` for values
+- Use `connect()` / `disconnect()` for setup/teardown (MutationObservers, event listeners, etc.)
+
+Controller filename `foo_bar_controller.js` → identifier `foo-bar` → `data-controller="foo-bar"`.
+
+### No manual fetch() — use Turbo
+
+Never make AJAX requests with `fetch()` in JavaScript. Use Turbo's built-in mechanisms instead:
+
+- **Links/buttons that trigger server actions**: use `data: {turbo_stream: true}` on the element (link or button_to form).
+- **Dynamic form submissions from JS** (where HTML alone isn't enough): create a form element, append hidden inputs, and call `form.requestSubmit()`. Turbo intercepts it automatically — no manual CSRF handling, no `Turbo.renderStreamMessage()`.
+  ```javascript
+  var form = document.createElement('form');
+  form.action = url; form.method = 'post'; form.dataset.turboStream = 'true';
+  // append hidden inputs...
+  form.addEventListener('turbo:submit-end', function() { form.remove(); });
+  document.body.appendChild(form);
+  form.requestSubmit();
+  ```
+- **Server-rendered HTML**: use ERB partials and Turbo Stream views (`*.turbo_stream.erb`), never build HTML in JavaScript.
+
+### No HTML generation in JavaScript
+
+Never use JavaScript to build and insert HTML (no `innerHTML =`, no `createElement` trees for content). Render HTML server-side in ERB partials; update the DOM via Turbo Stream actions (`replace`, `update`, `append`, etc.).
+
 ## Database Requirements
 
 The database must support:

Gemfile

@@ -25,6 +25,7 @@ gem "devise"
 
 gem "importmap-rails"
 gem "turbo-rails", "~> 2.0"
+gem "stimulus-rails"
 
 group :development, :test do
   gem "byebug"

Gemfile.lock

@@ -273,6 +273,8 @@ GEM
     sqlite3 (2.9.0-x86_64-darwin)
     sqlite3 (2.9.0-x86_64-linux-gnu)
     sqlite3 (2.9.0-x86_64-linux-musl)
+    stimulus-rails (1.3.4)
+      railties (>= 6.0.0)
     stringio (3.2.0)
     thor (1.5.0)
     tilt (2.7.0)
@@ -324,6 +326,7 @@ DEPENDENCIES
   selenium-webdriver
   sprockets-rails
   sqlite3 (~> 2.7)
+  stimulus-rails
   turbo-rails (~> 2.0)
   tzinfo-data
   web-console

app/controllers/measurements_controller.rb

@@ -6,7 +6,7 @@ class MeasurementsController < ApplicationController
   end
 
   def index
-    @measurements = current_user.readouts.includes(:quantity, :unit).order(taken_at: :desc, id: :desc)
+    load_measurements
   end
 
   def new
@@ -20,6 +20,7 @@ class MeasurementsController < ApplicationController
 
     if @readouts.present? && @readouts.all?(&:valid?)
       ActiveRecord::Base.transaction { @readouts.each(&:save!) }
+      load_measurements
       flash.now[:notice] = t('.success', count: @readouts.size)
     else
       errors = @readouts.flat_map { |r| r.errors.full_messages }
@@ -33,6 +34,7 @@ class MeasurementsController < ApplicationController
 
   def update
     if @readout.update(params.require(:readout).permit(:value, :unit_id, :taken_at))
+      load_measurements
       flash.now[:notice] = t('.success')
     else
       @user_units = current_user.units.ordered
@@ -42,6 +44,7 @@ class MeasurementsController < ApplicationController
 
   def destroy
     @readout.destroy!
+    load_measurements
     flash.now[:notice] = t('.success')
   end
 
@@ -50,4 +53,10 @@ class MeasurementsController < ApplicationController
   def find_readout
     @readout = current_user.readouts.find(params[:id])
   end
+
+  def load_measurements
+    @measurements = current_user.readouts.includes(:quantity, :unit).order(taken_at: :desc, id: :desc)
+    @wide_groups = @measurements.group_by(&:taken_at)
+    @wide_quantities = @measurements.map(&:quantity).uniq.sort_by(&:name)
+  end
 end

app/javascript/application.js

@@ -1,303 +1,15 @@
 // Configure your import map in config/importmap.rb. Read more:
 // https://github.com/rails/importmap-rails
 import "@hotwired/turbo-rails"
+import "controllers"
 
 
 /* Hide page before loaded for testing purposes */
-function showPage(event) {
-  document.documentElement.style.visibility="visible"
+function showPage() {
+  document.documentElement.style.visibility = "visible"
 }
 document.addEventListener('turbo:load', showPage)
 
-function groupMeasurements() {
-  var tbody = document.getElementById('measurements');
-  if (!tbody) return;
-  var prevTakenAt = null;
-  Array.from(tbody.querySelectorAll('tr[data-taken-at]'))
-    .filter(function(row) { return row.style.display !== 'none' })
-    .forEach(function(row) {
-      var takenAt = row.dataset.takenAt;
-      row.classList.toggle('grouped', takenAt !== null && takenAt === prevTakenAt);
-      prevTakenAt = takenAt;
-    });
-}
-
-function buildWideTable() {
-  var tbody = document.getElementById('measurements');
-  var wideContainer = document.getElementById('measurements-wide');
-  if (!tbody || !wideContainer) return;
-
-  var rows = Array.from(tbody.querySelectorAll('tr[data-taken-at]'));
-
-  if (rows.length === 0) { wideContainer.innerHTML = ''; return; }
-
-  // Unique quantities in alphabetical order
-  var qOrder = [], qSeen = new Set();
-  rows.forEach(function(r) {
-    var id = r.dataset.quantityId;
-    if (id && !qSeen.has(id)) { qSeen.add(id); qOrder.push({id: id, name: r.dataset.quantityName}); }
-  });
-  qOrder.sort(function(a, b) { return a.name.localeCompare(b.name); });
-
-  // Group rows by taken_at, preserving order
-  var groups = [], groupMap = new Map();
-  rows.forEach(function(r) {
-    var key = r.dataset.takenAt || '';
-    if (!groupMap.has(key)) { var g = {rows: []}; groups.push(g); groupMap.set(key, g); }
-    groupMap.get(key).rows.push(r);
-  });
-
-  // Read column headers from compact thead
-  var ths = document.querySelectorAll('.measurements-compact thead th');
-  var takenAtHeader = ths[3] ? ths[3].textContent : '';
-  var createdAtHeader = ths[4] ? ths[4].textContent : '';
-
-  var table = document.createElement('table');
-  table.className = 'items-table';
-
-  // Header
-  var thead = table.createTHead();
-  var hrow = thead.insertRow();
-  [takenAtHeader].concat(qOrder.map(function(q) { return q.name; })).concat([createdAtHeader]).forEach(function(text) {
-    var th = document.createElement('th');
-    th.textContent = text;
-    hrow.appendChild(th);
-  });
-
-  // Body
-  var tbodyEl = table.createTBody();
-  groups.forEach(function(group) {
-    var tr = tbodyEl.insertRow();
-
-    // Taken at
-    var tdTime = tr.insertCell();
-    var takenAtEl = group.rows[0].querySelector('.taken-at');
-    tdTime.textContent = takenAtEl ? takenAtEl.textContent : '';
-
-    // One cell per quantity
-    qOrder.forEach(function(q) {
-      var td = tr.insertCell();
-      var readoutRow = group.rows.find(function(r) { return r.dataset.quantityId === q.id; });
-      if (readoutRow) {
-        td.className = 'ralign';
-        var wrap = document.createElement('span');
-        wrap.className = 'wide-cell';
-        var editLink = readoutRow.querySelector('a.link');
-        if (editLink) {
-          var editUrl = editLink.href + (editLink.href.includes('?') ? '&' : '?') + 'view=wide';
-          var btn = document.createElement('button');
-          btn.className = 'link';
-          btn.type = 'button';
-          btn.dataset.editUrl = editUrl;
-          btn.addEventListener('click', function() { editMeasurementWide(this.dataset.editUrl); this.blur(); });
-          btn.textContent = readoutRow.dataset.value;
-          wrap.appendChild(btn);
-          wrap.appendChild(document.createTextNode('\u00a0' + readoutRow.dataset.unit));
-        } else {
-          wrap.appendChild(document.createTextNode(readoutRow.dataset.value + '\u00a0' + readoutRow.dataset.unit));
-        }
-        var srcActions = readoutRow.querySelector('td.flex');
-        if (srcActions) srcActions.querySelectorAll('form').forEach(function(f) {
-          var cloned = f.cloneNode(true);
-          var span = cloned.querySelector('button span');
-          if (span) span.remove();
-          wrap.appendChild(cloned);
-        });
-        td.appendChild(wrap);
-      }
-    });
-
-    // Created at (from first row of group)
-    var tdCreated = tr.insertCell();
-    var createdAtEl = group.rows[0].querySelector('.created-at');
-    tdCreated.textContent = createdAtEl ? createdAtEl.textContent : '';
-  });
-
-  wideContainer.innerHTML = '';
-  wideContainer.appendChild(table);
-}
-
-function buildCharts() {
-  var container = document.getElementById('measurements-charts');
-  var dataEl = document.getElementById('charts-data');
-  if (!container || !dataEl) return;
-
-  var readouts = JSON.parse(dataEl.textContent);
-  container.innerHTML = '';
-  if (readouts.length === 0) return;
-
-  // Data arrives sorted by taken_at from the server; group into per-quantity traces
-  var quantities = new Map();
-  readouts.forEach(function(r) {
-    if (!r.takenAt) return;
-    if (!quantities.has(r.quantityId)) {
-      quantities.set(r.quantityId, { name: r.quantityName, unit: r.unit, x: [], y: [] });
-    }
-    var q = quantities.get(r.quantityId);
-    q.x.push(r.takenAt);
-    q.y.push(r.value);
-  });
-
-  var traces = [];
-  quantities.forEach(function(q) {
-    traces.push({
-      x: q.x,
-      y: q.y,
-      mode: 'lines+markers',
-      type: 'scatter',
-      name: q.name + ' (' + q.unit + ')',
-      marker: { size: 5 }
-    });
-  });
-
-  var div = document.createElement('div');
-  div.className = 'chart-panel';
-  container.appendChild(div);
-
-  Plotly.newPlot(div, traces, {
-    xaxis: { type: 'date', tickformat: '%Y-%m-%d %H:%M' },
-    yaxis: {},
-    margin: { t: 20, r: 20, b: 80, l: 60 },
-    paper_bgcolor: 'transparent',
-    plot_bgcolor: 'transparent',
-    font: { family: 'system-ui' },
-    legend: { orientation: 'h', y: -0.25 }
-  }, { responsive: true, displayModeBar: false });
-}
-
-function getMeasurementsView() {
-  return localStorage.getItem('measurements-view') || 'compact';
-}
-
-function applyMeasurementsView(view) {
-  document.body.dataset.measurementsView = view;
-  if (view === 'wide') buildWideTable();
-}
-
-function setMeasurementsView(view) {
-  localStorage.setItem('measurements-view', view);
-  applyMeasurementsView(view);
-}
-window.setMeasurementsView = setMeasurementsView
-
-document.addEventListener('turbo:load', function() {
-  if (document.getElementById('charts-data')) {
-    buildCharts();
-    return;
-  }
-  var tbody = document.getElementById('measurements');
-  if (!tbody) return;
-  groupMeasurements();
-  applyMeasurementsView(getMeasurementsView());
-  new MutationObserver(function() {
-    groupMeasurements();
-    var view = getMeasurementsView();
-    if (view === 'wide') buildWideTable();
-  }).observe(tbody, {
-    childList: true, subtree: true,
-    attributes: true, attributeFilter: ['style']
-  });
-})
-
-function detailsChange(event) {
-  var target = event.currentTarget
-  var count = target.querySelectorAll('input:checked:not([disabled])').length
-  var span = target.querySelector('summary > span')
-  var button = target.querySelector('button')
-  if (count > 0) {
-    span.textContent = count + ' selected';
-    Turbo.StreamElement.prototype.enableElement(button)
-  } else {
-    span.textContent = span.getAttribute('data-prompt')
-    Turbo.StreamElement.prototype.disableElement(button)
-  }
-}
-window.detailsChange = detailsChange
-
-/* Close open <details> when focus lost */
-function detailsClose(event) {
-  if (!event.relatedTarget ||
-      event.relatedTarget.closest("details") != event.currentTarget) {
-    event.currentTarget.removeAttribute("open")
-  }
-}
-window.detailsClose = detailsClose
-
-window.detailsObserver = new MutationObserver((mutations) => {
-  mutations[0].target.dispatchEvent(new Event('change', {bubbles: true}))
-});
-
-function editMeasurementWide(url) {
-  fetch(url, {
-    headers: {
-      'Accept': 'text/vnd.turbo-stream.html',
-      'X-Requested-With': 'XMLHttpRequest'
-    }
-  })
-  .then(response => response.text())
-  .then(html => {
-    Turbo.renderStreamMessage(html);
-    requestAnimationFrame(() => {
-      var panel = document.getElementById('measurement_edit_form');
-      if (panel && panel.firstElementChild) {
-        panel.scrollIntoView({behavior: 'smooth', block: 'nearest'});
-      }
-    });
-  });
-}
-window.editMeasurementWide = editMeasurementWide
-
-function readoutUnitChanged(select) {
-  var button = select.closest('tr').querySelector('.set-default-unit');
-  if (select.value && select.value !== select.dataset.defaultUnitId) {
-    button.removeAttribute('disabled');
-    button.removeAttribute('aria-disabled');
-    button.removeAttribute('tabindex');
-  } else {
-    button.setAttribute('disabled', 'disabled');
-    button.setAttribute('aria-disabled', 'true');
-    button.setAttribute('tabindex', '-1');
-  }
-}
-window.readoutUnitChanged = readoutUnitChanged
-
-function setDefaultUnit(button) {
-  var select = button.closest('tr').querySelector('select[data-default-unit-id]');
-  var params = new URLSearchParams();
-  params.append('quantity[default_unit_id]', select.value);
-
-  fetch(button.dataset.path, {
-    body: params,
-    headers: {
-      'Accept': 'text/vnd.turbo-stream.html',
-      'X-CSRF-Token': document.head.querySelector('meta[name=csrf-token]').content,
-      'X-Requested-With': 'XMLHttpRequest'
-    },
-    method: 'PATCH'
-  })
-  .then(response => {
-    if (response.ok) {
-      select.dataset.defaultUnitId = select.value;
-      readoutUnitChanged(select);
-    }
-    return response.text();
-  })
-  .then(html => Turbo.renderStreamMessage(html));
-}
-window.setDefaultUnit = setDefaultUnit
-
-function formValidate(event) {
-  var id = event.submitter.getAttribute("data-validate")
-  if (!id) return;
-
-  var input = document.getElementById(id)
-  if (!input.checkValidity()) {
-    input.reportValidity()
-    event.preventDefault()
-  }
-}
-window.formValidate = formValidate
-
 
 /* Turbo stream actions */
 Turbo.StreamElement.prototype.disableElement = function(element) {
@@ -360,117 +72,3 @@ Turbo.StreamActions.unselect = function() {
     this.enableElement(e)
   })
 }
-
-function formProcessKey(event) {
-  switch (event.key) {
-    case "Escape":
-      event.currentTarget.querySelector("a[name=cancel]").click()
-      break
-    case "Enter":
-      event.currentTarget.querySelector("button[name=button]").click()
-      event.preventDefault()
-      break
-  }
-}
-window.formProcessKey = formProcessKey
-
-function detailsProcessKey(event) {
-  // TODO: up/down arrows to move focus to prev/next line
-  switch (event.key) {
-    case "Escape":
-      if (event.currentTarget.hasAttribute("open")) {
-        event.currentTarget.removeAttribute("open")
-        event.stopPropagation()
-      }
-      break
-    case "Enter":
-      var button = event.currentTarget.querySelector("button:not([disabled])")
-      if (button) {
-        button.click()
-        // Autofocus won't be respected unless target is blurred
-        event.target.blur()
-        event.preventDefault()
-        event.stopPropagation()
-      }
-      break
-  }
-}
-window.detailsProcessKey = detailsProcessKey;
-
-/* Items table drag and drop support */
-var lastEnterTime
-function dragStart(event) {
-  lastEnterTime = event.timeStamp
-  var row = event.currentTarget
-  row.closest("table").querySelectorAll("thead tr").forEach((tr) => {
-    tr.toggleAttribute("hidden")
-  })
-  event.dataTransfer.setData("text/plain", row.getAttribute("data-drag-path"))
-  var rowRectangle = row.getBoundingClientRect()
-  event.dataTransfer.setDragImage(row, event.x - rowRectangle.left, event.y - rowRectangle.top)
-  event.dataTransfer.dropEffect = "move"
-}
-window.dragStart = dragStart
-
-/*
-* Drag tracking assumptions (based on FF 122.0 experience):
-*   * Enter/Leave events at the same timeStamp may not be logically ordered
-*     (e.g. E -> E -> L, not E -> L -> E),
-*   * not every Enter event has corresponding Leave event, especially during
-*     rapid pointer moves
-* NOTE: sometimes Leave is not emitted when pointer goes fast over table
-* and outside. This should probably be fixed in browser, than patched here.
-*/
-function dragEnter(event) {
-  //console.log(event.timeStamp + " " + event.type + ": " + event.currentTarget.id)
-  dragLeave(event)
-  lastEnterTime = event.timeStamp
-  const id = event.currentTarget.getAttribute("data-drop-id")
-  document.getElementById(id).classList.add("dropzone")
-}
-window.dragEnter = dragEnter
-
-function dragOver(event) {
-  event.preventDefault()
-}
-window.dragOver = dragOver
-
-function dragLeave(event) {
-  //console.log(event.timeStamp + " " + event.type + ": " + event.currentTarget.id)
-  // Leave has been accounted for by Enter at the same timestamp, processed earlier
-  if (event.timeStamp <= lastEnterTime) return
-  event.currentTarget.closest("table").querySelectorAll(".dropzone").forEach((tr) => {
-    tr.classList.remove("dropzone")
-  })
-}
-window.dragLeave = dragLeave
-
-function dragEnd(event) {
-  dragLeave(event)
-  event.currentTarget.closest("table").querySelectorAll("thead tr").forEach((tr) => {
-    tr.toggleAttribute("hidden")
-  })
-}
-window.dragEnd = dragEnd
-
-function drop(event) {
-  event.preventDefault()
-
-  var params = new URLSearchParams()
-  var id_param = event.currentTarget.getAttribute("data-drop-id-param")
-  var id = event.currentTarget.getAttribute("data-drop-id").split("_").pop()
-  params.append(id_param, id)
-
-  fetch(event.dataTransfer.getData("text/plain"), {
-    body: params,
-    headers: {
-      "Accept": "text/vnd.turbo-stream.html",
-      "X-CSRF-Token": document.head.querySelector("meta[name=csrf-token]").content,
-      "X-Requested-With": "XMLHttpRequest"
-    },
-    method: "POST"
-  })
-  .then(response => response.text())
-  .then(html => Turbo.renderStreamMessage(html))
-}
-window.drop = drop

app/javascript/controllers/application.js

@@ -0,0 +1,7 @@
+import { Application } from "@hotwired/stimulus"
+
+const application = Application.start()
+application.debug = false
+window.Stimulus = application
+
+export { application }

app/javascript/controllers/charts_controller.js

@@ -0,0 +1,45 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["container", "data"]
+
+  connect() {
+    const readouts = JSON.parse(this.dataTarget.textContent)
+    if (readouts.length === 0) return
+
+    const quantities = new Map()
+    readouts.forEach(r => {
+      if (!r.takenAt) return
+      if (!quantities.has(r.quantityId)) {
+        quantities.set(r.quantityId, { name: r.quantityName, unit: r.unit, x: [], y: [] })
+      }
+      const q = quantities.get(r.quantityId)
+      q.x.push(r.takenAt)
+      q.y.push(r.value)
+    })
+
+    const traces = []
+    quantities.forEach(q => {
+      traces.push({
+        x: q.x, y: q.y,
+        mode: 'lines+markers', type: 'scatter',
+        name: q.name + ' (' + q.unit + ')',
+        marker: { size: 5 }
+      })
+    })
+
+    const div = document.createElement('div')
+    div.className = 'chart-panel'
+    this.containerTarget.appendChild(div)
+
+    Plotly.newPlot(div, traces, {
+      xaxis: { type: 'date', tickformat: '%Y-%m-%d %H:%M' },
+      yaxis: {},
+      margin: { t: 20, r: 20, b: 80, l: 60 },
+      paper_bgcolor: 'transparent',
+      plot_bgcolor: 'transparent',
+      font: { family: 'system-ui' },
+      legend: { orientation: 'h', y: -0.25 }
+    }, { responsive: true, displayModeBar: false })
+  }
+}

app/javascript/controllers/details_controller.js

@@ -0,0 +1,55 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["countLabel", "submitButton", "list"]
+
+  connect() {
+    this._observer = new MutationObserver(() => {
+      this.element.dispatchEvent(new Event('change', { bubbles: true }))
+    })
+    this._observer.observe(this.listTarget, { subtree: true, attributeFilter: ['disabled'] })
+  }
+
+  disconnect() {
+    this._observer?.disconnect()
+  }
+
+  change() {
+    const count = this.element.querySelectorAll('input:checked:not([disabled])').length
+    if (count > 0) {
+      this.countLabelTarget.textContent = count + ' selected'
+      Turbo.StreamElement.prototype.enableElement(this.submitButtonTarget)
+    } else {
+      this.countLabelTarget.textContent = this.countLabelTarget.dataset.prompt
+      Turbo.StreamElement.prototype.disableElement(this.submitButtonTarget)
+    }
+  }
+
+  close(event) {
+    if (!event.relatedTarget ||
+        event.relatedTarget.closest("details") != this.element) {
+      this.element.removeAttribute("open")
+    }
+  }
+
+  processKey(event) {
+    switch (event.key) {
+      case "Escape":
+        if (this.element.hasAttribute("open")) {
+          this.element.removeAttribute("open")
+          event.stopPropagation()
+        }
+        break
+      case "Enter": {
+        const button = this.element.querySelector("button:not([disabled])")
+        if (button) {
+          button.click()
+          event.target.blur()
+          event.preventDefault()
+          event.stopPropagation()
+        }
+        break
+      }
+    }
+  }
+}

app/javascript/controllers/drag_controller.js

@@ -0,0 +1,62 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Shared across all instances — drag spans multiple elements
+let lastEnterTime
+
+export default class extends Controller {
+  static values = {
+    dragPath: String,
+    dropId: String,
+    dropIdParam: String
+  }
+
+  start(event) {
+    lastEnterTime = event.timeStamp
+    this.element.closest("table").querySelectorAll("thead tr").forEach(tr => {
+      tr.toggleAttribute("hidden")
+    })
+    event.dataTransfer.setData("text/plain", this.dragPathValue)
+    const rect = this.element.getBoundingClientRect()
+    event.dataTransfer.setDragImage(this.element, event.x - rect.left, event.y - rect.top)
+    event.dataTransfer.dropEffect = "move"
+  }
+
+  end(event) {
+    this.leave(event)
+    this.element.closest("table").querySelectorAll("thead tr").forEach(tr => {
+      tr.toggleAttribute("hidden")
+    })
+  }
+
+  enter(event) {
+    this.leave(event)
+    lastEnterTime = event.timeStamp
+    document.getElementById(this.dropIdValue)?.classList.add("dropzone")
+  }
+
+  over(event) {
+    event.preventDefault()
+  }
+
+  leave(event) {
+    if (event.timeStamp <= lastEnterTime) return
+    this.element.closest("table").querySelectorAll(".dropzone").forEach(tr => {
+      tr.classList.remove("dropzone")
+    })
+  }
+
+  drop(event) {
+    event.preventDefault()
+    const id = this.dropIdValue.split("_").pop()
+    const form = document.createElement('form')
+    form.action = event.dataTransfer.getData("text/plain")
+    form.method = 'post'
+    form.dataset.turboStream = 'true'
+    const input = document.createElement('input')
+    input.type = 'hidden'; input.name = this.dropIdParamValue; input.value = id
+    form.appendChild(input)
+    form.addEventListener('turbo:submit-end', () => form.remove())
+    document.body.appendChild(form)
+    form.requestSubmit()
+  }
+}

app/javascript/controllers/form_controller.js

@@ -0,0 +1,25 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  processKey(event) {
+    switch (event.key) {
+      case "Escape":
+        this.element.querySelector("a[name=cancel]").click()
+        break
+      case "Enter":
+        this.element.querySelector("button[name=button]").click()
+        event.preventDefault()
+        break
+    }
+  }
+
+  validate(event) {
+    const id = event.submitter?.getAttribute("data-validate")
+    if (!id) return
+    const input = document.getElementById(id)
+    if (!input.checkValidity()) {
+      input.reportValidity()
+      event.preventDefault()
+    }
+  }
+}

app/javascript/controllers/index.js

@@ -0,0 +1,3 @@
+import { application } from "controllers/application"
+import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"
+eagerLoadControllersFrom("controllers", application)

app/javascript/controllers/measurements_controller.js

@@ -0,0 +1,29 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["tbody"]
+
+  connect() {
+    this.#group()
+    this._observer = new MutationObserver(() => this.#group())
+    this._observer.observe(this.tbodyTarget, {
+      childList: true, subtree: true,
+      attributes: true, attributeFilter: ['style']
+    })
+  }
+
+  disconnect() {
+    this._observer?.disconnect()
+  }
+
+  #group() {
+    let prevTakenAt = null
+    Array.from(this.tbodyTarget.querySelectorAll('tr[data-taken-at]'))
+      .filter(row => row.style.display !== 'none')
+      .forEach(row => {
+        const takenAt = row.dataset.takenAt
+        row.classList.toggle('grouped', takenAt !== null && takenAt === prevTakenAt)
+        prevTakenAt = takenAt
+      })
+  }
+}

app/javascript/controllers/measurements_view_controller.js

@@ -0,0 +1,17 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {
+    document.body.dataset.measurementsView = this.#get()
+  }
+
+  set(event) {
+    const view = event.params.name
+    localStorage.setItem('measurements-view', view)
+    document.body.dataset.measurementsView = view
+  }
+
+  #get() {
+    return localStorage.getItem('measurements-view') || 'compact'
+  }
+}

app/javascript/controllers/readout_unit_controller.js

@@ -0,0 +1,36 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["select", "button"]
+
+  unitChanged() {
+    if (this.selectTarget.value && this.selectTarget.value !== this.selectTarget.dataset.defaultUnitId) {
+      Turbo.StreamElement.prototype.enableElement(this.buttonTarget)
+    } else {
+      Turbo.StreamElement.prototype.disableElement(this.buttonTarget)
+    }
+  }
+
+  setDefault() {
+    const select = this.selectTarget
+    const form = document.createElement('form')
+    form.action = this.buttonTarget.dataset.path
+    form.method = 'post'
+    form.dataset.turboStream = 'true'
+    const methodInput = document.createElement('input')
+    methodInput.type = 'hidden'; methodInput.name = '_method'; methodInput.value = 'patch'
+    const unitInput = document.createElement('input')
+    unitInput.type = 'hidden'; unitInput.name = 'quantity[default_unit_id]'; unitInput.value = select.value
+    form.appendChild(methodInput)
+    form.appendChild(unitInput)
+    form.addEventListener('turbo:submit-end', event => {
+      if (event.detail.success) {
+        select.dataset.defaultUnitId = select.value
+        this.unitChanged()
+      }
+      form.remove()
+    })
+    document.body.appendChild(form)
+    form.requestSubmit()
+  }
+}

app/views/charts/index.html.erb

@@ -1,2 +1,4 @@
-<div class="main-area" id="measurements-charts"></div>
-<script id="charts-data" type="application/json"><%= raw @readouts_json %></script>
+<div data-controller="charts">
+  <div class="main-area" id="measurements-charts" data-charts-target="container"></div>
+  <script id="charts-data" type="application/json" data-charts-target="data"><%= raw @readouts_json %></script>
+</div>

app/views/measurements/_edit_form.html.erb

@@ -1,6 +1,7 @@
 <%= tabular_fields_for @readout, form: form_tag do |form| %>
-  <%- tag.tr id: row, class: "form", onkeydown: "formProcessKey(event)",
-    data: {form: form_tag, hidden_row: hidden_row, link: link} do %>
+  <%- tag.tr id: row, class: "form",
+    data: {controller: 'form', action: 'keydown->form#processKey',
+           form: form_tag, hidden_row: hidden_row, link: link} do %>
     <td><%= @readout.quantity %></td>
     <td class="ralign">
       <%= form.number_field :value, required: true, autofocus: true %>

app/views/measurements/_edit_panel.html.erb

@@ -6,8 +6,9 @@
   id: form_tag do |form| %>
   <table class="items-table">
     <tbody>
-      <%= tag.tr id: row, class: "form", onkeydown: "formProcessKey(event)",
-        data: {form: form_tag, hidden_row: hidden_row} do %>
+      <%= tag.tr id: row, class: "form",
+        data: {controller: 'form', action: 'keydown->form#processKey',
+               form: form_tag, hidden_row: hidden_row} do %>
         <td><%= @readout.quantity %></td>
         <td class="ralign">
           <%= form.number_field :value, required: true, autofocus: true %>

app/views/measurements/_form.html.erb

@@ -1,6 +1,6 @@
 <%= tabular_form_with model: Measurement.new, id: :measurement_form,
   class: 'topside-area flex vertical center',
-  html: {onkeydown: 'formProcessKey(event)'} do |form| %>
+  html: {data: {controller: 'form', action: 'keydown->form#processKey'}} do |form| %>
 
   <table class="items-table center">
     <tbody id="readouts">
@@ -17,17 +17,18 @@
 
   <%# TODO: right-click selection; unnecessary with hierarchical tags? %>
   <details id="quantity_select" class="center hexpand" open
-           onkeydown="detailsProcessKey(event)">
+           data-controller="details"
+           data-action="focusout->details#close change->details#change keydown->details#processKey">
     <summary autofocus>
       <!-- TODO: Set content with CSS when span empty to avoid duplication -->
-      <span data-prompt="<%= t('.select_quantity') %>">
+      <span data-prompt="<%= t('.select_quantity') %>" data-details-target="countLabel">
         <%= t('.select_quantity') %>
       </span>
       <%= image_button_tag t(:apply), "update", name: nil, disabled: true,
         formaction: new_readout_path, formmethod: :get, formnovalidate: true,
-        data: {turbo_stream: true} %>
+        data: {turbo_stream: true, details_target: 'submitButton'} %>
     </summary>
-    <ul><%= quantities_check_boxes(@quantities) %></ul>
+    <ul data-details-target="list"><%= quantities_check_boxes(@quantities) %></ul>
   </details>
 
   <div class="flex reverse">
@@ -36,10 +37,3 @@
       class: 'dangerous', onclick: render_turbo_stream('form_close') %>
   </div>
 <% end %>
-
-<script>
-  quantity_select.addEventListener('focusout', detailsClose)
-  quantity_select.addEventListener('change', detailsChange)
-  detailsObserver.observe(quantity_select.querySelector('ul'),
-    {subtree: true, attributeFilter: ['disabled']})
-</script>

app/views/measurements/_wide_table.html.erb

@@ -0,0 +1,41 @@
+<table class="items-table">
+  <thead>
+    <tr>
+      <th><%= Readout.human_attribute_name(:taken_at) %></th>
+      <% wide_quantities.each do |q| %>
+        <th><%= q.name %></th>
+      <% end %>
+      <th><%= Readout.human_attribute_name(:created_at) %></th>
+    </tr>
+  </thead>
+  <tbody>
+    <% wide_groups.each do |taken_at, readouts| %>
+      <tr>
+        <td><%= l(taken_at) if taken_at %></td>
+        <% wide_quantities.each do |q| %>
+          <% readout = readouts.find { |r| r.quantity_id == q.id } %>
+          <td class="ralign">
+            <% if readout %>
+              <span class="wide-cell">
+                <% if current_user.at_least(:active) %>
+                  <%= link_to format("%.10g", readout.value),
+                    edit_measurement_path(readout, view: :wide),
+                    class: 'link', onclick: 'this.blur();',
+                    data: {turbo_stream: true} %>
+                <% else %>
+                  <%= format("%.10g", readout.value) %>
+                <% end %>
+                &nbsp;<%= readout.unit.symbol %>
+                <% if current_user.at_least(:active) %>
+                  <%= image_button_to '', 'delete-outline', measurement_path(readout),
+                    method: :delete, data: {turbo_stream: true} %>
+                <% end %>
+              </span>
+            <% end %>
+          </td>
+        <% end %>
+        <td><%= l(readouts.first.created_at) %></td>
+      </tr>
+    <% end %>
+  </tbody>
+</table>

app/views/measurements/create.turbo_stream.erb

@@ -0,0 +1,13 @@
+<% if @readouts.present? && @readouts.all?(&:persisted?) %>
+  <%= turbo_stream.update :flashes %>
+  <%= turbo_stream.remove :measurement_form %>
+  <%= turbo_stream.enable :new_measurement_link %>
+  <%= turbo_stream.remove :no_items %>
+  <% @readouts.each do |readout| %>
+    <%= turbo_stream.prepend :measurements, partial: 'readout', locals: {readout: readout} %>
+  <% end %>
+  <%= turbo_stream.update 'measurements-wide', partial: 'wide_table',
+    locals: {wide_groups: @wide_groups, wide_quantities: @wide_quantities} %>
+<% else %>
+  <%= turbo_stream.update :flashes %>
+<% end %>

app/views/measurements/destroy.turbo_stream.erb

@@ -0,0 +1,5 @@
+<%= turbo_stream.update :flashes %>
+<%= turbo_stream.remove @readout %>
+<%= turbo_stream.append(:measurements, render_no_items) if current_user.readouts.empty? %>
+<%= turbo_stream.update 'measurements-wide', partial: 'wide_table',
+  locals: {wide_groups: @wide_groups, wide_quantities: @wide_quantities} %>

app/views/measurements/index.html.erb

@@ -1,5 +1,5 @@
 <%# TODO: show hint when no quantities/units defined %>
-<div class="rightside-area buttongrid">
+<div class="rightside-area buttongrid" data-controller="measurements-view">
   <% if current_user.at_least(:active) %>
     <%= image_link_to t('.new_measurement'), 'plus-outline', new_measurement_path,
       id: :new_measurement_link, onclick: 'this.blur();',
@@ -7,34 +7,35 @@
   <% end %>
   <%= image_button_tag '', 'view-rows', name: nil, type: 'button',
     class: 'view-toggle', title: t('.view_compact'),
-    data: {view: 'compact'}, onclick: "setMeasurementsView('compact')" %>
+    data: {view: 'compact', action: 'click->measurements-view#set',
+           'measurements-view-name-param': 'compact'} %>
   <%= image_button_tag '', 'view-columns', name: nil, type: 'button',
     class: 'view-toggle', title: t('.view_wide'),
-    data: {view: 'wide'}, onclick: "setMeasurementsView('wide')" %>
-
+    data: {view: 'wide', action: 'click->measurements-view#set',
+           'measurements-view-name-param': 'wide'} %>
 </div>
 
 <div class="main-area measurements-section">
   <%= tag.div id: :measurement_edit_form %>
-  <table class="items-table measurements-compact">
+  <table class="items-table measurements-compact" data-controller="measurements">
     <thead>
       <tr>
         <th><%= Quantity.model_name.human %></th>
         <th><%= Readout.human_attribute_name(:value) %></th>
         <th><%= Unit.model_name.human %></th>
-        <th><%= Readout.human_attribute_name(:taken_at) %></th>
-        <th><%= Readout.human_attribute_name(:created_at) %></th>
+        <th data-column="taken-at"><%= Readout.human_attribute_name(:taken_at) %></th>
+        <th data-column="created-at"><%= Readout.human_attribute_name(:created_at) %></th>
         <% if current_user.at_least(:active) %>
           <th></th>
         <% end %>
       </tr>
     </thead>
-    <tbody id="measurements">
+    <tbody id="measurements" data-measurements-target="tbody">
       <%= render(partial: 'readout', collection: @measurements, as: :readout) || render_no_items %>
     </tbody>
   </table>
 
-  <div id="measurements-wide" class="measurements-wide"></div>
-
+  <div id="measurements-wide" class="measurements-wide">
+    <%= render 'wide_table', wide_groups: @wide_groups, wide_quantities: @wide_quantities %>
+  </div>
 </div>
-

app/views/measurements/update.turbo_stream.erb

@@ -1,2 +1,4 @@
 <%= turbo_stream.close_form dom_id(@readout, :edit) %>
 <%= turbo_stream.replace @readout, partial: 'measurements/readout', locals: {readout: @readout} %>
+<%= turbo_stream.update 'measurements-wide', partial: 'wide_table',
+  locals: {wide_groups: @wide_groups, wide_quantities: @wide_quantities} %>

app/views/quantities/_form.html.erb

@@ -1,6 +1,7 @@
 <%= tabular_fields_for @quantity, form: form_tag do |form| %>
-  <%- tag.tr id: row, class: "form", onkeydown: "formProcessKey(event)",
-    data: {link: link, form: form_tag, hidden_row: hidden_row} do %>
+  <%- tag.tr id: row, class: "form",
+    data: {controller: 'form', action: 'keydown->form#processKey',
+           link: link, form: form_tag, hidden_row: hidden_row} do %>
 
     <td style="--depth:<%= @quantity.depth %>">
       <%= form.text_field :name, required: true, autofocus: true, size: 20 %>

app/views/quantities/_quantity.html.erb

@@ -1,9 +1,10 @@
 <%= tag.tr id: dom_id(quantity),
-           ondragstart: "dragStart(event)", ondragend: "dragEnd(event)",
-           ondragover: "dragOver(event)", ondrop: "drop(event)",
-           ondragenter: "dragEnter(event)", ondragleave: "dragLeave(event)",
-           data: {drag_path: reparent_quantity_path(quantity), drop_id: dom_id(quantity),
-                  drop_id_param: "quantity[parent_id]"} do %>
+           draggable: true,
+           data: {controller: 'drag',
+                  action: 'dragstart->drag#start dragend->drag#end dragover->drag#over drop->drag#drop dragenter->drag#enter dragleave->drag#leave',
+                  drag_drag_path_value: reparent_quantity_path(quantity),
+                  drag_drop_id_value: dom_id(quantity),
+                  drag_drop_id_param_value: 'quantity[parent_id]'} do %>
 
   <td style="--depth:<%= quantity.depth %>">
     <%= link_to quantity, edit_quantity_path(quantity), class: 'link',

app/views/quantities/index.html.erb

@@ -23,9 +23,10 @@
       <% end %>
     </tr>
     <%= tag.tr id: "quantity_", hidden: true,
-               ondragover: "dragOver(event)", ondrop: "drop(event)",
-               ondragenter: "dragEnter(event)", ondragleave: "dragLeave(event)",
-               data: {drop_id: "quantity_", drop_id_param: "quantity[parent_id]"} do %>
+               data: {controller: 'drag',
+                      action: 'dragover->drag#over drop->drag#drop dragenter->drag#enter dragleave->drag#leave',
+                      drag_drop_id_value: 'quantity_',
+                      drag_drop_id_param_value: 'quantity[parent_id]'} do %>
       <th colspan="5"><%= t '.top_level_drop' %></th>
     <% end %>
   </thead>

app/views/readouts/_form.html.erb

@@ -1,6 +1,6 @@
-<%# TODO: add readout reordering by dragging %>
 <%= tabular_fields_for 'readouts[]', readout do |form| %>
-  <%- tag.tr id: dom_id(readout.quantity, :new, :readout) do %>
+  <%- tag.tr id: dom_id(readout.quantity, :new, :readout),
+             data: {controller: 'readout-unit'} do %>
     <td>
       <%# TODO: add grayed readout index (in separate column?) %>
       <%= readout.quantity.relative_pathname(@superquantity) %>
@@ -13,16 +13,18 @@
       <%= form.collection_select :unit_id, @user_units, :id,
         ->(u){ sanitize('&emsp;' * (u.base_id ? 1 : 0) + u.symbol) },
         {prompt: '', disabled: '', selected: readout.quantity.default_unit_id || ''}, required: true,
-        data: {default_unit_id: readout.quantity.default_unit_id || ''},
-        onchange: "readoutUnitChanged(this)" %>
+        data: {default_unit_id: readout.quantity.default_unit_id || '',
+               readout_unit_target: 'select',
+               action: 'change->readout-unit#unitChanged'} %>
     </td>
     <td class="flex">
       <%# TODO: change to _link_ after giving up displaying relative paths %>
       <%= image_button_tag '', 'check-circle-outline',
         class: 'set-default-unit', name: nil, type: 'button', disabled: true,
         title: t('readouts.form.set_default_unit'),
-        data: {path: quantity_path(readout.quantity)},
-        onclick: 'setDefaultUnit(this)' %>
+        data: {path: quantity_path(readout.quantity),
+               readout_unit_target: 'button',
+               action: 'click->readout-unit#setDefault'} %>
       <%= image_button_tag '', 'delete-outline', class: 'dangerous', name: nil,
         formaction: discard_readouts_path(readout.quantity),
         formmethod: :get, formnovalidate: true, data: {turbo_stream: true} %>

app/views/units/_form.html.erb

@@ -1,6 +1,7 @@
 <%= tabular_fields_for @unit, form: form_tag do |form| %>
-  <%- tag.tr id: row, class: "form", onkeydown: "formProcessKey(event)",
-    data: {link: link, form: form_tag, hidden_row: hidden_row} do %>
+  <%- tag.tr id: row, class: "form",
+    data: {controller: 'form', action: 'keydown->form#processKey',
+           link: link, form: form_tag, hidden_row: hidden_row} do %>
 
     <td style="--depth:<%= @unit.base_id? ? 1 : 0 %>">
       <%= form.text_field :symbol, required: true, autofocus: true, size: 12 %>

app/views/units/_unit.html.erb

@@ -1,10 +1,10 @@
 <%= tag.tr id: dom_id(unit),
-           ondragstart: "dragStart(event)", ondragend: "dragEnd(event)",
-           ondragover: "dragOver(event)", ondrop: "drop(event)",
-           ondragenter: "dragEnter(event)", ondragleave: "dragLeave(event)",
-           data: {drag_path: rebase_unit_path(unit),
-                  drop_id: dom_id(unit.base || unit),
-                  drop_id_param: "unit[base_id]"} do %>
+           draggable: true,
+           data: {controller: 'drag',
+                  action: 'dragstart->drag#start dragend->drag#end dragover->drag#over drop->drag#drop dragenter->drag#enter dragleave->drag#leave',
+                  drag_drag_path_value: rebase_unit_path(unit),
+                  drag_drop_id_value: dom_id(unit.base || unit),
+                  drag_drop_id_param_value: 'unit[base_id]'} do %>
 
   <td style="--depth:<%= unit.base_id? ? 1 : 0 %>">
     <%= link_to unit, edit_unit_path(unit), class: 'link', onclick: 'this.blur();',

app/views/units/index.html.erb

@@ -22,9 +22,10 @@
       <% end %>
     </tr>
     <%= tag.tr id: "unit_", hidden: true,
-               ondragover: "dragOver(event)", ondrop: "drop(event)",
-               ondragenter: "dragEnter(event)", ondragleave: "dragLeave(event)",
-               data: {drop_id: "unit_", drop_id_param: "unit[base_id]"} do %>
+               data: {controller: 'drag',
+                      action: 'dragover->drag#over drop->drag#drop dragenter->drag#enter dragleave->drag#leave',
+                      drag_drop_id_value: 'unit_',
+                      drag_drop_id_param_value: 'unit[base_id]'} do %>
       <th colspan="5"><%= t '.top_level_drop' %></th>
     <% end %>
   </thead>

app/views/users/profiles/new.html.erb

@@ -1,5 +1,5 @@
 <%= labeled_form_for resource, url: user_registration_path,
-  html: {class: 'main-area', onsubmit: 'formValidate(event)'} do |f| %>
+  html: {class: 'main-area', data: {controller: 'form', action: 'submit->form#validate'}} do |f| %>
 
   <%= f.email_field :email, required: true, size: 30, autofocus: true,
     autocomplete: 'email' %>

app/views/users/sessions/new.html.erb

@@ -1,5 +1,5 @@
 <%= labeled_form_for resource, url: user_session_path,
-  html: {class: 'main-area', onsubmit: 'formValidate(event)'} do |f| %>
+  html: {class: 'main-area', data: {controller: 'form', action: 'submit->form#validate'}} do |f| %>
 
   <%= f.email_field :email, required: true, size: 30, autofocus: true,
     autocomplete: 'email' %>

config/credentials.yml.enc

@@ -1 +1 @@
-3nm9KZNtyLhPgZBVzOOkN2FXHD0uEMuzgb5Sl1MrAMmi6+iEFSzyTHfZFW2mz18VyNz5DDYvTODZqBDQKK+FQh70uEQkmGqaY5XsTOzUFzk56quaPNtZvFEGux1nX2avSbYQBs3HeyYyWyTAFhez5j8tVb6sZD2xZ8twa9KAB42j86NIHT9w/ZMFqZbGbdBoR1Mrqoy9/IWv2QgxMTpGR6JBpTUwauXm6wS/bTt8SCXF57JSVgvdw/BxFzoA3Xj6N5E89LbMfh54W2ruMhybka5E7zXN9z0v4oXt8GiYZFIODEYZwqzEVaUK1WXS5qb5OrDJFAzs29Uf/gDrIDx71Lot+jejCS+xFfI9454EnHcVH66wKuwF6ylKupJDffM0hQHplcEfVSq5UiDfbPXm46Vr0g1A--2RrmuzCBuHvYpPNA--ugbuRe7ivfDqeUCt6ahciA==
+yQ/e5AEwReoZ6yiIqCZjBbl2Tp41JNcuwfWF3FeSSk2K0XBtE+VQXHlAHMBPRwbBdkutB8jls+YKou3JX58j88BEH3Ft/8h7GIepYF+nOhdb79y05lqEhARA4IZYnHe1Do72MdmseE0ectfDpfk6Q1qnfiTFe3X1KyfLR0hiSEM5+1ZYfk2loUBWSIfgYuqtK7bEOZiL6imU46n4+58g3VZd0cK7getT7rwNlVt1s6ME9PTwT/RqE736fLEIyDeaEg8hBxTrPVeYyii2o4IWM02/0HsuRPxXLLQAgXyzHhlT9wo18X5FaaecgGloBie0UMrPS3j6oBlVn61WQbkuEe/yQKnzyiw0v5HSmzME4PiDTaSW2em/BtGiMAhJpyukipQa4/leR3OTJxv3TAMha1bnk/OC--QU+gjSEvBsZpr3XT--osCoTfqZ4ENeas+nFdXefA==

config/importmap.rb

@@ -2,3 +2,6 @@
 
 pin "application", preload: true
 pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
+pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
+pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
+pin_all_from "app/javascript/controllers", under: "controllers"

db/migrate/20260402000000_add_taken_at_to_readouts.rb

@@ -1,5 +1,6 @@
 class AddTakenAtToReadouts < ActiveRecord::Migration[7.2]
   def change
     add_column :readouts, :taken_at, :datetime
+    add_index :readouts, [:user_id, :taken_at]
   end
 end

db/schema.rb

@@ -39,6 +39,7 @@ ActiveRecord::Schema[7.2].define(version: 2026_04_03_000000) do
     t.index ["quantity_id"], name: "index_readouts_on_quantity_id"
     t.index ["unit_id"], name: "index_readouts_on_unit_id"
     t.index ["user_id"], name: "index_readouts_on_user_id"
+    t.index ["user_id", "taken_at"], name: "index_readouts_on_user_id_and_taken_at"
   end
 
   create_table "units", charset: "utf8mb4", collation: "utf8mb4_0900_as_ci", force: :cascade do |t|

db/seeds.rb

@@ -21,3 +21,4 @@ end
 #[Source, Quantity, Unit].each { |model| model.defaults.delete_all }
 
 require_relative 'seeds/units.rb'
+require_relative 'seeds/demo.rb'

db/seeds/demo.rb

@@ -0,0 +1,87 @@
+demo_email = 'demo@localhost'
+
+User.transaction do
+  break if User.find_by(email: demo_email)
+
+  demo = User.create! email: demo_email, password: 'demo123', status: :active do |user|
+    user.skip_confirmation!
+    print "Creating demo account '#{user.email}' with password '#{user.password}'..."
+  end
+  puts "done."
+
+  # --- Units ---
+  u = {}
+  u[:kg]  = demo.units.create! symbol: 'kg',  description: 'kilogram'
+  u[:g]   = demo.units.create! symbol: 'g',   description: 'gram',       base: u[:kg], multiplier: 1e-3
+  u[:cm]  = demo.units.create! symbol: 'cm',  description: 'centimetre'
+  u[:bpm] = demo.units.create! symbol: 'bpm', description: 'beats per minute'
+  u[:pct] = demo.units.create! symbol: '%',   description: 'percent'
+  u[:h]   = demo.units.create! symbol: 'h',   description: 'hour'
+  u[:min] = demo.units.create! symbol: 'min', description: 'minute',     base: u[:h], multiplier: (1.0/60).round(10)
+  u[:kcal]= demo.units.create! symbol: 'kcal',description: 'kilocalorie'
+  u[:mg]  = demo.units.create! symbol: 'mg',  description: 'milligram',  base: u[:kg], multiplier: 1e-6
+  u[:mmhg]= demo.units.create! symbol: 'mmHg',description: 'millimetre of mercury'
+
+  # --- Quantities ---
+  body      = demo.quantities.create! name: 'Body'
+  weight    = demo.quantities.create! name: 'Weight',        parent: body
+  height    = demo.quantities.create! name: 'Height',        parent: body
+  fat       = demo.quantities.create! name: 'Body fat',      parent: body
+
+  cardio    = demo.quantities.create! name: 'Cardiovascular'
+  hr_rest   = demo.quantities.create! name: 'Resting HR',    parent: cardio
+  hr_peak   = demo.quantities.create! name: 'Peak HR',       parent: cardio
+  bp_sys    = demo.quantities.create! name: 'BP systolic',   parent: cardio
+  bp_dia    = demo.quantities.create! name: 'BP diastolic',  parent: cardio
+
+  activity  = demo.quantities.create! name: 'Activity'
+  sleep_dur = demo.quantities.create! name: 'Sleep',         parent: activity
+  calories  = demo.quantities.create! name: 'Calories out',  parent: activity
+
+  nutrition = demo.quantities.create! name: 'Nutrition'
+  cal_in    = demo.quantities.create! name: 'Calories in',   parent: nutrition
+  caffeine  = demo.quantities.create! name: 'Caffeine',      parent: nutrition
+
+  # --- Readouts (60 days of daily-ish data) ---
+  base_time = 60.days.ago.beginning_of_day
+  rng = Random.new(42)
+
+  weight_val  = 82.4
+  fat_val     = 21.5
+  hr_rest_val = 62.0
+
+  60.times do |i|
+    t = base_time + i.days + rng.rand(3600 * 2)
+
+    weight_val  += rng.rand(-0.3..0.3)
+    fat_val     += rng.rand(-0.15..0.15)
+    hr_rest_val += rng.rand(-1.5..1.5)
+    hr_rest_val  = hr_rest_val.clamp(52, 72)
+
+    demo.readouts.create! quantity: weight,   unit: u[:kg],  value: weight_val.round(1),  created_at: t
+    demo.readouts.create! quantity: fat,      unit: u[:pct], value: fat_val.round(1),     created_at: t
+    demo.readouts.create! quantity: hr_rest,  unit: u[:bpm], value: hr_rest_val.round,    created_at: t
+
+    if i % 2 == 0
+      demo.readouts.create! quantity: bp_sys,  unit: u[:mmhg], value: (115 + rng.rand(-8..8)).round, created_at: t
+      demo.readouts.create! quantity: bp_dia,  unit: u[:mmhg], value: (75  + rng.rand(-5..5)).round,  created_at: t
+    end
+
+    if i % 3 == 0
+      demo.readouts.create! quantity: hr_peak, unit: u[:bpm], value: (155 + rng.rand(-10..10)).round, created_at: t
+    end
+
+    demo.readouts.create! quantity: sleep_dur, unit: u[:h],   value: (6.5 + rng.rand(-1.5..1.5)).round(1), created_at: t
+    demo.readouts.create! quantity: calories,  unit: u[:kcal],value: (2100 + rng.rand(-300..300)).round,    created_at: t
+    demo.readouts.create! quantity: cal_in,    unit: u[:kcal],value: (1900 + rng.rand(-400..400)).round,    created_at: t
+
+    if i % 4 == 0
+      demo.readouts.create! quantity: caffeine, unit: u[:mg], value: (200 + rng.rand(-80..80)).round, created_at: t
+    end
+  end
+
+  # height is stable — record once
+  demo.readouts.create! quantity: height, unit: u[:cm], value: 178.0, created_at: base_time
+
+  puts "  Created #{demo.units.count} units, #{demo.quantities.count} quantities, #{demo.readouts.count} readouts."
+end

test/controllers/measurements_controller_test.rb

@@ -1,7 +1,65 @@
 require "test_helper"
 
 class MeasurementsControllerTest < ActionDispatch::IntegrationTest
-  # test "the truth" do
-  #   assert true
-  # end
+  setup do
+    host! '127.0.0.1'
+    @user = users(:alice)
+    post new_user_session_path, params: { user: { email: @user.email, password: 'alice' } }
+    @quantity = @user.quantities.create!(name: 'Weight')
+    @unit = @user.units.create!(symbol: 'kg')
+  end
+
+  test "index returns ok" do
+    get measurements_path
+    assert_response :success
+  end
+
+  test "index requires authentication" do
+    delete destroy_user_session_path
+    get measurements_path
+    assert_response :redirect
+  end
+
+  test "create records readout with taken_at" do
+    taken_at = 1.day.ago.change(usec: 0)
+    assert_difference -> { @user.readouts.count } do
+      post measurements_path, params: {
+        taken_at: taken_at.iso8601,
+        readouts: [{ quantity_id: @quantity.id, value: '82.5', unit_id: @unit.id }]
+      }, as: :turbo_stream
+    end
+    assert_response :success
+    assert_equal taken_at, @user.readouts.last.taken_at
+  end
+
+  test "create with no readouts selected shows alert" do
+    post measurements_path, params: { taken_at: Time.now.iso8601 }, as: :turbo_stream
+    assert_response :success
+  end
+
+  test "destroy removes readout" do
+    readout = @user.readouts.create!(quantity: @quantity, unit: @unit, value: 82.5, taken_at: 1.day.ago)
+    assert_difference -> { @user.readouts.count }, -1 do
+      delete measurement_path(readout), as: :turbo_stream
+    end
+    assert_response :success
+  end
+
+  test "destroy cannot remove another user's readout" do
+    other_quantity = users(:bob).quantities.create!(name: 'Weight')
+    other_unit = users(:bob).units.create!(symbol: 'kg')
+    readout = users(:bob).readouts.create!(quantity: other_quantity, unit: other_unit, value: 70.0, taken_at: 1.day.ago)
+    assert_no_difference -> { users(:bob).readouts.count } do
+      delete measurement_path(readout), as: :turbo_stream
+    end
+  end
+
+  test "update changes readout value" do
+    readout = @user.readouts.create!(quantity: @quantity, unit: @unit, value: 82.5, taken_at: 1.day.ago)
+    patch measurement_path(readout), params: {
+      readout: { value: '83.0', unit_id: @unit.id, taken_at: readout.taken_at.iso8601 }
+    }, as: :turbo_stream
+    assert_response :success
+    assert_in_delta 83.0, readout.reload.value
+  end
 end