some more stuffs.

frontend/src/lib/components/Lamp.svelte

@@ -11,6 +11,7 @@
 	import DeviceIcon from "./DeviceIcon.svelte";
 
   export let device: Device;
+  export let compact: boolean = false;
 
   const {selectedMap, toggleSelection} = getSelectedContext();
 
@@ -41,11 +42,14 @@
       const hws = device.hwState;
       const sflags = hws.supportFlags;
 
+      const hasColor = !!(sflags & SupportFlags.Color);
+      const hasPower = !!(sflags & SupportFlags.Power)
+
       if (deviceTitle == "") {
         deviceTitle = device.hwState.internalName;
       }
 
-      if (sflags & SupportFlags.Color) {
+      if (hasColor && (!hasPower || device.desiredState.power)) {
         iconColor = device.desiredColorRgb;
       } else {
         iconColor = null;
@@ -68,7 +72,7 @@
           barColor = rgb(1.000,0.671,0.355);
         }
 
-        barFraction = device.desiredState.intensity;
+        barFraction = device.desiredState?.intensity || 0;
       }
 
       if (sflags & SupportFlags.SensorTemperature && !!device.sensors.temperature) {
@@ -97,13 +101,13 @@
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<div class="lamp" class:selected={$selectedMap[device.id]} on:click={onSelect}>
+<div class="lamp" class:compact class:selected={$selectedMap[device.id]} on:click={onSelect}>
   <div class="row">
     <div class="row-icon">
       {#if iconColor != null}
-        <DeviceIcon name={device.hwMetadata?.icon||"generic_ball"} brightColor={iconColor} darkColor={darkColor} />
+        <DeviceIcon name={device.icon||"generic_ball"} brightColor={iconColor} darkColor={darkColor} />
       {:else}
-        <DeviceIcon name={device.hwMetadata?.icon||"generic_ball"} brightColor={darkColor} darkColor={darkColor}>
+        <DeviceIcon name={device.icon||"generic_ball"} brightColor={darkColor} darkColor={darkColor}>
           {#if !!roundboiText}
             <div class="roundboi-text">{roundboiText}</div>
           {/if}
@@ -124,10 +128,10 @@
     cursor: pointer
     width: 19ch
     height: 2em
-    margin: 0.25em
+    margin: 0.5ch
     background: #18181c
     color: #84888f
-    border-radius: 0.25em
+    border-radius: 0.5ch
     border-top-right-radius: 1em
     overflow: hidden
     box-shadow: 1px 1px 1px #000
@@ -170,4 +174,12 @@
 
       > div.flatboi2
         height: 0.2em
+
+    &.compact
+      width: 3ch
+      border-top-right-radius: 0.25em
+      div.row
+        margin-left: -0.1ch
+      div.title
+        opacity: 0
 </style>