Extract disableElement/enableElement to shared module

Stimulus controllers were reaching into Turbo.StreamElement.prototype
to call disableElement/enableElement — tight coupling to Turbo internals.

Extract both functions to app/javascript/element_helpers.js and import
from there in application.js (which still assigns them to the Turbo
prototype for server-driven Turbo Stream actions), details_controller,
and readout_unit_controller.

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

CLAUDE.md

@@ -0,0 +1,122 @@
+# 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

@@ -0,0 +1,34 @@
+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

@@ -1,7 +1,7 @@
 source "https://rubygems.org"
 
 # The requirement for the Ruby version comes from Rails
-gem "rails", "~> 7.2.2"
+gem "rails", "~> 7.2.3"
 gem "sprockets-rails"
 gem "puma", "~> 6.0"
 gem "sassc-rails"
@@ -25,6 +25,7 @@ gem "devise"
 
 gem "importmap-rails"
 gem "turbo-rails", "~> 2.0"
+gem "stimulus-rails"
 
 group :development, :test do
   gem "byebug"
@@ -42,4 +43,11 @@ group :test do
   # Use system testing [https://guides.rubyonrails.org/testing.html#system-testing]
   gem "capybara"
   gem "selenium-webdriver"
+
+  # Remove minitest version restriction after error fixed:
+  #   railties-7.2.3/lib/rails/test_unit/line_filtering.rb:7:in `run':
+  #     wrong number of arguments (given 3, expected 1..2) (ArgumentError)
+  #   from /var/www/.gem/ruby/3.3.0/gems/minitest-6.0.2/lib/minitest.rb:473:in
+  #     `block (2 levels) in run_suite'
+  gem "minitest", "< 6"
 end

Gemfile.lock

@@ -1,66 +1,68 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    actioncable (7.2.2.1)
-      actionpack (= 7.2.2.1)
-      activesupport (= 7.2.2.1)
+    actioncable (7.2.3)
+      actionpack (= 7.2.3)
+      activesupport (= 7.2.3)
       nio4r (~> 2.0)
       websocket-driver (>= 0.6.1)
       zeitwerk (~> 2.6)
-    actionmailbox (7.2.2.1)
-      actionpack (= 7.2.2.1)
-      activejob (= 7.2.2.1)
-      activerecord (= 7.2.2.1)
-      activestorage (= 7.2.2.1)
-      activesupport (= 7.2.2.1)
+    actionmailbox (7.2.3)
+      actionpack (= 7.2.3)
+      activejob (= 7.2.3)
+      activerecord (= 7.2.3)
+      activestorage (= 7.2.3)
+      activesupport (= 7.2.3)
       mail (>= 2.8.0)
-    actionmailer (7.2.2.1)
-      actionpack (= 7.2.2.1)
-      actionview (= 7.2.2.1)
-      activejob (= 7.2.2.1)
-      activesupport (= 7.2.2.1)
+    actionmailer (7.2.3)
+      actionpack (= 7.2.3)
+      actionview (= 7.2.3)
+      activejob (= 7.2.3)
+      activesupport (= 7.2.3)
       mail (>= 2.8.0)
       rails-dom-testing (~> 2.2)
-    actionpack (7.2.2.1)
-      actionview (= 7.2.2.1)
-      activesupport (= 7.2.2.1)
+    actionpack (7.2.3)
+      actionview (= 7.2.3)
+      activesupport (= 7.2.3)
+      cgi
       nokogiri (>= 1.8.5)
       racc
-      rack (>= 2.2.4, < 3.2)
+      rack (>= 2.2.4, < 3.3)
       rack-session (>= 1.0.1)
       rack-test (>= 0.6.3)
       rails-dom-testing (~> 2.2)
       rails-html-sanitizer (~> 1.6)
       useragent (~> 0.16)
-    actiontext (7.2.2.1)
-      actionpack (= 7.2.2.1)
-      activerecord (= 7.2.2.1)
-      activestorage (= 7.2.2.1)
-      activesupport (= 7.2.2.1)
+    actiontext (7.2.3)
+      actionpack (= 7.2.3)
+      activerecord (= 7.2.3)
+      activestorage (= 7.2.3)
+      activesupport (= 7.2.3)
       globalid (>= 0.6.0)
       nokogiri (>= 1.8.5)
-    actionview (7.2.2.1)
-      activesupport (= 7.2.2.1)
+    actionview (7.2.3)
+      activesupport (= 7.2.3)
       builder (~> 3.1)
+      cgi
       erubi (~> 1.11)
       rails-dom-testing (~> 2.2)
       rails-html-sanitizer (~> 1.6)
-    activejob (7.2.2.1)
-      activesupport (= 7.2.2.1)
+    activejob (7.2.3)
+      activesupport (= 7.2.3)
       globalid (>= 0.3.6)
-    activemodel (7.2.2.1)
-      activesupport (= 7.2.2.1)
-    activerecord (7.2.2.1)
-      activemodel (= 7.2.2.1)
-      activesupport (= 7.2.2.1)
+    activemodel (7.2.3)
+      activesupport (= 7.2.3)
+    activerecord (7.2.3)
+      activemodel (= 7.2.3)
+      activesupport (= 7.2.3)
       timeout (>= 0.4.0)
-    activestorage (7.2.2.1)
-      actionpack (= 7.2.2.1)
-      activejob (= 7.2.2.1)
-      activerecord (= 7.2.2.1)
-      activesupport (= 7.2.2.1)
+    activestorage (7.2.3)
+      actionpack (= 7.2.3)
+      activejob (= 7.2.3)
+      activerecord (= 7.2.3)
+      activesupport (= 7.2.3)
       marcel (~> 1.0)
-    activesupport (7.2.2.1)
+    activesupport (7.2.3)
       base64
       benchmark (>= 0.3)
       bigdecimal
@@ -72,15 +74,16 @@ GEM
       minitest (>= 5.1)
       securerandom (>= 0.3)
       tzinfo (~> 2.0, >= 2.0.5)
-    addressable (2.8.7)
-      public_suffix (>= 2.0.2, < 7.0)
-    base64 (0.2.0)
-    bcrypt (3.1.20)
-    benchmark (0.4.0)
-    bigdecimal (3.1.9)
+    addressable (2.8.8)
+      public_suffix (>= 2.0.2, < 8.0)
+    base64 (0.3.0)
+    bcrypt (3.1.21)
+    benchmark (0.5.0)
+    bigdecimal (4.0.1)
     bindex (0.8.1)
     builder (3.3.0)
-    byebug (12.0.0)
+    byebug (13.0.0)
+      reline (>= 0.6.0)
     capybara (3.40.0)
       addressable
       matrix
@@ -90,54 +93,59 @@ GEM
       rack-test (>= 0.6.3)
       regexp_parser (>= 1.5, < 3.0)
       xpath (~> 3.2)
-    concurrent-ruby (1.3.5)
-    connection_pool (2.5.2)
+    cgi (0.5.1)
+    concurrent-ruby (1.3.6)
+    connection_pool (3.0.2)
     crass (1.0.6)
-    date (3.4.1)
-    devise (4.9.4)
+    date (3.5.1)
+    devise (5.0.2)
       bcrypt (~> 3.0)
       orm_adapter (~> 0.1)
-      railties (>= 4.1.0)
+      railties (>= 7.0)
       responders
       warden (~> 1.2.3)
-    drb (2.2.1)
+    drb (2.2.3)
+    erb (6.0.2)
     erubi (1.13.1)
-    ffi (1.17.2-aarch64-linux-gnu)
-    ffi (1.17.2-aarch64-linux-musl)
-    ffi (1.17.2-arm-linux-gnu)
-    ffi (1.17.2-arm-linux-musl)
-    ffi (1.17.2-arm64-darwin)
-    ffi (1.17.2-x86_64-darwin)
-    ffi (1.17.2-x86_64-linux-gnu)
-    ffi (1.17.2-x86_64-linux-musl)
-    globalid (1.2.1)
+    ffi (1.17.3-aarch64-linux-gnu)
+    ffi (1.17.3-aarch64-linux-musl)
+    ffi (1.17.3-arm-linux-gnu)
+    ffi (1.17.3-arm-linux-musl)
+    ffi (1.17.3-arm64-darwin)
+    ffi (1.17.3-x86_64-darwin)
+    ffi (1.17.3-x86_64-linux-gnu)
+    ffi (1.17.3-x86_64-linux-musl)
+    globalid (1.3.0)
       activesupport (>= 6.1)
-    i18n (1.14.7)
+    i18n (1.14.8)
       concurrent-ruby (~> 1.0)
-    importmap-rails (2.1.0)
+    importmap-rails (2.2.3)
       actionpack (>= 6.0.0)
       activesupport (>= 6.0.0)
       railties (>= 6.0.0)
-    io-console (0.8.0)
-    irb (1.15.2)
+    io-console (0.8.2)
+    irb (1.17.0)
       pp (>= 0.6.0)
+      prism (>= 1.3.0)
       rdoc (>= 4.0.0)
       reline (>= 0.4.2)
     logger (1.7.0)
-    loofah (2.24.0)
+    loofah (2.25.0)
       crass (~> 1.0.2)
       nokogiri (>= 1.12.0)
-    mail (2.8.1)
+    mail (2.9.0)
+      logger
       mini_mime (>= 0.1.1)
       net-imap
       net-pop
       net-smtp
-    marcel (1.0.4)
-    matrix (0.4.2)
+    marcel (1.1.0)
+    matrix (0.4.3)
     mini_mime (1.1.5)
-    minitest (5.25.5)
-    mysql2 (0.5.6)
-    net-imap (0.5.7)
+    minitest (5.27.0)
+    mysql2 (0.5.7)
+      bigdecimal
+    net-imap (0.6.3)
       date
       net-protocol
     net-pop (0.1.2)
@@ -146,83 +154,94 @@ GEM
       timeout
     net-smtp (0.5.1)
       net-protocol
-    nio4r (2.7.4)
-    nokogiri (1.18.8-aarch64-linux-gnu)
+    nio4r (2.7.5)
+    nokogiri (1.19.1-aarch64-linux-gnu)
       racc (~> 1.4)
-    nokogiri (1.18.8-aarch64-linux-musl)
+    nokogiri (1.19.1-aarch64-linux-musl)
       racc (~> 1.4)
-    nokogiri (1.18.8-arm-linux-gnu)
+    nokogiri (1.19.1-arm-linux-gnu)
       racc (~> 1.4)
-    nokogiri (1.18.8-arm-linux-musl)
+    nokogiri (1.19.1-arm-linux-musl)
       racc (~> 1.4)
-    nokogiri (1.18.8-arm64-darwin)
+    nokogiri (1.19.1-arm64-darwin)
       racc (~> 1.4)
-    nokogiri (1.18.8-x86_64-darwin)
+    nokogiri (1.19.1-x86_64-darwin)
       racc (~> 1.4)
-    nokogiri (1.18.8-x86_64-linux-gnu)
+    nokogiri (1.19.1-x86_64-linux-gnu)
       racc (~> 1.4)
-    nokogiri (1.18.8-x86_64-linux-musl)
+    nokogiri (1.19.1-x86_64-linux-musl)
       racc (~> 1.4)
     orm_adapter (0.5.0)
-    pg (1.5.9)
-    pp (0.6.2)
+    pg (1.6.3)
+    pg (1.6.3-aarch64-linux)
+    pg (1.6.3-aarch64-linux-musl)
+    pg (1.6.3-arm64-darwin)
+    pg (1.6.3-x86_64-darwin)
+    pg (1.6.3-x86_64-linux)
+    pg (1.6.3-x86_64-linux-musl)
+    pp (0.6.3)
       prettyprint
     prettyprint (0.2.0)
-    psych (5.2.3)
+    prism (1.9.0)
+    psych (5.3.1)
       date
       stringio
-    public_suffix (6.0.1)
-    puma (6.6.0)
+    public_suffix (7.0.2)
+    puma (6.6.1)
       nio4r (~> 2.0)
     racc (1.8.1)
-    rack (3.1.13)
-    rack-session (2.1.0)
+    rack (3.2.5)
+    rack-session (2.1.1)
       base64 (>= 0.1.0)
       rack (>= 3.0.0)
     rack-test (2.2.0)
       rack (>= 1.3)
-    rackup (2.2.1)
+    rackup (2.3.1)
       rack (>= 3)
-    rails (7.2.2.1)
-      actioncable (= 7.2.2.1)
-      actionmailbox (= 7.2.2.1)
-      actionmailer (= 7.2.2.1)
-      actionpack (= 7.2.2.1)
-      actiontext (= 7.2.2.1)
-      actionview (= 7.2.2.1)
-      activejob (= 7.2.2.1)
-      activemodel (= 7.2.2.1)
-      activerecord (= 7.2.2.1)
-      activestorage (= 7.2.2.1)
-      activesupport (= 7.2.2.1)
+    rails (7.2.3)
+      actioncable (= 7.2.3)
+      actionmailbox (= 7.2.3)
+      actionmailer (= 7.2.3)
+      actionpack (= 7.2.3)
+      actiontext (= 7.2.3)
+      actionview (= 7.2.3)
+      activejob (= 7.2.3)
+      activemodel (= 7.2.3)
+      activerecord (= 7.2.3)
+      activestorage (= 7.2.3)
+      activesupport (= 7.2.3)
       bundler (>= 1.15.0)
-      railties (= 7.2.2.1)
-    rails-dom-testing (2.2.0)
+      railties (= 7.2.3)
+    rails-dom-testing (2.3.0)
       activesupport (>= 5.0.0)
       minitest
       nokogiri (>= 1.6)
-    rails-html-sanitizer (1.6.2)
-      loofah (~> 2.21)
+    rails-html-sanitizer (1.7.0)
+      loofah (~> 2.25)
       nokogiri (>= 1.15.7, != 1.16.7, != 1.16.6, != 1.16.5, != 1.16.4, != 1.16.3, != 1.16.2, != 1.16.1, != 1.16.0.rc1, != 1.16.0)
-    railties (7.2.2.1)
-      actionpack (= 7.2.2.1)
-      activesupport (= 7.2.2.1)
+    railties (7.2.3)
+      actionpack (= 7.2.3)
+      activesupport (= 7.2.3)
+      cgi
       irb (~> 1.13)
       rackup (>= 1.0.0)
       rake (>= 12.2)
       thor (~> 1.0, >= 1.2.2)
+      tsort (>= 0.2)
       zeitwerk (~> 2.6)
-    rake (13.2.1)
-    rdoc (6.13.1)
+    rake (13.3.1)
+    rdoc (7.2.0)
+      erb
       psych (>= 4.0.0)
-    regexp_parser (2.10.0)
-    reline (0.6.1)
+      tsort
+    regexp_parser (2.11.3)
+    reline (0.6.3)
       io-console (~> 0.5)
-    responders (3.1.1)
-      actionpack (>= 5.2)
-      railties (>= 5.2)
-    rexml (3.4.1)
-    rubyzip (2.4.1)
+    responders (3.2.0)
+      actionpack (>= 7.0)
+      railties (>= 7.0)
+    rexml (3.4.4)
+    rubyzip (3.2.2)
     sassc (2.4.0)
       ffi (~> 1.9)
     sassc-rails (2.1.2)
@@ -232,11 +251,11 @@ GEM
       sprockets-rails
       tilt
     securerandom (0.4.1)
-    selenium-webdriver (4.31.0)
+    selenium-webdriver (4.41.0)
       base64 (~> 0.2)
       logger (~> 1.4)
       rexml (~> 3.2, >= 3.2.5)
-      rubyzip (>= 1.2.2, < 3.0)
+      rubyzip (>= 1.2.2, < 4.0)
       websocket (~> 1.0)
     sprockets (4.2.2)
       concurrent-ruby (~> 1.0)
@@ -246,19 +265,22 @@ GEM
       actionpack (>= 6.1)
       activesupport (>= 6.1)
       sprockets (>= 3.0.0)
-    sqlite3 (2.7.3-aarch64-linux-gnu)
-    sqlite3 (2.7.3-aarch64-linux-musl)
-    sqlite3 (2.7.3-arm-linux-gnu)
-    sqlite3 (2.7.3-arm-linux-musl)
-    sqlite3 (2.7.3-arm64-darwin)
-    sqlite3 (2.7.3-x86_64-darwin)
-    sqlite3 (2.7.3-x86_64-linux-gnu)
-    sqlite3 (2.7.3-x86_64-linux-musl)
-    stringio (3.1.7)
-    thor (1.3.2)
-    tilt (2.6.0)
-    timeout (0.4.3)
-    turbo-rails (2.0.13)
+    sqlite3 (2.9.0-aarch64-linux-gnu)
+    sqlite3 (2.9.0-aarch64-linux-musl)
+    sqlite3 (2.9.0-arm-linux-gnu)
+    sqlite3 (2.9.0-arm-linux-musl)
+    sqlite3 (2.9.0-arm64-darwin)
+    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)
+    timeout (0.6.0)
+    tsort (0.2.0)
+    turbo-rails (2.0.23)
       actionpack (>= 7.1.0)
       railties (>= 7.1.0)
     tzinfo (2.0.6)
@@ -272,13 +294,13 @@ GEM
       bindex (>= 0.4.0)
       railties (>= 6.0.0)
     websocket (1.2.11)
-    websocket-driver (0.7.7)
+    websocket-driver (0.8.0)
       base64
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.5)
     xpath (3.2.0)
       nokogiri (~> 1.8)
-    zeitwerk (2.7.2)
+    zeitwerk (2.7.5)
 
 PLATFORMS
   aarch64-linux-gnu
@@ -295,14 +317,16 @@ DEPENDENCIES
   capybara
   devise
   importmap-rails
+  minitest (< 6)
   mysql2 (~> 0.5)
   pg (~> 1.5)
   puma (~> 6.0)
-  rails (~> 7.2.2)
+  rails (~> 7.2.3)
   sassc-rails
   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 fill="#ffffff" 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 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 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>
+<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>

app/assets/images/pictograms/chevron-down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="icon" viewBox="0 0 24 24"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg>

app/assets/images/pictograms/view-columns.svg

@@ -0,0 +1 @@
+<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

@@ -0,0 +1 @@
+<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

@@ -15,6 +15,15 @@
  *= require_self
  */
 
+/* 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.
+ *
+ * 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;
@@ -27,6 +36,7 @@
   --color-blue: #009ade;
   --color-dark-red: #b21237;
   --color-red: #ff1f5b;
+  --color-purple: #8b2be2;
 
   --depth: 0;
 
@@ -46,50 +56,168 @@
 :focus-visible {
   outline: none;
 }
-
-
-/* TODO: collapse gaps around empty rows (`topside`) once possible
- * https://github.com/w3c/csswg-drafts/issues/5813 */
-body {
-  display: grid;
-  gap: 0.8em;
-  grid-template-areas:
-    "header    header  header"
-    "nav       nav     nav"
-    "leftside  topside rightside"
-    "leftside  main    rightside";
-  grid-template-columns: 1fr auto 1fr;
-  grid-template-rows: repeat(4, auto);
-  font-family: system-ui;
-  margin: 0.4em;
+/* 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.
+ */
+/* TODO: merge selectors using :is() */
+a,
 button,
+details,
 input,
 select,
+summary,
 textarea {
   background-color: inherit;
   font: inherit;
 }
+details,
 input,
 select {
   text-align: inherit;
 }
+input,
+select,
+summary,
+textarea {
+  border: 1px solid 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;
+}
+textarea {
+  margin: 0;
+}
+input[type=checkbox] {
+  accent-color: var(--color-blue);
+  appearance: none;
+  -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. */
+input[type=number] {
+  appearance: textfield;
+  -moz-appearance: textfield;
+  text-align: end;
+}
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+}
+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);
+}
+table input,
+table select,
+table textarea {
+  padding-block: 0.375em;
+}
+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;
+}
+input:focus-visible,
+select:focus-visible,
+select:focus-within,
+/* 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);
+}
 
-
-/* blue - target for interaction with pointer */
-/* gray - target for interaction with keyboard */
-/* TODO: remove non-font-size rems from buttons/inputs below */
-a,
-button,
-input[type=submit] {
+/* `.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;
 }
-/* [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);
@@ -97,66 +225,34 @@ input[type=submit]:not([hidden]),
   fill: var(--color-gray);
   font-weight: bold;
 }
-.button,
-button,
-input[type=submit] {
+.button {
+  border: 1px solid var(--color-gray);
+  border-radius: 0.25em;
   font-size: 0.8rem;
-  padding: 0.4em;
+  padding: 0.6em 0.5em;
   width: fit-content;
 }
-input:not([type=submit]):not([type=checkbox]),
-select,
-textarea {
-  padding: 0.2em 0.4em;
+.link {
+  color: inherit;
+  text-decoration: underline 1px var(--color-border-gray);
+  text-underline-offset: 0.25em;
 }
-.button,
-button,
-input,
-select,
-textarea {
-  border: solid 1px var(--color-gray);
-  border-radius: 0.25em;
+button.link {
+  border: none;
+  padding: 0;
 }
-fieldset,
-textarea {
-  margin: 0
+[name=cancel],
+.auxiliary {
+  border-color: var(--color-border-gray);
+  color: var(--color-nav-gray);
+  fill: var(--color-nav-gray);
 }
-.button > svg,
-.tab > svg,
-button > svg {
-  height: 1.8em;
-  width: 1.8em;
-}
-.button > svg:not(:last-child),
-.tab > svg:not(:last-child),
-button > svg:not(:last-child) {
-  padding-right: 0.4em;
-}
-fieldset {
-  padding: 0.4em;
-}
-legend {
-  color: var(--color-gray);
-  display: flex;
-  gap: 0.4em;
-  width: 100%;
-}
-legend span {
-  align-content: center;
-  flex-grow: 1;
-}
-
-/* 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 {
+.tab:focus-visible,
+.tab:hover {
   background-color: var(--color-focus-gray);
 }
-.button:hover,
-button:hover,
-input[type=submit]:hover {
+.button:hover {
   background-color: var(--color-blue);
   border-color: var(--color-blue);
   color: white;
@@ -166,68 +262,55 @@ input[type=submit]:hover {
   background-color: var(--color-red);
   border-color: var(--color-red);
 }
-
-input[type=checkbox] {
-  accent-color: var(--color-blue);
-  appearance: none;
-  -webkit-appearance: none;
-  display: flex;
-  height: 1.1rem;
-  margin: 0;
-  width: 1.1rem;
+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[type=checkbox]:checked {
-  appearance: checkbox;
-  -webkit-appearance: checkbox;
+.link:focus-visible {
+  text-decoration-color: var(--color-gray);
 }
-/* Hide spin buttons in input number fields */
-input[type=number] {
-  appearance: textfield;
-  -moz-appearance: textfield;
+.link:hover {
+  color: var(--color-blue);
+  text-decoration-color: var(--color-blue);
 }
-input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-}
-input::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-input:hover,
-select:hover,
-textarea:hover {
-  border-color: var(--color-blue);
-  outline: solid 1px var(--color-blue);
-}
-input:invalid,
-select:invalid,
-textarea:invalid {
-  border-color: var(--color-red);
-  outline: solid 1px var(--color-red);
-}
-select:hover {
-  cursor: pointer;
-}
-input:focus-visible,
-select:focus-within,
-select:focus-visible,
-textarea:focus-visible {
-  accent-color: var(--color-dark-blue);
-  background-color: var(--color-focus-gray);
-}
-fieldset,
-input[type=text]:read-only,
-textarea:read-only {
-  border: none;
-  padding-left: 0;
-  padding-right: 0;
+table .button {
+  border-color: var(--color-border-gray);
+  color: var(--color-table-gray);
+  font-weight: normal;
+  height: 100%;
+  padding: 0.4em;
 }
 
 
+/* NOTE: collapse gaps around empty rows (`topside`) once possible with
+ * `grid-collapse` property and remove alternative `grid-template-areas`.
+ * https://github.com/w3c/csswg-drafts/issues/5813 */
+body {
+  display: grid;
+  gap: 0.8em;
+  grid-template-areas:
+    "header    header  header"
+    "nav       nav     nav"
+    "leftside  main    rightside";
+  grid-template-columns: 1fr minmax(max-content, 2fr) 1fr;
+  font-family: system-ui;
+  margin: 0.4em;
+}
+body:has(> .topside-area) {
+  grid-template-areas:
+    "header    header  header"
+    "nav       nav     nav"
+    "leftside  topside rightside"
+    "leftside  main    rightside";
+}
+
 header {
   grid-area: header;
 }
 
-
 .navigation {
   display: flex;
   grid-area: nav;
@@ -236,37 +319,31 @@ header {
   margin-inline-start: 4%;
 }
 .navigation > .tab {
-  border-bottom: solid 2px var(--color-nav-gray);
+  border-bottom: 2px solid var(--color-nav-gray);
   flex: 1;
   font-size: 1rem;
   justify-content: center;
-  padding-block: 0.3em;
-}
-.navigation > .tab:hover,
-.navigation > .tab:focus-visible {
-  background-color: var(--color-focus-gray);
+  padding-block: 0.4em;
 }
 .navigation > .tab.active {
-  border-bottom: solid 4px var(--color-blue);
+  border-bottom: 4px solid var(--color-blue);
   color: var(--color-blue);
   fill: var(--color-blue);
 }
 
-
-.topside {
+.topside-area {
   grid-area: topside;
 }
-.leftside {
+.leftside-area {
   grid-area: leftside;
 }
-.main {
+.main-area {
   grid-area: main;
 }
-.rightside {
+.rightside-area {
   grid-area: rightside;
 }
 
-
 .buttongrid {
   display: grid;
   gap: 0.4em;
@@ -274,14 +351,14 @@ header {
   grid-template-columns: auto 1fr auto;
   grid-template-rows: max-content;
 }
-.tools {
+.tools-area {
   grid-area: tools;
 }
 
 
 #flashes {
   display: grid;
-  gap: 0.2em;
+  row-gap: 0.4em;
   grid-template-columns: 1fr auto auto auto 1fr;
   left: 0;
   pointer-events: none;
@@ -297,287 +374,328 @@ header {
   display: grid;
   grid-column: 2/5;
   grid-template-columns: subgrid;
+  line-height: 2.2em;
   pointer-events: auto;
 }
-.flash.alert:before {
-  content: url('pictograms/alert-outline.svg');
+.flash:before {
+  filter: invert(100%);
   height: 1.4em;
   margin: 0 0.5em;
   width: 1.4em;
 }
+.flash.alert:before {
+  content: url('pictograms/alert-outline.svg');
+}
 .flash.alert {
   border-color: var(--color-red);
   background-color: var(--color-red);
 }
 .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 > div {
-  grid-column: 2;
-}
-/* NOTE: currently flash button inherits some unnecessary styles from generic
- * button. */
-.flash > button {
-  border: none;
-  color: inherit;
+.flash svg {
   cursor: pointer;
-  font-size: 1.4em;
-  font-weight: bold;
-  grid-column: 3;
+  fill: white;
+  height: 2.2em;
   opacity: 0.6;
-  padding: 0.2em 0.4em;
+  padding: 0.4em 0.5em;
+  width: 2.4em;
 }
-.flash > button:hover {
+.flash svg:hover {
   opacity: 1;
 }
 
 
-/* TODO: Update styling, including rem removal. */
-form table {
-  border-spacing: 0.8rem;
+.labeled-form {
+  align-items: center;
+  display: grid;
+  gap: 0.9em 1.1em;
+  grid-template-columns: 1fr minmax(max-content, 0.5fr) 1fr;
 }
-form tr td:first-child {
+.labeled-form label {
   color: var(--color-gray);
   font-size: 0.9rem;
-  padding-right: 0.25rem;
+  grid-column: 1;
   text-align: right;
+  white-space: nowrap;
 }
-form label.required {
+.labeled-form label.required {
   font-weight: bold;
 }
-form label.error,
-form td.error::after {
+/* Don't style `label.error + input` if case already covered by `input:invalid`. */
+.labeled-form label.error {
   color: var(--color-red);
 }
-form td.error {
-  display: -webkit-box;
-}
-form td.error::after {
-  content: attr(data-content);
-  font-size: 0.9rem;
-  margin-left: 1rem;
-  padding: 0.25rem 0;
-  position: absolute;
-}
-form em {
+.labeled-form em {
   color: var(--color-text-gray);
   font-size: 0.75rem;
   font-weight: normal;
 }
-form input[type=submit] {
-  float: none;
+.labeled-form input {
+  grid-column: 2;
+}
+.labeled-form input[type=submit] {
   font-size: 1rem;
-  margin: 1.5rem auto 0 auto;
-  padding: 0.75rem;
+  margin: 1em auto 0 auto;
+  padding: 0.75em;
+}
+.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. */
+  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;
 }
 
 
-table.items {
+.items-table {
   border-spacing: 0;
-  border: solid 1px var(--color-border-gray);
+  border: 1px solid var(--color-border-gray);
   border-radius: 0.25em;
   font-size: 0.85rem;
   text-align: left;
 }
-table.items thead {
+.items-table thead {
   font-size: 0.8rem;
 }
-table.items thead,
-table.items tbody tr:hover {
+.items-table thead,
+.items-table tbody tr:hover {
   background-color: var(--color-focus-gray);
 }
-table.items th {
-  padding-block: 0.75em;
+.items-table th {
+  padding: 0.75em 0 0.75em 1em;
   text-align: center;
 }
-table.items th,
-table.items td {
-  padding-inline: 1em 0;
-}
-/* For <a> to fill <td> completely, we use an ::after pseudoelement. */
-table.items td.link {
-  padding: 0;
-  position: relative;
-}
-table.items td.link a {
-  color: inherit;
-  font: inherit;
-}
-table.items td.link a::after {
-  content: '';
-  inset: 0;
-  position: absolute;
-}
-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 {
+.items-table th:last-child {
   padding-inline-end: 0.4em;
 }
-table.items td:last-child {
+.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;
 }
-table.items td {
-  border-top: solid 1px var(--color-border-gray);
-  height: 2.4em;
-  padding-block: 0.1em;
+.items-table :is(form, input, select, textarea):only-child {
+  margin-inline-start: calc(-0.4em - 0.9px);
 }
-table.items .actions {
-  display: flex;
+/* For <a> to fill table cell completely, we use an `::after` pseudoelement. */
+/* TODO: expand to whole row? will require adjusting z-index on inputs/buttons */
+.items-table td:has(> .link) {
+  position: relative;
+}
+.items-table .link::after {
+  content: '';
+  inset: -1px 0 0 0;
+  position: absolute;
+}
+.items-table .flex {
   gap: 0.4em;
   justify-content: end;
 }
-table.items .actions.centered {
-  justify-content: center;
-}
-table.items tr.dropzone {
+.items-table .dropzone {
   position: relative;
 }
-table.items tr.dropzone::after {
+.items-table .dropzone::after {
   content: '';
   inset: 1px 0 0 0;
   position: absolute;
-  outline: dashed 2px var(--color-blue);
+  outline: 2px dashed var(--color-blue);
   outline-offset: -1px;
   z-index: var(--z-index-table-row-outline);
 }
-table.items td.handle {
-  cursor: move;
+.items-table .handle {
+  cursor: grab;
 }
-table.items tr.form td {
-  vertical-align: top;
+.items-table .form td {
+  vertical-align: middle;
 }
-
-/* TODO: replace :hover:focus-visible combos with proper LOVE stye order */
-/* TODO: Update styling, including rem removal. */
-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),
+.items-table td:not(:first-child),
 .grayed {
   color: var(--color-table-gray);
-  fill: var(--color-table-gray);
+  fill: var(--color-gray);
 }
-table.items td.hint {
-  color: var(--color-table-gray);
-  font-style: italic;
-  font-size: 0.8rem;
-  padding: 1em;
-}
-table.items svg {
-  height: 1.2rem;
-  vertical-align: middle;
-  width: 1.2rem;
-}
-table.items td.svg {
+.items-table td:has(> svg:only-child) {
   text-align: center;
 }
-table.items td.number {
-  text-align: right;
-}
-table.items .button,
-table.items button,
-table.items input[type=submit] {
-  font-weight: normal;
-  padding: 0.3em;
-}
-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 a[name=cancel] {
-  border-color: var(--color-border-gray);
-  color: var(--color-nav-gray);
-  fill: var(--color-nav-gray);
-}
-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;
-}
 
-.centered {
+.center {
   margin: 0 auto;
 }
-.extendedright {
-  margin-right: auto;
-}
-.hflex {
-  display: flex;
-  gap: 0.8em;
-}
-.hflex.centered {
-  justify-content: center;
-}
-.vexpand {
+.hexpand {
   width: 100%;
 }
-.vflex {
+.flex {
   display: flex;
   gap: 0.8em;
+}
+.flex.reverse {
+  flex-direction: row-reverse;
+}
+.flex.vertical {
   flex-direction: column;
 }
-[disabled] {
-  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;
+.hint {
+  color: var(--color-table-gray);
+  font-style: italic;
+  font-size: 0.9rem;
+  text-align: center;
 }
-.unwrappable {
+.hmin50 {
+  min-width: 50%;
+}
+.italic {
+  color: var(--color-gray);
+  font-style: italic;
+}
+.ralign {
+  text-align: right;
+}
+.rextend {
+  margin-right: auto;
+}
+
+
+details {
+  align-content: center;
+  position: relative;
+}
+summary {
+  align-items: center;
+  color: var(--color-gray);
+  display: flex;
+  gap: 0.4em;
+  height: 100%;
   white-space: nowrap;
 }
+summary::before {
+  background-color: currentColor;
+  content: "";
+  height: 1em;
+  mask-image: url('pictograms/chevron-down.svg');
+  mask-size: cover;
+  width: 1em;
+}
+summary:has(.button) {
+  padding-block: 0;
+  padding-inline-end: 0;
+}
+summary .button {
+  border: 1px solid var(--color-border-gray);
+  border-radius: inherit;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-style: none none none solid;
+  height: 100%;
+}
+summary span {
+  width: 100%;
+}
+details[open] summary::before {
+  transform: scaleY(-1);
+}
+summary::marker {
+  padding-left: 0.25em;
+}
+/* NOTE: use `details[open]::details-content` once widely available. */
+details[open] ul {
+  background-color: white;
+  border: 1px solid var(--color-border-gray);
+  border-radius: 0.25em;
+  box-shadow: 1px 1px 3px var(--color-border-gray);
+  margin: -1px 0 0 0;
+  padding-left: 0;
+  position: absolute;
+  width: 100%;
+}
+li:hover {
+  background-color: var(--color-focus-gray);
+}
+li label {
+  align-items: center;
+  display: flex;
+  line-height: 1.4em;
+}
+li input[type=checkbox] {
+  margin: 0 0.25em;
+}
+li::marker {
+  content: '';
+}
+/*
+ * 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/application_controller.rb

@@ -25,6 +25,18 @@ class ApplicationController < ActionController::Base
   #   Turbo will reload 2nd time with HTML format and flashes will be lost.
   rescue_from *ActionDispatch::ExceptionWrapper.rescue_responses.keys, with: :rescue_turbo
 
+  # Required by #respond_with (gem `responders`) used by Devise controllers.
+  respond_to :html, :turbo_stream
+
+  def after_sign_in_path_for(resource)
+    # TODO: allow setting path per-user or save last path in session and restore
+    units_path
+  end
+
+  def after_sign_out_path_for(resource)
+    new_user_session_path
+  end
+
   protected
 
   def current_user_disguised?

app/controllers/charts_controller.rb

@@ -0,0 +1,12 @@
+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,7 +1,12 @@
 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
-    @measurements = []
-    #@measurements = current_user.units.ordered.includes(:base, :subunits)
+    load_measurements
   end
 
   def new
@@ -9,8 +14,49 @@ 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,6 +8,10 @@ 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/controllers/readouts_controller.rb

@@ -1,23 +1,16 @@
 class ReadoutsController < ApplicationController
-  before_action :find_quantity, only: [:new, :discard]
+  before_action :find_quantities, only: [:new]
+  before_action :find_quantity, only: [:discard]
   before_action :find_prev_quantities, only: [:new, :discard]
 
   def new
-    new_quantities =
-      case params[:button]
-      when 'children'
-        @quantity.subquantities
-      when 'subtree'
-        @quantity.progenies
-      else
-        [@quantity]
-      end
-    new_quantities -= @prev_quantities
-    @readouts = current_user.readouts.build(new_quantities.map { |q| {quantity: q} })
+    @quantities -= @prev_quantities
+    # TODO: raise ParameterInvalid if new_quantities.empty?
+    @readouts = current_user.readouts.build(@quantities.map { |q| {quantity: q} })
 
     @user_units = current_user.units.ordered
 
-    quantities = @prev_quantities + new_quantities
+    quantities = @prev_quantities + @quantities
     @superquantity = current_user.quantities
       .common_ancestors(quantities.map(&:parent_id)).first
   end
@@ -31,6 +24,10 @@ class ReadoutsController < ApplicationController
 
   private
 
+  def find_quantities
+    @quantities = current_user.quantities.find(params[:quantity])
+  end
+
   def find_quantity
     @quantity = current_user.quantities.find_by!(id: params[:id])
   end

app/controllers/user/profiles_controller.rb

@@ -1,5 +1,8 @@
-class RegistrationsController < Devise::RegistrationsController
-  before_action :authenticate_user!, only: [:edit, :update, :destroy]
+class User::ProfilesController < Devise::RegistrationsController
+  def destroy
+    # TODO: Disallow/disable deletion for last admin account; update :edit view
+    super
+  end
 
   protected
 

app/controllers/users_controller.rb

@@ -37,7 +37,7 @@ class UsersController < ApplicationController
   end
 
   # NOTE: limited actions availabe to :admin by design. Users are meant to
-  # manage their accounts by themselves through registrations. :admin
+  # manage their accounts by themselves through profiles. :admin
   # is allowed to sign-in (disguise) as user and make changes from there.
 
   protected

app/helpers/application_helper.rb

@@ -1,65 +1,92 @@
 module ApplicationHelper
-  # TODO: replace legacy content_tag with tag.tagname
-  class LabelledFormBuilder < ActionView::Helpers::FormBuilder
-    (field_helpers - [:label]).each do |selector|
+  class LabeledFormBuilder < ActionView::Helpers::FormBuilder
+    (field_helpers - [:label, :hidden_field]).each do |selector|
       class_eval <<-RUBY_EVAL, __FILE__, __LINE__ + 1
         def #{selector}(method, options = {})
-          labelled_row_for(method, options) { super }
+          labeled_field_for(method, options) { super }
         end
       RUBY_EVAL
     end
 
     def select(method, choices = nil, options = {}, html_options = {})
-      labelled_row_for(method, options) { super }
+      labeled_field_for(method, options) { super }
     end
 
-    def submit(value, options = {})
-      @template.content_tag :tr do
-        @template.content_tag :td, super, colspan: 2
-      end
-    end
-
-    def form_for(&block)
-      @template.content_tag(:table, class: "centered") { yield(self) } +
-      # Display leftover error messages (there shouldn't be any)
-      @template.content_tag(:div, @object&.errors.full_messages.join(@template.tag(:br)))
+    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 labelled_row_for(method, options)
-      @template.content_tag :tr do
-        @template.content_tag(:td, label_for(method, options), class: "unwrappable") +
-        @template.content_tag(:td, options.delete(:readonly) ? @object.public_send(method) : yield,
-          @object&.errors[method].present? ?
-            {class: "error", data: {content: @object&.errors.delete(method).join(" and ")}} :
-            {})
-      end
+    def labeled_field_for(method, options)
+      field = if options.delete(:readonly) then
+                value = object.public_send(method)
+                value = @template.l(value) if value.respond_to?(:strftime)
+                value ||= options[:placeholder]
+              else
+                yield
+              end
+      label_for(method, options) + field
     end
 
     def label_for(method, options = {})
-      return '' if options[:label] == false
-
-      text = options.delete(:label)
-      text ||= @object.class.human_attribute_name(method).capitalize
       classes = @template.class_names(required: options[:required],
-                                      error: @object&.errors[method].present?)
-      label = label(method, "#{text}:", class: classes)
-      hint = options.delete(:hint)
+                                      error: object.errors[method].present?)
 
-      label + (@template.tag(:br) + @template.content_tag(:em, hint) if hint)
+      handler = {missing_interpolation_argument_handler: method(:interpolation_missing)}
+      # Label translation search order:
+      #   controller.action.* => helpers.label.model.* => activerecord.attributes.model.*
+      # First 2 levels are translated recursively.
+      label(method, class: classes) do |builder|
+        translation = I18n.config.with(**handler) { deep_translate(method, **options) }
+        translation.presence || "#{builder.translation}:"
+      end
+    end
+
+    def interpolation_missing(key, values, string)
+      @template.instance_values[key.to_s] || deep_translate(key, **values)
+    end
+
+    # Extension to label text translation:
+    # * recursive translation,
+    # * interpolation of (_relative_) translation key names and instance variables,
+    # * pluralization based on any interpolable value
+    # TODO: add unit tests for the above
+    def deep_translate(key, **options)
+      options[:default] = [
+        :".#{key}",
+        :"helpers.label.#{@object_name}.#{key}_html",
+        :"helpers.label.#{@object_name}.#{key}",
+        ""
+      ]
+
+      # At least 1 interpolation key is required for #translate to act on
+      # missing interpolation arguments (i.e. call custom handler).
+      # Also setting `key` to nil avoids recurrent translation.
+      options[key] = nil
+
+      @template.t(".#{key}_html", **options) do |translation, resolved_key|
+        if translation.is_a?(Array) && (count = translation.to_h[:count])
+          @template.t(resolved_key, count: I18n.interpolate(count, **options), **options)
+        else
+          translation
+        end
+      end
     end
   end
 
-  def labelled_form_for(record, options = {}, &block)
-    options = options.deep_merge(builder: LabelledFormBuilder, data: {turbo: false})
-    form_for(record, **options) { |f| f.form_for(&block) }
+  def labeled_form_for(record, options = {}, &block)
+    extra_options = {builder: LabeledFormBuilder, html: {class: 'labeled-form'}}
+    form_for(record, **merge_attributes(options, extra_options), &block)
   end
 
   class TabularFormBuilder < ActionView::Helpers::FormBuilder
     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|
@@ -75,22 +102,29 @@ module ApplicationHelper
     end
 
     def number_field(method, options = {})
-      value = object.public_send(method)
-      if value.is_a?(BigDecimal)
-        options[:value] = value.to_scientific
-        type = object.class.type_for_attribute(method)
-        options[:step] ||= BigDecimal(10).power(-type.scale)
-        options[:max] ||= BigDecimal(10).power(type.precision - type.scale) -
+      attr_type = object.type_for_attribute(method)
+      case attr_type.type
+      when :decimal
+        options[:value] = object.public_send(method)&.to_scientific
+        options[:step] ||= BigDecimal(10).power(-attr_type.scale)
+        options[:max] ||= BigDecimal(10).power(attr_type.precision - attr_type.scale) -
           options[:step]
         options[:min] = options[:min] == :step ? options[:step] : options[:min]
         options[:min] ||= -options[:max]
+        options[:size] ||= attr_type.precision / 2
+      when :float
+        options[:size] ||= 6
       end
       super
     end
 
     def button(value = nil, options = {}, &block)
-      # button does not use #objectify_options
-      options.merge!(@options.slice(:form))
+      # #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])
+      )
       super
     end
 
@@ -111,19 +145,22 @@ module ApplicationHelper
     # [autofocus].  Otherwise IDs are not unique when multiple forms are open
     # and the first input gets focus.
     record_object, options = nil, record_object if record_object.is_a?(Hash)
-    options.merge!(builder: TabularFormBuilder, skip_default_ids: true)
+    extra_options = {builder: TabularFormBuilder, skip_default_ids: true}
+    options = merge_attributes(options, extra_options)
+    # TODO: set error message with setCustomValidity instead of rendering to flash?
     render_errors(record_object || record_name)
     fields_for(record_name, record_object, **options, &block)
   end
 
   def tabular_form_with(**options, &block)
-    options = options.deep_merge(builder: TabularFormBuilder,
-                                 html: {autocomplete: 'off'})
-    form_with(**options, &block)
+    extra_options = {builder: TabularFormBuilder, class: 'tabular-form',
+                     html: {autocomplete: 'off'}}
+    form_with(**merge_attributes(options, extra_options), &block)
   end
 
   def svg_tag(source, label = nil, options = {})
-    svg_tag = content_tag :svg, options do
+    label, options = nil, label if label.is_a? Hash
+    svg_tag = tag.svg(**options) do
       tag.use(href: "#{image_path(source + ".svg")}#icon")
     end
     label.blank? ? svg_tag : svg_tag + tag.span(label)
@@ -134,6 +171,8 @@ 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],
     ]
 
@@ -171,21 +210,28 @@ module ApplicationHelper
 
   def image_link_to_unless_current(name, image = nil, options = nil, html_options = {})
     name, html_options = link_or_button_options(:link, name, image, html_options)
-    html_options = html_options.deep_merge DISABLED_ATTRIBUTES if current_page?(options)
+    # NOTE: Starting from Rails 8.1.0, below condition can be replaced with:
+    #   current_page?(options, method: [:get, :post])
+    if request.path == url_for(options)
+      html_options = html_options.deep_merge DISABLED_ATTRIBUTES
+    end
     link_to name, options, html_options
   end
 
   def render_errors(records)
-    flash[:alert] ||= []
+    # Conversion of flash to Array only required because of Devise
+    # TODO: override Devise message setting to Array()?
+    flash[:alert] = Array(flash[:alert])
     Array(records).each { |record| flash[:alert] += record.errors.full_messages }
   end
 
   def render_flash_messages
     flash.map do |entry, messages|
+      # Conversion of flash to Array only required because of Devise
       Array(messages).map do |message|
         tag.div class: "flash #{entry}" do
-          tag.div(sanitize(message)) + tag.button(sanitize("&times;"), tabindex: -1,
-                                                  onclick: "this.parentElement.remove();")
+          tag.span(sanitize(message)) +
+            svg_tag('pictograms/close-outline', {onclick: "this.parentElement.remove()"})
         end
       end
     end.join.html_safe
@@ -204,8 +250,6 @@ module ApplicationHelper
   private
 
   def link_or_button_options(type, name, image = nil, html_options)
-    name = svg_tag("pictograms/#{image}", name) if image
-
     html_options[:class] = class_names(
       html_options[:class],
       'button',
@@ -216,10 +260,18 @@ module ApplicationHelper
       html_options[:onclick] = "return confirm('\#{html_options[:onclick][:confirm]}');"
     end
 
-    if type == :link && !(html_options[:onclick] || html_options.dig(:data, :turbo_stream))
-      name += '...'
-    end
+    link_is_local = html_options[:onclick] || html_options.dig(:data, :turbo_stream)
+    name = name.to_s
+    name += '...' if type == :link && !link_is_local
+    name = svg_tag("pictograms/#{image}", name) if image
 
     [name, html_options]
   end
+
+  # Like Hash#deep_merge, but aware of HTML attributes.
+  def merge_attributes(left, right)
+    left.deep_merge(right) do |key, lvalue, rvalue|
+      key == :class ? class_names(lvalue, rvalue) : rvalue
+    end
+  end
 end

app/helpers/quantities_helper.rb

@@ -1,2 +1,11 @@
 module QuantitiesHelper
+  def quantities_check_boxes(quantities)
+    # Closing <details> on focusout event depends on relatedTarget for internal
+    # actions being non-null. To ensure this, all top-layer elements of
+    # ::details-content must accept focus, e.g. <label> needs tabindex="-1" */
+    collection_check_boxes(nil, :quantity, quantities, :id, :to_s_with_depth,
+                           include_hidden: false) do |b|
+      content_tag :li, b.label(tabindex: -1) { b.check_box + b.text }
+    end
+  end
 end

app/javascript/application.js

@@ -1,39 +1,42 @@
 // Configure your import map in config/importmap.rb. Read more:
 // https://github.com/rails/importmap-rails
 import "@hotwired/turbo-rails"
+import "controllers"
+import { disableElement, enableElement } from "element_helpers"
 
 
 /* Hide page before loaded for testing purposes */
-function showPage(event) {
-  document.documentElement.style.visibility="visible"
+function showPage() {
+  document.documentElement.style.visibility = "visible"
 }
 document.addEventListener('turbo:load', showPage)
 
 
 /* Turbo stream actions */
-Turbo.StreamElement.prototype.enableElement = function(element) {
-    element.removeAttribute("disabled")
-    element.removeAttribute("aria-disabled")
-    // 'tabindex' is not used explicitly, so removing it is safe
-    element.removeAttribute("tabindex")
-}
-
+Turbo.StreamElement.prototype.disableElement = disableElement
+Turbo.StreamElement.prototype.enableElement = enableElement
 Turbo.StreamActions.disable = function() {
-  this.targetElements.forEach((e) => {
-    e.setAttribute("disabled", "disabled")
-    e.setAttribute("aria-disabled", "true")
-    e.setAttribute("tabindex", "-1")
-  })
+  this.targetElements.forEach(disableElement)
 }
-
 Turbo.StreamActions.enable = function() {
-  this.targetElements.forEach((e) => { this.enableElement(e) })
+  this.targetElements.forEach(enableElement)
 }
 
+/* TODO: change to visibility = collapse to avoid width change? */
 Turbo.StreamActions.hide = function() {
   this.targetElements.forEach((e) => { e.style.display = "none" })
 }
 
+Turbo.StreamActions.show = function() {
+  this.targetElements.forEach((e) => { e.style.removeProperty("display") })
+}
+
+/*
+Turbo.StreamActions.collapse = function() {
+  this.targetElements.forEach((e) => { e.style.visibility = "collapse" })
+}
+*/
+
 Turbo.StreamActions.close_form = function() {
   this.targetElements.forEach((e) => {
     /* Move focus if there's no focus or focus inside form being closed */
@@ -54,88 +57,9 @@ Turbo.StreamActions.close_form = function() {
   })
 }
 
-
-/* Items table drag and drop support */
-function processKey(event) {
-  if (event.key == "Escape") {
-    event.currentTarget.querySelector("a[name=cancel]").click();
-  }
-}
-window.processKey = processKey;
-
-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"
+Turbo.StreamActions.unselect = function() {
+  this.targetElements.forEach((e) => {
+    e.checked = false
+    this.enableElement(e)
   })
-  .then(response => response.text())
-  .then(html => Turbo.renderStreamMessage(html))
 }
-window.drop = drop;

app/javascript/controllers/application.js

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

app/javascript/controllers/charts_controller.js

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

app/javascript/controllers/details_controller.js

@@ -0,0 +1,56 @@
+import { Controller } from "@hotwired/stimulus"
+import { disableElement, enableElement } from "element_helpers"
+
+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'
+      enableElement(this.submitButtonTarget)
+    } else {
+      this.countLabelTarget.textContent = this.countLabelTarget.dataset.prompt
+      disableElement(this.submitButtonTarget)
+    }
+  }
+
+  close(event) {
+    if (!event.relatedTarget ||
+        event.relatedTarget.closest("details") != this.element) {
+      this.element.removeAttribute("open")
+    }
+  }
+
+  processKey(event) {
+    switch (event.key) {
+      case "Escape":
+        if (this.element.hasAttribute("open")) {
+          this.element.removeAttribute("open")
+          event.stopPropagation()
+        }
+        break
+      case "Enter": {
+        const button = this.element.querySelector("button:not([disabled])")
+        if (button) {
+          button.click()
+          event.target.blur()
+          event.preventDefault()
+          event.stopPropagation()
+        }
+        break
+      }
+    }
+  }
+}

app/javascript/controllers/drag_controller.js

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

app/javascript/controllers/form_controller.js

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

app/javascript/controllers/index.js

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

app/javascript/controllers/measurements_controller.js

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

app/javascript/controllers/measurements_view_controller.js

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

app/javascript/controllers/readout_unit_controller.js

@@ -0,0 +1,37 @@
+import { Controller } from "@hotwired/stimulus"
+import { disableElement, enableElement } from "element_helpers"
+
+export default class extends Controller {
+  static targets = ["select", "button"]
+
+  unitChanged() {
+    if (this.selectTarget.value && this.selectTarget.value !== this.selectTarget.dataset.defaultUnitId) {
+      enableElement(this.buttonTarget)
+    } else {
+      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/javascript/element_helpers.js

@@ -0,0 +1,11 @@
+export function disableElement(element) {
+  element.setAttribute("disabled", "disabled")
+  element.setAttribute("aria-disabled", "true")
+  element.setAttribute("tabindex", "-1")
+}
+
+export function enableElement(element) {
+  element.removeAttribute("disabled")
+  element.removeAttribute("aria-disabled")
+  element.removeAttribute("tabindex")
+}

app/models/quantity.rb

@@ -1,9 +1,10 @@
 class Quantity < ApplicationRecord
-  ATTRIBUTES = [:name, :description, :parent_id]
+  ATTRIBUTES = [:name, :description, :parent_id, :default_unit_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
 

app/models/readout.rb

@@ -1,5 +1,5 @@
 class Readout < ApplicationRecord
-  ATTRIBUTES = [:quantity_id, :value, :unit_id]
+  ATTRIBUTES = [:quantity_id, :value, :unit_id, :taken_at]
 
   belongs_to :user
   belongs_to :quantity

app/models/unit.rb

@@ -3,7 +3,8 @@ class Unit < ApplicationRecord
 
   belongs_to :user, optional: true
   belongs_to :base, optional: true, class_name: "Unit"
-  has_many :subunits, class_name: "Unit", inverse_of: :base, dependent: :restrict_with_error
+  has_many :subunits, class_name: "Unit", inverse_of: :base,
+    dependent: :restrict_with_error
 
   validate if: ->{ base.present? } do
     errors.add(:base, :user_mismatch) unless user_id == base.user_id

app/models/user.rb

@@ -12,10 +12,10 @@ class User < ApplicationRecord
     disabled: 0,    # administratively disallowed to sign in
   }, default: :active, validate: true
 
-  has_many :readouts, dependent: :destroy
+  has_many :readouts, dependent: :delete_all
   accepts_nested_attributes_for :readouts
-  has_many :quantities, dependent: :destroy
-  has_many :units, dependent: :destroy
+  has_many :quantities, dependent: :delete_all
+  has_many :units, dependent: :delete_all
 
   validates :email, presence: true, uniqueness: true,
     length: {maximum: type_for_attribute(:email).limit}

app/views/charts/index.html.erb

@@ -0,0 +1,4 @@
+<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="actions">
+    <td class="flex">
       <% unless unit.portable.nil? %>
         <% if unit.default? %>
           <%= image_button_to_if unit.portable?, t('.import'), 'download-outline',

app/views/default/units/index.html.erb

@@ -1,16 +1,17 @@
-<div class="rightside buttongrid">
+<div class="rightside-area buttongrid">
   <% if current_user.at_least(:active) %>
     <%# TODO: implement Import all %>
     <%#= image_button_to t('.import_all'), 'download-multiple-outline',
       import_all_default_units_path, data: {turbo_stream: true} %>
   <% end %>
-  <%= image_link_to t('.back'), 'arrow-left-bold-outline', units_path, class: 'tools' %>
+  <%= image_link_to t('.back'), 'arrow-left-bold-outline', units_path,
+    class: 'tools-area' %>
 </div>
 
-<table class="main items">
+<table class="main-area items-table">
   <thead>
     <tr>
-      <th><%= User.human_attribute_name(:symbol).capitalize %></th>
+      <th><%= Unit.human_attribute_name(:symbol) %></th>
       <% if current_user.at_least(:active) %>
         <th><%= t '.actions' %></th>
       <% end %>

app/views/layouts/application.html.erb

@@ -14,6 +14,7 @@
     <%= 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 %>
@@ -23,10 +24,10 @@
   </head>
 
   <body>
-    <header class="hflex">
+    <header class="flex">
       <%= image_link_to t(".source_code"), "code-braces", source_code_url %>
       <%= image_link_to t(".issue_tracker"), "bug-outline", issue_tracker_url,
-            class: "extendedright" %>
+        class: "rextend" %>
       <% if user_signed_in? %>
         <%= image_link_to_unless_current(current_user, "account-wrench-outline",
           edit_user_registration_path) %>
@@ -47,7 +48,7 @@
       <%= render_flash_messages %>
     </div>
 
-    <%# Allow overwriting/clearing navigation menu for some views %>
+    <%# Allows overwriting/clearing navigation menu for some views %>
     <nav class="navigation">
       <%= content_for(:navigation) || (navigation_menu if user_signed_in?) %>
     </nav>

app/views/measurements/_edit_form.html.erb

@@ -0,0 +1,25 @@
+<%= tabular_fields_for @readout, form: form_tag do |form| %>
+  <%- tag.tr id: row, class: "form",
+    data: {controller: 'form', action: 'keydown->form#processKey',
+           form: form_tag, hidden_row: hidden_row, link: link} do %>
+    <td><%= @readout.quantity %></td>
+    <td class="ralign">
+      <%= form.number_field :value, required: true, autofocus: true %>
+    </td>
+    <td>
+      <%= form.collection_select :unit_id, @user_units, :id,
+        ->(u){ sanitize('&emsp;' * (u.base_id? ? 1 : 0) + u.symbol) },
+        {}, required: true %>
+    </td>
+    <td>
+      <%= form.datetime_field :taken_at %>
+    </td>
+    <td></td>
+    <td class="flex">
+      <%= form.button %>
+      <%= image_link_to t(:cancel), "close-outline", measurements_path,
+        class: 'dangerous', name: :cancel,
+        onclick: render_turbo_stream('edit_form_close', {row: row}) %>
+    </td>
+  <% end %>
+<% end %>

app/views/measurements/_edit_form_close.html.erb

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

app/views/measurements/_edit_panel.html.erb

@@ -0,0 +1,34 @@
+<% form_tag = dom_id(@readout, :edit, :form) %>
+<% row = dom_id(@readout, :edit) %>
+<% hidden_row = dom_id(@readout) %>
+
+<%= tabular_form_with model: @readout, url: measurement_path(@readout),
+  id: form_tag do |form| %>
+  <table class="items-table">
+    <tbody>
+      <%= tag.tr id: row, class: "form",
+        data: {controller: 'form', action: 'keydown->form#processKey',
+               form: form_tag, hidden_row: hidden_row} do %>
+        <td><%= @readout.quantity %></td>
+        <td class="ralign">
+          <%= form.number_field :value, required: true, autofocus: true %>
+        </td>
+        <td>
+          <%= form.collection_select :unit_id, @user_units, :id,
+            ->(u){ sanitize('&emsp;' * (u.base_id? ? 1 : 0) + u.symbol) },
+            {}, required: true %>
+        </td>
+        <td>
+          <%= form.datetime_field :taken_at %>
+        </td>
+        <td></td>
+        <td class="flex">
+          <%= form.button %>
+          <%= image_link_to t(:cancel), "close-outline", measurements_path,
+            class: 'dangerous', name: :cancel,
+            onclick: render_turbo_stream('edit_form_close', {row: row}) %>
+        </td>
+      <% end %>
+    </tbody>
+  </table>
+<% end %>

app/views/measurements/_form.html.erb

@@ -1,23 +1,38 @@
-<%= tabular_form_with model: Measurement.new do |form| %>
-  <fieldset>
-    <table class="items centered">
-      <tbody id="readouts">
-        <tr id="readouts_form">
-          <td colspan="4">
-            <%= collection_select :quantity, :id, @quantities, :id, :to_s_with_depth,
-              {prompt: t('.select_quantity'), disabled: '', selected: ''},
-              {name: :id, class: 'quantity vexpand',
-               onchange: "this.form.requestSubmit(new_readout_submit);"} %>
-            <%= form.submit id: :new_readout_submit, name: nil, value: nil,
-              formaction: new_readout_path, formmethod: :get, formnovalidate: true,
-              hidden: true, data: {turbo_stream: true} %>
+<%= tabular_form_with model: Measurement.new, id: :measurement_form,
+  class: 'topside-area flex vertical center',
+  html: {data: {controller: 'form', action: 'keydown->form#processKey'}} 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>
-      </tbody>
-    </table>
-  </fieldset>
-  <div class="hflex centered">
-    <%= form.button -%>
+      <% end %>
+    </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">
+    <summary autofocus>
+      <!-- TODO: Set content with CSS when span empty to avoid duplication -->
+      <span data-prompt="<%= t('.select_quantity') %>" data-details-target="countLabel">
+        <%= t('.select_quantity') %>
+      </span>
+      <%= image_button_tag t(:apply), "update", name: nil, disabled: true,
+        formaction: new_readout_path, formmethod: :get, formnovalidate: true,
+        data: {turbo_stream: true, details_target: 'submitButton'} %>
+    </summary>
+    <ul data-details-target="list"><%= quantities_check_boxes(@quantities) %></ul>
+  </details>
+
+  <div class="flex reverse">
+    <%= form.button id: :create_measurement_button, disabled: true -%>
     <%= image_link_to t(:cancel), "close-outline", measurements_path, name: :cancel,
       class: 'dangerous', onclick: render_turbo_stream('form_close') %>
   </div>

app/views/measurements/_form_close.html.erb

@@ -1,2 +1,4 @@
-<%= turbo_stream.update :measurement_form %>
 <%= 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

@@ -0,0 +1,22 @@
+<%= 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

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

app/views/measurements/create.turbo_stream.erb

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

app/views/measurements/destroy.turbo_stream.erb

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

app/views/measurements/edit.turbo_stream.erb

@@ -0,0 +1,18 @@
+<% 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,16 +1,41 @@
 <%# TODO: show hint when no quantities/units defined %>
-<div class="rightside buttongrid">
+<div class="rightside-area buttongrid" data-controller="measurements-view">
   <% if current_user.at_least(:active) %>
     <%= image_link_to t('.new_measurement'), 'plus-outline', new_measurement_path,
       id: :new_measurement_link, onclick: 'this.blur();',
       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>
 
-<%= tag.div class: 'topside', id: :measurement_form %>
+<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 %>
+    </tbody>
+  </table>
 
-<table class="main">
-  <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/new.turbo_stream.erb

@@ -1,4 +1,5 @@
 <%= turbo_stream.disable :new_measurement_link -%>
-<%= turbo_stream.update :measurement_form do %>
+<%= turbo_stream.hide :no_items -%>
+<%= turbo_stream.append_all 'body' do %>
   <%= render partial: 'form' %>
 <% end %>

app/views/measurements/update.turbo_stream.erb

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

app/views/quantities/_form.html.erb

@@ -1,6 +1,7 @@
 <%= tabular_fields_for @quantity, form: form_tag do |form| %>
-  <%- tag.tr id: row, class: "form", onkeydown: "processKey(event)",
-    data: {link: link, form: form_tag, hidden_row: hidden_row} do %>
+  <%- tag.tr id: row, class: "form",
+    data: {controller: 'form', action: 'keydown->form#processKey',
+           link: link, form: form_tag, hidden_row: hidden_row} do %>
 
     <td style="--depth:<%= @quantity.depth %>">
       <%= form.text_field :name, required: true, autofocus: true, size: 20 %>
@@ -8,8 +9,13 @@
     <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="actions">
+    <td class="flex">
       <%= form.button %>
       <%= image_link_to t(:cancel), "close-outline", quantities_path, class: 'dangerous',
         name: :cancel, onclick: render_turbo_stream('form_close', {row: row}) %>

app/views/quantities/_quantity.html.erb

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

@@ -1,30 +1,33 @@
-<div class="rightside buttongrid">
+<div class="rightside-area buttongrid">
   <% if current_user.at_least(:active) %>
     <%= image_link_to t('.new_quantity'), 'plus-outline', new_quantity_path,
       id: dom_id(Quantity, :new, :link), onclick: 'this.blur();',
       data: {turbo_stream: true} %>
   <% end %>
   <%#= image_link_to t('.import_quantities'), 'download-outline', default_quantities_path,
-    class: 'tools' %>
+    class: 'tools-area' %>
 </div>
 
-<%= tag.div class: 'main', id: :quantity_form %>
+<%# 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 items">
+<table class="main-area items-table">
   <thead>
     <tr>
-      <th><%= Quantity.human_attribute_name(:name).capitalize %></th>
-      <th><%= Quantity.human_attribute_name(:description).capitalize %></th>
+      <th><%= Quantity.human_attribute_name(:name) %></th>
+      <th class="hexpand"><%= Quantity.human_attribute_name(:description) %></th>
+      <th><%= Quantity.human_attribute_name(:default_unit) %></th>
       <% if current_user.at_least(:active) %>
         <th><%= t :actions %></th>
         <th></th>
       <% end %>
     </tr>
     <%= tag.tr id: "quantity_", hidden: true,
-               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>
+               data: {controller: 'drag',
+                      action: 'dragover->drag#over drop->drag#drop dragenter->drag#enter dragleave->drag#leave',
+                      drag_drop_id_value: 'quantity_',
+                      drag_drop_id_param_value: 'quantity[parent_id]'} do %>
+      <th colspan="5"><%= t '.top_level_drop' %></th>
     <% end %>
   </thead>
   <tbody id="quantities">

app/views/readouts/_form.html.erb

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

app/views/readouts/discard.turbo_stream.erb

@@ -1,4 +1,4 @@
+<%= turbo_stream.disable :create_measurement_button if @prev_quantities.one? %>
 <%= turbo_stream.remove dom_id(@quantity, :new, :readout) %>
-<%= turbo_stream.disable_all 'button[name="discard"]' if @prev_quantities.one? %>
-<%= turbo_stream.enable_all "select.quantity option[value='#{@quantity.id}']" %>
 <%= render partial: 'form_repath' %>
+<%= turbo_stream.unselect dom_id(@quantity) %>

app/views/readouts/new.turbo_stream.erb

@@ -1,9 +1,8 @@
-<%= render partial: 'form_repath' %>
-<%# is .one? proper condition? can @readouts be empty? %>
-<%= turbo_stream.enable_all 'button[name="discard"]' if @prev_quantities.one? %>
 <% @readouts.each do |r| %>
-  <%= turbo_stream.disable_all "select.quantity option[value='#{r.quantity_id}']" %>
+  <%= turbo_stream.disable dom_id(r.quantity) %>
 <% end %>
-<%= turbo_stream.before :readouts_form do %>
+<%= render partial: 'form_repath' %>
+<%= turbo_stream.append :readouts do %>
   <%= render partial: 'form', collection: @readouts, as: :readout %>
 <% end %>
+<%= turbo_stream.enable :create_measurement_button if @prev_quantities.empty? %>

app/views/units/_form.html.erb

@@ -1,6 +1,7 @@
 <%= tabular_fields_for @unit, form: form_tag do |form| %>
-  <%- tag.tr id: row, class: "form", onkeydown: "processKey(event)",
-    data: {link: link, form: form_tag, hidden_row: hidden_row} do %>
+  <%- tag.tr id: row, class: "form",
+    data: {controller: 'form', action: 'keydown->form#processKey',
+           link: link, form: form_tag, hidden_row: hidden_row} do %>
 
     <td style="--depth:<%= @unit.base_id? ? 1 : 0 %>">
       <%= form.text_field :symbol, required: true, autofocus: true, size: 12 %>
@@ -8,11 +9,11 @@
     <td>
       <%= form.text_area :description, cols: 30, rows: 1, escape: false %>
     </td>
-    <td class="number">
+    <td>
       <%= form.number_field :multiplier, required: true, size: 10, min: :step if @unit.base_id? %>
     </td>
 
-    <td class="actions">
+    <td class="flex">
       <%= form.button %>
       <%= image_link_to t(:cancel), "close-outline", units_path, class: 'dangerous',
         name: :cancel, onclick: render_turbo_stream('form_close', {row: row}) %>

app/views/units/_unit.html.erb

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

@@ -1,28 +1,31 @@
-<div class="rightside buttongrid">
+<div class="rightside-area buttongrid">
   <% if current_user.at_least(:active) %>
     <%= image_link_to t('.new_unit'), 'plus-outline', new_unit_path,
       id: dom_id(Unit, :new, :link), onclick: 'this.blur();', data: {turbo_stream: true} %>
   <% end %>
-  <%= image_link_to t('.import_units'), 'download-outline', default_units_path, class: 'tools' %>
+  <%= image_link_to t('.import_units'), 'download-outline', default_units_path,
+    class: 'tools-area' %>
 </div>
 
+<%# TODO: remove? form can be inserted directly, e.g. at the end of index %>
 <%= tag.div id: :unit_form %>
 
-<table class="main items">
+<table class="main-area items-table">
   <thead>
     <tr>
-      <th><%= User.human_attribute_name(:symbol).capitalize %></th>
-      <th><%= User.human_attribute_name(:description).capitalize %></th>
-      <th><%= User.human_attribute_name(:multiplier).capitalize %></th>
+      <th><%= Unit.human_attribute_name(:symbol) %></th>
+      <th class="hexpand"><%= Unit.human_attribute_name(:description) %></th>
+      <th><%= Unit.human_attribute_name(:multiplier) %></th>
       <% if current_user.at_least(:active) %>
         <th><%= t :actions %></th>
         <th></th>
       <% end %>
     </tr>
     <%= tag.tr id: "unit_", hidden: true,
-               ondragover: "dragOver(event)", ondrop: "drop(event)",
-               ondragenter: "dragEnter(event)", ondragleave: "dragLeave(event)",
-               data: {drop_id: "unit_", drop_id_param: "unit[base_id]"} do %>
+               data: {controller: 'drag',
+                      action: 'dragover->drag#over drop->drag#drop dragenter->drag#enter dragleave->drag#leave',
+                      drag_drop_id_value: 'unit_',
+                      drag_drop_id_param_value: 'unit[base_id]'} do %>
       <th colspan="5"><%= t '.top_level_drop' %></th>
     <% end %>
   </thead>

app/views/users/confirmations/create.turbo_stream.erb

@@ -0,0 +1 @@
+<% flash.discard %>

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

@@ -1,8 +0,0 @@
-<div class="main">
-  <%= labelled_form_for resource, url: user_confirmation_path do |f| %>
-    <%= f.email_field :email, required: true, size: 30, autofocus: true, autocomplete: "email",
-      value: (resource.pending_reconfirmation? ? resource.unconfirmed_email : resource.email) %>
-
-    <%= f.submit t(:resend_confirmation) %>
-  <% end %>
-</div>

app/views/users/index.html.erb

@@ -1,36 +1,34 @@
-<table class="main items" id="users">
+<table class="main-area items-table" id="users">
   <thead>
     <tr>
-      <th><%= User.human_attribute_name(:email).capitalize %></th>
-      <th><%= User.human_attribute_name(:status).capitalize %></th>
-      <th><%= User.human_attribute_name(:confirmed_at).capitalize %></th>
-      <th>
-        <%= User.human_attribute_name(:created_at).capitalize %>&nbsp;<sup>UTC</sup>
-      </th>
+      <th><%= User.human_attribute_name(:email) %></th>
+      <th><%= User.human_attribute_name(:status) %></th>
+      <th><%= User.human_attribute_name(:confirmed_at) %></th>
+      <th><%= User.human_attribute_name(:created_at) %>&nbsp;<sup>(UTC)</sup></th>
       <th><%= t :actions %></th>
     </tr>
   </thead>
   <tbody>
     <% @users.each do |user| %>
       <tr>
-        <td class="link"><%= link_to user, user_path(user) %></td>
+        <td><%= link_to user, user_path(user), class: 'link' %></td>
         <td>
           <% if user == current_user %>
             <%= user.status %>
           <% else %>
             <%= form_for user do |u| %>
-              <%= u.select :status, User.statuses.keys, {}, autocomplete: "off",
-                onchange: "this.form.requestSubmit();" %>
+              <%= u.select :status, User.statuses.keys, {}, autocomplete: 'off',
+                onchange: 'this.form.requestSubmit();' %>
             <% end %>
           <% end %>
         </td>
-        <td class="svg">
-          <%= svg_tag "pictograms/checkbox-marked-outline" if user.confirmed_at.present? %>
+        <td>
+          <%= svg_tag 'pictograms/checkbox-marked-outline' if user.confirmed_at.present? %>
         </td>
-        <td><%= user.created_at.to_fs(:db_without_sec) %></td>
-        <td class="actions">
+        <td><%= l user.created_at, format: :without_tz %></td>
+        <td class="flex">
           <% if allow_disguise?(user) %>
-            <%= image_link_to t(".disguise"), "incognito", disguise_user_path(user) %>
+            <%= image_link_to t('.disguise'), 'incognito', disguise_user_path(user) %>
           <% end %>
         </td>
       </tr>

app/views/users/mailer/confirmation_instructions.html.erb

@@ -1,5 +1,5 @@
 <p>Welcome <%= @email %>!</p>
 
 <p>You can confirm your account email through the link below:</p>
-
+<!-- FIXME: is confirmation_url valid route prefix? -->
 <p><%= link_to 'Confirm my account', confirmation_url(@resource, confirmation_token: @token) %></p>

app/views/users/passwords/create.turbo_stream.erb

@@ -0,0 +1,2 @@
+<%# For some reason flash messages are duplicated in bot flash and flash.now %>
+<% flash.discard %>

app/views/users/passwords/edit.html.erb

@@ -1,13 +1,12 @@
-<div class="main">
-  <%= labelled_form_for resource, url: user_password_path, html: {method: :put} do |f| %>
-    <%= f.hidden_field :reset_password_token, label: false %>
+<%= labeled_form_for resource, url: user_password_path,
+  html: {method: :put, class: 'main-area', data: {turbo: false}} do |f| %>
 
-    <%= f.password_field :password, label: t(".new_password"), required: true, size: 30,
-      minlength: @minimum_password_length, autofocus: true, autocomplete: "new-password",
-      hint: t("users.minimum_password_length", count: @minimum_password_length) %>
-    <%= f.password_field :password_confirmation, label: t(".password_confirmation"),
-      required: true, size: 30, minlength: @minimum_password_length, autocomplete: "off" %>
+  <%= f.hidden_field :reset_password_token %>
 
-    <%= f.submit t(".update_password") %>
-  <% end %>
-</div>
+  <%= f.password_field :password, required: true, size: 30, autofocus: true,
+    minlength: @minimum_password_length, autocomplete: 'new-password' %>
+  <%= f.password_field :password_confirmation, required: true, size: 30,
+    minlength: @minimum_password_length, autocomplete: 'off' %>
+
+  <%= f.submit t('.update_password') %>
+<% end %>

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

@@ -1,7 +0,0 @@
-<div class="main">
-  <%= labelled_form_for resource, url: user_password_path do |f| %>
-    <%= f.email_field :email, required: true, size: 30, autofocus: true, autocomplete: "email" %>
-
-    <%= f.submit t(:recover_password) %>
-  <% end %>
-</div>

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

@@ -0,0 +1,30 @@
+<% content_for :navigation, flush: true do %>
+  <%= link_to svg_tag('pictograms/arrow-left-bold-outline', t(:back)),
+    request.referer.present? ? :back : root_path, class: 'tab' %>
+<% end %>
+
+<div class="rightside-area buttongrid">
+  <%#= TODO: Disallow/disable deletion for last admin account, image_button_to_if %>
+  <%= image_button_to t('.delete'), 'account-remove-outline', user_registration_path,
+    form_class: 'tools-area', method: :delete, data: {turbo: false},
+    onclick: {confirm: t('.confirm_delete')} %>
+</div>
+
+<%= labeled_form_for resource, url: registration_path(resource),
+  html: {method: :patch, class: 'main-area'} do |f| %>
+
+  <%= f.email_field :email, size: 30, autofocus: true, autocomplete: 'off' %>
+  <% if resource.pending_reconfirmation? %>
+    <%= f.text_field :unconfirmed_email, readonly: true,
+      confirmation_sent_at: l(resource.confirmation_sent_at) %>
+  <% end %>
+
+  <%= f.select :status, User.statuses, readonly: true %>
+
+  <%= f.password_field :password, size: 30, autocomplete: 'new-password',
+    minlength: @minimum_password_length %>
+  <%= f.password_field :password_confirmation, size: 30, autocomplete: 'off',
+    minlength: @minimum_password_length %>
+
+  <%= f.submit %>
+<% end %>

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

@@ -0,0 +1,16 @@
+<%= labeled_form_for resource, url: user_registration_path,
+  html: {class: 'main-area', data: {controller: 'form', action: 'submit->form#validate'}} do |f| %>
+
+  <%= f.email_field :email, required: true, size: 30, autofocus: true,
+    autocomplete: 'email' %>
+  <%= f.password_field :password, required: true, size: 30,
+    minlength: @minimum_password_length, autocomplete: 'new-password' %>
+  <%= f.password_field :password_confirmation, required: true, size: 30,
+    minlength: @minimum_password_length, autocomplete: 'off' %>
+
+  <%= f.submit t(:register), data: {turbo: false} %>
+
+  <%= image_button_tag t(:resend_confirmation), 'email-sync-outline',
+    class: 'auxiliary', formaction: user_confirmation_path, formnovalidate: true,
+    data: {validate: f.field_id(:email)} %>
+<% end %>

app/views/users/registrations/edit.html.erb

@@ -1,31 +0,0 @@
-<% content_for :navigation, flush: true do %>
-  <%= link_to svg_tag("pictograms/arrow-left-bold-outline", t(:back)),
-    request.referer.present? ? :back : root_path, class: 'tab' %>
-<% end %>
-
-<div class="rightside buttongrid">
-  <%= image_button_to t(".delete"), "account-remove-outline", user_registration_path,
-    form_class: 'tools', method: :delete, data: {turbo: false},
-    onclick: {confirm: t(".confirm_delete")} %>
-</div>
-
-<%= labelled_form_for resource, url: registration_path(resource),
-                      html: {method: :patch, class: 'main'} do |f| %>
-  <%= f.email_field :email, size: 30, autofocus: true, autocomplete: "off" %>
-  <% if f.object.pending_reconfirmation? %>
-    <%= f.text_field :unconfirmed_email, readonly: true, tabindex: -1,
-      hint: t(".unconfirmed_email_hint",
-              timestamp: f.object.confirmation_sent_at.to_fs(:db_without_sec)) %>
-  <% end %>
-
-  <%= f.select :status, User.statuses, readonly: true %>
-
-  <%= f.password_field :password, label: t(".new_password"), size: 30,
-    minlength: @minimum_password_length, autocomplete: "new-password",
-    hint: t(".blank_password_hint_html",
-            subhint: t("users.minimum_password_length", count: @minimum_password_length)) %>
-  <%= f.password_field :password_confirmation, label: t(".password_confirmation"),
-    size: 30, minlength: @minimum_password_length, autocomplete: "off" %>
-
-  <%= f.submit t(".update") %>
-<% end %>

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

@@ -1,16 +0,0 @@
-<div class="main">
-  <%= labelled_form_for resource, url: user_registration_path do |f| %>
-    <%= f.email_field :email, required: true, size: 30, autofocus: true, autocomplete: "email" %>
-    <%= f.password_field :password, required: true, size: 30,
-      minlength: @minimum_password_length, autocomplete: "new-password",
-      hint: t("users.minimum_password_length", count: @minimum_password_length) %>
-    <%= f.password_field :password_confirmation, label: t(".password_confirmation"),
-      required: true, size: 30, minlength: @minimum_password_length, autocomplete: "off" %>
-
-    <%= f.submit t(:register) %>
-  <% end %>
-
-  <%= content_tag :p, t(:or), style: "text-align: center;" %>
-  <%= image_link_to t(:resend_confirmation), "email-sync-outline", new_user_confirmation_path,
-    class: "centered" %>
-</div>

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

@@ -1,17 +1,19 @@
-<div class="main">
-  <%= labelled_form_for resource, url: user_session_path do |f| %>
-    <%= f.email_field :email, required: true, size: 30, autofocus: true, autocomplete: "email" %>
-    <%= f.password_field :password, required: true, size: 30, minlength: @minimum_password_length,
-      autocomplete: "current-password" %>
+<%= labeled_form_for resource, url: user_session_path,
+  html: {class: 'main-area', data: {controller: 'form', action: 'submit->form#validate'}} do |f| %>
 
-    <% if devise_mapping.rememberable? %>
-      <%= f.check_box :remember_me, label: t(".remember_me") %>
-    <% end %>
+  <%= f.email_field :email, required: true, size: 30, autofocus: true,
+    autocomplete: 'email' %>
+  <%= f.password_field :password, required: true, size: 30,
+    autocomplete: 'current-password' %>
 
-    <%= f.submit t(:sign_in) %>
+  <% if devise_mapping.rememberable? %>
+    <%= f.check_box :remember_me %>
   <% end %>
 
-  <%= content_tag :p, t(:or), style: "text-align: center;" %>
-  <%= image_link_to t(:recover_password), 'lock-reset', new_user_password_path,
-    class: 'centered' %>
-</div>
+  <%# /sign_in as HTML; /password as TURBO_STREAM %>
+  <%= f.submit t(:sign_in), data: {turbo: false} %>
+
+  <%= image_button_tag t(:recover_password), 'lock-reset', class: 'auxiliary',
+    formaction: user_password_path, formnovalidate: true,
+    data: {validate: f.field_id(:email)} %>
+<% end %>

app/views/users/show.html.erb

@@ -1,19 +1,18 @@
 <% content_for :navigation, flush: true do %>
-  <div class="left">
-    <%= image_link_to t(:back), "arrow-left-bold-outline", users_path %>
-  </div>
+  <%= link_to svg_tag('pictograms/arrow-left-bold-outline', t(:back)), users_path,
+    class: 'tab' %>
 <% end %>
 
-<%= labelled_form_for @user do |f| %>
+<%= labeled_form_for @user, html: {class: 'main-area'} do |f| %>
   <%= f.email_field :email, readonly: true %>
-  <% if f.object.pending_reconfirmation? %>
+  <% if @user.pending_reconfirmation? %>
     <%= f.email_field :unconfirmed_email, readonly: true,
-      hint: t("users.registrations.edit.unconfirmed_email_hint",
-              timestamp: f.object.confirmation_sent_at.to_fs(:db_without_sec)) %>
+      confirmation_sent_at: l(@user.confirmation_sent_at) %>
   <% end %>
 
+  <%# TODO: allow status change here? %>
   <%= f.select :status, User.statuses, readonly: true %>
 
   <%= f.text_field :created_at, readonly: true %>
-  <%= f.text_field :confirmed_at, readonly: true %>
+  <%= f.text_field :confirmed_at, readonly: true, placeholder: t(:no) %>
 <% end %>

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

@@ -8,7 +8,7 @@
     <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
   </div>
 
-  <div class="actions">
+  <div class="flex">
     <%= f.submit "Resend unlock instructions" %>
   </div>
 <% end %>

config/credentials.yml.enc

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

config/environments/test.rb

@@ -58,4 +58,7 @@ 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

@@ -1,4 +1,8 @@
 # Pin npm packages by running ./bin/importmap
 
 pin "application", preload: true
+pin "element_helpers"
 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/initializers/devise.rb

@@ -91,7 +91,7 @@ Devise.setup do |config|
   # It will change confirmation, password recovery and other workflows
   # to behave the same regardless if the e-mail provided was right or wrong.
   # Does not affect registerable.
-  # config.paranoid = true
+  config.paranoid = true
 
   # By default Devise will store the user in session. You can skip storage for
   # particular strategies by setting this option.

config/initializers/time_formats.rb

@@ -1,3 +0,0 @@
-# Format contains non-breaking space:
-#   160.chr(Encoding::UTF_8)
-Time::DATE_FORMATS[:db_without_sec] = "%Y-%m-%d %H:%M"

config/initializers/turbo_streams_tag_builder.rb

@@ -19,7 +19,19 @@ ActiveSupport.on_load :turbo_streams_tag_builder do
     action :hide, target, allow_inferred_rendering: false
   end
 
+  def show(target)
+    action :show, target, allow_inferred_rendering: false
+  end
+
+  #def collapse(target)
+  #  action :collapse, target, allow_inferred_rendering: false
+  #end
+
   def close_form(target)
     action :close_form, target, allow_inferred_rendering: false
   end
+
+  def unselect(target)
+    action :unselect, target, allow_inferred_rendering: false
+  end
 end

config/locales/devise.en.yml

@@ -4,15 +4,15 @@ en:
   devise:
     confirmations:
       confirmed: "Your email address has been successfully confirmed."
-      send_instructions: "You will receive an email with instructions for how to confirm your email address in a few minutes."
-      send_paranoid_instructions: "If your email address exists in our database, you will receive an email with instructions for how to confirm your email address in a few minutes."
+      send_paranoid_instructions: >
+        If your email address is in our database, a message with instructions on how
+        to confirm your email address has been sent to you.
     failure:
       already_authenticated: "You are already signed in."
       inactive: "Your account is not activated yet."
-      invalid: "Invalid %{authentication_keys} or password."
+      invalid: "Invalid <b>%{authentication_keys}</b> or <b>password</b>."
       locked: "Your account is locked."
       last_attempt: "You have one more attempt before your account is locked."
-      not_found_in_database: "Invalid %{authentication_keys} or password."
       timeout: "Your session expired. Please sign in again to continue."
       unauthenticated: "You need to sign in or sign up before continuing."
       unconfirmed: "You have to confirm your email address before continuing."
@@ -32,8 +32,9 @@ en:
       success: "Successfully authenticated from %{kind} account."
     passwords:
       no_token: "You can't access this page without coming from a password reset email. If you do come from a password reset email, please make sure you used the full URL provided."
-      send_instructions: "You will receive an email with instructions on how to reset your password in a few minutes."
-      send_paranoid_instructions: "If your email address exists in our database, you will receive a password recovery link at your email address in a few minutes."
+      send_paranoid_instructions: >
+        If your email address is in our database, the password recovery link has been
+        sent to you.
       updated: "Your password has been changed successfully. You are now signed in."
       updated_not_active: "Your password has been changed successfully."
     registrations:
@@ -50,7 +51,6 @@ en:
       signed_out: "Signed out successfully."
       already_signed_out: "Signed out successfully."
     unlocks:
-      send_instructions: "You will receive an email with instructions for how to unlock your account in a few minutes."
       send_paranoid_instructions: "If your account exists, you will receive an email with instructions for how to unlock it in a few minutes."
       unlocked: "Your account has been unlocked successfully. Please sign in to continue."
   errors:

config/locales/en.yml

@@ -1,22 +1,33 @@
 en:
+  time:
+    formats:
+      # Format contains non-breaking space: 160.chr(Encoding::UTF_8)
+      default: "%Y-%m-%d %H:%M %Z"
+      without_tz: "%Y-%m-%d %H:%M"
   errors:
     messages:
       precision_exceeded: must not exceed %{value} significant digits
       scale_exceeded: must not exceed %{value} decimal digits
   activerecord:
     attributes:
-      unit:
-        symbol: Symbol
+      quantity:
+        default_unit: Default unit
+        description: Description
         name: Name
-        multiplier: Multiplier
+      readout:
+        created_at: Recorded at
+        taken_at: Taken at
+        value: Value
+      unit:
         base: Base unit
+        description: Description
+        multiplier: Multiplier
+        symbol: Symbol
       user:
-        email: e-mail
-        status: status
-        password: password
-        created_at: registered
-        confirmed_at: confirmed
-        unconfirmed_email: Awaiting confirmation for
+        confirmed_at: Confirmed
+        created_at: Registered
+        email: E-mail
+        status: Status
     errors:
       models:
         unit:
@@ -53,25 +64,56 @@ en:
           The request is semantically incorrect and was rejected (422 Unprocessable Entity).
           This should not happen, please notify site administrator.
   helpers:
+    label:
+      user:
+        password_confirmation: 'Retype new password:'
+        password_length_hint_html:
+          count: '%{minimum_password_length}'
+          zero:
+          one: <br><em>(%{count} character minimum)</em>
+          other: <br><em>(%{count} characters minimum)</em>
+        remember_me: 'Remember me:'
+        unconfirmed_email_html: >
+          Awaiting confirmation for:<br><em>(since %{confirmation_sent_at})</em>
     submit:
       create: Create
       update: Update
+      user:
+        update: Update profile
   layouts:
     application:
       issue_tracker: Report issue
       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 the measured quantity...
+      select_quantity: select quantities...
+      taken_at_html: Measurement taken at&emsp;
     index:
       new_measurement: Add measurement
-  readouts:
-    form:
-      new_children: Children
+      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.
   quantities:
     navigation: Quantities
     no_items: There are no configured quantities. You can Add some or Import from defaults.
@@ -129,34 +171,27 @@ en:
       disguise: View as
     passwords:
       edit:
-        new_password: New password
-        password_confirmation: Retype new password
+        password_html: 'New password:%{password_length_hint_html}'
         update_password: Update password
-    registrations:
+    profiles:
       new:
-        password_confirmation: Retype password
+        password_html: 'Password:%{password_length_hint_html}'
+        password_confirmation: 'Retype password:'
       edit:
         confirm_delete: Are you sure you want to delete profile?
           All data will be irretrievably lost.
         delete: Delete profile
-        unconfirmed_email_hint: (since %{timestamp})
-        new_password: New password
-        password_confirmation: Retype new password
-        blank_password_hint_html: leave blank to keep unchanged<br>%{subhint}
-        update: Update profile
-    sessions:
-      new:
-        remember_me: Remember me
-    minimum_password_length:
-      zero:
-      one: (%{count} character minimum)
-      other: (%{count} characters minimum)
+        password_html: >
+          New password:
+          <br><em>leave blank to keep unchanged</em>
+          %{password_length_hint_html}
   actions: Actions
   add: Add
+  apply: Apply
   back: Back
   cancel: Cancel
   delete: Delete
-  or: or
+  :no: 'no'
   register: Register
   sign_in: Sign in
   recover_password: Recover password

config/routes.rb

@@ -1,5 +1,6 @@
 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}
@@ -24,8 +25,9 @@ Rails.application.routes.draw do
   # https://github.com/heartcombo/devise/issues/5786
   connection = ActiveRecord::Base.connection
   if connection.schema_version && connection.table_exists?(:users)
+    # NOTE: change helper prefix from *_registration to *_profile once possible
     devise_for :users, path: '', path_names: {registration: 'profile'},
-      controllers: {registrations: :registrations}
+      controllers: {registrations: 'user/profiles'}
   end
 
   resources :users, only: [:index, :show, :update] do
@@ -34,9 +36,7 @@ Rails.application.routes.draw do
   end
 
   unauthenticated do
-    as :user do
-      root to: redirect('/sign_in')
-    end
+    root to: redirect('/sign_in')
   end
   root to: redirect('/units'), as: :user_root
 

db/migrate/20230602185352_create_units.rb

@@ -5,7 +5,7 @@ class CreateUnits < ActiveRecord::Migration[7.0]
       t.string :symbol, null: false, limit: 15
       t.text :description
       t.decimal :multiplier, null: false, precision: 30, scale: 15, default: 1.0
-      t.references :base, foreign_key: {to_table: :units}
+      t.references :base, foreign_key: {to_table: :units, on_delete: :cascade}
 
       t.timestamps null: false
     end

db/migrate/20250104194343_create_quantities.rb

@@ -4,7 +4,7 @@ class CreateQuantities < ActiveRecord::Migration[7.2]
       t.references :user, foreign_key: true
       t.string :name, null: false, limit: 31
       t.text :description
-      t.references :parent, foreign_key: {to_table: :quantities}
+      t.references :parent, foreign_key: {to_table: :quantities, on_delete: :cascade}
 
       t.timestamps null: false
 

db/migrate/20250121230456_create_readouts.rb

@@ -1,10 +1,14 @@
 class CreateReadouts < ActiveRecord::Migration[7.2]
   def change
     create_table :readouts do |t|
-      t.references :user, null: false, foreign_key: true
+      # Reference :user through :quantity (:measurement may be NULL).
+      t.references :measurement, foreign_key: true
       t.references :quantity, null: false, foreign_key: true
+      # :category + :value + :unit as a separate table? (NumericValue, TextValue)
+      t.integer :category, null: false, default: 0
+      t.float :value, null: false, limit: Float::MANT_DIG
       t.references :unit, foreign_key: true
-      t.decimal :value, null: false, precision: 30, scale: 15
+      # Move to Measurement?
       #t.references :collector, foreign_key: true
       #t.references :device, foreign_key: true
 

db/migrate/20260402000000_add_taken_at_to_readouts.rb

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

db/migrate/20260403000000_add_default_unit_to_quantities.rb

@@ -0,0 +1,5 @@
+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: 2025_01_21_230456) do
+ActiveRecord::Schema[7.2].define(version: 2026_04_03_000000) 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,6 +20,8 @@ ActiveRecord::Schema[7.2].define(version: 2025_01_21_230456) 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"
@@ -32,10 +34,12 @@ ActiveRecord::Schema[7.2].define(version: 2025_01_21_230456) 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|
@@ -69,11 +73,12 @@ ActiveRecord::Schema[7.2].define(version: 2025_01_21_230456) do
     t.index ["reset_password_token"], name: "index_users_on_reset_password_token", unique: true
   end
 
-  add_foreign_key "quantities", "quantities", column: "parent_id"
+  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"
   add_foreign_key "readouts", "users"
-  add_foreign_key "units", "units", column: "base_id"
+  add_foreign_key "units", "units", column: "base_id", on_delete: :cascade
   add_foreign_key "units", "users"
 end

db/seeds.rb

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

db/seeds/demo.rb

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

db/seeds/templates/units.erb

@@ -1,5 +1,5 @@
 Unit.transaction do
-  Unit.defaults.order(Unit.arel_table[:base_id].eq(nil)).delete_all
+  Unit.defaults.delete_all
   units = {}
 <% Unit.defaults.ordered.each do |unit| %>
 <%= "\n" if unit.base.nil? %>

db/seeds/units.rb

@@ -1,5 +1,5 @@
 Unit.transaction do
-  Unit.defaults.order(Unit.arel_table[:base_id].eq(nil)).delete_all
+  Unit.defaults.delete_all
 
   units = {}
 

test/application_system_test_case.rb

@@ -1,7 +1,7 @@
 require "test_helper"
 
 class ApplicationSystemTestCase < ActionDispatch::SystemTestCase
-  extend ActionView::Helpers::TranslationHelper
+  include ActionView::Helpers::SanitizeHelper
   include ActionView::Helpers::UrlHelper
 
   # NOTE: geckodriver installed with Firefox, ignore incompatibility warning
@@ -19,8 +19,8 @@ class ApplicationSystemTestCase < ActionDispatch::SystemTestCase
 
   def sign_in(user: users.select(&:confirmed?).sample, password: randomize_user_password!(user))
     visit new_user_session_url
-    fill_in User.human_attribute_name(:email).capitalize, with: user.email
-    fill_in User.human_attribute_name(:password).capitalize, with: password
+    fill_in User.human_attribute_name(:email), with: user.email
+    fill_in User.human_attribute_name(:password), with: password
     click_on t(:sign_in)
     user
   end
@@ -30,6 +30,14 @@ class ApplicationSystemTestCase < ActionDispatch::SystemTestCase
     evaluate_script("arguments[0].insertAdjacentHTML('beforeend', '#{button.html_safe}');", after)
   end
 
+  # Allow skipping interpolations when translating for testing purposes
+  INTERPOLATION_PATTERNS = Regexp.union(I18n.config.interpolation_patterns)
+  def translate(key, **options)
+    translation = options.empty? ? super.split(INTERPOLATION_PATTERNS, 2).first : super
+    sanitize(translation, tags: [])
+  end
+  alias :t :translate
+
   #def assert_stale(element)
   #  assert_raises(Selenium::WebDriver::Error::StaleElementReferenceError) { element.tag_name }
   #end

test/controllers/charts_controller_test.rb

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

test/system/charts_test.rb

@@ -0,0 +1,26 @@
+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

@@ -0,0 +1,64 @@
+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

@@ -0,0 +1,45 @@
+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