From bd2f08aaf71024cf059643a7f820d95b1e0273cd Mon Sep 17 00:00:00 2001
From: 3dtours <yeunhiepanh.photo@gmail.com>
Date: Fri, 18 Sep 2026 07:24:05 +0700
Subject: [PATCH] Panel chips: name the picked value on the right edge

Strip chips (D.RANGE, CROP, COLOR CHROME, PHOTO STYLE, ...) now carry their
pick in the chip's .val column instead of only glowing amber, and the two
chips that baked the value into the label (WB TEMP, FRAME ROTATE) use the
same right-edge slot.
---
 docker/frontend/src/App.tsx | 27 ++++++++++++++++++---------
 1 file changed, 18 insertions(+), 9 deletions(-)

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<GroupKey, 'wm'>): 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<GroupKey, 'wm'>): 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'),