Refactor charts: dedicated nav tab, JSON data transport, tests

Replace the toggle-view approach and hidden DOM data carrier with a
proper dedicated Charts page:

- Move Charts out of Measurements view toggles into its own nav tab
  and route (GET /charts)
- ChartsController serializes readout data as JSON (ordered by
  taken_at); the view embeds it in a <script type="application/json">
  element instead of rendering a hidden copy of the measurements
  partial just to ferry data attributes to JS
- buildCharts() reads from the JSON element directly — no DOM parsing,
  no sorting in JS (server already orders the data)
- Turbo load handler detects the charts page via #charts-data presence
- Add controller tests (authentication, data shape, ordering,
  data isolation between users) and system tests

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

.gitea/workflows/test.yml

@@ -1,74 +0,0 @@
-name: Tests
-
-on:
-  push:
-    branches: [ master ]
-  pull_request:
-    branches: [ master ]
-
-jobs:
-  test-sqlite:
-    name: Tests (SQLite)
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-
-      - uses: ruby/setup-ruby@v1
-        with:
-          ruby-version: '3.3'
-          bundler-cache: true
-        env:
-          BUNDLE_WITH: "sqlite:development:test"
-
-      - name: Set up test database
-        run: bin/rails db:create db:schema:load
-        env:
-          RAILS_ENV: test
-
-      - name: Run tests
-        run: bin/rails test
-        env:
-          RAILS_ENV: test
-          CI: "true"
-
-  test-mysql:
-    name: Tests (MySQL)
-    runs-on: ubuntu-latest
-
-    services:
-      mysql:
-        image: mysql:8.0
-        env:
-          MYSQL_ROOT_PASSWORD: ""
-          MYSQL_ALLOW_EMPTY_PASSWORD: "yes"
-          MYSQL_DATABASE: fixin_test
-        ports:
-          - 3306:3306
-        options: >-
-          --health-cmd="mysqladmin ping"
-          --health-interval=10s
-          --health-timeout=5s
-          --health-retries=3
-
-    steps:
-      - uses: actions/checkout@v4
-
-      - uses: ruby/setup-ruby@v1
-        with:
-          ruby-version: '3.3'
-          bundler-cache: true
-        env:
-          BUNDLE_WITH: "mysql:development:test"
-
-      - name: Set up test database
-        run: bin/rails db:schema:load
-        env:
-          RAILS_ENV: test
-          DB_ADAPTER: mysql
-
-      - name: Run tests
-        run: bin/rails test
-        env:
-          RAILS_ENV: test
-          CI: "true"
-          DB_ADAPTER: mysql

CLAUDE.md

@@ -0,0 +1,84 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+Fixin.me is a "quantified self" Rails 7.2.3 application for personal data tracking. Users define hierarchical **quantities** (metrics to track), **units** (with optional conversion hierarchies), and **readouts** (individual measurements). There is also a non-persistent **measurement** model used as a form wrapper.
+
+## Setup
+
+Configuration files are distributed as `.dist` templates — copy and customize before use:
+
+```bash
+cp config/application.rb.dist config/application.rb
+cp config/database.yml.dist config/database.yml
+cp config/puma.rb.dist config/puma.rb
+```
+
+```bash
+bundle config --local frozen true
+bundle config --local path .gem
+bundle config --local with mysql development test   # or: pg, sqlite
+bundle install
+RAILS_ENV=development bundle exec rails db:create db:migrate db:seed
+```
+
+## Common Commands
+
+```bash
+bundle exec rails s                                          # start server
+bundle exec rails test                                       # all unit/model/controller tests
+bundle exec rails test:system                                # all system tests (Capybara + Selenium)
+bundle exec rails test test/system/units_test.rb            # single test file
+bundle exec rails test --seed 64690 --name test_add_unit    # single test by name
+bundle exec rails db:seed:export                             # export default settings as seed file
+```
+
+## Architecture
+
+### Data Model
+
+- **Quantity** — hierarchical tree (self-referential `parent_id`). Cached `depth` and `pathname` fields are recomputed via recursive CTEs on write. Direct assignment to cached fields is blocked.
+- **Unit** — optional hierarchy via `base_id` and `multiplier` for unit conversion. Multiplier precision/scale is validated by a custom validator.
+- **Readout** — single measurement: `value` (IEEE 754 float), `quantity`, `unit`, `category`.
+- **Measurement** — `ActiveModel::Model` form wrapper (not database-backed); bridges the readout creation form.
+- **User** — Devise-managed with a status enum: `admin`, `active`, `restricted`, `locked`, `disabled`. Admins can disguise as other users.
+
+### Hierarchical Queries
+
+Both `Quantity` and `Unit` use recursive CTEs for tree traversal (ordered traversal, ancestors, progenies, common ancestors). `lib/core_ext/arel/` patches Arel to support CTE with `UPDATE`/`DELETE` statements, working around Rails issue #54658.
+
+### Custom Extensions (`lib/core_ext/`)
+
+- **arel/** — CTE support for UPDATE/DELETE
+- **active_model/** — precision/scale validator used by `Unit#multiplier`
+- **active_record/** — `attr_cached` mechanism (see `ApplicationRecord`)
+- **action_view/** — record identifier suffixes
+- Miscellaneous: `Array#delete_bang`, `BigDecimal` scientific notation
+
+### Response Handling
+
+Controllers respond to both HTML and Turbo Stream formats. Errors during Turbo Stream requests trigger a redirect with flash rather than rendering inline, handled in `ApplicationController`.
+
+### Numeric Precision
+
+Readout values are stored as IEEE 754 double-precision floats (not fixed-point decimals). Rationale in `DESIGN.md`: biological values span many orders of magnitude; 15-digit float precision is sufficient and avoids conversion overhead.
+
+### Routes
+
+```
+measurements   GET/POST /measurements
+readouts       GET/POST /readouts, DELETE /readouts/:id/discard
+quantities     CRUD + POST /quantities/:id/reparent
+units          CRUD + POST /units/:id/rebase
+users          CRUD + POST /users/:id/disguise, POST /users/revert
+default/       namespace for default units import/export and admin panel
+root           → /units (authenticated), /sign_in (unauthenticated)
+```
+
+## Database Requirements
+
+The database must support:
+- Recursive CTEs with `UPDATE`/`DELETE` (MySQL ≥ 8.0, PostgreSQL, or SQLite3)
+- Decimal precision of 30+ digits

DESIGN.md

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

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

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

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

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

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

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="icon" viewBox="0 0 24 24"><path d="M4,4H8V20H4V4M10,4H14V20H10V4M16,4H21V20H16V4Z"/></svg>

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

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="icon" viewBox="0 0 24 24"><path d="M3,5H21V7H3V5M3,11H21V13H3V11M3,17H21V19H3V17Z"/></svg>

app/assets/stylesheets/application.css

@@ -18,10 +18,12 @@
 /* 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)
+ * differently depending on context (e.g. <form>, <table>, <a> as link/button),
+ * * styles with multiple selectors should have all selectors with same
+ * specificity, to allow proper rule specificity vs order management.
  *
- * NOTE: Style in a modular way, similar to how CSS @scope would be used,
+ * NOTE: style in a modular way, similar to how CSS @scope would be used,
- * to make transition easier once @scope is widely available */
+ * to make transition easier once @scope is widely available. */
 :root {
   --color-focus-gray: #f3f3f3;
   --color-border-gray: #dddddd;
@@ -34,6 +36,7 @@
   --color-blue: #009ade;
   --color-dark-red: #b21237;
   --color-red: #ff1f5b;
+  --color-purple: #8b2be2;
 
   --depth: 0;
 
@@ -53,17 +56,36 @@
 :focus-visible {
   outline: none;
 }
+/* NOTE: move to higher priority layer instead of using !important?; add CSS
+ * @layer requirements in README */
+[disabled] {
+  border-color: var(--color-border-gray) !important;
+  color: var(--color-border-gray) !important;
+  /* NOTE: cannot set cursor when `pointer-events: none`; can be fixed by setting
+   * `cursor` on wrapping element.
+  cursor: not-allowed; */
+  fill: var(--color-border-gray) !important;
+  pointer-events: none !important;
+}
+/* Styles set `display` without distinguishing between [hidden] elements, making
+ * them visible. */
+[hidden] {
+  display: none !important;
+}
 
 
 /* Color coding of input controls' background:
- *  blue - target for interaction with pointer
+ *  blue - target for interaction with pointer,
- *  gray - target for interaction with keyboard
+ *  gray - target for interaction with keyboard,
- *  red - destructive, non-undoable action
+ *  red - destructive, non-undoable action.
  */
+/* TODO: merge selectors using :is() */
+a,
 button,
 details,
 input,
 select,
+summary,
 textarea {
   background-color: inherit;
   font: inherit;
@@ -73,50 +95,29 @@ input,
 select {
   text-align: inherit;
 }
-a,
-button,
-input[type=submit] {
-  cursor: pointer;
-  text-decoration: none;
-  white-space: nowrap;
-}
-/* [hidden] submit controls cannot have `display` set as it makes them visible */
-.button,
-button:not([hidden]),
-input[type=submit]:not([hidden]),
-.tab {
-  align-items: center;
-  color: var(--color-gray);
-  display: flex;
-  fill: var(--color-gray);
-  font-weight: bold;
-}
-.button,
-button,
-input[type=submit] {
-  font-size: 0.8rem;
-  padding: 0.6em 0.5em;
-  width: fit-content;
-}
-input:not([type=submit]):not([type=checkbox]),
-select,
-summary,
-textarea {
-  padding: 0.2em 0.4em;
-}
-.button,
-button,
 input,
 select,
 summary,
 textarea {
-  border: solid 1px var(--color-gray);
+  border: 1px solid var(--color-gray);
   border-radius: 0.25em;
+  padding: 0.2em 0.4em;
+}
+svg {
+  height: 1.4em;
+  margin: 0 0.2em 0 0;
+  width: 1.4em;
+}
+svg:last-child {
+  margin-right: 0;
+}
+.chart-panel svg {
+  height: auto;
+  margin: 0;
+  width: auto;
 }
-input[type=checkbox],
-svg,
 textarea {
-  margin: 0
+  margin: 0;
 }
 input[type=checkbox] {
   accent-color: var(--color-blue);
@@ -124,16 +125,20 @@ input[type=checkbox] {
   -webkit-appearance: none;
   display: flex;
   height: 1.1em;
+  margin: 0;
+  padding: 0;
   width: 1.1em;
 }
 input[type=checkbox]:checked {
   appearance: checkbox;
   -webkit-appearance: checkbox;
 }
-/* Hide spin buttons in input number fields */
+/* 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;
@@ -142,37 +147,112 @@ input::-webkit-outer-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
-.button > svg,
+/* Text color of table form controls:
-.tab > svg,
+ *  - black for row/table forms,
-button > svg {
+ *  - inherited for internal (column specific) buttons/forms. */
-  height: 1.4em;
+table input,
-  width: 1.4em;
+table select,
+table summary,
+table textarea {
+  border-color: var(--color-border-gray);
 }
-.button > svg:not(:last-child),
+table input,
-.tab > svg:not(:last-child),
+table select,
-button > svg:not(:last-child) {
+table textarea {
-  margin-right: 0.2em;
+  padding-block: 0.375em;
 }
-/* TODO: move normal non-button links (<a>:hover/:focus) styling here (i.e.
+table form input,
- * page-wide, top-level) and remove from table.items - as the style should be
+table form select,
- * same everywhere */
+table form summary,
-.button:focus-visible,
+table form textarea {
-button:focus-visible,
+  color: inherit;
-input[type=submit]:focus-visible {
+}
-  background-color: var(--color-focus-gray);
+table svg:not(:only-child) {
+  height: 1.25em;
+  width: 1.25em;
 }
 input:focus-visible,
 select:focus-visible,
 select:focus-within,
-/* TODO: how to achieve summary:focus-within for ::details-content? */
+/* 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;
 }
-.button:hover,
+input:hover,
-button:hover,
+select:hover,
-input[type=submit]:hover {
+summary:hover,
+textarea:hover {
+  border-color: var(--color-blue);
+  outline: 1px solid var(--color-blue);
+}
+select:hover,
+summary:hover {
+  color: black;
+  cursor: pointer;
+}
+/* TODO: style <details>/<summary> focus to match <select> as much as possible.
+summary:focus-visible::before,
+summary:hover::before {
+  background-color: black;
+}
+ */
+input:invalid,
+select:invalid,
+textarea:invalid {
+  border-color: var(--color-red);
+  outline-color: var(--color-red);
+}
+
+/* `.button`: button-styled <a>, <button>, <input type=submit>.
+ * `.link`: any other <a>.
+ * `.tab`: tab-styled <a>.
+ */
+.button,
+.link,
+.tab {
+  cursor: pointer;
+  text-decoration: none;
+  white-space: nowrap;
+}
+.button,
+.tab {
+  align-items: center;
+  color: var(--color-gray);
+  display: flex;
+  fill: var(--color-gray);
+  font-weight: bold;
+}
+.button {
+  border: 1px solid var(--color-gray);
+  border-radius: 0.25em;
+  font-size: 0.8rem;
+  padding: 0.6em 0.5em;
+  width: fit-content;
+}
+.link {
+  color: inherit;
+  text-decoration: underline 1px var(--color-border-gray);
+  text-underline-offset: 0.25em;
+}
+button.link {
+  border: none;
+  padding: 0;
+}
+[name=cancel],
+.auxiliary {
+  border-color: var(--color-border-gray);
+  color: var(--color-nav-gray);
+  fill: var(--color-nav-gray);
+}
+.button:focus-visible,
+.tab:focus-visible,
+.tab:hover {
+  background-color: var(--color-focus-gray);
+}
+.button:hover {
   background-color: var(--color-blue);
   border-color: var(--color-blue);
   color: white;
@@ -182,32 +262,31 @@ input[type=submit]:hover {
   background-color: var(--color-red);
   border-color: var(--color-red);
 }
-input:hover,
+tr:has(select[data-changed]) button[name="button"],
-select:hover,
+.set-default-unit:not([disabled]) {
-summary:hover,
+  background-color: var(--color-purple);
-textarea:hover {
+  border-color: var(--color-purple);
-  border-color: var(--color-blue);
+  color: white;
-  outline: solid 1px var(--color-blue);
+  fill: white;
 }
-select:hover,
+.link:focus-visible {
-summary:hover {
+  text-decoration-color: var(--color-gray);
-  cursor: pointer;
 }
-input:invalid,
+.link:hover {
-select:invalid,
+  color: var(--color-blue);
-textarea:invalid {
+  text-decoration-color: var(--color-blue);
-  border-color: var(--color-red);
-  outline: solid 1px var(--color-red);
 }
-input[type=text]:read-only,
+table .button {
-textarea:read-only {
+  border-color: var(--color-border-gray);
-  border: none;
+  color: var(--color-table-gray);
-  padding-inline: 0;
+  font-weight: normal;
+  height: 100%;
+  padding: 0.4em;
 }
 
 
-/* NOTE: collapse gaps around empty rows (`topside`) once possible
+/* NOTE: collapse gaps around empty rows (`topside`) once possible with
- * with grid-collapse property and remove alternative grid-template
+ * `grid-collapse` property and remove alternative `grid-template-areas`.
  * https://github.com/w3c/csswg-drafts/issues/5813 */
 body {
   display: grid;
@@ -215,16 +294,16 @@ body {
   grid-template-areas:
     "header    header  header"
     "nav       nav     nav"
-    "leftside  topside rightside"
     "leftside  main    rightside";
   grid-template-columns: 1fr minmax(max-content, 2fr) 1fr;
   font-family: system-ui;
   margin: 0.4em;
 }
-body:not(:has(.topside-area)) {
+body:has(> .topside-area) {
   grid-template-areas:
     "header    header  header"
     "nav       nav     nav"
+    "leftside  topside rightside"
     "leftside  main    rightside";
 }
 
@@ -240,18 +319,14 @@ header {
   margin-inline-start: 4%;
 }
 .navigation > .tab {
-  border-bottom: solid 2px var(--color-nav-gray);
+  border-bottom: 2px solid var(--color-nav-gray);
   flex: 1;
   font-size: 1rem;
   justify-content: center;
   padding-block: 0.4em;
 }
-.navigation > .tab:hover,
-.navigation > .tab:focus-visible {
-  background-color: var(--color-focus-gray);
-}
 .navigation > .tab.active {
-  border-bottom: solid 4px var(--color-blue);
+  border-bottom: 4px solid var(--color-blue);
   color: var(--color-blue);
   fill: var(--color-blue);
 }
@@ -283,7 +358,7 @@ header {
 
 #flashes {
   display: grid;
-  gap: 0.2em;
+  row-gap: 0.4em;
   grid-template-columns: 1fr auto auto auto 1fr;
   left: 0;
   pointer-events: none;
@@ -299,48 +374,42 @@ header {
   display: grid;
   grid-column: 2/5;
   grid-template-columns: subgrid;
+  line-height: 2.2em;
   pointer-events: auto;
 }
-.flash.alert:before {
+.flash:before {
-  content: url('pictograms/alert-outline.svg');
+  filter: invert(100%);
   height: 1.4em;
   margin: 0 0.5em;
   width: 1.4em;
 }
+.flash.alert:before {
+  content: url('pictograms/alert-outline.svg');
+}
 .flash.alert {
   border-color: var(--color-red);
   background-color: var(--color-red);
 }
 .flash.notice:before {
   content: url('pictograms/check-circle-outline.svg');
-  height: 1.4em;
-  margin: 0 0.5em;
-  width: 1.4em;
 }
 .flash.notice {
   border-color: var(--color-blue);
   background-color: var(--color-blue);
 }
-.flash > div {
+.flash svg {
-  grid-column: 2;
-}
-/* NOTE: currently flash button inherits some unnecessary styles from generic
- * button. */
-.flash > button {
-  border: none;
-  color: inherit;
   cursor: pointer;
-  font-size: 1.4em;
+  fill: white;
-  font-weight: bold;
+  height: 2.2em;
-  grid-column: 3;
   opacity: 0.6;
-  padding: 0.2em 0.4em;
+  padding: 0.4em 0.5em;
+  width: 2.4em;
 }
-.flash > button:hover {
+.flash svg:hover {
   opacity: 1;
 }
 
-/* TODO: Hover over invalid should work like in measurements (thin vs thick border) */
+
 .labeled-form {
   align-items: center;
   display: grid;
@@ -357,7 +426,7 @@ header {
 .labeled-form label.required {
   font-weight: bold;
 }
-/* Don't style `label.error + input` if case already covered by input:invalid */
+/* Don't style `label.error + input` if case already covered by `input:invalid`. */
 .labeled-form label.error {
   color: var(--color-red);
 }
@@ -371,203 +440,123 @@ header {
 }
 .labeled-form input[type=submit] {
   font-size: 1rem;
-  margin: 1.5em auto 0 auto;
+  margin: 1em auto 0 auto;
   padding: 0.75em;
 }
+.labeled-form .auxiliary {
+  grid-column: 3;
+  /* If more buttons are needed, `grid-row` can be replaced with
+   * `reading-flow: grid-columns` to ensure proper [tabindex] order. */
+  grid-row: 1;
+  height: 100%;
+  padding-block: 0;
+}
+
+.tabular-form table {
+  border: none;
+  border-spacing: 0.4em 0;
+  margin-inline: -0.4em;
+}
+.tabular-form table td {
+  border: none;
+  vertical-align: middle;
+}
+.tabular-form table td {
+  padding-inline: 0;
+}
+.tabular-form table :is(form, input, select, textarea):only-child {
+  margin-inline-start: 0;
+}
 
 
-/* TODO: remove .items class (?) and make 'form table' work properly */
+.items-table {
-table.items {
   border-spacing: 0;
-  border: solid 1px var(--color-border-gray);
+  border: 1px solid var(--color-border-gray);
   border-radius: 0.25em;
   font-size: 0.85rem;
   text-align: left;
 }
-table:not(:has(tr)) {
+.items-table thead {
-  display: none;
-}
-table.items thead {
   font-size: 0.8rem;
 }
-table.items thead,
+.items-table thead,
-table.items tbody tr:hover {
+.items-table tbody tr:hover {
   background-color: var(--color-focus-gray);
 }
-table.items th {
+.items-table th {
-  padding-block: 0.75em;
+  padding: 0.75em 0 0.75em 1em;
   text-align: center;
 }
-table.items th,
+.items-table th:last-child {
-table.items td {
-  padding-inline: 1em 0;
-}
-/* For <a> to fill <td> completely, we use an ::after pseudoelement. */
-table.items td.link {
-  padding: 0;
-  position: relative;
-}
-table.items td.link a {
-  color: inherit;
-  font: inherit;
-}
-table.items td.link a::after {
-  content: '';
-  inset: 0;
-  position: absolute;
-}
-table.items td:first-child {
-  padding-inline-start: calc(1em + var(--depth) * 0.8em);
-}
-table.items td:has(input, select, textarea) {
-  padding-inline-start: calc(0.6em - 0.9px);
-}
-table.items td:first-child:has(input, select, textarea) {
-  padding-inline-start: calc(0.6em + var(--depth) * 0.8em - 0.9px);
-}
-table.items th:last-child {
   padding-inline-end: 0.4em;
 }
-table.items td:last-child {
+.items-table td {
+  border-top: 1px solid var(--color-border-gray);
+  height: 2.4em;
+  padding: 0.1em 0 0.1em calc(1em + var(--depth) * 0.8em);
+}
+.items-table td:last-child {
   padding-inline-end: 0.1em;
 }
-table.items td {
+.items-table :is(form, input, select, textarea):only-child {
-  border-top: solid 1px var(--color-border-gray);
+  margin-inline-start: calc(-0.4em - 0.9px);
-  height: 2.4em;
-  padding-block: 0.1em;
 }
-table.items .actions {
+/* For <a> to fill table cell completely, we use an `::after` pseudoelement. */
-  display: flex;
+/* TODO: expand to whole row? will require adjusting z-index on inputs/buttons */
+.items-table td:has(> .link) {
+  position: relative;
+}
+.items-table .link::after {
+  content: '';
+  inset: -1px 0 0 0;
+  position: absolute;
+}
+.items-table .flex {
   gap: 0.4em;
   justify-content: end;
 }
-table.items .actions.centered {
+.items-table .dropzone {
-  justify-content: center;
-}
-table.items tr.dropzone {
   position: relative;
 }
-table.items tr.dropzone::after {
+.items-table .dropzone::after {
   content: '';
   inset: 1px 0 0 0;
   position: absolute;
-  outline: dashed 2px var(--color-blue);
+  outline: 2px dashed var(--color-blue);
   outline-offset: -1px;
   z-index: var(--z-index-table-row-outline);
 }
-table.items td.handle {
+.items-table .handle {
-  cursor: move;
+  cursor: grab;
 }
-table.items tr.form td {
+.items-table .form td {
-  vertical-align: top;
+  vertical-align: middle;
 }
-
+.items-table td:not(:first-child),
-/* TODO: replace :hover:focus-visible combos with proper LOVE stye order */
-/* TODO: Update table styling: simplify selectors, deduplicate, remove non-font rem. */
-table.items td.link a:hover,
-table.items td.link a:focus-visible,
-table.items td.link a:hover:focus-visible {
-  text-decoration: underline;
-  text-decoration-thickness: 0.05rem;
-  text-underline-offset: 0.2rem;
-}
-table.items td.link a:hover {
-  color: var(--color-blue);
-}
-table.items td.link a:focus-visible {
-  text-decoration-color: var(--color-gray);
-}
-table.items td.link a:hover:focus-visible {
-  color: var(--color-dark-blue);
-}
-
-table.items td:not(:first-child),
 .grayed {
   color: var(--color-table-gray);
-  fill: var(--color-table-gray);
+  fill: var(--color-gray);
 }
-table.items svg {
+.items-table td:has(> svg:only-child) {
-  height: 1rem;
-  vertical-align: middle;
-  width: 1rem;
-}
-table.items svg:last-child {
-  height: 1.2rem;
-  width: 1.2rem;
-}
-table.items td.svg {
   text-align: center;
 }
-table.items td.number {
-  text-align: right;
-}
-table.items .button,
-table.items button,
-table.items input[type=submit] {
-  font-weight: normal;
-  height: 100%;
-  padding: 0.4em;
-}
-table.items input:not([type=submit]):not([type=checkbox]),
-table.items select,
-table.items textarea {
-  padding-block: 0.375em;
-}
-/* TODO: find a way (layers?) to style inputs differently while making sure
- * hover works properly without using :not(:hover) selectors here. */
-table.items .button:not(:hover),
-table.items button:not(:hover),
-table.items input:not(:hover),
-table.items select:not(:hover),
-table.items textarea:not(:hover) {
-  border-color: var(--color-border-gray);
-}
-table.items .button:not(:hover),
-table.items button:not(:hover),
-table.items input[type=submit]:not(:hover),
-table.items select:not(:hover) {
-  color: var(--color-table-gray);
-}
-table.items select:focus-within,
-table.items select:focus-visible {
-  color: black;
-}
-form a[name=cancel] {
-  border-color: var(--color-border-gray);
-  color: var(--color-nav-gray);
-  fill: var(--color-nav-gray);
-}
-form table.items {
-  border: none;
-}
-form table.items td {
-  border: none;
-  text-align: left;
-  vertical-align: middle;
-}
-form table.items td:first-child {
-  color: inherit;
-}
 
 
-.centered {
+.center {
   margin: 0 auto;
 }
-.extendedright {
-  margin-right: auto;
-}
 .hexpand {
   width: 100%;
 }
-.hflex {
+.flex {
   display: flex;
   gap: 0.8em;
 }
-.hflex.reverse {
+.flex.reverse {
   flex-direction: row-reverse;
 }
-.hflex.centered {
+.flex.vertical {
-  justify-content: center;
+  flex-direction: column;
 }
 .hint {
   color: var(--color-table-gray);
@@ -575,21 +564,18 @@ form table.items td:first-child {
   font-size: 0.9rem;
   text-align: center;
 }
-.vflex {
+.hmin50 {
-  display: flex;
+  min-width: 50%;
-  gap: 0.8em;
-  flex-direction: column;
 }
-[disabled] {
+.italic {
-/* label:has(input[disabled]) {
+  color: var(--color-gray);
- * TODO: disabled checkbox blue square focus removal; disabled label styling;
+  font-style: italic;
- * focused label styling (currently only checkbox has focus)
+}
- * */
+.ralign {
-  border-color: var(--color-border-gray) !important;
+  text-align: right;
-  color: var(--color-border-gray) !important;
+}
-  cursor: not-allowed;
+.rextend {
-  fill: var(--color-border-gray) !important;
+  margin-right: auto;
-  pointer-events: none;
 }
 
 
@@ -601,12 +587,12 @@ summary {
   align-items: center;
   color: var(--color-gray);
   display: flex;
-  gap: 0.2em;
+  gap: 0.4em;
   height: 100%;
   white-space: nowrap;
 }
 summary::before {
-  background-color: #000;
+  background-color: currentColor;
   content: "";
   height: 1em;
   mask-image: url('pictograms/chevron-down.svg');
@@ -618,7 +604,7 @@ summary:has(.button) {
   padding-inline-end: 0;
 }
 summary .button {
-  border: solid 1px var(--color-border-gray);
+  border: 1px solid var(--color-border-gray);
   border-radius: inherit;
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
@@ -629,15 +615,15 @@ summary span {
   width: 100%;
 }
 details[open] summary::before {
-  transform: rotate(180deg);
+  transform: scaleY(-1);
 }
 summary::marker {
   padding-left: 0.25em;
 }
-/* NOTE: use details[open]::details-content once widely available */
+/* NOTE: use `details[open]::details-content` once widely available. */
 details[open] ul {
-  background: white;
+  background-color: white;
-  border: solid 1px var(--color-border-gray);
+  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;
@@ -659,3 +645,57 @@ li input[type=checkbox] {
 li::marker {
   content: '';
 }
+/*
+ * TODO:
+ * * disable <label> containing disabled checkbox: `label:has(input[disabled])`,
+ * * disabled label styling,
+ * * focused label styling (currently only checkbox has focus),
+ * * disabled checkbox blue square focus removal.
+ * */
+
+#measurement_form {
+  min-width: 66%;
+  width: max-content;
+}
+.measurements-section {
+  overflow-x: auto;
+}
+body[data-measurements-view=wide] .measurements-compact,
+body[data-measurements-view=compact] .measurements-wide {
+  display: none;
+}
+body[data-measurements-view=compact] .view-toggle[data-view=compact],
+body[data-measurements-view=wide] .view-toggle[data-view=wide] {
+  background-color: var(--color-blue);
+  border-color: var(--color-blue);
+  color: white;
+  fill: white;
+}
+.chart-panel {
+  width: 100%;
+}
+#measurements tr.grouped td {
+  border-top: none;
+}
+#measurements tr.grouped .taken-at,
+#measurements tr.grouped .created-at {
+  visibility: hidden;
+}
+.measurements-wide td {
+  vertical-align: middle;
+  white-space: nowrap;
+}
+.wide-cell {
+  align-items: center;
+  display: inline-flex;
+  gap: 0.25em;
+}
+.wide-cell .button {
+  border: none;
+  font-size: inherit;
+  height: auto;
+  padding: 0;
+}
+.wide-cell button.link::after {
+  content: none;
+}

app/controllers/application_controller.rb

@@ -9,7 +9,6 @@ class ApplicationController < ActionController::Base
   helper_method :current_user_disguised?
   helper_method :current_tab
 
-  before_action :redirect_to_setup_if_needed
   before_action :authenticate_user!
 
   class AccessForbidden < StandardError; end
@@ -26,6 +25,18 @@ class ApplicationController < ActionController::Base
   #   Turbo will reload 2nd time with HTML format and flashes will be lost.
   rescue_from *ActionDispatch::ExceptionWrapper.rescue_responses.keys, with: :rescue_turbo
 
+  # Required by #respond_with (gem `responders`) used by Devise controllers.
+  respond_to :html, :turbo_stream
+
+  def after_sign_in_path_for(resource)
+    # TODO: allow setting path per-user or save last path in session and restore
+    units_path
+  end
+
+  def after_sign_out_path_for(resource)
+    new_user_session_path
+  end
+
   protected
 
   def current_user_disguised?
@@ -44,16 +55,6 @@ class ApplicationController < ActionController::Base
 
   private
 
-  # Redirect to the web setup wizard when the application has not yet been
-  # initialised (i.e. no admin account exists in the database).
-  def redirect_to_setup_if_needed
-    return if User.exists?(status: :admin)
-    redirect_to new_setup_path
-  rescue ActiveRecord::StatementInvalid
-    # Tables may not exist yet (migrations not run). Fall through and let the
-    # normal request handling surface a meaningful error.
-  end
-
   def render_no_content(record)
     helpers.render_errors(record)
     render html: nil, layout: true

app/controllers/charts_controller.rb

@@ -0,0 +1,12 @@
+class ChartsController < ApplicationController
+  def index
+    readouts = current_user.readouts.includes(:quantity, :unit).order(:taken_at, :id)
+    @readouts_json = readouts.map { |r|
+      { takenAt: r.taken_at&.iso8601,
+        quantityId: r.quantity_id,
+        quantityName: r.quantity.name,
+        value: r.value.to_f,
+        unit: r.unit.symbol }
+    }.to_json
+  end
+end

app/controllers/measurements_controller.rb

@@ -1,7 +1,12 @@
 class MeasurementsController < ApplicationController
+  before_action :find_readout, only: [:destroy, :edit, :update]
+
+  before_action except: :index do
+    raise AccessForbidden unless current_user.at_least(:active)
+  end
+
   def index
-    @measurements = []
+    @measurements = current_user.readouts.includes(:quantity, :unit).order(taken_at: :desc, id: :desc)
-    #@measurements = current_user.units.ordered.includes(:base, :subunits)
   end
 
   def new
@@ -9,8 +14,40 @@ class MeasurementsController < ApplicationController
   end
 
   def create
+    taken_at = params.permit(:taken_at)[:taken_at]
+    readout_params = params.permit(readouts: Readout::ATTRIBUTES).fetch(:readouts, [])
+    @readouts = readout_params.map { |rp| current_user.readouts.build(rp.merge(taken_at: taken_at)) }
+
+    if @readouts.present? && @readouts.all?(&:valid?)
+      ActiveRecord::Base.transaction { @readouts.each(&:save!) }
+      flash.now[:notice] = t('.success', count: @readouts.size)
+    else
+      errors = @readouts.flat_map { |r| r.errors.full_messages }
+      flash.now[:alert] = errors.present? ? errors.first : t('.no_readouts')
+    end
+  end
+
+  def edit
+    @user_units = current_user.units.ordered
+  end
+
+  def update
+    if @readout.update(params.require(:readout).permit(:value, :unit_id, :taken_at))
+      flash.now[:notice] = t('.success')
+    else
+      @user_units = current_user.units.ordered
+      render :edit
+    end
   end
 
   def destroy
+    @readout.destroy!
+    flash.now[:notice] = t('.success')
+  end
+
+  private
+
+  def find_readout
+    @readout = current_user.readouts.find(params[:id])
   end
 end

app/controllers/quantities_controller.rb

@@ -8,6 +8,10 @@ class QuantitiesController < ApplicationController
     raise AccessForbidden unless current_user.at_least(:active)
   end
 
+  before_action only: [:new, :edit, :create, :update] do
+    @user_units = current_user.units.ordered
+  end
+
   def index
     @quantities = current_user.quantities.ordered.includes(:parent, :subquantities)
   end

app/controllers/setup_controller.rb

@@ -1,59 +0,0 @@
-# Handles the one-time web-based installation wizard.
-#
-# The wizard is only accessible when no admin account exists yet.  Once an
-# admin has been created the controller redirects every request to the root
-# path, so it can never be used to overwrite an existing installation.
-class SetupController < ActionController::Base
-  # Use the full application layout (header, flash, etc.) so the page looks
-  # consistent with the rest of the site.
-  layout "application"
-
-  before_action :redirect_if_installed
-
-  def new
-  end
-
-  def create
-    email    = params[:admin_email].to_s.strip
-    password = params[:admin_password].to_s
-    confirm  = params[:admin_password_confirmation].to_s
-
-    errors = []
-    errors << t(".email_blank")    if email.blank?
-    errors << t(".password_blank") if password.blank?
-    errors << t(".password_mismatch") if password != confirm
-
-    if errors.any?
-      flash.now[:alert] = errors.join("  ")
-      return render :new, status: :unprocessable_entity
-    end
-
-    user = User.new(email: email, password: password, status: :admin)
-    user.skip_confirmation!
-
-    unless user.save
-      flash.now[:alert] = user.errors.full_messages.join("  ")
-      return render :new, status: :unprocessable_entity
-    end
-
-    # Persist runtime settings chosen during setup.
-    Setting.set("skip_email_confirmation",
-                params[:skip_email_confirmation] == "1")
-
-    # Optionally seed the built-in default units.
-    if params[:seed_units] == "1"
-      load Rails.root.join("db/seeds/units.rb")
-    end
-
-    redirect_to new_user_session_path, notice: t(".success")
-  end
-
-  private
-
-  def redirect_if_installed
-    redirect_to root_path if User.exists?(status: :admin)
-  rescue ActiveRecord::StatementInvalid
-    # Tables are not yet migrated — stay on the setup page so the user sees a
-    # meaningful error rather than a crash.
-  end
-end

app/controllers/user/profiles_controller.rb

@@ -1,6 +1,4 @@
-class RegistrationsController < Devise::RegistrationsController
+class User::ProfilesController < Devise::RegistrationsController
-  before_action :authenticate_user!, only: [:edit, :update, :destroy]
-
   def destroy
     # TODO: Disallow/disable deletion for last admin account; update :edit view
     super
@@ -8,15 +6,6 @@ class RegistrationsController < Devise::RegistrationsController
 
   protected
 
-  def build_resource(hash = {})
-    super
-    # Skip the email confirmation step when the admin has enabled this option
-    # via the web setup wizard (stored as the "skip_email_confirmation" Setting).
-    # The account becomes active immediately so the user can sign in right after
-    # registering.
-    resource.skip_confirmation! if Setting.get("skip_email_confirmation") == "true"
-  end
-
   def update_resource(resource, params)
     # Based on update_with_password()
     if params[:password].blank?

app/controllers/users_controller.rb

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

app/helpers/application_helper.rb

@@ -12,6 +12,12 @@ module ApplicationHelper
       labeled_field_for(method, options) { super }
     end
 
+    def submit(value = nil, options = {})
+      value, options = nil, value if value.is_a?(Hash)
+      options[:class] = @template.class_names('button', options[:class])
+      super
+    end
+
     private
 
     def labeled_field_for(method, options)
@@ -72,19 +78,15 @@ module ApplicationHelper
   end
 
   def labeled_form_for(record, options = {}, &block)
-    extra_options = {builder: LabeledFormBuilder,
+    extra_options = {builder: LabeledFormBuilder, html: {class: 'labeled-form'}}
-                     data: {turbo: false},
+    form_for(record, **merge_attributes(options, extra_options), &block)
-                     html: {class: 'labeled-form'}}
-    options = options.deep_merge(extra_options) do |key, left, right|
-      key == :class ? class_names(left, right) : right
-    end
-    form_for(record, **options, &block)
   end
 
   class TabularFormBuilder < ActionView::Helpers::FormBuilder
     def initialize(...)
       super(...)
       @default_options.merge!(@options.slice(:form))
+      @default_html_options.merge!(@options.slice(:form))
     end
 
     [:text_field, :password_field, :text_area].each do |selector|
@@ -101,20 +103,28 @@ module ApplicationHelper
 
     def number_field(method, options = {})
       attr_type = object.type_for_attribute(method)
-      if attr_type.type == :decimal
+      case attr_type.type
+      when :decimal
         options[:value] = object.public_send(method)&.to_scientific
         options[:step] ||= BigDecimal(10).power(-attr_type.scale)
         options[:max] ||= BigDecimal(10).power(attr_type.precision - attr_type.scale) -
           options[:step]
         options[:min] = options[:min] == :step ? options[:step] : options[:min]
         options[:min] ||= -options[:max]
+        options[:size] ||= attr_type.precision / 2
+      when :float
+        options[:size] ||= 6
       end
       super
     end
 
     def button(value = nil, options = {}, &block)
-      # button does not use #objectify_options
+      # #button does not use #objectify_options/@default_options
-      options.merge!(@options.slice(:form))
+      value, options = nil, value if value.is_a?(Hash)
+      options = options.merge(
+        @default_options.slice(:form),
+        class: @template.class_names('button', options[:class])
+      )
       super
     end
 
@@ -135,20 +145,22 @@ module ApplicationHelper
     # [autofocus].  Otherwise IDs are not unique when multiple forms are open
     # and the first input gets focus.
     record_object, options = nil, record_object if record_object.is_a?(Hash)
-    options.merge!(builder: TabularFormBuilder, skip_default_ids: true)
+    extra_options = {builder: TabularFormBuilder, skip_default_ids: true}
+    options = merge_attributes(options, extra_options)
     # TODO: set error message with setCustomValidity instead of rendering to flash?
     render_errors(record_object || record_name)
     fields_for(record_name, record_object, **options, &block)
   end
 
   def tabular_form_with(**options, &block)
-    options = options.deep_merge(builder: TabularFormBuilder,
+    extra_options = {builder: TabularFormBuilder, class: 'tabular-form',
-                                 html: {autocomplete: 'off'})
+                     html: {autocomplete: 'off'}}
-    form_with(**options, &block)
+    form_with(**merge_attributes(options, extra_options), &block)
   end
 
   def svg_tag(source, label = nil, options = {})
-    svg_tag = tag.svg(options) do
+    label, options = nil, label if label.is_a? Hash
+    svg_tag = tag.svg(**options) do
       tag.use(href: "#{image_path(source + ".svg")}#icon")
     end
     label.blank? ? svg_tag : svg_tag + tag.span(label)
@@ -159,6 +171,8 @@ module ApplicationHelper
       ['measurements', 'scale-bathroom', :restricted],
       ['quantities', 'axis-arrow', :restricted, 'right'],
       ['units', 'weight-gram', :restricted],
+      ['charts', 'chart-line', :restricted],
+      # TODO: display users tab only if >1 user present; sole_user?/sole_admin?
       ['users', 'account-multiple-outline', :admin],
     ]
 
@@ -206,6 +220,7 @@ module ApplicationHelper
 
   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])
     Array(records).each { |record| flash[:alert] += record.errors.full_messages }
   end
@@ -215,8 +230,8 @@ module ApplicationHelper
       # Conversion of flash to Array only required because of Devise
       Array(messages).map do |message|
         tag.div class: "flash #{entry}" do
-          tag.div(sanitize(message)) + tag.button(sanitize("&times;"), tabindex: -1,
+          tag.span(sanitize(message)) +
-                                                  onclick: "this.parentElement.remove();")
+            svg_tag('pictograms/close-outline', {onclick: "this.parentElement.remove()"})
         end
       end
     end.join.html_safe
@@ -252,4 +267,11 @@ module ApplicationHelper
 
     [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,9 +1,9 @@
 module QuantitiesHelper
-  def quantities_check_boxes
+  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,
+    collection_check_boxes(nil, :quantity, quantities, :id, :to_s_with_depth,
                            include_hidden: false) do |b|
       content_tag :li, b.label(tabindex: -1) { b.check_box + b.text }
     end

app/javascript/application.js

@@ -9,6 +9,196 @@ function showPage(event) {
 }
 document.addEventListener('turbo:load', showPage)
 
+function groupMeasurements() {
+  var tbody = document.getElementById('measurements');
+  if (!tbody) return;
+  var prevTakenAt = null;
+  Array.from(tbody.querySelectorAll('tr[data-taken-at]'))
+    .filter(function(row) { return row.style.display !== 'none' })
+    .forEach(function(row) {
+      var takenAt = row.dataset.takenAt;
+      row.classList.toggle('grouped', takenAt !== null && takenAt === prevTakenAt);
+      prevTakenAt = takenAt;
+    });
+}
+
+function buildWideTable() {
+  var tbody = document.getElementById('measurements');
+  var wideContainer = document.getElementById('measurements-wide');
+  if (!tbody || !wideContainer) return;
+
+  var rows = Array.from(tbody.querySelectorAll('tr[data-taken-at]'));
+
+  if (rows.length === 0) { wideContainer.innerHTML = ''; return; }
+
+  // Unique quantities in alphabetical order
+  var qOrder = [], qSeen = new Set();
+  rows.forEach(function(r) {
+    var id = r.dataset.quantityId;
+    if (id && !qSeen.has(id)) { qSeen.add(id); qOrder.push({id: id, name: r.dataset.quantityName}); }
+  });
+  qOrder.sort(function(a, b) { return a.name.localeCompare(b.name); });
+
+  // Group rows by taken_at, preserving order
+  var groups = [], groupMap = new Map();
+  rows.forEach(function(r) {
+    var key = r.dataset.takenAt || '';
+    if (!groupMap.has(key)) { var g = {rows: []}; groups.push(g); groupMap.set(key, g); }
+    groupMap.get(key).rows.push(r);
+  });
+
+  // Read column headers from compact thead
+  var ths = document.querySelectorAll('.measurements-compact thead th');
+  var takenAtHeader = ths[3] ? ths[3].textContent : '';
+  var createdAtHeader = ths[4] ? ths[4].textContent : '';
+
+  var table = document.createElement('table');
+  table.className = 'items-table';
+
+  // Header
+  var thead = table.createTHead();
+  var hrow = thead.insertRow();
+  [takenAtHeader].concat(qOrder.map(function(q) { return q.name; })).concat([createdAtHeader]).forEach(function(text) {
+    var th = document.createElement('th');
+    th.textContent = text;
+    hrow.appendChild(th);
+  });
+
+  // Body
+  var tbodyEl = table.createTBody();
+  groups.forEach(function(group) {
+    var tr = tbodyEl.insertRow();
+
+    // Taken at
+    var tdTime = tr.insertCell();
+    var takenAtEl = group.rows[0].querySelector('.taken-at');
+    tdTime.textContent = takenAtEl ? takenAtEl.textContent : '';
+
+    // One cell per quantity
+    qOrder.forEach(function(q) {
+      var td = tr.insertCell();
+      var readoutRow = group.rows.find(function(r) { return r.dataset.quantityId === q.id; });
+      if (readoutRow) {
+        td.className = 'ralign';
+        var wrap = document.createElement('span');
+        wrap.className = 'wide-cell';
+        var editLink = readoutRow.querySelector('a.link');
+        if (editLink) {
+          var editUrl = editLink.href + (editLink.href.includes('?') ? '&' : '?') + 'view=wide';
+          var btn = document.createElement('button');
+          btn.className = 'link';
+          btn.type = 'button';
+          btn.dataset.editUrl = editUrl;
+          btn.addEventListener('click', function() { editMeasurementWide(this.dataset.editUrl); this.blur(); });
+          btn.textContent = readoutRow.dataset.value;
+          wrap.appendChild(btn);
+          wrap.appendChild(document.createTextNode('\u00a0' + readoutRow.dataset.unit));
+        } else {
+          wrap.appendChild(document.createTextNode(readoutRow.dataset.value + '\u00a0' + readoutRow.dataset.unit));
+        }
+        var srcActions = readoutRow.querySelector('td.flex');
+        if (srcActions) srcActions.querySelectorAll('form').forEach(function(f) {
+          var cloned = f.cloneNode(true);
+          var span = cloned.querySelector('button span');
+          if (span) span.remove();
+          wrap.appendChild(cloned);
+        });
+        td.appendChild(wrap);
+      }
+    });
+
+    // Created at (from first row of group)
+    var tdCreated = tr.insertCell();
+    var createdAtEl = group.rows[0].querySelector('.created-at');
+    tdCreated.textContent = createdAtEl ? createdAtEl.textContent : '';
+  });
+
+  wideContainer.innerHTML = '';
+  wideContainer.appendChild(table);
+}
+
+function buildCharts() {
+  var container = document.getElementById('measurements-charts');
+  var dataEl = document.getElementById('charts-data');
+  if (!container || !dataEl) return;
+
+  var readouts = JSON.parse(dataEl.textContent);
+  container.innerHTML = '';
+  if (readouts.length === 0) return;
+
+  // Data arrives sorted by taken_at from the server; group into per-quantity traces
+  var quantities = new Map();
+  readouts.forEach(function(r) {
+    if (!r.takenAt) return;
+    if (!quantities.has(r.quantityId)) {
+      quantities.set(r.quantityId, { name: r.quantityName, unit: r.unit, x: [], y: [] });
+    }
+    var q = quantities.get(r.quantityId);
+    q.x.push(r.takenAt);
+    q.y.push(r.value);
+  });
+
+  var traces = [];
+  quantities.forEach(function(q) {
+    traces.push({
+      x: q.x,
+      y: q.y,
+      mode: 'lines+markers',
+      type: 'scatter',
+      name: q.name + ' (' + q.unit + ')',
+      marker: { size: 5 }
+    });
+  });
+
+  var div = document.createElement('div');
+  div.className = 'chart-panel';
+  container.appendChild(div);
+
+  Plotly.newPlot(div, traces, {
+    xaxis: { type: 'date', tickformat: '%Y-%m-%d %H:%M' },
+    yaxis: {},
+    margin: { t: 20, r: 20, b: 80, l: 60 },
+    paper_bgcolor: 'transparent',
+    plot_bgcolor: 'transparent',
+    font: { family: 'system-ui' },
+    legend: { orientation: 'h', y: -0.25 }
+  }, { responsive: true, displayModeBar: false });
+}
+
+function getMeasurementsView() {
+  return localStorage.getItem('measurements-view') || 'compact';
+}
+
+function applyMeasurementsView(view) {
+  document.body.dataset.measurementsView = view;
+  if (view === 'wide') buildWideTable();
+}
+
+function setMeasurementsView(view) {
+  localStorage.setItem('measurements-view', view);
+  applyMeasurementsView(view);
+}
+window.setMeasurementsView = setMeasurementsView
+
+document.addEventListener('turbo:load', function() {
+  if (document.getElementById('charts-data')) {
+    buildCharts();
+    return;
+  }
+  var tbody = document.getElementById('measurements');
+  if (!tbody) return;
+  groupMeasurements();
+  applyMeasurementsView(getMeasurementsView());
+  new MutationObserver(function() {
+    groupMeasurements();
+    var view = getMeasurementsView();
+    if (view === 'wide') buildWideTable();
+  }).observe(tbody, {
+    childList: true, subtree: true,
+    attributes: true, attributeFilter: ['style']
+  });
+})
+
 function detailsChange(event) {
   var target = event.currentTarget
   var count = target.querySelectorAll('input:checked:not([disabled])').length
@@ -37,6 +227,77 @@ window.detailsObserver = new MutationObserver((mutations) => {
   mutations[0].target.dispatchEvent(new Event('change', {bubbles: true}))
 });
 
+function editMeasurementWide(url) {
+  fetch(url, {
+    headers: {
+      'Accept': 'text/vnd.turbo-stream.html',
+      'X-Requested-With': 'XMLHttpRequest'
+    }
+  })
+  .then(response => response.text())
+  .then(html => {
+    Turbo.renderStreamMessage(html);
+    requestAnimationFrame(() => {
+      var panel = document.getElementById('measurement_edit_form');
+      if (panel && panel.firstElementChild) {
+        panel.scrollIntoView({behavior: 'smooth', block: 'nearest'});
+      }
+    });
+  });
+}
+window.editMeasurementWide = editMeasurementWide
+
+function readoutUnitChanged(select) {
+  var button = select.closest('tr').querySelector('.set-default-unit');
+  if (select.value && select.value !== select.dataset.defaultUnitId) {
+    button.removeAttribute('disabled');
+    button.removeAttribute('aria-disabled');
+    button.removeAttribute('tabindex');
+  } else {
+    button.setAttribute('disabled', 'disabled');
+    button.setAttribute('aria-disabled', 'true');
+    button.setAttribute('tabindex', '-1');
+  }
+}
+window.readoutUnitChanged = readoutUnitChanged
+
+function setDefaultUnit(button) {
+  var select = button.closest('tr').querySelector('select[data-default-unit-id]');
+  var params = new URLSearchParams();
+  params.append('quantity[default_unit_id]', select.value);
+
+  fetch(button.dataset.path, {
+    body: params,
+    headers: {
+      'Accept': 'text/vnd.turbo-stream.html',
+      'X-CSRF-Token': document.head.querySelector('meta[name=csrf-token]').content,
+      'X-Requested-With': 'XMLHttpRequest'
+    },
+    method: 'PATCH'
+  })
+  .then(response => {
+    if (response.ok) {
+      select.dataset.defaultUnitId = select.value;
+      readoutUnitChanged(select);
+    }
+    return response.text();
+  })
+  .then(html => Turbo.renderStreamMessage(html));
+}
+window.setDefaultUnit = setDefaultUnit
+
+function formValidate(event) {
+  var id = event.submitter.getAttribute("data-validate")
+  if (!id) return;
+
+  var input = document.getElementById(id)
+  if (!input.checkValidity()) {
+    input.reportValidity()
+    event.preventDefault()
+  }
+}
+window.formValidate = formValidate
+
 
 /* Turbo stream actions */
 Turbo.StreamElement.prototype.disableElement = function(element) {

app/models/quantity.rb

@@ -1,9 +1,10 @@
 class Quantity < ApplicationRecord
-  ATTRIBUTES = [:name, :description, :parent_id]
+  ATTRIBUTES = [:name, :description, :parent_id, :default_unit_id]
   attr_cached :depth, :pathname
 
   belongs_to :user, optional: true
   belongs_to :parent, optional: true, class_name: "Quantity"
+  belongs_to :default_unit, optional: true, class_name: "Unit"
   has_many :subquantities, ->{ order(:name) }, class_name: "Quantity",
     inverse_of: :parent, dependent: :restrict_with_error
 
@@ -15,8 +16,8 @@ class Quantity < ApplicationRecord
     errors.add(:parent, :descendant_reference) if ancestor_of?(parent)
   end
   validates :name, presence: true, uniqueness: {scope: [:user_id, :parent_id]},
-    length: {maximum: type_for_attribute(:name).limit || Float::INFINITY}
+    length: {maximum: type_for_attribute(:name).limit}
-  validates :description, length: {maximum: type_for_attribute(:description).limit || Float::INFINITY}
+  validates :description, length: {maximum: type_for_attribute(:description).limit}
 
   # Update :depths of progenies after parent change
   before_save if: :parent_changed? do

app/models/readout.rb

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

app/models/setting.rb

@@ -1,20 +0,0 @@
-# Key-value store for runtime application settings that are configured through
-# the web setup wizard (or updated by an administrator) rather than hard-coded
-# in application.rb.
-#
-# Known keys:
-#   skip_email_confirmation  – "true"/"false", mirrors the homonymous option
-#                              that was previously in application.rb.
-class Setting < ApplicationRecord
-  validates :key, presence: true, uniqueness: true
-
-  # Return the string value stored for +key+, or +default+ when absent.
-  def self.get(key, default: nil)
-    find_by(key: key)&.value || default
-  end
-
-  # Persist +value+ for +key+, creating the record if it does not yet exist.
-  def self.set(key, value)
-    find_or_initialize_by(key: key).update!(value: value.to_s)
-  end
-end

app/models/unit.rb

@@ -12,8 +12,8 @@ class Unit < ApplicationRecord
     errors.add(:base, :multilevel_nesting) if base.base_id?
   end
   validates :symbol, presence: true, uniqueness: {scope: :user_id},
-    length: {maximum: type_for_attribute(:symbol).limit || Float::INFINITY}
+    length: {maximum: type_for_attribute(:symbol).limit}
-  validates :description, length: {maximum: type_for_attribute(:description).limit || Float::INFINITY}
+  validates :description, length: {maximum: type_for_attribute(:description).limit}
   validates :multiplier, numericality: {equal_to: 1}, unless: :base
   validates :multiplier, numericality: {greater_than: 0, precision: true, scale: true}, if: :base
 
@@ -26,8 +26,10 @@ class Unit < ApplicationRecord
     other_bases_units = arel_table.alias('other_bases_units')
     sub_units = arel_table.alias('sub_units')
 
+    # TODO: move inner 'with' CTE to outer 'with recursive' - it can have multiple
+    # CTEs, even non recursive ones.
     Unit.with_recursive(actionable_units: [
-      self.or(Unit.defaults).left_joins(:base)
+      Unit.with(units: self.or(Unit.defaults)).left_joins(:base)
         .where.not(
           # Exclude Units that are/have default counterpart
           Arel::SelectManager.new.project(1).from(other_units)
@@ -63,14 +65,8 @@ class Unit < ApplicationRecord
         ),
       # Fill base Units to display proper hierarchy. Duplicates will be removed
       # by final group() - can't be deduplicated with UNION due to 'portable' field.
-      # Use ActiveRecord::Relation (not a raw SelectManager) so the SQLite Arel
+      arel_table.join(actionable_units).on(actionable_units[:base_id].eq(arel_table[:id]))
-      # visitor does not wrap it in parentheses inside the UNION ALL CTE body.
+        .project(arel_table[Arel.star], Arel::Nodes.build_quoted(nil).as('portable'))
-      Unit.joins(
-        arel_table.create_join(
-          actionable_units,
-          arel_table.create_on(actionable_units[:base_id].eq(arel_table[:id]))
-        )
-      ).select(arel_table[Arel.star], Arel::Nodes.build_quoted(nil).as('portable'))
     ]).select(units: [:base_id, :symbol])
       .select(
         units[:id].minimum.as('id'), # can be ANY_VALUE()
@@ -78,7 +74,7 @@ class Unit < ApplicationRecord
         Arel::Nodes.build_quoted(1).as('multiplier'), # disregard multiplier when sorting
         units[:portable].minimum.as('portable')
       )
-      .from(units).group(units[:base_id], units[:symbol])
+      .from(units).group(:base_id, :symbol)
   }
   scope :ordered, ->{
     left_outer_joins(:base).order(ordering)
@@ -87,8 +83,8 @@ class Unit < ApplicationRecord
   def self.ordering
     [arel_table.coalesce(Arel::Table.new(:bases_units)[:symbol], arel_table[:symbol]),
      arel_table[:base_id].not_eq(nil),
-     arel_table[:multiplier],
+     :multiplier,
-     arel_table[:symbol]]
+     :symbol]
   end
 
   before_destroy do

app/views/charts/index.html.erb

@@ -0,0 +1,2 @@
+<div class="main-area" id="measurements-charts"></div>
+<script id="charts-data" type="application/json"><%= raw @readouts_json %></script>

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

@@ -5,7 +5,7 @@
   </td>
 
   <% if current_user.at_least(:active) %>
-    <td class="actions">
+    <td class="flex">
       <% unless unit.portable.nil? %>
         <% if unit.default? %>
           <%= image_button_to_if unit.portable?, t('.import'), 'download-outline',

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

@@ -8,7 +8,7 @@
     class: 'tools-area' %>
 </div>
 
-<table class="main-area items">
+<table class="main-area items-table">
   <thead>
     <tr>
       <th><%= Unit.human_attribute_name(:symbol) %></th>

app/views/layouts/application.html.erb

@@ -14,6 +14,7 @@
     <%= csp_meta_tag %>
 
     <%= stylesheet_link_tag "spreadsheet" %>
+    <script src="https://cdn.plot.ly/plotly-basic-2.35.2.min.js"></script>
     <%= javascript_importmap_tags %>
 
     <%#= turbo_page_requires_reload_tag %>
@@ -23,10 +24,10 @@
   </head>
 
   <body>
-    <header class="hflex">
+    <header class="flex">
       <%= image_link_to t(".source_code"), "code-braces", source_code_url %>
       <%= image_link_to t(".issue_tracker"), "bug-outline", issue_tracker_url,
-            class: "extendedright" %>
+        class: "rextend" %>
       <% if user_signed_in? %>
         <%= image_link_to_unless_current(current_user, "account-wrench-outline",
           edit_user_registration_path) %>

app/views/measurements/_edit_form.html.erb

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

app/views/measurements/_edit_form_close.html.erb

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

app/views/measurements/_edit_panel.html.erb

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

app/views/measurements/_form.html.erb

@@ -1,28 +1,37 @@
 <%= tabular_form_with model: Measurement.new, id: :measurement_form,
-  class: 'topside-area vflex', html: {onkeydown: 'formProcessKey(event)'} do |form| %>
+  class: 'topside-area flex vertical center',
-  <table class="items centered">
+  html: {onkeydown: 'formProcessKey(event)'} do |form| %>
-    <tbody id="readouts"></tbody>
+
+  <table class="items-table center">
+    <tbody id="readouts">
+      <%= tabular_fields_for @measurement do |form| %>
+        <tr class="italic">
+          <td class="hexpand hmin50"><%= t '.taken_at_html' %></td>
+          <td colspan="3" class="ralign">
+            <%= form.datetime_field :taken_at, required: true, value: Time.current.strftime('%Y-%m-%dT%H:%M') %>
+          </td>
+        </tr>
+      <% end %>
+    </tbody>
   </table>
 
-  <div class="hflex">
+  <%# TODO: right-click selection; unnecessary with hierarchical tags? %>
-    <%# TODO: right-click selection %>
+  <details id="quantity_select" class="center hexpand" open
-    <details id="quantity_select" class="hexpand" open
+           onkeydown="detailsProcessKey(event)">
-             onkeydown="detailsProcessKey(event)">
+    <summary autofocus>
-      <summary autofocus>
+      <!-- TODO: Set content with CSS when span empty to avoid duplication -->
-        <!-- TODO: Set content with CSS when span empty to avoid duplication -->
+      <span data-prompt="<%= t('.select_quantity') %>">
-        <span data-prompt="<%= t('.select_quantity') %>">
+        <%= t('.select_quantity') %>
-          <%= t('.select_quantity') %>
+      </span>
-        </span>
+      <%= image_button_tag t(:apply), "update", name: nil, disabled: true,
-        <%= image_button_tag t(:apply), "update", name: nil, disabled: true,
+        formaction: new_readout_path, formmethod: :get, formnovalidate: true,
-          formaction: new_readout_path, formmethod: :get, formnovalidate: true,
+        data: {turbo_stream: true} %>
-          data: {turbo_stream: true} %>
+    </summary>
-      </summary>
+    <ul><%= quantities_check_boxes(@quantities) %></ul>
-      <ul><%= quantities_check_boxes %></ul>
+  </details>
-    </details>
-    <%= form.button id: :create_measurement_button, disabled: true -%>
-  </div>
 
-  <div class="hflex reverse">
+  <div class="flex reverse">
+    <%= form.button id: :create_measurement_button, disabled: true -%>
     <%= image_link_to t(:cancel), "close-outline", measurements_path, name: :cancel,
       class: 'dangerous', onclick: render_turbo_stream('form_close') %>
   </div>

app/views/measurements/_readout.html.erb

@@ -0,0 +1,22 @@
+<%= tag.tr id: dom_id(readout), data: {taken_at: readout.taken_at&.iso8601,
+  quantity_id: readout.quantity_id, quantity_name: readout.quantity.name,
+  value: format("%.10g", readout.value), unit: readout.unit.symbol} do %>
+  <td>
+    <% if current_user.at_least(:active) %>
+      <%= link_to readout.quantity, edit_measurement_path(readout),
+        class: 'link', onclick: 'this.blur();', data: {turbo_stream: true} %>
+    <% else %>
+      <%= readout.quantity %>
+    <% end %>
+  </td>
+  <td class="ralign"><%= format("%.10g", readout.value) %></td>
+  <td><%= readout.unit %></td>
+  <td class="taken-at"><%= l(readout.taken_at) if readout.taken_at %></td>
+  <td class="created-at"><%= l(readout.created_at) %></td>
+  <% if current_user.at_least(:active) %>
+    <td class="flex">
+      <%= image_button_to t('.destroy'), 'delete-outline', measurement_path(readout),
+        method: :delete, data: {turbo_stream: true} %>
+    </td>
+  <% end %>
+<% end %>

app/views/measurements/edit.turbo_stream.erb

@@ -0,0 +1,18 @@
+<% ids = {row: dom_id(@readout, :edit),
+          hidden_row: dom_id(@readout),
+          link: nil,
+          form_tag: dom_id(@readout, :edit, :form)} %>
+
+<% if params[:view] == 'wide' %>
+  <%= turbo_stream.update :measurement_edit_form, partial: 'edit_panel' %>
+  <%= turbo_stream.hide ids[:hidden_row] %>
+<% else %>
+  <%= turbo_stream.append :measurement_edit_form do %>
+    <%- tabular_form_with model: @readout, url: measurement_path(@readout),
+      html: {id: ids[:form_tag]} do %>
+    <% end %>
+  <% end %>
+  <%= turbo_stream.hide ids[:hidden_row] %>
+  <%= turbo_stream.remove ids[:row] %>
+  <%= turbo_stream.after @readout, partial: 'edit_form', locals: ids -%>
+<% end %>

app/views/measurements/index.html.erb

@@ -5,10 +5,36 @@
       id: :new_measurement_link, onclick: 'this.blur();',
       data: {turbo_stream: true} %>
   <% end %>
+  <%= image_button_tag '', 'view-rows', name: nil, type: 'button',
+    class: 'view-toggle', title: t('.view_compact'),
+    data: {view: 'compact'}, onclick: "setMeasurementsView('compact')" %>
+  <%= image_button_tag '', 'view-columns', name: nil, type: 'button',
+    class: 'view-toggle', title: t('.view_wide'),
+    data: {view: 'wide'}, onclick: "setMeasurementsView('wide')" %>
+
+</div>
+
+<div class="main-area measurements-section">
+  <%= tag.div id: :measurement_edit_form %>
+  <table class="items-table measurements-compact">
+    <thead>
+      <tr>
+        <th><%= Quantity.model_name.human %></th>
+        <th><%= Readout.human_attribute_name(:value) %></th>
+        <th><%= Unit.model_name.human %></th>
+        <th><%= Readout.human_attribute_name(:taken_at) %></th>
+        <th><%= Readout.human_attribute_name(:created_at) %></th>
+        <% if current_user.at_least(:active) %>
+          <th></th>
+        <% end %>
+      </tr>
+    </thead>
+    <tbody id="measurements">
+      <%= render(partial: 'readout', collection: @measurements, as: :readout) || render_no_items %>
+    </tbody>
+  </table>
+
+  <div id="measurements-wide" class="measurements-wide"></div>
+
 </div>
 
-<table class="main-area">
-  <tbody id="measurements">
-    <%= render(@measurements) || render_no_items %>
-  </tbody>
-</table>

app/views/measurements/update.turbo_stream.erb

@@ -0,0 +1,2 @@
+<%= turbo_stream.close_form dom_id(@readout, :edit) %>
+<%= turbo_stream.replace @readout, partial: 'measurements/readout', locals: {readout: @readout} %>

app/views/quantities/_form.html.erb

@@ -8,8 +8,13 @@
     <td>
       <%= form.text_area :description, cols: 30, rows: 1, escape: false %>
     </td>
+    <td>
+      <%= form.collection_select :default_unit_id, @user_units, :id,
+        ->(u){ sanitize('&emsp;' * (u.base_id? ? 1 : 0) + u.symbol) },
+        {include_blank: true}, onchange: "this.dataset.changed = ''" %>
+    </td>
 
-    <td class="actions">
+    <td class="flex">
       <%= form.button %>
       <%= image_link_to t(:cancel), "close-outline", quantities_path, class: 'dangerous',
         name: :cancel, onclick: render_turbo_stream('form_close', {row: row}) %>

app/views/quantities/_quantity.html.erb

@@ -5,14 +5,15 @@
            data: {drag_path: reparent_quantity_path(quantity), drop_id: dom_id(quantity),
                   drop_id_param: "quantity[parent_id]"} do %>
 
-  <td class="link" style="--depth:<%= quantity.depth %>">
+  <td style="--depth:<%= quantity.depth %>">
-    <%= link_to quantity, edit_quantity_path(quantity), onclick: 'this.blur();',
+    <%= link_to quantity, edit_quantity_path(quantity), class: 'link',
-      data: {turbo_stream: true} %>
+      onclick: 'this.blur();', data: {turbo_stream: true} %>
   </td>
   <td><%= quantity.description %></td>
+  <td><%= quantity.default_unit&.symbol %></td>
 
   <% if current_user.at_least(:active) %>
-    <td class="actions">
+    <td class="flex">
       <%= image_link_to t('.new_subquantity'), 'plus-outline', new_quantity_path(quantity),
         id: dom_id(quantity, :new, :link), onclick: 'this.blur();', data: {turbo_stream: true} %>
 

app/views/quantities/index.html.erb

@@ -8,13 +8,15 @@
     class: 'tools-area' %>
 </div>
 
+<%# TODO: remove? form can be inserted directly, e.g. at the end of index %>
 <%= tag.div class: 'main-area', id: :quantity_form %>
 
-<table class="main-area items">
+<table class="main-area items-table">
   <thead>
     <tr>
       <th><%= Quantity.human_attribute_name(:name) %></th>
-      <th><%= Quantity.human_attribute_name(:description) %></th>
+      <th class="hexpand"><%= Quantity.human_attribute_name(:description) %></th>
+      <th><%= Quantity.human_attribute_name(:default_unit) %></th>
       <% if current_user.at_least(:active) %>
         <th><%= t :actions %></th>
         <th></th>
@@ -24,7 +26,7 @@
                ondragover: "dragOver(event)", ondrop: "drop(event)",
                ondragenter: "dragEnter(event)", ondragleave: "dragLeave(event)",
                data: {drop_id: "quantity_", drop_id_param: "quantity[parent_id]"} do %>
-      <th colspan="4"><%= t '.top_level_drop' %></th>
+      <th colspan="5"><%= t '.top_level_drop' %></th>
     <% end %>
   </thead>
   <tbody id="quantities">

app/views/readouts/_form.html.erb

@@ -1,25 +1,31 @@
 <%# TODO: add readout reordering by dragging %>
 <%= tabular_fields_for 'readouts[]', readout do |form| %>
   <%- tag.tr id: dom_id(readout.quantity, :new, :readout) do %>
-    <td class="actions">
+    <td>
+      <%# TODO: add grayed readout index (in separate column?) %>
+      <%= readout.quantity.relative_pathname(@superquantity) %>
+      <%= form.hidden_field :quantity_id %>
+    </td>
+    <td>
+      <%= form.number_field :value, required: true, autofocus: readout_counter == 0 %>
+    </td>
+    <td>
+      <%= form.collection_select :unit_id, @user_units, :id,
+        ->(u){ sanitize('&emsp;' * (u.base_id ? 1 : 0) + u.symbol) },
+        {prompt: '', disabled: '', selected: readout.quantity.default_unit_id || ''}, required: true,
+        data: {default_unit_id: readout.quantity.default_unit_id || ''},
+        onchange: "readoutUnitChanged(this)" %>
+    </td>
+    <td class="flex">
       <%# TODO: change to _link_ after giving up displaying relative paths %>
+      <%= image_button_tag '', 'check-circle-outline',
+        class: 'set-default-unit', name: nil, type: 'button', disabled: true,
+        title: t('readouts.form.set_default_unit'),
+        data: {path: quantity_path(readout.quantity)},
+        onclick: 'setDefaultUnit(this)' %>
       <%= image_button_tag '', 'delete-outline', class: 'dangerous', name: nil,
         formaction: discard_readouts_path(readout.quantity),
         formmethod: :get, formnovalidate: true, data: {turbo_stream: true} %>
     </td>
-    <td>
-      <%= readout.quantity.relative_pathname(@superquantity) %>
-    </td>
-    <td>
-      <%= form.number_field :value, required: true,
-        size: readout.type_for_attribute(:value).precision / 2,
-        autofocus: readout_counter == 0 %>
-    </td>
-    <td>
-      <%= form.hidden_field :quantity_id %>
-      <%= form.collection_select :unit_id, @user_units, :id,
-        ->(u){ sanitize('&emsp;' * (u.base_id ? 1 : 0) + u.symbol) },
-        {prompt: t('.select_unit'), disabled: '', selected: ''}, required: true %>
-    </td>
   <% end %>
 <% end %>

app/views/setup/new.html.erb

@@ -1,39 +0,0 @@
-<%= form_with url: setup_path, method: :post, class: "labeled-form main-area" do %>
-
-  <h3 style="grid-column: 1 / -1; text-align: left; margin: 0;">
-    <%= t(".admin_account") %>
-  </h3>
-
-  <label for="admin_email"><%= t(".admin_email") %></label>
-  <%= email_field_tag :admin_email, params[:admin_email],
-        id: "admin_email", required: true, size: 30, autofocus: true,
-        autocomplete: "email" %>
-
-  <label for="admin_password"><%= t(".admin_password") %></label>
-  <%= password_field_tag :admin_password, nil,
-        id: "admin_password", required: true, size: 30,
-        autocomplete: "new-password" %>
-
-  <label for="admin_password_confirmation"><%= t(".admin_password_confirmation") %></label>
-  <%= password_field_tag :admin_password_confirmation, nil,
-        id: "admin_password_confirmation", required: true, size: 30,
-        autocomplete: "off" %>
-
-  <h3 style="grid-column: 1 / -1; text-align: left; margin: 0.5em 0 0 0;">
-    <%= t(".options") %>
-  </h3>
-
-  <label for="skip_email_confirmation" style="grid-column: 1 / 3; text-align: left;">
-    <%= check_box_tag :skip_email_confirmation, "1",
-          params[:skip_email_confirmation] == "1",
-          id: "skip_email_confirmation" %>
-    <%= t(".skip_email_confirmation") %>
-  </label>
-
-  <label for="seed_units" style="grid-column: 1 / 3; text-align: left;">
-    <%= check_box_tag :seed_units, "1", true, id: "seed_units" %>
-    <%= t(".seed_units") %>
-  </label>
-
-  <%= submit_tag t(".submit") %>
-<% end %>

app/views/units/_form.html.erb

@@ -8,11 +8,11 @@
     <td>
       <%= form.text_area :description, cols: 30, rows: 1, escape: false %>
     </td>
-    <td class="number">
+    <td>
       <%= form.number_field :multiplier, required: true, size: 10, min: :step if @unit.base_id? %>
     </td>
 
-    <td class="actions">
+    <td class="flex">
       <%= form.button %>
       <%= image_link_to t(:cancel), "close-outline", units_path, class: 'dangerous',
         name: :cancel, onclick: render_turbo_stream('form_close', {row: row}) %>

app/views/units/_unit.html.erb

@@ -6,14 +6,15 @@
                   drop_id: dom_id(unit.base || unit),
                   drop_id_param: "unit[base_id]"} do %>
 
-  <td class="link" style="--depth:<%= unit.base_id? ? 1 : 0 %>">
+  <td style="--depth:<%= unit.base_id? ? 1 : 0 %>">
-    <%= link_to unit, edit_unit_path(unit), onclick: 'this.blur();', data: {turbo_stream: true} %>
+    <%= link_to unit, edit_unit_path(unit), class: 'link', onclick: 'this.blur();',
+      data: {turbo_stream: true} %>
   </td>
   <td><%= unit.description %></td>
-  <td class="number"><%= unit.multiplier.to_html %></td>
+  <td class="ralign"><%= unit.multiplier.to_html %></td>
 
   <% if current_user.at_least(:active) %>
-    <td class="actions">
+    <td class="flex">
       <% unless unit.base_id? %>
         <%= image_link_to t('.new_subunit'), 'plus-outline', new_unit_path(unit),
           id: dom_id(unit, :new, :link), onclick: 'this.blur();', data: {turbo_stream: true} %>

app/views/units/index.html.erb

@@ -7,13 +7,14 @@
     class: 'tools-area' %>
 </div>
 
+<%# TODO: remove? form can be inserted directly, e.g. at the end of index %>
 <%= tag.div id: :unit_form %>
 
-<table class="main-area items">
+<table class="main-area items-table">
   <thead>
     <tr>
       <th><%= Unit.human_attribute_name(:symbol) %></th>
-      <th><%= Unit.human_attribute_name(:description) %></th>
+      <th class="hexpand"><%= Unit.human_attribute_name(:description) %></th>
       <th><%= Unit.human_attribute_name(:multiplier) %></th>
       <% if current_user.at_least(:active) %>
         <th><%= t :actions %></th>

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

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

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

@@ -1,9 +0,0 @@
-<%= labeled_form_for resource, url: user_confirmation_path,
-  html: {class: 'main-area'} 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 %>

app/views/users/index.html.erb

@@ -1,4 +1,4 @@
-<table class="main-area items" id="users">
+<table class="main-area items-table" id="users">
   <thead>
     <tr>
       <th><%= User.human_attribute_name(:email) %></th>
@@ -11,7 +11,7 @@
   <tbody>
     <% @users.each do |user| %>
       <tr>
-        <td class="link"><%= link_to user, user_path(user) %></td>
+        <td><%= link_to user, user_path(user), class: 'link' %></td>
         <td>
           <% if user == current_user %>
             <%= user.status %>
@@ -22,11 +22,11 @@
             <% end %>
           <% end %>
         </td>
-        <td class="svg">
+        <td>
           <%= svg_tag 'pictograms/checkbox-marked-outline' if user.confirmed_at.present? %>
         </td>
         <td><%= l user.created_at, format: :without_tz %></td>
-        <td class="actions">
+        <td class="flex">
           <% if allow_disguise?(user) %>
             <%= image_link_to t('.disguise'), 'incognito', disguise_user_path(user) %>
           <% end %>

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

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

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

@@ -1,5 +1,5 @@
 <%= labeled_form_for resource, url: user_password_path,
-  html: {method: :put, class: 'main-area'} do |f| %>
+  html: {method: :put, class: 'main-area', data: {turbo: false}} do |f| %>
 
   <%= f.hidden_field :reset_password_token %>
 

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

@@ -1,8 +0,0 @@
-<%= labeled_form_for resource, url: user_password_path,
-  html: {class: 'main-area'} do |f| %>
-
-  <%= f.email_field :email, required: true, size: 30, autofocus: true,
-    autocomplete: 'email' %>
-
-  <%= f.submit t(:recover_password) %>
-<% end %>

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

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

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

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

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

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

config/application.rb.dist

@@ -54,9 +54,5 @@ module FixinMe
 
     # Sender address of account registration-related messages
     Devise.mailer_sender = 'noreply@localhost'
-
-    # Whether to skip e-mail confirmation for new registrations is configured
-    # through the web setup wizard and stored in the database (Setting model),
-    # so it does not need to be set here.
   end
 end

config/environments/test.rb

@@ -59,6 +59,6 @@ Rails.application.configure do
 
   config.log_level = :info
 
-  # Allow the default integration test host.
+  # Allow Capybara's dynamic test server host (127.0.0.1:<random_port>)
-  config.hosts << "www.example.com"
+  config.hosts << '127.0.0.1'
 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/locales/devise.en.yml

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

config/locales/en.yml

@@ -11,8 +11,13 @@ en:
   activerecord:
     attributes:
       quantity:
+        default_unit: Default unit
         description: Description
         name: Name
+      readout:
+        created_at: Recorded at
+        taken_at: Taken at
+        value: Value
       unit:
         base: Base unit
         description: Description
@@ -81,16 +86,34 @@ en:
       revert: Revert
       sign_out: Sign out
       source_code: Get code
+  readouts:
+    form:
+      set_default_unit: Set as default unit
+  charts:
+    navigation: Charts
   measurements:
     navigation: Measurements
     no_items: There are no measurements taken. You can Add some now.
     form:
-      select_quantity: select the measured quantities...
+      select_quantity: select quantities...
+      taken_at_html: Measurement taken at 
     index:
       new_measurement: Add measurement
-  readouts:
+      view_compact: Compact view
-    form:
+      view_wide: Wide view
-      select_unit: ...
+      view_charts: Charts
+    readout:
+      edit: Edit
+      destroy: Delete
+    create:
+      success:
+        one: Recorded 1 measurement.
+        other: Recorded %{count} measurements.
+      no_readouts: No readouts selected.
+    update:
+      success: Measurement updated.
+    destroy:
+      success: Measurement deleted.
   quantities:
     navigation: Quantities
     no_items: There are no configured quantities. You can Add some or Import from defaults.
@@ -150,7 +173,7 @@ en:
       edit:
         password_html: 'New password:%{password_length_hint_html}'
         update_password: Update password
-    registrations:
+    profiles:
       new:
         password_html: 'Password:%{password_length_hint_html}'
         password_confirmation: 'Retype password:'
@@ -163,30 +186,12 @@ en:
           <br><em>leave blank to keep unchanged</em>
           %{password_length_hint_html}
   actions: Actions
-  setup:
-    new:
-      admin_account: Admin account
-      admin_email: 'E-mail:'
-      admin_password: 'Password:'
-      admin_password_confirmation: 'Retype password:'
-      options: Options
-      skip_email_confirmation: Skip e-mail confirmation for new registrations
-      seed_units: Seed built-in default units
-      submit: Set up
-    create:
-      email_blank: E-mail cannot be blank.
-      password_blank: Password cannot be blank.
-      password_mismatch: Passwords do not match.
-      success: >
-        Installation complete. You can now sign in with the admin account you
-        just created.
   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

@@ -1,8 +1,6 @@
 Rails.application.routes.draw do
-  # Web-based installation wizard — only reachable when no admin exists yet.
-  resource :setup, only: [:new, :create], controller: :setup
-
   resources :measurements
+  resources :charts, only: [:index]
 
   resources :readouts, only: [:new] do
     collection {get 'new/:id/discard', action: :discard, as: :discard}
@@ -27,8 +25,9 @@ Rails.application.routes.draw do
   # https://github.com/heartcombo/devise/issues/5786
   connection = ActiveRecord::Base.connection
   if connection.schema_version && connection.table_exists?(:users)
+    # NOTE: change helper prefix from *_registration to *_profile once possible
     devise_for :users, path: '', path_names: {registration: 'profile'},
-      controllers: {registrations: :registrations}
+      controllers: {registrations: 'user/profiles'}
   end
 
   resources :users, only: [:index, :show, :update] do
@@ -37,9 +36,7 @@ Rails.application.routes.draw do
   end
 
   unauthenticated do
-    as :user do
+    root to: redirect('/sign_in')
-      root to: redirect('/sign_in')
-    end
   end
   root to: redirect('/units'), as: :user_root
 

db/migrate/20250121230456_create_readouts.rb

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

db/migrate/20260228171524_create_settings.rb

@@ -1,12 +0,0 @@
-class CreateSettings < ActiveRecord::Migration[7.2]
-  def change
-    create_table :settings do |t|
-      t.string :key, null: false
-      t.string :value
-
-      t.timestamps
-    end
-
-    add_index :settings, :key, unique: true
-  end
-end

db/migrate/20260402000000_add_taken_at_to_readouts.rb

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

db/migrate/20260403000000_add_default_unit_to_quantities.rb

@@ -0,0 +1,5 @@
+class AddDefaultUnitToQuantities < ActiveRecord::Migration[7.2]
+  def change
+    add_reference :quantities, :default_unit, foreign_key: {to_table: :units}, null: true
+  end
+end

db/schema.rb

@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema[7.2].define(version: 2025_01_21_230456) do
+ActiveRecord::Schema[7.2].define(version: 2026_04_03_000000) do
   create_table "quantities", charset: "utf8mb4", collation: "utf8mb4_0900_as_ci", force: :cascade do |t|
     t.bigint "user_id"
     t.string "name", limit: 31, null: false
@@ -20,6 +20,8 @@ ActiveRecord::Schema[7.2].define(version: 2025_01_21_230456) do
     t.datetime "updated_at", null: false
     t.integer "depth", default: 0, null: false
     t.string "pathname", limit: 511, null: false
+    t.bigint "default_unit_id"
+    t.index ["default_unit_id"], name: "index_quantities_on_default_unit_id"
     t.index ["parent_id"], name: "index_quantities_on_parent_id"
     t.index ["user_id", "parent_id", "name"], name: "index_quantities_on_user_id_and_parent_id_and_name", unique: true
     t.index ["user_id"], name: "index_quantities_on_user_id"
@@ -32,6 +34,7 @@ ActiveRecord::Schema[7.2].define(version: 2025_01_21_230456) do
     t.decimal "value", precision: 30, scale: 15, null: false
     t.datetime "created_at", null: false
     t.datetime "updated_at", null: false
+    t.datetime "taken_at"
     t.index ["quantity_id", "created_at"], name: "index_readouts_on_quantity_id_and_created_at", unique: true
     t.index ["quantity_id"], name: "index_readouts_on_quantity_id"
     t.index ["unit_id"], name: "index_readouts_on_unit_id"
@@ -70,6 +73,7 @@ ActiveRecord::Schema[7.2].define(version: 2025_01_21_230456) do
   end
 
   add_foreign_key "quantities", "quantities", column: "parent_id", on_delete: :cascade
+  add_foreign_key "quantities", "units", column: "default_unit_id"
   add_foreign_key "quantities", "users"
   add_foreign_key "readouts", "quantities"
   add_foreign_key "readouts", "units"

db/seeds.rb

@@ -3,17 +3,6 @@
 #   bin/rails db:seed
 # command (or created alongside the database with db:setup).
 # Seeding process should be idempotent.
-#
-# Admin account setup
-# -------------------
-# The preferred way to create the first admin account is through the web setup
-# wizard, which is shown automatically on the first visit when no admin exists.
-# The wizard also lets you configure runtime options (e.g. skip e-mail
-# confirmation) and seed the default units without using the command line.
-#
-# The block below provides an alternative CLI path for headless / automated
-# deployments.  It is skipped when an admin account already exists (e.g. after
-# the web wizard has run).
 
 User.transaction do
   break if User.find_by status: :admin

lib/tasks/test_multi_db.rake

@@ -1,50 +0,0 @@
-namespace :test do
-  desc "Run Rails tests against all supported database adapters (SQLite, MySQL)"
-  task :all_adapters do
-    # DATABASE_URL overrides the adapter from database.yml at runtime.
-    # MySQL requires the mysql2 gem: bundle install --with mysql
-    adapters = {
-      "SQLite" => {
-        "DATABASE_URL" => "sqlite3:db/test.sqlite3"
-      },
-      "MySQL" => {
-        "DATABASE_URL" => format(
-          "mysql2://%s:%s@%s/%s",
-          ENV.fetch("DATABASE_USERNAME", "root"),
-          ENV.fetch("DATABASE_PASSWORD", ""),
-          ENV.fetch("DATABASE_HOST", "127.0.0.1"),
-          ENV.fetch("DATABASE_NAME", "fixin_test")
-        )
-      }
-    }
-
-    failed = []
-
-    adapters.each do |name, extra_env|
-      puts "\n#{"=" * 60}"
-      puts "  Running tests with #{name}"
-      puts "=" * 60
-
-      env = ENV.to_h.merge("RAILS_ENV" => "test").merge(extra_env)
-
-      # Reset test database; db:drop may fail on first run — that's fine
-      system(env, "bin/rails db:drop")
-      unless system(env, "bin/rails db:create db:schema:load")
-        failed << "#{name} (database setup)"
-        next
-      end
-
-      failed << name unless system(env, "bin/rails test")
-    end
-
-    puts "\n#{"=" * 60}"
-    if failed.any?
-      puts "  FAILED: #{failed.join(", ")}"
-      puts "=" * 60
-      exit 1
-    else
-      puts "  All adapters passed!"
-      puts "=" * 60
-    end
-  end
-end

test/application_system_test_case.rb

@@ -1,6 +1,7 @@
 require "test_helper"
 
 class ApplicationSystemTestCase < ActionDispatch::SystemTestCase
+  include ActionView::Helpers::SanitizeHelper
   include ActionView::Helpers::UrlHelper
 
   # NOTE: geckodriver installed with Firefox, ignore incompatibility warning
@@ -32,7 +33,8 @@ class ApplicationSystemTestCase < ActionDispatch::SystemTestCase
   # Allow skipping interpolations when translating for testing purposes
   INTERPOLATION_PATTERNS = Regexp.union(I18n.config.interpolation_patterns)
   def translate(key, **options)
-    options.empty? ? super.split(INTERPOLATION_PATTERNS, 2).first : super
+    translation = options.empty? ? super.split(INTERPOLATION_PATTERNS, 2).first : super
+    sanitize(translation, tags: [])
   end
   alias :t :translate
 

test/controllers/charts_controller_test.rb

@@ -0,0 +1,63 @@
+require "test_helper"
+
+class ChartsControllerTest < ActionDispatch::IntegrationTest
+  setup do
+    host! '127.0.0.1'
+    @user = users(:alice)
+    post new_user_session_path, params: { user: { email: @user.email, password: 'alice' } }
+    @quantity = @user.quantities.create!(name: 'Weight')
+    @unit = @user.units.create!(symbol: 'kg')
+  end
+
+  test "requires authentication" do
+    delete destroy_user_session_path
+    get charts_path
+    assert_response :redirect
+  end
+
+  test "index returns ok" do
+    get charts_path
+    assert_response :success
+  end
+
+  test "embeds readout data as JSON in script tag" do
+    users(:alice).readouts.create!(quantity: @quantity, unit: @unit, value: 82.5, taken_at: 1.day.ago)
+
+    get charts_path
+
+    assert_select 'script#charts-data[type="application/json"]' do |elements|
+      data = JSON.parse(elements.first.children.first.to_s)
+      assert_equal 1, data.size
+      assert_equal 'Weight', data.first['quantityName']
+      assert_in_delta 82.5, data.first['value']
+      assert_equal 'kg', data.first['unit']
+      assert_not_nil data.first['takenAt']
+    end
+  end
+
+  test "orders readouts by taken_at ascending" do
+    older = users(:alice).readouts.create!(quantity: @quantity, unit: @unit, value: 80.0, taken_at: 2.days.ago)
+    newer = users(:alice).readouts.create!(quantity: @quantity, unit: @unit, value: 82.5, taken_at: 1.day.ago)
+
+    get charts_path
+
+    assert_select 'script#charts-data[type="application/json"]' do |elements|
+      data = JSON.parse(elements.first.children.first.to_s)
+      assert_equal older.taken_at.iso8601, data.first['takenAt']
+      assert_equal newer.taken_at.iso8601, data.last['takenAt']
+    end
+  end
+
+  test "does not expose other users readouts" do
+    bob_quantity = users(:bob).quantities.create!(name: 'Steps')
+    bob_unit = users(:bob).units.create!(symbol: 'steps')
+    users(:bob).readouts.create!(quantity: bob_quantity, unit: bob_unit, value: 5000, taken_at: 1.day.ago)
+
+    get charts_path
+
+    assert_select 'script#charts-data[type="application/json"]' do |elements|
+      data = JSON.parse(elements.first.children.first.to_s)
+      assert data.none? { |r| r['quantityName'] == 'Steps' }, "Bob's data must not appear"
+    end
+  end
+end

test/controllers/default/units_controller_test.rb

@@ -1,12 +1,8 @@
 require "test_helper"
 
 class Default::UnitsControllerTest < ActionDispatch::IntegrationTest
-  setup do
-    sign_in users(:alice)
-  end
-
   test "should get index" do
-    get default_units_url
+    get units_defaults_index_url
     assert_response :success
   end
 end

test/controllers/measurements_controller_test.rb

@@ -1,8 +1,7 @@
 require "test_helper"
 
 class MeasurementsControllerTest < ActionDispatch::IntegrationTest
-  #test "should get index" do
+  # test "the truth" do
-  #  get measurements_index_url
+  #   assert true
-  #  assert_response :success
+  # end
-  #end
 end

test/controllers/users_controller_test.rb

@@ -2,9 +2,7 @@ require "test_helper"
 
 class UsersControllerTest < ActionDispatch::IntegrationTest
   setup do
-    @admin = users(:admin)
+    @user = users(:one)
-    @user = users(:alice)
-    sign_in @admin
   end
 
   test "should get index" do
@@ -12,25 +10,39 @@ class UsersControllerTest < ActionDispatch::IntegrationTest
     assert_response :success
   end
 
+  test "should get new" do
+    get new_user_url
+    assert_response :success
+  end
+
+  test "should create user" do
+    assert_difference("User.count") do
+      post users_url, params: { user: { email: @user.email, status: @user.status } }
+    end
+
+    assert_redirected_to user_url(User.last)
+  end
+
   test "should show user" do
     get user_url(@user)
     assert_response :success
   end
 
+  test "should get edit" do
+    get edit_user_url(@user)
+    assert_response :success
+  end
+
   test "should update user" do
-    patch user_url(@user), params: { user: { status: :restricted } }, as: :turbo_stream
+    patch user_url(@user), params: { user: { email: @user.email, status: @user.status } }
-    assert_equal "restricted", @user.reload.status
+    assert_redirected_to user_url(@user)
   end
 
-  test "should not update self" do
+  test "should destroy user" do
-    patch user_url(@admin), params: { user: { status: :active } }, as: :turbo_stream,
+    assert_difference("User.count", -1) do
-      headers: { "HTTP_REFERER" => users_url }
+      delete user_url(@user)
-    assert_response :redirect
+    end
-  end
 
-  test "should forbid non-admin" do
+    assert_redirected_to users_url
-    sign_in @user
-    get users_url
-    assert_response :forbidden
   end
 end

test/system/charts_test.rb

@@ -0,0 +1,26 @@
+require "application_system_test_case"
+
+class ChartsTest < ApplicationSystemTestCase
+  setup do
+    @user = sign_in(user: users(:alice))
+    @quantity = @user.quantities.create!(name: 'Weight')
+    @unit = @user.units.create!(symbol: 'kg')
+    @user.readouts.create!(quantity: @quantity, unit: @unit, value: 82.5, taken_at: 1.day.ago)
+    @user.readouts.create!(quantity: @quantity, unit: @unit, value: 83.1, taken_at: Time.now)
+    visit charts_path
+  end
+
+  test "charts page is reachable from navigation" do
+    visit root_path
+    click_on t('charts.navigation')
+    assert_current_path charts_path
+  end
+
+  test "renders Plotly chart panel" do
+    assert_selector '#measurements-charts .chart-panel', wait: 5
+  end
+
+  test "chart legend shows quantity name with unit" do
+    assert_text 'Weight (kg)', wait: 5
+  end
+end

test/system/measurements_test.rb

@@ -0,0 +1,64 @@
+require "application_system_test_case"
+
+class MeasurementsTest < ApplicationSystemTestCase
+  setup do
+    @user = sign_in(user: users(:alice))
+
+    @quantity = @user.quantities.create!(name: 'Weight')
+    @unit = @user.units.create!(symbol: 'kg')
+    @readout = @user.readouts.create!(quantity: @quantity, unit: @unit, value: 82.5)
+
+    visit measurements_path
+  end
+
+  test "index shows quantity name as edit link for active user" do
+    within 'tbody' do
+      assert_selector :link, exact_text: @quantity.name
+    end
+  end
+
+  test "edit opens inline form on quantity link click" do
+    within 'tbody' do
+      click_on @quantity.name
+      assert_selector ':focus'
+      assert_selector 'input[name="readout[value]"]'
+    end
+  end
+
+  test "edit and update measurement value" do
+    within 'tbody' do
+      click_on @quantity.name
+      fill_in 'readout[value]', with: '83.1'
+      assert_difference ->{ @readout.reload.value }, 83.1 - @readout.value do
+        click_on t('helpers.submit.update')
+      end
+      assert_no_selector :fillable_field
+      assert_selector :link, exact_text: @quantity.name
+    end
+    assert_selector '.flash.notice', text: t('measurements.update.success')
+  end
+
+  test "cancel edit restores original row" do
+    within 'tbody' do
+      click_on @quantity.name
+      assert_selector 'input[name="readout[value]"]'
+      click_on t(:cancel)
+      assert_no_selector :fillable_field
+      assert_selector :link, exact_text: @quantity.name
+    end
+  end
+
+  test "wide view edit opens panel form" do
+    @readout.update!(taken_at: Time.now)
+    visit measurements_path
+    execute_script("localStorage.removeItem('measurements-view')")
+    visit measurements_path
+
+    find('button[data-view="wide"]').click
+    within '#measurements-wide' do
+      assert_text format("%.10g", 82.5), wait: 3
+      find('button.link').click
+    end
+    assert_selector '#measurement_edit_form input[name="readout[value]"]', wait: 5
+  end
+end

test/system/quantities_test.rb

@@ -0,0 +1,45 @@
+require "application_system_test_case"
+
+class QuantitiesTest < ApplicationSystemTestCase
+  setup do
+    @user = sign_in(user: users(:alice))
+    @unit = @user.units.create!(symbol: 'kg')
+    @quantity = @user.quantities.create!(name: 'Weight')
+    visit quantities_path
+  end
+
+  test "update button turns red when default unit changes" do
+    click_on 'Weight'
+
+    button = find('button[name=button]')
+    initial_color = evaluate_script("getComputedStyle(arguments[0]).backgroundColor", button)
+
+    select 'kg', from: 'quantity[default_unit_id]'
+
+    changed_color = evaluate_script("getComputedStyle(arguments[0]).backgroundColor", button)
+    refute_equal initial_color, changed_color, "Button color should change when default unit is altered"
+  end
+
+  test "saving default unit pre-selects it in measurements form" do
+    click_on 'Weight'
+    select 'kg', from: 'quantity[default_unit_id]'
+    click_on t('helpers.submit.update')
+    assert_selector '.flash.notice'
+
+    @quantity.reload
+    assert_equal @unit.id, @quantity.default_unit_id
+
+    visit measurements_path
+    find(:link_or_button, t('measurements.index.new_measurement')).click
+    assert_selector '#measurement_form'
+
+    within '#quantity_select' do
+      check 'Weight'
+    end
+    find('button[formaction]').click
+
+    within 'tbody#readouts' do
+      assert_selector "option[value='#{@unit.id}'][selected]"
+    end
+  end
+end

test/system/users_test.rb

@@ -5,8 +5,8 @@ class UsersTest < ApplicationSystemTestCase
     @admin = users(:admin)
   end
 
-  test "sign in" do
+  test 'sign in' do
-    visit new_user_session_path
+    visit root_url
     assert find_link(href: new_user_session_path)[:disabled]
 
     sign_in
@@ -14,16 +14,23 @@ class UsersTest < ApplicationSystemTestCase
     assert_text t('devise.sessions.signed_in')
   end
 
-  test 'sign in fails with invalid password' do
+  test 'sign in fails with invalid credentials' do
-    sign_in password: random_password
+    label = User.human_attribute_name(:email)
+    # Both: valid and invalid emails should give the same (paranoid) error message.
+    email = [users.sample.email, random_email].sample
+
+    visit root_url
+    fill_in label, with: email
+    fill_in User.human_attribute_name(:password), with: random_password
+    click_on t(:sign_in)
+
     assert_current_path new_user_session_path
-    assert_text t('devise.failure.not_found_in_database',
+    assert_text t('devise.failure.invalid', authentication_keys: label.downcase_first)
-                  authentication_keys: User.human_attribute_name(:email))
     assert find_link(href: new_user_session_path)[:disabled]
-    assert_not_empty find_field(User.human_attribute_name(:email)).value
+    assert has_field?(label, with: email)
   end
 
-  test "sign out" do
+  test 'sign out' do
     sign_in
     visit root_url
     click_on t("layouts.application.sign_out")
@@ -31,79 +38,106 @@ class UsersTest < ApplicationSystemTestCase
     assert_text t("devise.sessions.signed_out")
   end
 
-  test "recover password" do
+  test 'recover password' do
-    visit new_user_session_url
+    label = User.human_attribute_name(:email)
-    click_on t(:recover_password)
+    email = users.select(&:confirmed?).sample.email
+
+    visit root_url
+    fill_in label, with: email
+    # Form validations should allow empty password.
+    assert has_field?(User.human_attribute_name(:password), with: nil)
 
-    fill_in User.human_attribute_name(:email),
-      with: users.select(&:confirmed?).sample.email
     assert_emails 1 do
       click_on t(:recover_password)
-      # Wait until redirected to make sure async request has been processed
       assert_current_path new_user_session_path
+      # Wait for flash message to make sure async request has been processed.
+      assert_text t("devise.passwords.send_paranoid_instructions")
     end
-    assert_text t("devise.passwords.send_instructions")
+    assert has_field?(label, with: email)
 
     with_last_email do |mail|
       visit Capybara.string(mail.body.to_s).find_link("Change my password")[:href]
+      assert_current_path edit_user_password_path, ignore_query: true
+      # Make sure flash message is not displayed twice.
+      assert_no_text t("devise.passwords.send_paranoid_instructions")
     end
     new_password = random_password
     fill_in t("users.passwords.edit.password_html"), with: new_password
     fill_in t("helpers.label.user.password_confirmation"), with: new_password
     assert_emails 1 do
       click_on t("users.passwords.edit.update_password")
-      # Wait until redirected to make sure async request has been processed
       assert_current_path units_path
+      assert_text t("devise.passwords.updated")
     end
-    assert_text t("devise.passwords.updated")
   end
 
-  test "register" do
+  test 'recover password for nonexistent user' do
-    visit new_user_session_url
+    label = User.human_attribute_name(:email)
+    email = random_email
+
+    visit root_url
+    fill_in label, with: email
+
+    assert_no_emails do
+      click_on t(:recover_password)
+      assert_current_path new_user_session_path
+      assert_text t("devise.passwords.send_paranoid_instructions")
+    end
+  end
+
+  test 'register' do
+    visit root_url
     click_on t(:register)
+    assert find_link(href: new_user_registration_path)[:disabled]
 
     fill_in User.human_attribute_name(:email), with: random_email
     password = random_password
     fill_in User.human_attribute_name(:password), with: password
-    fill_in t("users.registrations.new.password_confirmation"), with: password
+    fill_in t("users.profiles.new.password_confirmation"), with: password
-    assert_difference ->{User.count}, 1 do
+    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
+        assert_text t("devise.registrations.signed_up_but_unconfirmed")
       end
     end
-    assert_text t("devise.registrations.signed_up_but_unconfirmed")
 
-    with_last_email do |mail|
+    assert_changes ->{ User.last.confirmed? }, from: false, to: true do
-      visit Capybara.string(mail.body.to_s).find_link("Confirm my account")[:href]
+      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_text t("devise.confirmations.confirmed")
+      end
     end
-    assert_current_path new_user_session_path
-    assert_text t("devise.confirmations.confirmed")
-    assert User.last.confirmed?
   end
 
-  test "resend confirmation" do
+  test 'resend confirmation' do
-    visit new_user_session_url
+    label = User.human_attribute_name(:email)
-    click_on t(:register)
+    user = users.reject(&:confirmed?).sample
-    click_on t(:resend_confirmation)
+
+    visit root_url
+    click_on t(:register)
+    fill_in label, with: user.email
+    assert has_field?(User.human_attribute_name(:password), with: nil)
 
-    fill_in User.human_attribute_name(:email),
-      with: users.reject(&:confirmed?).sample.email
     assert_emails 1 do
       click_on t(:resend_confirmation)
-      # Wait until redirected to make sure async request has been processed
+      assert_current_path new_user_registration_path
-      assert_current_path new_user_session_path
+      assert_text t("devise.confirmations.send_paranoid_instructions")
     end
-    assert_current_path new_user_session_path
+    assert has_field?(label, with: user.email)
-    assert_text t("devise.confirmations.send_instructions")
 
-    with_last_email do |mail|
+    assert_changes ->{ user.reload.confirmed? }, from: false, to: true do
-      visit Capybara.string(mail.body.to_s).find_link("Confirm my account")[:href]
+      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|
@@ -113,7 +147,7 @@ class UsersTest < ApplicationSystemTestCase
     end
   end
 
-  test "disguise" do
+  test 'disguise' do
     user = users.select(&:admin?).select(&:confirmed?).sample
     sign_in user: user
 
@@ -129,7 +163,7 @@ class UsersTest < ApplicationSystemTestCase
     assert_link user.email
   end
 
-  test "disguise fails for admin when disallowed" do
+  test 'disguise fails for admin when disallowed' do
     user = users.select(&:admin?).select(&:confirmed?).sample
     sign_in user: user
 
@@ -142,13 +176,13 @@ class UsersTest < ApplicationSystemTestCase
     assert_title 'The change you wanted was rejected (422)'
   end
 
-  test "disguise forbidden for non admin" do
+  test 'disguise forbidden for non admin' do
     sign_in user: users.reject(&:admin?).select(&:confirmed?).sample
     visit disguise_user_path(User.all.sample)
     assert_title 'Access is forbidden to this page (403)'
   end
 
-  test "delete profile" do
+  test 'delete profile' do
     user = sign_in
     # TODO: remove condition after root_url changed to different path than
     # profile in routes.rb
@@ -156,23 +190,23 @@ class UsersTest < ApplicationSystemTestCase
       first(:link_or_button, user.email).click
     end
     assert_difference ->{ User.count }, -1 do
-      accept_confirm { click_on t("users.registrations.edit.delete") }
+      accept_confirm { click_on t("users.profiles.edit.delete") }
       assert_current_path new_user_session_path
     end
     assert_text t("devise.registrations.destroyed")
   end
 
-  test "index forbidden for non admin" do
+  test 'index forbidden for non admin' do
     sign_in user: users.reject(&:admin?).select(&:confirmed?).sample
     visit users_path
     assert_title "Access is forbidden to this page (403)"
   end
 
-  test "update profile" do
+  test 'update profile' do
     # TODO
   end
 
-  test "update status" do
+  test 'update status' do
     sign_in user: users.select(&:admin?).select(&:confirmed?).sample
     visit users_path
 
@@ -187,7 +221,7 @@ class UsersTest < ApplicationSystemTestCase
     assert_current_path users_path
   end
 
-  test "update status fails for admin when disallowed" do
+  test 'update status fails for admin when disallowed' do
     sign_in user: users.select(&:admin?).select(&:confirmed?).sample
     visit users_path
 
@@ -195,12 +229,12 @@ class UsersTest < ApplicationSystemTestCase
       user = User.find_by_email!(first(:link).text)
       inject_button_to first('td:not(.link)'), "update status", user_path(user), method: :patch,
         params: {user: {status: User.statuses.keys.sample}}, data: {turbo: false}
-      click_on "update status"
+      execute_script("arguments[0].click()", find_button("update status"))
     end
     assert_title 'The change you wanted was rejected (422)'
   end
 
-  test "update status forbidden for non admin" do
+  test 'update status forbidden for non admin' do
     sign_in user: users.reject(&:admin?).select(&:confirmed?).sample
     visit units_path
     inject_button_to find('body'), "update status", user_path(User.all.sample), method: :patch,

test/test_helper.rb

@@ -2,10 +2,6 @@ ENV["RAILS_ENV"] ||= "test"
 require_relative "../config/environment"
 require "rails/test_help"
 
-class ActionDispatch::IntegrationTest
-  include Devise::Test::IntegrationHelpers
-end
-
 class ActiveSupport::TestCase
   # Run tests in parallel with specified workers
   parallelize(workers: :number_of_processors)