UPD: Bigger sliders

src/components/HSVInput.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref, watch } from 'vue'
+import { computed, onBeforeMount, ref, watch } from 'vue'
 import Color from 'color'
 import { SliderRoot, SliderThumb, SliderTrack } from 'radix-vue'
 
@@ -137,6 +137,7 @@ function updateInputs() {
 }
 
 watch(color, updateInputs)
+onBeforeMount(updateInputs)
 
 const colorFieldText = ref(null)
 
@@ -228,12 +229,13 @@ function shake() {
       </div>
     </div>
     <div
+      class="px-6"
       :style="{background: `linear-gradient(180deg, hsla(${color.hue()}, ${color.saturationl()}%, ${color.lightness()}%, 30%) 0%, transparent 30%`}">
-      <div class="px-6 py-4 flex">
+      <div class="flex pt-4">
         <p class="font-heading text-muted-foreground w-24">HUE</p>
         <SliderRoot
           v-model="hueSliderModel" :max="359"
-          class="relative flex w-full touch-none select-none items-center">
+          class="relative flex w-full touch-none select-none items-center h-10">
           <SliderTrack
             class="relative h-2.5 w-full grow overflow-hidden rounded-full border-2 border-zinc-900"
             style="background: linear-gradient(90deg, rgba(255, 0, 0, 1) 0%, rgba(255, 154, 0, 1) 10%, rgba(208, 222, 33, 1) 20%, rgba(79, 220, 74, 1) 30%, rgba(63, 218, 216, 1) 40%, rgba(47, 201, 226, 1) 50%, rgba(28, 127, 238, 1) 60%, rgba(95, 21, 242, 1) 70%, rgba(186, 12, 248, 1) 80%, rgba(251, 7, 217, 1) 90%, rgba(255, 0, 0, 1) 100%)" />
@@ -241,11 +243,11 @@ function shake() {
             class="block h-5 w-5 rounded-full border hover:bg-zinc-900 border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 cursor-pointer focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
         </SliderRoot>
       </div>
-      <div class="px-6 py-4 flex">
+      <div class="flex pt-4">
         <p class="font-heading text-muted-foreground w-24">SAT</p>
         <SliderRoot
           v-model="saturationSliderModel" :max="100"
-          class="relative flex w-full touch-none select-none items-center">
+          class="relative flex w-full touch-none select-none items-center h-10">
           <SliderTrack
             class="relative h-2.5 w-full grow overflow-hidden rounded-full border-2 border-zinc-900"
             :style="{background: `linear-gradient(90deg, hsl(0, 0%, ${saturationSliderColor.lightness()}%) 0%, hsl(${saturationSliderColor.hue()}, 100%, ${saturationSliderColor.lightness()}%) 100%)`}" />
@@ -253,11 +255,11 @@ function shake() {
             class="block h-5 w-5 rounded-full border hover:bg-zinc-900 border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 cursor-pointer focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
         </SliderRoot>
       </div>
-      <div class="px-6 py-4 flex">
+      <div class="flex pt-4">
         <p class="font-heading text-muted-foreground w-24">VAL</p>
         <SliderRoot
           v-model="valueSliderModel" :max="100"
-          class="relative flex w-full touch-none select-none items-center">
+          class="relative flex w-full touch-none select-none items-center h-10">
           <SliderTrack
             class="relative h-2.5 w-full grow overflow-hidden rounded-full border-2 border-zinc-900"
             :style="{background: `linear-gradient(90deg, black, hsl(${valueSliderColor.hue()}, ${valueSliderColor.saturationl()}%, ${valueSliderColor.lightness()}%) 100%`}" />

src/components/config/pages/LEDsConfig.vue

@@ -5,9 +5,11 @@
         <ConfigSection
           :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>
+          <h2 class="p-6 inline-block">{{ $t('config_options.light_designer.led_mode') }}</h2> [TODO]
+          <div class="px-6 py-2">
+            <Slider v-model="brightnessSliderModel" max="100" class="h-10" />
+          </div>
         </ConfigSection>
-        <div class="h-6" />
         <ConfigSection :title="$t('config_options.light_designer.led_colors')" :icon-component="Palette">
           <PaletteInput v-model="colors" />
         </ConfigSection>
@@ -21,20 +23,38 @@ import { Lightbulb, Palette } from 'lucide-vue-next'
 import ConfigSection from '@/components/config/ConfigSection.vue'
 import PaletteInput from '@/components/config/pages/PaletteInput.vue'
 import Color from 'color'
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
+import { store } from '@/store.js'
+import { Slider } from '@/components/ui/slider/index.js'
+
+const ledConfig = computed(() => store.currentProfile.ledConfig)
+
+const brightnessSliderModel = computed({
+  get: () => [ledConfig.value.ledBrightness],
+  set: (val) => ledConfig.value.ledBrightness = val[0],
+})
 
 const colors = ref({
   primary: {
     key: 'config_options.light_designer.primary_color',
-    color: Color('#ff0000'),
+    color: computed({
+      get: () => Color(ledConfig.value.primary),
+      set: (color) => [ledConfig.value.primary.h, ledConfig.value.primary.s, ledConfig.value.primary.v] = color.hsv().color,
+    }),
   },
   secondary: {
     key: 'config_options.light_designer.secondary_color',
-    color: Color('#00ff00'),
+    color: computed({
+      get: () => Color(ledConfig.value.secondary),
+      set: (color) => [ledConfig.value.secondary.h, ledConfig.value.secondary.s, ledConfig.value.secondary.v] = color.hsv().color,
+    }),
   },
   pointer: {
     key: 'config_options.light_designer.pointer_color',
-    color: Color('#0000ff'),
+    color: computed({
+      get: () => Color(ledConfig.value.pointer),
+      set: (color) => [ledConfig.value.pointer.h, ledConfig.value.pointer.s, ledConfig.value.pointer.v] = color.hsv().color,
+    }),
   },
 })
 </script>