ADD: PaletteInput for multiple colors

src/components/config/pages/LEDsConfig.vue

@@ -9,14 +9,8 @@
         </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">
+        <ConfigSection :title="$t('config_options.light_designer.led_colors')" :icon-component="Palette">
-          <HSVInput />
+          <PaletteInput />
-        </ConfigSection>
-        <ConfigSection :title="$t('config_options.light_designer.secondary_color')" :icon-component="Brush">
-          <HSVInput />
-        </ConfigSection>
-        <ConfigSection :title="$t('config_options.light_designer.pointer_color')" :icon-component="Pencil">
-          <HSVInput />
         </ConfigSection>
       </ScrollArea>
     </div>
@@ -24,7 +18,7 @@
 </template>
 <script setup>
 import { ScrollArea } from '@/components/ui/scroll-area/index.js'
-import { Lightbulb, Brush, Pencil, Paintbrush } from 'lucide-vue-next'
+import { Lightbulb, Palette } from 'lucide-vue-next'
 import ConfigSection from '@/components/config/ConfigSection.vue'
-import HSVInput from '@/components/HSVInput.vue'
+import PaletteInput from '@/components/config/pages/PaletteInput.vue'
 </script>

src/components/config/pages/PaletteInput.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="flex font-heading">
+    <button
+      v-for="(option, key) in options" :key="key"
+      class="flex-1 pt-2 items-center text-center relative"
+      :class="currentOption!==key ? '' : 'text-black bg-white'"
+      @click="currentOption = key">
+      {{ $t(option.key) }}
+      <div class="h-4 w-full mt-2" :style="{background: option.color.hex()}"/>
+    </button>
+  </div>
+  <HSVInput v-model="options[currentOption].color" class="relative z-20" />
+</template>
+<script setup>
+import HSVInput from '@/components/HSVInput.vue'
+import Color from 'color'
+import { reactive, ref } from 'vue'
+
+const currentOption = ref('primary')
+
+const model = defineModel({
+  type: Object,
+  default: () => ({
+    primary: {
+      key: 'config_options.light_designer.primary_color',
+      color: Color('#ff0000'),
+    },
+    secondary: {
+      key: 'config_options.light_designer.secondary_color',
+      color: Color('#00ff00'),
+    },
+    pointer: {
+      key: 'config_options.light_designer.pointer_color',
+      color: Color('#0000ff'),
+    },
+  }),
+})
+
+const options = reactive(model.value)
+
+</script>

src/lang/en.json

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