From ad77354d47aeb4a6b2ad93f5f8ae91904784999a Mon Sep 17 00:00:00 2001
From: ToBinio <tobias.frischmann@proton.me>
Date: Mon, 13 Jul 2026 13:02:54 +0200
Subject: [PATCH] color ui

---
 backend/src/web/mod.rs                  | 18 ++++-
 frontend/src/components/ColorSelect.vue | 96 +++++++++++++++++++++++++
 frontend/src/components/DeviceEntry.vue | 38 +++++++++-
 frontend/src/types/device.ts            |  2 +
 4 files changed, 151 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/components/ColorSelect.vue

diff --git a/backend/src/web/mod.rs b/backend/src/web/mod.rs
index 1befeca..a97e840 100644
--- a/backend/src/web/mod.rs
+++ b/backend/src/web/mod.rs
@@ -38,13 +38,29 @@ pub async fn app(state: AppState) -> eyre::Result<Router> {
 #[derive(Debug, Clone, Serialize)]
 pub struct Device {
     pub id: String,
+    pub mode: Mode,
+    pub color: String,
+}
+
+#[derive(Debug, Clone, Serialize)]
+pub enum Mode {
+    #[serde(rename = "off")]
+    Off,
+    #[serde(rename = "color")]
+    Color,
+    #[serde(rename = "sun")]
+    Sun,
 }
 
 async fn get_devices(state: State<AppState>) -> Json<Vec<Device>> {
     let devices = state.registered_devices.read().await;
     let devices = devices
         .iter()
-        .map(|(id, _)| Device { id: id.clone() })
+        .map(|(id, _)| Device {
+            id: id.clone(),
+            mode: Mode::Off,
+            color: "#ffffffcc".to_string(),
+        })
         .collect();
 
     Json(devices)
diff --git a/frontend/src/components/ColorSelect.vue b/frontend/src/components/ColorSelect.vue
new file mode 100644
index 0000000..f27673e
--- /dev/null
+++ b/frontend/src/components/ColorSelect.vue
@@ -0,0 +1,96 @@
+<script setup lang="ts">
+	import type { Color } from "reka-ui";
+	import {
+		ColorAreaArea,
+		ColorAreaRoot,
+		ColorAreaThumb,
+		ColorSliderRoot,
+		ColorSliderThumb,
+		ColorSliderTrack,
+		colorToString,
+		normalizeColor,
+	} from "reka-ui";
+	import { computed } from "vue";
+
+	let color = defineModel<string>({ required: true });
+
+	let colorObj = computed({
+		get: () => normalizeColor(color.value),
+		set: (value) => (color.value = colorToString(value)),
+	});
+
+	function handleColorUpdate(newColor: Color) {
+		colorObj.value = newColor;
+	}
+</script>
+
+<template>
+	<div class="border border-gray-800 rounded p-1">
+		<ColorAreaRoot
+			v-slot="{ style }"
+			:model-value="colorObj"
+			color-space="hsl"
+			x-channel="saturation"
+			y-channel="lightness"
+			class="relative"
+			@update:color="handleColorUpdate"
+		>
+			<ColorAreaArea
+				class="relative w-full h-35 rounded-md overflow-hidden focus:outline-none focus:ring-2 focus:ring-primary"
+				:style="style"
+			>
+				<ColorAreaThumb
+					class="block w-4 h-4 rounded-full bg-white border-2 border-white shadow-md cursor-pointer hover:scale-110 transition-transform"
+				/>
+			</ColorAreaArea>
+		</ColorAreaRoot>
+
+		<!-- Hue Slider -->
+		<div class="flex flex-col gap-2">
+			<label class="text-xs font-medium text-muted-foreground" for="hue-slider"
+				>Hue</label
+			>
+			<ColorSliderRoot
+				id="hue-slider"
+				:model-value="colorObj"
+				channel="hue"
+				color-space="hsl"
+				class="relative flex items-center w-full h-4"
+				@update:color="handleColorUpdate"
+			>
+				<ColorSliderTrack class="relative flex-1 rounded-full h-2">
+					<div class="absolute inset-0 rounded-full hue-gradient" />
+				</ColorSliderTrack>
+				<ColorSliderThumb
+					class="block w-4 h-4 rounded-full bg-white border-2 border-white shadow-md cursor-pointer hover:scale-110 transition-transform focus:outline-none focus:ring-2 focus:ring-primary"
+				/>
+			</ColorSliderRoot>
+		</div>
+
+		<!-- Alpha Slider -->
+		<div class="flex flex-col gap-2">
+			<label
+				class="text-xs font-medium text-muted-foreground"
+				for="alpha-slider"
+				>Brightness</label
+			>
+			<ColorSliderRoot
+				id="alpha-slider"
+				:model-value="colorObj"
+				channel="alpha"
+				color-space="hsl"
+				class="relative flex items-center w-full h-4"
+				@update:color="handleColorUpdate"
+			>
+				<ColorSliderTrack
+					class="relative flex-1 rounded-full h-2 checkerboard-bg"
+				>
+					<div class="absolute inset-0 rounded-full" />
+				</ColorSliderTrack>
+				<ColorSliderThumb
+					class="block w-4 h-4 rounded-full bg-white border-2 border-white shadow-md cursor-pointer hover:scale-110 transition-transform focus:outline-none focus:ring-2 focus:ring-primary"
+				/>
+			</ColorSliderRoot>
+		</div>
+	</div>
+</template>
diff --git a/frontend/src/components/DeviceEntry.vue b/frontend/src/components/DeviceEntry.vue
index 414d531..8531190 100644
--- a/frontend/src/components/DeviceEntry.vue
+++ b/frontend/src/components/DeviceEntry.vue
@@ -1,11 +1,45 @@
 <script setup lang="ts">
+	import { RadioGroupItem, RadioGroupRoot } from "reka-ui";
+	import { computed } from "vue";
 	import type { Device } from "../types/device";
+	import ColorSelect from "./ColorSelect.vue";
 
-	defineProps<{ device: Device }>();
+	let props = defineProps<{ device: Device }>();
+
+	let mode = computed({
+		get: () => props.device.mode,
+		set: (value) => (props.device.mode = value),
+	});
+
+	let color = computed({
+		get: () => props.device.color,
+		set: (value) => (props.device.color = value),
+	});
 </script>
 
 <template>
-	<div class="border border-gray-800 rounded">
+	<div class="border border-gray-800 rounded w-fit p-1 flex flex-col gap-1">
 		<h2 class="text-2xl">{{ device.id }}</h2>
+		<RadioGroupRoot v-model="mode" class="border border-gray-500 w-fit flex">
+			<RadioGroupItem
+				class="data-[state=checked]:bg-gray-300 px-2 py-0.5"
+				value="off"
+				>Off</RadioGroupItem
+			>
+			<div class="bg-gray-500 w-px" />
+			<RadioGroupItem
+				class="data-[state=checked]:bg-gray-300 px-2 py-0.5"
+				value="color"
+				>Color</RadioGroupItem
+			>
+			<div class="bg-gray-500 w-px" />
+			<RadioGroupItem
+				class="data-[state=checked]:bg-gray-300 px-2 py-0.5"
+				value="sun"
+				>Day - Night</RadioGroupItem
+			>
+		</RadioGroupRoot>
+
+		<ColorSelect v-model="color" />
 	</div>
 </template>
diff --git a/frontend/src/types/device.ts b/frontend/src/types/device.ts
index 3813aee..975ade6 100644
--- a/frontend/src/types/device.ts
+++ b/frontend/src/types/device.ts
@@ -1,3 +1,5 @@
 export type Device = {
 	id: string;
+	mode: string;
+	color: string;
 };
-- 
2.51.2