Fix ArgumentError for text column length validations

`type_for_attribute(:description).limit` returns nil for text columns,
which newer Rails rejects with ArgumentError: :maximum must be a
non-negative Integer. Guard with `if type_for_attribute(...).limit`
to skip the validation when the column has no limit.

Affects Unit and Quantity models.

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

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

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

Gemfile

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

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

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>

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>

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>

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>

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),
- * * styles with multiple selectors should have all selectors with same
- * specificity, to allow proper rule specificity vs order management.
+ * differently depending on context (e.g. form)
  *
- * NOTE: style in a modular way, similar to how CSS @scope would be used,
- * to make transition easier once @scope is widely available. */
+ * NOTE: Style in a modular way, similar to how CSS @scope would be used,
+ * 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,
- *  gray - target for interaction with keyboard,
- *  red - destructive, non-undoable action.
+ *  blue - target for interaction with pointer
+ *  gray - target for interaction with keyboard
+ *  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 {
-  height: 1.4em;
-  margin: 0 0.2em 0 0;
-  width: 1.4em;
-}
-svg:last-child {
-  margin-right: 0;
-}
-.chart-panel svg {
-  height: auto;
-  margin: 0;
-  width: auto;
+[name=cancel],
+.auxiliary {
+  border-color: var(--color-border-gray);
+  color: var(--color-nav-gray);
+  fill: var(--color-nav-gray);
 }
+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>. */
-/* TODO: add spin buttons inside <input type=number>: before (-) and after (+) input. */
+/* Hide spin buttons in input number fields */
+/* 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:
- *  - black for row/table forms,
- *  - inherited for internal (column specific) buttons/forms. */
-table input,
-table select,
-table summary,
-table textarea {
-  border-color: var(--color-border-gray);
+.button > svg,
+.tab > svg,
+button > svg {
+  height: 1.4em;
+  width: 1.4em;
 }
-table input,
-table select,
-table textarea {
-  padding-block: 0.375em;
+.button > svg:not(:last-child),
+.tab > svg:not(:last-child),
+button > svg:not(:last-child) {
+  margin-right: 0.2em;
 }
-table form input,
-table form select,
-table form summary,
-table form textarea {
-  color: inherit;
-}
-table svg:not(:only-child) {
-  height: 1.25em;
-  width: 1.25em;
+/* TODO: move normal non-button links (<a>:hover/:focus) styling here (i.e.
+ * page-wide, top-level) and remove from table.items - as the style should be
+ * same everywhere */
+.button:focus-visible,
+button:focus-visible,
+input[type=submit]:focus-visible {
+  background-color: var(--color-focus-gray);
 }
 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,
-select:hover,
-summary: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 {
+.button:hover,
+button:hover,
+input[type=submit]: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"],
-.set-default-unit:not([disabled]) {
-  background-color: var(--color-purple);
-  border-color: var(--color-purple);
-  color: white;
-  fill: white;
+input:hover,
+select:hover,
+summary:hover,
+textarea:hover {
+  border-color: var(--color-blue);
+  outline: solid 1px var(--color-blue);
 }
-.link:focus-visible {
-  text-decoration-color: var(--color-gray);
+select:hover,
+summary:hover {
+  cursor: pointer;
 }
-.link:hover {
-  color: var(--color-blue);
-  text-decoration-color: var(--color-blue);
+input:invalid,
+select:invalid,
+textarea:invalid {
+  border-color: var(--color-red);
+  outline: solid 1px var(--color-red);
 }
-table .button {
-  border-color: var(--color-border-gray);
-  color: var(--color-table-gray);
-  font-weight: normal;
-  height: 100%;
-  padding: 0.4em;
+input[type=text]:read-only,
+textarea:read-only {
+  border: none;
+  padding-inline: 0;
 }
 
 
-/* NOTE: collapse gaps around empty rows (`topside`) once possible with
- * `grid-collapse` property and remove alternative `grid-template-areas`.
+/* NOTE: collapse gaps around empty rows (`topside`) once possible
+ * with grid-collapse property and remove alternative grid-template
  * https://github.com/w3c/csswg-drafts/issues/5813 */
 body {
   display: grid;
@@ -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 {
-  cursor: pointer;
-  fill: white;
-  height: 2.2em;
-  opacity: 0.6;
-  padding: 0.4em 0.5em;
-  width: 2.4em;
+.flash > div {
+  grid-column: 2;
 }
-.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;
-}
 
-
-.items-table {
+/* TODO: remove .items class (?) and make 'form table' work properly */
+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,
-.items-table tbody tr:hover {
+table.items thead,
+table.items tbody tr:hover {
   background-color: var(--color-focus-gray);
 }
-.items-table th {
-  padding: 0.75em 0 0.75em 1em;
+table.items th {
+  padding-block: 0.75em;
   text-align: center;
 }
-.items-table th:last-child {
-  padding-inline-end: 0.4em;
+table.items th,
+table.items td {
+  padding-inline: 1em 0;
 }
-.items-table td {
-  border-top: 1px solid var(--color-border-gray);
-  height: 2.4em;
-  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) {
+/* For <a> to fill <td> completely, we use an ::after pseudoelement. */
+table.items td.link {
+  padding: 0;
   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 {
-  cursor: grab;
+table.items td.handle {
+  cursor: move;
 }
-.items-table .form td {
-  vertical-align: middle;
+table.items tr.form td {
+  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 {
-  flex-direction: column;
+.hflex.centered {
+  justify-content: center;
 }
 .hint {
   color: var(--color-table-gray);
@@ -564,18 +586,21 @@ header {
   font-size: 0.9rem;
   text-align: center;
 }
-.hmin50 {
-  min-width: 50%;
+.vflex {
+  display: flex;
+  gap: 0.8em;
+  flex-direction: column;
 }
-.italic {
-  color: var(--color-gray);
-  font-style: italic;
-}
-.ralign {
-  text-align: right;
-}
-.rextend {
-  margin-right: auto;
+[disabled] {
+/* label:has(input[disabled]) {
+ * TODO: disabled checkbox blue square focus removal; disabled label styling;
+ * focused label styling (currently only checkbox has focus)
+ * */
+  border-color: var(--color-border-gray) !important;
+  color: var(--color-border-gray) !important;
+  cursor: not-allowed;
+  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;
-  border: 1px solid var(--color-border-gray);
+  background: white;
+  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;
-}

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

app/controllers/measurements_controller.rb

@@ -1,12 +1,7 @@
 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
+    @measurements = []
+    #@measurements = current_user.units.ordered.includes(:base, :subunits)
   end
 
   def new
@@ -14,49 +9,8 @@ class MeasurementsController < ApplicationController
   end
 
   def create
-    taken_at = params.permit(:taken_at)[:taken_at]
-    readout_params = params.permit(readouts: Readout::ATTRIBUTES).fetch(:readouts, [])
-    @readouts = readout_params.map { |rp| current_user.readouts.build(rp.merge(taken_at: taken_at)) }
-
-    if @readouts.present? && @readouts.all?(&:valid?)
-      ActiveRecord::Base.transaction { @readouts.each(&:save!) }
-      load_measurements
-      flash.now[:notice] = t('.success', count: @readouts.size)
-    else
-      errors = @readouts.flat_map { |r| r.errors.full_messages }
-      flash.now[:alert] = errors.present? ? errors.first : t('.no_readouts')
-    end
-  end
-
-  def edit
-    @user_units = current_user.units.ordered
-  end
-
-  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 :edit
-    end
   end
 
   def destroy
-    @readout.destroy!
-    load_measurements
-    flash.now[:notice] = t('.success')
-  end
-
-  private
-
-  def find_readout
-    @readout = current_user.readouts.find(params[:id])
-  end
-
-  def load_measurements
-    @measurements = current_user.readouts.includes(:quantity, :unit).order(taken_at: :desc, id: :desc)
-    @wide_groups = @measurements.group_by(&:taken_at)
-    @wide_quantities = @measurements.map(&:quantity).uniq.sort_by(&:name)
   end
 end

app/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

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
-      when :decimal
+      if attr_type.type == :decimal
         options[:value] = object.public_send(method)&.to_scientific
         options[:step] ||= BigDecimal(10).power(-attr_type.scale)
         options[:max] ||= BigDecimal(10).power(attr_type.precision - attr_type.scale) -
           options[:step]
         options[:min] = options[:min] == :step ? options[:step] : options[:min]
         options[:min] ||= -options[:max]
-        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
-      value, options = nil, value if value.is_a?(Hash)
-      options = options.merge(
-        @default_options.slice(:form),
-        class: @template.class_names('button', options[:class])
-      )
+      # button does not use #objectify_options
+      options.merge!(@options.slice(:form))
       super
     end
 
@@ -153,14 +138,12 @@ module ApplicationHelper
   end
 
   def tabular_form_with(**options, &block)
-    extra_options = {builder: TabularFormBuilder, class: 'tabular-form',
-                     html: {autocomplete: 'off'}}
+    extra_options = {builder: TabularFormBuilder, 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)) +
-            svg_tag('pictograms/close-outline', {onclick: "this.parentElement.remove()"})
+          # TODO: change button text to svg to make it aligned vertically
+          tag.div(sanitize(message)) + tag.button(sanitize("×"), tabindex: -1,
+                                                  onclick: "this.parentElement.remove();")
         end
       end
     end.join.html_safe

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

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.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

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 }

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 })
-  }
-}

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
-      }
-    }
-  }
-}

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()
-  }
-}

app/javascript/controllers/form_controller.js

@@ -1,51 +0,0 @@
-import { Controller } from "@hotwired/stimulus"
-
-export default class extends Controller {
-  processKey(event) {
-    switch (event.key) {
-      case "Escape":
-        this.element.querySelector("a[name=cancel]").click()
-        break
-      case "Enter":
-        this.element.querySelector("button[name=button]").click()
-        event.preventDefault()
-        break
-    }
-  }
-
-  validate(event) {
-    const id = event.submitter?.getAttribute("data-validate")
-    if (!id) return
-    const input = document.getElementById(id)
-    if (!input.checkValidity()) {
-      input.reportValidity()
-      event.preventDefault()
-    }
-  }
-
-  cancel(event) {
-    event.preventDefault()
-    const el = this.element
-
-    // Move focus to next open form if this one had focus
-    const focused = document.activeElement
-    if (!focused || focused === document.body || el.contains(focused)) {
-      const next = el.parentElement?.querySelector(`#${el.id} ~ tr:has([autofocus])`)
-        ?? el.parentElement?.querySelector("tr:has([autofocus])")
-      next?.querySelector("[autofocus]")?.focus()
-    }
-
-    // Remove associated inner form element (tabular: <tr> wraps a separate <form>)
-    document.getElementById(el.dataset.form)?.remove()
-
-    // Re-enable trigger link
-    const enableId = el.dataset.link ?? el.dataset.cancelEnable
-    if (enableId) Turbo.StreamElement.prototype.enableElement(document.getElementById(enableId))
-
-    // Show hidden row (tabular forms) or no-items placeholder (create form)
-    document.getElementById(el.dataset.hiddenRow)?.removeAttribute("style")
-    document.getElementById(el.dataset.cancelShow)?.style.removeProperty("display")
-
-    el.remove()
-  }
-}

app/javascript/controllers/index.js

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

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
-      })
-  }
-}

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'
-  }
-}

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()
-  }
-}

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
 
@@ -17,7 +16,7 @@ class Quantity < ApplicationRecord
   end
   validates :name, presence: true, uniqueness: {scope: [:user_id, :parent_id]},
     length: {maximum: type_for_attribute(:name).limit}
-  validates :description, length: {maximum: type_for_attribute(:description).limit}
+  validates :description, length: {maximum: type_for_attribute(:description).limit} if type_for_attribute(:description).limit
 
   # Update :depths of progenies after parent change
   before_save if: :parent_changed? do

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

app/models/unit.rb

@@ -13,7 +13,7 @@ class Unit < ApplicationRecord
   end
   validates :symbol, presence: true, uniqueness: {scope: :user_id},
     length: {maximum: type_for_attribute(:symbol).limit}
-  validates :description, length: {maximum: type_for_attribute(:description).limit}
+  validates :description, length: {maximum: type_for_attribute(:description).limit} if type_for_attribute(:description).limit
   validates :multiplier, numericality: {equal_to: 1}, unless: :base
   validates :multiplier, numericality: {greater_than: 0, precision: true, scale: true}, if: :base
 

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>

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',

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>

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) %>

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,
-        data: {action: 'click->form#cancel'} %>
-    </td>
-  <% end %>
-<% end %>

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,
-            data: {action: 'click->form#cancel'} %>
-        </td>
-      <% end %>
-    </tbody>
-  </table>
-<% end %>

app/views/measurements/_form.html.erb

@@ -1,41 +1,36 @@
 <%= tabular_form_with model: Measurement.new, id: :measurement_form,
-  class: 'topside-area flex vertical center',
-  html: {data: {controller: 'form', action: 'keydown->form#processKey',
-                cancel_enable: 'new_measurement_link',
-                cancel_show: 'no_items'}} do |form| %>
-
-  <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>
+  class: 'topside-area vflex', html: {onkeydown: 'formProcessKey(event)'} do |form| %>
+  <table class="items centered">
+    <tbody id="readouts"></tbody>
   </table>
 
-  <%# TODO: right-click selection; unnecessary with hierarchical tags? %>
-  <details id="quantity_select" class="center hexpand" open
-           data-controller="details"
-           data-action="focusout->details#close change->details#change keydown->details#processKey">
+  <div class="hflex">
+    <%# TODO: right-click selection %>
+    <details id="quantity_select" class="hexpand" open
+             onkeydown="detailsProcessKey(event)">
       <summary autofocus>
         <!-- TODO: Set content with CSS when span empty to avoid duplication -->
-      <span data-prompt="<%= t('.select_quantity') %>" 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', data: {action: 'click->form#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>

app/views/measurements/_form_close.html.erb

@@ -0,0 +1,4 @@
+<%= turbo_stream.update :flashes %>
+<%= turbo_stream.remove :measurement_form %>
+<%= turbo_stream.show :no_items -%>
+<%= turbo_stream.enable :new_measurement_link -%>

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', onclick: 'this.blur();', 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 %>

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', onclick: 'this.blur();',
-                    data: {turbo_stream: true} %>
-                <% else %>
-                  <%= format("%.10g", readout.value) %>
-                <% end %>
-                &nbsp;<%= readout.unit.symbol %>
-                <% if current_user.at_least(:active) %>
-                  <%= image_button_to '', 'delete-outline', measurement_path(readout),
-                    method: :delete, data: {turbo_stream: true} %>
-                <% end %>
-              </span>
-            <% end %>
-          </td>
-        <% end %>
-        <td><%= l(readouts.first.created_at) %></td>
-      </tr>
-    <% end %>
-  </tbody>
-</table>

app/views/measurements/create.turbo_stream.erb

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

app/views/measurements/destroy.turbo_stream.erb

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

app/views/measurements/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 %>

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, 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">
-  <%= tag.div id: :measurement_edit_form %>
-  <table class="items-table measurements-compact" data-controller="measurements">
-    <thead>
-      <tr>
-        <th><%= Quantity.model_name.human %></th>
-        <th><%= Readout.human_attribute_name(:value) %></th>
-        <th><%= Unit.model_name.human %></th>
-        <th 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 %>
+<table class="main-area">
+  <tbody id="measurements">
+    <%= render(@measurements) || render_no_items %>
   </tbody>
 </table>
-
-  <div id="measurements-wide" class="measurements-wide">
-    <%= render 'wide_table', wide_groups: @wide_groups, wide_quantities: @wide_quantities %>
-  </div>
-</div>

app/views/measurements/update.turbo_stream.erb

@@ -1,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} %>

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",
-    data: {controller: 'form', action: 'keydown->form#processKey',
-           link: link, form: form_tag, hidden_row: hidden_row} do %>
+  <%- tag.tr id: row, class: "form", onkeydown: "formProcessKey(event)",
+    data: {link: link, form: form_tag, hidden_row: hidden_row} do %>
 
     <td style="--depth:<%= @quantity.depth %>">
       <%= form.text_field :name, required: true, autofocus: true, size: 20 %>
@@ -9,16 +8,11 @@
     <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, data: {action: 'click->form#cancel'} %>
+        name: :cancel, onclick: render_turbo_stream('form_close', {row: row}) %>
     </td>
     <td></td>
   <% end %>

app/views/quantities/_form_close.html.erb

@@ -0,0 +1,2 @@
+<%= turbo_stream.close_form row %>
+<%= turbo_stream.update :flashes %>

app/views/quantities/_quantity.html.erb

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

app/views/quantities/index.html.erb

@@ -8,26 +8,23 @@
     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(:default_unit) %></th>
+      <th><%= Quantity.human_attribute_name(:description) %></th>
       <% if current_user.at_least(:active) %>
         <th><%= t :actions %></th>
         <th></th>
       <% end %>
     </tr>
     <%= tag.tr id: "quantity_", hidden: true,
-               data: {controller: 'drag',
-                      action: 'dragover->drag#over drop->drag#drop dragenter->drag#enter dragleave->drag#leave',
-                      drag_drop_id_value: 'quantity_',
-                      drag_drop_id_param_value: 'quantity[parent_id]'} do %>
-      <th colspan="5"><%= t '.top_level_drop' %></th>
+               ondragover: "dragOver(event)", ondrop: "drop(event)",
+               ondragenter: "dragEnter(event)", ondragleave: "dragLeave(event)",
+               data: {drop_id: "quantity_", drop_id_param: "quantity[parent_id]"} do %>
+      <th colspan="4"><%= t '.top_level_drop' %></th>
     <% end %>
   </thead>
   <tbody id="quantities">

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),
-             data: {controller: 'readout-unit'} do %>
-    <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">
+  <%- tag.tr id: dom_id(readout.quantity, :new, :readout) do %>
+    <td class="actions">
       <%# TODO: change to _link_ after giving up displaying relative paths %>
-      <%= image_button_tag '', '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 %>

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",
-    data: {controller: 'form', action: 'keydown->form#processKey',
-           link: link, form: form_tag, hidden_row: hidden_row} do %>
+  <%- tag.tr id: row, class: "form", onkeydown: "formProcessKey(event)",
+    data: {link: link, form: form_tag, hidden_row: hidden_row} do %>
 
     <td style="--depth:<%= @unit.base_id? ? 1 : 0 %>">
       <%= form.text_field :symbol, required: true, autofocus: true, size: 12 %>
@@ -9,14 +8,14 @@
     <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, data: {action: 'click->form#cancel'} %>
+        name: :cancel, onclick: render_turbo_stream('form_close', {row: row}) %>
     </td>
     <td></td>
   <% end %>

app/views/units/_form_close.html.erb

@@ -0,0 +1,2 @@
+<%= turbo_stream.close_form row %>
+<%= turbo_stream.update :flashes %>

app/views/units/_unit.html.erb

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

app/views/units/index.html.erb

@@ -7,14 +7,13 @@
     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',
-                      action: 'dragover->drag#over drop->drag#drop dragenter->drag#enter dragleave->drag#leave',
-                      drag_drop_id_value: 'unit_',
-                      drag_drop_id_param_value: 'unit[base_id]'} do %>
+               ondragover: "dragOver(event)", ondrop: "drop(event)",
+               ondragenter: "dragEnter(event)", ondragleave: "dragLeave(event)",
+               data: {drop_id: "unit_", drop_id_param: "unit[base_id]"} do %>
       <th colspan="5"><%= t '.top_level_drop' %></th>
     <% end %>
   </thead>

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 %>

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)} %>

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' %>

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 %>

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==

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

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"

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,16 @@ 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...
-      taken_at_html: Measurement taken at 
+      select_quantity: select the measured quantities...
     index:
       new_measurement: Add measurement
-      view_compact: Compact view
-      view_wide: Wide view
-      view_charts: Charts
-    readout:
-      edit: Edit
-      destroy: Delete
-    create:
-      success:
-        one: Recorded 1 measurement.
-        other: Recorded %{count} measurements.
-      no_readouts: No readouts selected.
-    update:
-      success: Measurement updated.
-    destroy:
-      success: Measurement deleted.
+  readouts:
+    form:
+      select_unit: ...
   quantities:
     navigation: Quantities
     no_items: There are no configured quantities. You can Add some or Import from defaults.

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}

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 :measurement, foreign_key: true
+      t.references :user, null: false, 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
 

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

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

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"

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'

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

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

test/controllers/measurements_controller_test.rb

@@ -1,65 +1,8 @@
 require "test_helper"
 
 class MeasurementsControllerTest < 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 "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
+  #test "should get index" do
+  #  get measurements_index_url
+  #  assert_response :success
+  #end
 end

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

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

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

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