Back to single-select form w/ multiple select actions

DESIGN.md

@@ -1,34 +0,0 @@
-DESIGN
-======
-
-Below is a list of design decisions. The justification is to be consulted
-whenever a change is considered, to avoid regressions.
-
-### Data type for DB storage of numeric values (`decimal` vs `float`)
-
-* among database engines supported (by Rails), SQLite offers storage of
-  `decimal` data type with the lowest precision, equal to the precision of
-  `REAL` type (double precision float value, IEEE 754), but in a floating point
-  format,
-    * decimal types in other database engines offer greater precision, but store
-      data in a fixed point format,
-* biology-related values differ by several orders of magnitude; storing them in
-  fixed point format would only make sense if required precision would be
-  greater than that offered by floating point format,
-    * even then, fixed point would mean either bigger memory requirements or
-      worse precision for numbers close to scale limit,
-        * for a fixed point format to use the same 8 bytes of storage as IEEE
-          754, precision would need to be limited to 18 digits (4 bytes/9 digits)
-          and scale approximately half of that - 9,
-    * double precision floating point guarantees 15 digits of precision, which
-      is more than enough for all expected use cases,
-        * single precision floating point only guarntees 6 digits of precision,
-          which is estimated to be too low for some use cases (e.g. storing
-          latitude/longitude with a resolution grater than 100m)
-* double precision floating point (IEEE 754) is a standard that ensures
-  compatibility with all database engines,
-    * the same data format is used internally by Ruby as a `Float`; it
-      guarantees no conversions between storage and computation,
-    * as a standard with hardware implementations ensures both: computing
-      efficiency and hardware/3rd party library compatibility as opposed to Ruby
-      custom `BigDecimal` type

Gemfile

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

Gemfile.lock

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

app/assets/images/pictograms/alert-outline.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" id="icon" viewBox="0 0 24 24"><path d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16" /></svg>
+<svg xmlns="http://www.w3.org/2000/svg" id="icon" viewBox="0 0 24 24"><path fill="#ffffff" d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16" /></svg>

app/assets/images/pictograms/check-circle-outline.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" id="icon" viewBox="0 0 24 24"><path d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z" /></svg>
+<svg xmlns="http://www.w3.org/2000/svg" id="icon" viewBox="0 0 24 24"><path fill="#ffffff" d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z" /></svg>

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

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

app/assets/stylesheets/application.css

@@ -15,17 +15,6 @@
  *= 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>; <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. */
-/* TODO: review styles with multiple selectors and try to convert them to the same
- * specificity. */
 :root {
   --color-focus-gray: #f3f3f3;
   --color-border-gray: #dddddd;
@@ -57,213 +46,9 @@
 :focus-visible {
   outline: none;
 }
-/* NOTE: move to higher priority layer instead of using !important? */
-/* TODO: 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.
- */
-button,
-details,
-input,
-select,
-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,
-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;
-}
-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);
-}
-
-/* `.button`: button-styled <a>, <button>, <input type=submit>.
- * `.link`: any other <a>.
- * `.tab`: tab-styled <a>.
- */
-.button,
-.link,
-.tab {
-  cursor: pointer;
-  text-decoration: none;
-  white-space: nowrap;
-}
-.button,
-.tab {
-  align-items: center;
-  color: var(--color-gray);
-  display: flex;
-  fill: var(--color-gray);
-  font-weight: bold;
-}
-.button {
-  border: 1px solid var(--color-gray);
-  border-radius: 0.25em;
-  font-size: 0.8rem;
-  padding: 0.6em 0.5em;
-  width: fit-content;
-}
-[name=cancel],
-.auxiliary {
-  border-color: var(--color-border-gray);
-  color: var(--color-nav-gray);
-  fill: var(--color-nav-gray);
-}
-.button > svg,
-.tab > svg {
-  height: 1.4em;
-  width: 1.4em;
-}
-.button > svg:not(:last-child),
-.tab > svg:not(:last-child) {
-  margin-right: 0.2em;
-}
-.button:focus-visible,
-.tab:focus-visible,
-.tab:hover {
-  background-color: var(--color-focus-gray);
-}
-.button:hover {
-  background-color: var(--color-blue);
-  border-color: var(--color-blue);
-  color: white;
-  fill: white;
-}
-.dangerous:hover {
-  background-color: var(--color-red);
-  border-color: var(--color-red);
-}
-table .button {
-  border-color: var(--color-border-gray);
-  color: var(--color-table-gray);
-  font-weight: normal;
-  height: 100%;
-  padding: 0.4em;
-}
-/* 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. */
-/* TODO: apply link class to non-button/-tab links. Add light underscore for links? */
-input[type=text]:read-only,
-textarea:read-only {
-  border: none;
-  padding-inline: 0;
-}
-
-
-/* NOTE: collapse gaps around empty rows (`topside`) once possible with
- * `grid-collapse` property and remove alternative `grid-template-areas`.
+/* TODO: collapse gaps around empty rows (`topside`) once possible
  * https://github.com/w3c/csswg-drafts/issues/5813 */
 body {
   display: grid;
@@ -273,21 +58,176 @@ body {
     "nav       nav     nav"
     "leftside  topside rightside"
     "leftside  main    rightside";
-  grid-template-columns: 1fr minmax(max-content, 2fr) 1fr;
+  grid-template-columns: 1fr auto 1fr;
+  grid-template-rows: repeat(4, auto);
   font-family: system-ui;
   margin: 0.4em;
 }
-body:not(:has(.topside-area)) {
-  grid-template-areas:
-    "header    header  header"
-    "nav       nav     nav"
-    "leftside  main    rightside";
+button,
+input,
+select,
+textarea {
+  background-color: inherit;
+  font: inherit;
 }
+input,
+select {
+  text-align: inherit;
+}
+
+
+/* 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] {
+  cursor: pointer;
+  text-decoration: none;
+  white-space: nowrap;
+}
+/* [hidden] submit controls cannot have `display` set as it makes them visible */
+.button,
+button:not([hidden]),
+input[type=submit]:not([hidden]),
+.tab {
+  align-items: center;
+  color: var(--color-gray);
+  display: flex;
+  fill: var(--color-gray);
+  font-weight: bold;
+}
+.button,
+button,
+input[type=submit] {
+  font-size: 0.8rem;
+  padding: 0.4em;
+  width: fit-content;
+}
+input:not([type=submit]):not([type=checkbox]),
+select,
+textarea {
+  padding: 0.2em 0.4em;
+}
+.button,
+button,
+input,
+select,
+textarea {
+  border: solid 1px var(--color-gray);
+  border-radius: 0.25em;
+}
+fieldset,
+textarea {
+  margin: 0
+}
+.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 {
+  background-color: var(--color-focus-gray);
+}
+.button:hover,
+button:hover,
+input[type=submit]:hover {
+  background-color: var(--color-blue);
+  border-color: var(--color-blue);
+  color: white;
+  fill: white;
+}
+.dangerous: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;
+}
+input[type=checkbox]:checked {
+  appearance: checkbox;
+  -webkit-appearance: checkbox;
+}
+/* Hide spin buttons in input number fields */
+input[type=number] {
+  appearance: textfield;
+  -moz-appearance: textfield;
+}
+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;
+}
+
 
 header {
   grid-area: header;
 }
 
+
 .navigation {
   display: flex;
   grid-area: nav;
@@ -296,31 +236,37 @@ header {
   margin-inline-start: 4%;
 }
 .navigation > .tab {
-  border-bottom: 2px solid var(--color-nav-gray);
+  border-bottom: solid 2px var(--color-nav-gray);
   flex: 1;
   font-size: 1rem;
   justify-content: center;
-  padding-block: 0.4em;
+  padding-block: 0.3em;
+}
+.navigation > .tab:hover,
+.navigation > .tab:focus-visible {
+  background-color: var(--color-focus-gray);
 }
 .navigation > .tab.active {
-  border-bottom: 4px solid var(--color-blue);
+  border-bottom: solid 4px var(--color-blue);
   color: var(--color-blue);
   fill: var(--color-blue);
 }
 
-.topside-area {
+
+.topside {
   grid-area: topside;
 }
-.leftside-area {
+.leftside {
   grid-area: leftside;
 }
-.main-area {
+.main {
   grid-area: main;
 }
-.rightside-area {
+.rightside {
   grid-area: rightside;
 }
 
+
 .buttongrid {
   display: grid;
   gap: 0.4em;
@@ -328,14 +274,14 @@ header {
   grid-template-columns: auto 1fr auto;
   grid-template-rows: max-content;
 }
-.tools-area {
+.tools {
   grid-area: tools;
 }
 
 
 #flashes {
   display: grid;
-  row-gap: 0.4em;
+  gap: 0.2em;
   grid-template-columns: 1fr auto auto auto 1fr;
   left: 0;
   pointer-events: none;
@@ -351,17 +297,13 @@ header {
   display: grid;
   grid-column: 2/5;
   grid-template-columns: subgrid;
-  line-height: 2.2em;
   pointer-events: auto;
 }
-.flash:before {
-  filter: invert();
-  height: 1.4em;
-  margin: 0 0.5em;
-  width: 1.4em;
-}
 .flash.alert:before {
   content: url('pictograms/alert-outline.svg');
+  height: 1.4em;
+  margin: 0 0.5em;
+  width: 1.4em;
 }
 .flash.alert {
   border-color: var(--color-red);
@@ -369,201 +311,244 @@ header {
 }
 .flash.notice:before {
   content: url('pictograms/check-circle-outline.svg');
+  height: 1.4em;
+  margin: 0 0.5em;
+  width: 1.4em;
 }
 .flash.notice {
   border-color: var(--color-blue);
   background-color: var(--color-blue);
 }
-.flash svg {
-  cursor: pointer;
-  fill: white;
-  height: 2.2em;
-  opacity: 0.6;
-  padding: 0.4em 0.5em;
-  width: 2.4em;
+.flash > div {
+  grid-column: 2;
 }
-.flash svg:hover {
+/* NOTE: currently flash button inherits some unnecessary styles from generic
+ * button. */
+.flash > button {
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  font-size: 1.4em;
+  font-weight: bold;
+  grid-column: 3;
+  opacity: 0.6;
+  padding: 0.2em 0.4em;
+}
+.flash > button:hover {
   opacity: 1;
 }
 
 
-.labeled-form {
-  align-items: center;
-  display: grid;
-  gap: 0.9em 1.1em;
-  grid-template-columns: 1fr minmax(max-content, 0.5fr) 1fr;
+/* TODO: Update styling, including rem removal. */
+form table {
+  border-spacing: 0.8rem;
 }
-.labeled-form label {
+form tr td:first-child {
   color: var(--color-gray);
   font-size: 0.9rem;
-  grid-column: 1;
+  padding-right: 0.25rem;
   text-align: right;
-  white-space: nowrap;
 }
-.labeled-form label.required {
+form label.required {
   font-weight: bold;
 }
-/* Don't style `label.error + input` if case already covered by `input:invalid`. */
-.labeled-form label.error {
+form label.error,
+form td.error::after {
   color: var(--color-red);
 }
-.labeled-form em {
+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 {
   color: var(--color-text-gray);
   font-size: 0.75rem;
   font-weight: normal;
 }
-.labeled-form input {
-  grid-column: 2;
-}
-.labeled-form input[type=submit] {
+form input[type=submit] {
+  float: none;
   font-size: 1rem;
-  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;
-}
-.tabular-form table td {
-  border: none;
-  text-align: left;
-  vertical-align: middle;
-}
-.tabular-form table td:first-child {
-  color: inherit;
+  margin: 1.5rem auto 0 auto;
+  padding: 0.75rem;
 }
 
 
-.items-table {
+table.items {
   border-spacing: 0;
-  border: 1px solid var(--color-border-gray);
+  border: solid 1px var(--color-border-gray);
   border-radius: 0.25em;
   font-size: 0.85rem;
   text-align: left;
 }
-.items-table thead {
+table.items thead {
   font-size: 0.8rem;
 }
-.items-table thead,
-.items-table tbody tr:hover {
+table.items thead,
+table.items tbody tr:hover {
   background-color: var(--color-focus-gray);
 }
-.items-table th {
+table.items th {
   padding-block: 0.75em;
   text-align: center;
 }
-.items-table th,
-.items-table td {
+table.items th,
+table.items td {
   padding-inline: 1em 0;
 }
-/* For <a> to fill <td> completely, we use an `::after` pseudoelement. */
-.items-table td.link {
+/* For <a> to fill <td> completely, we use an ::after pseudoelement. */
+table.items td.link {
   padding: 0;
   position: relative;
 }
-.items-table td.link a {
+table.items td.link a {
   color: inherit;
   font: inherit;
 }
-.items-table td.link a::after {
+table.items td.link a::after {
   content: '';
   inset: 0;
   position: absolute;
 }
-.items-table td:first-child {
+table.items td:first-child {
   padding-inline-start: calc(1em + var(--depth) * 0.8em);
 }
-.items-table td:has(input, select, textarea) {
+table.items td:has(input, select, textarea) {
   padding-inline-start: calc(0.6em - 0.9px);
 }
-.items-table td:first-child:has(input, select, textarea) {
+table.items td:first-child:has(input, select, textarea) {
   padding-inline-start: calc(0.6em + var(--depth) * 0.8em - 0.9px);
 }
-.items-table th:last-child {
+table.items th:last-child {
   padding-inline-end: 0.4em;
 }
-.items-table td:last-child {
+table.items td:last-child {
   padding-inline-end: 0.1em;
 }
-.items-table td {
-  border-top: 1px solid var(--color-border-gray);
+table.items td {
+  border-top: solid 1px var(--color-border-gray);
   height: 2.4em;
   padding-block: 0.1em;
 }
-.items-table .actions {
+table.items .actions {
   display: flex;
   gap: 0.4em;
   justify-content: end;
 }
-.items-table .actions.centered {
+table.items .actions.centered {
   justify-content: center;
 }
-.items-table tr.dropzone {
+table.items tr.dropzone {
   position: relative;
 }
-.items-table tr.dropzone::after {
+table.items tr.dropzone::after {
   content: '';
   inset: 1px 0 0 0;
   position: absolute;
-  outline: 2px dashed var(--color-blue);
+  outline: dashed 2px var(--color-blue);
   outline-offset: -1px;
   z-index: var(--z-index-table-row-outline);
 }
-.items-table td.handle {
+table.items td.handle {
   cursor: move;
 }
-.items-table tr.form td {
+table.items tr.form td {
   vertical-align: top;
 }
 
-/* TODO: replace `:hover:focus-visible` combos with proper LOVE style order. */
-/* TODO: update table styling: simplify selectors, deduplicate, remove non-font rem. */
-.items-table td.link a:hover,
-.items-table td.link a:focus-visible,
-.items-table td.link a:hover:focus-visible {
+/* 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;
 }
-.items-table td.link a:hover {
+table.items td.link a:hover {
   color: var(--color-blue);
 }
-.items-table td.link a:focus-visible {
+table.items td.link a:focus-visible {
   text-decoration-color: var(--color-gray);
 }
-.items-table td.link a:hover:focus-visible {
+table.items td.link a:hover:focus-visible {
   color: var(--color-dark-blue);
 }
 
-.items-table td:not(:first-child),
+table.items td:not(:first-child),
 .grayed {
   color: var(--color-table-gray);
   fill: var(--color-table-gray);
 }
-.items-table svg {
-  height: 1rem;
-  vertical-align: middle;
-  width: 1rem;
+table.items td.hint {
+  color: var(--color-table-gray);
+  font-style: italic;
+  font-size: 0.8rem;
+  padding: 1em;
 }
-.items-table svg:last-child {
+table.items svg {
   height: 1.2rem;
+  vertical-align: middle;
   width: 1.2rem;
 }
-.items-table td.svg {
+table.items td.svg {
   text-align: center;
 }
-.items-table td.number {
+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 {
   margin: 0 auto;
@@ -571,114 +556,25 @@ header {
 .extendedright {
   margin-right: auto;
 }
-.hexpand {
-  width: 100%;
-}
 .hflex {
   display: flex;
   gap: 0.8em;
 }
-.hflex.reverse {
-  flex-direction: row-reverse;
-}
 .hflex.centered {
   justify-content: center;
 }
-.hint {
-  color: var(--color-table-gray);
-  font-style: italic;
-  font-size: 0.9rem;
-  text-align: center;
-}
-.hmin50 {
-  min-width: 50%;
-}
-.italic {
-  color: var(--color-gray);
-  font-style: italic;
-}
 .vflex {
   display: flex;
   gap: 0.8em;
   flex-direction: column;
 }
-
-
-details {
-  align-content: center;
-  position: relative;
+[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;
 }
-summary {
-  align-items: center;
-  color: var(--color-gray);
-  display: flex;
-  gap: 0.4em;
-  height: 100%;
+.unwrappable {
   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: 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: '';
-}
-
-#measurement_form {
-  min-width: 66%;
-  width: max-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.
- * */

app/controllers/application_controller.rb

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

app/controllers/readouts_controller.rb

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

app/controllers/registrations_controller.rb

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

app/controllers/users_controller.rb

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

app/helpers/application_helper.rb

@@ -1,85 +1,59 @@
 module ApplicationHelper
-  class LabeledFormBuilder < ActionView::Helpers::FormBuilder
-    (field_helpers - [:label, :hidden_field]).each do |selector|
+  # TODO: replace legacy content_tag with tag.tagname
+  class LabelledFormBuilder < ActionView::Helpers::FormBuilder
+    (field_helpers - [:label]).each do |selector|
       class_eval <<-RUBY_EVAL, __FILE__, __LINE__ + 1
         def #{selector}(method, options = {})
-          labeled_field_for(method, options) { super }
+          labelled_row_for(method, options) { super }
         end
       RUBY_EVAL
     end
 
     def select(method, choices = nil, options = {}, html_options = {})
-      labeled_field_for(method, options) { super }
+      labelled_row_for(method, options) { super }
     end
 
-    def submit(value = nil, options = {})
-      value, options = nil, value if value.is_a?(Hash)
-      options[:class] = @template.class_names('button', options[:class])
-      super
+    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)))
     end
 
     private
 
-    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
+    def labelled_row_for(method, options)
+      @template.content_tag :tr do
+        @template.content_tag(:td, label_for(method, options), class: "unwrappable") +
+        @template.content_tag(:td, options.delete(:readonly) ? @object.public_send(method) : yield,
+          @object&.errors[method].present? ?
+            {class: "error", data: {content: @object&.errors.delete(method).join(" and ")}} :
+            {})
       end
-      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?)
+                                      error: @object&.errors[method].present?)
+      label = label(method, "#{text}:", class: classes)
+      hint = options.delete(: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}:"
+      label + (@template.tag(:br) + @template.content_tag(:em, hint) if hint)
     end
   end
 
-    def interpolation_missing(key, values, string)
-      @template.instance_values[key.to_s] || deep_translate(key, **values)
-    end
-
-    # Extension to label text translation:
-    # * recursive translation,
-    # * interpolation of (_relative_) translation key names and instance variables,
-    # * pluralization based on any interpolable value
-    # TODO: add unit tests for the above
-    def deep_translate(key, **options)
-      options[:default] = [
-        :".#{key}",
-        :"helpers.label.#{@object_name}.#{key}_html",
-        :"helpers.label.#{@object_name}.#{key}",
-        ""
-      ]
-
-      # At least 1 interpolation key is required for #translate to act on
-      # missing interpolation arguments (i.e. call custom handler).
-      # Also setting `key` to nil avoids recurrent translation.
-      options[key] = nil
-
-      @template.t(".#{key}_html", **options) do |translation, resolved_key|
-        if translation.is_a?(Array) && (count = translation.to_h[:count])
-          @template.t(resolved_key, count: I18n.interpolate(count, **options), **options)
-        else
-          translation
-        end
-      end
-    end
-  end
-
-  def labeled_form_for(record, options = {}, &block)
-    extra_options = {builder: LabeledFormBuilder, html: {class: 'labeled-form'}}
-    form_for(record, **merge_attributes(options, extra_options), &block)
+  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) }
   end
 
   class TabularFormBuilder < ActionView::Helpers::FormBuilder
@@ -101,29 +75,22 @@ module ApplicationHelper
     end
 
     def number_field(method, options = {})
-      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) -
+      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) -
           options[:step]
         options[:min] = options[:min] == :step ? options[:step] : options[:min]
         options[:min] ||= -options[:max]
-        options[:size] ||= attr_type.precision / 2
-      when :float
-        options[:size] ||= 6
       end
       super
     end
 
     def button(value = nil, options = {}, &block)
-      # #button does not use #objectify_options/@default_options
-      value, options = nil, value if value.is_a?(Hash)
-      options = options.merge(
-        @default_options.slice(:form),
-        class: @template.class_names('button', options[:class])
-      )
+      # button does not use #objectify_options
+      options.merge!(@options.slice(:form))
       super
     end
 
@@ -144,22 +111,19 @@ 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)
-    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?
+    options.merge!(builder: TabularFormBuilder, skip_default_ids: true)
     render_errors(record_object || record_name)
     fields_for(record_name, record_object, **options, &block)
   end
 
   def tabular_form_with(**options, &block)
-    extra_options = {builder: TabularFormBuilder, class: 'tabular-form',
-                     html: {autocomplete: 'off'}}
-    form_with(**merge_attributes(options, extra_options), &block)
+    options = options.deep_merge(builder: TabularFormBuilder,
+                                 html: {autocomplete: 'off'})
+    form_with(**options, &block)
   end
 
   def svg_tag(source, label = nil, options = {})
-    label, options = nil, label if label.is_a? Hash
-    svg_tag = tag.svg(**options) do
+    svg_tag = content_tag :svg, options do
       tag.use(href: "#{image_path(source + ".svg")}#icon")
     end
     label.blank? ? svg_tag : svg_tag + tag.span(label)
@@ -170,7 +134,6 @@ 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],
     ]
 
@@ -208,28 +171,21 @@ 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)
-    # 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
+    html_options = html_options.deep_merge DISABLED_ATTRIBUTES if current_page?(options)
     link_to name, options, html_options
   end
 
   def render_errors(records)
-    # Conversion of flash to Array only required because of Devise
-    # TODO: override Devise message setting to Array()?
-    flash[:alert] = Array(flash[:alert])
+    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.span(sanitize(message)) +
-            svg_tag('pictograms/close-outline', {onclick: "this.parentElement.remove()"})
+          tag.div(sanitize(message)) + tag.button(sanitize("&times;"), tabindex: -1,
+                                                  onclick: "this.parentElement.remove();")
         end
       end
     end.join.html_safe
@@ -248,6 +204,8 @@ 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',
@@ -258,18 +216,10 @@ module ApplicationHelper
       html_options[:onclick] = "return confirm('\#{html_options[:onclick][:confirm]}');"
     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
+    if type == :link && !(html_options[:onclick] || html_options.dig(:data, :turbo_stream))
+      name += '...'
+    end
 
     [name, html_options]
   end
-
-  # Like Hash#deep_merge, but aware of HTML attributes.
-  def merge_attributes(left, right)
-    left.deep_merge(right) do |key, lvalue, rvalue|
-      key == :class ? class_names(lvalue, rvalue) : rvalue
-    end
-  end
 end

app/helpers/quantities_helper.rb

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

app/javascript/application.js

@@ -9,82 +9,31 @@ function showPage(event) {
 }
 document.addEventListener('turbo:load', showPage)
 
-function detailsChange(event) {
-  var target = event.currentTarget
-  var count = target.querySelectorAll('input:checked:not([disabled])').length
-  var span = target.querySelector('summary > span')
-  var button = target.querySelector('button')
-  if (count > 0) {
-    span.textContent = count + ' selected';
-    Turbo.StreamElement.prototype.enableElement(button)
-  } else {
-    span.textContent = span.getAttribute('data-prompt')
-    Turbo.StreamElement.prototype.disableElement(button)
-  }
-}
-window.detailsChange = detailsChange
-
-/* Close open <details> when focus lost */
-function detailsClose(event) {
-  if (!event.relatedTarget ||
-      event.relatedTarget.closest("details") != event.currentTarget) {
-    event.currentTarget.removeAttribute("open")
-  }
-}
-window.detailsClose = detailsClose
-
-window.detailsObserver = new MutationObserver((mutations) => {
-  mutations[0].target.dispatchEvent(new Event('change', {bubbles: true}))
-});
-
-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")
-    // Assume 'tabindex' is not used explicitly, so removing it is safe
+    // '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 */
@@ -105,63 +54,28 @@ Turbo.StreamActions.close_form = function() {
   })
 }
 
-Turbo.StreamActions.unselect = function() {
-  this.targetElements.forEach((e) => {
-    e.checked = false
-    this.enableElement(e)
-  })
-}
-
-function formProcessKey(event) {
-  switch (event.key) {
-    case "Escape":
-      event.currentTarget.querySelector("a[name=cancel]").click()
-      break
-    case "Enter":
-      event.currentTarget.querySelector("button[name=button]").click()
-      event.preventDefault()
-      break
-  }
-}
-window.formProcessKey = formProcessKey
-
-function detailsProcessKey(event) {
-  // TODO: up/down arrows to move focus to prev/next line
-  switch (event.key) {
-    case "Escape":
-      if (event.currentTarget.hasAttribute("open")) {
-        event.currentTarget.removeAttribute("open")
-        event.stopPropagation()
-      }
-      break
-    case "Enter":
-      var button = event.currentTarget.querySelector("button:not([disabled])")
-      if (button) {
-        button.click()
-        // Autofocus won't be respected unless target is blurred
-        event.target.blur()
-        event.preventDefault()
-        event.stopPropagation()
-      }
-      break
-  }
-}
-window.detailsProcessKey = detailsProcessKey;
 
 /* Items table drag and drop support */
-var lastEnterTime
-function dragStart(event) {
-  lastEnterTime = event.timeStamp
-  var row = event.currentTarget
-  row.closest("table").querySelectorAll("thead tr").forEach((tr) => {
-    tr.toggleAttribute("hidden")
-  })
-  event.dataTransfer.setData("text/plain", row.getAttribute("data-drag-path"))
-  var rowRectangle = row.getBoundingClientRect()
-  event.dataTransfer.setDragImage(row, event.x - rowRectangle.left, event.y - rowRectangle.top)
-  event.dataTransfer.dropEffect = "move"
+function processKey(event) {
+  if (event.key == "Escape") {
+    event.currentTarget.querySelector("a[name=cancel]").click();
+  }
 }
-window.dragStart = dragStart
+window.processKey = processKey;
+
+var lastEnterTime;
+function dragStart(event) {
+  lastEnterTime = event.timeStamp;
+  var row = event.currentTarget;
+  row.closest("table").querySelectorAll("thead tr").forEach((tr) => {
+    tr.toggleAttribute("hidden");
+  });
+  event.dataTransfer.setData("text/plain", row.getAttribute("data-drag-path"));
+  var rowRectangle = row.getBoundingClientRect();
+  event.dataTransfer.setDragImage(row, event.x - rowRectangle.left, event.y - rowRectangle.top);
+  event.dataTransfer.dropEffect = "move";
+}
+window.dragStart = dragStart;
 
 /*
 * Drag tracking assumptions (based on FF 122.0 experience):
@@ -173,44 +87,44 @@ window.dragStart = dragStart
 * and outside. This should probably be fixed in browser, than patched here.
 */
 function dragEnter(event) {
-  //console.log(event.timeStamp + " " + event.type + ": " + event.currentTarget.id)
-  dragLeave(event)
-  lastEnterTime = event.timeStamp
-  const id = event.currentTarget.getAttribute("data-drop-id")
-  document.getElementById(id).classList.add("dropzone")
+  //console.log(event.timeStamp + " " + event.type + ": " + event.currentTarget.id);
+  dragLeave(event);
+  lastEnterTime = event.timeStamp;
+  const id = event.currentTarget.getAttribute("data-drop-id");
+  document.getElementById(id).classList.add("dropzone");
 }
-window.dragEnter = dragEnter
+window.dragEnter = dragEnter;
 
 function dragOver(event) {
-  event.preventDefault()
+  event.preventDefault();
 }
-window.dragOver = dragOver
+window.dragOver = dragOver;
 
 function dragLeave(event) {
-  //console.log(event.timeStamp + " " + event.type + ": " + event.currentTarget.id)
+  //console.log(event.timeStamp + " " + event.type + ": " + event.currentTarget.id);
   // Leave has been accounted for by Enter at the same timestamp, processed earlier
-  if (event.timeStamp <= lastEnterTime) return
+  if (event.timeStamp <= lastEnterTime) return;
   event.currentTarget.closest("table").querySelectorAll(".dropzone").forEach((tr) => {
-    tr.classList.remove("dropzone")
-  })
+    tr.classList.remove("dropzone");
+  });
 }
-window.dragLeave = dragLeave
+window.dragLeave = dragLeave;
 
 function dragEnd(event) {
-  dragLeave(event)
+  dragLeave(event);
   event.currentTarget.closest("table").querySelectorAll("thead tr").forEach((tr) => {
-    tr.toggleAttribute("hidden")
-  })
+    tr.toggleAttribute("hidden");
+  });
 }
-window.dragEnd = dragEnd
+window.dragEnd = dragEnd;
 
 function drop(event) {
-  event.preventDefault()
+  event.preventDefault();
 
-  var params = new URLSearchParams()
-  var id_param = event.currentTarget.getAttribute("data-drop-id-param")
-  var id = event.currentTarget.getAttribute("data-drop-id").split("_").pop()
-  params.append(id_param, id)
+  var params = new URLSearchParams();
+  var id_param = event.currentTarget.getAttribute("data-drop-id-param");
+  var id = event.currentTarget.getAttribute("data-drop-id").split("_").pop();
+  params.append(id_param, id);
 
   fetch(event.dataTransfer.getData("text/plain"), {
     body: params,
@@ -224,4 +138,4 @@ function drop(event) {
   .then(response => response.text())
   .then(html => Turbo.renderStreamMessage(html))
 }
-window.drop = drop
+window.drop = drop;

app/models/quantity.rb

@@ -100,11 +100,6 @@ class Quantity < ApplicationRecord
     name
   end
 
-  def to_s_with_depth
-    # em space, U+2003
-    ' ' * depth + name
-  end
-
   def destroyable?
     subquantities.empty?
   end

app/models/unit.rb

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

app/models/user.rb

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

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

@@ -1,17 +1,16 @@
-<div class="rightside-area buttongrid">
+<div class="rightside 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-area' %>
+  <%= image_link_to t('.back'), 'arrow-left-bold-outline', units_path, class: 'tools' %>
 </div>
 
-<table class="main-area items-table">
+<table class="main items">
   <thead>
     <tr>
-      <th><%= Unit.human_attribute_name(:symbol) %></th>
+      <th><%= User.human_attribute_name(:symbol).capitalize %></th>
       <% if current_user.at_least(:active) %>
         <th><%= t '.actions' %></th>
       <% end %>

app/views/layouts/application.html.erb

@@ -47,7 +47,7 @@
       <%= render_flash_messages %>
     </div>
 
-    <%# Allows overwriting/clearing navigation menu for some views %>
+    <%# Allow overwriting/clearing navigation menu for some views %>
     <nav class="navigation">
       <%= content_for(:navigation) || (navigation_menu if user_signed_in?) %>
     </nav>

app/views/measurements/_form.html.erb

@@ -1,45 +1,40 @@
-<%= tabular_form_with model: Measurement.new, id: :measurement_form,
-  class: 'topside-area vflex centered',
-  html: {onkeydown: 'formProcessKey(event)'} do |form| %>
-
-  <table class="items-table centered">
+<%= 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">
       <tbody id="readouts">
-      <%= tabular_fields_for @measurement do |form| %>
-        <tr class="italic">
-          <td class="hexpand hmin50"><%= t '.taken_at_html' %></td>
-          <td colspan="3" class="number">
-            <%= form.datetime_field :taken_at, required: true %>
+        <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>
           </td>
         </tr>
-      <% end %>
       </tbody>
     </table>
-
-  <%# TODO: right-click selection; unnecessary with hierarchical tags? %>
-  <details id="quantity_select" class="centered 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="hflex reverse">
-    <%= form.button id: :create_measurement_button, disabled: true -%>
+  </fieldset>
+  <div class="hflex centered">
+    <%= form.button -%>
     <%= 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>

app/views/measurements/_form_close.html.erb

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

app/views/measurements/index.html.erb

@@ -1,5 +1,5 @@
 <%# TODO: show hint when no quantities/units defined %>
-<div class="rightside-area buttongrid">
+<div class="rightside 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();',
@@ -7,7 +7,9 @@
   <% end %>
 </div>
 
-<table class="main-area">
+<%= tag.div class: 'topside', id: :measurement_form %>
+
+<table class="main">
   <tbody id="measurements">
     <%= render(@measurements) || render_no_items %>
   </tbody>

app/views/measurements/new.turbo_stream.erb

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

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: "formProcessKey(event)",
+  <%- tag.tr id: row, class: "form", onkeydown: "processKey(event)",
     data: {link: link, form: form_tag, hidden_row: hidden_row} do %>
 
     <td style="--depth:<%= @quantity.depth %>">

app/views/quantities/index.html.erb

@@ -1,21 +1,20 @@
-<div class="rightside-area buttongrid">
+<div class="rightside buttongrid">
   <% if current_user.at_least(:active) %>
     <%= image_link_to t('.new_quantity'), 'plus-outline', new_quantity_path,
       id: dom_id(Quantity, :new, :link), onclick: 'this.blur();',
       data: {turbo_stream: true} %>
   <% end %>
   <%#= image_link_to t('.import_quantities'), 'download-outline', default_quantities_path,
-    class: 'tools-area' %>
+    class: 'tools' %>
 </div>
 
-<%# TODO: remove? form can be inserted directly, e.g. at the end of index %>
-<%= tag.div class: 'main-area', id: :quantity_form %>
+<%= tag.div class: 'main', id: :quantity_form %>
 
-<table class="main-area items-table">
+<table class="main items">
   <thead>
     <tr>
-      <th><%= Quantity.human_attribute_name(:name) %></th>
-      <th><%= Quantity.human_attribute_name(:description) %></th>
+      <th><%= Quantity.human_attribute_name(:name).capitalize %></th>
+      <th><%= Quantity.human_attribute_name(:description).capitalize %></th>
       <% if current_user.at_least(:active) %>
         <th><%= t :actions %></th>
         <th></th>

app/views/readouts/_form.html.erb

@@ -1,22 +1,20 @@
 <%# TODO: add readout reordering by dragging %>
 <%= tabular_fields_for 'readouts[]', readout do |form| %>
-  <%- tag.tr id: dom_id(readout.quantity, :new, :readout) do %>
+  <%- tag.tr id: dom_id(readout.quantity, :new, :readout),
+             onkeydown: 'processKey(event)' do %>
     <td>
-      <%# TODO: add grayed readout index (in separate column?) %>
       <%= readout.quantity.relative_pathname(@superquantity) %>
     </td>
     <td>
-      <%= form.number_field :value, required: true, autofocus: readout_counter == 0 %>
+      <%= 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) },
-        {prompt: '', disabled: '', selected: ''}, required: true %>
+        ->(u){ sanitize('&emsp;' * (u.base_id ? 1 : 0) + u.symbol) } %>
     </td>
     <td class="actions">
-      <%# TODO: change to _link_ after giving up displaying relative paths %>
-      <%= image_button_tag '', 'delete-outline', class: 'dangerous', name: nil,
+      <%= image_button_tag '', 'delete-outline', class: 'dangerous', name: :discard,
         formaction: discard_readouts_path(readout.quantity),
         formmethod: :get, formnovalidate: true, data: {turbo_stream: true} %>
     </td>

app/views/readouts/discard.turbo_stream.erb

@@ -1,4 +1,5 @@
-<%= 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) %>

app/views/readouts/new.turbo_stream.erb

@@ -1,8 +1,11 @@
-<% @readouts.each do |r| %>
-  <%= turbo_stream.disable dom_id(r.quantity) %>
-<% end %>
 <%= render partial: 'form_repath' %>
-<%= turbo_stream.append :readouts do %>
+<%= 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) %>
+<% end %>
+<%= turbo_stream.before :readouts_form do %>
   <%= render partial: 'form', collection: @readouts, as: :readout %>
 <% end %>
-<%= turbo_stream.enable :create_measurement_button if @prev_quantities.empty? %>

app/views/units/_form.html.erb

@@ -1,5 +1,5 @@
 <%= tabular_fields_for @unit, form: form_tag do |form| %>
-  <%- tag.tr id: row, class: "form", onkeydown: "formProcessKey(event)",
+  <%- tag.tr id: row, class: "form", onkeydown: "processKey(event)",
     data: {link: link, form: form_tag, hidden_row: hidden_row} do %>
 
     <td style="--depth:<%= @unit.base_id? ? 1 : 0 %>">

app/views/units/index.html.erb

@@ -1,21 +1,19 @@
-<div class="rightside-area buttongrid">
+<div class="rightside 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-area' %>
+  <%= image_link_to t('.import_units'), 'download-outline', default_units_path, class: 'tools' %>
 </div>
 
-<%# TODO: remove? form can be inserted directly, e.g. at the end of index %>
 <%= tag.div id: :unit_form %>
 
-<table class="main-area items-table">
+<table class="main items">
   <thead>
     <tr>
-      <th><%= Unit.human_attribute_name(:symbol) %></th>
-      <th><%= Unit.human_attribute_name(:description) %></th>
-      <th><%= Unit.human_attribute_name(:multiplier) %></th>
+      <th><%= User.human_attribute_name(:symbol).capitalize %></th>
+      <th><%= User.human_attribute_name(:description).capitalize %></th>
+      <th><%= User.human_attribute_name(:multiplier).capitalize %></th>
       <% if current_user.at_least(:active) %>
         <th><%= t :actions %></th>
         <th></th>

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

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

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

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

app/views/users/index.html.erb

@@ -1,10 +1,12 @@
-<table class="main-area items-table" id="users">
+<table class="main items" id="users">
   <thead>
     <tr>
-      <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><%= 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><%= t :actions %></th>
     </tr>
   </thead>
@@ -17,18 +19,18 @@
             <%= 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? %>
+          <%= svg_tag "pictograms/checkbox-marked-outline" if user.confirmed_at.present? %>
         </td>
-        <td><%= l user.created_at, format: :without_tz %></td>
+        <td><%= user.created_at.to_fs(:db_without_sec) %></td>
         <td class="actions">
           <% if allow_disguise?(user) %>
-            <%= image_link_to t('.disguise'), 'incognito', disguise_user_path(user) %>
+            <%= image_link_to t(".disguise"), "incognito", disguise_user_path(user) %>
           <% end %>
         </td>
       </tr>

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

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

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

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

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

@@ -1,12 +1,13 @@
-<%= labeled_form_for resource, url: user_password_path,
-  html: {method: :put, class: 'main-area', data: {turbo: false}} do |f| %>
+<div class="main">
+  <%= labelled_form_for resource, url: user_password_path, html: {method: :put} do |f| %>
+    <%= f.hidden_field :reset_password_token, label: false %>
 
-  <%= f.hidden_field :reset_password_token %>
+    <%= 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.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 %>
+    <%= f.submit t(".update_password") %>
+  <% end %>
+</div>

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

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

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

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

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

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

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

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

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

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

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

@@ -1,19 +1,17 @@
-<%= 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' %>
+<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" %>
 
     <% if devise_mapping.rememberable? %>
-    <%= f.check_box :remember_me %>
+      <%= f.check_box :remember_me, label: t(".remember_me") %>
     <% end %>
 
-  <%# /sign_in as HTML; /password as TURBO_STREAM %>
-  <%= f.submit t(:sign_in), data: {turbo: false} %>
+    <%= f.submit t(:sign_in) %>
+  <% end %>
 
-  <%= image_button_tag t(:recover_password), 'lock-reset', class: 'auxiliary',
-    formaction: user_password_path, formnovalidate: true,
-    data: {validate: f.field_id(:email)} %>
-<% end %>
+  <%= content_tag :p, t(:or), style: "text-align: center;" %>
+  <%= image_link_to t(:recover_password), 'lock-reset', new_user_password_path,
+    class: 'centered' %>
+</div>

app/views/users/show.html.erb

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

config/initializers/devise.rb

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

config/initializers/time_formats.rb

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

config/initializers/turbo_streams_tag_builder.rb

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

config/locales/devise.en.yml

@@ -4,15 +4,15 @@ en:
   devise:
     confirmations:
       confirmed: "Your email address has been successfully confirmed."
-      send_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.
+      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."
     failure:
       already_authenticated: "You are already signed in."
       inactive: "Your account is not activated yet."
-      invalid: "Invalid <b>%{authentication_keys}</b> or <b>password</b>."
+      invalid: "Invalid %{authentication_keys} or password."
       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,9 +32,8 @@ 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_paranoid_instructions: >
-        If your email address is in our database, the password recovery link has been
-        sent to you.
+      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."
       updated: "Your password has been changed successfully. You are now signed in."
       updated_not_active: "Your password has been changed successfully."
     registrations:
@@ -51,6 +50,7 @@ en:
       signed_out: "Signed out successfully."
       already_signed_out: "Signed out successfully."
     unlocks:
+      send_instructions: "You will receive an email with instructions for how to unlock your account in a few minutes."
       send_paranoid_instructions: "If your account exists, you will receive an email with instructions for how to unlock it in a few minutes."
       unlocked: "Your account has been unlocked successfully. Please sign in to continue."
   errors:

config/locales/en.yml

@@ -1,28 +1,22 @@
 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:
-      quantity:
-        description: Description
-        name: Name
       unit:
-        base: Base unit
-        description: Description
-        multiplier: Multiplier
         symbol: Symbol
+        name: Name
+        multiplier: Multiplier
+        base: Base unit
       user:
-        confirmed_at: Confirmed
-        created_at: Registered
-        email: E-mail
-        status: Status
+        email: e-mail
+        status: status
+        password: password
+        created_at: registered
+        confirmed_at: confirmed
+        unconfirmed_email: Awaiting confirmation for
     errors:
       models:
         unit:
@@ -59,22 +53,9 @@ 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
@@ -85,10 +66,16 @@ en:
     navigation: Measurements
     no_items: There are no measurements taken. You can Add some now.
     form:
-      select_quantity: select quantities...
-      taken_at_html: Measurement taken at&emsp;
+      new_readout: Add
+      new_children: Children
+      new_subtree: Subtree
+      new_leaves: Leaves
+      no_items: Select and add desired quantities...
+      select_quantity: select quantity...
     index:
       new_measurement: Add measurement
+  readouts:
+    form:
   quantities:
     navigation: Quantities
     no_items: There are no configured quantities. You can Add some or Import from defaults.
@@ -146,27 +133,34 @@ en:
       disguise: View as
     passwords:
       edit:
-        password_html: 'New password:%{password_length_hint_html}'
+        new_password: New password
+        password_confirmation: Retype new password
         update_password: Update password
-    profiles:
+    registrations:
       new:
-        password_html: 'Password:%{password_length_hint_html}'
-        password_confirmation: 'Retype password:'
+        password_confirmation: Retype password
       edit:
         confirm_delete: Are you sure you want to delete profile?
           All data will be irretrievably lost.
         delete: Delete profile
-        password_html: >
-          New password:
-          <br><em>leave blank to keep unchanged</em>
-          %{password_length_hint_html}
+        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)
   actions: Actions
   add: Add
-  apply: Apply
   back: Back
   cancel: Cancel
   delete: Delete
-  :no: 'no'
+  or: or
   register: Register
   sign_in: Sign in
   recover_password: Recover password

config/routes.rb

@@ -24,9 +24,8 @@ 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: 'user/profiles'}
+      controllers: {registrations: :registrations}
   end
 
   resources :users, only: [:index, :show, :update] do
@@ -35,8 +34,10 @@ 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' }

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, on_delete: :cascade}
+      t.references :base, foreign_key: {to_table: :units}
 
       t.timestamps null: false
     end

db/migrate/20250104194343_create_quantities.rb

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

db/migrate/20250121230456_create_readouts.rb

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

db/schema.rb

@@ -69,11 +69,11 @@ 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", on_delete: :cascade
+  add_foreign_key "quantities", "quantities", column: "parent_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", on_delete: :cascade
+  add_foreign_key "units", "units", column: "base_id"
   add_foreign_key "units", "users"
 end

db/seeds/templates/units.erb

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

db/seeds/units.rb

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

test/application_system_test_case.rb

@@ -1,7 +1,7 @@
 require "test_helper"
 
 class ApplicationSystemTestCase < ActionDispatch::SystemTestCase
-  include ActionView::Helpers::SanitizeHelper
+  extend ActionView::Helpers::TranslationHelper
   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), with: user.email
-    fill_in User.human_attribute_name(:password), with: password
+    fill_in User.human_attribute_name(:email).capitalize, with: user.email
+    fill_in User.human_attribute_name(:password).capitalize, with: password
     click_on t(:sign_in)
     user
   end
@@ -30,14 +30,6 @@ class ApplicationSystemTestCase < ActionDispatch::SystemTestCase
     evaluate_script("arguments[0].insertAdjacentHTML('beforeend', '#{button.html_safe}');", after)
   end
 
-  # Allow skipping interpolations when translating for testing purposes
-  INTERPOLATION_PATTERNS = Regexp.union(I18n.config.interpolation_patterns)
-  def translate(key, **options)
-    translation = options.empty? ? super.split(INTERPOLATION_PATTERNS, 2).first : super
-    sanitize(translation, tags: [])
-  end
-  alias :t :translate
-
   #def assert_stale(element)
   #  assert_raises(Selenium::WebDriver::Error::StaleElementReferenceError) { element.tag_name }
   #end

test/system/units_test.rb

@@ -6,14 +6,14 @@ require "application_system_test_case"
 #  * user with no units
 
 class UnitsTest < ApplicationSystemTestCase
-  LINK_LABELS = {}
+  LINK_LABELS = {
+    new_unit: t('units.index.new_unit'),
+    new_subunit: t('units.unit.new_subunit'),
+    edit: nil
+  }
 
   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.delete_all
+    @user.units.order(Unit.arel_table[:base_id].eq(nil)).delete_all
     visit units_path
     within 'tbody' do
       assert_selector 'tr', count: 1

test/system/users_test.rb

@@ -5,32 +5,19 @@ class UsersTest < ApplicationSystemTestCase
     @admin = users(:admin)
   end
 
-  test 'sign in' do
-    visit root_url
-    assert find_link(href: new_user_session_path)[:disabled]
-
+  test "sign in" do
     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 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)
-
+  test "sign in fails with invalid password" do
+    sign_in password: random_password
     assert_current_path new_user_session_path
-    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)
+    assert_text t("devise.failure.invalid", authentication_keys: User.human_attribute_name(:email))
   end
 
-  test 'sign out' do
+  test "sign out" do
     sign_in
     visit root_url
     click_on t("layouts.application.sign_out")
@@ -38,106 +25,79 @@ class UsersTest < ApplicationSystemTestCase
     assert_text t("devise.sessions.signed_out")
   end
 
-  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)
+  test "recover password" do
+    visit new_user_session_url
+    click_on t(:recover_password)
 
+    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 has_field?(label, with: email)
+    assert_text t("devise.passwords.send_instructions")
 
     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.password_html"), with: new_password
-    fill_in t("helpers.label.user.password_confirmation"), with: new_password
+    fill_in t("users.passwords.edit.new_password"), with: new_password
+    fill_in t("users.passwords.edit.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 '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
+  test "register" do
+    visit new_user_session_url
     click_on t(:register)
-    assert find_link(href: new_user_registration_path)[:disabled]
 
-    fill_in User.human_attribute_name(:email), with: random_email
+    fill_in User.human_attribute_name(:email).capitalize, with: random_email
     password = random_password
-    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
+    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
       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")
-      end
-    end
+    assert User.last.confirmed?
   end
 
-  test 'resend confirmation' do
-    label = User.human_attribute_name(:email)
-    user = users.reject(&:confirmed?).sample
-
-    visit root_url
+  test "resend confirmation" do
+    visit new_user_session_url
     click_on t(:register)
-    fill_in label, with: user.email
-    assert has_field?(User.human_attribute_name(:password), with: nil)
+    click_on t(:resend_confirmation)
 
+    fill_in User.human_attribute_name(:email).capitalize,
+      with: users.reject(&:confirmed?).sample.email
     assert_emails 1 do
       click_on t(:resend_confirmation)
-      assert_current_path new_user_registration_path
-      assert_text t("devise.confirmations.send_paranoid_instructions")
+      # Wait until redirected to make sure async request has been processed
+      assert_current_path new_user_session_path
     end
-    assert has_field?(label, with: user.email)
+    assert_current_path new_user_session_path
+    assert_text t("devise.confirmations.send_instructions")
 
-    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|
@@ -147,7 +107,7 @@ class UsersTest < ApplicationSystemTestCase
     end
   end
 
-  test 'disguise' do
+  test "disguise" do
     user = users.select(&:admin?).select(&:confirmed?).sample
     sign_in user: user
 
@@ -163,7 +123,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
 
@@ -176,13 +136,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
@@ -190,23 +150,22 @@ class UsersTest < ApplicationSystemTestCase
       first(:link_or_button, user.email).click
     end
     assert_difference ->{ User.count }, -1 do
-      accept_confirm { click_on t("users.profiles.edit.delete") }
+      accept_confirm { click_on t("users.registrations.edit.delete") }
+    end
     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
 
@@ -221,7 +180,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
 
@@ -229,12 +188,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}
-      execute_script("arguments[0].click()", find_button("update status"))
+      click_on "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,