feat(studio): every name in the four lists carries the mark of what it names

docker/frontend/src/ui/ChipColumn.tsx

@@ -65,9 +65,24 @@ export interface SliderDef {
 // (WB's presets, LIGHT's two Color Chromes) instead of the wrapping strip the
 // option rows use. `list` is the other end of it: the rows that are a LIST OF
 // NAMES — MY PHOTOS' frames, FAVORITED and RECIPES' looks, PHOTO STYLE's sims —
-// drop the button's chrome and read as plain text, with only the accent marking
-// the one in force (see .chip-row.list).
-export function ChipRow({ chips, grid, grid3, list }: { chips: ChipDef[]; grid?: boolean; grid3?: boolean; list?: boolean }) {
+// drop the button's chrome and read as plain text, with a lead glyph saying what
+// kind of thing the name is and only the accent marking the one in force (see
+// .chip-row.list).
+export function ChipRow({
+  chips,
+  grid,
+  grid3,
+  list,
+  glyph,
+}: {
+  chips: ChipDef[];
+  grid?: boolean;
+  grid3?: boolean;
+  list?: boolean;
+  // The mark drawn at the head of every row of a `list` (a frame, a look). It
+  // is decoration and nothing else — the name beside it is the row.
+  glyph?: string;
+}) {
   return (
     <div className={`chip-row${list ? ' list' : ''}${grid3 ? ' grid-3' : grid ? ' grid' : ''}`}>
       {chips.map((chip) =>
@@ -102,6 +117,7 @@ export function ChipRow({ chips, grid, grid3, list }: { chips: ChipDef[]; grid?:
               chip.onClick();
             }}
           >
+            {list && glyph ? <span className="chip-glyph" aria-hidden="true">{glyph}</span> : null}
             {chip.color ? <span className="chip-dot" data-color={chip.color} style={{ background: chip.color }} /> : null}
             {/* The name is a box, not the bare text node it used to be: a flex
                 container turns a loose text node into an anonymous item of its