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

docker/frontend/src/App.tsx

@@ -3834,7 +3834,7 @@ export function Workspace() {
                     />
                   </>
                 ) : (
-                  <ChipRow chips={chips} list={listTab} />
+                  <ChipRow chips={chips} list={listTab} glyph={tab === 'photos' ? '▤' : '◉'} />
                 )}
               </>
             )}
@@ -3960,7 +3960,7 @@ 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)} list={optGroup === 'style'} />
+              <ChipRow chips={stripChips(optGroup)} list={optGroup === 'style'} glyph="◉" />
               {/* 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}
@@ -4006,7 +4006,7 @@ 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} list />
+              <ChipRow chips={recipeStrip} list glyph="◉" />
               {/* RECIPES reads the same way MY PHOTOS does: names, and a width
                   of the visitor's own. */}
               <ColGrip col="recipes" />

docker/frontend/src/styles/app.css

@@ -118,6 +118,14 @@
   padding: 2px 0;
 }
 .chip-row.list .chip:hover .chip-label { text-decoration: underline; }
+/* The mark at the head of a list row. It says what the name is, not what state
+   the row is in, so it never takes the accent — the label does that. */
+.chip-row.list .chip-glyph {
+  flex: 0 0 auto;
+  font-size: 10px;
+  line-height: 1;
+  color: var(--text-dim);
+}
 /* The edge of a column, dragged to widen it (see ColGrip): a strip of the cursor
    over the border that is already there. `touch-action: none` is what lets a
    finger drag it rather than scroll the column. */

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