From 7ed4301055af242d073965d96dda97a20630ec55 Mon Sep 17 00:00:00 2001
From: locphamtran <tranloclqd@gmail.com>
Date: Fri, 11 Sep 2026 08:59:49 +0700
Subject: [PATCH] feat(panel): gather the white balance presets and COLOR TEMP
 into a TEMP chip

---
 src/components/AdjustmentPanel.tsx | 66 ++++++++++++++++++++----------
 1 file changed, 45 insertions(+), 21 deletions(-)

diff --git a/src/components/AdjustmentPanel.tsx b/src/components/AdjustmentPanel.tsx
index 4c24e84..b61555e 100644
--- a/src/components/AdjustmentPanel.tsx
+++ b/src/components/AdjustmentPanel.tsx
@@ -21,6 +21,7 @@ type TabId = 'recipes' | 'iq' | 'wb' | 'filters' | 'frame' | 'watermark';
 // (wb tab) and the D.RANGE selector (iq tab).
 type GroupKey =
   | 'style'
+  | 'temp'
   | 'cx'
   | 'cxb'
   | 'dr'
@@ -142,6 +143,16 @@ const WB_PAIRS: Record<string, { t: number; ti: number }> = {
   tungsten: { t: 3200, ti: 0 },
   fluorescent: { t: 4000, ti: 3 },
 };
+// One list serves both the TEMP strip and the TEMP chip's label.
+const WB_PRESETS: { v: string; d: string }[] = [
+  { v: 'auto', d: 'AUTO' },
+  { v: 'daylight', d: 'DAYLIGHT' },
+  { v: 'daylight-3r', d: 'DAYLIGHT -3R' },
+  { v: 'cloudy', d: 'CLOUDY' },
+  { v: 'shade', d: 'SHADE' },
+  { v: 'tungsten', d: 'TUNGSTEN' },
+  { v: 'fluorescent', d: 'FLUOR' },
+];
 
 // WATERMARK tab styling choices: swatches for TEXT COLOR, multipliers on the
 // base 3.2%-of-frame-width size for TEXT SIZE.
@@ -355,16 +366,22 @@ export default function AdjustmentPanel({
   const paramDefs: Record<TabId, ParamDef[]> = {
     recipes: [],
     iq: toRows(PARAM_DEFS.iq),
-    wb: toRows(PARAM_DEFS.wb),
+    wb: toRows(PARAM_DEFS.wb).map((p) =>
+      p.key === 'temperature'
+        // Dragging COLOR TEMP is a hand-set balance: forget the preset so the
+        // TEMP chip falls back to the bare kelvin value.
+        ? { ...p, onChange: (v: number) => { setWbChoice(null); p.onChange(v); } }
+        : p
+    ),
     filters: toRows(PARAM_DEFS.filters),
     frame: [],
     watermark: [],
   };
 
-  // Active WB chip: the remembered preset wins while the engine pair still
-  // matches it; otherwise derive from the pair (neutral ⇒ AUTO; any unlisted
-  // pair also reads as AUTO — no preset is a stronger claim there).
-  const wbActive = (): string => {
+  // TEMP chip's value: the remembered preset while the engine pair still
+  // matches it; otherwise the preset the pair maps to (neutral ⇒ AUTO); else
+  // the bare kelvin value — what COLOR TEMP dragged by hand lands on.
+  const wbValue = (): string => {
     const t = a.temperature ?? 5500;
     const ti = a.tint ?? 0;
     if (wbChoice) {
@@ -375,7 +392,14 @@ export default function AdjustmentPanel({
       const p = WB_PAIRS[k];
       return p.t === t && p.ti === ti;
     });
-    return hit ?? 'auto';
+    return hit ?? `${t}K`;
+  };
+  // The chip is the only place the white balance is named, so it carries the
+  // value: TEMP AUTO / TEMP FLUOR / TEMP 4000K.
+  const wbTempLabel = (): string => {
+    const v = wbValue();
+    const preset = WB_PRESETS.find((o) => o.v === v);
+    return `TEMP ${preset ? preset.d : v}`;
   };
   const wbApply = (val: string) => {
     setWbChoice(val);
@@ -493,6 +517,14 @@ export default function AdjustmentPanel({
         onSelectRecipe(filmSimToRecipe(sim));
       },
     },
+    // TEMP: the seven white-balance presets plus the COLOR TEMP slider, in a
+    // strip of their own. COLOR TEMP is not a value — picking it opens the
+    // slider row above (the chip keeps naming the kelvin value meanwhile).
+    temp: {
+      label: 'TEMP', off: 'auto', value: wbValue(),
+      options: [...WB_PRESETS, { v: 'color-temp', d: 'COLOR TEMP' }],
+      onPick: (v) => (v === 'color-temp' ? toggleParam('temperature') : wbApply(v)),
+    },
     gpsTime: {
       label: 'TIME', off: 'ON',
       value: gpsWm.showTime === false ? 'OFF' : 'ON',
@@ -507,6 +539,11 @@ export default function AdjustmentPanel({
     amberValue: openGroup !== g && groupDefs[g].value !== groupDefs[g].off,
     onPress: () => toggleGroup(g),
   });
+  // TEMP is the one group whose chip shows its value (nothing else names it).
+  const tempChip = (): ChipDef => ({
+    ...groupChip('temp'),
+    label: wbTempLabel(),
+  });
 
   // ---- per-tab chip rows (bottom, above the tool rail) -----------------------
   const chipsRow = (() => {
@@ -568,21 +605,8 @@ export default function AdjustmentPanel({
               showsHorizontalScrollIndicator={false}
               contentContainerStyle={{ alignItems: 'center', paddingHorizontal: 8, paddingVertical: 6 }}
             >
-              {choiceChips(
-                'wb',
-                [
-                  { v: 'auto', d: 'AUTO' },
-                  { v: 'daylight', d: 'DAYLIGHT' },
-                  { v: 'daylight-3r', d: 'DAYLIGHT -3R' },
-                  { v: 'cloudy', d: 'CLOUDY' },
-                  { v: 'shade', d: 'SHADE' },
-                  { v: 'tungsten', d: 'TUNGSTEN' },
-                  { v: 'fluorescent', d: 'FLUOR' },
-                ],
-                wbActive(),
-                wbApply
-              )}
-              {paramChips(paramDefs.wb)}
+              {renderChip(tempChip())}
+              {paramChips(paramDefs.wb.filter((p) => p.key !== 'temperature'))}
               {(['cx', 'cxb'] as const).map((g) => renderChip(groupChip(g)))}
             </ScrollView>
           </View>