feat: charachorder lite brightness & color settings

src/lib/setting.ts

@@ -2,9 +2,12 @@ import type { Action } from "svelte/action";
 import { changes, ChangeType, settings } from "$lib/undo-redo";
 
 export const setting: Action<
-  HTMLInputElement,
+  HTMLInputElement | HTMLSelectElement,
   { id: number; inverse?: number; scale?: number }
-> = function (node: HTMLInputElement, { id, inverse, scale }) {
+> = function (
+  node: HTMLInputElement | HTMLSelectElement,
+  { id, inverse, scale },
+) {
   node.setAttribute("disabled", "");
   const type = node.getAttribute("type") as "number" | "checkbox";
   const min = node.hasAttribute("min")
@@ -17,7 +20,7 @@ export const setting: Action<
   const unsubscribe = settings.subscribe(async (settings) => {
     if (id in settings) {
       const { value, isApplied } = settings[id]!;
-      if (type === "number") {
+      if (type === "number" || node instanceof HTMLSelectElement) {
         node.value = (
           inverse !== undefined
             ? inverse / value
@@ -41,7 +44,7 @@ export const setting: Action<
 
   async function listener() {
     let value: number;
-    if (type === "number") {
+    if (type === "number" || node instanceof HTMLSelectElement) {
       value = Number(node.value);
       if (Number.isNaN(value)) return;
       value = Math.floor(

src/routes/config/settings/+page.svelte

@@ -254,10 +254,28 @@
     {#if $serialPort.device === "LITE"}
       <fieldset>
         <legend><label><input type="checkbox" />RGB</label></legend>
-        <label>Brightness<input type="range" min="0" max="50" step="1" /></label
+        <label
+          >Brightness<input
+            use:setting={{ id: 0x81 }}
+            type="range"
+            min="0"
+            max="50"
+            step="1"
+          /></label
         >
-        Color
+        <select use:setting={{ id: 0x82 }}>
-        <label>Reactive Keys<input type="checkbox" /></label>
+          <option value="0">White</option>
+          <option value="1">Red</option>
+          <option value="2">Orange</option>
+          <option value="3">Yellow</option>
+          <option value="4">Lime</option>
+          <option value="5">Green</option>
+          <option value="7">Cyan</option>
+          <option value="9">Blue</option>
+          <option value="10">Violet</option>
+          <option value="11">Pink</option>
+          <option value="10">Multicolor</option>
+        </select>
       </fieldset>
     {/if}
   </form>