nixos-configs/devices/homie/modules/home-assistant/frontend.nix

{
  caule-themes-src,
  dracul-ha-src,
  material-rounded-theme-src,
  pkgs,
  self,
  ...
}: let
  inherit (pkgs.writers) writeYAML;
in {
  services.home-assistant = {
    configFiles = {
      "themes/caule.yaml".source = "${caule-themes-src}/themes/caule-themes-pack-1.yaml";
      "themes/dracul-ha.yaml".source = "${dracul-ha-src}/themes/dracul-ha.yaml";
      "themes/material_rounded.yaml".source = "${material-rounded-theme-src}/themes/material_rounded.yaml";

      "www/sidebar-config.yaml".source = writeYAML "sidebar" {
        id = "my-sidebar";

        order = [
          # Top
          {
            item = "overview";
            order = 1;
          }
          {
            match = "href";
            item = "calendar";
            order = 2;
          }
          {
            match = "href";
            item = "todo";
            order = 3;
          }

          # Bottom
          {
            bottom = true;
            item = "esphome";
            order = 5;
          }
          {
            bottom = true;
            item = "logbook";
            order = 7;
          }
          {
            bottom = true;
            icon = "mdi:tools";
            item = "developer tools";
            name = "Developer tools";
            order = 9;
          }
          {
            bottom = true;
            item = "settings";
            order = 11;
          }

          # Hidden
          {
            hide = true;
            item = "map";
          }
          {
            hide = true;
            item = "energy";
          }
          {
            hide = true;
            item = "history";
          }
          {
            hide = true;
            item = "media";
          }
        ];
      };
    };

    customComponents = builtins.attrValues {
      inherit
        (self.legacyPackages.${pkgs.system}.hass-components)
        material-symbols
        ;
    };

    customLovelaceModules = builtins.attrValues {
      inherit
        (pkgs.home-assistant-custom-lovelace-modules)
        card-mod
        universal-remote-card
        ;

      inherit
        (self.legacyPackages.${pkgs.system}.lovelace-components)
        custom-sidebar
        ;
    };

    config.frontend = {
      themes = "!include_dir_merge_named themes";
      extra_module_url = map (p: "/local/nixos-lovelace-modules/${p}.js") [
        "card-mod"
        "custom-sidebar-yaml"
      ];
    };

    config.template = [
      {
        sensor = [
          {
            name = "Material Rounded Base Color Matt";
            unique_id = "material_rounded_base_color_matt";
            state = ''{{ states("sensor.pixel_8_accent_color") }}'';
          }
        ];
      }
    ];

    lovelaceConfig = {
      title = "Our House";
      views = [
        {
          path = "home";
          title = "Home";
          cards = [
            {
              type = "entities";
              entities = [
                "switch.smartplug1"
                "switch.smartplug3"
              ];
            }
            {
              type = "entities";
              entities = [
                "timer.assist_timer1"
                "timer.assist_timer2"
                "timer.assist_timer3"
              ];
            }

            {
              type = "custom:android-tv-card";

              media_player_id = "media_player.living_room_speaker";
              keyboard_id = "remote.android_tv_192_168_0_106";
              remote_id = "remote.onn_4k_streaming_box";

              rows = [
                "navigation_buttons"
                [null "slider" null]
                [null]
                ["jellyfin" "home" "back" "keyboard"]
                [null]
              ];

              custom_actions = [
                {
                  name = "center";
                  type = "button";
                  icon = "mdi:checkbox-blank-circle";

                  styles = ''
                    :host {
                        --icon-color: rgb(94, 94, 94);
                        --size: 200px;
                        background: rgb(31, 31, 31);
                        border-radius: 200px;
                        margin: -70px;
                        padding: 70px;
                    }
                  '';

                  tap_action = {
                    action = "key";
                    key = "DPAD_CENTER";
                  };
                }

                {
                  name = "up";
                  type = "button";
                  icon = "mdi:chevron-up";

                  styles = ''
                    :host {
                        --icon-color: rgb(197, 199, 197);
                        z-index: 2;
                        top: 25px;
                        height: 90px;
                        width: 300px;
                    }
                  '';

                  hold_action = {action = "repeat";};
                  tap_action = {
                    action = "key";
                    key = "DPAD_UP";
                  };
                }

                {
                  name = "down";
                  type = "button";
                  icon = "mdi:chevron-down";

                  styles = ''
                    :host {
                        --icon-color: rgb(197, 199, 197);
                        z-index: 2;
                        bottom: 25px;
                        height: 90px;
                        width: 300px;
                    }
                  '';

                  hold_action = {action = "repeat";};
                  tap_action = {
                    action = "key";
                    key = "DPAD_DOWN";
                  };
                }

                {
                  name = "left";
                  type = "button";
                  icon = "mdi:chevron-left";

                  styles = ''
                    :host {
                        --icon-color: rgb(197, 199, 197);
                        z-index: 2;
                        left: 30px;
                        height: 170px;
                        width: 90px;
                    }
                  '';

                  hold_action = {action = "repeat";};
                  tap_action = {
                    action = "key";
                    key = "DPAD_LEFT";
                  };
                }

                {
                  name = "right";
                  type = "button";
                  icon = "mdi:chevron-right";

                  styles = ''
                    :host {
                        --icon-color: rgb(197, 199, 197);
                        z-index: 2;
                        right: 30px;
                        height: 170px;
                        width: 90px;
                    }
                  '';

                  hold_action = {action = "repeat";};
                  tap_action = {
                    action = "key";
                    key = "DPAD_RIGHT";
                  };
                }

                {
                  name = "slider";
                  type = "slider";
                  icon = "mdi:volume-high";

                  range = [0 1];
                  step = 0.01;

                  tap_action = {
                    action = "perform-action";
                    perform_action = "media_player.volume_set";
                    data = {
                      volume_level = "{{ value | float }}";
                    };
                  };
                  value_attribute = "volume_level";
                }
              ];

              styles = ''
                #row-1 {
                    justify-content: center;
                }

                #row-2 {
                    justify-content: center;
                }

                #row-3 {
                    justify-content: center;
                }
              '';
            }
          ];
        }
      ];
    };

    config.lovelace.dashboards = {
      esphome-dash = {
        title = "ESPHome";
        icon = "mdi:car-esp";
        mode = "yaml";

        show_in_sidebar = true;
        require_admin = true;

        filename = writeYAML "esphome.yaml" {
          strategy = {
            type = "iframe";
            url = "https://esphome.nelim.org";
          };
        };
      };
    };
  };
}