HSL: click a colour chip to open its panel, the way PICK does

The colour band chips only aimed the mixer before; now they open the same
panel the eyedropper opens, seeded with the colour the chip is named after
(hexToRgb turns that readout back into the RGB bytes the picker stores).
A pick already on the photo keeps its spot — only a mixer with nowhere to
hang takes the middle of the frame.

The HSL column itself is untouched: 8 chips, the rule, IMAGE,
HUE/SAT/LUM, the readout and RESET all stay where they were.

docker/frontend/src/ui/TopBar.tsx

@@ -155,9 +155,13 @@ export function TopBar({
         {menu === 'theme' ? (
           <div className="popover">
             <div className="chip-row">
-              <button type="button" className={`chip${mode === 'light' ? ' on' : ''}`} onClick={() => setMode('light')}>Light</button>
-              <button type="button" className={`chip${mode === 'dark' ? ' on' : ''}`} onClick={() => setMode('dark')}>Dark</button>
-              <button type="button" className={`chip${mode === 'auto' ? ' on' : ''}`} data-key="theme-auto" onClick={() => setMode('auto')}>Auto</button>
+              {/* The name is a span, not a bare text node: a chip is a flex row,
+                  and a loose text node in one is an anonymous item — the shape
+                  iOS stops painting until the page is touched (same as the
+                  panel heads and ChipRow's chips). */}
+              <button type="button" className={`chip${mode === 'light' ? ' on' : ''}`} onClick={() => setMode('light')}><span className="chip-label">Light</span></button>
+              <button type="button" className={`chip${mode === 'dark' ? ' on' : ''}`} onClick={() => setMode('dark')}><span className="chip-label">Dark</span></button>
+              <button type="button" className={`chip${mode === 'auto' ? ' on' : ''}`} data-key="theme-auto" onClick={() => setMode('auto')}><span className="chip-label">Auto</span></button>
             </div>
             <div className="chip-row" style={{ marginTop: 8 }}>
               {ACCENTS.map((entry) => (
@@ -167,7 +171,7 @@ export function TopBar({
                   className={`chip${accent === entry.id ? ' on' : ''}`}
                   onClick={() => setAccent(entry.id)}
                 >
-                  {entry.label}
+                  <span className="chip-label">{entry.label}</span>
                 </button>
               ))}
             </div>
@@ -204,7 +208,7 @@ export function TopBar({
                   setMenu(null);
                 }}
               >
-                {entry.label}
+                <span className="chip-label">{entry.label}</span>
               </button>
             ))}
           </div>