From 6a8a19f1869ad5b982353278f1f976eb75f9b505 Mon Sep 17 00:00:00 2001
From: gunshiz <spsshop1047@gmail.com>
Date: Sat, 5 Sep 2026 13:20:33 +0700
Subject: [PATCH] fix(extra) : persist picker selections

---
 components/admin/guide-section-editor.tsx | 63 +++++++++++++++++++++--
 1 file changed, 58 insertions(+), 5 deletions(-)

diff --git a/components/admin/guide-section-editor.tsx b/components/admin/guide-section-editor.tsx
index ac77733..3afe964 100644
--- a/components/admin/guide-section-editor.tsx
+++ b/components/admin/guide-section-editor.tsx
@@ -3379,12 +3379,25 @@ function ExtraCatalogItemsEditor({
             </SelectGroup></SelectContent>
           </Select>
           <div className="min-w-64 flex-1">
-            <CatalogPicker items={items} value={key} onChange={setKey} placeholder={`เลือก${labels[kind]}`} showSelectedImage rarityBackground />
+            <CatalogPicker
+              items={items}
+              value={key}
+              onChange={(nextKey) => {
+                if (
+                  nextKey &&
+                  !value.some(
+                    (item) => item.kind === kind && item.key === nextKey,
+                  )
+                ) {
+                  onChange([...value, { kind, key: nextKey }]);
+                }
+                setKey("");
+              }}
+              placeholder={`เลือก${labels[kind]}`}
+              showSelectedImage
+              rarityBackground
+            />
           </div>
-          <Button type="button" variant="outline" disabled={!key || value.some((item) => item.kind === kind && item.key === key)} onClick={() => { onChange([...value, { kind, key }]); setKey(""); }}>
-            <PlusIcon data-icon="inline-start" />
-            เพิ่มรายการ
-          </Button>
         </div>
       </div>
     </Field>
@@ -3878,6 +3891,26 @@ function ExtraEditor({ guide, initial, characters, weapons, artifacts }: EditorB
                               rowIndex,
                               "backgroundColor",
                             )}
+                            onClick={() => {
+                              if (row.backgroundColor !== null) return;
+                              setSections(
+                                sections.map((item, index) =>
+                                  index === sectionIndex
+                                    ? {
+                                        ...item,
+                                        rows: item.rows.map((candidate, inner) =>
+                                          inner === rowIndex
+                                            ? {
+                                                ...candidate,
+                                                backgroundColor: DEFAULT_EXTRA_BACKGROUND_COLOR,
+                                              }
+                                            : candidate,
+                                        ),
+                                      }
+                                    : item,
+                                ),
+                              );
+                            }}
                             onChange={(event) =>
                               setSections(
                                 sections.map((item, index) =>
@@ -3941,6 +3974,26 @@ function ExtraEditor({ guide, initial, characters, weapons, artifacts }: EditorB
                               rowIndex,
                               "textColor",
                             )}
+                            onClick={() => {
+                              if (row.textColor !== null) return;
+                              setSections(
+                                sections.map((item, index) =>
+                                  index === sectionIndex
+                                    ? {
+                                        ...item,
+                                        rows: item.rows.map((candidate, inner) =>
+                                          inner === rowIndex
+                                            ? {
+                                                ...candidate,
+                                                textColor: DEFAULT_EXTRA_TEXT_COLOR,
+                                              }
+                                            : candidate,
+                                        ),
+                                      }
+                                    : item,
+                                ),
+                              );
+                            }}
                             onChange={(event) =>
                               setSections(
                                 sections.map((item, index) =>