Fix quantity ordered scope for SQLite: use pathname column instead of recursive CTE

SQLite's Arel visitor wraps CTE branches in extra parentheses, making the UNION ALL inside recursive CTEs invalid. Also SQLite lacks LPAD() and CAST(... AS BINARY). Fix by using the existing pathname column for ordering on SQLite, which already encodes the hierarchical path. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Implement measurements create/destroy and index listing
2026-03-10 18:41:03 +00:00 · 2026-03-10 18:24:27 +00:00
72 changed files with 650 additions and 1588 deletions
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -1,122 +0,0 @@
 # CLAUDE.md
 This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
 ## Project Overview
 Fixin.me is a "quantified self" Rails 7.2.3 application for personal data tracking. Users define hierarchical **quantities** (metrics to track), **units** (with optional conversion hierarchies), and **readouts** (individual measurements). There is also a non-persistent **measurement** model used as a form wrapper.
 ## Setup
 Configuration files are distributed as `.dist` templates — copy and customize before use:
 ```bash
 cp config/application.rb.dist config/application.rb
 cp config/database.yml.dist config/database.yml
 cp config/puma.rb.dist config/puma.rb
 ```
 ```bash
 bundle config --local frozen true
 bundle config --local path .gem
 bundle config --local with mysql development test   # or: pg, sqlite
 bundle install
 RAILS_ENV=development bundle exec rails db:create db:migrate db:seed
 ```
 ## Common Commands
 ```bash
 bundle exec rails s                                          # start server
 bundle exec rails test                                       # all unit/model/controller tests
 bundle exec rails test:system                                # all system tests (Capybara + Selenium)
 bundle exec rails test test/system/units_test.rb            # single test file
 bundle exec rails test --seed 64690 --name test_add_unit    # single test by name
 bundle exec rails db:seed:export                             # export default settings as seed file
 ```
 ## Architecture
 ### Data Model
 - **Quantity** — hierarchical tree (self-referential `parent_id`). Cached `depth` and `pathname` fields are recomputed via recursive CTEs on write. Direct assignment to cached fields is blocked.
 - **Unit** — optional hierarchy via `base_id` and `multiplier` for unit conversion. Multiplier precision/scale is validated by a custom validator.
 - **Readout** — single measurement: `value` (IEEE 754 float), `quantity`, `unit`, `category`.
 - **Measurement** — `ActiveModel::Model` form wrapper (not database-backed); bridges the readout creation form.
 - **User** — Devise-managed with a status enum: `admin`, `active`, `restricted`, `locked`, `disabled`. Admins can disguise as other users.
 ### Hierarchical Queries
 Both `Quantity` and `Unit` use recursive CTEs for tree traversal (ordered traversal, ancestors, progenies, common ancestors). `lib/core_ext/arel/` patches Arel to support CTE with `UPDATE`/`DELETE` statements, working around Rails issue #54658.
 ### Custom Extensions (`lib/core_ext/`)
 - **arel/** — CTE support for UPDATE/DELETE
 - **active_model/** — precision/scale validator used by `Unit#multiplier`
 - **active_record/** — `attr_cached` mechanism (see `ApplicationRecord`)
 - **action_view/** — record identifier suffixes
 - Miscellaneous: `Array#delete_bang`, `BigDecimal` scientific notation
 ### Response Handling
 Controllers respond to both HTML and Turbo Stream formats. Errors during Turbo Stream requests trigger a redirect with flash rather than rendering inline, handled in `ApplicationController`.
 ### Numeric Precision
 Readout values are stored as IEEE 754 double-precision floats (not fixed-point decimals). Rationale in `DESIGN.md`: biological values span many orders of magnitude; 15-digit float precision is sufficient and avoids conversion overhead.
 ### Routes
 ```
 measurements   GET/POST /measurements
 readouts       GET/POST /readouts, DELETE /readouts/:id/discard
 quantities     CRUD + POST /quantities/:id/reparent
 units          CRUD + POST /units/:id/rebase
 users          CRUD + POST /users/:id/disguise, POST /users/revert
 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:
 - Recursive CTEs with `UPDATE`/`DELETE` (MySQL ≥ 8.0, PostgreSQL, or SQLite3)
 - Decimal precision of 30+ digits
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -1,34 +0,0 @@
 DESIGN
 ======
 Below is a list of design decisions. The justification is to be consulted
 whenever a change is considered, to avoid regressions.
 ### Data type for DB storage of numeric values (`decimal` vs `float`)
 * among database engines supported (by Rails), SQLite offers storage of
  `decimal` data type with the lowest precision, equal to the precision of
  `REAL` type (double precision float value, IEEE 754), but in a floating point
  format,
    * decimal types in other database engines offer greater precision, but store
      data in a fixed point format,
 * biology-related values differ by several orders of magnitude; storing them in
  fixed point format would only make sense if required precision would be
  greater than that offered by floating point format,
    * even then, fixed point would mean either bigger memory requirements or
      worse precision for numbers close to scale limit,
        * for a fixed point format to use the same 8 bytes of storage as IEEE
          754, precision would need to be limited to 18 digits (4 bytes/9 digits)
          and scale approximately half of that - 9,
    * double precision floating point guarantees 15 digits of precision, which
      is more than enough for all expected use cases,
        * single precision floating point only guarntees 6 digits of precision,
          which is estimated to be too low for some use cases (e.g. storing
          latitude/longitude with a resolution grater than 100m)
 * double precision floating point (IEEE 754) is a standard that ensures
  compatibility with all database engines,
    * the same data format is used internally by Ruby as a `Float`; it
      guarantees no conversions between storage and computation,
    * as a standard with hardware implementations ensures both: computing
      efficiency and hardware/3rd party library compatibility as opposed to Ruby
      custom `BigDecimal` type
--- a/1
+++ b/1
@@ -25,7 +25,6 @@ gem "devise"
 gem "importmap-rails"
 gem "turbo-rails", "~> 2.0"
 gem "stimulus-rails"
 group :development, :test do
  gem "byebug"
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -273,8 +273,6 @@ 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)
@@ -326,7 +324,6 @@ DEPENDENCIES
  selenium-webdriver
  sprockets-rails
  sqlite3 (~> 2.7)
  stimulus-rails
  turbo-rails (~> 2.0)
  tzinfo-data
  web-console
--- a/app/assets/images/pictograms/alert-outline.svg
+++ b/app/assets/images/pictograms/alert-outline.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" id="icon" viewBox="0 0 24 24"><path d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16" /></svg>
+<svg xmlns="http://www.w3.org/2000/svg" id="icon" viewBox="0 0 24 24"><path fill="#ffffff" d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16" /></svg>
--- a/app/assets/images/pictograms/chart-line.svg
+++ b/app/assets/images/pictograms/chart-line.svg
--- a/app/assets/images/pictograms/check-circle-outline.svg
+++ b/app/assets/images/pictograms/check-circle-outline.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" id="icon" viewBox="0 0 24 24"><path d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z" /></svg>
+<svg xmlns="http://www.w3.org/2000/svg" id="icon" viewBox="0 0 24 24"><path fill="#ffffff" d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z" /></svg>
--- a/app/assets/images/pictograms/view-columns.svg
+++ b/app/assets/images/pictograms/view-columns.svg
@@ -1 +0,0 @@
 <svg xmlns="http://www.w3.org/2000/svg" id="icon" viewBox="0 0 24 24"><path d="M4,4H8V20H4V4M10,4H14V20H10V4M16,4H21V20H16V4Z"/></svg>
--- a/app/assets/images/pictograms/view-rows.svg
+++ b/app/assets/images/pictograms/view-rows.svg
@@ -1 +0,0 @@
 <svg xmlns="http://www.w3.org/2000/svg" id="icon" viewBox="0 0 24 24"><path d="M3,5H21V7H3V5M3,11H21V13H3V11M3,17H21V19H3V17Z"/></svg>
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -18,12 +18,10 @@
 /* Strive for simplicity:
 * * style elements/tags only - if possible,
 * * replace element/tag name with class name - if element has to be styled
- * differently depending on context (e.g. <form>, <table>, <a> as link/button),
+ * differently depending on context (e.g. form)
 * * styles with multiple selectors should have all selectors with same
 * specificity, to allow proper rule specificity vs order management.
 *
- * NOTE: style in a modular way, similar to how CSS @scope would be used,
+ * NOTE: Style in a modular way, similar to how CSS @scope would be used,
- * to make transition easier once @scope is widely available. */
+ * to make transition easier once @scope is widely available */
 :root {
  --color-focus-gray: #f3f3f3;
  --color-border-gray: #dddddd;
@@ -36,7 +34,6 @@
  --color-blue: #009ade;
  --color-dark-red: #b21237;
  --color-red: #ff1f5b;
  --color-purple: #8b2be2;
  --depth: 0;
@@ -56,36 +53,17 @@
 :focus-visible {
  outline: none;
 }
 /* NOTE: move to higher priority layer instead of using !important?; add CSS
 * @layer requirements in README */
 [disabled] {
  border-color: var(--color-border-gray) !important;
  color: var(--color-border-gray) !important;
  /* NOTE: cannot set cursor when `pointer-events: none`; can be fixed by setting
   * `cursor` on wrapping element.
  cursor: not-allowed; */
  fill: var(--color-border-gray) !important;
  pointer-events: none !important;
 }
 /* Styles set `display` without distinguishing between [hidden] elements, making
 * them visible. */
 [hidden] {
  display: none !important;
 }
 /* Color coding of input controls' background:
- *  blue - target for interaction with pointer,
+ *  blue - target for interaction with pointer
- *  gray - target for interaction with keyboard,
+ *  gray - target for interaction with keyboard
- *  red - destructive, non-undoable action.
+ *  red - destructive, non-undoable action
 */
 /* TODO: merge selectors using :is() */
 a,
 button,
 details,
 input,
 select,
 summary,
 textarea {
  background-color: inherit;
  font: inherit;
@@ -95,29 +73,56 @@ input,
 select {
  text-align: inherit;
 }
 a,
 button,
 input[type=submit] {
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
 }
 /* [hidden] submit controls cannot have `display` set as it makes them visible */
 .button,
 button:not([hidden]),
 input[type=submit]:not([hidden]),
 .tab {
  align-items: center;
  color: var(--color-gray);
  display: flex;
  fill: var(--color-gray);
  font-weight: bold;
 }
 .button,
 button,
 input[type=submit] {
  font-size: 0.8rem;
  padding: 0.6em 0.5em;
  width: fit-content;
 }
 input:not([type=submit]):not([type=checkbox]),
 select,
 summary,
 textarea {
  padding: 0.2em 0.4em;
 }
 .button,
 button,
 input,
 select,
 summary,
 textarea {
-  border: 1px solid var(--color-gray);
+  border: solid 1px var(--color-gray);
  border-radius: 0.25em;
  padding: 0.2em 0.4em;
 }
-svg {
+[name=cancel],
-  height: 1.4em;
+.auxiliary {
-  margin: 0 0.2em 0 0;
+  border-color: var(--color-border-gray);
-  width: 1.4em;
+  color: var(--color-nav-gray);
-}
+  fill: var(--color-nav-gray);
 svg:last-child {
  margin-right: 0;
 }
 .chart-panel svg {
  height: auto;
  margin: 0;
  width: auto;
 }
 input[type=checkbox],
 svg,
 textarea {
-  margin: 0;
+  margin: 0
 }
 input[type=checkbox] {
  accent-color: var(--color-blue);
@@ -125,20 +130,17 @@ input[type=checkbox] {
  -webkit-appearance: none;
  display: flex;
  height: 1.1em;
  margin: 0;
  padding: 0;
  width: 1.1em;
 }
 input[type=checkbox]:checked {
  appearance: checkbox;
  -webkit-appearance: checkbox;
 }
-/* Hide spin buttons of <input type=number>. */
+/* Hide spin buttons in input number fields */
-/* TODO: add spin buttons inside <input type=number>: before (-) and after (+) input. */
+/* TODO: add spin buttons inside input[number]: before (-) and after (+) input */
 input[type=number] {
  appearance: textfield;
  -moz-appearance: textfield;
  text-align: end;
 }
 input::-webkit-inner-spin-button {
  -webkit-appearance: none;
@@ -147,112 +149,37 @@ input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
 }
-/* Text color of table form controls:
+.button > svg,
- *  - black for row/table forms,
+.tab > svg,
- *  - inherited for internal (column specific) buttons/forms. */
+button > svg {
-table input,
+  height: 1.4em;
-table select,
+  width: 1.4em;
 table summary,
 table textarea {
  border-color: var(--color-border-gray);
 }
-table input,
+.button > svg:not(:last-child),
-table select,
+.tab > svg:not(:last-child),
-table textarea {
+button > svg:not(:last-child) {
-  padding-block: 0.375em;
+  margin-right: 0.2em;
 }
-table form input,
+/* TODO: move normal non-button links (<a>:hover/:focus) styling here (i.e.
-table form select,
+ * page-wide, top-level) and remove from table.items - as the style should be
-table form summary,
+ * same everywhere */
-table form textarea {
+.button:focus-visible,
-  color: inherit;
+button:focus-visible,
-}
+input[type=submit]:focus-visible {
-table svg:not(:only-child) {
+  background-color: var(--color-focus-gray);
  height: 1.25em;
  width: 1.25em;
 }
 input:focus-visible,
 select:focus-visible,
 select:focus-within,
-/* TODO: how to achieve `summary:focus-within` for `::details-content`? */
+/* TODO: how to achieve summary:focus-within for ::details-content? */
 summary:focus-visible,
 textarea:focus-visible {
  accent-color: var(--color-dark-blue);
  background-color: var(--color-focus-gray);
  color: black;
 }
-input:hover,
+.button:hover,
-select:hover,
+button:hover,
-summary:hover,
+input[type=submit]:hover {
 textarea:hover {
  border-color: var(--color-blue);
  outline: 1px solid var(--color-blue);
 }
 select:hover,
 summary:hover {
  color: black;
  cursor: pointer;
 }
 /* TODO: style <details>/<summary> focus to match <select> as much as possible.
 summary:focus-visible::before,
 summary:hover::before {
  background-color: black;
 }
 */
 input:invalid,
 select:invalid,
 textarea:invalid {
  border-color: var(--color-red);
  outline-color: var(--color-red);
 }
 /* `.button`: button-styled <a>, <button>, <input type=submit>.
 * `.link`: any other <a>.
 * `.tab`: tab-styled <a>.
 */
 .button,
 .link,
 .tab {
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
 }
 .button,
 .tab {
  align-items: center;
  color: var(--color-gray);
  display: flex;
  fill: var(--color-gray);
  font-weight: bold;
 }
 .button {
  border: 1px solid var(--color-gray);
  border-radius: 0.25em;
  font-size: 0.8rem;
  padding: 0.6em 0.5em;
  width: fit-content;
 }
 .link {
  color: inherit;
  text-decoration: underline 1px var(--color-border-gray);
  text-underline-offset: 0.25em;
 }
 button.link {
  border: none;
  padding: 0;
 }
 [name=cancel],
 .auxiliary {
  border-color: var(--color-border-gray);
  color: var(--color-nav-gray);
  fill: var(--color-nav-gray);
 }
 .button:focus-visible,
 .tab:focus-visible,
 .tab:hover {
  background-color: var(--color-focus-gray);
 }
 .button:hover {
  background-color: var(--color-blue);
  border-color: var(--color-blue);
  color: white;
@@ -262,31 +189,32 @@ button.link {
  background-color: var(--color-red);
  border-color: var(--color-red);
 }
-tr:has(select[data-changed]) button[name="button"],
+input:hover,
-.set-default-unit:not([disabled]) {
+select:hover,
-  background-color: var(--color-purple);
+summary:hover,
-  border-color: var(--color-purple);
+textarea:hover {
-  color: white;
+  border-color: var(--color-blue);
-  fill: white;
+  outline: solid 1px var(--color-blue);
 }
-.link:focus-visible {
+select:hover,
-  text-decoration-color: var(--color-gray);
+summary:hover {
  cursor: pointer;
 }
-.link:hover {
+input:invalid,
-  color: var(--color-blue);
+select:invalid,
-  text-decoration-color: var(--color-blue);
+textarea:invalid {
  border-color: var(--color-red);
  outline: solid 1px var(--color-red);
 }
-table .button {
+input[type=text]:read-only,
-  border-color: var(--color-border-gray);
+textarea:read-only {
-  color: var(--color-table-gray);
+  border: none;
-  font-weight: normal;
+  padding-inline: 0;
  height: 100%;
  padding: 0.4em;
 }
-/* NOTE: collapse gaps around empty rows (`topside`) once possible with
+/* NOTE: collapse gaps around empty rows (`topside`) once possible
- * `grid-collapse` property and remove alternative `grid-template-areas`.
+ * with grid-collapse property and remove alternative grid-template
 * https://github.com/w3c/csswg-drafts/issues/5813 */
 body {
  display: grid;
@@ -294,16 +222,16 @@ body {
  grid-template-areas:
    "header    header  header"
    "nav       nav     nav"
    "leftside  topside rightside"
    "leftside  main    rightside";
  grid-template-columns: 1fr minmax(max-content, 2fr) 1fr;
  font-family: system-ui;
  margin: 0.4em;
 }
-body:has(> .topside-area) {
+body:not(:has(.topside-area)) {
  grid-template-areas:
    "header    header  header"
    "nav       nav     nav"
    "leftside  topside rightside"
    "leftside  main    rightside";
 }
@@ -319,14 +247,18 @@ header {
  margin-inline-start: 4%;
 }
 .navigation > .tab {
-  border-bottom: 2px solid var(--color-nav-gray);
+  border-bottom: solid 2px var(--color-nav-gray);
  flex: 1;
  font-size: 1rem;
  justify-content: center;
  padding-block: 0.4em;
 }
 .navigation > .tab:hover,
 .navigation > .tab:focus-visible {
  background-color: var(--color-focus-gray);
 }
 .navigation > .tab.active {
-  border-bottom: 4px solid var(--color-blue);
+  border-bottom: solid 4px var(--color-blue);
  color: var(--color-blue);
  fill: var(--color-blue);
 }
@@ -358,7 +290,7 @@ header {
 #flashes {
  display: grid;
-  row-gap: 0.4em;
+  gap: 0.2em;
  grid-template-columns: 1fr auto auto auto 1fr;
  left: 0;
  pointer-events: none;
@@ -374,17 +306,13 @@ header {
  display: grid;
  grid-column: 2/5;
  grid-template-columns: subgrid;
  line-height: 2.2em;
  pointer-events: auto;
 }
 .flash:before {
  filter: invert(100%);
  height: 1.4em;
  margin: 0 0.5em;
  width: 1.4em;
 }
 .flash.alert:before {
  content: url('pictograms/alert-outline.svg');
  height: 1.4em;
  margin: 0 0.5em;
  width: 1.4em;
 }
 .flash.alert {
  border-color: var(--color-red);
@@ -392,24 +320,35 @@ header {
 }
 .flash.notice:before {
  content: url('pictograms/check-circle-outline.svg');
  height: 1.4em;
  margin: 0 0.5em;
  width: 1.4em;
 }
 .flash.notice {
  border-color: var(--color-blue);
  background-color: var(--color-blue);
 }
-.flash svg {
+.flash > div {
-  cursor: pointer;
+  grid-column: 2;
  fill: white;
  height: 2.2em;
  opacity: 0.6;
  padding: 0.4em 0.5em;
  width: 2.4em;
 }
-.flash svg:hover {
+/* NOTE: currently flash button inherits some unnecessary styles from generic
 * button. */
 .flash > button {
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 1.4em;
  font-weight: bold;
  grid-column: 3;
  opacity: 0.6;
  padding: 0.2em 0.4em;
 }
 .flash > button:hover {
  opacity: 1;
 }
 /* TODO: Hover over invalid should work like in measurements (thin vs thick border) */
 .labeled-form {
  align-items: center;
  display: grid;
@@ -426,7 +365,7 @@ header {
 .labeled-form label.required {
  font-weight: bold;
 }
-/* Don't style `label.error + input` if case already covered by `input:invalid`. */
+/* Don't style `label.error + input` if case already covered by input:invalid */
 .labeled-form label.error {
  color: var(--color-red);
 }
@@ -446,117 +385,200 @@ header {
 .labeled-form .auxiliary {
  grid-column: 3;
  /* If more buttons are needed, `grid-row` can be replaced with
-   * `reading-flow: grid-columns` to ensure proper [tabindex] order. */
+   * `reading-flow: grid-columns` to ensure proper tabindex order */
  grid-row: 1;
  height: 100%;
  padding-block: 0;
 }
 .tabular-form table {
  border: none;
  border-spacing: 0.4em 0;
  margin-inline: -0.4em;
 }
 .tabular-form table td {
  border: none;
  vertical-align: middle;
 }
 .tabular-form table td {
  padding-inline: 0;
 }
 .tabular-form table :is(form, input, select, textarea):only-child {
  margin-inline-start: 0;
 }
-
+/* TODO: remove .items class (?) and make 'form table' work properly */
-.items-table {
+table.items {
  border-spacing: 0;
-  border: 1px solid var(--color-border-gray);
+  border: solid 1px var(--color-border-gray);
  border-radius: 0.25em;
  font-size: 0.85rem;
  text-align: left;
 }
-.items-table thead {
+table:not(:has(tr)) {
  display: none;
 }
 table.items thead {
  font-size: 0.8rem;
 }
-.items-table thead,
+table.items thead,
-.items-table tbody tr:hover {
+table.items tbody tr:hover {
  background-color: var(--color-focus-gray);
 }
-.items-table th {
+table.items th {
-  padding: 0.75em 0 0.75em 1em;
+  padding-block: 0.75em;
  text-align: center;
 }
-.items-table th:last-child {
+table.items th,
-  padding-inline-end: 0.4em;
+table.items td {
  padding-inline: 1em 0;
 }
-.items-table td {
+/* For <a> to fill <td> completely, we use an ::after pseudoelement. */
-  border-top: 1px solid var(--color-border-gray);
+table.items td.link {
-  height: 2.4em;
+  padding: 0;
  padding: 0.1em 0 0.1em calc(1em + var(--depth) * 0.8em);
 }
 .items-table td:last-child {
  padding-inline-end: 0.1em;
 }
 .items-table :is(form, input, select, textarea):only-child {
  margin-inline-start: calc(-0.4em - 0.9px);
 }
 /* For <a> to fill table cell completely, we use an `::after` pseudoelement. */
 /* TODO: expand to whole row? will require adjusting z-index on inputs/buttons */
 .items-table td:has(> .link) {
  position: relative;
 }
-.items-table .link::after {
+table.items td.link a {
  color: inherit;
  font: inherit;
 }
 table.items td.link a::after {
  content: '';
-  inset: -1px 0 0 0;
+  inset: 0;
  position: absolute;
 }
-.items-table .flex {
+table.items td:first-child {
  padding-inline-start: calc(1em + var(--depth) * 0.8em);
 }
 table.items td:has(input, select, textarea) {
  padding-inline-start: calc(0.6em - 0.9px);
 }
 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 {
  padding-inline-end: 0.4em;
 }
 table.items td:last-child {
  padding-inline-end: 0.1em;
 }
 table.items td {
  border-top: solid 1px var(--color-border-gray);
  height: 2.4em;
  padding-block: 0.1em;
 }
 table.items .actions {
  display: flex;
  gap: 0.4em;
  justify-content: end;
 }
-.items-table .dropzone {
+table.items .actions.centered {
  justify-content: center;
 }
 table.items tr.dropzone {
  position: relative;
 }
-.items-table .dropzone::after {
+table.items tr.dropzone::after {
  content: '';
  inset: 1px 0 0 0;
  position: absolute;
-  outline: 2px dashed var(--color-blue);
+  outline: dashed 2px var(--color-blue);
  outline-offset: -1px;
  z-index: var(--z-index-table-row-outline);
 }
-.items-table .handle {
+table.items td.handle {
-  cursor: grab;
+  cursor: move;
 }
-.items-table .form td {
+table.items tr.form td {
-  vertical-align: middle;
+  vertical-align: top;
 }
-.items-table td:not(:first-child),
+
 /* TODO: replace :hover:focus-visible combos with proper LOVE stye order */
 /* TODO: Update table styling: simplify selectors, deduplicate, remove non-font rem. */
 table.items td.link a:hover,
 table.items td.link a:focus-visible,
 table.items td.link a:hover:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 0.05rem;
  text-underline-offset: 0.2rem;
 }
 table.items td.link a:hover {
  color: var(--color-blue);
 }
 table.items td.link a:focus-visible {
  text-decoration-color: var(--color-gray);
 }
 table.items td.link a:hover:focus-visible {
  color: var(--color-dark-blue);
 }
 table.items td:not(:first-child),
 .grayed {
  color: var(--color-table-gray);
-  fill: var(--color-gray);
+  fill: var(--color-table-gray);
 }
-.items-table td:has(> svg:only-child) {
+table.items svg {
  height: 1rem;
  vertical-align: middle;
  width: 1rem;
 }
 table.items svg:last-child {
  height: 1.2rem;
  width: 1.2rem;
 }
 table.items td.svg {
  text-align: center;
 }
 table.items td.number {
  text-align: right;
 }
 table.items .button,
 table.items button,
 table.items input[type=submit] {
  font-weight: normal;
  height: 100%;
  padding: 0.4em;
 }
 table.items input:not([type=submit]):not([type=checkbox]),
 table.items select,
 table.items textarea {
  padding-block: 0.375em;
 }
 /* TODO: find a way (layers?) to style inputs differently while making sure
 * hover works properly without using :not(:hover) selectors here. */
 table.items .button:not(:hover),
 table.items button:not(:hover),
 table.items input:not(:hover),
 table.items select:not(:hover),
 table.items textarea:not(:hover) {
  border-color: var(--color-border-gray);
 }
 table.items .button:not(:hover),
 table.items button:not(:hover),
 table.items input[type=submit]:not(:hover),
 table.items select:not(:hover) {
  color: var(--color-table-gray);
 }
 table.items select:focus-within,
 table.items select:focus-visible {
  color: black;
 }
 form table.items {
  border: none;
 }
 form table.items td {
  border: none;
  text-align: left;
  vertical-align: middle;
 }
 form table.items td:first-child {
  color: inherit;
 }
-.center {
+.centered {
  margin: 0 auto;
 }
 .extendedright {
  margin-right: auto;
 }
 .hexpand {
  width: 100%;
 }
-.flex {
+.hflex {
  display: flex;
  gap: 0.8em;
 }
-.flex.reverse {
+.hflex.reverse {
  flex-direction: row-reverse;
 }
-.flex.vertical {
+.hflex.centered {
-  flex-direction: column;
+  justify-content: center;
 }
 .hint {
  color: var(--color-table-gray);
@@ -564,18 +586,21 @@ header {
  font-size: 0.9rem;
  text-align: center;
 }
-.hmin50 {
+.vflex {
-  min-width: 50%;
+  display: flex;
  gap: 0.8em;
  flex-direction: column;
 }
-.italic {
+[disabled] {
-  color: var(--color-gray);
+/* label:has(input[disabled]) {
-  font-style: italic;
+ * TODO: disabled checkbox blue square focus removal; disabled label styling;
-}
+ * focused label styling (currently only checkbox has focus)
-.ralign {
+ * */
-  text-align: right;
+  border-color: var(--color-border-gray) !important;
-}
+  color: var(--color-border-gray) !important;
-.rextend {
+  cursor: not-allowed;
-  margin-right: auto;
+  fill: var(--color-border-gray) !important;
  pointer-events: none;
 }
@@ -587,12 +612,12 @@ summary {
  align-items: center;
  color: var(--color-gray);
  display: flex;
-  gap: 0.4em;
+  gap: 0.2em;
  height: 100%;
  white-space: nowrap;
 }
 summary::before {
-  background-color: currentColor;
+  background-color: #000;
  content: "";
  height: 1em;
  mask-image: url('pictograms/chevron-down.svg');
@@ -604,7 +629,7 @@ summary:has(.button) {
  padding-inline-end: 0;
 }
 summary .button {
-  border: 1px solid var(--color-border-gray);
+  border: solid 1px var(--color-border-gray);
  border-radius: inherit;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
@@ -615,15 +640,15 @@ summary span {
  width: 100%;
 }
 details[open] summary::before {
-  transform: scaleY(-1);
+  transform: rotate(180deg);
 }
 summary::marker {
  padding-left: 0.25em;
 }
-/* NOTE: use `details[open]::details-content` once widely available. */
+/* NOTE: use details[open]::details-content once widely available */
 details[open] ul {
-  background-color: white;
+  background: white;
-  border: 1px solid var(--color-border-gray);
+  border: solid 1px var(--color-border-gray);
  border-radius: 0.25em;
  box-shadow: 1px 1px 3px var(--color-border-gray);
  margin: -1px 0 0 0;
@@ -645,57 +670,3 @@ li input[type=checkbox] {
 li::marker {
  content: '';
 }
 /*
 * TODO:
 * * disable <label> containing disabled checkbox: `label:has(input[disabled])`,
 * * disabled label styling,
 * * focused label styling (currently only checkbox has focus),
 * * disabled checkbox blue square focus removal.
 * */
 #measurement_form {
  min-width: 66%;
  width: max-content;
 }
 .measurements-section {
  overflow-x: auto;
 }
 body[data-measurements-view=wide] .measurements-compact,
 body[data-measurements-view=compact] .measurements-wide {
  display: none;
 }
 body[data-measurements-view=compact] .view-toggle[data-view=compact],
 body[data-measurements-view=wide] .view-toggle[data-view=wide] {
  background-color: var(--color-blue);
  border-color: var(--color-blue);
  color: white;
  fill: white;
 }
 .chart-panel {
  width: 100%;
 }
 #measurements tr.grouped td {
  border-top: none;
 }
 #measurements tr.grouped .taken-at,
 #measurements tr.grouped .created-at {
  visibility: hidden;
 }
 .measurements-wide td {
  vertical-align: middle;
  white-space: nowrap;
 }
 .wide-cell {
  align-items: center;
  display: inline-flex;
  gap: 0.25em;
 }
 .wide-cell .button {
  border: none;
  font-size: inherit;
  height: auto;
  padding: 0;
 }
 .wide-cell button.link::after {
  content: none;
 }
--- a/app/controllers/charts_controller.rb
+++ b/app/controllers/charts_controller.rb
@@ -1,12 +0,0 @@
 class ChartsController < ApplicationController
  def index
    readouts = current_user.readouts.includes(:quantity, :unit).order(:taken_at, :id)
    @readouts_json = readouts.map { |r|
      { takenAt: r.taken_at&.iso8601,
        quantityId: r.quantity_id,
        quantityName: r.quantity.name,
        value: r.value.to_f,
        unit: r.unit.symbol }
    }.to_json
  end
 end
--- a/app/controllers/measurements_controller.rb
+++ b/app/controllers/measurements_controller.rb
@@ -1,12 +1,13 @@
 class MeasurementsController < ApplicationController
  before_action :find_readout, only: [:destroy, :edit, :update]
  before_action except: :index do
    raise AccessForbidden unless current_user.at_least(:active)
  end
  def index
-    load_measurements
+    readouts = current_user.readouts.includes(:quantity, :unit).order(created_at: :desc)
    @measurements = readouts.group_by(&:created_at).map do |created_at, grouped|
      Measurement.new(created_at: created_at, readouts: grouped)
    end
  end
  def new
@@ -14,49 +15,33 @@ class MeasurementsController < ApplicationController
  end
  def create
-    taken_at = params.permit(:taken_at)[:taken_at]
+    timestamp = Time.current
-    readout_params = params.permit(readouts: Readout::ATTRIBUTES).fetch(:readouts, [])
+    @readouts = readout_params.map do |rp|
-    @readouts = readout_params.map { |rp| current_user.readouts.build(rp.merge(taken_at: taken_at)) }
+      r = current_user.readouts.new(rp)
-
+      r.created_at = timestamp
-    if @readouts.present? && @readouts.all?(&:valid?)
+      r
      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 }
      flash.now[:alert] = errors.present? ? errors.first : t('.no_readouts')
    end
    end
-  def edit
+    if @readouts.all?(&:valid?)
-    @user_units = current_user.units.ordered
+      Readout.transaction { @readouts.each(&:save!) }
-  end
+      @measurement = Measurement.new(readouts: @readouts, created_at: timestamp)
  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
+      render :new, status: :unprocessable_entity
      render :edit
    end
  end
  def destroy
-    @readout.destroy!
+    @measurement = Measurement.new(id: params[:id].to_i,
-    load_measurements
+                                   created_at: Time.at(params[:id].to_i))
    current_user.readouts.where(created_at: @measurement.created_at).delete_all
    @measurements_empty = current_user.readouts.empty?
    flash.now[:notice] = t('.success')
  end
  private
-  def find_readout
+  def readout_params
-    @readout = current_user.readouts.find(params[:id])
+    params.require(:readouts).map { |r| r.permit(:quantity_id, :value, :unit_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
--- a/app/controllers/quantities_controller.rb
+++ b/app/controllers/quantities_controller.rb
@@ -8,10 +8,6 @@ class QuantitiesController < ApplicationController
    raise AccessForbidden unless current_user.at_least(:active)
  end
  before_action only: [:new, :edit, :create, :update] do
    @user_units = current_user.units.ordered
  end
  def index
    @quantities = current_user.quantities.ordered.includes(:parent, :subquantities)
  end
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -12,12 +12,6 @@ module ApplicationHelper
      labeled_field_for(method, options) { super }
    end
    def submit(value = nil, options = {})
      value, options = nil, value if value.is_a?(Hash)
      options[:class] = @template.class_names('button', options[:class])
      super
    end
    private
    def labeled_field_for(method, options)
@@ -86,7 +80,6 @@ module ApplicationHelper
    def initialize(...)
      super(...)
      @default_options.merge!(@options.slice(:form))
      @default_html_options.merge!(@options.slice(:form))
    end
    [:text_field, :password_field, :text_area].each do |selector|
@@ -103,28 +96,20 @@ module ApplicationHelper
    def number_field(method, options = {})
      attr_type = object.type_for_attribute(method)
-      case attr_type.type
+      if attr_type.type == :decimal
      when :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]
        options[:size] ||= attr_type.precision / 2
      when :float
        options[:size] ||= 6
      end
      super
    end
    def button(value = nil, options = {}, &block)
-      # #button does not use #objectify_options/@default_options
+      # button does not use #objectify_options
-      value, options = nil, value if value.is_a?(Hash)
+      options.merge!(@options.slice(:form))
      options = options.merge(
        @default_options.slice(:form),
        class: @template.class_names('button', options[:class])
      )
      super
    end
@@ -153,14 +138,12 @@ module ApplicationHelper
  end
  def tabular_form_with(**options, &block)
-    extra_options = {builder: TabularFormBuilder, class: 'tabular-form',
+    extra_options = {builder: TabularFormBuilder, html: {autocomplete: 'off'}}
                     html: {autocomplete: 'off'}}
    form_with(**merge_attributes(options, extra_options), &block)
  end
  def svg_tag(source, label = nil, options = {})
-    label, options = nil, label if label.is_a? Hash
+    svg_tag = tag.svg(options) do
    svg_tag = tag.svg(**options) do
      tag.use(href: "#{image_path(source + ".svg")}#icon")
    end
    label.blank? ? svg_tag : svg_tag + tag.span(label)
@@ -171,7 +154,6 @@ module ApplicationHelper
      ['measurements', 'scale-bathroom', :restricted],
      ['quantities', 'axis-arrow', :restricted, 'right'],
      ['units', 'weight-gram', :restricted],
      ['charts', 'chart-line', :restricted],
      # TODO: display users tab only if >1 user present; sole_user?/sole_admin?
      ['users', 'account-multiple-outline', :admin],
    ]
@@ -230,8 +212,9 @@ module ApplicationHelper
      # Conversion of flash to Array only required because of Devise
      Array(messages).map do |message|
        tag.div class: "flash #{entry}" do
-          tag.span(sanitize(message)) +
+          # TODO: change button text to svg to make it aligned vertically
-            svg_tag('pictograms/close-outline', {onclick: "this.parentElement.remove()"})
+          tag.div(sanitize(message)) + tag.button(sanitize("&times;"), tabindex: -1,
                                                  onclick: "this.parentElement.remove();")
        end
      end
    end.join.html_safe
--- a/app/helpers/quantities_helper.rb
+++ b/app/helpers/quantities_helper.rb
@@ -1,9 +1,9 @@
 module QuantitiesHelper
-  def quantities_check_boxes(quantities)
+  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,
+    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
--- a/app/javascript/application.js
+++ b/app/javascript/application.js
@@ -1,15 +1,54 @@
 // 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() {
+function showPage(event) {
-  document.documentElement.style.visibility = "visible"
+  document.documentElement.style.visibility="visible"
 }
 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}))
 });
 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) {
@@ -72,3 +111,117 @@ 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
--- a/app/javascript/controllers/application.js
+++ b/app/javascript/controllers/application.js
@@ -1,7 +0,0 @@
 import { Application } from "@hotwired/stimulus"
 const application = Application.start()
 application.debug = false
 window.Stimulus = application
 export { application }
--- a/app/javascript/controllers/charts_controller.js
+++ b/app/javascript/controllers/charts_controller.js
@@ -1,45 +0,0 @@
 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 })
  }
 }
--- a/app/javascript/controllers/details_controller.js
+++ b/app/javascript/controllers/details_controller.js
@@ -1,55 +0,0 @@
 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
      }
    }
  }
 }
--- a/app/javascript/controllers/drag_controller.js
+++ b/app/javascript/controllers/drag_controller.js
@@ -1,62 +0,0 @@
 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()
  }
 }
--- a/app/javascript/controllers/form_controller.js
+++ b/app/javascript/controllers/form_controller.js
@@ -1,33 +0,0 @@
 import { Controller } from "@hotwired/stimulus"
 export default class extends Controller {
  connect() {
    const autofocusEl = this.element.querySelector('[autofocus]')
    if (autofocusEl) {
      document.activeElement?.blur()
      autofocusEl.focus()
    }
  }
  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()
    }
  }
 }
--- a/app/javascript/controllers/index.js
+++ b/app/javascript/controllers/index.js
@@ -1,3 +0,0 @@
 import { application } from "controllers/application"
 import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"
 eagerLoadControllersFrom("controllers", application)
--- a/app/javascript/controllers/measurements_controller.js
+++ b/app/javascript/controllers/measurements_controller.js
@@ -1,29 +0,0 @@
 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
      })
  }
 }
--- a/app/javascript/controllers/measurements_view_controller.js
+++ b/app/javascript/controllers/measurements_view_controller.js
@@ -1,17 +0,0 @@
 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'
  }
 }
--- a/app/javascript/controllers/readout_unit_controller.js
+++ b/app/javascript/controllers/readout_unit_controller.js
@@ -1,36 +0,0 @@
 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()
  }
 }
--- a/app/models/measurement.rb
+++ b/app/models/measurement.rb
@@ -1,3 +1,17 @@
 class Measurement
  include ActiveModel::Model
  attr_accessor :readouts, :created_at
  def id
    created_at.to_i
  end
  def to_param
    id.to_s
  end
  def persisted?
    true
  end
 end
--- a/app/models/quantity.rb
+++ b/app/models/quantity.rb
@@ -1,10 +1,9 @@
 class Quantity < ApplicationRecord
-  ATTRIBUTES = [:name, :description, :parent_id, :default_unit_id]
+  ATTRIBUTES = [:name, :description, :parent_id]
  attr_cached :depth, :pathname
  belongs_to :user, optional: true
  belongs_to :parent, optional: true, class_name: "Quantity"
  belongs_to :default_unit, optional: true, class_name: "Unit"
  has_many :subquantities, ->{ order(:name) }, class_name: "Quantity",
    inverse_of: :parent, dependent: :restrict_with_error
@@ -16,8 +15,8 @@ class Quantity < ApplicationRecord
    errors.add(:parent, :descendant_reference) if ancestor_of?(parent)
  end
  validates :name, presence: true, uniqueness: {scope: [:user_id, :parent_id]},
-    length: {maximum: type_for_attribute(:name).limit}
+    length: {maximum: type_for_attribute(:name).limit || Float::INFINITY}
-  validates :description, length: {maximum: type_for_attribute(:description).limit}
+  validates :description, length: {maximum: type_for_attribute(:description).limit || Float::INFINITY}
  # Update :depths of progenies after parent change
  before_save if: :parent_changed? do
@@ -62,8 +61,8 @@ class Quantity < ApplicationRecord
  # Return: ordered [sub]hierarchy
  scope :ordered, ->(root: nil, include_root: true) {
    if connection.adapter_name =~ /mysql/i
      numbered = Arel::Table.new('numbered')
      self.model.with(numbered: numbered(:parent_id, :name)).with_recursive(arel_table.name => [
        numbered.project(
          numbered[Arel.star],
@@ -74,6 +73,14 @@ class Quantity < ApplicationRecord
          arel_table[:path].concat(numbered[:child_number])
        ).join(arel_table).on(numbered[:parent_id].eq(arel_table[:id]))
      ]).order(arel_table[:path])
    elsif root.nil?
      # SQLite: pathname column already stores the full hierarchical path
      order(:pathname)
    else
      root_pathname = unscoped.where(id: root).pick(:pathname)
      scope = order(:pathname).where("pathname LIKE ?", "#{root_pathname}#{PATHNAME_DELIMITER}%")
      include_root ? scope.or(where(id: root)) : scope
    end
  }
  # TODO: extract named functions to custom Arel extension
--- a/app/models/readout.rb
+++ b/app/models/readout.rb
@@ -1,5 +1,5 @@
 class Readout < ApplicationRecord
-  ATTRIBUTES = [:quantity_id, :value, :unit_id, :taken_at]
+  ATTRIBUTES = [:quantity_id, :value, :unit_id]
  belongs_to :user
  belongs_to :quantity
--- a/app/views/charts/index.html.erb
+++ b/app/views/charts/index.html.erb
@@ -1,4 +0,0 @@
 <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>
--- a/app/views/default/units/_unit.html.erb
+++ b/app/views/default/units/_unit.html.erb
@@ -5,7 +5,7 @@
  </td>
  <% if current_user.at_least(:active) %>
-    <td class="flex">
+    <td class="actions">
      <% unless unit.portable.nil? %>
        <% if unit.default? %>
          <%= image_button_to_if unit.portable?, t('.import'), 'download-outline',
--- a/app/views/default/units/index.html.erb
+++ b/app/views/default/units/index.html.erb
@@ -8,7 +8,7 @@
    class: 'tools-area' %>
 </div>
-<table class="main-area items-table">
+<table class="main-area items">
  <thead>
    <tr>
      <th><%= Unit.human_attribute_name(:symbol) %></th>
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -14,7 +14,6 @@
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag "spreadsheet" %>
    <script src="https://cdn.plot.ly/plotly-basic-2.35.2.min.js"></script>
    <%= javascript_importmap_tags %>
    <%#= turbo_page_requires_reload_tag %>
@@ -24,10 +23,10 @@
  </head>
  <body>
-    <header class="flex">
+    <header class="hflex">
      <%= image_link_to t(".source_code"), "code-braces", source_code_url %>
      <%= image_link_to t(".issue_tracker"), "bug-outline", issue_tracker_url,
-        class: "rextend" %>
+            class: "extendedright" %>
      <% if user_signed_in? %>
        <%= image_link_to_unless_current(current_user, "account-wrench-outline",
          edit_user_registration_path) %>
--- a/app/views/measurements/_edit_form.html.erb
+++ b/app/views/measurements/_edit_form.html.erb
@@ -1,25 +0,0 @@
 <%= tabular_fields_for @readout, form: form_tag do |form| %>
  <%- 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 %>
    </td>
    <td>
      <%= form.collection_select :unit_id, @user_units, :id,
        ->(u){ sanitize('&emsp;' * (u.base_id? ? 1 : 0) + u.symbol) },
        {}, required: true %>
    </td>
    <td>
      <%= form.datetime_field :taken_at %>
    </td>
    <td></td>
    <td class="flex">
      <%= form.button %>
      <%= image_link_to t(:cancel), "close-outline", measurements_path,
        class: 'dangerous', name: :cancel,
        onclick: render_turbo_stream('edit_form_close', {row: row}) %>
    </td>
  <% end %>
 <% end %>
--- a/app/views/measurements/_edit_form_close.html.erb
+++ b/app/views/measurements/_edit_form_close.html.erb
@@ -1,2 +0,0 @@
 <%= turbo_stream.close_form row %>
 <%= turbo_stream.update :flashes %>
--- a/app/views/measurements/_edit_panel.html.erb
+++ b/app/views/measurements/_edit_panel.html.erb
@@ -1,34 +0,0 @@
 <% form_tag = dom_id(@readout, :edit, :form) %>
 <% row = dom_id(@readout, :edit) %>
 <% hidden_row = dom_id(@readout) %>
 <%= tabular_form_with model: @readout, url: measurement_path(@readout),
  id: form_tag do |form| %>
  <table class="items-table">
    <tbody>
      <%= 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 %>
        </td>
        <td>
          <%= form.collection_select :unit_id, @user_units, :id,
            ->(u){ sanitize('&emsp;' * (u.base_id? ? 1 : 0) + u.symbol) },
            {}, required: true %>
        </td>
        <td>
          <%= form.datetime_field :taken_at %>
        </td>
        <td></td>
        <td class="flex">
          <%= form.button %>
          <%= image_link_to t(:cancel), "close-outline", measurements_path,
            class: 'dangerous', name: :cancel,
            onclick: render_turbo_stream('edit_form_close', {row: row}) %>
        </td>
      <% end %>
    </tbody>
  </table>
 <% end %>
--- a/app/views/measurements/_form.html.erb
+++ b/app/views/measurements/_form.html.erb
@@ -1,39 +1,36 @@
 <%= tabular_form_with model: Measurement.new, id: :measurement_form,
-  class: 'topside-area flex vertical center',
+  class: 'topside-area vflex', html: {onkeydown: 'formProcessKey(event)'} do |form| %>
-  html: {data: {controller: 'form', action: 'keydown->form#processKey'}} do |form| %>
+  <table class="items centered">
-
+    <tbody id="readouts"></tbody>
  <table class="items-table center">
    <tbody id="readouts">
      <%= tabular_fields_for @measurement do |form| %>
        <tr class="italic">
          <td class="hexpand hmin50"><%= t '.taken_at_html' %></td>
          <td colspan="3" class="ralign">
            <%= form.datetime_field :taken_at, required: true, value: Time.current.strftime('%Y-%m-%dT%H:%M') %>
          </td>
        </tr>
      <% end %>
    </tbody>
  </table>
-  <%# TODO: right-click selection; unnecessary with hierarchical tags? %>
+  <div class="hflex">
-  <details id="quantity_select" class="center hexpand" open
+    <%# TODO: right-click selection %>
-           data-controller="details"
+    <details id="quantity_select" class="hexpand" open
-           data-action="focusout->details#close change->details#change keydown->details#processKey">
+             onkeydown="detailsProcessKey(event)">
      <summary autofocus>
        <!-- TODO: Set content with CSS when span empty to avoid duplication -->
-      <span data-prompt="<%= t('.select_quantity') %>" data-details-target="countLabel">
+        <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, details_target: 'submitButton'} %>
+          data: {turbo_stream: true} %>
      </summary>
-    <ul data-details-target="list"><%= quantities_check_boxes(@quantities) %></ul>
+      <ul><%= quantities_check_boxes %></ul>
    </details>
  <div class="flex reverse">
    <%= 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>
--- a/app/views/measurements/_measurement.html.erb
+++ b/app/views/measurements/_measurement.html.erb
@@ -0,0 +1,14 @@
 <%= tag.tr id: dom_id(measurement) do %>
  <td><%= l measurement.created_at, format: :short %></td>
  <td>
    <% measurement.readouts.each do |readout| %>
      <span><%= readout.quantity.name %>: <%= readout.value %> <%= readout.unit %></span>
    <% end %>
  </td>
  <% if current_user.at_least(:active) %>
    <td class="actions">
      <%= image_button_to t('.destroy'), 'delete-outline', measurement_path(measurement),
        method: :delete %>
    </td>
  <% end %>
 <% end %>
--- a/app/views/measurements/_readout.html.erb
+++ b/app/views/measurements/_readout.html.erb
@@ -1,22 +0,0 @@
 <%= tag.tr id: dom_id(readout), data: {taken_at: readout.taken_at&.iso8601,
  quantity_id: readout.quantity_id, quantity_name: readout.quantity.name,
  value: format("%.10g", readout.value), unit: readout.unit.symbol} do %>
  <td>
    <% if current_user.at_least(:active) %>
      <%= link_to readout.quantity, edit_measurement_path(readout),
        class: 'link', data: {turbo_stream: true} %>
    <% else %>
      <%= readout.quantity %>
    <% end %>
  </td>
  <td class="ralign"><%= format("%.10g", readout.value) %></td>
  <td><%= readout.unit %></td>
  <td class="taken-at"><%= l(readout.taken_at) if readout.taken_at %></td>
  <td class="created-at"><%= l(readout.created_at) %></td>
  <% if current_user.at_least(:active) %>
    <td class="flex">
      <%= image_button_to t('.destroy'), 'delete-outline', measurement_path(readout),
        method: :delete, data: {turbo_stream: true} %>
    </td>
  <% end %>
 <% end %>
--- a/app/views/measurements/_wide_table.html.erb
+++ b/app/views/measurements/_wide_table.html.erb
@@ -1,41 +0,0 @@
 <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',
                    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>
--- a/app/views/measurements/create.turbo_stream.erb
+++ b/app/views/measurements/create.turbo_stream.erb
@@ -1,13 +1,5 @@
-<% if @readouts.present? && @readouts.all?(&:persisted?) %>
+<%= turbo_stream.update :flashes %>
-  <%= turbo_stream.update :flashes %>
+<%= turbo_stream.remove :measurement_form %>
-  <%= turbo_stream.remove :measurement_form %>
+<%= turbo_stream.remove :no_items %>
-  <%= turbo_stream.enable :new_measurement_link %>
+<%= turbo_stream.enable :new_measurement_link %>
-  <%= turbo_stream.remove :no_items %>
+<%= turbo_stream.prepend :measurements, @measurement %>
  <% @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 %>
--- a/app/views/measurements/destroy.turbo_stream.erb
+++ b/app/views/measurements/destroy.turbo_stream.erb
@@ -1,5 +1,3 @@
 <%= turbo_stream.update :flashes %>
-<%= turbo_stream.remove @readout %>
+<%= turbo_stream.remove @measurement %>
-<%= turbo_stream.append(:measurements, render_no_items) if current_user.readouts.empty? %>
+<%= turbo_stream.append(:measurements, render_no_items) if @measurements_empty %>
 <%= turbo_stream.update 'measurements-wide', partial: 'wide_table',
  locals: {wide_groups: @wide_groups, wide_quantities: @wide_quantities} %>
--- a/app/views/measurements/edit.turbo_stream.erb
+++ b/app/views/measurements/edit.turbo_stream.erb
@@ -1,18 +0,0 @@
 <% ids = {row: dom_id(@readout, :edit),
          hidden_row: dom_id(@readout),
          link: nil,
          form_tag: dom_id(@readout, :edit, :form)} %>
 <% if params[:view] == 'wide' %>
  <%= turbo_stream.update :measurement_edit_form, partial: 'edit_panel' %>
  <%= turbo_stream.hide ids[:hidden_row] %>
 <% else %>
  <%= turbo_stream.append :measurement_edit_form do %>
    <%- tabular_form_with model: @readout, url: measurement_path(@readout),
      html: {id: ids[:form_tag]} do %>
    <% end %>
  <% end %>
  <%= turbo_stream.hide ids[:hidden_row] %>
  <%= turbo_stream.remove ids[:row] %>
  <%= turbo_stream.after @readout, partial: 'edit_form', locals: ids -%>
 <% end %>
--- a/app/views/measurements/index.html.erb
+++ b/app/views/measurements/index.html.erb
@@ -1,41 +1,14 @@
 <%# TODO: show hint when no quantities/units defined %>
-<div class="rightside-area buttongrid" data-controller="measurements-view">
+<div class="rightside-area buttongrid">
  <% if current_user.at_least(:active) %>
    <%= image_link_to t('.new_measurement'), 'plus-outline', new_measurement_path,
-      id: :new_measurement_link,
+      id: :new_measurement_link, onclick: 'this.blur();',
      data: {turbo_stream: true} %>
  <% end %>
  <%= image_button_tag '', 'view-rows', name: nil, type: 'button',
    class: 'view-toggle', title: t('.view_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', action: 'click->measurements-view#set',
           'measurements-view-name-param': 'wide'} %>
 </div>
-<div class="main-area measurements-section">
+<table class="main-area">
-  <%= tag.div id: :measurement_edit_form %>
+  <tbody id="measurements">
-  <table class="items-table measurements-compact" data-controller="measurements">
+    <%= render(@measurements) || render_no_items %>
    <thead>
      <tr>
        <th><%= Quantity.model_name.human %></th>
        <th><%= Readout.human_attribute_name(:value) %></th>
        <th><%= Unit.model_name.human %></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" data-measurements-target="tbody">
      <%= render(partial: 'readout', collection: @measurements, as: :readout) || render_no_items %>
  </tbody>
-  </table>
+</table>
  <div id="measurements-wide" class="measurements-wide">
    <%= render 'wide_table', wide_groups: @wide_groups, wide_quantities: @wide_quantities %>
  </div>
 </div>
--- a/app/views/measurements/update.turbo_stream.erb
+++ b/app/views/measurements/update.turbo_stream.erb
@@ -1,4 +0,0 @@
 <%= 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} %>
--- a/app/views/quantities/_form.html.erb
+++ b/app/views/quantities/_form.html.erb
@@ -1,7 +1,6 @@
 <%= tabular_fields_for @quantity, form: form_tag do |form| %>
-  <%- tag.tr id: row, class: "form",
+  <%- tag.tr id: row, class: "form", onkeydown: "formProcessKey(event)",
-    data: {controller: 'form', action: 'keydown->form#processKey',
+    data: {link: link, form: form_tag, hidden_row: hidden_row} do %>
           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 %>
@@ -9,13 +8,8 @@
    <td>
      <%= form.text_area :description, cols: 30, rows: 1, escape: false %>
    </td>
    <td>
      <%= form.collection_select :default_unit_id, @user_units, :id,
        ->(u){ sanitize('&emsp;' * (u.base_id? ? 1 : 0) + u.symbol) },
        {include_blank: true}, onchange: "this.dataset.changed = ''" %>
    </td>
-    <td class="flex">
+    <td class="actions">
      <%= form.button %>
      <%= image_link_to t(:cancel), "close-outline", quantities_path, class: 'dangerous',
        name: :cancel, onclick: render_turbo_stream('form_close', {row: row}) %>
--- a/app/views/quantities/_quantity.html.erb
+++ b/app/views/quantities/_quantity.html.erb
@@ -1,22 +1,20 @@
 <%= tag.tr id: dom_id(quantity),
-           draggable: true,
+           ondragstart: "dragStart(event)", ondragend: "dragEnd(event)",
-           data: {controller: 'drag',
+           ondragover: "dragOver(event)", ondrop: "drop(event)",
-                  action: 'dragstart->drag#start dragend->drag#end dragover->drag#over drop->drag#drop dragenter->drag#enter dragleave->drag#leave',
+           ondragenter: "dragEnter(event)", ondragleave: "dragLeave(event)",
-                  drag_drag_path_value: reparent_quantity_path(quantity),
+           data: {drag_path: reparent_quantity_path(quantity), drop_id: dom_id(quantity),
-                  drag_drop_id_value: dom_id(quantity),
+                  drop_id_param: "quantity[parent_id]"} do %>
                  drag_drop_id_param_value: 'quantity[parent_id]'} do %>
-  <td style="--depth:<%= quantity.depth %>">
+  <td class="link" style="--depth:<%= quantity.depth %>">
-    <%= link_to quantity, edit_quantity_path(quantity), class: 'link',
+    <%= link_to quantity, edit_quantity_path(quantity), onclick: 'this.blur();',
      data: {turbo_stream: true} %>
  </td>
  <td><%= quantity.description %></td>
  <td><%= quantity.default_unit&.symbol %></td>
  <% if current_user.at_least(:active) %>
-    <td class="flex">
+    <td class="actions">
      <%= image_link_to t('.new_subquantity'), 'plus-outline', new_quantity_path(quantity),
-        id: dom_id(quantity, :new, :link), data: {turbo_stream: true} %>
+        id: dom_id(quantity, :new, :link), onclick: 'this.blur();', data: {turbo_stream: true} %>
      <%= image_button_to_if quantity.destroyable?, t('.destroy'), 'delete-outline',
        quantity_path(quantity), method: :delete %>
--- a/app/views/quantities/index.html.erb
+++ b/app/views/quantities/index.html.erb
@@ -1,33 +1,30 @@
 <div class="rightside-area buttongrid">
  <% if current_user.at_least(:active) %>
    <%= image_link_to t('.new_quantity'), 'plus-outline', new_quantity_path,
-      id: dom_id(Quantity, :new, :link),
+      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-area' %>
 </div>
 <%# TODO: remove? form can be inserted directly, e.g. at the end of index %>
 <%= tag.div class: 'main-area', id: :quantity_form %>
-<table class="main-area items-table">
+<table class="main-area items">
  <thead>
    <tr>
      <th><%= Quantity.human_attribute_name(:name) %></th>
-      <th class="hexpand"><%= Quantity.human_attribute_name(:description) %></th>
+      <th><%= Quantity.human_attribute_name(:description) %></th>
      <th><%= Quantity.human_attribute_name(:default_unit) %></th>
      <% if current_user.at_least(:active) %>
        <th><%= t :actions %></th>
        <th></th>
      <% end %>
    </tr>
    <%= tag.tr id: "quantity_", hidden: true,
-               data: {controller: 'drag',
+               ondragover: "dragOver(event)", ondrop: "drop(event)",
-                      action: 'dragover->drag#over drop->drag#drop dragenter->drag#enter dragleave->drag#leave',
+               ondragenter: "dragEnter(event)", ondragleave: "dragLeave(event)",
-                      drag_drop_id_value: 'quantity_',
+               data: {drop_id: "quantity_", drop_id_param: "quantity[parent_id]"} do %>
-                      drag_drop_id_param_value: 'quantity[parent_id]'} do %>
+      <th colspan="4"><%= t '.top_level_drop' %></th>
      <th colspan="5"><%= t '.top_level_drop' %></th>
    <% end %>
  </thead>
  <tbody id="quantities">
--- a/app/views/readouts/_form.html.erb
+++ b/app/views/readouts/_form.html.erb
@@ -1,33 +1,25 @@
 <%# TODO: add readout reordering by dragging %>
 <%= tabular_fields_for 'readouts[]', readout do |form| %>
-  <%- tag.tr id: dom_id(readout.quantity, :new, :readout),
+  <%- tag.tr id: dom_id(readout.quantity, :new, :readout) do %>
-             data: {controller: 'readout-unit'} do %>
+    <td class="actions">
    <td>
      <%# TODO: add grayed readout index (in separate column?) %>
      <%= readout.quantity.relative_pathname(@superquantity) %>
      <%= form.hidden_field :quantity_id %>
    </td>
    <td>
      <%= form.number_field :value, required: true, autofocus: readout_counter == 0 %>
    </td>
    <td>
      <%= 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 || '',
               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),
               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} %>
    </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 %>
--- a/app/views/units/_form.html.erb
+++ b/app/views/units/_form.html.erb
@@ -1,7 +1,6 @@
 <%= tabular_fields_for @unit, form: form_tag do |form| %>
-  <%- tag.tr id: row, class: "form",
+  <%- tag.tr id: row, class: "form", onkeydown: "formProcessKey(event)",
-    data: {controller: 'form', action: 'keydown->form#processKey',
+    data: {link: link, form: form_tag, hidden_row: hidden_row} do %>
           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 %>
@@ -9,11 +8,11 @@
    <td>
      <%= form.text_area :description, cols: 30, rows: 1, escape: false %>
    </td>
-    <td>
+    <td class="number">
      <%= form.number_field :multiplier, required: true, size: 10, min: :step if @unit.base_id? %>
    </td>
-    <td class="flex">
+    <td class="actions">
      <%= form.button %>
      <%= image_link_to t(:cancel), "close-outline", units_path, class: 'dangerous',
        name: :cancel, onclick: render_turbo_stream('form_close', {row: row}) %>
--- a/app/views/units/_unit.html.erb
+++ b/app/views/units/_unit.html.erb
@@ -1,23 +1,22 @@
 <%= tag.tr id: dom_id(unit),
-           draggable: true,
+           ondragstart: "dragStart(event)", ondragend: "dragEnd(event)",
-           data: {controller: 'drag',
+           ondragover: "dragOver(event)", ondrop: "drop(event)",
-                  action: 'dragstart->drag#start dragend->drag#end dragover->drag#over drop->drag#drop dragenter->drag#enter dragleave->drag#leave',
+           ondragenter: "dragEnter(event)", ondragleave: "dragLeave(event)",
-                  drag_drag_path_value: rebase_unit_path(unit),
+           data: {drag_path: rebase_unit_path(unit),
-                  drag_drop_id_value: dom_id(unit.base || unit),
+                  drop_id: dom_id(unit.base || unit),
-                  drag_drop_id_param_value: 'unit[base_id]'} do %>
+                  drop_id_param: "unit[base_id]"} do %>
-  <td style="--depth:<%= unit.base_id? ? 1 : 0 %>">
+  <td class="link" style="--depth:<%= unit.base_id? ? 1 : 0 %>">
-    <%= link_to unit, edit_unit_path(unit), class: 'link',
+    <%= link_to unit, edit_unit_path(unit), onclick: 'this.blur();', data: {turbo_stream: true} %>
      data: {turbo_stream: true} %>
  </td>
  <td><%= unit.description %></td>
-  <td class="ralign"><%= unit.multiplier.to_html %></td>
+  <td class="number"><%= unit.multiplier.to_html %></td>
  <% if current_user.at_least(:active) %>
-    <td class="flex">
+    <td class="actions">
      <% unless unit.base_id? %>
        <%= image_link_to t('.new_subunit'), 'plus-outline', new_unit_path(unit),
-          id: dom_id(unit, :new, :link), data: {turbo_stream: true} %>
+          id: dom_id(unit, :new, :link), onclick: 'this.blur();', data: {turbo_stream: true} %>
      <% end %>
      <%= image_button_to_if unit.movable?, t('.destroy'), 'delete-outline', unit_path(unit),
--- a/app/views/units/index.html.erb
+++ b/app/views/units/index.html.erb
@@ -1,20 +1,19 @@
 <div class="rightside-area buttongrid">
  <% if current_user.at_least(:active) %>
    <%= image_link_to t('.new_unit'), 'plus-outline', new_unit_path,
-      id: dom_id(Unit, :new, :link), data: {turbo_stream: true} %>
+      id: dom_id(Unit, :new, :link), onclick: 'this.blur();', data: {turbo_stream: true} %>
  <% end %>
  <%= image_link_to t('.import_units'), 'download-outline', default_units_path,
    class: 'tools-area' %>
 </div>
 <%# TODO: remove? form can be inserted directly, e.g. at the end of index %>
 <%= tag.div id: :unit_form %>
-<table class="main-area items-table">
+<table class="main-area items">
  <thead>
    <tr>
      <th><%= Unit.human_attribute_name(:symbol) %></th>
-      <th class="hexpand"><%= Unit.human_attribute_name(:description) %></th>
+      <th><%= Unit.human_attribute_name(:description) %></th>
      <th><%= Unit.human_attribute_name(:multiplier) %></th>
      <% if current_user.at_least(:active) %>
        <th><%= t :actions %></th>
@@ -22,10 +21,9 @@
      <% end %>
    </tr>
    <%= tag.tr id: "unit_", hidden: true,
-               data: {controller: 'drag',
+               ondragover: "dragOver(event)", ondrop: "drop(event)",
-                      action: 'dragover->drag#over drop->drag#drop dragenter->drag#enter dragleave->drag#leave',
+               ondragenter: "dragEnter(event)", ondragleave: "dragLeave(event)",
-                      drag_drop_id_value: 'unit_',
+               data: {drop_id: "unit_", drop_id_param: "unit[base_id]"} do %>
                      drag_drop_id_param_value: 'unit[base_id]'} do %>
      <th colspan="5"><%= t '.top_level_drop' %></th>
    <% end %>
  </thead>
--- a/app/views/users/index.html.erb
+++ b/app/views/users/index.html.erb
@@ -1,4 +1,4 @@
-<table class="main-area items-table" id="users">
+<table class="main-area items" id="users">
  <thead>
    <tr>
      <th><%= User.human_attribute_name(:email) %></th>
@@ -11,7 +11,7 @@
  <tbody>
    <% @users.each do |user| %>
      <tr>
-        <td><%= link_to user, user_path(user), class: 'link' %></td>
+        <td class="link"><%= link_to user, user_path(user) %></td>
        <td>
          <% if user == current_user %>
            <%= user.status %>
@@ -22,11 +22,11 @@
            <% end %>
          <% end %>
        </td>
-        <td>
+        <td class="svg">
          <%= svg_tag 'pictograms/checkbox-marked-outline' if user.confirmed_at.present? %>
        </td>
        <td><%= l user.created_at, format: :without_tz %></td>
-        <td class="flex">
+        <td class="actions">
          <% if allow_disguise?(user) %>
            <%= image_link_to t('.disguise'), 'incognito', disguise_user_path(user) %>
          <% end %>
--- a/app/views/users/profiles/new.html.erb
+++ b/app/views/users/profiles/new.html.erb
@@ -1,5 +1,5 @@
 <%= labeled_form_for resource, url: user_registration_path,
-  html: {class: 'main-area', data: {controller: 'form', action: 'submit->form#validate'}} do |f| %>
+  html: {class: 'main-area', onsubmit: 'formValidate(event)'} do |f| %>
  <%= f.email_field :email, required: true, size: 30, autofocus: true,
    autocomplete: 'email' %>
@@ -10,6 +10,7 @@
  <%= f.submit t(:register), data: {turbo: false} %>
  <%# TODO: fix button text color after change link -> button %>
  <%= image_button_tag t(:resend_confirmation), 'email-sync-outline',
    class: 'auxiliary', formaction: user_confirmation_path, formnovalidate: true,
    data: {validate: f.field_id(:email)} %>
--- a/app/views/users/sessions/new.html.erb
+++ b/app/views/users/sessions/new.html.erb
@@ -1,5 +1,5 @@
 <%= labeled_form_for resource, url: user_session_path,
-  html: {class: 'main-area', data: {controller: 'form', action: 'submit->form#validate'}} do |f| %>
+  html: {class: 'main-area', onsubmit: 'formValidate(event)'} do |f| %>
  <%= f.email_field :email, required: true, size: 30, autofocus: true,
    autocomplete: 'email' %>
--- a/app/views/users/unlocks/new.html.erb
+++ b/app/views/users/unlocks/new.html.erb
@@ -8,7 +8,7 @@
    <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
  </div>
-  <div class="flex">
+  <div class="actions">
    <%= f.submit "Resend unlock instructions" %>
  </div>
 <% end %>
--- a/config/credentials.yml.enc
+++ b/config/credentials.yml.enc
@@ -1 +1 @@
-yQ/e5AEwReoZ6yiIqCZjBbl2Tp41JNcuwfWF3FeSSk2K0XBtE+VQXHlAHMBPRwbBdkutB8jls+YKou3JX58j88BEH3Ft/8h7GIepYF+nOhdb79y05lqEhARA4IZYnHe1Do72MdmseE0ectfDpfk6Q1qnfiTFe3X1KyfLR0hiSEM5+1ZYfk2loUBWSIfgYuqtK7bEOZiL6imU46n4+58g3VZd0cK7getT7rwNlVt1s6ME9PTwT/RqE736fLEIyDeaEg8hBxTrPVeYyii2o4IWM02/0HsuRPxXLLQAgXyzHhlT9wo18X5FaaecgGloBie0UMrPS3j6oBlVn61WQbkuEe/yQKnzyiw0v5HSmzME4PiDTaSW2em/BtGiMAhJpyukipQa4/leR3OTJxv3TAMha1bnk/OC--QU+gjSEvBsZpr3XT--osCoTfqZ4ENeas+nFdXefA==
+3nm9KZNtyLhPgZBVzOOkN2FXHD0uEMuzgb5Sl1MrAMmi6+iEFSzyTHfZFW2mz18VyNz5DDYvTODZqBDQKK+FQh70uEQkmGqaY5XsTOzUFzk56quaPNtZvFEGux1nX2avSbYQBs3HeyYyWyTAFhez5j8tVb6sZD2xZ8twa9KAB42j86NIHT9w/ZMFqZbGbdBoR1Mrqoy9/IWv2QgxMTpGR6JBpTUwauXm6wS/bTt8SCXF57JSVgvdw/BxFzoA3Xj6N5E89LbMfh54W2ruMhybka5E7zXN9z0v4oXt8GiYZFIODEYZwqzEVaUK1WXS5qb5OrDJFAzs29Uf/gDrIDx71Lot+jejCS+xFfI9454EnHcVH66wKuwF6ylKupJDffM0hQHplcEfVSq5UiDfbPXm46Vr0g1A--2RrmuzCBuHvYpPNA--ugbuRe7ivfDqeUCt6ahciA==
--- a/config/environments/test.rb
+++ b/config/environments/test.rb
@@ -58,7 +58,4 @@ Rails.application.configure do
  # config.action_view.annotate_rendered_view_with_filenames = true
  config.log_level = :info
  # Allow Capybara's dynamic test server host (127.0.0.1:<random_port>)
  config.hosts << '127.0.0.1'
 end
--- a/config/importmap.rb
+++ b/config/importmap.rb
@@ -2,6 +2,3 @@
 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"
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -11,13 +11,8 @@ en:
  activerecord:
    attributes:
      quantity:
        default_unit: Default unit
        description: Description
        name: Name
      readout:
        created_at: Recorded at
        taken_at: Taken at
        value: Value
      unit:
        base: Base unit
        description: Description
@@ -86,34 +81,22 @@ en:
      revert: Revert
      sign_out: Sign out
      source_code: Get code
  readouts:
    form:
      set_default_unit: Set as default unit
  charts:
    navigation: Charts
  measurements:
    navigation: Measurements
    no_items: There are no measurements taken. You can Add some now.
    form:
-      select_quantity: select quantities...
+      select_quantity: select the measured quantities...
      taken_at_html: Measurement taken at&emsp;
    index:
      new_measurement: Add measurement
      view_compact: Compact view
      view_wide: Wide view
      view_charts: Charts
    readout:
      edit: Edit
      destroy: Delete
    create:
-      success:
+      success: Measurement saved.
        one: Recorded 1 measurement.
        other: Recorded %{count} measurements.
      no_readouts: No readouts selected.
    update:
      success: Measurement updated.
    destroy:
      success: Measurement deleted.
    measurement:
      destroy: Delete
  readouts:
    form:
      select_unit: ...
  quantities:
    navigation: Quantities
    no_items: There are no configured quantities. You can Add some or Import from defaults.
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -1,6 +1,5 @@
 Rails.application.routes.draw do
  resources :measurements
  resources :charts, only: [:index]
  resources :readouts, only: [:new] do
    collection {get 'new/:id/discard', action: :discard, as: :discard}
--- a/db/migrate/20250121230456_create_readouts.rb
+++ b/db/migrate/20250121230456_create_readouts.rb
@@ -1,14 +1,10 @@
 class CreateReadouts < ActiveRecord::Migration[7.2]
  def change
    create_table :readouts do |t|
-      # Reference :user through :quantity (:measurement may be NULL).
+      t.references :user, null: false, foreign_key: true
      t.references :measurement, foreign_key: true
      t.references :quantity, null: false, foreign_key: true
      # :category + :value + :unit as a separate table? (NumericValue, TextValue)
      t.integer :category, null: false, default: 0
      t.float :value, null: false, limit: Float::MANT_DIG
      t.references :unit, foreign_key: true
-      # Move to Measurement?
+      t.decimal :value, null: false, precision: 30, scale: 15
      #t.references :collector, foreign_key: true
      #t.references :device, foreign_key: true
--- a/db/migrate/20260402000000_add_taken_at_to_readouts.rb
+++ b/db/migrate/20260402000000_add_taken_at_to_readouts.rb
@@ -1,6 +0,0 @@
 class AddTakenAtToReadouts < ActiveRecord::Migration[7.2]
  def change
    add_column :readouts, :taken_at, :datetime
    add_index :readouts, [:user_id, :taken_at]
  end
 end
--- a/db/migrate/20260403000000_add_default_unit_to_quantities.rb
+++ b/db/migrate/20260403000000_add_default_unit_to_quantities.rb
@@ -1,5 +0,0 @@
 class AddDefaultUnitToQuantities < ActiveRecord::Migration[7.2]
  def change
    add_reference :quantities, :default_unit, foreign_key: {to_table: :units}, null: true
  end
 end
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
-ActiveRecord::Schema[7.2].define(version: 2026_04_03_000000) do
+ActiveRecord::Schema[7.2].define(version: 2025_01_21_230456) do
  create_table "quantities", charset: "utf8mb4", collation: "utf8mb4_0900_as_ci", force: :cascade do |t|
    t.bigint "user_id"
    t.string "name", limit: 31, null: false
@@ -20,8 +20,6 @@ ActiveRecord::Schema[7.2].define(version: 2026_04_03_000000) do
    t.datetime "updated_at", null: false
    t.integer "depth", default: 0, null: false
    t.string "pathname", limit: 511, null: false
    t.bigint "default_unit_id"
    t.index ["default_unit_id"], name: "index_quantities_on_default_unit_id"
    t.index ["parent_id"], name: "index_quantities_on_parent_id"
    t.index ["user_id", "parent_id", "name"], name: "index_quantities_on_user_id_and_parent_id_and_name", unique: true
    t.index ["user_id"], name: "index_quantities_on_user_id"
@@ -34,12 +32,10 @@ ActiveRecord::Schema[7.2].define(version: 2026_04_03_000000) do
    t.decimal "value", precision: 30, scale: 15, null: false
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
    t.datetime "taken_at"
    t.index ["quantity_id", "created_at"], name: "index_readouts_on_quantity_id_and_created_at", unique: true
    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|
@@ -74,7 +70,6 @@ ActiveRecord::Schema[7.2].define(version: 2026_04_03_000000) do
  end
  add_foreign_key "quantities", "quantities", column: "parent_id", on_delete: :cascade
  add_foreign_key "quantities", "units", column: "default_unit_id"
  add_foreign_key "quantities", "users"
  add_foreign_key "readouts", "quantities"
  add_foreign_key "readouts", "units"
--- a/db/seeds.rb
+++ b/db/seeds.rb
@@ -21,4 +21,3 @@ end
 #[Source, Quantity, Unit].each { |model| model.defaults.delete_all }
 require_relative 'seeds/units.rb'
 require_relative 'seeds/demo.rb'
--- a/db/seeds/demo.rb
+++ b/db/seeds/demo.rb
@@ -1,87 +0,0 @@
 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
--- a/test/controllers/charts_controller_test.rb
+++ b/test/controllers/charts_controller_test.rb
@@ -1,63 +0,0 @@
 require "test_helper"
 class ChartsControllerTest < ActionDispatch::IntegrationTest
  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 "requires authentication" do
    delete destroy_user_session_path
    get charts_path
    assert_response :redirect
  end
  test "index returns ok" do
    get charts_path
    assert_response :success
  end
  test "embeds readout data as JSON in script tag" do
    users(:alice).readouts.create!(quantity: @quantity, unit: @unit, value: 82.5, taken_at: 1.day.ago)
    get charts_path
    assert_select 'script#charts-data[type="application/json"]' do |elements|
      data = JSON.parse(elements.first.children.first.to_s)
      assert_equal 1, data.size
      assert_equal 'Weight', data.first['quantityName']
      assert_in_delta 82.5, data.first['value']
      assert_equal 'kg', data.first['unit']
      assert_not_nil data.first['takenAt']
    end
  end
  test "orders readouts by taken_at ascending" do
    older = users(:alice).readouts.create!(quantity: @quantity, unit: @unit, value: 80.0, taken_at: 2.days.ago)
    newer = users(:alice).readouts.create!(quantity: @quantity, unit: @unit, value: 82.5, taken_at: 1.day.ago)
    get charts_path
    assert_select 'script#charts-data[type="application/json"]' do |elements|
      data = JSON.parse(elements.first.children.first.to_s)
      assert_equal older.taken_at.iso8601, data.first['takenAt']
      assert_equal newer.taken_at.iso8601, data.last['takenAt']
    end
  end
  test "does not expose other users readouts" do
    bob_quantity = users(:bob).quantities.create!(name: 'Steps')
    bob_unit = users(:bob).units.create!(symbol: 'steps')
    users(:bob).readouts.create!(quantity: bob_quantity, unit: bob_unit, value: 5000, taken_at: 1.day.ago)
    get charts_path
    assert_select 'script#charts-data[type="application/json"]' do |elements|
      data = JSON.parse(elements.first.children.first.to_s)
      assert data.none? { |r| r['quantityName'] == 'Steps' }, "Bob's data must not appear"
    end
  end
 end
--- a/test/controllers/measurements_controller_test.rb
+++ b/test/controllers/measurements_controller_test.rb
@@ -1,65 +1,8 @@
 require "test_helper"
 class MeasurementsControllerTest < ActionDispatch::IntegrationTest
-  setup do
+  #test "should get index" do
-    host! '127.0.0.1'
+  #  get measurements_index_url
-    @user = users(:alice)
+  #  assert_response :success
-    post new_user_session_path, params: { user: { email: @user.email, password: 'alice' } }
+  #end
    @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
--- a/test/system/charts_test.rb
+++ b/test/system/charts_test.rb
@@ -1,26 +0,0 @@
 require "application_system_test_case"
 class ChartsTest < ApplicationSystemTestCase
  setup do
    @user = sign_in(user: users(:alice))
    @quantity = @user.quantities.create!(name: 'Weight')
    @unit = @user.units.create!(symbol: 'kg')
    @user.readouts.create!(quantity: @quantity, unit: @unit, value: 82.5, taken_at: 1.day.ago)
    @user.readouts.create!(quantity: @quantity, unit: @unit, value: 83.1, taken_at: Time.now)
    visit charts_path
  end
  test "charts page is reachable from navigation" do
    visit root_path
    click_on t('charts.navigation')
    assert_current_path charts_path
  end
  test "renders Plotly chart panel" do
    assert_selector '#measurements-charts .chart-panel', wait: 5
  end
  test "chart legend shows quantity name with unit" do
    assert_text 'Weight (kg)', wait: 5
  end
 end
--- a/test/system/measurements_test.rb
+++ b/test/system/measurements_test.rb
@@ -1,64 +0,0 @@
 require "application_system_test_case"
 class MeasurementsTest < ApplicationSystemTestCase
  setup do
    @user = sign_in(user: users(:alice))
    @quantity = @user.quantities.create!(name: 'Weight')
    @unit = @user.units.create!(symbol: 'kg')
    @readout = @user.readouts.create!(quantity: @quantity, unit: @unit, value: 82.5)
    visit measurements_path
  end
  test "index shows quantity name as edit link for active user" do
    within 'tbody' do
      assert_selector :link, exact_text: @quantity.name
    end
  end
  test "edit opens inline form on quantity link click" do
    within 'tbody' do
      click_on @quantity.name
      assert_selector ':focus'
      assert_selector 'input[name="readout[value]"]'
    end
  end
  test "edit and update measurement value" do
    within 'tbody' do
      click_on @quantity.name
      fill_in 'readout[value]', with: '83.1'
      assert_difference ->{ @readout.reload.value }, 83.1 - @readout.value do
        click_on t('helpers.submit.update')
      end
      assert_no_selector :fillable_field
      assert_selector :link, exact_text: @quantity.name
    end
    assert_selector '.flash.notice', text: t('measurements.update.success')
  end
  test "cancel edit restores original row" do
    within 'tbody' do
      click_on @quantity.name
      assert_selector 'input[name="readout[value]"]'
      click_on t(:cancel)
      assert_no_selector :fillable_field
      assert_selector :link, exact_text: @quantity.name
    end
  end
  test "wide view edit opens panel form" do
    @readout.update!(taken_at: Time.now)
    visit measurements_path
    execute_script("localStorage.removeItem('measurements-view')")
    visit measurements_path
    find('button[data-view="wide"]').click
    within '#measurements-wide' do
      assert_text format("%.10g", 82.5), wait: 3
      find('button.link').click
    end
    assert_selector '#measurement_edit_form input[name="readout[value]"]', wait: 5
  end
 end
--- a/test/system/quantities_test.rb
+++ b/test/system/quantities_test.rb
@@ -1,45 +0,0 @@
 require "application_system_test_case"
 class QuantitiesTest < ApplicationSystemTestCase
  setup do
    @user = sign_in(user: users(:alice))
    @unit = @user.units.create!(symbol: 'kg')
    @quantity = @user.quantities.create!(name: 'Weight')
    visit quantities_path
  end
  test "update button turns red when default unit changes" do
    click_on 'Weight'
    button = find('button[name=button]')
    initial_color = evaluate_script("getComputedStyle(arguments[0]).backgroundColor", button)
    select 'kg', from: 'quantity[default_unit_id]'
    changed_color = evaluate_script("getComputedStyle(arguments[0]).backgroundColor", button)
    refute_equal initial_color, changed_color, "Button color should change when default unit is altered"
  end
  test "saving default unit pre-selects it in measurements form" do
    click_on 'Weight'
    select 'kg', from: 'quantity[default_unit_id]'
    click_on t('helpers.submit.update')
    assert_selector '.flash.notice'
    @quantity.reload
    assert_equal @unit.id, @quantity.default_unit_id
    visit measurements_path
    find(:link_or_button, t('measurements.index.new_measurement')).click
    assert_selector '#measurement_form'
    within '#quantity_select' do
      check 'Weight'
    end
    find('button[formaction]').click
    within 'tbody#readouts' do
      assert_selector "option[value='#{@unit.id}'][selected]"
    end
  end
 end
--- a/test/system/users_test.rb
+++ b/test/system/users_test.rb
@@ -229,7 +229,7 @@ class UsersTest < ApplicationSystemTestCase
      user = User.find_by_email!(first(:link).text)
      inject_button_to first('td:not(.link)'), "update status", user_path(user), method: :patch,
        params: {user: {status: User.statuses.keys.sample}}, data: {turbo: false}
-      execute_script("arguments[0].click()", find_button("update status"))
+      click_on "update status"
    end
    assert_title 'The change you wanted was rejected (422)'
  end
`@@ -1 +1 @@`
	`<svg xmlns="http://www.w3.org/2000/svg" id="icon" viewBox="0 0 24 24"><path d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16" /></svg>`	`<svg xmlns="http://www.w3.org/2000/svg" id="icon" viewBox="0 0 24 24"><path fill="#ffffff" d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16" /></svg>`
		`@@ -1 +0,0 @@`
			`<svg xmlns="http://www.w3.org/2000/svg" id="icon" viewBox="0 0 24 24"><path d="M4,4H8V20H4V4M10,4H14V20H10V4M16,4H21V20H16V4Z"/></svg>`
		`@@ -1,2 +0,0 @@`
			`<%= turbo_stream.close_form row %>`
			`<%= turbo_stream.update :flashes %>`
		`@@ -1 +1 @@`
			`yQ/e5AEwReoZ6yiIqCZjBbl2Tp41JNcuwfWF3FeSSk2K0XBtE+VQXHlAHMBPRwbBdkutB8jls+YKou3JX58j88BEH3Ft/8h7GIepYF+nOhdb79y05lqEhARA4IZYnHe1Do72MdmseE0ectfDpfk6Q1qnfiTFe3X1KyfLR0hiSEM5+1ZYfk2loUBWSIfgYuqtK7bEOZiL6imU46n4+58g3VZd0cK7getT7rwNlVt1s6ME9PTwT/RqE736fLEIyDeaEg8hBxTrPVeYyii2o4IWM02/0HsuRPxXLLQAgXyzHhlT9wo18X5FaaecgGloBie0UMrPS3j6oBlVn61WQbkuEe/yQKnzyiw0v5HSmzME4PiDTaSW2em/BtGiMAhJpyukipQa4/leR3OTJxv3TAMha1bnk/OC--QU+gjSEvBsZpr3XT--osCoTfqZ4ENeas+nFdXefA==`				`3nm9KZNtyLhPgZBVzOOkN2FXHD0uEMuzgb5Sl1MrAMmi6+iEFSzyTHfZFW2mz18VyNz5DDYvTODZqBDQKK+FQh70uEQkmGqaY5XsTOzUFzk56quaPNtZvFEGux1nX2avSbYQBs3HeyYyWyTAFhez5j8tVb6sZD2xZ8twa9KAB42j86NIHT9w/ZMFqZbGbdBoR1Mrqoy9/IWv2QgxMTpGR6JBpTUwauXm6wS/bTt8SCXF57JSVgvdw/BxFzoA3Xj6N5E89LbMfh54W2ruMhybka5E7zXN9z0v4oXt8GiYZFIODEYZwqzEVaUK1WXS5qb5OrDJFAzs29Uf/gDrIDx71Lot+jejCS+xFfI9454EnHcVH66wKuwF6ylKupJDffM0hQHplcEfVSq5UiDfbPXm46Vr0g1A--2RrmuzCBuHvYpPNA--ugbuRe7ivfDqeUCt6ahciA==`