Issue 522: Remember colors when switching assets

sources/components/tree/ItemWithRecolors.ts

@@ -4,7 +4,7 @@ import classNames from "classnames";
 import { state, getSelectionGroup, selectItem } from "../../state/state.ts";
 import type { CatalogReader, ItemMerged } from "../../state/catalog.ts";
 import { drawRecolorPreview } from "../../canvas/palette-recolor.ts";
-import { getPaletteOptions } from "../../state/palettes.ts";
+import { getPaletteOptions, type PaletteOption } from "../../state/palettes.ts";
 import { PaletteSelectModal } from "./PaletteSelectModal.ts";
 import { COMPACT_FRAME_SIZE, FRAME_SIZE } from "../../state/constants.ts";
 
@@ -30,6 +30,62 @@ type ItemWithRecolorsState = {
   palettePreviewCompleted?: number;
 };
 
+/**
+ * When switching to a different same-type recolor asset, apply the mapped
+ * remembered color(s) immediately. First pick, already-selected, and
+ * incompatible items are left unchanged; the caller still opens the popover.
+ */
+function applyRememberedColorsOnSwitch(
+  itemId: string,
+  meta: ItemMerged,
+  paletteOptions: PaletteOption[],
+  selectedColors: Record<string, string>,
+  isSelected: boolean,
+  isCompatible: boolean,
+): void {
+  if (isSelected || !isCompatible) {
+    return;
+  }
+  if (!state.selections[getSelectionGroup(itemId)]) {
+    return;
+  }
+
+  for (let idx = 0; idx < paletteOptions.length; idx++) {
+    const opt = paletteOptions[idx];
+    const group =
+      idx !== 0 ? (opt.type_name ?? meta.type_name) : meta.type_name;
+    const mapped = selectedColors[group];
+    const recolor =
+      mapped ?? (idx === 0 ? meta.recolors[0]?.variants?.[0] : mapped);
+    if (recolor) {
+      selectItem(itemId, recolor, false, opt.type_name ? idx : null);
+    }
+  }
+}
+
+function openPaletteModal(
+  rootViewNode: { state: ItemWithRecolorsState },
+  modalIdx: number,
+  itemId: string,
+  meta: ItemMerged,
+  paletteOptions: PaletteOption[],
+  selectedColors: Record<string, string>,
+  isSelected: boolean,
+  isCompatible: boolean,
+): void {
+  applyRememberedColorsOnSwitch(
+    itemId,
+    meta,
+    paletteOptions,
+    selectedColors,
+    isSelected,
+    isCompatible,
+  );
+  rootViewNode.state._palettePreviewLastTotal = undefined;
+  rootViewNode.state.showPaletteModal = modalIdx;
+  m.redraw();
+}
+
 export const ItemWithRecolors: m.Component<
   ItemWithRecolorsAttrs,
   ItemWithRecolorsState
@@ -263,9 +319,16 @@ export const ItemWithRecolors: m.Component<
                     onclick: (e: MouseEvent) => {
                       e.stopPropagation();
                       if (!paletteReady) return;
-                      rootViewNode.state._palettePreviewLastTotal = undefined;
-                      rootViewNode.state.showPaletteModal = 0;
-                      m.redraw();
+                      openPaletteModal(
+                        rootViewNode,
+                        0,
+                        itemId,
+                        meta,
+                        paletteOptions,
+                        selectedColors,
+                        isSelected,
+                        isCompatible,
+                      );
                     },
                   },
                   [
@@ -340,10 +403,16 @@ export const ItemWithRecolors: m.Component<
                                 onclick: (e: MouseEvent) => {
                                   e.stopPropagation();
                                   if (!paletteReady) return;
-                                  rootViewNode.state._palettePreviewLastTotal =
-                                    undefined;
-                                  rootViewNode.state.showPaletteModal = idx;
-                                  m.redraw();
+                                  openPaletteModal(
+                                    rootViewNode,
+                                    idx,
+                                    itemId,
+                                    meta,
+                                    paletteOptions,
+                                    selectedColors,
+                                    isSelected,
+                                    isCompatible,
+                                  );
                                 },
                               },
                               [