Fix quantity ordered scope for SQLite: use pathname column instead of recursive CTE

SQLite's Arel visitor wraps CTE branches in extra parentheses, making
the UNION ALL inside recursive CTEs invalid. Also SQLite lacks LPAD()
and CAST(... AS BINARY). Fix by using the existing pathname column for
ordering on SQLite, which already encodes the hierarchical path.

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

DESIGN.md

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

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

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

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

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

app/assets/stylesheets/application.css

@@ -18,12 +18,10 @@
 /* Strive for simplicity:
  * * style elements/tags only - if possible,
  * * replace element/tag name with class name - if element has to be styled
- * differently depending on context (e.g. <form>, <table>, <a> as link/button),
+ * differently depending on context (e.g. form)
- * * 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;
@@ -55,36 +53,17 @@
 :focus-visible {
   outline: none;
 }
-/* NOTE: move to higher priority layer instead of using !important?; add CSS
- * @layer requirements in README */
-[disabled] {
-  border-color: var(--color-border-gray) !important;
-  color: var(--color-border-gray) !important;
-  /* NOTE: cannot set cursor when `pointer-events: none`; can be fixed by setting
-   * `cursor` on wrapping element.
-  cursor: not-allowed; */
-  fill: var(--color-border-gray) !important;
-  pointer-events: none !important;
-}
-/* Styles set `display` without distinguishing between [hidden] elements, making
- * them visible. */
-[hidden] {
-  display: none !important;
-}
 
 
 /* Color coding of input controls' background:
- *  blue - target for interaction with pointer,
+ *  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;
@@ -94,24 +73,56 @@ input,
 select {
   text-align: inherit;
 }
+a,
+button,
+input[type=submit] {
+  cursor: pointer;
+  text-decoration: none;
+  white-space: nowrap;
+}
+/* [hidden] submit controls cannot have `display` set as it makes them visible */
+.button,
+button:not([hidden]),
+input[type=submit]:not([hidden]),
+.tab {
+  align-items: center;
+  color: var(--color-gray);
+  display: flex;
+  fill: var(--color-gray);
+  font-weight: bold;
+}
+.button,
+button,
+input[type=submit] {
+  font-size: 0.8rem;
+  padding: 0.6em 0.5em;
+  width: fit-content;
+}
+input:not([type=submit]):not([type=checkbox]),
+select,
+summary,
+textarea {
+  padding: 0.2em 0.4em;
+}
+.button,
+button,
 input,
 select,
 summary,
 textarea {
-  border: 1px solid var(--color-gray);
+  border: solid 1px var(--color-gray);
   border-radius: 0.25em;
-  padding: 0.2em 0.4em;
 }
-svg {
+[name=cancel],
-  height: 1.4em;
+.auxiliary {
-  margin: 0 0.2em 0 0;
+  border-color: var(--color-border-gray);
-  width: 1.4em;
+  color: var(--color-nav-gray);
-}
+  fill: var(--color-nav-gray);
-svg:last-child {
-  margin-right: 0;
 }
+input[type=checkbox],
+svg,
 textarea {
-  margin: 0;
+  margin: 0
 }
 input[type=checkbox] {
   accent-color: var(--color-blue);
@@ -119,20 +130,17 @@ input[type=checkbox] {
   -webkit-appearance: none;
   display: flex;
   height: 1.1em;
-  margin: 0;
-  padding: 0;
   width: 1.1em;
 }
 input[type=checkbox]:checked {
   appearance: checkbox;
   -webkit-appearance: checkbox;
 }
-/* Hide spin buttons of <input type=number>. */
+/* Hide spin buttons in input number fields */
-/* TODO: add spin buttons inside <input type=number>: before (-) and after (+) input. */
+/* TODO: add spin buttons inside input[number]: before (-) and after (+) input */
 input[type=number] {
   appearance: textfield;
   -moz-appearance: textfield;
-  text-align: end;
 }
 input::-webkit-inner-spin-button {
   -webkit-appearance: none;
@@ -141,108 +149,37 @@ input::-webkit-outer-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
-/* Text color of table form controls:
+.button > svg,
- *  - black for row/table forms,
+.tab > svg,
- *  - inherited for internal (column specific) buttons/forms. */
+button > svg {
-table input,
+  height: 1.4em;
-table select,
+  width: 1.4em;
-table summary,
-table textarea {
-  border-color: var(--color-border-gray);
 }
-table input,
+.button > svg:not(:last-child),
-table select,
+.tab > svg:not(:last-child),
-table textarea {
+button > svg:not(:last-child) {
-  padding-block: 0.375em;
+  margin-right: 0.2em;
 }
-table form input,
+/* TODO: move normal non-button links (<a>:hover/:focus) styling here (i.e.
-table form select,
+ * page-wide, top-level) and remove from table.items - as the style should be
-table form summary,
+ * same everywhere */
-table form textarea {
+.button:focus-visible,
-  color: inherit;
+button:focus-visible,
-}
+input[type=submit]:focus-visible {
-table svg:not(:only-child) {
+  background-color: var(--color-focus-gray);
-  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;
 }
-input:hover,
+.button:hover,
-select:hover,
+button:hover,
-summary:hover,
+input[type=submit]: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;
-}
-[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;
@@ -252,24 +189,32 @@ textarea:invalid {
   background-color: var(--color-red);
   border-color: var(--color-red);
 }
-.link:focus-visible {
+input:hover,
-  text-decoration-color: var(--color-gray);
+select:hover,
+summary:hover,
+textarea:hover {
+  border-color: var(--color-blue);
+  outline: solid 1px var(--color-blue);
 }
-.link:hover {
+select:hover,
-  color: var(--color-blue);
+summary:hover {
-  text-decoration-color: var(--color-blue);
+  cursor: pointer;
 }
-table .button {
+input:invalid,
-  border-color: var(--color-border-gray);
+select:invalid,
-  color: var(--color-table-gray);
+textarea:invalid {
-  font-weight: normal;
+  border-color: var(--color-red);
-  height: 100%;
+  outline: solid 1px var(--color-red);
-  padding: 0.4em;
+}
+input[type=text]:read-only,
+textarea:read-only {
+  border: none;
+  padding-inline: 0;
 }
 
 
-/* NOTE: collapse gaps around empty rows (`topside`) once possible with
+/* NOTE: collapse gaps around empty rows (`topside`) once possible
- * `grid-collapse` property and remove alternative `grid-template-areas`.
+ * with grid-collapse property and remove alternative grid-template
  * https://github.com/w3c/csswg-drafts/issues/5813 */
 body {
   display: grid;
@@ -277,16 +222,16 @@ body {
   grid-template-areas:
     "header    header  header"
     "nav       nav     nav"
+    "leftside  topside rightside"
     "leftside  main    rightside";
   grid-template-columns: 1fr minmax(max-content, 2fr) 1fr;
   font-family: system-ui;
   margin: 0.4em;
 }
-body:has(> .topside-area) {
+body:not(:has(.topside-area)) {
   grid-template-areas:
     "header    header  header"
     "nav       nav     nav"
-    "leftside  topside rightside"
     "leftside  main    rightside";
 }
 
@@ -302,14 +247,18 @@ header {
   margin-inline-start: 4%;
 }
 .navigation > .tab {
-  border-bottom: 2px solid var(--color-nav-gray);
+  border-bottom: solid 2px var(--color-nav-gray);
   flex: 1;
   font-size: 1rem;
   justify-content: center;
   padding-block: 0.4em;
 }
+.navigation > .tab:hover,
+.navigation > .tab:focus-visible {
+  background-color: var(--color-focus-gray);
+}
 .navigation > .tab.active {
-  border-bottom: 4px solid var(--color-blue);
+  border-bottom: solid 4px var(--color-blue);
   color: var(--color-blue);
   fill: var(--color-blue);
 }
@@ -341,7 +290,7 @@ header {
 
 #flashes {
   display: grid;
-  row-gap: 0.4em;
+  gap: 0.2em;
   grid-template-columns: 1fr auto auto auto 1fr;
   left: 0;
   pointer-events: none;
@@ -357,17 +306,13 @@ header {
   display: grid;
   grid-column: 2/5;
   grid-template-columns: subgrid;
-  line-height: 2.2em;
   pointer-events: auto;
 }
-.flash:before {
-  filter: invert();
-  height: 1.4em;
-  margin: 0 0.5em;
-  width: 1.4em;
-}
 .flash.alert:before {
   content: url('pictograms/alert-outline.svg');
+  height: 1.4em;
+  margin: 0 0.5em;
+  width: 1.4em;
 }
 .flash.alert {
   border-color: var(--color-red);
@@ -375,24 +320,35 @@ header {
 }
 .flash.notice:before {
   content: url('pictograms/check-circle-outline.svg');
+  height: 1.4em;
+  margin: 0 0.5em;
+  width: 1.4em;
 }
 .flash.notice {
   border-color: var(--color-blue);
   background-color: var(--color-blue);
 }
-.flash svg {
+.flash > div {
-  cursor: pointer;
+  grid-column: 2;
-  fill: white;
-  height: 2.2em;
-  opacity: 0.6;
-  padding: 0.4em 0.5em;
-  width: 2.4em;
 }
-.flash svg:hover {
+/* NOTE: currently flash button inherits some unnecessary styles from generic
+ * button. */
+.flash > button {
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  font-size: 1.4em;
+  font-weight: bold;
+  grid-column: 3;
+  opacity: 0.6;
+  padding: 0.2em 0.4em;
+}
+.flash > button:hover {
   opacity: 1;
 }
 
 
+/* TODO: Hover over invalid should work like in measurements (thin vs thick border) */
 .labeled-form {
   align-items: center;
   display: grid;
@@ -409,7 +365,7 @@ header {
 .labeled-form label.required {
   font-weight: bold;
 }
-/* Don't style `label.error + input` if case already covered by `input:invalid`. */
+/* Don't style `label.error + input` if case already covered by input:invalid */
 .labeled-form label.error {
   color: var(--color-red);
 }
@@ -429,117 +385,200 @@ header {
 .labeled-form .auxiliary {
   grid-column: 3;
   /* If more buttons are needed, `grid-row` can be replaced with
-   * `reading-flow: grid-columns` to ensure proper [tabindex] order. */
+   * `reading-flow: grid-columns` to ensure proper tabindex order */
   grid-row: 1;
   height: 100%;
   padding-block: 0;
 }
 
-.tabular-form table {
-  border: none;
-  border-spacing: 0.4em 0;
-  margin-inline: -0.4em;
-}
-.tabular-form table td {
-  border: none;
-  vertical-align: middle;
-}
-.tabular-form table td {
-  padding-inline: 0;
-}
-.tabular-form table :is(form, input, select, textarea):only-child {
-  margin-inline-start: 0;
-}
 
-
+/* TODO: remove .items class (?) and make 'form table' work properly */
-.items-table {
+table.items {
   border-spacing: 0;
-  border: 1px solid var(--color-border-gray);
+  border: solid 1px var(--color-border-gray);
   border-radius: 0.25em;
   font-size: 0.85rem;
   text-align: left;
 }
-.items-table thead {
+table:not(:has(tr)) {
+  display: none;
+}
+table.items thead {
   font-size: 0.8rem;
 }
-.items-table thead,
+table.items thead,
-.items-table tbody tr:hover {
+table.items tbody tr:hover {
   background-color: var(--color-focus-gray);
 }
-.items-table th {
+table.items th {
-  padding: 0.75em 0 0.75em 1em;
+  padding-block: 0.75em;
   text-align: center;
 }
-.items-table th:last-child {
+table.items th,
-  padding-inline-end: 0.4em;
+table.items td {
+  padding-inline: 1em 0;
 }
-.items-table td {
+/* For <a> to fill <td> completely, we use an ::after pseudoelement. */
-  border-top: 1px solid var(--color-border-gray);
+table.items td.link {
-  height: 2.4em;
+  padding: 0;
-  padding: 0.1em 0 0.1em calc(1em + var(--depth) * 0.8em);
-}
-.items-table td:last-child {
-  padding-inline-end: 0.1em;
-}
-.items-table :is(form, input, select, textarea):only-child {
-  margin-inline-start: calc(-0.4em - 0.9px);
-}
-/* For <a> to fill table cell completely, we use an `::after` pseudoelement. */
-/* TODO: expand to whole row? will require adjusting z-index on inputs/buttons */
-.items-table td:has(> .link) {
   position: relative;
 }
-.items-table .link::after {
+table.items td.link a {
+  color: inherit;
+  font: inherit;
+}
+table.items td.link a::after {
   content: '';
-  inset: -1px 0 0 0;
+  inset: 0;
   position: absolute;
 }
-.items-table .flex {
+table.items td:first-child {
+  padding-inline-start: calc(1em + var(--depth) * 0.8em);
+}
+table.items td:has(input, select, textarea) {
+  padding-inline-start: calc(0.6em - 0.9px);
+}
+table.items td:first-child:has(input, select, textarea) {
+  padding-inline-start: calc(0.6em + var(--depth) * 0.8em - 0.9px);
+}
+table.items th:last-child {
+  padding-inline-end: 0.4em;
+}
+table.items td:last-child {
+  padding-inline-end: 0.1em;
+}
+table.items td {
+  border-top: solid 1px var(--color-border-gray);
+  height: 2.4em;
+  padding-block: 0.1em;
+}
+table.items .actions {
+  display: flex;
   gap: 0.4em;
   justify-content: end;
 }
-.items-table .dropzone {
+table.items .actions.centered {
+  justify-content: center;
+}
+table.items tr.dropzone {
   position: relative;
 }
-.items-table .dropzone::after {
+table.items tr.dropzone::after {
   content: '';
   inset: 1px 0 0 0;
   position: absolute;
-  outline: 2px dashed var(--color-blue);
+  outline: dashed 2px var(--color-blue);
   outline-offset: -1px;
   z-index: var(--z-index-table-row-outline);
 }
-.items-table .handle {
+table.items td.handle {
-  cursor: grab;
+  cursor: move;
 }
-.items-table .form td {
+table.items tr.form td {
   vertical-align: top;
 }
-.items-table td:not(:first-child),
+
+/* TODO: replace :hover:focus-visible combos with proper LOVE stye order */
+/* TODO: Update table styling: simplify selectors, deduplicate, remove non-font rem. */
+table.items td.link a:hover,
+table.items td.link a:focus-visible,
+table.items td.link a:hover:focus-visible {
+  text-decoration: underline;
+  text-decoration-thickness: 0.05rem;
+  text-underline-offset: 0.2rem;
+}
+table.items td.link a:hover {
+  color: var(--color-blue);
+}
+table.items td.link a:focus-visible {
+  text-decoration-color: var(--color-gray);
+}
+table.items td.link a:hover:focus-visible {
+  color: var(--color-dark-blue);
+}
+
+table.items td:not(:first-child),
 .grayed {
   color: var(--color-table-gray);
-  fill: var(--color-gray);
+  fill: var(--color-table-gray);
 }
-.items-table td:has(> svg:only-child) {
+table.items svg {
+  height: 1rem;
+  vertical-align: middle;
+  width: 1rem;
+}
+table.items svg:last-child {
+  height: 1.2rem;
+  width: 1.2rem;
+}
+table.items td.svg {
   text-align: center;
 }
+table.items td.number {
+  text-align: right;
+}
+table.items .button,
+table.items button,
+table.items input[type=submit] {
+  font-weight: normal;
+  height: 100%;
+  padding: 0.4em;
+}
+table.items input:not([type=submit]):not([type=checkbox]),
+table.items select,
+table.items textarea {
+  padding-block: 0.375em;
+}
+/* TODO: find a way (layers?) to style inputs differently while making sure
+ * hover works properly without using :not(:hover) selectors here. */
+table.items .button:not(:hover),
+table.items button:not(:hover),
+table.items input:not(:hover),
+table.items select:not(:hover),
+table.items textarea:not(:hover) {
+  border-color: var(--color-border-gray);
+}
+table.items .button:not(:hover),
+table.items button:not(:hover),
+table.items input[type=submit]:not(:hover),
+table.items select:not(:hover) {
+  color: var(--color-table-gray);
+}
+table.items select:focus-within,
+table.items select:focus-visible {
+  color: black;
+}
+form table.items {
+  border: none;
+}
+form table.items td {
+  border: none;
+  text-align: left;
+  vertical-align: middle;
+}
+form table.items td:first-child {
+  color: inherit;
+}
 
 
-.center {
+.centered {
   margin: 0 auto;
 }
+.extendedright {
+  margin-right: auto;
+}
 .hexpand {
   width: 100%;
 }
-.flex {
+.hflex {
   display: flex;
   gap: 0.8em;
 }
-.flex.reverse {
+.hflex.reverse {
   flex-direction: row-reverse;
 }
-.flex.vertical {
+.hflex.centered {
-  flex-direction: column;
+  justify-content: center;
 }
 .hint {
   color: var(--color-table-gray);
@@ -547,18 +586,21 @@ header {
   font-size: 0.9rem;
   text-align: center;
 }
-.hmin50 {
+.vflex {
-  min-width: 50%;
+  display: flex;
+  gap: 0.8em;
+  flex-direction: column;
 }
-.italic {
+[disabled] {
-  color: var(--color-gray);
+/* label:has(input[disabled]) {
-  font-style: italic;
+ * TODO: disabled checkbox blue square focus removal; disabled label styling;
-}
+ * focused label styling (currently only checkbox has focus)
-.ralign {
+ * */
-  text-align: right;
+  border-color: var(--color-border-gray) !important;
-}
+  color: var(--color-border-gray) !important;
-.rextend {
+  cursor: not-allowed;
-  margin-right: auto;
+  fill: var(--color-border-gray) !important;
+  pointer-events: none;
 }
 
 
@@ -570,12 +612,12 @@ summary {
   align-items: center;
   color: var(--color-gray);
   display: flex;
-  gap: 0.4em;
+  gap: 0.2em;
   height: 100%;
   white-space: nowrap;
 }
 summary::before {
-  background-color: currentColor;
+  background-color: #000;
   content: "";
   height: 1em;
   mask-image: url('pictograms/chevron-down.svg');
@@ -587,7 +629,7 @@ summary:has(.button) {
   padding-inline-end: 0;
 }
 summary .button {
-  border: 1px solid var(--color-border-gray);
+  border: solid 1px var(--color-border-gray);
   border-radius: inherit;
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
@@ -598,15 +640,15 @@ summary span {
   width: 100%;
 }
 details[open] summary::before {
-  transform: scaleY(-1);
+  transform: rotate(180deg);
 }
 summary::marker {
   padding-left: 0.25em;
 }
-/* NOTE: use `details[open]::details-content` once widely available. */
+/* NOTE: use details[open]::details-content once widely available */
 details[open] ul {
-  background-color: white;
+  background: white;
-  border: 1px solid var(--color-border-gray);
+  border: solid 1px var(--color-border-gray);
   border-radius: 0.25em;
   box-shadow: 1px 1px 3px var(--color-border-gray);
   margin: -1px 0 0 0;
@@ -628,15 +670,3 @@ li input[type=checkbox] {
 li::marker {
   content: '';
 }
-/*
- * TODO:
- * * disable <label> containing disabled checkbox: `label:has(input[disabled])`,
- * * disabled label styling,
- * * focused label styling (currently only checkbox has focus),
- * * disabled checkbox blue square focus removal.
- * */
-
-#measurement_form {
-  min-width: 66%;
-  width: max-content;
-}

app/controllers/measurements_controller.rb

@@ -1,7 +1,13 @@
 class MeasurementsController < ApplicationController
+  before_action except: :index do
+    raise AccessForbidden unless current_user.at_least(:active)
+  end
+
   def index
-    @measurements = []
+    readouts = current_user.readouts.includes(:quantity, :unit).order(created_at: :desc)
-    #@measurements = current_user.units.ordered.includes(:base, :subunits)
+    @measurements = readouts.group_by(&:created_at).map do |created_at, grouped|
+      Measurement.new(created_at: created_at, readouts: grouped)
+    end
   end
 
   def new
@@ -9,8 +15,33 @@ class MeasurementsController < ApplicationController
   end
 
   def create
+    timestamp = Time.current
+    @readouts = readout_params.map do |rp|
+      r = current_user.readouts.new(rp)
+      r.created_at = timestamp
+      r
+    end
+
+    if @readouts.all?(&:valid?)
+      Readout.transaction { @readouts.each(&:save!) }
+      @measurement = Measurement.new(readouts: @readouts, created_at: timestamp)
+      flash.now[:notice] = t('.success')
+    else
+      render :new, status: :unprocessable_entity
+    end
   end
 
   def destroy
+    @measurement = Measurement.new(id: params[:id].to_i,
+                                   created_at: Time.at(params[:id].to_i))
+    current_user.readouts.where(created_at: @measurement.created_at).delete_all
+    @measurements_empty = current_user.readouts.empty?
+    flash.now[:notice] = t('.success')
+  end
+
+  private
+
+  def readout_params
+    params.require(:readouts).map { |r| r.permit(:quantity_id, :value, :unit_id) }
   end
 end

app/helpers/application_helper.rb

@@ -12,12 +12,6 @@ module ApplicationHelper
       labeled_field_for(method, options) { super }
     end
 
-    def submit(value = nil, options = {})
-      value, options = nil, value if value.is_a?(Hash)
-      options[:class] = @template.class_names('button', options[:class])
-      super
-    end
-
     private
 
     def labeled_field_for(method, options)
@@ -102,28 +96,20 @@ module ApplicationHelper
 
     def number_field(method, options = {})
       attr_type = object.type_for_attribute(method)
-      case attr_type.type
+      if attr_type.type == :decimal
-      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/@default_options
+      # button does not use #objectify_options
-      value, options = nil, value if value.is_a?(Hash)
+      options.merge!(@options.slice(:form))
-      options = options.merge(
-        @default_options.slice(:form),
-        class: @template.class_names('button', options[:class])
-      )
       super
     end
 
@@ -152,14 +138,12 @@ module ApplicationHelper
   end
 
   def tabular_form_with(**options, &block)
-    extra_options = {builder: TabularFormBuilder, class: 'tabular-form',
+    extra_options = {builder: TabularFormBuilder, html: {autocomplete: 'off'}}
-                     html: {autocomplete: 'off'}}
     form_with(**merge_attributes(options, extra_options), &block)
   end
 
   def svg_tag(source, label = nil, options = {})
-    label, options = nil, label if label.is_a? Hash
+    svg_tag = tag.svg(options) do
-    svg_tag = tag.svg(**options) do
       tag.use(href: "#{image_path(source + ".svg")}#icon")
     end
     label.blank? ? svg_tag : svg_tag + tag.span(label)
@@ -228,8 +212,9 @@ module ApplicationHelper
       # Conversion of flash to Array only required because of Devise
       Array(messages).map do |message|
         tag.div class: "flash #{entry}" do
-          tag.span(sanitize(message)) +
+          # TODO: change button text to svg to make it aligned vertically
-            svg_tag('pictograms/close-outline', {onclick: "this.parentElement.remove()"})
+          tag.div(sanitize(message)) + tag.button(sanitize("×"), tabindex: -1,
+                                                  onclick: "this.parentElement.remove();")
         end
       end
     end.join.html_safe

app/helpers/quantities_helper.rb

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

app/models/measurement.rb

@@ -1,3 +1,17 @@
 class Measurement
   include ActiveModel::Model
+
+  attr_accessor :readouts, :created_at
+
+  def id
+    created_at.to_i
+  end
+
+  def to_param
+    id.to_s
+  end
+
+  def persisted?
+    true
+  end
 end

app/models/quantity.rb

@@ -15,8 +15,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}
+    length: {maximum: type_for_attribute(:name).limit || Float::INFINITY}
-  validates :description, length: {maximum: type_for_attribute(:description).limit}
+  validates :description, length: {maximum: type_for_attribute(:description).limit || Float::INFINITY}
 
   # Update :depths of progenies after parent change
   before_save if: :parent_changed? do
@@ -61,18 +61,26 @@ class Quantity < ApplicationRecord
 
   # Return: ordered [sub]hierarchy
   scope :ordered, ->(root: nil, include_root: true) {
-    numbered = Arel::Table.new('numbered')
+    if connection.adapter_name =~ /mysql/i
-
+      numbered = Arel::Table.new('numbered')
-    self.model.with(numbered: numbered(:parent_id, :name)).with_recursive(arel_table.name => [
+      self.model.with(numbered: numbered(:parent_id, :name)).with_recursive(arel_table.name => [
-      numbered.project(
+        numbered.project(
-        numbered[Arel.star],
+          numbered[Arel.star],
-        numbered.cast(numbered[:child_number], 'BINARY').as('path')
+          numbered.cast(numbered[:child_number], 'BINARY').as('path')
-      ).where(numbered[root && include_root ? :id : :parent_id].eq(root)),
+        ).where(numbered[root && include_root ? :id : :parent_id].eq(root)),
-      numbered.project(
+        numbered.project(
-        numbered[Arel.star],
+          numbered[Arel.star],
-        arel_table[:path].concat(numbered[:child_number])
+          arel_table[:path].concat(numbered[:child_number])
-      ).join(arel_table).on(numbered[:parent_id].eq(arel_table[:id]))
+        ).join(arel_table).on(numbered[:parent_id].eq(arel_table[:id]))
-    ]).order(arel_table[:path])
+      ]).order(arel_table[:path])
+    elsif root.nil?
+      # SQLite: pathname column already stores the full hierarchical path
+      order(:pathname)
+    else
+      root_pathname = unscoped.where(id: root).pick(:pathname)
+      scope = order(:pathname).where("pathname LIKE ?", "#{root_pathname}#{PATHNAME_DELIMITER}%")
+      include_root ? scope.or(where(id: root)) : scope
+    end
   }
 
   # TODO: extract named functions to custom Arel extension

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

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

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

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

app/views/layouts/application.html.erb

@@ -23,10 +23,10 @@
   </head>
 
   <body>
-    <header class="flex">
+    <header class="hflex">
       <%= image_link_to t(".source_code"), "code-braces", source_code_url %>
       <%= image_link_to t(".issue_tracker"), "bug-outline", issue_tracker_url,
-        class: "rextend" %>
+            class: "extendedright" %>
       <% if user_signed_in? %>
         <%= image_link_to_unless_current(current_user, "account-wrench-outline",
           edit_user_registration_path) %>

app/views/measurements/_form.html.erb

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

app/views/measurements/_measurement.html.erb

@@ -0,0 +1,14 @@
+<%= tag.tr id: dom_id(measurement) do %>
+  <td><%= l measurement.created_at, format: :short %></td>
+  <td>
+    <% measurement.readouts.each do |readout| %>
+      <span><%= readout.quantity.name %>: <%= readout.value %> <%= readout.unit %></span>
+    <% end %>
+  </td>
+  <% if current_user.at_least(:active) %>
+    <td class="actions">
+      <%= image_button_to t('.destroy'), 'delete-outline', measurement_path(measurement),
+        method: :delete %>
+    </td>
+  <% end %>
+<% end %>

app/views/measurements/create.turbo_stream.erb

@@ -0,0 +1,5 @@
+<%= turbo_stream.update :flashes %>
+<%= turbo_stream.remove :measurement_form %>
+<%= turbo_stream.remove :no_items %>
+<%= turbo_stream.enable :new_measurement_link %>
+<%= turbo_stream.prepend :measurements, @measurement %>

app/views/measurements/destroy.turbo_stream.erb

@@ -0,0 +1,3 @@
+<%= turbo_stream.update :flashes %>
+<%= turbo_stream.remove @measurement %>
+<%= turbo_stream.append(:measurements, render_no_items) if @measurements_empty %>

app/views/quantities/_form.html.erb

@@ -9,7 +9,7 @@
       <%= form.text_area :description, cols: 30, rows: 1, escape: false %>
     </td>
 
-    <td class="flex">
+    <td class="actions">
       <%= 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,14 @@
            data: {drag_path: reparent_quantity_path(quantity), drop_id: dom_id(quantity),
                   drop_id_param: "quantity[parent_id]"} do %>
 
-  <td style="--depth:<%= quantity.depth %>">
+  <td class="link" style="--depth:<%= quantity.depth %>">
-    <%= link_to quantity, edit_quantity_path(quantity), class: 'link',
+    <%= link_to quantity, edit_quantity_path(quantity), onclick: 'this.blur();',
-      onclick: 'this.blur();', data: {turbo_stream: true} %>
+      data: {turbo_stream: true} %>
   </td>
   <td><%= quantity.description %></td>
 
   <% if current_user.at_least(:active) %>
-    <td class="flex">
+    <td class="actions">
       <%= image_link_to t('.new_subquantity'), 'plus-outline', new_quantity_path(quantity),
         id: dom_id(quantity, :new, :link), onclick: 'this.blur();', data: {turbo_stream: true} %>
 

app/views/quantities/index.html.erb

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

app/views/readouts/_form.html.erb

@@ -1,24 +1,25 @@
 <%# TODO: add readout reordering by dragging %>
 <%= tabular_fields_for 'readouts[]', readout do |form| %>
   <%- tag.tr id: dom_id(readout.quantity, :new, :readout) do %>
-    <td>
+    <td class="actions">
-      <%# 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: ''}, required: true %>
-    </td>
-    <td class="flex">
       <%# TODO: change to _link_ after giving up displaying relative paths %>
       <%= image_button_tag '', 'delete-outline', class: 'dangerous', name: nil,
         formaction: discard_readouts_path(readout.quantity),
         formmethod: :get, formnovalidate: true, data: {turbo_stream: true} %>
     </td>
+    <td>
+      <%= readout.quantity.relative_pathname(@superquantity) %>
+    </td>
+    <td>
+      <%= form.number_field :value, required: true,
+        size: readout.type_for_attribute(:value).precision / 2,
+        autofocus: readout_counter == 0 %>
+    </td>
+    <td>
+      <%= form.hidden_field :quantity_id %>
+      <%= form.collection_select :unit_id, @user_units, :id,
+        ->(u){ sanitize('&emsp;' * (u.base_id ? 1 : 0) + u.symbol) },
+        {prompt: t('.select_unit'), disabled: '', selected: ''}, required: true %>
+    </td>
   <% end %>
 <% end %>

app/views/units/_form.html.erb

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

app/views/units/_unit.html.erb

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

app/views/units/index.html.erb

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

app/views/users/index.html.erb

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

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

@@ -10,6 +10,7 @@
 
   <%= f.submit t(:register), data: {turbo: false} %>
 
+  <%# TODO: fix button text color after change link -> button %>
   <%= image_button_tag t(:resend_confirmation), 'email-sync-outline',
     class: 'auxiliary', formaction: user_confirmation_path, formnovalidate: true,
     data: {validate: f.field_id(:email)} %>

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

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

config/environments/test.rb

@@ -58,7 +58,4 @@ Rails.application.configure do
   # config.action_view.annotate_rendered_view_with_filenames = true
 
   config.log_level = :info
-
-  # Allow Capybara's dynamic test server host (127.0.0.1:<random_port>)
-  config.hosts << '127.0.0.1'
 end

config/locales/en.yml

@@ -85,10 +85,18 @@ en:
     navigation: Measurements
     no_items: There are no measurements taken. You can Add some now.
     form:
-      select_quantity: select quantities...
+      select_quantity: select the measured quantities...
-      taken_at_html: Measurement taken at 
     index:
       new_measurement: Add measurement
+    create:
+      success: Measurement saved.
+    destroy:
+      success: Measurement deleted.
+    measurement:
+      destroy: Delete
+  readouts:
+    form:
+      select_unit: ...
   quantities:
     navigation: Quantities
     no_items: There are no configured quantities. You can Add some or Import from defaults.

db/migrate/20250121230456_create_readouts.rb

@@ -1,14 +1,10 @@
 class CreateReadouts < ActiveRecord::Migration[7.2]
   def change
     create_table :readouts do |t|
-      # Reference :user through :quantity (:measurement may be NULL).
+      t.references :user, null: false, foreign_key: true
-      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
-      # Move to Measurement?
+      t.decimal :value, null: false, precision: 30, scale: 15
       #t.references :collector, foreign_key: true
       #t.references :device, foreign_key: true