ADD: Ring color configuration

src/renderer/src/components/config/knob/KnobLightConfig.vue

@@ -1,27 +1,58 @@
 <template>
   <ConfigSection title="Ring Colors" :icon-component="Palette">
-    <PaletteInput v-model="ringColors" />
+    <PaletteInput
+      ref="paletteInput"
+      :options="ringColors"
+      @input="
+        (optionKey, colorNumber) => {
+          ringColors = {
+            ...ringColors,
+            [optionKey]: {
+              ...ringColors[optionKey],
+              colorNumber
+            }
+          }
+        }
+      "
+    />
   </ConfigSection>
 </template>
 <script setup>
 import { Palette } from 'lucide-vue-next'
 import ConfigSection from '@renderer/components/common/ConfigSection.vue'
 import PaletteInput from '@renderer/components/common/PaletteInput.vue'
-import Color from 'color'
-import { ref } from 'vue'
+import { useDeviceStore } from '@renderer/deviceStore'
+import { computed } from 'vue'
 
-const ringColors = ref({
-  primary: {
-    titleKey: 'config_options.light_designer.primary_color',
-    color: Color('#8f9af2')
+const deviceStore = useDeviceStore()
+
+const ringColors = computed({
+  get() {
+    return {
+      primary: {
+        titleKey: 'config_options.light_designer.primary_color',
+        colorNumber: deviceStore.currentProfile.primary
+      },
+      secondary: {
+        titleKey: 'config_options.light_designer.secondary_color',
+        colorNumber: deviceStore.currentProfile.secondary
+      },
+      pointer: {
+        titleKey: 'config_options.light_designer.pointer_color',
+        colorNumber: deviceStore.currentProfile.pointer
+      }
+    }
   },
-  secondary: {
-    titleKey: 'config_options.light_designer.secondary_color',
-    color: Color('#c06300')
-  },
-  pointer: {
-    titleKey: 'config_options.light_designer.pointer_color',
-    color: Color('#ffa346')
+  set(newValue) {
+    if (newValue.primary.colorNumber !== deviceStore.currentProfile.primary) {
+      deviceStore.setPrimaryColor(newValue.primary.colorNumber)
+    }
+    if (newValue.secondary.colorNumber !== deviceStore.currentProfile.secondary) {
+      deviceStore.setSecondaryColor(newValue.secondary.colorNumber)
+    }
+    if (newValue.pointer.colorNumber !== deviceStore.currentProfile.pointer) {
+      deviceStore.setPointerColor(newValue.pointer.colorNumber)
+    }
   }
 })
 </script>

src/renderer/src/deviceStore.ts

@@ -68,10 +68,8 @@ export const useDeviceStore = defineStore('device', {
   }),
   getters: {
     connected: (state) => state.currentDeviceId !== null,
-    currentProfile: (state) =>
-      state.currentProfileName
-        ? state.profiles.find((profile) => profile.name === state.currentProfileName)
-        : null,
+    currentProfile: (state): Profile | null =>
+      state.profiles.find((profile) => profile.name === state.currentProfileName) || null,
     profileTags: (state) => [...new Set(state.profiles.map((profile) => profile.profileTag))],
     profilesByTag: (state) =>
       state.profiles.reduce((acc, profile) => {
@@ -204,6 +202,33 @@ export const useDeviceStore = defineStore('device', {
           JSON.stringify({ profile: this.currentProfileName, updates: { [propertyName]: color } })
         )
       }
+    },
+    setPrimaryColor(color: number, updateDevice: boolean = true) {
+      this.currentProfile!.primary = color
+      if (updateDevice) {
+        sendDebounced(
+          this.currentDeviceId!,
+          JSON.stringify({ profile: this.currentProfileName, updates: { primary: color } })
+        )
+      }
+    },
+    setSecondaryColor(color: number, updateDevice: boolean = true) {
+      this.currentProfile!.secondary = color
+      if (updateDevice) {
+        sendDebounced(
+          this.currentDeviceId!,
+          JSON.stringify({ profile: this.currentProfileName, updates: { secondary: color } })
+        )
+      }
+    },
+    setPointerColor(color: number, updateDevice: boolean = true) {
+      this.currentProfile!.pointer = color
+      if (updateDevice) {
+        sendDebounced(
+          this.currentDeviceId!,
+          JSON.stringify({ profile: this.currentProfileName, updates: { pointer: color } })
+        )
+      }
     }
   }
 })