color light support in HA panel

webui/src/components/HomeAssistantControls.jsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { useSession } from '../context/SessionContext.jsx';
 import { useControlSystem } from '../controls/index.js';
 import { formatKeyLabel } from '../controls/keymapUtils.js';
@@ -11,42 +11,194 @@ function StatusBadge({ label, tone = 'muted' }) {
       ? 'bg-amber-900 text-amber-100'
       : 'bg-slate-800 text-slate-200';
   return (
-    <span className={`rounded px-1 py-0.5 text-xs font-semibold leading-tight ${styles}`}>
+    <span className={`rounded px-1 py-0.5 text-xs font-semibold leading-none ${styles}`}>
       {label}
     </span>
   );
 }
 
-function EntityRow({ entity, connected, onToggle }) {
+function clampHue(value) {
+  if (!Number.isFinite(value)) return 0;
+  const wrapped = value % 360;
+  return wrapped < 0 ? wrapped + 360 : wrapped;
+}
+
+function rgbToHue(rgb) {
+  if (!Array.isArray(rgb) || rgb.length < 3) return 0;
+  const [rRaw, gRaw, bRaw] = rgb;
+  const r = Math.max(0, Math.min(255, Number(rRaw))) / 255;
+  const g = Math.max(0, Math.min(255, Number(gRaw))) / 255;
+  const b = Math.max(0, Math.min(255, Number(bRaw))) / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const delta = max - min;
+  if (delta === 0) return 0;
+  let hue = 0;
+  if (max === r) {
+    hue = ((g - b) / delta) % 6;
+  } else if (max === g) {
+    hue = (b - r) / delta + 2;
+  } else {
+    hue = (r - g) / delta + 4;
+  }
+  return clampHue(Math.round(hue * 60));
+}
+
+function hueToRgb(hue) {
+  const h = clampHue(hue);
+  const c = 1;
+  const x = 1 - Math.abs(((h / 60) % 2) - 1);
+  let r = 0;
+  let g = 0;
+  let b = 0;
+  if (h < 60) {
+    r = c;
+    g = x;
+  } else if (h < 120) {
+    r = x;
+    g = c;
+  } else if (h < 180) {
+    g = c;
+    b = x;
+  } else if (h < 240) {
+    g = x;
+    b = c;
+  } else if (h < 300) {
+    r = x;
+    b = c;
+  } else {
+    r = c;
+    b = x;
+  }
+  return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
+}
+
+function getEntityHue(entity) {
+  if (!entity) return 0;
+  if (Array.isArray(entity.hsColor)) {
+    return clampHue(Number(entity.hsColor[0]));
+  }
+  if (Array.isArray(entity.rgbColor)) {
+    return rgbToHue(entity.rgbColor);
+  }
+  return 0;
+}
+
+function EntityRow({ entity, connected, onToggle, onSetColor }) {
   const unavailable = entity.state === 'unavailable' || !entity.available;
   const isOn = entity.state === 'on';
+  const supportsColor = entity.type === 'light' && entity.supportsColor;
   const statusTone = unavailable ? 'warn' : isOn ? 'success' : 'muted';
   const statusLabel = unavailable ? 'Unavailable' : isOn ? 'On' : 'Off';
   const disableToggle = !connected || unavailable;
+  const disableColor = disableToggle || !supportsColor;
+  const [hue, setHue] = useState(() => getEntityHue(entity));
+  const hueRef = useRef(hue);
+  const draggingRef = useRef(false);
   const toneStyles = unavailable
     ? 'border-slate-800 bg-slate-900 text-slate-400 cursor-not-allowed'
     : isOn
     ? 'border-emerald-700 bg-emerald-900/80 text-emerald-50 hover:bg-emerald-800'
     : 'border-rose-800 bg-rose-900/80 text-rose-50 hover:bg-rose-800';
 
+  useEffect(() => {
+    if (!supportsColor || draggingRef.current) return;
+    const nextHue = getEntityHue(entity);
+    hueRef.current = nextHue;
+    setHue(nextHue);
+  }, [entity.rgbColor, entity.hsColor, supportsColor]);
+
+  const handleHueChange = (event) => {
+    const nextHue = clampHue(Number(event.target.value));
+    hueRef.current = nextHue;
+    setHue(nextHue);
+  };
+
+  const commitHue = () => {
+    if (disableColor || !onSetColor) return;
+    onSetColor(entity.id, hueToRgb(hueRef.current));
+  };
+
+  const stopPropagation = (event) => {
+    event.stopPropagation();
+  };
+
+  const displayRgb = supportsColor ? hueToRgb(hueRef.current) : [255, 255, 255];
+  const displayColor = `rgb(${displayRgb.join(',')})`;
+
   return (
     <button
       type="button"
       onClick={() => onToggle(entity.id)}
       disabled={disableToggle}
-      className={`flex min-w-[10rem] flex-1 items-center justify-between gap-0.5 rounded px-1 py-0.5 text-left transition-colors ${toneStyles} disabled:opacity-60 disabled:hover:bg-inherit`}
+      className={`relative flex min-w-[10rem] flex-1 items-start justify-between gap-0.5 rounded px-1 py-0.5 text-left transition-colors ${toneStyles} disabled:opacity-60 disabled:hover:bg-inherit`}
     >
-      <div className="min-w-0">
-        <div className="flex items-center gap-0.5 text-sm">
+      <div className="min-w-0 flex-1">
+        <div className="flex items-center gap-0.5 text-sm leading-normal">
           <span className="truncate font-semibold text-white">{entity.name || entity.id}</span>
-          {/* <StatusBadge label={entity.type === 'light' ? 'Light' : 'Switch'} /> */}
-        </div>
-        <div className="flex items-center gap-0.5 text-xs text-slate-400">
-          <StatusBadge label={statusLabel} tone={statusTone} />
-          {!connected && <span className="text-amber-200"> · Offline</span>}
+          {supportsColor && (
+            <>
+              <StatusBadge label={statusLabel} tone={statusTone} />
+              {!connected && <span className="text-xs text-amber-200">Offline</span>}
+            </>
+          )}
         </div>
+        {supportsColor ? (
+          <div
+            className="-mt-0.5 w-full"
+            onClick={stopPropagation}
+            onPointerDown={(event) => {
+              stopPropagation(event);
+              draggingRef.current = true;
+            }}
+            onPointerUp={(event) => {
+              stopPropagation(event);
+              draggingRef.current = false;
+              commitHue();
+            }}
+            onPointerCancel={(event) => {
+              stopPropagation(event);
+              draggingRef.current = false;
+              commitHue();
+            }}
+            onKeyUp={(event) => {
+              stopPropagation(event);
+              commitHue();
+            }}
+            onBlur={commitHue}
+          >
+            <div className="relative w-full">
+              <input
+                type="range"
+                min="0"
+                max="360"
+                step="1"
+                value={hue}
+                onChange={handleHueChange}
+                disabled={disableColor}
+                aria-label={`Set color for ${entity.name || entity.id}`}
+                className="ha-hue-slider w-full"
+              />
+            </div>
+          </div>
+        ) : (
+          <div className="flex items-center gap-0.5 text-xs text-slate-400">
+            <StatusBadge label={statusLabel} tone={statusTone} />
+            {!connected && <span className="text-amber-200"> · Offline</span>}
+          </div>
+        )}
       </div>
-      <div className="text-xs font-semibold text-white/90">{isOn ? 'Turn off' : 'Turn on'}</div>
+      {supportsColor && (
+        <span
+          className="pointer-events-none absolute right-1 top-1 h-2.5 w-2.5 rounded-full border border-white/60"
+          style={{ backgroundColor: displayColor }}
+        />
+      )}
+      {!supportsColor && (
+        <div className="self-center text-xs font-semibold text-white/90">
+          {isOn ? 'Turn off' : 'Turn on'}
+        </div>
+      )}
     </button>
   );
 }
@@ -55,7 +207,7 @@ export default function HomeAssistantControls() {
   const {
     state: { keymap },
   } = useControlSystem();
-  const { session, homeAssistantToggle } = useSession();
+  const { session, homeAssistantToggle, homeAssistantSetLightColor } = useSession();
   const ha = session?.homeAssistant;
   const entities = useMemo(() => ha?.entities || [], [ha?.entities]);
   const onKeyLabel = formatKeyLabel(keymap?.homeAssistantOn?.[0]);
@@ -107,6 +259,7 @@ export default function HomeAssistantControls() {
             entity={entity}
             connected={connected}
             onToggle={homeAssistantToggle}
+            onSetColor={homeAssistantSetLightColor}
           />
         ))}
       </div>

webui/src/context/SessionContext.jsx

@@ -15,6 +15,7 @@ const SessionContext = createContext({
   subscribeAll: async () => {},
   homeAssistantToggle: async () => {},
   homeAssistantSetState: async () => {},
+  homeAssistantSetLightColor: async () => {},
   setNickname: async () => {},
   triggerReplay: async () => {},
   setCommunityGoal: async () => {},
@@ -109,6 +110,8 @@ export function SessionProvider({ children }) {
       homeAssistantToggle: (entityId) => emitWithAck('homeAssistant:toggle', { entityId }),
       homeAssistantSetState: (entityId, state) =>
         emitWithAck('homeAssistant:setState', { entityId, state }),
+      homeAssistantSetLightColor: (entityId, rgbColor) =>
+        emitWithAck('homeAssistant:lightColor', { entityId, rgbColor }),
       setNickname: (nickname) => emitWithAck('nickname:set', { nickname }),
       triggerReplay: (sources = []) => emitWithAck('replay:trigger', { sources }),
       setCommunityGoal: (text) => emitWithAck('communityGoal:set', { text }),

webui/src/index.css

@@ -137,3 +137,74 @@ body {
     -webkit-touch-callout: none;
   }
 }
+
+.ha-hue-slider {
+  appearance: none;
+  width: 100%;
+  height: 0.45rem;
+  border-radius: 9999px;
+  background: linear-gradient(
+    90deg,
+    #ff0000,
+    #ffff00,
+    #00ff00,
+    #00ffff,
+    #0000ff,
+    #ff00ff,
+    #ff0000
+  );
+  cursor: pointer;
+}
+
+.ha-hue-slider:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.ha-hue-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 0.75rem;
+  height: 0.75rem;
+  border-radius: 9999px;
+  border: 1px solid rgba(255, 255, 255, 0.7);
+  background: #ffffff;
+}
+
+.ha-hue-slider::-webkit-slider-runnable-track {
+  height: 0.45rem;
+  border-radius: 9999px;
+  background: linear-gradient(
+    90deg,
+    #ff0000,
+    #ffff00,
+    #00ff00,
+    #00ffff,
+    #0000ff,
+    #ff00ff,
+    #ff0000
+  );
+}
+
+.ha-hue-slider::-moz-range-thumb {
+  width: 0.75rem;
+  height: 0.75rem;
+  border-radius: 9999px;
+  border: 1px solid rgba(255, 255, 255, 0.7);
+  background: #ffffff;
+}
+
+.ha-hue-slider::-moz-range-track {
+  height: 0.45rem;
+  border-radius: 9999px;
+  background: linear-gradient(
+    90deg,
+    #ff0000,
+    #ffff00,
+    #00ff00,
+    #00ffff,
+    #0000ff,
+    #ff00ff,
+    #ff0000
+  );
+}