Add brita to kitchen dashboard

config/kitchen-lovelace.yaml

@@ -6,7 +6,6 @@ custom_header:
   hide_reload_resources: true
   indicator_top: true
 
-
 decluttering_templates: !include_dir_merge_named lovelace/decluttering_templates
 button_card_templates: !include_dir_merge_named lovelace/button_card_templates
 popup_cards: !include lovelace/popup_cards.yaml

config/lovelace/home_dashboard/kitchen_dashboard.yaml

@@ -14,13 +14,15 @@
     layout: horizontal
     max_columns: 1
     cards:
-      - type: horizontal-stack
+      - type: vertical-stack
         title: Lights
+        cards:
+          - type: horizontal-stack
             cards:
               - type: custom:button-card
                 template: small
                 entity: light.tuya_kitchen_all_lights
-            name: All lights
+                name: Kitchen
               - type: custom:button-card
                 template: small
                 entity: light.tuya_kitchen_main_lights
@@ -29,22 +31,60 @@
                 template: small
                 entity: light.tuya_kitchen_secondary_lights
                 name: Secondary
-
           - type: horizontal-stack
-        title: Hallway
             cards:
               - type: custom:button-card
                 template: small
                 entity: light.hallway_all_lights
-            name: All lights
+                name: Hallway
               - type: custom:button-card
                 template: small
                 entity: light.hallway_entrance_lights
-            name: Entrance
+                name: Hallway main
               - type: custom:button-card
                 template: small
                 entity: light.tuya_hallway_main_lights
-            name: Main
+                name: Entrance
+
+      - type: horizontal-stack
+        title: Brita
+        cards:
+          - type: custom:button-card
+            template: small
+            name: Pour water
+            entity: script.brita_pour_water
+            custom_fields:
+              remaining_liters: "[[[ return states['input_number.brita_remaining_liters'].state ]]]"
+            tap_action:
+              action: toggle
+            styles:
+              card:
+                - background: >
+                    [[[
+                      var remaining = states['input_number.brita_remaining_liters'].state;
+                      var percent = 100 - (remaining / 150 * 100);
+                      return 'linear-gradient(180deg, var(--paper-card-background-color) 0%, var(--paper-card-background-color)' + percent + '%, var(--primary-color) ' + percent + '%)'
+                    ]]]
+                - color: white
+              icon:
+                - color: white
+              custom_fields:
+                remaining_liters:
+                  - position: absolute
+                  - top: 5px
+                  - right: 5px
+                  - font-size: 12px
+
+          - type: custom:button-card
+            template: small
+            name: New filter
+            entity: script.brita_new_filter
+            tap_action:
+              action: toggle
+          - type: custom:button-card
+            template: small
+            name: Filter
+            entity: binary_sensor.brita_should_change_filter
 
       - type: vertical-stack
         cards:

config/lovelace/home_dashboard/main_dashboard.yaml

@@ -91,7 +91,6 @@
                           icon:
                             - color: black
 
-
                   - type: custom:button-card
                     template: small
                     entity: media_player.living_room_tv

config/ui-lovelace.yaml

@@ -1,5 +1,6 @@
 custom_header:
   hide_header: true
+  disable_sidebar: false
 
 decluttering_templates: !include_dir_merge_named lovelace/decluttering_templates
 button_card_templates: !include_dir_merge_named lovelace/button_card_templates