Remove duplicate disable/enable logic and fetch() calls

readoutUnitChanged was manually setting disabled/aria-disabled/tabindex attributes — duplicating Turbo.StreamElement.prototype.disableElement/ enableElement which already exists for this purpose. Replace with calls to those methods. Also replace fetch() in setDefaultUnit and drop with form.requestSubmit() so Turbo handles CSRF, stream responses and lifecycle natively. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Replace JS-generated wide table with ERB partial and Turbo Streams
2026-04-04 13:08:21 +00:00 · 2026-04-04 12:28:32 +00:00 · 2026-04-04 10:24:26 +00:00 · 2026-04-03 22:03:10 +00:00 · 2026-04-03 22:01:52 +00:00 · 2026-03-25 18:42:24 +01:00
83 changed files with 1967 additions and 966 deletions
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -0,0 +1,84 @@
+# 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)
+```
+
+## Database Requirements
+
+The database must support:
+- Recursive CTEs with `UPDATE`/`DELETE` (MySQL ≥ 8.0, PostgreSQL, or SQLite3)
+- Decimal precision of 30+ digits
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -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
--- a/9
+++ b/9
@@ -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"
@@ -42,4 +42,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
--- a/Gemfile.lock
+++ b/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,20 @@ 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)
+    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 +292,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,10 +315,11 @@ 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
--- a/app/assets/images/pictograms/alert-outline.svg
+++ b/app/assets/images/pictograms/alert-outline.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" id="icon" viewBox="0 0 24 24"><path 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>
--- a/app/assets/images/pictograms/check-circle-outline.svg
+++ b/app/assets/images/pictograms/check-circle-outline.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" id="icon" viewBox="0 0 24 24"><path 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>
--- a/app/assets/images/pictograms/chevron-down.svg
+++ b/app/assets/images/pictograms/chevron-down.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="icon" viewBox="0 0 24 24"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg>
--- a/app/assets/images/pictograms/view-columns.svg
+++ b/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>
--- a/app/assets/images/pictograms/view-rows.svg
+++ b/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>
--- a/app/assets/stylesheets/application.css
+++ b/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,163 @@
 :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;
+}
+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 +220,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 +257,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 +314,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 +346,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,284 +369,325 @@ 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;
+.hexpand {
+  width: 100%;
 }
-.hflex {
+.flex {
  display: flex;
  gap: 0.8em;
 }
-.hflex.centered {
-  justify-content: center;
+.flex.reverse {
+  flex-direction: row-reverse;
 }
-.vflex {
-  display: flex;
-  gap: 0.8em;
+.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;
+}
+#measurements tr.grouped td {
+  border-top: none;
+}
+#measurements tr.grouped .taken-at,
+#measurements tr.grouped .created-at {
+  visibility: hidden;
+}
+.measurements-wide td {
+  vertical-align: middle;
+  white-space: nowrap;
+}
+.wide-cell {
+  align-items: center;
+  display: inline-flex;
+  gap: 0.25em;
+}
+.wide-cell .button {
+  border: none;
+  font-size: inherit;
+  height: auto;
+  padding: 0;
+}
+.wide-cell button.link::after {
+  content: none;
+}
--- a/app/controllers/application_controller.rb
+++ b/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?
--- a/app/controllers/measurements_controller.rb
+++ b/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
--- a/app/controllers/quantities_controller.rb
+++ b/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
--- a/app/controllers/readouts_controller.rb
+++ b/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
--- a/app/controllers/user/profiles_controller.rb
+++ b/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

--- a/app/controllers/users_controller.rb
+++ b/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
--- a/app/helpers/application_helper.rb
+++ b/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 ")}} :
-            {})
+    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 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 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 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,7 @@ module ApplicationHelper
      ['measurements', 'scale-bathroom', :restricted],
      ['quantities', 'axis-arrow', :restricted, 'right'],
      ['units', 'weight-gram', :restricted],
+      # TODO: display users tab only if >1 user present; sole_user?/sole_admin?
      ['users', 'account-multiple-outline', :admin],
    ]

@@ -171,21 +209,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 +249,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 +259,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
--- a/app/helpers/quantities_helper.rb
+++ b/app/helpers/quantities_helper.rb
@@ -1,17 +1,11 @@
 module QuantitiesHelper
-  def quantity_option_text(quantity, checked = nil)
-    prefix = case checked
-             when true
-               # Use color and gray unicode emoji to assure same width.
-               # Avoid shapes similar to inputs (chackboxes, radio buttons etc.)
-               # (U+27A1 U+FE0F)/U+1F7E6/U+2705/U+1F499 U+2004
-               '💙 '
-             when false
-               # U+2B1C/U+1F90D U+2004
-               '🤍 '
-             else
-               ''
+  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
-    sanitize('&emsp;' * quantity.depth + prefix + quantity.name)
  end
 end
--- a/app/javascript/application.js
+++ b/app/javascript/application.js
@@ -9,31 +9,158 @@ function showPage(event) {
 }
 document.addEventListener('turbo:load', showPage)

+function groupMeasurements() {
+  var tbody = document.getElementById('measurements');
+  if (!tbody) return;
+  var prevTakenAt = null;
+  Array.from(tbody.querySelectorAll('tr[data-taken-at]'))
+    .filter(function(row) { return row.style.display !== 'none' })
+    .forEach(function(row) {
+      var takenAt = row.dataset.takenAt;
+      row.classList.toggle('grouped', takenAt !== null && takenAt === prevTakenAt);
+      prevTakenAt = takenAt;
+    });
+}
+
+
+function getMeasurementsView() {
+  return localStorage.getItem('measurements-view') || 'compact';
+}
+
+function applyMeasurementsView(view) {
+  document.body.dataset.measurementsView = view;
+}
+
+function setMeasurementsView(view) {
+  localStorage.setItem('measurements-view', view);
+  applyMeasurementsView(view);
+}
+window.setMeasurementsView = setMeasurementsView
+
+document.addEventListener('turbo:load', function() {
+  var tbody = document.getElementById('measurements');
+  if (!tbody) return;
+  groupMeasurements();
+  applyMeasurementsView(getMeasurementsView());
+  new MutationObserver(function() {
+    groupMeasurements();
+  }).observe(tbody, {
+    childList: true, subtree: true,
+    attributes: true, attributeFilter: ['style']
+  });
+})
+
+function detailsChange(event) {
+  var target = event.currentTarget
+  var count = target.querySelectorAll('input:checked:not([disabled])').length
+  var span = target.querySelector('summary > span')
+  var button = target.querySelector('button')
+  if (count > 0) {
+    span.textContent = count + ' selected';
+    Turbo.StreamElement.prototype.enableElement(button)
+  } else {
+    span.textContent = span.getAttribute('data-prompt')
+    Turbo.StreamElement.prototype.disableElement(button)
+  }
+}
+window.detailsChange = detailsChange
+
+/* Close open <details> when focus lost */
+function detailsClose(event) {
+  if (!event.relatedTarget ||
+      event.relatedTarget.closest("details") != event.currentTarget) {
+    event.currentTarget.removeAttribute("open")
+  }
+}
+window.detailsClose = detailsClose
+
+window.detailsObserver = new MutationObserver((mutations) => {
+  mutations[0].target.dispatchEvent(new Event('change', {bubbles: true}))
+});
+
+
+function readoutUnitChanged(select) {
+  var button = select.closest('tr').querySelector('.set-default-unit');
+  if (select.value && select.value !== select.dataset.defaultUnitId) {
+    Turbo.StreamElement.prototype.enableElement(button);
+  } else {
+    Turbo.StreamElement.prototype.disableElement(button);
+  }
+}
+window.readoutUnitChanged = readoutUnitChanged
+
+function setDefaultUnit(button) {
+  var select = button.closest('tr').querySelector('select[data-default-unit-id]');
+  var form = document.createElement('form');
+  form.action = button.dataset.path;
+  form.method = 'post';
+  form.dataset.turboStream = 'true';
+  var methodInput = document.createElement('input');
+  methodInput.type = 'hidden'; methodInput.name = '_method'; methodInput.value = 'patch';
+  var 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', function(event) {
+    if (event.detail.success) {
+      select.dataset.defaultUnitId = select.value;
+      readoutUnitChanged(select);
+    }
+    form.remove();
+  });
+  document.body.appendChild(form);
+  form.requestSubmit();
+}
+window.setDefaultUnit = setDefaultUnit
+
+function formValidate(event) {
+  var id = event.submitter.getAttribute("data-validate")
+  if (!id) return;
+
+  var input = document.getElementById(id)
+  if (!input.checkValidity()) {
+    input.reportValidity()
+    event.preventDefault()
+  }
+}
+window.formValidate = formValidate
+

 /* Turbo stream actions */
+Turbo.StreamElement.prototype.disableElement = function(element) {
+    element.setAttribute("disabled", "disabled")
+    element.setAttribute("aria-disabled", "true")
+    element.setAttribute("tabindex", "-1")
+}
+Turbo.StreamActions.disable = function() {
+  this.targetElements.forEach((e) => { this.disableElement(e) })
+}
+
 Turbo.StreamElement.prototype.enableElement = function(element) {
    element.removeAttribute("disabled")
    element.removeAttribute("aria-disabled")
-    // 'tabindex' is not used explicitly, so removing it is safe
+    // Assume 'tabindex' is not used explicitly, so removing it is safe
    element.removeAttribute("tabindex")
 }
-
-Turbo.StreamActions.disable = function() {
-  this.targetElements.forEach((e) => {
-    e.setAttribute("disabled", "disabled")
-    e.setAttribute("aria-disabled", "true")
-    e.setAttribute("tabindex", "-1")
-  })
-}
-
 Turbo.StreamActions.enable = function() {
  this.targetElements.forEach((e) => { this.enableElement(e) })
 }

+/* TODO: change to visibility = collapse to avoid width change? */
 Turbo.StreamActions.hide = function() {
  this.targetElements.forEach((e) => { e.style.display = "none" })
 }

+Turbo.StreamActions.show = function() {
+  this.targetElements.forEach((e) => { e.style.removeProperty("display") })
+}
+
+/*
+Turbo.StreamActions.collapse = function() {
+  this.targetElements.forEach((e) => { e.style.visibility = "collapse" })
+}
+*/
+
 Turbo.StreamActions.close_form = function() {
  this.targetElements.forEach((e) => {
    /* Move focus if there's no focus or focus inside form being closed */
@@ -54,28 +181,63 @@ Turbo.StreamActions.close_form = function() {
  })
 }

+Turbo.StreamActions.unselect = function() {
+  this.targetElements.forEach((e) => {
+    e.checked = false
+    this.enableElement(e)
+  })
+}

-/* Items table drag and drop support */
-function processKey(event) {
-  if (event.key == "Escape") {
-    event.currentTarget.querySelector("a[name=cancel]").click();
+function formProcessKey(event) {
+  switch (event.key) {
+    case "Escape":
+      event.currentTarget.querySelector("a[name=cancel]").click()
+      break
+    case "Enter":
+      event.currentTarget.querySelector("button[name=button]").click()
+      event.preventDefault()
+      break
  }
 }
-window.processKey = processKey;
+window.formProcessKey = formProcessKey

-var lastEnterTime;
-function dragStart(event) {
-  lastEnterTime = event.timeStamp;
-  var row = event.currentTarget;
-  row.closest("table").querySelectorAll("thead tr").forEach((tr) => {
-    tr.toggleAttribute("hidden");
-  });
-  event.dataTransfer.setData("text/plain", row.getAttribute("data-drag-path"));
-  var rowRectangle = row.getBoundingClientRect();
-  event.dataTransfer.setDragImage(row, event.x - rowRectangle.left, event.y - rowRectangle.top);
-  event.dataTransfer.dropEffect = "move";
+function detailsProcessKey(event) {
+  // TODO: up/down arrows to move focus to prev/next line
+  switch (event.key) {
+    case "Escape":
+      if (event.currentTarget.hasAttribute("open")) {
+        event.currentTarget.removeAttribute("open")
+        event.stopPropagation()
+      }
+      break
+    case "Enter":
+      var button = event.currentTarget.querySelector("button:not([disabled])")
+      if (button) {
+        button.click()
+        // Autofocus won't be respected unless target is blurred
+        event.target.blur()
+        event.preventDefault()
+        event.stopPropagation()
+      }
+      break
+  }
 }
-window.dragStart = dragStart;
+window.detailsProcessKey = detailsProcessKey;
+
+/* Items table drag and drop support */
+var lastEnterTime
+function dragStart(event) {
+  lastEnterTime = event.timeStamp
+  var row = event.currentTarget
+  row.closest("table").querySelectorAll("thead tr").forEach((tr) => {
+    tr.toggleAttribute("hidden")
+  })
+  event.dataTransfer.setData("text/plain", row.getAttribute("data-drag-path"))
+  var rowRectangle = row.getBoundingClientRect()
+  event.dataTransfer.setDragImage(row, event.x - rowRectangle.left, event.y - rowRectangle.top)
+  event.dataTransfer.dropEffect = "move"
+}
+window.dragStart = dragStart

 /*
 * Drag tracking assumptions (based on FF 122.0 experience):
@@ -87,55 +249,50 @@ window.dragStart = dragStart;
 * and outside. This should probably be fixed in browser, than patched here.
 */
 function dragEnter(event) {
-  //console.log(event.timeStamp + " " + event.type + ": " + event.currentTarget.id);
-  dragLeave(event);
-  lastEnterTime = event.timeStamp;
-  const id = event.currentTarget.getAttribute("data-drop-id");
-  document.getElementById(id).classList.add("dropzone");
+  //console.log(event.timeStamp + " " + event.type + ": " + event.currentTarget.id)
+  dragLeave(event)
+  lastEnterTime = event.timeStamp
+  const id = event.currentTarget.getAttribute("data-drop-id")
+  document.getElementById(id).classList.add("dropzone")
 }
-window.dragEnter = dragEnter;
+window.dragEnter = dragEnter

 function dragOver(event) {
-  event.preventDefault();
+  event.preventDefault()
 }
-window.dragOver = dragOver;
+window.dragOver = dragOver

 function dragLeave(event) {
-  //console.log(event.timeStamp + " " + event.type + ": " + event.currentTarget.id);
+  //console.log(event.timeStamp + " " + event.type + ": " + event.currentTarget.id)
  // Leave has been accounted for by Enter at the same timestamp, processed earlier
-  if (event.timeStamp <= lastEnterTime) return;
+  if (event.timeStamp <= lastEnterTime) return
  event.currentTarget.closest("table").querySelectorAll(".dropzone").forEach((tr) => {
-    tr.classList.remove("dropzone");
-  });
+    tr.classList.remove("dropzone")
+  })
 }
-window.dragLeave = dragLeave;
+window.dragLeave = dragLeave

 function dragEnd(event) {
-  dragLeave(event);
+  dragLeave(event)
  event.currentTarget.closest("table").querySelectorAll("thead tr").forEach((tr) => {
-    tr.toggleAttribute("hidden");
-  });
+    tr.toggleAttribute("hidden")
+  })
 }
-window.dragEnd = dragEnd;
+window.dragEnd = dragEnd

 function drop(event) {
-  event.preventDefault();
-
-  var params = new URLSearchParams();
-  var id_param = event.currentTarget.getAttribute("data-drop-id-param");
-  var id = event.currentTarget.getAttribute("data-drop-id").split("_").pop();
-  params.append(id_param, id);
-
-  fetch(event.dataTransfer.getData("text/plain"), {
-    body: params,
-    headers: {
-      "Accept": "text/vnd.turbo-stream.html",
-      "X-CSRF-Token": document.head.querySelector("meta[name=csrf-token]").content,
-      "X-Requested-With": "XMLHttpRequest"
-    },
-    method: "POST"
-  })
-  .then(response => response.text())
-  .then(html => Turbo.renderStreamMessage(html))
+  event.preventDefault()
+  var idParam = event.currentTarget.getAttribute("data-drop-id-param")
+  var id = event.currentTarget.getAttribute("data-drop-id").split("_").pop()
+  var form = document.createElement('form');
+  form.action = event.dataTransfer.getData("text/plain");
+  form.method = 'post';
+  form.dataset.turboStream = 'true';
+  var input = document.createElement('input');
+  input.type = 'hidden'; input.name = idParam; input.value = id;
+  form.appendChild(input);
+  form.addEventListener('turbo:submit-end', function() { form.remove(); });
+  document.body.appendChild(form);
+  form.requestSubmit();
 }
-window.drop = drop;
+window.drop = drop
--- a/app/models/quantity.rb
+++ b/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

@@ -100,6 +101,11 @@ class Quantity < ApplicationRecord
    name
  end

+  def to_s_with_depth
+    # em space, U+2003
+    ' ' * depth + name
+  end
+
  def destroyable?
    subquantities.empty?
  end
--- a/app/models/readout.rb
+++ b/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
--- a/app/models/unit.rb
+++ b/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
--- a/app/models/user.rb
+++ b/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}
--- a/app/views/default/units/_unit.html.erb
+++ b/app/views/default/units/_unit.html.erb
@@ -5,7 +5,7 @@
  </td>

  <% if current_user.at_least(:active) %>
-    <td class="actions">
+    <td class="flex">
      <% unless unit.portable.nil? %>
        <% if unit.default? %>
          <%= image_button_to_if unit.portable?, t('.import'), 'download-outline',
--- a/app/views/default/units/index.html.erb
+++ b/app/views/default/units/index.html.erb
@@ -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 %>
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -23,10 +23,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 +47,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>
--- a/app/views/measurements/_edit_form.html.erb
+++ b/app/views/measurements/_edit_form.html.erb
@@ -0,0 +1,24 @@
+<%= tabular_fields_for @readout, form: form_tag do |form| %>
+  <%- tag.tr id: row, class: "form", onkeydown: "formProcessKey(event)",
+    data: {form: form_tag, hidden_row: hidden_row, link: link} do %>
+    <td><%= @readout.quantity %></td>
+    <td class="ralign">
+      <%= form.number_field :value, required: true, autofocus: true %>
+    </td>
+    <td>
+      <%= form.collection_select :unit_id, @user_units, :id,
+        ->(u){ sanitize('&emsp;' * (u.base_id? ? 1 : 0) + u.symbol) },
+        {}, required: true %>
+    </td>
+    <td>
+      <%= form.datetime_field :taken_at %>
+    </td>
+    <td></td>
+    <td class="flex">
+      <%= form.button %>
+      <%= image_link_to t(:cancel), "close-outline", measurements_path,
+        class: 'dangerous', name: :cancel,
+        onclick: render_turbo_stream('edit_form_close', {row: row}) %>
+    </td>
+  <% end %>
+<% end %>
--- a/app/views/measurements/_edit_form_close.html.erb
+++ b/app/views/measurements/_edit_form_close.html.erb
@@ -0,0 +1,2 @@
+<%= turbo_stream.close_form row %>
+<%= turbo_stream.update :flashes %>
--- a/app/views/measurements/_edit_panel.html.erb
+++ b/app/views/measurements/_edit_panel.html.erb
@@ -0,0 +1,33 @@
+<% 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", onkeydown: "formProcessKey(event)",
+        data: {form: form_tag, hidden_row: hidden_row} do %>
+        <td><%= @readout.quantity %></td>
+        <td class="ralign">
+          <%= form.number_field :value, required: true, autofocus: true %>
+        </td>
+        <td>
+          <%= form.collection_select :unit_id, @user_units, :id,
+            ->(u){ sanitize('&emsp;' * (u.base_id? ? 1 : 0) + u.symbol) },
+            {}, required: true %>
+        </td>
+        <td>
+          <%= form.datetime_field :taken_at %>
+        </td>
+        <td></td>
+        <td class="flex">
+          <%= form.button %>
+          <%= image_link_to t(:cancel), "close-outline", measurements_path,
+            class: 'dangerous', name: :cancel,
+            onclick: render_turbo_stream('edit_form_close', {row: row}) %>
+        </td>
+      <% end %>
+    </tbody>
+  </table>
+<% end %>
--- a/app/views/measurements/_form.html.erb
+++ b/app/views/measurements/_form.html.erb
@@ -1,40 +1,45 @@
-<%= tabular_form_with model: Measurement.new do |form| %>
-  <fieldset>
-    <legend>
-      <%= tag.span t('.no_items'), id: :measurement_form_legend %>
-      <%= image_link_to '', "pencil-outline", measurements_path,
-        data: {turbo_stream: true} %>
-    </legend>
-    <table class="items">
+<%= tabular_form_with model: Measurement.new, id: :measurement_form,
+  class: 'topside-area flex vertical center',
+  html: {onkeydown: 'formProcessKey(event)'} do |form| %>
+
+  <table class="items-table center">
    <tbody id="readouts">
-        <tr id="readouts_form">
-          <td>
-            <%= select_tag :id,
-              options_from_collection_for_select(
-                @quantities, :id, ->(q){ quantity_option_text(q, false) }
-              ), class: 'quantity' %>
-          </td>
-          <td colspan="3">
-            <div class="actions">
-              <% opts = {formaction: new_readout_path, formmethod: :get,
-                         formnovalidate: true, data: {turbo_stream: true}} %>
-              <%= image_button_tag t('.new_readout'), 'plus-outline', id: :new_readout,
-                value: nil, **opts -%>
-              <%= image_button_tag t('.new_children'), 'plus-multiple-outline',
-                value: :children, **opts -%>
-              <%#= image_button_tag t('.new_subtree'), 'plus-multiple-outline',
-                value: :subtree, **opts -%>
-              <%= image_button_tag t('.new_leaves'), 'plus-multiple-outline',
-                value: :leaves, **opts -%>
-            </div>
+      <%= tabular_fields_for @measurement do |form| %>
+        <tr class="italic">
+          <td class="hexpand hmin50"><%= t '.taken_at_html' %></td>
+          <td colspan="3" class="ralign">
+            <%= form.datetime_field :taken_at, required: true, value: Time.current.strftime('%Y-%m-%dT%H:%M') %>
          </td>
        </tr>
+      <% end %>
    </tbody>
  </table>
-  </fieldset>
-  <div class="hflex centered">
-    <%= form.button -%>
+
+  <%# TODO: right-click selection; unnecessary with hierarchical tags? %>
+  <details id="quantity_select" class="center hexpand" open
+           onkeydown="detailsProcessKey(event)">
+    <summary autofocus>
+      <!-- TODO: Set content with CSS when span empty to avoid duplication -->
+      <span data-prompt="<%= t('.select_quantity') %>">
+        <%= t('.select_quantity') %>
+      </span>
+      <%= image_button_tag t(:apply), "update", name: nil, disabled: true,
+        formaction: new_readout_path, formmethod: :get, formnovalidate: true,
+        data: {turbo_stream: true} %>
+    </summary>
+    <ul><%= quantities_check_boxes(@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>
 <% end %>
+
+<script>
+  quantity_select.addEventListener('focusout', detailsClose)
+  quantity_select.addEventListener('change', detailsChange)
+  detailsObserver.observe(quantity_select.querySelector('ul'),
+    {subtree: true, attributeFilter: ['disabled']})
+</script>
--- a/app/views/measurements/_form_close.html.erb
+++ b/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 -%>
--- a/app/views/measurements/_readout.html.erb
+++ b/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 %>
--- a/app/views/measurements/_wide_table.html.erb
+++ b/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>
--- a/app/views/measurements/create.turbo_stream.erb
+++ b/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 %>
--- a/app/views/measurements/destroy.turbo_stream.erb
+++ b/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} %>
--- a/app/views/measurements/edit.turbo_stream.erb
+++ b/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 %>
--- a/app/views/measurements/index.html.erb
+++ b/app/views/measurements/index.html.erb
@@ -1,16 +1,40 @@
 <%# TODO: show hint when no quantities/units defined %>
-<div class="rightside buttongrid">
+<div class="rightside-area buttongrid">
  <% if current_user.at_least(:active) %>
    <%= image_link_to t('.new_measurement'), 'plus-outline', new_measurement_path,
      id: :new_measurement_link, onclick: 'this.blur();',
      data: {turbo_stream: true} %>
  <% end %>
+  <%= image_button_tag '', 'view-rows', name: nil, type: 'button',
+    class: 'view-toggle', title: t('.view_compact'),
+    data: {view: 'compact'}, onclick: "setMeasurementsView('compact')" %>
+  <%= image_button_tag '', 'view-columns', name: nil, type: 'button',
+    class: 'view-toggle', title: t('.view_wide'),
+    data: {view: 'wide'}, onclick: "setMeasurementsView('wide')" %>
 </div>

-<%= tag.div class: 'topside', id: :measurement_form %>
-
-<table class="main">
+<div class="main-area measurements-section">
+  <%= tag.div id: :measurement_edit_form %>
+  <table class="items-table measurements-compact">
+    <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">
-    <%= render(@measurements) || render_no_items %>
+      <%= render(partial: 'readout', collection: @measurements, as: :readout) || render_no_items %>
    </tbody>
-</table>
+  </table>
+
+  <div id="measurements-wide" class="measurements-wide">
+    <%= render 'wide_table', wide_groups: @wide_groups, wide_quantities: @wide_quantities %>
+  </div>
+</div>
+
--- a/app/views/measurements/new.turbo_stream.erb
+++ b/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 %>
--- a/app/views/measurements/update.turbo_stream.erb
+++ b/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} %>
--- a/app/views/quantities/_form.html.erb
+++ b/app/views/quantities/_form.html.erb
@@ -1,5 +1,5 @@
 <%= tabular_fields_for @quantity, form: form_tag do |form| %>
-  <%- tag.tr id: row, class: "form", onkeydown: "processKey(event)",
+  <%- tag.tr id: row, class: "form", onkeydown: "formProcessKey(event)",
    data: {link: link, form: form_tag, hidden_row: hidden_row} do %>

    <td style="--depth:<%= @quantity.depth %>">
@@ -8,8 +8,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}) %>
--- a/app/views/quantities/_quantity.html.erb
+++ b/app/views/quantities/_quantity.html.erb
@@ -5,14 +5,15 @@
           data: {drag_path: reparent_quantity_path(quantity), drop_id: dom_id(quantity),
                  drop_id_param: "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} %>

--- a/app/views/quantities/index.html.erb
+++ b/app/views/quantities/index.html.erb
@@ -1,20 +1,22 @@
-<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>
@@ -24,7 +26,7 @@
               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>
+      <th colspan="5"><%= t '.top_level_drop' %></th>
    <% end %>
  </thead>
  <tbody id="quantities">
--- a/app/views/readouts/_form.html.erb
+++ b/app/views/readouts/_form.html.erb
@@ -1,20 +1,29 @@
 <%# 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 %>
+  <%- tag.tr id: dom_id(readout.quantity, :new, :readout) 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 || ''},
+        onchange: "readoutUnitChanged(this)" %>
+    </td>
+    <td class="flex">
+      <%# TODO: change to _link_ after giving up displaying relative paths %>
+      <%= image_button_tag '', 'check-circle-outline',
+        class: 'set-default-unit', name: nil, type: 'button', disabled: true,
+        title: t('readouts.form.set_default_unit'),
+        data: {path: quantity_path(readout.quantity)},
+        onclick: 'setDefaultUnit(this)' %>
+      <%= image_button_tag '', 'delete-outline', class: 'dangerous', name: nil,
        formaction: discard_readouts_path(readout.quantity),
        formmethod: :get, formnovalidate: true, data: {turbo_stream: true} %>
    </td>
--- a/app/views/readouts/discard.turbo_stream.erb
+++ b/app/views/readouts/discard.turbo_stream.erb
@@ -1,5 +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.update_all "#id option[value=\"#{@quantity.id}\"]",
-  quantity_option_text(@quantity, false) %>
 <%= render partial: 'form_repath' %>
+<%= turbo_stream.unselect dom_id(@quantity) %>
--- a/app/views/readouts/new.turbo_stream.erb
+++ b/app/views/readouts/new.turbo_stream.erb
@@ -1,11 +1,8 @@
-<%= render partial: 'form_repath' %>
-<%= turbo_stream.enable_all 'button[name="discard"]' if @prev_quantities.one? %>
-<%# TODO: disable Add actions accordingly (e.g. disable Children if childless or all
-  children already added), then disable option once all actions unavailable %>
 <% @readouts.each do |r| %>
-  <%= turbo_stream.update_all "#id option[value=\"#{r.quantity_id}\"]",
-     quantity_option_text(r.quantity, true) %>
+  <%= 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? %>
--- a/app/views/units/_form.html.erb
+++ b/app/views/units/_form.html.erb
@@ -1,5 +1,5 @@
 <%= tabular_fields_for @unit, form: form_tag do |form| %>
-  <%- tag.tr id: row, class: "form", onkeydown: "processKey(event)",
+  <%- tag.tr id: row, class: "form", onkeydown: "formProcessKey(event)",
    data: {link: link, form: form_tag, hidden_row: hidden_row} do %>

    <td style="--depth:<%= @unit.base_id? ? 1 : 0 %>">
@@ -8,11 +8,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}) %>
--- a/app/views/units/_unit.html.erb
+++ b/app/views/units/_unit.html.erb
@@ -6,14 +6,15 @@
                  drop_id: dom_id(unit.base || unit),
                  drop_id_param: "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} %>
--- a/app/views/units/index.html.erb
+++ b/app/views/units/index.html.erb
@@ -1,19 +1,21 @@
-<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>
--- a/app/views/users/confirmations/create.turbo_stream.erb
+++ b/app/views/users/confirmations/create.turbo_stream.erb
@@ -0,0 +1 @@
+<% flash.discard %>
--- a/app/views/users/confirmations/new.html.erb
+++ b/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>
--- a/app/views/users/index.html.erb
+++ b/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>
--- a/app/views/users/mailer/confirmation_instructions.html.erb
+++ b/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>
--- a/app/views/users/passwords/create.turbo_stream.erb
+++ b/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 %>
--- a/app/views/users/passwords/edit.html.erb
+++ b/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 %>
--- a/app/views/users/passwords/new.html.erb
+++ b/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>
--- a/app/views/users/profiles/edit.html.erb
+++ b/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 %>
--- a/app/views/users/profiles/new.html.erb
+++ b/app/views/users/profiles/new.html.erb
@@ -0,0 +1,16 @@
+<%= labeled_form_for resource, url: user_registration_path,
+  html: {class: 'main-area', onsubmit: 'formValidate(event)'} 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 %>
--- a/app/views/users/registrations/edit.html.erb
+++ b/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 %>
--- a/app/views/users/registrations/new.html.erb
+++ b/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>
--- a/app/views/users/sessions/new.html.erb
+++ b/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', onsubmit: 'formValidate(event)'} do |f| %>
+
+  <%= f.email_field :email, required: true, size: 30, autofocus: true,
+    autocomplete: 'email' %>
+  <%= f.password_field :password, required: true, size: 30,
+    autocomplete: 'current-password' %>

  <% if devise_mapping.rememberable? %>
-      <%= f.check_box :remember_me, label: t(".remember_me") %>
+    <%= f.check_box :remember_me %>
  <% end %>

-    <%= f.submit t(:sign_in) %>
-  <% end %>
+  <%# /sign_in as HTML; /password as TURBO_STREAM %>
+  <%= f.submit t(:sign_in), data: {turbo: false} %>

-  <%= content_tag :p, t(:or), style: "text-align: center;" %>
-  <%= image_link_to t(:recover_password), 'lock-reset', new_user_password_path,
-    class: 'centered' %>
-</div>
+  <%= image_button_tag t(:recover_password), 'lock-reset', class: 'auxiliary',
+    formaction: user_password_path, formnovalidate: true,
+    data: {validate: f.field_id(:email)} %>
+<% end %>
--- a/app/views/users/show.html.erb
+++ b/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 %>
--- a/app/views/users/unlocks/new.html.erb
+++ b/app/views/users/unlocks/new.html.erb
@@ -8,7 +8,7 @@
    <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
  </div>

-  <div class="actions">
+  <div class="flex">
    <%= f.submit "Resend unlock instructions" %>
  </div>
 <% end %>
--- a/config/environments/test.rb
+++ b/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
--- a/config/initializers/devise.rb
+++ b/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.
--- a/config/initializers/time_formats.rb
+++ b/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"
--- a/config/initializers/turbo_streams_tag_builder.rb
+++ b/config/initializers/turbo_streams_tag_builder.rb
@@ -19,7 +19,19 @@ ActiveSupport.on_load :turbo_streams_tag_builder do
    action :hide, target, allow_inferred_rendering: false
  end

+  def show(target)
+    action :show, target, allow_inferred_rendering: false
+  end
+
+  #def collapse(target)
+  #  action :collapse, target, allow_inferred_rendering: false
+  #end
+
  def close_form(target)
    action :close_form, target, allow_inferred_rendering: false
  end
+
+  def unselect(target)
+    action :unselect, target, allow_inferred_rendering: false
+  end
 end
--- a/config/locales/devise.en.yml
+++ b/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:
--- a/config/locales/en.yml
+++ b/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,29 +64,53 @@ 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
  measurements:
    navigation: Measurements
    no_items: There are no measurements taken. You can Add some now.
    form:
-      new_readout: Add
-      new_children: Children
-      new_subtree: Subtree
-      new_leaves: Leaves
-      no_items: Select and add desired quantities...
-      select_quantity: select quantity...
+      select_quantity: select quantities...
+      taken_at_html: Measurement taken at&emsp;
    index:
      new_measurement: Add measurement
-  readouts:
-    form:
+      view_compact: Compact view
+      view_wide: Wide view
+    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.
@@ -133,34 +168,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
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -24,8 +24,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,10 +35,8 @@ Rails.application.routes.draw do
  end

  unauthenticated do
-    as :user do
    root to: redirect('/sign_in')
  end
-  end
  root to: redirect('/units'), as: :user_root

  direct(:source_code) { 'https://gitea.michalczyk.pro/fixin.me/fixin.me' }
--- a/db/migrate/20230602185352_create_units.rb
+++ b/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
--- a/db/migrate/20250104194343_create_quantities.rb
+++ b/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

--- a/db/migrate/20250121230456_create_readouts.rb
+++ b/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

--- a/db/migrate/20260402000000_add_taken_at_to_readouts.rb
+++ b/db/migrate/20260402000000_add_taken_at_to_readouts.rb
@@ -0,0 +1,5 @@
+class AddTakenAtToReadouts < ActiveRecord::Migration[7.2]
+  def change
+    add_column :readouts, :taken_at, :datetime
+  end
+end
--- a/db/migrate/20260403000000_add_default_unit_to_quantities.rb
+++ b/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
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.

-ActiveRecord::Schema[7.2].define(version: 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,6 +34,7 @@ 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"
@@ -69,11 +72,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
--- a/db/seeds/templates/units.erb
+++ b/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? %>
--- a/db/seeds/units.rb
+++ b/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 = {}

--- a/test/application_system_test_case.rb
+++ b/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
--- a/test/controllers/measurements_controller_test.rb
+++ b/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
--- a/test/system/measurements_test.rb
+++ b/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
--- a/test/system/quantities_test.rb
+++ b/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
--- a/test/system/units_test.rb
+++ b/test/system/units_test.rb
@@ -6,14 +6,14 @@ require "application_system_test_case"
 #  * user with no units

 class UnitsTest < ApplicationSystemTestCase
-  LINK_LABELS = {
-    new_unit: t('units.index.new_unit'),
-    new_subunit: t('units.unit.new_subunit'),
-    edit: nil
-  }
+  LINK_LABELS = {}

  setup do
    @user = sign_in
+
+    LINK_LABELS.clear
+    LINK_LABELS[:new_unit] = t('units.index.new_unit')
+    LINK_LABELS[:new_subunit] = t('units.unit.new_subunit')
    LINK_LABELS[:edit] = Regexp.union(@user.units.map(&:symbol))

    visit units_path
@@ -26,7 +26,7 @@ class UnitsTest < ApplicationSystemTestCase
    end

    # Cannot #destroy_all due to {dependent: :restrict*} on Unit.subunits association
-    @user.units.order(Unit.arel_table[:base_id].eq(nil)).delete_all
+    @user.units.delete_all
    visit units_path
    within 'tbody' do
      assert_selector 'tr', count: 1
--- a/test/system/users_test.rb
+++ b/test/system/users_test.rb
@@ -5,19 +5,32 @@ class UsersTest < ApplicationSystemTestCase
    @admin = users(:admin)
  end

-  test "sign in" do
+  test 'sign in' do
+    visit root_url
+    assert find_link(href: new_user_session_path)[:disabled]
+
    sign_in
    assert_no_current_path new_user_session_path
-    assert_text t("devise.sessions.signed_in")
+    assert_text t('devise.sessions.signed_in')
  end

-  test "sign in fails with invalid password" do
-    sign_in password: random_password
+  test 'sign in fails with invalid credentials' do
+    label = User.human_attribute_name(:email)
+    # Both: valid and invalid emails should give the same (paranoid) error message.
+    email = [users.sample.email, random_email].sample
+
+    visit root_url
+    fill_in label, with: email
+    fill_in User.human_attribute_name(:password), with: random_password
+    click_on t(:sign_in)
+
    assert_current_path new_user_session_path
-    assert_text t("devise.failure.invalid", authentication_keys: User.human_attribute_name(:email))
+    assert_text t('devise.failure.invalid', authentication_keys: label.downcase_first)
+    assert find_link(href: new_user_session_path)[:disabled]
+    assert has_field?(label, with: email)
  end

-  test "sign out" do
+  test 'sign out' do
    sign_in
    visit root_url
    click_on t("layouts.application.sign_out")
@@ -25,79 +38,106 @@ class UsersTest < ApplicationSystemTestCase
    assert_text t("devise.sessions.signed_out")
  end

-  test "recover password" do
-    visit new_user_session_url
-    click_on t(:recover_password)
+  test 'recover password' do
+    label = User.human_attribute_name(:email)
+    email = users.select(&:confirmed?).sample.email
+
+    visit root_url
+    fill_in label, with: email
+    # Form validations should allow empty password.
+    assert has_field?(User.human_attribute_name(:password), with: nil)

-    fill_in User.human_attribute_name(:email).capitalize,
-      with: users.select(&:confirmed?).sample.email
    assert_emails 1 do
      click_on t(:recover_password)
-      # Wait until redirected to make sure async request has been processed
      assert_current_path new_user_session_path
+      # Wait for flash message to make sure async request has been processed.
+      assert_text t("devise.passwords.send_paranoid_instructions")
    end
-    assert_text t("devise.passwords.send_instructions")
+    assert has_field?(label, with: email)

    with_last_email do |mail|
      visit Capybara.string(mail.body.to_s).find_link("Change my password")[:href]
+      assert_current_path edit_user_password_path, ignore_query: true
+      # Make sure flash message is not displayed twice.
+      assert_no_text t("devise.passwords.send_paranoid_instructions")
    end
    new_password = random_password
-    fill_in t("users.passwords.edit.new_password"), with: new_password
-    fill_in t("users.passwords.edit.password_confirmation"), with: new_password
+    fill_in t("users.passwords.edit.password_html"), with: new_password
+    fill_in t("helpers.label.user.password_confirmation"), with: new_password
    assert_emails 1 do
      click_on t("users.passwords.edit.update_password")
-      # Wait until redirected to make sure async request has been processed
      assert_current_path units_path
-    end
      assert_text t("devise.passwords.updated")
    end
+  end

-  test "register" do
-    visit new_user_session_url
+  test 'recover password for nonexistent user' do
+    label = User.human_attribute_name(:email)
+    email = random_email
+
+    visit root_url
+    fill_in label, with: email
+
+    assert_no_emails do
+      click_on t(:recover_password)
+      assert_current_path new_user_session_path
+      assert_text t("devise.passwords.send_paranoid_instructions")
+    end
+  end
+
+  test 'register' do
+    visit root_url
    click_on t(:register)
+    assert find_link(href: new_user_registration_path)[:disabled]

-    fill_in User.human_attribute_name(:email).capitalize, with: random_email
+    fill_in User.human_attribute_name(:email), with: random_email
    password = random_password
-    fill_in User.human_attribute_name(:password).capitalize, with: password
-    fill_in t("users.registrations.new.password_confirmation"), with: password
-    assert_difference ->{User.count}, 1 do
+    fill_in User.human_attribute_name(:password), with: password
+    fill_in t("users.profiles.new.password_confirmation"), with: password
+    assert_difference ->{ User.count }, 1 do
      assert_emails 1 do
        click_on t(:register)
-        # Wait until redirected to make sure async request has been processed
        assert_current_path new_user_session_path
-      end
-    end
        assert_text t("devise.registrations.signed_up_but_unconfirmed")
+      end
+    end

+    assert_changes ->{ User.last.confirmed? }, from: false, to: true do
      with_last_email do |mail|
        visit Capybara.string(mail.body.to_s).find_link("Confirm my account")[:href]
-    end
        assert_current_path new_user_session_path
        assert_text t("devise.confirmations.confirmed")
-    assert User.last.confirmed?
+      end
+    end
  end

-  test "resend confirmation" do
-    visit new_user_session_url
-    click_on t(:register)
-    click_on t(:resend_confirmation)
+  test 'resend confirmation' do
+    label = User.human_attribute_name(:email)
+    user = users.reject(&:confirmed?).sample
+
+    visit root_url
+    click_on t(:register)
+    fill_in label, with: user.email
+    assert has_field?(User.human_attribute_name(:password), with: nil)

-    fill_in User.human_attribute_name(:email).capitalize,
-      with: users.reject(&:confirmed?).sample.email
    assert_emails 1 do
      click_on t(:resend_confirmation)
-      # Wait until redirected to make sure async request has been processed
-      assert_current_path new_user_session_path
+      assert_current_path new_user_registration_path
+      assert_text t("devise.confirmations.send_paranoid_instructions")
    end
-    assert_current_path new_user_session_path
-    assert_text t("devise.confirmations.send_instructions")
+    assert has_field?(label, with: user.email)

+    assert_changes ->{ user.reload.confirmed? }, from: false, to: true do
      with_last_email do |mail|
        visit Capybara.string(mail.body.to_s).find_link("Confirm my account")[:href]
+        assert_current_path new_user_session_path
+        assert_no_text t("devise.confirmations.send_paranoid_instructions")
+        assert_text t("devise.confirmations.confirmed")
+      end
    end
  end

-  test "show profile" do
+  test 'show profile' do
    sign_in user: users.select(&:admin?).select(&:confirmed?).sample
    click_on t("users.navigation")
    within all('tr').drop(1).sample do |tr|
@@ -107,7 +147,7 @@ class UsersTest < ApplicationSystemTestCase
    end
  end

-  test "disguise" do
+  test 'disguise' do
    user = users.select(&:admin?).select(&:confirmed?).sample
    sign_in user: user

@@ -123,7 +163,7 @@ class UsersTest < ApplicationSystemTestCase
    assert_link user.email
  end

-  test "disguise fails for admin when disallowed" do
+  test 'disguise fails for admin when disallowed' do
    user = users.select(&:admin?).select(&:confirmed?).sample
    sign_in user: user

@@ -136,13 +176,13 @@ class UsersTest < ApplicationSystemTestCase
    assert_title 'The change you wanted was rejected (422)'
  end

-  test "disguise forbidden for non admin" do
+  test 'disguise forbidden for non admin' do
    sign_in user: users.reject(&:admin?).select(&:confirmed?).sample
    visit disguise_user_path(User.all.sample)
    assert_title 'Access is forbidden to this page (403)'
  end

-  test "delete profile" do
+  test 'delete profile' do
    user = sign_in
    # TODO: remove condition after root_url changed to different path than
    # profile in routes.rb
@@ -150,22 +190,23 @@ class UsersTest < ApplicationSystemTestCase
      first(:link_or_button, user.email).click
    end
    assert_difference ->{ User.count }, -1 do
-      accept_confirm { click_on t("users.registrations.edit.delete") }
-    end
+      accept_confirm { click_on t("users.profiles.edit.delete") }
      assert_current_path new_user_session_path
    end
+    assert_text t("devise.registrations.destroyed")
+  end

-  test "index forbidden for non admin" do
+  test 'index forbidden for non admin' do
    sign_in user: users.reject(&:admin?).select(&:confirmed?).sample
    visit users_path
    assert_title "Access is forbidden to this page (403)"
  end

-  test "update profile" do
+  test 'update profile' do
    # TODO
  end

-  test "update status" do
+  test 'update status' do
    sign_in user: users.select(&:admin?).select(&:confirmed?).sample
    visit users_path

@@ -180,7 +221,7 @@ class UsersTest < ApplicationSystemTestCase
    assert_current_path users_path
  end

-  test "update status fails for admin when disallowed" do
+  test 'update status fails for admin when disallowed' do
    sign_in user: users.select(&:admin?).select(&:confirmed?).sample
    visit users_path

@@ -188,12 +229,12 @@ class UsersTest < ApplicationSystemTestCase
      user = User.find_by_email!(first(:link).text)
      inject_button_to first('td:not(.link)'), "update status", user_path(user), method: :patch,
        params: {user: {status: User.statuses.keys.sample}}, data: {turbo: false}
-      click_on "update status"
+      execute_script("arguments[0].click()", find_button("update status"))
    end
    assert_title 'The change you wanted was rejected (422)'
  end

-  test "update status forbidden for non admin" do
+  test 'update status forbidden for non admin' do
    sign_in user: users.reject(&:admin?).select(&:confirmed?).sample
    visit units_path
    inject_button_to find('body'), "update status", user_path(User.all.sample), method: :patch,
Author	SHA1	Message	Date
barbie-bot	887d669f80	Remove duplicate disable/enable logic and fetch() calls readoutUnitChanged was manually setting disabled/aria-disabled/tabindex attributes — duplicating Turbo.StreamElement.prototype.disableElement/ enableElement which already exists for this purpose. Replace with calls to those methods. Also replace fetch() in setDefaultUnit and drop with form.requestSubmit() so Turbo handles CSRF, stream responses and lifecycle natively. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-04 13:08:21 +00:00
barbie-bot	366662a948	Replace JS-generated wide table with ERB partial and Turbo Streams - Add _wide_table.html.erb partial (server-rendered pivot table) - Add load_measurements helper in controller to prepare @wide_groups and @wide_quantities for all mutating actions - Update index view to render the wide_table partial in #measurements-wide - Add/update create, destroy, update turbo_stream views to refresh the wide table atomically after each mutation - Remove buildWideTable() and editMeasurementWide() from application.js - Fix create.turbo_stream.erb condition (empty readouts are vacuously all persisted) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-04 12:28:32 +00:00
barbie-bot	1bc75f5d40	Fix column header lookup fragility, add fetch error handling, add tests - Replace position-based column header lookup (ths[3]/ths[4]) with data-column attribute selectors — immune to column reordering - Add .catch() error handlers to editMeasurementWide and setDefaultUnit fetch calls so failures surface in the console instead of silently disappearing - Add MeasurementsController integration tests covering index auth, create with taken_at, empty-readout create, destroy, cross-user destroy isolation, and update Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-04 10:24:26 +00:00
barbie-bot	bfd427c9b2	Add wide view and inline editing to Measurements page The Measurements page gains a compact/wide view toggle (persisted in localStorage). The wide view is a pivot table: rows = time points, columns = quantity names (alphabetical), cells = value + delete button. Clicking a value in either view opens an inline edit panel (Turbo Stream) without leaving the page. The panel shows the quantity name, value input, unit selector, taken_at picker, and Update/Cancel buttons. Changes: - MeasurementsController: add edit/update actions; order by taken_at desc - measurements/index: compact table + wide container, view-toggle buttons - measurements/_readout: data-* attributes for JS pivot builder; edit link - measurements/_edit_panel, _edit_form, _edit_form_close, edit.turbo_stream, update.turbo_stream: inline edit views - application.js: groupMeasurements, buildWideTable (alphabetical cols), getMeasurementsView / setMeasurementsView, editMeasurementWide, readoutUnitChanged, setDefaultUnit - application.css: compact/wide visibility rules, .wide-cell flex layout, button.link reset, .items-table .form td alignment - Pictograms: view-rows.svg, view-columns.svg (view-toggle icons) - Locale: view_compact/view_wide toggle labels, edit link, update.success - Tests: system tests for compact inline edit and wide view edit panel Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-03 22:03:10 +00:00
barbie-bot	3702e24153	Add taken_at to readouts and default unit to quantities Readouts gain a taken_at timestamp (distinct from created_at) that records when the measurement was actually taken. Measurements are now ordered by taken_at descending. Quantities gain an optional default_unit association. When set, the unit is pre-selected in the measurement form. A "Set as default" button on the unit selector lets users update the default directly from the form. - Migrations: add taken_at (datetime) to readouts, add default_unit_id (fk → units) to quantities - Readout: expose taken_at in ATTRIBUTES permit-list - Quantity: add default_unit belongs_to, expose in ATTRIBUTES - QuantitiesController: load @user_units for form actions - Quantities views: add Default unit column and select to form - Readouts form: pre-select default unit; add "Set as default" button (readoutUnitChanged / setDefaultUnit wired up in a later commit) - Measurements form: default taken_at input to current time - ApplicationHelper: propagate :form option to html_options in builder - config/environments/test.rb: allow Capybara's dynamic host - Tests: system tests for default-unit UI on the Quantities page Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-03 22:01:52 +00:00
cryptogopher	d893e59293	Clean up and improve items-table styling Closes #9	2026-03-25 18:42:24 +01:00
cryptogopher	33004f62bd	Improve Measurement form layout and styling	2026-03-22 01:06:38 +01:00
cryptogopher	687e6fcdff	Drop Readout.value decimal type in favor of float	2026-03-19 20:30:16 +01:00
cryptogopher	5ed066ad18	Unify border/outline parameters order	2026-03-06 01:42:32 +01:00
cryptogopher	dde4e52f1b	Fix form elements styling on hover	2026-03-06 01:33:23 +01:00
cryptogopher	a9091d76a8	Merge styles of <a>.button/<button>/<input type="submit"> into .button Remove flash button Fix some multi-selector specificity differences	2026-03-04 17:13:11 +01:00
cryptogopher	4175d31b9d	Update and format comments	2026-03-03 01:31:44 +01:00
cryptogopher	c659201904	Make [disabled] and [hidden] styles !important	2026-03-03 01:14:12 +01:00
cryptogopher	83b064ef3c	Merge recover password/resend confirmation forms into sign in/register Closes #65, #66	2026-03-01 20:04:42 +01:00
cryptogopher	ea8bff9b3d	Bundle update to Rails 7.2.3, Devise 5	2026-02-26 02:39:11 +01:00
cryptogopher	80130fb7d1	Allow cascade delete Unit/Quantity Closes #32	2026-02-22 17:50:43 +01:00
cryptogopher	1ba7d29441	Update tests to match labeled form changes	2026-02-22 00:55:21 +01:00
cryptogopher	84945fa4b4	Simplify and improve labeled form	2026-02-22 00:53:18 +01:00
cryptogopher	675eb0aad8	Optimize styles; clean up <fieldset>	2026-02-03 15:33:37 +01:00
cryptogopher	bd1a664caa	Measurement form based on select-styled <details>	2026-01-31 17:22:09 +01:00
				`@@ -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>`