From bd1a664caa09456c5c2a8f10551a74d82d6508f2 Mon Sep 17 00:00:00 2001
From: cryptogopher <cryptogopher@noreply.me>
Date: Sat, 31 Jan 2026 17:22:09 +0100
Subject: [PATCH] Measurement form based on select-styled <details>

---
 app/assets/images/pictograms/chevron-down.svg |   1 +
 .../images/pictograms/pencil-outline.svg      |   1 +
 app/assets/stylesheets/application.css        | 123 +++++++++++--
 app/controllers/measurements_controller.rb    |  42 +----
 app/controllers/readouts_controller.rb        |  39 ++++
 app/helpers/application_helper.rb             |  11 +-
 app/helpers/quantities_helper.rb              |   9 +
 app/javascript/application.js                 | 173 +++++++++++++-----
 app/models/measurement.rb                     |   3 +
 app/models/quantity.rb                        |   5 +
 app/views/measurements/_form.html.erb         |  58 +++---
 app/views/measurements/_form_close.html.erb   |   4 +-
 app/views/measurements/_form_frame.html.erb   |  16 --
 app/views/measurements/_form_repath.html.erb  |   7 -
 .../measurements/discard.turbo_stream.erb     |   2 -
 app/views/measurements/index.html.erb         |  28 ++-
 app/views/measurements/new.turbo_stream.erb   |  10 +-
 app/views/quantities/_form.html.erb           |   2 +-
 app/views/quantities/index.html.erb           |   3 +-
 app/views/readouts/_form.html.erb             |  25 +++
 app/views/readouts/_form_repath.html.erb      |   7 +
 app/views/readouts/discard.turbo_stream.erb   |   4 +
 app/views/readouts/new.turbo_stream.erb       |   8 +
 app/views/units/_form.html.erb                |   2 +-
 config/initializers/core_ext.rb               |   1 +
 .../initializers/turbo_streams_tag_builder.rb |  12 ++
 config/locales/en.yml                         |  11 +-
 config/routes.rb                              |   6 +-
 lib/core_ext/array_delete_bang.rb             |  10 +
 29 files changed, 433 insertions(+), 190 deletions(-)
 create mode 100644 app/assets/images/pictograms/chevron-down.svg
 create mode 100644 app/assets/images/pictograms/pencil-outline.svg
 create mode 100644 app/controllers/readouts_controller.rb
 create mode 100644 app/models/measurement.rb
 delete mode 100644 app/views/measurements/_form_frame.html.erb
 delete mode 100644 app/views/measurements/_form_repath.html.erb
 delete mode 100644 app/views/measurements/discard.turbo_stream.erb
 create mode 100644 app/views/readouts/_form.html.erb
 create mode 100644 app/views/readouts/_form_repath.html.erb
 create mode 100644 app/views/readouts/discard.turbo_stream.erb
 create mode 100644 app/views/readouts/new.turbo_stream.erb
 create mode 100644 lib/core_ext/array_delete_bang.rb

diff --git a/app/assets/images/pictograms/chevron-down.svg b/app/assets/images/pictograms/chevron-down.svg
new file mode 100644
index 0000000..369236e
--- /dev/null
+++ b/app/assets/images/pictograms/chevron-down.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="icon" viewBox="0 0 24 24"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg>
diff --git a/app/assets/images/pictograms/pencil-outline.svg b/app/assets/images/pictograms/pencil-outline.svg
new file mode 100644
index 0000000..eb103c8
--- /dev/null
+++ b/app/assets/images/pictograms/pencil-outline.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="icon" viewBox="0 0 24 24"><path d="M14.06,9L15,9.94L5.92,19H5V18.08L14.06,9M17.66,3C17.41,3 17.15,3.1 16.96,3.29L15.13,5.12L18.88,8.87L20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18.17,3.09 17.92,3 17.66,3M14.06,6.19L3,17.25V21H6.75L17.81,9.94L14.06,6.19Z" /></svg>
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index 6fe64c8..4a93d84 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -49,6 +49,7 @@
 
 
 /* TODO: collapse gaps around empty rows (`topside`) once possible
+ * with grid-collapse property and remove alternative grid-template
  * https://github.com/w3c/csswg-drafts/issues/5813 */
 body {
   display: grid;
@@ -56,20 +57,27 @@ body {
   grid-template-areas:
     "header    header  header"
     "nav       nav     nav"
-    "leftempty topside rightempty"
+    "leftside  topside rightside"
     "leftside  main    rightside";
-  grid-template-columns: 1fr auto 1fr;
-  grid-template-rows: repeat(4, auto);
+  grid-template-columns: 1fr minmax(max-content, 2fr) 1fr;
   font-family: system-ui;
   margin: 0.4em;
 }
+body:not(:has(.topside)) {
+  grid-template-areas:
+    "header    header  header"
+    "nav       nav     nav"
+    "leftside  main    rightside";
+}
 button,
+details,
 input,
 select,
 textarea {
   background-color: inherit;
   font: inherit;
 }
+details,
 input,
 select {
   text-align: inherit;
@@ -86,9 +94,10 @@ input[type=submit] {
   text-decoration: none;
   white-space: nowrap;
 }
+/* [hidden] submit controls cannot have `display` set as it makes them visible */
 .button,
-button,
-input[type=submit],
+button:not([hidden]),
+input[type=submit]:not([hidden]),
 .tab {
   align-items: center;
   color: var(--color-gray);
@@ -105,11 +114,13 @@ input[type=submit] {
 }
 input:not([type=submit]):not([type=checkbox]),
 select,
+summary,
 textarea {
   padding: 0.2em 0.4em;
 }
 .button,
 button,
+details,
 input,
 select,
 textarea {
@@ -134,6 +145,9 @@ button > svg:not(:last-child) {
 fieldset {
   padding: 0.4em;
 }
+fieldset:not(:has(input, select, textarea)) {
+  display: none;
+}
 legend {
   color: var(--color-gray);
   display: flex;
@@ -191,6 +205,7 @@ input::-webkit-outer-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
+details:hover,
 input:hover,
 select:hover,
 textarea:hover {
@@ -203,9 +218,11 @@ textarea:invalid {
   border-color: var(--color-red);
   outline: solid 1px var(--color-red);
 }
+details:hover,
 select:hover {
   cursor: pointer;
 }
+details:focus-visible,
 input:focus-visible,
 select:focus-within,
 select:focus-visible,
@@ -417,10 +434,10 @@ table.items td.link a::after {
 table.items td:first-child {
   padding-inline-start: calc(1em + var(--depth) * 0.8em);
 }
-table.items td:has(input, textarea) {
+table.items td:has(input, select, textarea) {
   padding-inline-start: calc(0.6em - 0.9px);
 }
-table.items td:first-child:has(input, textarea) {
+table.items td:first-child:has(input, select, textarea) {
   padding-inline-start: calc(0.6em + var(--depth) * 0.8em - 0.9px);
 }
 table.items th:last-child {
@@ -484,12 +501,6 @@ table.items td:not(:first-child),
   color: var(--color-table-gray);
   fill: var(--color-table-gray);
 }
-table.items td.hint {
-  color: var(--color-table-gray);
-  font-style: italic;
-  font-size: 0.8rem;
-  padding: 1em;
-}
 table.items svg {
   height: 1.2rem;
   vertical-align: middle;
@@ -555,16 +566,34 @@ form table.items td:first-child {
 .extendedright {
   margin-right: auto;
 }
+.hexpand {
+  width: 100%;
+}
 .hflex {
   display: flex;
   gap: 0.8em;
 }
+.hflex.reverse {
+  flex-direction: row-reverse;
+}
+.hflex.centered {
+  justify-content: center;
+}
+.hint {
+  color: var(--color-table-gray);
+  font-style: italic;
+  font-size: 0.9rem;
+  text-align: center;
+}
 .vflex {
   display: flex;
   gap: 0.8em;
   flex-direction: column;
 }
 [disabled] {
+/* label:has(input[disabled]) {
+ * TODO: disabled checkbox blue square focus removal; disabled label styling
+ * */
   border-color: var(--color-border-gray) !important;
   color: var(--color-border-gray) !important;
   cursor: not-allowed;
@@ -574,3 +603,71 @@ form table.items td:first-child {
 .unwrappable {
   white-space: nowrap;
 }
+
+
+details {
+  align-content: center;
+  position: relative;
+}
+summary {
+  align-items: center;
+  color: var(--color-gray);
+  display: flex;
+  gap: 0.2em;
+  height: 100%;
+  white-space: nowrap;
+}
+summary::before {
+  background-color: #000;
+  content: "";
+  height: 1em;
+  mask-image: url('pictograms/chevron-down.svg');
+  mask-size: cover;
+  width: 1em;
+}
+summary:has(.button) {
+  padding-block: 0;
+  padding-inline-end: 0;
+}
+summary .button {
+  border: 1px var(--color-border-gray);
+  border-radius: 0;
+  border-style: none none none solid;
+  height: 100%;
+}
+summary span {
+  width: 100%;
+}
+details[open] summary::before {
+  transform: rotate(180deg);
+}
+summary::marker {
+  padding-left: 0.25em;
+}
+/* TODO: use ::details-content ? */
+details[open] ul {
+  background: white;
+  border: solid 1px var(--color-border-gray);
+  border-radius: 0.25em;
+  box-sizing: content-box;
+  box-shadow: 1px 1px 3px var(--color-border-gray);
+  margin: 0;
+  margin-left: -0.9px;
+  padding-left: 0;
+  position: absolute;
+  width: 100%;
+}
+li:hover {
+  background-color: var(--color-focus-gray);
+}
+li label {
+  align-items: center;
+  display: flex;
+  line-height: 1.4em;
+}
+li input[type=checkbox] {
+  margin: 0 0.25em;
+}
+li::marker {
+  content: '';
+}
diff --git a/app/controllers/measurements_controller.rb b/app/controllers/measurements_controller.rb
index 307aac8..ebe6622 100644
--- a/app/controllers/measurements_controller.rb
+++ b/app/controllers/measurements_controller.rb
@@ -1,36 +1,11 @@
 class MeasurementsController < ApplicationController
-  before_action :find_quantity, only: [:new, :discard]
-  before_action :find_prev_quantities, only: [:new, :discard]
-
   def index
-    @quantities = current_user.quantities.ordered
+    @measurements = []
+    #@measurements = current_user.units.ordered.includes(:base, :subunits)
   end
 
   def new
-    quantities =
-      case params[:scope]
-      when 'children'
-        @quantity.subquantities
-      when 'subtree'
-        @quantity.progenies
-      else
-        [@quantity]
-      end
-    quantities -= @prev_quantities
-    @readouts = current_user.readouts.build(quantities.map { |q| {quantity: q} })
-
-    @units = current_user.units.ordered
-
-    all_quantities = @prev_quantities + quantities
-    @common_ancestor = current_user.quantities
-      .common_ancestors(all_quantities.map(&:parent_id)).first
-  end
-
-  def discard
-    @prev_quantities -= [@quantity]
-
-    @common_ancestor = current_user.quantities
-      .common_ancestors(@prev_quantities.map(&:parent_id)).first
+    @quantities = current_user.quantities.ordered
   end
 
   def create
@@ -38,15 +13,4 @@ class MeasurementsController < ApplicationController
 
   def destroy
   end
-
-  private
-
-  def find_quantity
-    @quantity = current_user.quantities.find_by!(id: params[:id])
-  end
-
-  def find_prev_quantities
-    prev_quantity_ids = params[:readouts]&.map { |r| r[:quantity_id] } || []
-    @prev_quantities = current_user.quantities.find(prev_quantity_ids)
-  end
 end
diff --git a/app/controllers/readouts_controller.rb b/app/controllers/readouts_controller.rb
new file mode 100644
index 0000000..e47f271
--- /dev/null
+++ b/app/controllers/readouts_controller.rb
@@ -0,0 +1,39 @@
+class ReadoutsController < ApplicationController
+  before_action :find_quantities, only: [:new]
+  before_action :find_quantity, only: [:discard]
+  before_action :find_prev_quantities, only: [:new, :discard]
+
+  def new
+    @quantities -= @prev_quantities
+    # TODO: raise ParameterInvalid if new_quantities.empty?
+    @readouts = current_user.readouts.build(@quantities.map { |q| {quantity: q} })
+
+    @user_units = current_user.units.ordered
+
+    quantities = @prev_quantities + @quantities
+    @superquantity = current_user.quantities
+      .common_ancestors(quantities.map(&:parent_id)).first
+  end
+
+  def discard
+    @prev_quantities -= [@quantity]
+
+    @superquantity = current_user.quantities
+      .common_ancestors(@prev_quantities.map(&:parent_id)).first
+  end
+
+  private
+
+  def find_quantities
+    @quantities = current_user.quantities.find(params[:quantity])
+  end
+
+  def find_quantity
+    @quantity = current_user.quantities.find_by!(id: params[:id])
+  end
+
+  def find_prev_quantities
+    prev_quantity_ids = params[:readouts]&.map { |r| r[:quantity_id] } || []
+    @prev_quantities = current_user.quantities.find(prev_quantity_ids)
+  end
+end
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 1fce8a0..ebdd181 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -75,12 +75,11 @@ module ApplicationHelper
     end
 
     def number_field(method, options = {})
-      value = object.public_send(method)
-      if value.is_a?(BigDecimal)
-        options[:value] = value.to_scientific
-        type = object.class.type_for_attribute(method)
-        options[:step] ||= BigDecimal(10).power(-type.scale)
-        options[:max] ||= BigDecimal(10).power(type.precision - type.scale) -
+      attr_type = object.type_for_attribute(method)
+      if attr_type.type == :decimal
+        options[:value] = object.public_send(method)&.to_scientific
+        options[:step] ||= BigDecimal(10).power(-attr_type.scale)
+        options[:max] ||= BigDecimal(10).power(attr_type.precision - attr_type.scale) -
           options[:step]
         options[:min] = options[:min] == :step ? options[:step] : options[:min]
         options[:min] ||= -options[:max]
diff --git a/app/helpers/quantities_helper.rb b/app/helpers/quantities_helper.rb
index 9e6aa8b..2bb64b9 100644
--- a/app/helpers/quantities_helper.rb
+++ b/app/helpers/quantities_helper.rb
@@ -1,2 +1,11 @@
 module QuantitiesHelper
+  def quantities_check_boxes
+    # Closing <details> on focusout event depends on relatedTarget for internal
+    # actions being non-null. To ensure this, all top-layer elements of
+    # ::details-content must accept focus, e.g. <label> needs tabindex="-1" */
+    collection_check_boxes(nil, :quantity, @quantities, :id, :to_s_with_depth,
+                           include_hidden: false) do |b|
+      content_tag :li, b.label(tabindex: -1) { b.check_box + b.text }
+    end
+  end
 end
diff --git a/app/javascript/application.js b/app/javascript/application.js
index ad91a40..fd53123 100644
--- a/app/javascript/application.js
+++ b/app/javascript/application.js
@@ -9,31 +9,70 @@ function showPage(event) {
 }
 document.addEventListener('turbo:load', showPage)
 
+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}))
+});
+
 
 /* Turbo stream actions */
+Turbo.StreamElement.prototype.disableElement = function(element) {
+    element.setAttribute("disabled", "disabled")
+    element.setAttribute("aria-disabled", "true")
+    element.setAttribute("tabindex", "-1")
+}
+Turbo.StreamActions.disable = function() {
+  this.targetElements.forEach((e) => { this.disableElement(e) })
+}
+
 Turbo.StreamElement.prototype.enableElement = function(element) {
     element.removeAttribute("disabled")
     element.removeAttribute("aria-disabled")
-    // 'tabindex' is not used explicitly, so removing it is safe
+    // Assume 'tabindex' is not used explicitly, so removing it is safe
     element.removeAttribute("tabindex")
 }
-
-Turbo.StreamActions.disable = function() {
-  this.targetElements.forEach((e) => {
-    e.setAttribute("disabled", "disabled")
-    e.setAttribute("aria-disabled", "true")
-    e.setAttribute("tabindex", "-1")
-  })
-}
-
 Turbo.StreamActions.enable = function() {
   this.targetElements.forEach((e) => { this.enableElement(e) })
 }
 
+/* TODO: change to visibility = collapse to avoid width change? */
 Turbo.StreamActions.hide = function() {
   this.targetElements.forEach((e) => { e.style.display = "none" })
 }
 
+Turbo.StreamActions.show = function() {
+  this.targetElements.forEach((e) => { e.style.removeProperty("display") })
+}
+
+/*
+Turbo.StreamActions.collapse = function() {
+  this.targetElements.forEach((e) => { e.style.visibility = "collapse" })
+}
+*/
+
 Turbo.StreamActions.close_form = function() {
   this.targetElements.forEach((e) => {
     /* Move focus if there's no focus or focus inside form being closed */
@@ -54,28 +93,62 @@ Turbo.StreamActions.close_form = function() {
   })
 }
 
+Turbo.StreamActions.unselect = function() {
+  this.targetElements.forEach((e) => {
+    e.checked = false
+    this.enableElement(e)
+  })
+}
 
-/* Items table drag and drop support */
-function processKey(event) {
-  if (event.key == "Escape") {
-    event.currentTarget.querySelector("a[name=cancel]").click();
+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.processKey = processKey;
+window.formProcessKey = formProcessKey
 
-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";
+function detailsProcessKey(event) {
+  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.dragStart = dragStart;
+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):
@@ -87,44 +160,44 @@ window.dragStart = dragStart;
 * 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");
+  //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;
+window.dragEnter = dragEnter
 
 function dragOver(event) {
-  event.preventDefault();
+  event.preventDefault()
 }
-window.dragOver = dragOver;
+window.dragOver = dragOver
 
 function dragLeave(event) {
-  //console.log(event.timeStamp + " " + event.type + ": " + event.currentTarget.id);
+  //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;
+  if (event.timeStamp <= lastEnterTime) return
   event.currentTarget.closest("table").querySelectorAll(".dropzone").forEach((tr) => {
-    tr.classList.remove("dropzone");
-  });
+    tr.classList.remove("dropzone")
+  })
 }
-window.dragLeave = dragLeave;
+window.dragLeave = dragLeave
 
 function dragEnd(event) {
-  dragLeave(event);
+  dragLeave(event)
   event.currentTarget.closest("table").querySelectorAll("thead tr").forEach((tr) => {
-    tr.toggleAttribute("hidden");
-  });
+    tr.toggleAttribute("hidden")
+  })
 }
-window.dragEnd = dragEnd;
+window.dragEnd = dragEnd
 
 function drop(event) {
-  event.preventDefault();
+  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);
+  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,
@@ -138,4 +211,4 @@ function drop(event) {
   .then(response => response.text())
   .then(html => Turbo.renderStreamMessage(html))
 }
-window.drop = drop;
+window.drop = drop
diff --git a/app/models/measurement.rb b/app/models/measurement.rb
new file mode 100644
index 0000000..7d19965
--- /dev/null
+++ b/app/models/measurement.rb
@@ -0,0 +1,3 @@
+class Measurement
+  include ActiveModel::Model
+end
diff --git a/app/models/quantity.rb b/app/models/quantity.rb
index 6748492..ed81124 100644
--- a/app/models/quantity.rb
+++ b/app/models/quantity.rb
@@ -100,6 +100,11 @@ class Quantity < ApplicationRecord
     name
   end
 
+  def to_s_with_depth
+    # em space, U+2003
+    ' ' * depth + name
+  end
+
   def destroyable?
     subquantities.empty?
   end
diff --git a/app/views/measurements/_form.html.erb b/app/views/measurements/_form.html.erb
index f07159a..6bc81d6 100644
--- a/app/views/measurements/_form.html.erb
+++ b/app/views/measurements/_form.html.erb
@@ -1,25 +1,37 @@
-<% @readouts.each do |readout| %>
-  <%= tabular_fields_for 'readouts[]', readout do |form| %>
-    <%- tag.tr id: dom_id(readout.quantity, :new, :readout),
-               onkeydown: 'processKey(event)' do %>
-      <%= tag.td id: dom_id(readout.quantity, nil, :pathname) do %>
-        <%= readout.quantity.relative_pathname(@common_ancestor) %>
-      <%end%>
-      <td>
-        <%= form.number_field :value, required: true, autofocus: true, size: 10 %>
-      </td>
-      <td>
-        <%= form.select :unit_id, options_from_collection_for_select(
-          @units, :id, ->(u){ sanitize('&emsp;'*(u.base_id ? 1 : 0) + u.symbol) }
-        ) %>
-      </td>
+<%= tabular_form_with model: Measurement.new, id: :measurement_form,
+  class: 'topside vflex', html: {onkeydown: 'formProcessKey(event)'} do |form| %>
+  <fieldset>
+    <table class="items centered">
+      <tbody id="readouts"></tbody>
+    </table>
+  </fieldset>
 
-      <td class="actions">
-        <%= image_button_tag '', 'delete-outline', class: 'dangerous',
-          formaction: discard_new_measurement_path(readout.quantity),
-          formmethod: :get, formnovalidate: true, data: {turbo_stream: true} %>
-        <%= form.hidden_field :quantity_id %>
-      </td>
-    <% end %>
-  <% end %>
+  <div class="hflex">
+    <details id="quantity_select" class="hexpand" open
+             onkeydown="detailsProcessKey(event)">
+      <summary autofocus>
+        <!-- TODO: Set content with CSS when span empty to avoid duplication -->
+        <span data-prompt="<%= t('.select_quantity') %>">
+          <%= 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} %>
+      </summary>
+      <ul><%= quantities_check_boxes %></ul>
+    </details>
+    <%= form.button id: :create_measurement_button, disabled: true -%>
+  </div>
+
+  <div class="hflex reverse">
+    <%= image_link_to t(:cancel), "close-outline", measurements_path, name: :cancel,
+      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>
diff --git a/app/views/measurements/_form_close.html.erb b/app/views/measurements/_form_close.html.erb
index a171e26..78511d4 100644
--- a/app/views/measurements/_form_close.html.erb
+++ b/app/views/measurements/_form_close.html.erb
@@ -1,2 +1,4 @@
-<%= turbo_stream.update :new_readouts_form %>
 <%= turbo_stream.update :flashes %>
+<%= turbo_stream.remove :measurement_form %>
+<%= turbo_stream.show :no_items -%>
+<%= turbo_stream.enable :new_measurement_link -%>
diff --git a/app/views/measurements/_form_frame.html.erb b/app/views/measurements/_form_frame.html.erb
deleted file mode 100644
index fa7e7de..0000000
--- a/app/views/measurements/_form_frame.html.erb
+++ /dev/null
@@ -1,16 +0,0 @@
-<%= tabular_fields_for Readout.new do |form| %>
-  <fieldset>
-    <legend>
-      <%= tag.span id: :new_readouts_form_legend %>
-      <%= image_link_to '', "close-outline", measurements_path, name: :cancel,
-        class: 'dangerous', onclick: render_turbo_stream('form_close') %>
-    </legend>
-    <table class="items centered">
-      <tbody id="readouts">
-        <tr id="new_readouts_actions">
-          <td colspan="4"><div class="actions centered"><%= form.button %></div></td>
-        </tr>
-      </tbody>
-    </table>
-  </fieldset>
-<% end %>
diff --git a/app/views/measurements/_form_repath.html.erb b/app/views/measurements/_form_repath.html.erb
deleted file mode 100644
index 3edfd12..0000000
--- a/app/views/measurements/_form_repath.html.erb
+++ /dev/null
@@ -1,7 +0,0 @@
-<%= turbo_stream.update(:new_readouts_form_legend) { @common_ancestor&.pathname } %>
-
-<% @prev_quantities.each do |pq| %>
-  <%= turbo_stream.update dom_id(pq, nil, :pathname) do %>
-    <%= pq.relative_pathname(@common_ancestor) %>
-  <% end %>
-<% end %>
diff --git a/app/views/measurements/discard.turbo_stream.erb b/app/views/measurements/discard.turbo_stream.erb
deleted file mode 100644
index 192a732..0000000
--- a/app/views/measurements/discard.turbo_stream.erb
+++ /dev/null
@@ -1,2 +0,0 @@
-<%= turbo_stream.remove dom_id(@quantity, :new, :readout) %>
-<%= render partial: 'form_repath' %>
diff --git a/app/views/measurements/index.html.erb b/app/views/measurements/index.html.erb
index 2bc361d..4951c46 100644
--- a/app/views/measurements/index.html.erb
+++ b/app/views/measurements/index.html.erb
@@ -1,20 +1,14 @@
-<div class="topside vflex">
+<%# TODO: show hint when no quantities/units defined %>
+<div class="rightside buttongrid">
   <% if current_user.at_least(:active) %>
-    <%# TODO: show hint when no quantities/units defined %>
-    <%= tabular_form_with url: new_measurement_path,
-      html: {id: :new_readouts_form} do |f| %>
-    <% end %>
-    <div class="hflex">
-      <%= select_tag :id, options_from_collection_for_select(
-        @quantities, :id, ->(q){ sanitize('&emsp;' * q.depth + q.name) }
-      ), form: :new_readouts_form %>
-      <% common_options = {form: :new_readouts_form, formmethod: :get,
-                           formnovalidate: true, data: {turbo_stream: true}} %>
-      <%= image_button_tag t('.new_quantity'), 'plus-outline', **common_options -%>
-      <%= image_button_tag t('.new_children'), 'plus-multiple-outline',
-        formaction: new_measurement_path(:children), **common_options -%>
-      <%= image_button_tag t('.new_subtree'), 'plus-multiple-outline',
-        formaction: new_measurement_path(:subtree), **common_options -%>
-    </div>
+    <%= image_link_to t('.new_measurement'), 'plus-outline', new_measurement_path,
+      id: :new_measurement_link, onclick: 'this.blur();',
+      data: {turbo_stream: true} %>
   <% end %>
 </div>
+
+<table class="main">
+  <tbody id="measurements">
+    <%= render(@measurements) || render_no_items %>
+  </tbody>
+</table>
diff --git a/app/views/measurements/new.turbo_stream.erb b/app/views/measurements/new.turbo_stream.erb
index 23f5364..253ac8a 100644
--- a/app/views/measurements/new.turbo_stream.erb
+++ b/app/views/measurements/new.turbo_stream.erb
@@ -1,9 +1,5 @@
-<%= turbo_stream.update :new_readouts_form do %>
-  <%= render partial: 'form_frame' %>
-<% end if @prev_quantities.empty? %>
-
-<%= render partial: 'form_repath' %>
-
-<%= turbo_stream.before :new_readouts_actions do %>
+<%= turbo_stream.disable :new_measurement_link -%>
+<%= turbo_stream.hide :no_items -%>
+<%= turbo_stream.append_all 'body' do %>
   <%= render partial: 'form' %>
 <% end %>
diff --git a/app/views/quantities/_form.html.erb b/app/views/quantities/_form.html.erb
index 0e5a39d..3597590 100644
--- a/app/views/quantities/_form.html.erb
+++ b/app/views/quantities/_form.html.erb
@@ -1,5 +1,5 @@
 <%= tabular_fields_for @quantity, form: form_tag do |form| %>
-  <%- tag.tr id: row, class: "form", onkeydown: "processKey(event)",
+  <%- tag.tr id: row, class: "form", onkeydown: "formProcessKey(event)",
     data: {link: link, form: form_tag, hidden_row: hidden_row} do %>
 
     <td style="--depth:<%= @quantity.depth %>">
diff --git a/app/views/quantities/index.html.erb b/app/views/quantities/index.html.erb
index 0ed1454..ea42e34 100644
--- a/app/views/quantities/index.html.erb
+++ b/app/views/quantities/index.html.erb
@@ -1,7 +1,8 @@
 <div class="rightside buttongrid">
   <% if current_user.at_least(:active) %>
     <%= image_link_to t('.new_quantity'), 'plus-outline', new_quantity_path,
-      id: dom_id(Quantity, :new, :link), onclick: 'this.blur();', data: {turbo_stream: true} %>
+      id: dom_id(Quantity, :new, :link), onclick: 'this.blur();',
+      data: {turbo_stream: true} %>
   <% end %>
   <%#= image_link_to t('.import_quantities'), 'download-outline', default_quantities_path,
     class: 'tools' %>
diff --git a/app/views/readouts/_form.html.erb b/app/views/readouts/_form.html.erb
new file mode 100644
index 0000000..d769a23
--- /dev/null
+++ b/app/views/readouts/_form.html.erb
@@ -0,0 +1,25 @@
+<%# TODO: add readout reordering by dragging %>
+<%= tabular_fields_for 'readouts[]', readout do |form| %>
+  <%- tag.tr id: dom_id(readout.quantity, :new, :readout) do %>
+    <td class="actions">
+      <%# TODO: change to _link_ after giving up displaying relative paths %>
+      <%= image_button_tag '', 'delete-outline', class: 'dangerous', name: nil,
+        formaction: discard_readouts_path(readout.quantity),
+        formmethod: :get, formnovalidate: true, data: {turbo_stream: true} %>
+    </td>
+    <td>
+      <%= readout.quantity.relative_pathname(@superquantity) %>
+    </td>
+    <td>
+      <%= form.number_field :value, required: true,
+        size: readout.type_for_attribute(:value).precision / 2,
+        autofocus: readout_counter == 0 %>
+    </td>
+    <td>
+      <%= form.hidden_field :quantity_id %>
+      <%= form.collection_select :unit_id, @user_units, :id,
+        ->(u){ sanitize('&emsp;' * (u.base_id ? 1 : 0) + u.symbol) },
+        {prompt: t('.select_unit'), disabled: '', selected: ''}, required: true %>
+    </td>
+  <% end %>
+<% end %>
diff --git a/app/views/readouts/_form_repath.html.erb b/app/views/readouts/_form_repath.html.erb
new file mode 100644
index 0000000..5743dec
--- /dev/null
+++ b/app/views/readouts/_form_repath.html.erb
@@ -0,0 +1,7 @@
+<%= turbo_stream.update(:measurement_form_legend) { @superquantity&.pathname } %>
+
+<% @prev_quantities.each do |pq| %>
+  <%= turbo_stream.update dom_id(pq, nil, :pathname) do %>
+    <%= pq.relative_pathname(@superquantity) %>
+  <% end %>
+<% end %>
diff --git a/app/views/readouts/discard.turbo_stream.erb b/app/views/readouts/discard.turbo_stream.erb
new file mode 100644
index 0000000..6966b40
--- /dev/null
+++ b/app/views/readouts/discard.turbo_stream.erb
@@ -0,0 +1,4 @@
+<%= turbo_stream.disable :create_measurement_button if @prev_quantities.one? %>
+<%= turbo_stream.remove dom_id(@quantity, :new, :readout) %>
+<%= render partial: 'form_repath' %>
+<%= turbo_stream.unselect dom_id(@quantity) %>
diff --git a/app/views/readouts/new.turbo_stream.erb b/app/views/readouts/new.turbo_stream.erb
new file mode 100644
index 0000000..04ae31e
--- /dev/null
+++ b/app/views/readouts/new.turbo_stream.erb
@@ -0,0 +1,8 @@
+<% @readouts.each do |r| %>
+  <%= turbo_stream.disable dom_id(r.quantity) %>
+<% end %>
+<%= render partial: 'form_repath' %>
+<%= turbo_stream.append :readouts do %>
+  <%= render partial: 'form', collection: @readouts, as: :readout %>
+<% end %>
+<%= turbo_stream.enable :create_measurement_button if @prev_quantities.empty? %>
diff --git a/app/views/units/_form.html.erb b/app/views/units/_form.html.erb
index 7fc73af..c419874 100644
--- a/app/views/units/_form.html.erb
+++ b/app/views/units/_form.html.erb
@@ -1,5 +1,5 @@
 <%= tabular_fields_for @unit, form: form_tag do |form| %>
-  <%- tag.tr id: row, class: "form", onkeydown: "processKey(event)",
+  <%- tag.tr id: row, class: "form", onkeydown: "formProcessKey(event)",
     data: {link: link, form: form_tag, hidden_row: hidden_row} do %>
 
     <td style="--depth:<%= @unit.base_id? ? 1 : 0 %>">
diff --git a/config/initializers/core_ext.rb b/config/initializers/core_ext.rb
index e73da73..1233f1b 100644
--- a/config/initializers/core_ext.rb
+++ b/config/initializers/core_ext.rb
@@ -1,3 +1,4 @@
+require 'core_ext/array_delete_bang'
 require 'core_ext/big_decimal_scientific_notation'
 
 ActiveSupport.on_load :action_dispatch_system_test_case do
diff --git a/config/initializers/turbo_streams_tag_builder.rb b/config/initializers/turbo_streams_tag_builder.rb
index 6de180a..70fc9c1 100644
--- a/config/initializers/turbo_streams_tag_builder.rb
+++ b/config/initializers/turbo_streams_tag_builder.rb
@@ -19,7 +19,19 @@ ActiveSupport.on_load :turbo_streams_tag_builder do
     action :hide, target, allow_inferred_rendering: false
   end
 
+  def show(target)
+    action :show, target, allow_inferred_rendering: false
+  end
+
+  #def collapse(target)
+  #  action :collapse, target, allow_inferred_rendering: false
+  #end
+
   def close_form(target)
     action :close_form, target, allow_inferred_rendering: false
   end
+
+  def unselect(target)
+    action :unselect, target, allow_inferred_rendering: false
+  end
 end
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 91d310f..2d4286a 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -64,10 +64,14 @@ en:
       source_code: Get code
   measurements:
     navigation: Measurements
+    no_items: There are no measurements taken. You can Add some now.
+    form:
+      select_quantity: select the measured quantities...
     index:
-      new_quantity: Selected
-      new_children: Children
-      new_subtree: Subtree
+      new_measurement: Add measurement
+  readouts:
+    form:
+      select_unit: ...
   quantities:
     navigation: Quantities
     no_items: There are no configured quantities. You can Add some or Import from defaults.
@@ -149,6 +153,7 @@ en:
       other: (%{count} characters minimum)
   actions: Actions
   add: Add
+  apply: Apply
   back: Back
   cancel: Cancel
   delete: Delete
diff --git a/config/routes.rb b/config/routes.rb
index 6218a39..7d3035d 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -1,8 +1,8 @@
 Rails.application.routes.draw do
-  resources :measurements, path_names: {new: '/new(/:scope)'},
-    constraints: {scope: /children|subtree/}, defaults: {scope: nil} do
+  resources :measurements
 
-    get 'discard/:id', on: :new, action: :discard, as: :discard
+  resources :readouts, only: [:new] do
+    collection {get 'new/:id/discard', action: :discard, as: :discard}
   end
 
   resources :quantities, except: [:show], path_names: {new: '(/:id)/new'} do
diff --git a/lib/core_ext/array_delete_bang.rb b/lib/core_ext/array_delete_bang.rb
new file mode 100644
index 0000000..c10f974
--- /dev/null
+++ b/lib/core_ext/array_delete_bang.rb
@@ -0,0 +1,10 @@
+module CoreExt
+  module ArrayDeleteBang
+    def delete!(obj)
+      self.delete(obj)
+      self
+    end
+  end
+end
+
+Array.prepend CoreExt::ArrayDeleteBang