diff --git a/docker/frontend/src/App.tsx b/docker/frontend/src/App.tsx index 5a77217..7e5735c 100644 --- a/docker/frontend/src/App.tsx +++ b/docker/frontend/src/App.tsx @@ -895,13 +895,20 @@ export function Workspace() { }, }; - const groupChip = (g: Exclude): ChipDef => ({ - key: `grp-${g}`, - label: groupDefs[g].label, - active: openGroup === g, - amberValue: openGroup !== g && groupDefs[g].value !== groupDefs[g].off, - onClick: () => toggleGroup(g), - }); + // A strip chip names its pick on the right edge, spelled the way the strip's + // own option spells it. Still on its neutral value -> nothing to name. + const groupChip = (g: Exclude): ChipDef => { + const { label, value, off, options } = groupDefs[g]; + const picked = options.find((o) => o.v === value); + return { + key: `grp-${g}`, + label, + value: value !== off ? picked?.d ?? value : undefined, + active: openGroup === g, + amberValue: openGroup !== g && value !== off, + onClick: () => toggleGroup(g), + }; + }; const choiceChips = ( prefix: string, @@ -982,7 +989,8 @@ export function Workspace() { groupChip('crop'), { key: 'grp-rotate', - label: `ROTATE ${rotation}`, + label: 'ROTATE', + value: `${rotation}°`, active: openGroup === 'rotate', amberValue: openGroup !== 'rotate' && rotation !== 0, onClick: () => toggleGroup('rotate'), @@ -1032,7 +1040,8 @@ export function Workspace() { // TEMP is the one strip chip that names its value — nothing else // does. ...groupChip('temp'), - label: `TEMP ${Math.round(recipe.adjustments.temperature) === 5500 ? 'AUTO' : `${recipe.adjustments.temperature}K`}`, + label: 'TEMP', + value: Math.round(recipe.adjustments.temperature) === 5500 ? 'AUTO' : `${recipe.adjustments.temperature}K`, }, ...paramChips(PARAM_DEFS.wb.filter((p) => p.key !== 'temperature')), groupChip('cx'),