Fix node menu custom color state

src/composables/graph/useNodeMenuOptions.test.ts

@@ -0,0 +1,93 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import type * as VueI18nModule from 'vue-i18n'
+
+const mocks = vi.hoisted(() => ({
+  applyShape: vi.fn(),
+  applyColor: vi.fn(),
+  applyCustomColor: vi.fn(),
+  adjustNodeSize: vi.fn(),
+  toggleNodeCollapse: vi.fn(),
+  toggleNodePin: vi.fn(),
+  toggleNodeBypass: vi.fn(),
+  runBranch: vi.fn(),
+  openCustomColorPicker: vi.fn(),
+  getCurrentAppliedColor: vi.fn(() => null)
+}))
+
+vi.mock('vue-i18n', async (importOriginal) => {
+  const actual = await importOriginal<typeof VueI18nModule>()
+
+  return {
+    ...actual,
+    useI18n: () => ({
+      t: (key: string) => key
+    })
+  }
+})
+
+vi.mock('./useNodeCustomization', () => ({
+  useNodeCustomization: () => ({
+    shapeOptions: [],
+    applyShape: mocks.applyShape,
+    applyColor: mocks.applyColor,
+    applyCustomColor: mocks.applyCustomColor,
+    colorOptions: [
+      {
+        name: 'noColor',
+        localizedName: 'color.noColor',
+        value: {
+          dark: '#353535',
+          light: '#6f6f6f'
+        }
+      }
+    ],
+    favoriteColors: { value: [] },
+    recentColors: { value: [] },
+    getCurrentAppliedColor: mocks.getCurrentAppliedColor,
+    isLightTheme: { value: false },
+    openCustomColorPicker: mocks.openCustomColorPicker
+  })
+}))
+
+vi.mock('./useSelectedNodeActions', () => ({
+  useSelectedNodeActions: () => ({
+    adjustNodeSize: mocks.adjustNodeSize,
+    toggleNodeCollapse: mocks.toggleNodeCollapse,
+    toggleNodePin: mocks.toggleNodePin,
+    toggleNodeBypass: mocks.toggleNodeBypass,
+    runBranch: mocks.runBranch
+  })
+}))
+
+describe('useNodeMenuOptions', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mocks.getCurrentAppliedColor.mockReturnValue(null)
+  })
+
+  it('keeps the custom node color entry unset when there is no shared applied color', async () => {
+    const { useNodeMenuOptions } = await import('./useNodeMenuOptions')
+    const { colorSubmenu } = useNodeMenuOptions()
+
+    const customEntry = colorSubmenu.value.find(
+      (entry) => entry.label === 'g.custom'
+    )
+
+    expect(customEntry).toBeDefined()
+    expect(customEntry?.color).toBeUndefined()
+  })
+
+  it('preserves the shared applied color for the custom node color entry', async () => {
+    mocks.getCurrentAppliedColor.mockReturnValue('#abcdef')
+
+    const { useNodeMenuOptions } = await import('./useNodeMenuOptions')
+    const { colorSubmenu } = useNodeMenuOptions()
+
+    const customEntry = colorSubmenu.value.find(
+      (entry) => entry.label === 'g.custom'
+    )
+
+    expect(customEntry).toBeDefined()
+    expect(customEntry?.color).toBe('#abcdef')
+  })
+})

src/composables/graph/useNodeMenuOptions.ts

@@ -80,7 +80,7 @@ export function useNodeMenuOptions() {
       ...customEntries,
       {
         label: t('g.custom'),
-        color: getCurrentAppliedColor() ?? '#353535',
+        color: getCurrentAppliedColor() ?? undefined,
         action: () => {
           void openCustomColorPicker()
         }