UPD: LED Settings improvements

src/components/HSLInput.vue

@@ -157,7 +157,11 @@ function onSubmitHueInput() {
     shake()
     return
   }
-  hue.value = Math.max(0, Math.min(input, 360))
+  const newValue = Math.max(0, Math.min(input, 360))
+  if (newValue === hue.value) {
+    updateHueInput(newValue)
+  }
+  hue.value = newValue
 }
 
 function onSubmitSaturationInput() {
@@ -166,7 +170,11 @@ function onSubmitSaturationInput() {
     shake()
     return
   }
-  saturation.value = Math.max(0, Math.min(input, 100))
+  const newValue = Math.max(0, Math.min(input, 100))
+  if (newValue === saturation.value) {
+    updateSaturationInput(newValue)
+  }
+  saturation.value = newValue
 }
 
 function onSubmitLightnessInput() {
@@ -175,7 +183,11 @@ function onSubmitLightnessInput() {
     shake()
     return
   }
-  lightness.value = Math.max(0, Math.min(input, 100))
+  const newValue = Math.max(0, Math.min(input, 100))
+  if (newValue === lightness.value) {
+    updateLightnessInput(newValue)
+  }
+  lightness.value = newValue
 }
 
 function onSubmitRGBInput() {
@@ -186,11 +198,17 @@ function onSubmitRGBInput() {
     shake()
     return
   }
-  rgb.value = [
+  const newValue = [
     Math.max(0, Math.min(r, 255)),
     Math.max(0, Math.min(g, 255)),
     Math.max(0, Math.min(b, 255)),
   ]
+  if (newValue[0] === rgb.value[0] && newValue[1] === rgb.value[1] && newValue[2] === rgb.value[2]) {
+    updateRInput(newValue[0])
+    updateGInput(newValue[1])
+    updateBInput(newValue[2])
+  }
+  rgb.value = newValue
 }
 
 function foregroundBlack(r, g, b) {

src/components/config/pages/LEDsConfig.vue

@@ -2,8 +2,21 @@
   <TabsContent value="led-config" class="mt-0">
     <div class="w-96 bg-zinc-900 bg-opacity-40">
       <ScrollArea class="h-[720px]">
-        <ConfigSection title="TODO: THINK OF TITLE" :icon-component="Lightbulb">
+        <ConfigSection
-          <HSLInput/>
+          :title="$t('config_options.light_designer.led_feedback')" :icon-component="Lightbulb"
+          :show-toggle="true">
+          <h2 class="p-6">{{ $t('config_options.light_designer.led_mode') }}</h2>
+        </ConfigSection>
+        <div class="h-6" />
+        <!-- TODO: Instead of 3 color pickers, add a context select above -->
+        <ConfigSection :title="$t('config_options.light_designer.primary_color')" :icon-component="Paintbrush">
+          <HSLInput />
+        </ConfigSection>
+        <ConfigSection :title="$t('config_options.light_designer.secondary_color')" :icon-component="Brush">
+          <HSLInput />
+        </ConfigSection>
+        <ConfigSection :title="$t('config_options.light_designer.pointer_color')" :icon-component="Pencil">
+          <HSLInput />
         </ConfigSection>
       </ScrollArea>
     </div>
@@ -11,20 +24,7 @@
 </template>
 <script setup>
 import { ScrollArea } from '@/components/ui/scroll-area/index.js'
-import { Lightbulb } from 'lucide-vue-next'
+import { Lightbulb, Brush, Pencil, Paintbrush } from 'lucide-vue-next'
 import ConfigSection from '@/components/config/ConfigSection.vue'
 import HSLInput from '@/components/HSLInput.vue'
-</script>
+</script>
-<style scoped>
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-/* Firefox */
-input[type=number] {
-  -moz-appearance: textfield;
-  text-align: center;
-}
-</style>

src/lang/en.json

@@ -31,6 +31,11 @@
       "title": "GUI Designer"
     },
     "light_designer": {
+      "led_feedback": "LED Feedback",
+      "led_mode": "LED Mode",
+      "pointer_color": "Pointer Color",
+      "primary_color": "Primary Color",
+      "secondary_color": "Secondary Color",
       "subtitle": "Adjust behavior of LED Ring. Turn On/Off.",
       "title": "Light Designer"
     },