Implement color palette in Vue (#2047)

Co-authored-by: github-actions <github-actions@github.com>

src/components/node/NodePreview.vue

@@ -81,12 +81,10 @@ https://github.com/Nuked88/ComfyUI-N-Sidebar/blob/7ae7da4a9761009fb6629bc04c6830
 
 <script setup lang="ts">
 import { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
-import {
-  getColorPalette,
-  defaultColorPalette
-} from '@/extensions/core/colorPalette'
+import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import _ from 'lodash'
 import { useWidgetStore } from '@/stores/widgetStore'
+import { computed } from 'vue'
 
 const props = defineProps({
   nodeDef: {
@@ -95,12 +93,10 @@ const props = defineProps({
   }
 })
 
-// Node preview currently is recreated every time something is hovered.
-// So not reactive to the color palette changes after setup is fine.
-// If later we want NodePreview to be shown more persistently, then we should
-// make the getColorPalette() call reactive.
-const colors = getColorPalette()?.colors?.litegraph_base
-const litegraphColors = colors ?? defaultColorPalette.colors.litegraph_base
+const colorPaletteStore = useColorPaletteStore()
+const litegraphColors = computed(
+  () => colorPaletteStore.completedActivePalette.colors.litegraph_base
+)
 
 const widgetStore = useWidgetStore()