feat(studio): MY PHOTOS, FAVORITED, PHOTO STYLE and RECIPES read as a list of names, and their column is the visitor's

docker/frontend/src/App.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { TABS, ToolRail, type TabId } from './ui/ToolRail';
-import { ChipRow, MiniSlider, SliderRow, type ChipDef, type SliderDef } from './ui/ChipColumn';
+import { ChipRow, ColGrip, MiniSlider, SliderRow, type ChipDef, type SliderDef } from './ui/ChipColumn';
 import { ImageStage } from './ui/ImageStage';
 import { StraightenRuler } from './ui/StraightenRuler';
 import { ToneCurvePanel } from './ui/ToneCurvePanel';
@@ -3291,6 +3291,11 @@ export function Workspace() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   })();
 
+  // The two tabs whose own chips are names to read down rather than buttons to
+  // press out of a row: their column drops the chip's chrome (ChipRow's `list`)
+  // and takes a grip.
+  const listTab = tab === 'photos' || tab === 'favorited';
+
   // FIX's two brushes: a chip arms one, the wheel sizes it — the chip's own
   // readout is that size, since the brush has no size buttons to point at — and
   // CLEAR hands the whole photo back. HEAL repairs a speck of dust, MOSAIC hides
@@ -3829,10 +3834,13 @@ export function Workspace() {
                     />
                   </>
                 ) : (
-                  <ChipRow chips={chips} />
+                  <ChipRow chips={chips} list={listTab} />
                 )}
               </>
             )}
+            {/* MY PHOTOS and FAVORITED are lists of names rather than buttons, so
+                their column is the visitor's to widen (see ColGrip). */}
+            {listTab ? <ColGrip col="main" /> : null}
             {tab === 'favorited' && saved.length === 0 ? <p className="hint">{t('sec.savedEmpty')}</p> : null}
             {/* The mixer's readout: the colour the eyedropper last read, as the
                 RGB bytes and the HSL the band is indexed by. */}
@@ -3952,7 +3960,10 @@ export function Workspace() {
           {/* column 3 — the open chip's sub-chips, or PRESETS' RECIPES list */}
           {optGroup ? (
             <div className="col col-sub strip" data-col="options">
-              <ChipRow chips={stripChips(optGroup)} />
+              <ChipRow chips={stripChips(optGroup)} list={optGroup === 'style'} />
+              {/* PHOTO STYLE is one name per look, so its strip is the visitor's
+                  to widen — the sims' names are longer than the column. */}
+              {optGroup === 'style' ? <ColGrip col="options" /> : null}
               {/* A watermark's colour: the presets above are a shortcut, the
                   well under them picks any colour at all. */}
               {optGroup === 'wmColor' || optGroup === 'gpsColor' ? (
@@ -3995,7 +4006,10 @@ export function Workspace() {
           {tab === 'presets' && showRecipes ? (
             <div className="col col-sub strip" data-col="recipes">
               {recipeStrip.length === 0 ? <p className="hint">{t('sec.savedEmpty')}</p> : null}
-              <ChipRow chips={recipeStrip} />
+              <ChipRow chips={recipeStrip} list />
+              {/* RECIPES reads the same way MY PHOTOS does: names, and a width
+                  of the visitor's own. */}
+              <ColGrip col="recipes" />
             </div>
           ) : null}