ADD: Optional tab focus on key press/release

src/renderer/src/components/common/PaletteInput.vue

@@ -17,12 +17,7 @@
             ? 'hover:bg-zinc-800 text-muted-foreground mx-[1px]'
             : 'text-black bg-zinc-300 hover:bg-zinc-200 border-x border-t border-zinc-100'
         "
-        @click="
+        @click="selectOption(key)"
-          () => {
-            enableAnimateSliders()
-            currentOption = key
-          }
-        "
       >
         {{ $t(option.titleKey) }}
       </button>
@@ -34,12 +29,7 @@
         class="h-6 flex-1 transition-colors"
         :class="{ 'color-tab': currentOption === key }"
         :style="{ background: Color(option.colorNumber).hex() }"
-        @click="
+        @click="selectOption(key)"
-          () => {
-            enableAnimateSliders()
-            currentOption = key
-          }
-        "
       />
     </div>
     <HSVInput
@@ -85,7 +75,11 @@ const props = defineProps({
 function enableAnimateSliders() {
   hsvInput.value.enableAnimateSliders()
 }
-defineExpose({ enableAnimateSliders })
+function selectOption(key) {
+  enableAnimateSliders()
+  currentOption.value = key
+}
+defineExpose({ selectOption, enableAnimateSliders })
 
 onBeforeMount(() => {
   if (currentOption.value === null) currentOption.value = Object.keys(props.options)[0]

src/renderer/src/components/config/keys/KeyLightConfig.vue

@@ -59,4 +59,11 @@ watch(
   () => appStore.selectedKey,
   () => paletteInput.value.enableAnimateSliders()
 )
+// watch(
+//   () => deviceStore.keyStates[appStore.selectedKey],
+//   () =>
+//     paletteInput.value.selectOption(
+//       deviceStore.keyStates[appStore.selectedKey] ? 'pressed' : 'default'
+//     )
+// )
 </script>