From 4cc3bf74bb2d259e6dffb5e3718e6d0130afb80d Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 9 Nov 2025 13:34:21 +0000
Subject: [PATCH 1/2] feat: Add configurable icons, control types, and improved
 UI for switches
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Control Improvements:
- Add ColorChooser type to ControlType enum for RGB color selection
- Add 10 icon options: lightbulb, light mode, water pump, thermostat, power, fan, heating, AC, outlet, nightlight
- Update control type names: Toggle → On/Off Switch, Dimmer → Dimmable/Slider
- Support three main control types: On/Off (Toggle), Dimmable (Slider), and Color Chooser (RGB)

Dashboard Switch Rendering:
- Display controls with large 48px icons showing configured icon
- Show control name as text label below icon
- Render appropriate UI based on control type:
  - Toggle: On/Off switch with color indication
  - Dimmer: Slider with percentage display
  - ColorChooser: Inline RGB color picker
- Increase control card size with enhanced styling and shadows
- Add icon color indication (primary when on, default when off)

UI/UX Enhancements:
- Add 16px padding to Controls, Tanks, and Settings pages for better spacing
- Dashboard (diagram) remains full-height with no padding
- Improved control overlay styling with min-width and better layout
- Store and display IconName and ControlType in overlay items

All control changes sync with backend API and persist across reloads.
---
 .../VanDaemon.Core/Enums/ControlType.cs       |   9 +-
 .../VanDaemon.Web/Pages/Controls.razor        |  31 +++-
 src/Frontend/VanDaemon.Web/Pages/Index.razor  | 139 ++++++++++++++++--
 .../VanDaemon.Web/Pages/Settings.razor        |   4 +
 src/Frontend/VanDaemon.Web/Pages/Tanks.razor  |   4 +
 5 files changed, 163 insertions(+), 24 deletions(-)

diff --git a/src/Backend/VanDaemon.Core/Enums/ControlType.cs b/src/Backend/VanDaemon.Core/Enums/ControlType.cs
index 3031ac1..8d31f6c 100644
--- a/src/Backend/VanDaemon.Core/Enums/ControlType.cs
+++ b/src/Backend/VanDaemon.Core/Enums/ControlType.cs
@@ -5,8 +5,9 @@ namespace VanDaemon.Core.Enums;
 /// </summary>
 public enum ControlType
 {
-    Toggle,      // On/Off switch
-    Momentary,   // Push button
-    Dimmer,      // Variable control (0-100)
-    Selector     // Multi-position selector
+    Toggle,        // On/Off switch
+    Momentary,     // Push button
+    Dimmer,        // Variable control (0-100)
+    Selector,      // Multi-position selector
+    ColorChooser   // RGB color picker
 }
diff --git a/src/Frontend/VanDaemon.Web/Pages/Controls.razor b/src/Frontend/VanDaemon.Web/Pages/Controls.razor
index ce7e919..906d70a 100644
--- a/src/Frontend/VanDaemon.Web/Pages/Controls.razor
+++ b/src/Frontend/VanDaemon.Web/Pages/Controls.razor
@@ -5,6 +5,8 @@
 
 <PageTitle>Controls - VanDaemon</PageTitle>
 
+<div style="padding: 16px;">
+
 <style>
     .controls-header {
         margin-bottom: 24px;
@@ -144,8 +146,9 @@ else
                       Label="Control Type"
                       Required="true"
                       Class="mb-4">
-                <MudSelectItem Value="@("Toggle")">Toggle Switch</MudSelectItem>
-                <MudSelectItem Value="@("Dimmer")">Dimmer / Slider</MudSelectItem>
+                <MudSelectItem Value="@("Toggle")">On/Off Switch</MudSelectItem>
+                <MudSelectItem Value="@("Dimmer")">Dimmable / Slider</MudSelectItem>
+                <MudSelectItem Value="@("ColorChooser")">Color Chooser (RGB)</MudSelectItem>
                 <MudSelectItem Value="@("Momentary")">Momentary Button</MudSelectItem>
                 <MudSelectItem Value="@("Selector")">Selector</MudSelectItem>
             </MudSelect>
@@ -153,10 +156,16 @@ else
             <MudSelect @bind-Value="editingControl.IconName"
                       Label="Icon"
                       Class="mb-4">
-                <MudSelectItem Value="@("lightbulb")">Lightbulb</MudSelectItem>
-                <MudSelectItem Value="@("light_mode")">Light Mode</MudSelectItem>
-                <MudSelectItem Value="@("water_pump")">Water Pump</MudSelectItem>
-                <MudSelectItem Value="@("thermostat")">Thermostat</MudSelectItem>
+                <MudSelectItem Value="@("lightbulb")">💡 Lightbulb</MudSelectItem>
+                <MudSelectItem Value="@("light_mode")">☀️ Light Mode</MudSelectItem>
+                <MudSelectItem Value="@("water_drop")">💧 Water Pump</MudSelectItem>
+                <MudSelectItem Value="@("thermostat")">🌡️ Thermostat</MudSelectItem>
+                <MudSelectItem Value="@("power")">⚡ Power</MudSelectItem>
+                <MudSelectItem Value="@("fan")">🌀 Fan/Ventilation</MudSelectItem>
+                <MudSelectItem Value="@("heating")">🔥 Heating</MudSelectItem>
+                <MudSelectItem Value="@("air_conditioner")">❄️ Air Conditioner</MudSelectItem>
+                <MudSelectItem Value="@("outlet")">🔌 Outlet/Socket</MudSelectItem>
+                <MudSelectItem Value="@("nightlight")">🌙 Night Light</MudSelectItem>
             </MudSelect>
 
             <MudDivider Class="my-4" />
@@ -214,6 +223,8 @@ else
     </DialogActions>
 </MudDialog>
 
+</div>
+
 @code {
     private List<ControlDto>? controls;
     private bool dialogVisible = false;
@@ -464,8 +475,14 @@ else
         {
             "lightbulb" => Icons.Material.Filled.Lightbulb,
             "light_mode" => Icons.Material.Filled.LightMode,
-            "water_pump" => Icons.Material.Filled.WaterDrop,
+            "water_drop" => Icons.Material.Filled.WaterDrop,
             "thermostat" => Icons.Material.Filled.Thermostat,
+            "power" => Icons.Material.Filled.Power,
+            "fan" => Icons.Material.Filled.Air,
+            "heating" => Icons.Material.Filled.LocalFireDepartment,
+            "air_conditioner" => Icons.Material.Filled.AcUnit,
+            "outlet" => Icons.Material.Filled.PowerSettingsNew,
+            "nightlight" => Icons.Material.Filled.Nightlight,
             _ => Icons.Material.Filled.SettingsInputComponent
         };
     }
diff --git a/src/Frontend/VanDaemon.Web/Pages/Index.razor b/src/Frontend/VanDaemon.Web/Pages/Index.razor
index 5881807..c392197 100644
--- a/src/Frontend/VanDaemon.Web/Pages/Index.razor
+++ b/src/Frontend/VanDaemon.Web/Pages/Index.razor
@@ -121,14 +121,46 @@
                     }
                     else if (overlay.Type == OverlayType.Control)
                     {
-                        <MudTooltip Text="@overlay.Name">
-                            <div style="background: var(--mud-palette-surface); padding: 4px; border-radius: 8px; box-shadow: var(--mud-elevation-4);">
-                                <MudSwitch Value="@overlay.IsOn"
-                                          Color="Color.Primary"
-                                          Disabled="@isEditMode"
-                                          ValueChanged="@((bool val) => OnControlToggle(overlay, val))" />
+                        <div class="overlay-content" style="text-align: center; background: var(--mud-palette-surface); padding: 12px 16px; border-radius: 12px; box-shadow: var(--mud-elevation-6); min-width: 100px;">
+                            <div style="display: flex; flex-direction: column; align-items: center; gap: 8px;">
+                                <MudIcon Icon="@GetControlIcon(overlay.IconName)"
+                                        Size="Size.Large"
+                                        Style="font-size: 48px !important;"
+                                        Color="@(overlay.IsOn ? Color.Primary : Color.Default)" />
+                                <MudText Typo="Typo.body2" Style="font-weight: 600; white-space: nowrap;">@overlay.Name</MudText>
+
+                                @if (overlay.ControlType == "Toggle" && !isEditMode)
+                                {
+                                    <MudSwitch Value="@overlay.IsOn"
+                                              Color="Color.Success"
+                                              Size="Size.Small"
+                                              ValueChanged="@((bool val) => OnControlToggle(overlay, val))" />
+                                }
+                                else if (overlay.ControlType == "Dimmer" && !isEditMode)
+                                {
+                                    <div style="width: 120px;">
+                                        <MudSlider Value="@overlay.DimmerValue"
+                                                  Color="Color.Primary"
+                                                  Min="0"
+                                                  Max="100"
+                                                  Step="5"
+                                                  Size="Size.Small"
+                                                  ValueChanged="@((int val) => OnDimmerChange(overlay, val))" />
+                                        <MudText Typo="Typo.caption" Align="Align.Center">@overlay.DimmerValue%</MudText>
+                                    </div>
+                                }
+                                else if (overlay.ControlType == "ColorChooser" && !isEditMode)
+                                {
+                                    <MudColorPicker @bind-Value="@overlay.ColorValue"
+                                                   ColorPickerMode="ColorPickerMode.RGB"
+                                                   DisableAlpha="true"
+                                                   PickerVariant="PickerVariant.Inline"
+                                                   Style="width: 120px;"
+                                                   ColorPickerView="ColorPickerView.Palette"
+                                                   ValueChanged="@((MudColor val) => OnColorChange(overlay, val))" />
+                                }
                             </div>
-                        </MudTooltip>
+                        </div>
                     }
                 </div>
             }
@@ -271,11 +303,26 @@
         foreach (var control in controls)
         {
             bool isOn = false;
-            if (control.State is bool boolState)
-                isOn = boolState;
-            else if (control.State is System.Text.Json.JsonElement jsonElement &&
-                     jsonElement.ValueKind == System.Text.Json.JsonValueKind.True)
-                isOn = true;
+            int dimmerValue = 0;
+
+            if (control.Type == "Toggle" || control.Type == "Momentary")
+            {
+                if (control.State is bool boolState)
+                    isOn = boolState;
+                else if (control.State is System.Text.Json.JsonElement jsonElement &&
+                         jsonElement.ValueKind == System.Text.Json.JsonValueKind.True)
+                    isOn = true;
+            }
+            else if (control.Type == "Dimmer")
+            {
+                if (control.State is int intState)
+                    dimmerValue = intState;
+                else if (control.State is System.Text.Json.JsonElement jsonElement &&
+                         jsonElement.ValueKind == System.Text.Json.JsonValueKind.Number)
+                    dimmerValue = jsonElement.GetInt32();
+
+                isOn = dimmerValue > 0;
+            }
 
             // Use saved position if available, otherwise use default
             double x = 20 + (index * 15);
@@ -292,8 +339,12 @@
                 Id = control.Id,
                 Name = control.Name,
                 Type = OverlayType.Control,
-                Icon = "", // Not used for controls
+                Icon = GetControlIcon(control.IconName),
+                IconName = control.IconName,
+                ControlType = control.Type,
                 IsOn = isOn,
+                DimmerValue = dimmerValue,
+                ColorValue = new MudColor("#FFFFFF"),
                 X = x,
                 Y = y
             });
@@ -314,6 +365,24 @@
         };
     }
 
+    private string GetControlIcon(string iconName)
+    {
+        return iconName switch
+        {
+            "lightbulb" => Icons.Material.Filled.Lightbulb,
+            "light_mode" => Icons.Material.Filled.LightMode,
+            "water_drop" => Icons.Material.Filled.WaterDrop,
+            "thermostat" => Icons.Material.Filled.Thermostat,
+            "power" => Icons.Material.Filled.Power,
+            "fan" => Icons.Material.Filled.Air,
+            "heating" => Icons.Material.Filled.LocalFireDepartment,
+            "air_conditioner" => Icons.Material.Filled.AcUnit,
+            "outlet" => Icons.Material.Filled.PowerSettingsNew,
+            "nightlight" => Icons.Material.Filled.Nightlight,
+            _ => Icons.Material.Filled.SettingsInputComponent
+        };
+    }
+
     private void OnOverlayClick(OverlayItem overlay)
     {
         if (!isEditMode)
@@ -394,6 +463,46 @@
         await InvokeAsync(StateHasChanged);
     }
 
+    private async Task OnDimmerChange(OverlayItem overlay, int value)
+    {
+        try
+        {
+            var response = await Http.PostAsJsonAsync($"api/controls/{overlay.Id}/state", new { state = value });
+            if (response.IsSuccessStatusCode)
+            {
+                overlay.DimmerValue = value;
+                overlay.IsOn = value > 0;
+            }
+        }
+        catch (Exception ex)
+        {
+            Console.WriteLine($"Error controlling {overlay.Name}: {ex.Message}");
+        }
+
+        await InvokeAsync(StateHasChanged);
+    }
+
+    private async Task OnColorChange(OverlayItem overlay, MudColor value)
+    {
+        try
+        {
+            var colorHex = value.ToString();
+            var response = await Http.PostAsJsonAsync($"api/controls/{overlay.Id}/state", new { state = colorHex });
+            if (response.IsSuccessStatusCode)
+            {
+                overlay.ColorValue = value;
+                overlay.IsOn = true;
+                Snackbar.Add($"{overlay.Name} color set to {colorHex}", Severity.Success);
+            }
+        }
+        catch (Exception ex)
+        {
+            Console.WriteLine($"Error controlling {overlay.Name}: {ex.Message}");
+        }
+
+        await InvokeAsync(StateHasChanged);
+    }
+
     private Color GetOverlayColor(OverlayItem overlay)
     {
         if (overlay.Type == OverlayType.Tank)
@@ -557,8 +666,12 @@
         public string Name { get; set; } = string.Empty;
         public OverlayType Type { get; set; }
         public string Icon { get; set; } = string.Empty;
+        public string IconName { get; set; } = string.Empty;
+        public string ControlType { get; set; } = string.Empty;
         public double Value { get; set; }
         public bool IsOn { get; set; }
+        public int DimmerValue { get; set; }
+        public MudColor ColorValue { get; set; } = new MudColor("#FFFFFF");
         public double X { get; set; } // Position as percentage
         public double Y { get; set; } // Position as percentage
         public string? ConfiguredAction { get; set; } // For controls
diff --git a/src/Frontend/VanDaemon.Web/Pages/Settings.razor b/src/Frontend/VanDaemon.Web/Pages/Settings.razor
index 974533d..a231761 100644
--- a/src/Frontend/VanDaemon.Web/Pages/Settings.razor
+++ b/src/Frontend/VanDaemon.Web/Pages/Settings.razor
@@ -5,6 +5,8 @@
 
 <PageTitle>Settings - VanDaemon</PageTitle>
 
+<div style="padding: 16px;">
+
 <style>
     .settings-header {
         margin-bottom: 24px;
@@ -199,6 +201,8 @@ else
     </MudGrid>
 }
 
+</div>
+
 @code {
     private SystemConfigurationDto? configuration;
     private List<string>? availableDiagrams;
diff --git a/src/Frontend/VanDaemon.Web/Pages/Tanks.razor b/src/Frontend/VanDaemon.Web/Pages/Tanks.razor
index cfe0987..338af7d 100644
--- a/src/Frontend/VanDaemon.Web/Pages/Tanks.razor
+++ b/src/Frontend/VanDaemon.Web/Pages/Tanks.razor
@@ -5,6 +5,8 @@
 
 <PageTitle>Tanks - VanDaemon</PageTitle>
 
+<div style="padding: 16px;">
+
 <style>
     .tanks-header {
         margin-bottom: 24px;
@@ -234,6 +236,8 @@ else
     </DialogActions>
 </MudDialog>
 
+</div>
+
 @code {
     private List<TankDto>? tanks;
     private bool dialogVisible = false;

From 754293d8f24c1692e3e5f012489221e1db8374ac Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 9 Nov 2025 13:58:33 +0000
Subject: [PATCH 2/2] fix: Resolve build errors in Index.razor

- Add using directive for MudBlazor.Utilities to support MudColor type
- Fix MudColorPicker to use Value instead of @bind-Value to avoid conflict with ValueChanged parameter
---
 src/Frontend/VanDaemon.Web/Pages/Index.razor | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/Frontend/VanDaemon.Web/Pages/Index.razor b/src/Frontend/VanDaemon.Web/Pages/Index.razor
index c392197..f409f5a 100644
--- a/src/Frontend/VanDaemon.Web/Pages/Index.razor
+++ b/src/Frontend/VanDaemon.Web/Pages/Index.razor
@@ -1,4 +1,5 @@
 @page "/"
+@using MudBlazor.Utilities
 @inject HttpClient Http
 @inject TelemetryService Telemetry
 @inject ISnackbar Snackbar
@@ -151,7 +152,7 @@
                                 }
                                 else if (overlay.ControlType == "ColorChooser" && !isEditMode)
                                 {
-                                    <MudColorPicker @bind-Value="@overlay.ColorValue"
+                                    <MudColorPicker Value="@overlay.ColorValue"
                                                    ColorPickerMode="ColorPickerMode.RGB"
                                                    DisableAlpha="true"
                                                    PickerVariant="PickerVariant.Inline"