Add home panel to dashboard list

src/layouts/partial-panel-resolver.ts

@@ -35,6 +35,7 @@ const COMPONENTS = {
   light: () => import("../panels/light/ha-panel-light"),
   security: () => import("../panels/security/ha-panel-security"),
   climate: () => import("../panels/climate/ha-panel-climate"),
+  home: () => import("../panels/home/ha-panel-home"),
 };
 
 @customElement("partial-panel-resolver")

src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts

@@ -360,6 +360,20 @@ export class HaConfigLovelaceDashboards extends LitElement {
         });
       }
 
+      if (this.hass.panels.home) {
+        result.push({
+          icon: this.hass.panels.home.icon || "mdi:home",
+          title: this.hass.localize("panel.home"),
+          show_in_sidebar: true,
+          mode: "storage",
+          url_path: "home",
+          filename: "",
+          default: false,
+          require_admin: false,
+          type: this._localizeType("built_in"),
+        });
+      }
+
       result.push(
         ...dashboards
           .sort((a, b) =>
@@ -470,13 +484,18 @@ export class HaConfigLovelaceDashboards extends LitElement {
   }
 
   private _canDelete(urlPath: string) {
-    return !["lovelace", "energy", "light", "security", "climate"].includes(
-      urlPath
-    );
+    return ![
+      "lovelace",
+      "energy",
+      "light",
+      "security",
+      "climate",
+      "home",
+    ].includes(urlPath);
   }
 
   private _canEdit(urlPath: string) {
-    return !["light", "security", "climate"].includes(urlPath);
+    return !["light", "security", "climate", "home"].includes(urlPath);
   }
 
   private _handleDelete = async (item: DataTableItem) => {

src/panels/home/ha-panel-home.ts

@@ -0,0 +1,144 @@
+import type { CSSResultGroup, PropertyValues } from "lit";
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { debounce } from "../../common/util/debounce";
+import { deepEqual } from "../../common/util/deep-equal";
+import type { LovelaceDashboardStrategyConfig } from "../../data/lovelace/config/types";
+import type { HomeAssistant, PanelInfo, Route } from "../../types";
+import "../lovelace/hui-root";
+import { generateLovelaceDashboardStrategy } from "../lovelace/strategies/get-strategy";
+import type { Lovelace } from "../lovelace/types";
+import { showAlertDialog } from "../lovelace/custom-card-helpers";
+
+const HOME_LOVELACE_CONFIG: LovelaceDashboardStrategyConfig = {
+  strategy: {
+    type: "home",
+  },
+};
+
+@customElement("ha-panel-home")
+class PanelHome extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ type: Boolean, reflect: true }) public narrow = false;
+
+  @property({ attribute: false }) public route?: Route;
+
+  @property({ attribute: false }) public panel?: PanelInfo;
+
+  @state() private _lovelace?: Lovelace;
+
+  public willUpdate(changedProps: PropertyValues) {
+    super.willUpdate(changedProps);
+    // Initial setup
+    if (!this.hasUpdated) {
+      this.hass.loadFragmentTranslation("lovelace");
+      this._setLovelace();
+      return;
+    }
+
+    if (!changedProps.has("hass")) {
+      return;
+    }
+
+    const oldHass = changedProps.get("hass") as this["hass"];
+    if (oldHass && oldHass.localize !== this.hass.localize) {
+      this._setLovelace();
+      return;
+    }
+
+    if (oldHass && this.hass) {
+      // If the entity registry changed, ask the user if they want to refresh the config
+      if (
+        oldHass.entities !== this.hass.entities ||
+        oldHass.devices !== this.hass.devices ||
+        oldHass.areas !== this.hass.areas ||
+        oldHass.floors !== this.hass.floors
+      ) {
+        if (this.hass.config.state === "RUNNING") {
+          this._debounceRegistriesChanged();
+          return;
+        }
+      }
+      // If ha started, refresh the config
+      if (
+        this.hass.config.state === "RUNNING" &&
+        oldHass.config.state !== "RUNNING"
+      ) {
+        this._setLovelace();
+      }
+    }
+  }
+
+  private _debounceRegistriesChanged = debounce(
+    () => this._registriesChanged(),
+    200
+  );
+
+  private _registriesChanged = async () => {
+    this._setLovelace();
+  };
+
+  protected render() {
+    if (!this._lovelace) {
+      return nothing;
+    }
+
+    return html`
+      <hui-root
+        .hass=${this.hass}
+        .narrow=${this.narrow}
+        .lovelace=${this._lovelace}
+        .route=${this.route}
+        .panel=${this.panel}
+      ></hui-root>
+    `;
+  }
+
+  private async _setLovelace() {
+    const config = await generateLovelaceDashboardStrategy(
+      HOME_LOVELACE_CONFIG,
+      this.hass
+    );
+
+    if (deepEqual(config, this._lovelace?.config)) {
+      return;
+    }
+
+    this._lovelace = {
+      config: config,
+      rawConfig: config,
+      editMode: false,
+      urlPath: "home",
+      mode: "generated",
+      locale: this.hass.locale,
+      enableFullEditMode: () => undefined,
+      saveConfig: async () => undefined,
+      deleteConfig: async () => undefined,
+      setEditMode: this._setEditMode,
+      showToast: () => undefined,
+    };
+  }
+
+  private _setEditMode = () => {
+    // For now, we just show an alert that edit mode is not supported.
+    // This will be expanded in the future.
+    showAlertDialog(this, {
+      title: "Edit mode not available",
+      text: "The Home panel does not support edit mode.",
+      confirmText: this.hass.localize("ui.common.ok"),
+    });
+  };
+
+  static readonly styles: CSSResultGroup = css`
+    :host {
+      display: block;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-panel-home": PanelHome;
+  }
+}

src/translations/en.json

@@ -13,7 +13,8 @@
     "profile": "Profile",
     "light": "Lights",
     "security": "Security",
-    "climate": "Climate"
+    "climate": "Climate",
+    "home": "Home"
   },
   "state": {
     "default": {