Match the phone's chip-strip panel on the web

The chips column was a stack of labelled sections; the phone opens one row at
a time. Port that shape: tapping a tool tab shows the tab's chips, tapping a
param chip opens its ruler above them, tapping a group chip opens its options
strip, and either closes the other. RESET leads the row (amber while dirty)
and PHOTO STYLE / RECIPES / WATERMARK are strips instead of inline chips.

docker/frontend/src/ui/ChipColumn.tsx

@@ -1,13 +1,15 @@
-import type { ReactNode } from 'react';
-
-// One column, one open slider row at a time — the same shape as the app's
-// AdjustmentPanel: a chip row per group, and the tapped chip's row opens
-// underneath it.
+// One strip at a time — the same shape as the phone's AdjustmentPanel: a ruler
+// row for the open slider, an options strip for the open group, then the tab's
+// chip row. Chip labels are the phone's own strings (they are not translated
+// there either).
 export interface ChipDef {
   key: string;
   label: string;
   value?: string;
+  // amber border while this chip's row/strip is open, amber text when the value
+  // it carries is not its default.
   active?: boolean;
+  amberValue?: boolean;
   pro?: boolean;
   disabled?: boolean;
   onClick: () => void;
@@ -21,8 +23,11 @@ export interface SliderDef {
   max: number;
   step: number;
   display: string;
+  // amber value readout once the knob leaves its default (phone's ruler row)
+  edited: boolean;
   onChange: (value: number) => void;
-  onClose: () => void;
+  // "<" — closes the ruler and reopens the strip it was launched from.
+  onBack: () => void;
 }
 
 export function ChipRow({ chips }: { chips: ChipDef[] }) {
@@ -32,7 +37,8 @@ export function ChipRow({ chips }: { chips: ChipDef[] }) {
         <button
           key={chip.key}
           type="button"
-          className={`chip${chip.active ? ' on' : ''}`}
+          data-key={chip.key}
+          className={`chip${chip.active ? ' on' : ''}${chip.amberValue ? ' amber' : ''}`}
           aria-pressed={!!chip.active}
           disabled={chip.disabled}
           onClick={chip.onClick}
@@ -49,30 +55,21 @@ export function ChipRow({ chips }: { chips: ChipDef[] }) {
 export function SliderRow({ slider }: { slider: SliderDef }) {
   return (
     <div className="slider-row">
-      <div className="head">
-        <span>{slider.label}</span>
-        <b>{slider.display}</b>
-      </div>
-      <input
-        type="range"
-        min={slider.min}
-        max={slider.max}
-        step={slider.step}
-        value={slider.value}
-        onChange={(e) => slider.onChange(Number(e.target.value))}
-      />
-      <div className="chip-row">
-        <button type="button" className="chip ghost" onClick={slider.onClose}>—</button>
+      <button type="button" className="back" onClick={slider.onBack} aria-label="back">&lt;</button>
+      <div className="ruler">
+        <div className="head">
+          <span>{slider.label}</span>
+          <b className={slider.edited ? 'amber' : ''}>{slider.display}</b>
+        </div>
+        <input
+          type="range"
+          min={slider.min}
+          max={slider.max}
+          step={slider.step}
+          value={slider.value}
+          onChange={(e) => slider.onChange(Number(e.target.value))}
+        />
       </div>
     </div>
   );
 }
-
-export function Section({ title, children }: { title: string; children: ReactNode }) {
-  return (
-    <section>
-      <h2>{title}</h2>
-      {children}
-    </section>
-  );
-}