fix(settings): open settings with reactive color schemes

apps/desktop/src/components/editor/EditorSettingsDialog.vue

@@ -59,7 +59,7 @@ import { isAiConnectionTestConfigCurrent } from "@/lib/ai/aiConnectionTest";
 import { MAX_AGENT_TURNS_DEFAULT, MAX_AGENT_TURNS_MAX, MAX_AGENT_TURNS_MIN, maxAgentTurnsOutOfRange, normalizeMaxAgentTurns } from "@/lib/ai/maxAgentTurns";
 import ThemeCustomizerDialog from "./ThemeCustomizerDialog.vue";
 import DataGridTypeColorSchemeDialog from "@/components/grid/DataGridTypeColorSchemeDialog.vue";
-import { DATA_GRID_TYPE_COLOR_SCHEME_AUTO_ID, type DataGridTypeColorScheme } from "@/lib/dataGrid/dataGridTypeColorScheme";
+import { DATA_GRID_TYPE_COLOR_SCHEME_AUTO_ID, cloneDataGridTypeColorSchemes, type DataGridTypeColorScheme } from "@/lib/dataGrid/dataGridTypeColorScheme";
 import TunnelProfileManager from "@/components/connection/TunnelProfileManager.vue";
 import DangerConfirmDialog from "./DangerConfirmDialog.vue";
 import { isTauriRuntime } from "@/lib/backend/tauriRuntime";
@@ -308,7 +308,7 @@ const editUiScale = ref(settingsStore.editorSettings.uiScale);
 const editTheme = ref(settingsStore.editorSettings.theme);
 const editCustomThemes = ref<CustomTheme[]>([...settingsStore.editorSettings.customThemes]);
 const editActiveCustomThemeId = ref(settingsStore.editorSettings.activeCustomThemeId);
-const editDataGridTypeColorSchemes = ref<DataGridTypeColorScheme[]>(structuredClone(settingsStore.editorSettings.dataGridTypeColorSchemes));
+const editDataGridTypeColorSchemes = ref<DataGridTypeColorScheme[]>(cloneDataGridTypeColorSchemes(settingsStore.editorSettings.dataGridTypeColorSchemes));
 const editActiveDataGridTypeColorSchemeId = ref(settingsStore.editorSettings.activeDataGridTypeColorSchemeId);
 const showThemeCustomizer = ref(false);
 const showDataGridTypeColorScheme = ref(false);
@@ -825,7 +825,7 @@ function syncEditorSettingsDraftFromStore() {
   editShowColumnTypesInHeader.value = settingsStore.editorSettings.showColumnTypesInHeader;
   editDataGridShowTransposeFieldMetadata.value = settingsStore.editorSettings.dataGridShowTransposeFieldMetadata;
   editColorizeDataGridCellTypes.value = settingsStore.editorSettings.colorizeDataGridCellTypes;
-  editDataGridTypeColorSchemes.value = structuredClone(settingsStore.editorSettings.dataGridTypeColorSchemes);
+  editDataGridTypeColorSchemes.value = cloneDataGridTypeColorSchemes(settingsStore.editorSettings.dataGridTypeColorSchemes);
   editActiveDataGridTypeColorSchemeId.value = settingsStore.editorSettings.activeDataGridTypeColorSchemeId;
   editShowIndexIndicatorsInHeader.value = settingsStore.editorSettings.showIndexIndicatorsInHeader;
   editCompactColumnHeaderActions.value = settingsStore.editorSettings.compactColumnHeaderActions;
@@ -1432,7 +1432,7 @@ function handleThemeSave(updatedThemes: CustomTheme[], activeId: string) {
 }
 
 function handleDataGridTypeColorSchemeChange(schemes: DataGridTypeColorScheme[], activeId: string) {
-  editDataGridTypeColorSchemes.value = structuredClone(schemes);
+  editDataGridTypeColorSchemes.value = cloneDataGridTypeColorSchemes(schemes);
   editActiveDataGridTypeColorSchemeId.value = activeId;
 }
 

apps/desktop/src/components/grid/DataGridTypeColorSchemeDialog.vue

@@ -8,7 +8,7 @@ import ColorSpectrumPicker from "@/components/ui/ColorSpectrumPicker.vue";
 import { Copy, Pencil, Plus, RotateCcw, Trash2 } from "@lucide/vue";
 import { useI18n } from "vue-i18n";
 import { useTheme } from "@/composables/useTheme";
-import { DATA_GRID_TYPE_COLOR_SCHEME_AUTO_ID, type DataGridTypeColorKey, type DataGridTypeColorScheme, defaultDataGridTypeColors, normalizeDataGridTypeColors } from "@/lib/dataGrid/dataGridTypeColorScheme";
+import { DATA_GRID_TYPE_COLOR_SCHEME_AUTO_ID, cloneDataGridTypeColorSchemes, type DataGridTypeColorKey, type DataGridTypeColorScheme, defaultDataGridTypeColors, normalizeDataGridTypeColors } from "@/lib/dataGrid/dataGridTypeColorScheme";
 
 interface Props {
   open: boolean;
@@ -29,9 +29,6 @@ const localSchemes = ref<DataGridTypeColorScheme[]>([]);
 const activeEditId = ref(DATA_GRID_TYPE_COLOR_SCHEME_AUTO_ID);
 const renamingId = ref<string | null>(null);
 const renamingName = ref("");
-function cloneSchemes(schemes: DataGridTypeColorScheme[]): DataGridTypeColorScheme[] {
-  return schemes.map((scheme) => ({ ...scheme, colors: { ...scheme.colors } }));
-}
 
 // Everything below edits this buffer only. Nothing reaches the settings store
 // until Done, so Cancel just drops it.
@@ -39,7 +36,7 @@ watch(
   () => props.open,
   (isOpen) => {
     if (!isOpen) return;
-    localSchemes.value = cloneSchemes(props.schemes);
+    localSchemes.value = cloneDataGridTypeColorSchemes(props.schemes);
     activeEditId.value = props.activeSchemeId;
     renamingId.value = null;
   },
@@ -127,7 +124,7 @@ function confirmRename() {
 function handleDone() {
   emit(
     "change",
-    cloneSchemes(localSchemes.value).map((scheme) => ({ ...scheme, colors: normalizeDataGridTypeColors(scheme.colors) })),
+    cloneDataGridTypeColorSchemes(localSchemes.value).map((scheme) => ({ ...scheme, colors: normalizeDataGridTypeColors(scheme.colors) })),
     activeEditId.value,
   );
   emit("update:open", false);

apps/desktop/src/lib/__tests__/dataGrid/dataGridTypeColorScheme.spec.ts

@@ -1,10 +1,12 @@
 import { readFileSync } from "node:fs";
+import { reactive } from "vue";
 import { describe, expect, it } from "vitest";
 import {
   DATA_GRID_TYPE_COLOR_KEYS,
   DATA_GRID_TYPE_COLOR_SCHEME_AUTO_ID,
   DEFAULT_DATA_GRID_TYPE_COLORS_DARK,
   DEFAULT_DATA_GRID_TYPE_COLORS_LIGHT,
+  cloneDataGridTypeColorSchemes,
   dataGridTypeColorCssVar,
   defaultDataGridTypeColors,
   normalizeActiveDataGridTypeColorSchemeId,
@@ -55,6 +57,16 @@ describe("data grid type color keys", () => {
 });
 
 describe("data grid type color normalization", () => {
+  it("clones Vue reactive schemes into detached plain data", () => {
+    const schemes = reactive([scheme("mine", { integer: "#123456" })]);
+
+    const cloned = cloneDataGridTypeColorSchemes(schemes);
+
+    expect(cloned).toEqual(schemes);
+    cloned[0].colors.integer = "#abcdef";
+    expect(schemes[0].colors.integer).toBe("#123456");
+  });
+
   it("keeps valid six-digit hex values", () => {
     expect(normalizeDataGridTypeColors({ ...DEFAULT_DATA_GRID_TYPE_COLORS_LIGHT, integer: "#ABCDEF" }).integer).toBe("#ABCDEF");
   });

apps/desktop/src/lib/dataGrid/dataGridTypeColorScheme.ts

@@ -16,6 +16,18 @@ export const DATA_GRID_TYPE_COLOR_KEYS = DATA_GRID_TYPE_VISUAL_KINDS.filter((kin
 /** Sentinel scheme id meaning "leave the stylesheet defaults alone and follow light/dark". */
 export const DATA_GRID_TYPE_COLOR_SCHEME_AUTO_ID = "auto";
 
+/**
+ * @param schemes Schemes from persisted settings, Vue reactive state, or dialog drafts
+ * @return Plain detached copies safe to keep in another reactive buffer
+ */
+export function cloneDataGridTypeColorSchemes(schemes: readonly DataGridTypeColorScheme[]): DataGridTypeColorScheme[] {
+  return schemes.map((scheme) => ({
+    id: scheme.id,
+    name: scheme.name,
+    colors: { ...scheme.colors },
+  }));
+}
+
 // Keep these in sync with the :root / :root.dark blocks in styles/globals.css.
 // dataGridTypeColorScheme.spec.ts asserts the two stay identical.
 export const DEFAULT_DATA_GRID_TYPE_COLORS_LIGHT: DataGridTypeColors = {

apps/desktop/src/stores/__tests__/settingsStore.typeColorScheme.spec.ts

@@ -71,7 +71,8 @@ describe("settings store type color scheme persistence", () => {
   it("stages scheme edits in the settings draft", () => {
     const dialogSource = readFileSync(new URL("../../components/editor/EditorSettingsDialog.vue", import.meta.url), "utf8");
 
-    expect(dialogSource).toContain("editDataGridTypeColorSchemes.value = structuredClone(schemes)");
+    expect(dialogSource).toContain("editDataGridTypeColorSchemes.value = cloneDataGridTypeColorSchemes(schemes)");
+    expect(dialogSource).not.toContain("structuredClone(settingsStore.editorSettings.dataGridTypeColorSchemes)");
     expect(dialogSource).toContain("editActiveDataGridTypeColorSchemeId.value = activeId");
     expect(dialogSource).not.toMatch(/settingsStore\.updateEditorSettings\w*\(\{[^}]*DataGridTypeColorScheme/);
   });