Add mobile UI

* Add basic editor to edit favorites entities for home panel

* Rename favorites

* Rename favorites

* Feedbacks

src/auth/ha-auth-flow.ts

@@ -59,7 +59,8 @@ export class HaAuthFlow extends LitElement {
   willUpdate(changedProps: PropertyValues) {
     super.willUpdate(changedProps);
 
-    if (!this.hasUpdated) {
+    if (!this.hasUpdated && this.clientId === genClientId()) {
+      // Preselect store token when logging in to own instance
       this._storeToken = this.initStoreToken;
     }
 

src/components/chart/ha-chart-base.ts

@@ -597,10 +597,15 @@ export class HaChartBase extends LitElement {
       aria: { show: true },
       dataZoom: this._getDataZoomConfig(),
       toolbox: {
-        top: Infinity,
-        left: Infinity,
+        top: Number.MAX_SAFE_INTEGER,
+        left: Number.MAX_SAFE_INTEGER,
         feature: {
-          dataZoom: { show: true, yAxisIndex: false, filterMode: "none" },
+          dataZoom: {
+            show: true,
+            yAxisIndex: false,
+            filterMode: "none",
+            showTitle: false,
+          },
         },
         iconStyle: { opacity: 0 },
       },

src/data/backup.ts

@@ -10,6 +10,7 @@ import {
 import { formatTime } from "../common/datetime/format_time";
 import type { LocalizeFunc } from "../common/translations/localize";
 import type { HomeAssistant } from "../types";
+import { documentationUrl } from "../util/documentation-url";
 import { fileDownload } from "../util/file_download";
 import { handleFetchPromise } from "../util/hass-call-api";
 import type { BackupManagerState, ManagerStateEvent } from "./backup_manager";
@@ -414,7 +415,7 @@ ${hass.auth.data.hassUrl}
 ${hass.localize("ui.panel.config.backup.emergency_kit_file.encryption_key")}
 ${encryptionKey}
 
-${hass.localize("ui.panel.config.backup.emergency_kit_file.more_info", { link: "https://www.home-assistant.io/more-info/backup-emergency-kit" })}`);
+${hass.localize("ui.panel.config.backup.emergency_kit_file.more_info", { link: documentationUrl(hass, "/more-info/backup-emergency-kit") })}`);
 
 export const geneateEmergencyKitFileName = (
   hass: HomeAssistant,

src/data/frontend.ts

@@ -15,6 +15,10 @@ export interface CoreFrontendSystemData {
   defaultPanel?: string;
 }
 
+export interface HomeFrontendSystemData {
+  favorite_entities?: string[];
+}
+
 declare global {
   interface FrontendUserData {
     core: CoreFrontendUserData;
@@ -22,6 +26,7 @@ declare global {
   }
   interface FrontendSystemData {
     core: CoreFrontendSystemData;
+    home: HomeFrontendSystemData;
   }
 }
 

src/data/lovelace/config/view.ts

@@ -1,7 +1,10 @@
 import type { MediaSelectorValue } from "../../selector";
 import type { LovelaceBadgeConfig } from "./badge";
 import type { LovelaceCardConfig } from "./card";
-import type { LovelaceSectionRawConfig } from "./section";
+import type {
+  LovelaceSectionConfig,
+  LovelaceSectionRawConfig,
+} from "./section";
 import type { LovelaceStrategyConfig } from "./strategy";
 
 export interface ShowViewConfig {
@@ -33,6 +36,12 @@ export interface LovelaceViewHeaderConfig {
   badges_wrap?: "wrap" | "scroll";
 }
 
+export interface LovelaceViewSidebarConfig {
+  sections?: LovelaceSectionConfig[];
+  content_label?: string;
+  sidebar_label?: string;
+}
+
 export interface LovelaceBaseViewConfig {
   index?: number;
   title?: string;
@@ -56,6 +65,8 @@ export interface LovelaceViewConfig extends LovelaceBaseViewConfig {
   cards?: LovelaceCardConfig[];
   sections?: LovelaceSectionRawConfig[];
   header?: LovelaceViewHeaderConfig;
+  // Only used for section view, it should move to a section view config type when the views will have dedicated editor.
+  sidebar?: LovelaceViewSidebarConfig;
 }
 
 export interface LovelaceStrategyViewConfig extends LovelaceBaseViewConfig {

src/layouts/supervisor-error-screen.ts

@@ -5,6 +5,7 @@ import { atLeastVersion } from "../common/config/version";
 import { applyThemesOnElement } from "../common/dom/apply_themes_on_element";
 import "../components/ha-card";
 import { haStyle } from "../resources/styles";
+import { documentationUrl } from "../util/documentation-url";
 import type { HomeAssistant } from "../types";
 import "./hass-subpage";
 
@@ -57,7 +58,7 @@ class SupervisorErrorScreen extends LitElement {
               </li>
               <li>
                 <a
-                  href="https://www.home-assistant.io/help/"
+                  href=${documentationUrl(this.hass, "/help/")}
                   target="_blank"
                   rel="noreferrer"
                 >

src/onboarding/onboarding-welcome-links.ts

@@ -4,6 +4,7 @@ import { LitElement, css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import type { LocalizeFunc } from "../common/translations/localize";
 import "../components/ha-card";
+import { documentationUrl } from "../util/documentation-url";
 import type { HomeAssistant } from "../types";
 import { showAppDialog } from "./dialogs/show-app-dialog";
 import { showCommunityDialog } from "./dialogs/show-community-dialog";
@@ -22,7 +23,10 @@ class OnboardingWelcomeLinks extends LitElement {
     return html`<a
         target="_blank"
         rel="noreferrer noopener"
-        href="https://www.home-assistant.io/blog/2016/01/19/perfect-home-automation/"
+        href=${documentationUrl(
+          this.hass,
+          "/blog/2016/01/19/perfect-home-automation/"
+        )}
       >
         <onboarding-welcome-link
           noninteractive

src/panels/config/blueprint/dialog-import-blueprint.ts

@@ -2,6 +2,7 @@ import { mdiClose, mdiOpenInNew } from "@mdi/js";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
+import { documentationUrl } from "../../../util/documentation-url";
 import "../../../components/ha-alert";
 import "../../../components/ha-button";
 import "../../../components/ha-code-editor";
@@ -140,7 +141,7 @@ class DialogImportBlueprint extends LitElement {
                 <ha-button
                   size="small"
                   appearance="plain"
-                  href="https://www.home-assistant.io/get-blueprints"
+                  href=${documentationUrl(this.hass, "/get-blueprints")}
                   target="_blank"
                   rel="noreferrer noopener"
                 >

src/panels/config/blueprint/ha-blueprint-overview.ts

@@ -299,7 +299,7 @@ class HaBlueprintOverview extends LitElement {
         >
           <ha-button
             appearance="plain"
-            href="https://www.home-assistant.io/get-blueprints"
+            href=${documentationUrl(this.hass, "/get-blueprints")}
             target="_blank"
             rel="noreferrer noopener"
             size="small"

src/panels/config/energy/components/ha-energy-validation-result.ts

@@ -2,6 +2,7 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../../../../components/ha-alert";
 import type { EnergyValidationIssue } from "../../../../data/energy";
+import { documentationUrl } from "../../../../util/documentation-url";
 import type { HomeAssistant } from "../../../../types";
 
 @customElement("ha-energy-validation-result")
@@ -29,7 +30,10 @@ class EnergyValidationMessage extends LitElement {
           )}
           ${issue.type === "recorder_untracked"
             ? html`(<a
-                  href="https://www.home-assistant.io/integrations/recorder#configure-filter"
+                  href=${documentationUrl(
+                    this.hass,
+                    "/integrations/recorder#configure-filter"
+                  )}
                   target="_blank"
                   rel="noopener noreferrer"
                   >${this.hass.localize("ui.panel.config.common.learn_more")}</a

src/panels/config/integrations/ha-config-flow-card.ts

@@ -1,4 +1,10 @@
-import { mdiBookshelf, mdiCog, mdiDotsVertical, mdiOpenInNew } from "@mdi/js";
+import {
+  mdiBookshelf,
+  mdiCog,
+  mdiDelete,
+  mdiDotsVertical,
+  mdiOpenInNew,
+} from "@mdi/js";
 import type { TemplateResult } from "lit";
 import { LitElement, css, html } from "lit";
 import { customElement, property } from "lit/decorators";
@@ -7,6 +13,11 @@ import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-button";
 import "../../../components/ha-button-menu";
 import "../../../components/ha-list-item";
+import {
+  deleteApplicationCredential,
+  fetchApplicationCredentialsConfigEntry,
+} from "../../../data/application_credential";
+import { deleteConfigEntry } from "../../../data/config_entries";
 import {
   ATTENTION_SOURCES,
   DISCOVERY_SOURCES,
@@ -15,7 +26,10 @@ import {
 } from "../../../data/config_flow";
 import type { IntegrationManifest } from "../../../data/integration";
 import { showConfigFlowDialog } from "../../../dialogs/config-flow/show-dialog-config-flow";
-import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
+import {
+  showAlertDialog,
+  showConfirmationDialog,
+} from "../../../dialogs/generic/show-dialog-box";
 import type { HomeAssistant } from "../../../types";
 import { documentationUrl } from "../../../util/documentation-url";
 import type { DataEntryFlowProgressExtended } from "./ha-config-integrations";
@@ -60,7 +74,7 @@ export class HaConfigFlowCard extends LitElement {
               : "ui.common.add"
           )}
         </ha-button>
-        ${this.flow.context.configuration_url || this.manifest
+        ${this.flow.context.configuration_url || this.manifest || attention
           ? html`<ha-button-menu slot="header-button">
               <ha-icon-button
                 slot="trigger"
@@ -118,6 +132,22 @@ export class HaConfigFlowCard extends LitElement {
                     </ha-list-item>
                   </a>`
                 : ""}
+              ${attention
+                ? html`<ha-list-item
+                    class="warning"
+                    graphic="icon"
+                    @click=${this._handleDelete}
+                  >
+                    <ha-svg-icon
+                      class="warning"
+                      slot="graphic"
+                      .path=${mdiDelete}
+                    ></ha-svg-icon>
+                    ${this.hass.localize(
+                      "ui.panel.config.integrations.config_entry.delete"
+                    )}
+                  </ha-list-item>`
+                : ""}
             </ha-button-menu>`
           : ""}
       </ha-integration-action-card>
@@ -175,6 +205,109 @@ export class HaConfigFlowCard extends LitElement {
     });
   }
 
+  // Return an application credentials id for this config entry to prompt the
+  // user for removal. This is best effort so we don't stop overall removal
+  // if the integration isn't loaded or there is some other error.
+  private async _fetchApplicationCredentials(entryId: string) {
+    try {
+      return (await fetchApplicationCredentialsConfigEntry(this.hass, entryId))
+        .application_credentials_id;
+    } catch (_err: any) {
+      // We won't prompt the user to remove credentials
+      return null;
+    }
+  }
+
+  private async _removeApplicationCredential(applicationCredentialsId: string) {
+    const confirmed = await showConfirmationDialog(this, {
+      title: this.hass.localize(
+        "ui.panel.config.integrations.config_entry.application_credentials.delete_title"
+      ),
+      text: html`${this.hass.localize(
+          "ui.panel.config.integrations.config_entry.application_credentials.delete_prompt"
+        )},
+        <br />
+        <br />
+        ${this.hass.localize(
+          "ui.panel.config.integrations.config_entry.application_credentials.delete_detail"
+        )}
+        <br />
+        <br />
+        <a
+          href="https://www.home-assistant.io/integrations/application_credentials"
+          target="_blank"
+          rel="noreferrer"
+        >
+          ${this.hass.localize(
+            "ui.panel.config.integrations.config_entry.application_credentials.learn_more"
+          )}
+        </a>`,
+      confirmText: this.hass.localize("ui.common.delete"),
+      dismissText: this.hass.localize("ui.common.cancel"),
+      destructive: true,
+    });
+
+    if (!confirmed) {
+      return;
+    }
+
+    try {
+      await deleteApplicationCredential(this.hass, applicationCredentialsId);
+    } catch (err: any) {
+      showAlertDialog(this, {
+        title: this.hass.localize(
+          "ui.panel.config.integrations.config_entry.application_credentials.delete_error_title"
+        ),
+        text: err.message,
+      });
+    }
+  }
+
+  private async _handleDelete() {
+    const entryId = this.flow.context.entry_id;
+
+    if (!entryId) {
+      // This shouldn't happen for reauth flows, but handle gracefully
+      return;
+    }
+
+    const applicationCredentialsId =
+      await this._fetchApplicationCredentials(entryId);
+
+    const confirmed = await showConfirmationDialog(this, {
+      title: this.hass.localize(
+        "ui.panel.config.integrations.config_entry.delete_confirm_title",
+        { title: localizeConfigFlowTitle(this.hass.localize, this.flow) }
+      ),
+      text: this.hass.localize(
+        "ui.panel.config.integrations.config_entry.delete_confirm_text"
+      ),
+      confirmText: this.hass!.localize("ui.common.delete"),
+      dismissText: this.hass!.localize("ui.common.cancel"),
+      destructive: true,
+    });
+
+    if (!confirmed) {
+      return;
+    }
+
+    const result = await deleteConfigEntry(this.hass, entryId);
+
+    if (result.require_restart) {
+      showAlertDialog(this, {
+        text: this.hass.localize(
+          "ui.panel.config.integrations.config_entry.restart_confirm"
+        ),
+      });
+    }
+
+    if (applicationCredentialsId) {
+      this._removeApplicationCredential(applicationCredentialsId);
+    }
+
+    this._handleFlowUpdated();
+  }
+
   static styles = css`
     a {
       text-decoration: none;
@@ -191,6 +324,9 @@ export class HaConfigFlowCard extends LitElement {
       --mdc-theme-primary: var(--error-color);
       --ha-card-border-color: var(--error-color);
     }
+    .warning {
+      --mdc-theme-text-primary-on-background: var(--error-color);
+    }
   `;
 }
 

src/panels/config/labs/ha-config-labs.ts

@@ -16,6 +16,7 @@ import type { HomeAssistant } from "../../../types";
 import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import { brandsUrl } from "../../../util/brands-url";
 import { showToast } from "../../../util/toast";
+import { documentationUrl } from "../../../util/documentation-url";
 import { haStyle } from "../../../resources/styles";
 import { showLabsPreviewFeatureEnableDialog } from "./show-dialog-labs-preview-feature-enable";
 import {
@@ -100,7 +101,7 @@ class HaConfigLabs extends SubscribeMixin(LitElement) {
           ? html`
               <a
                 slot="toolbar-icon"
-                href="https://www.home-assistant.io/integrations/labs/"
+                href=${documentationUrl(this.hass, "/integrations/labs/")}
                 target="_blank"
                 rel="noopener noreferrer"
                 .title=${this.hass.localize("ui.common.help")}
@@ -124,7 +125,7 @@ class HaConfigLabs extends SubscribeMixin(LitElement) {
                     "ui.panel.config.labs.empty.description"
                   )}
                   <a
-                    href="https://www.home-assistant.io/integrations/labs/"
+                    href=${documentationUrl(this.hass, "/integrations/labs/")}
                     target="_blank"
                     rel="noopener noreferrer"
                   >

src/panels/config/tags/dialog-tag-detail.ts

@@ -2,6 +2,7 @@ import type { CSSResultGroup } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
+import { documentationUrl } from "../../../util/documentation-url";
 import "../../../components/ha-alert";
 import "../../../components/ha-button";
 import { createCloseHeading } from "../../../components/ha-dialog";
@@ -14,8 +15,6 @@ import { haStyleDialog } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
 import type { TagDetailDialogParams } from "./show-dialog-tag-detail";
 
-const TAG_BASE = "https://www.home-assistant.io/tag/";
-
 @customElement("dialog-tag-detail")
 class DialogTagDetail
   extends LitElement
@@ -122,7 +121,7 @@ class DialogTagDetail
                 </div>
                 <div id="qr">
                   <ha-qr-code
-                    .data=${`${TAG_BASE}${this._params!.entry!.id}`}
+                    .data=${`${documentationUrl(this.hass, "/tag/")}${this._params!.entry!.id}`}
                     center-image="/static/icons/favicon-192x192.png"
                     error-correction-level="quartile"
                     scale="5"

src/panels/home/dialogs/dialog-edit-home.ts

@@ -0,0 +1,151 @@
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { fireEvent } from "../../../common/dom/fire_event";
+import "../../../components/entity/ha-entities-picker";
+import "../../../components/ha-button";
+import "../../../components/ha-dialog-footer";
+import "../../../components/ha-wa-dialog";
+import type { HomeFrontendSystemData } from "../../../data/frontend";
+import type { HassDialog } from "../../../dialogs/make-dialog-manager";
+import { haStyleDialog } from "../../../resources/styles";
+import type { HomeAssistant } from "../../../types";
+import type { EditHomeDialogParams } from "./show-dialog-edit-home";
+
+@customElement("dialog-edit-home")
+export class DialogEditHome
+  extends LitElement
+  implements HassDialog<EditHomeDialogParams>
+{
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @state() private _params?: EditHomeDialogParams;
+
+  @state() private _config?: HomeFrontendSystemData;
+
+  @state() private _open = false;
+
+  @state() private _submitting = false;
+
+  public showDialog(params: EditHomeDialogParams): void {
+    this._params = params;
+    this._config = { ...params.config };
+    this._open = true;
+  }
+
+  public closeDialog(): boolean {
+    this._open = false;
+    return true;
+  }
+
+  private _dialogClosed(): void {
+    this._params = undefined;
+    this._config = undefined;
+    this._submitting = false;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
+  }
+
+  protected render() {
+    if (!this._params) {
+      return nothing;
+    }
+
+    return html`
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._open}
+        .headerTitle=${this.hass.localize("ui.panel.home.editor.title")}
+        @closed=${this._dialogClosed}
+      >
+        <p class="description">
+          ${this.hass.localize("ui.panel.home.editor.description")}
+        </p>
+
+        <ha-entities-picker
+          autofocus
+          .hass=${this.hass}
+          .value=${this._config?.favorite_entities || []}
+          .label=${this.hass.localize(
+            "ui.panel.lovelace.editor.strategy.home.favorite_entities"
+          )}
+          .placeholder=${this.hass.localize(
+            "ui.panel.lovelace.editor.strategy.home.add_favorite_entity"
+          )}
+          .helper=${this.hass.localize(
+            "ui.panel.home.editor.favorite_entities_helper"
+          )}
+          reorder
+          allow-custom-entity
+          @value-changed=${this._favoriteEntitiesChanged}
+        ></ha-entities-picker>
+
+        <ha-dialog-footer slot="footer">
+          <ha-button
+            appearance="plain"
+            slot="secondaryAction"
+            @click=${this.closeDialog}
+            .disabled=${this._submitting}
+          >
+            ${this.hass.localize("ui.common.cancel")}
+          </ha-button>
+          <ha-button
+            slot="primaryAction"
+            @click=${this._save}
+            .disabled=${this._submitting}
+          >
+            ${this.hass.localize("ui.common.save")}
+          </ha-button>
+        </ha-dialog-footer>
+      </ha-wa-dialog>
+    `;
+  }
+
+  private _favoriteEntitiesChanged(ev: CustomEvent): void {
+    const entities = ev.detail.value as string[];
+    this._config = {
+      ...this._config,
+      favorite_entities: entities.length > 0 ? entities : undefined,
+    };
+  }
+
+  private async _save(): Promise<void> {
+    if (!this._params || !this._config) {
+      return;
+    }
+
+    this._submitting = true;
+
+    try {
+      await this._params.saveConfig(this._config);
+      this.closeDialog();
+    } catch (err: any) {
+      // eslint-disable-next-line no-console
+      console.error("Failed to save home configuration:", err);
+    } finally {
+      this._submitting = false;
+    }
+  }
+
+  static styles = [
+    haStyleDialog,
+    css`
+      ha-wa-dialog {
+        --dialog-content-padding: var(--ha-space-6);
+      }
+
+      .description {
+        margin: 0 0 var(--ha-space-4) 0;
+        color: var(--secondary-text-color);
+      }
+
+      ha-entities-picker {
+        display: block;
+      }
+    `,
+  ];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "dialog-edit-home": DialogEditHome;
+  }
+}

src/panels/home/dialogs/show-dialog-edit-home.ts

@@ -0,0 +1,20 @@
+import { fireEvent } from "../../../common/dom/fire_event";
+import type { HomeFrontendSystemData } from "../../../data/frontend";
+
+export interface EditHomeDialogParams {
+  config: HomeFrontendSystemData;
+  saveConfig: (config: HomeFrontendSystemData) => Promise<void>;
+}
+
+export const loadEditHomeDialog = () => import("./dialog-edit-home");
+
+export const showEditHomeDialog = (
+  element: HTMLElement,
+  params: EditHomeDialogParams
+): void => {
+  fireEvent(element, "show-dialog", {
+    dialogTag: "dialog-edit-home",
+    dialogImport: loadEditHomeDialog,
+    dialogParams: params,
+  });
+};

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

@@ -3,18 +3,18 @@ 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 {
+  fetchFrontendSystemData,
+  saveFrontendSystemData,
+  type HomeFrontendSystemData,
+} from "../../data/frontend";
 import type { LovelaceDashboardStrategyConfig } from "../../data/lovelace/config/types";
 import type { HomeAssistant, PanelInfo, Route } from "../../types";
+import { showToast } from "../../util/toast";
 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",
-  },
-};
+import { showEditHomeDialog } from "./dialogs/show-dialog-edit-home";
 
 @customElement("ha-panel-home")
 class PanelHome extends LitElement {
@@ -28,12 +28,14 @@ class PanelHome extends LitElement {
 
   @state() private _lovelace?: Lovelace;
 
+  @state() private _config: FrontendSystemData["home"] = {};
+
   public willUpdate(changedProps: PropertyValues) {
     super.willUpdate(changedProps);
     // Initial setup
     if (!this.hasUpdated) {
       this.hass.loadFragmentTranslation("lovelace");
-      this._setLovelace();
+      this._loadConfig();
       return;
     }
 
@@ -95,9 +97,28 @@ class PanelHome extends LitElement {
     `;
   }
 
+  private async _loadConfig() {
+    try {
+      const data = await fetchFrontendSystemData(this.hass.connection, "home");
+      this._config = data || {};
+    } catch (err) {
+      // eslint-disable-next-line no-console
+      console.error("Failed to load favorites:", err);
+      this._config = {};
+    }
+    this._setLovelace();
+  }
+
   private async _setLovelace() {
+    const strategyConfig: LovelaceDashboardStrategyConfig = {
+      strategy: {
+        type: "home",
+        favorite_entities: this._config.favorite_entities,
+      },
+    };
+
     const config = await generateLovelaceDashboardStrategy(
-      HOME_LOVELACE_CONFIG,
+      strategyConfig,
       this.hass
     );
 
@@ -121,15 +142,34 @@ class PanelHome extends LitElement {
   }
 
   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"),
+    showEditHomeDialog(this, {
+      config: this._config,
+      saveConfig: async (config) => {
+        await this._saveConfig(config);
+      },
     });
   };
 
+  private async _saveConfig(config: HomeFrontendSystemData): Promise<void> {
+    try {
+      await saveFrontendSystemData(this.hass.connection, "home", config);
+      this._config = config || {};
+    } catch (err: any) {
+      // eslint-disable-next-line no-console
+      console.error("Failed to save home configuration:", err);
+      showToast(this, {
+        message: this.hass.localize("ui.panel.home.editor.save_failed"),
+        duration: 0,
+        dismissable: true,
+      });
+      return;
+    }
+    showToast(this, {
+      message: this.hass.localize("ui.common.successfully_saved"),
+    });
+    this._setLovelace();
+  }
+
   static readonly styles: CSSResultGroup = css`
     :host {
       display: block;

src/panels/lovelace/strategies/home/home-main-view-strategy.ts

@@ -70,8 +70,7 @@ export class HomeMainViewStrategy extends ReactiveElement {
 
     const floorCount = home.floors.length + (home.areas.length ? 1 : 0);
 
-    // Allow between 2 and 3 columns (the max should be set to define the width of the header)
-    const maxColumns = 2;
+    const maxColumns = 3;
 
     const floorsSections: LovelaceSectionConfig[] = [];
     for (const floorStructure of home.floors) {
@@ -176,74 +175,66 @@ export class HomeMainViewStrategy extends ReactiveElement {
         ({
           type: "home-summary",
           summary: "light",
-          vertical: true,
           tap_action: {
             action: "navigate",
             navigation_path: "/light?historyBack=1",
           },
           grid_options: {
-            rows: 2,
-            columns: 4,
+            columns: 12,
           },
         } satisfies HomeSummaryCard),
       hasClimate &&
         ({
           type: "home-summary",
           summary: "climate",
-          vertical: true,
           tap_action: {
             action: "navigate",
             navigation_path: "/climate?historyBack=1",
           },
           grid_options: {
-            rows: 2,
-            columns: 4,
+            columns: 12,
           },
         } satisfies HomeSummaryCard),
       hasSecurity &&
         ({
           type: "home-summary",
           summary: "security",
-          vertical: true,
           tap_action: {
             action: "navigate",
             navigation_path: "/security?historyBack=1",
           },
           grid_options: {
-            rows: 2,
-            columns: 4,
+            columns: 12,
           },
         } satisfies HomeSummaryCard),
       hasMediaPlayers &&
         ({
           type: "home-summary",
           summary: "media_players",
-          vertical: true,
           tap_action: {
             action: "navigate",
             navigation_path: "media-players",
           },
           grid_options: {
-            rows: 2,
-            columns: 4,
+            columns: 12,
           },
         } satisfies HomeSummaryCard),
     ].filter(Boolean) as LovelaceCardConfig[];
 
-    const summarySection: LovelaceSectionConfig = {
+    const forYouSection: LovelaceSectionConfig = {
       type: "grid",
       column_span: maxColumns,
-      cards: [],
+      cards: [
+        {
+          type: "heading",
+          heading: "For you",
+          heading_style: "title",
+        },
+      ],
     };
 
     if (summaryCards.length) {
-      summarySection.cards!.push(
-        {
-          type: "heading",
-          heading: hass.localize("ui.panel.lovelace.strategy.home.summaries"),
-        },
-        ...summaryCards
-      );
+      forYouSection.cards!.push(...summaryCards);
     }
 
     const weatherFilter = generateEntityFilter(hass, {
@@ -251,28 +242,16 @@ export class HomeMainViewStrategy extends ReactiveElement {
       entity_category: "none",
     });
 
-    const widgetSection: LovelaceSectionConfig = {
-      type: "grid",
-      column_span: maxColumns,
-      cards: [],
-    };
     const weatherEntity = Object.keys(hass.states)
       .filter(weatherFilter)
       .sort()[0];
 
     if (weatherEntity) {
-      widgetSection.cards!.push(
-        {
-          type: "heading",
-          heading: "",
-          heading_style: "subtitle",
-        },
-        {
-          type: "weather-forecast",
-          entity: weatherEntity,
-          forecast_type: "daily",
-        } as WeatherForecastCardConfig
-      );
+      forYouSection.cards!.push({
+        type: "weather-forecast",
+        entity: weatherEntity,
+        forecast_type: "daily",
+      } as WeatherForecastCardConfig);
     }
 
     const energyPrefs = isComponentLoaded(hass, "energy")
@@ -286,7 +265,7 @@ export class HomeMainViewStrategy extends ReactiveElement {
       );
 
       if (grid && grid.flow_from.length > 0) {
-        widgetSection.cards!.push({
+        forYouSection.cards!.push({
           title: hass.localize(
             "ui.panel.lovelace.cards.energy.energy_distribution.title_today"
           ),
@@ -301,9 +280,7 @@ export class HomeMainViewStrategy extends ReactiveElement {
       [
         favoriteSection.cards && favoriteSection,
         commonControlsSection,
-        summarySection.cards && summarySection,
         ...floorsSections,
-        widgetSection.cards && widgetSection,
       ] satisfies (LovelaceSectionRawConfig | undefined)[]
     ).filter(Boolean) as LovelaceSectionRawConfig[];
 
@@ -319,6 +296,11 @@ export class HomeMainViewStrategy extends ReactiveElement {
           content: `## ${hass.localize("ui.panel.lovelace.strategy.home.welcome_user", { user: "{{ user }}" })}`,
         } satisfies MarkdownCardConfig,
       },
+      sidebar: {
+        sections: [forYouSection],
+        content_label: "Home",
+        sidebar_label: "For you",
+      },
     };
   }
 }

src/panels/lovelace/views/hui-sections-view.ts

@@ -31,6 +31,7 @@ import {
 import type { HuiSection } from "../sections/hui-section";
 import type { Lovelace } from "../types";
 import "./hui-view-header";
+import "./hui-view-sidebar";
 
 export const DEFAULT_MAX_COLUMNS = 4;
 
@@ -46,6 +47,8 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
 
   @property({ attribute: false }) public isStrategy = false;
 
+  @property({ type: Boolean }) public narrow = false;
+
   @property({ attribute: false }) public sections: HuiSection[] = [];
 
   @property({ attribute: false }) public cards: HuiCard[] = [];
@@ -58,6 +61,12 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
 
   @state() _dragging = false;
 
+  @state() private _showSidebar = false;
+
+  private _contentScrollTop = 0;
+
+  private _sidebarScrollTop = 0;
+
   private _columnsController = new ResizeController(this, {
     callback: (entries) => {
       const totalWidth = entries[0]?.contentRect.width;
@@ -135,16 +144,31 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
 
     const sections = this.sections;
     const totalSectionCount =
-      this._sectionColumnCount + (this.lovelace?.editMode ? 1 : 0);
+      this._sectionColumnCount +
+      (this.lovelace?.editMode ? 1 : 0) +
+      (this._config?.sidebar ? 1 : 0);
     const editMode = this.lovelace.editMode;
 
     const maxColumnCount = this._columnsController.value ?? 1;
 
+    const columnCount = Math.min(maxColumnCount, totalSectionCount);
+    // On mobile with sidebar, use full width for whichever view is active
+    const contentColumnCount =
+      this._config?.sidebar && !this.narrow
+        ? Math.max(1, columnCount - 1)
+        : columnCount;
+
     return html`
       <div
         class="wrapper ${classMap({
           "top-margin": Boolean(this._config?.top_margin),
+          "has-sidebar": Boolean(this._config?.sidebar),
+          narrow: this.narrow,
         })}"
+        style=${styleMap({
+          "--column-count": columnCount,
+          "--content-column-count": contentColumnCount,
+        })}
       >
         <hui-view-header
           .hass=${this.hass}
@@ -152,38 +176,54 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
           .lovelace=${this.lovelace}
           .viewIndex=${this.index}
           .config=${this._config?.header}
-          style=${styleMap({
-            "--max-column-count": maxColumnCount,
-          })}
         ></hui-view-header>
-        <ha-sortable
-          .disabled=${!editMode}
-          @item-moved=${this._sectionMoved}
-          group="section"
-          handle-selector=".handle"
-          draggable-selector=".section"
-          .rollback=${false}
-        >
-          <div
-            class="container ${classMap({
-              dense: Boolean(this._config?.dense_section_placement),
-            })}"
-            style=${styleMap({
-              "--total-section-count": totalSectionCount,
-              "--max-column-count": maxColumnCount,
-            })}
+        ${this.narrow && this._config?.sidebar
+          ? html`
+              <div class="mobile-tabs">
+                <ha-control-select
+                  .value=${this._showSidebar ? "sidebar" : "content"}
+                  @value-changed=${this._viewChanged}
+                  .options=${[
+                    {
+                      value: "content",
+                      label: this._config.sidebar.content_label,
+                    },
+                    {
+                      value: "sidebar",
+                      label: this._config.sidebar.sidebar_label,
+                    },
+                  ]}
+                >
+                </ha-control-select>
+              </div>
+            `
+          : nothing}
+        <div class="container">
+          <ha-sortable
+            .disabled=${!editMode}
+            @item-moved=${this._sectionMoved}
+            group="section"
+            handle-selector=".handle"
+            draggable-selector=".section"
+            .rollback=${false}
           >
-            ${repeat(
-              sections,
-              (section) => this._getSectionKey(section),
-              (section, idx) => {
-                const columnSpan = Math.min(
-                  section.config.column_span || 1,
-                  maxColumnCount
-                );
-                const rowSpan = section.config.row_span || 1;
+            <div
+              class="content ${classMap({
+                dense: Boolean(this._config?.dense_section_placement),
+                "mobile-hidden": this.narrow && this._showSidebar,
+              })}"
+            >
+              ${repeat(
+                sections,
+                (section) => this._getSectionKey(section),
+                (section, idx) => {
+                  const columnSpan = Math.min(
+                    section.config.column_span || 1,
+                    contentColumnCount
+                  );
+                  const rowSpan = section.config.row_span || 1;
 
-                return html`
+                  return html`
                 <div
                   class="section"
                   style=${styleMap({
@@ -208,72 +248,89 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
                   </div>
                 </div>
               `;
-              }
-            )}
-            ${editMode
-              ? html`
-                  <ha-sortable
-                    group="card"
-                    @item-added=${this._handleCardAdded}
-                    draggable-selector=".card"
-                    .rollback=${false}
-                  >
-                    <div class="create-section-container">
-                      <div class="drop-helper" aria-hidden="true">
-                        <p>
-                          ${this.hass.localize(
-                            "ui.panel.lovelace.editor.section.drop_card_create_section"
+                }
+              )}
+              ${editMode
+                ? html`
+                    <ha-sortable
+                      group="card"
+                      @item-added=${this._handleCardAdded}
+                      draggable-selector=".card"
+                      .rollback=${false}
+                    >
+                      <div class="create-section-container">
+                        <div class="drop-helper" aria-hidden="true">
+                          <p>
+                            ${this.hass.localize(
+                              "ui.panel.lovelace.editor.section.drop_card_create_section"
+                            )}
+                          </p>
+                        </div>
+                        <button
+                          class="create-section"
+                          @click=${this._createSection}
+                          aria-label=${this.hass.localize(
+                            "ui.panel.lovelace.editor.section.create_section"
                           )}
-                        </p>
+                          .title=${this.hass.localize(
+                            "ui.panel.lovelace.editor.section.create_section"
+                          )}
+                        >
+                          <ha-ripple></ha-ripple>
+                          <ha-svg-icon .path=${mdiViewGridPlus}></ha-svg-icon>
+                        </button>
                       </div>
-                      <button
-                        class="create-section"
-                        @click=${this._createSection}
-                        aria-label=${this.hass.localize(
-                          "ui.panel.lovelace.editor.section.create_section"
-                        )}
-                        .title=${this.hass.localize(
-                          "ui.panel.lovelace.editor.section.create_section"
-                        )}
-                      >
-                        <ha-ripple></ha-ripple>
-                        <ha-svg-icon .path=${mdiViewGridPlus}></ha-svg-icon>
-                      </button>
-                    </div>
-                  </ha-sortable>
-                `
-              : nothing}
-            ${editMode && this._config?.cards?.length
-              ? html`
-                  <div class="section imported-cards">
-                    <div class="imported-card-header">
-                      <p class="title">
-                        <ha-svg-icon .path=${mdiEyeOff}></ha-svg-icon>
-                        ${this.hass.localize(
-                          "ui.panel.lovelace.editor.section.imported_cards_title"
-                        )}
-                      </p>
-                      <p class="subtitle">
-                        ${this.hass.localize(
-                          "ui.panel.lovelace.editor.section.imported_cards_description"
-                        )}
-                      </p>
-                    </div>
-                    <hui-section
-                      .lovelace=${this.lovelace}
-                      .hass=${this.hass}
-                      .config=${this._importedCardSectionConfig(
-                        this._config.cards
+                    </ha-sortable>
+                  `
+                : nothing}
+            </div>
+          </ha-sortable>
+          ${this._config?.sidebar
+            ? html`
+                <hui-view-sidebar
+                  class=${classMap({
+                    "mobile-hidden": this.narrow && !this._showSidebar,
+                  })}
+                  .hass=${this.hass}
+                  .badges=${this.badges}
+                  .lovelace=${this.lovelace}
+                  .viewIndex=${this.index}
+                  .config=${this._config.sidebar}
+                ></hui-view-sidebar>
+              `
+            : nothing}
+        </div>
+        <div class="imported-cards-section">
+          ${editMode && this._config?.cards?.length
+            ? html`
+                <div class="section imported-cards">
+                  <div class="imported-card-header">
+                    <p class="title">
+                      <ha-svg-icon .path=${mdiEyeOff}></ha-svg-icon>
+                      ${this.hass.localize(
+                        "ui.panel.lovelace.editor.section.imported_cards_title"
                       )}
-                      .viewIndex=${this.index}
-                      preview
-                      import-only
-                    ></hui-section>
+                    </p>
+                    <p class="subtitle">
+                      ${this.hass.localize(
+                        "ui.panel.lovelace.editor.section.imported_cards_description"
+                      )}
+                    </p>
                   </div>
-                `
-              : nothing}
-          </div>
-        </ha-sortable>
+                  <hui-section
+                    .lovelace=${this.lovelace}
+                    .hass=${this.hass}
+                    .config=${this._importedCardSectionConfig(
+                      this._config.cards
+                    )}
+                    .viewIndex=${this.index}
+                    preview
+                    import-only
+                  ></hui-section>
+                </div>
+              `
+            : nothing}
+        </div>
       </div>
     `;
   }
@@ -352,6 +409,46 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
     this.lovelace!.saveConfig(newConfig);
   }
 
+  private _viewChanged(ev: CustomEvent) {
+    const newValue = ev.detail.value;
+    const shouldShowSidebar = newValue === "sidebar";
+
+    if (shouldShowSidebar !== this._showSidebar) {
+      this._toggleView();
+    }
+  }
+
+  private _toggleView() {
+    // Save current scroll position
+    if (this._showSidebar) {
+      // Currently showing sidebar, save its scroll position
+      const sidebar = this.shadowRoot?.querySelector("hui-view-sidebar");
+      if (sidebar) {
+        this._sidebarScrollTop = sidebar.scrollTop || 0;
+      }
+    } else {
+      // Currently showing content, save window scroll position
+      this._contentScrollTop = window.scrollY;
+    }
+
+    // Toggle view
+    this._showSidebar = !this._showSidebar;
+
+    // Restore scroll position after view updates
+    this.updateComplete.then(() => {
+      if (this._showSidebar) {
+        // Switched to sidebar, restore sidebar scroll
+        const sidebar = this.shadowRoot?.querySelector("hui-view-sidebar");
+        if (sidebar) {
+          sidebar.scrollTop = this._sidebarScrollTop;
+        }
+      } else {
+        // Switched to content, restore window scroll
+        window.scrollTo(0, this._contentScrollTop);
+      }
+    });
+  }
+
   static styles = css`
     :host {
       --row-height: var(--ha-view-sections-row-height, 56px);
@@ -369,14 +466,19 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
       }
     }
 
-    .wrapper.top-margin {
+    .wrapper {
       display: block;
-      margin-top: var(--top-margin);
+      padding: var(--row-gap) var(--column-gap);
+      box-sizing: content-box;
+      margin: 0 auto;
+      max-width: calc(
+        var(--column-count) * var(--column-max-width) +
+          (var(--column-count) - 1) * var(--column-gap)
+      );
     }
 
-    .container > * {
-      position: relative;
-      width: 100%;
+    .wrapper.top-margin {
+      margin-top: var(--top-margin);
     }
 
     .section {
@@ -390,22 +492,92 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
     }
 
     .container {
-      --column-count: min(var(--max-column-count), var(--total-section-count));
+      display: grid;
+      grid-template-columns: [content-start] repeat(
+          var(--content-column-count),
+          1fr
+        );
+      gap: var(--row-gap) var(--column-gap);
+      padding: var(--row-gap) 0;
+    }
+
+    .wrapper.has-sidebar .container {
+      grid-template-columns:
+        [content-start] repeat(var(--content-column-count), 1fr)
+        [sidebar-start] 1fr;
+    }
+
+    /* On mobile with sidebar, content and sidebar both take full width */
+    .wrapper.narrow.has-sidebar .container {
+      grid-template-columns: 1fr;
+    }
+
+    hui-view-sidebar {
+      grid-column: sidebar-start / -1;
+    }
+
+    .wrapper.narrow hui-view-sidebar {
+      grid-column: 1 / -1;
+      padding-bottom: calc(
+        var(--ha-space-4) + 56px + var(--ha-space-4) +
+          env(safe-area-inset-bottom)
+      );
+    }
+
+    .mobile-hidden {
+      display: none !important;
+    }
+
+    .mobile-tabs {
+      position: fixed;
+      bottom: calc(var(--ha-space-4) + env(safe-area-inset-bottom));
+      left: 50%;
+      transform: translateX(-50%);
+      padding: 0;
+      z-index: 1;
+      filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.15))
+        drop-shadow(0 4px 16px rgba(0, 0, 0, 0.1));
+    }
+
+    .mobile-tabs ha-control-select {
+      width: max-content;
+      min-width: 280px;
+      max-width: 90%;
+      --control-select-thickness: 56px;
+      --control-select-border-radius: var(--ha-border-radius-6xl);
+      --control-select-background: var(--card-background-color);
+      --control-select-background-opacity: 1;
+      --control-select-color: var(--primary-color);
+      --control-select-padding: 6px;
+    }
+
+    ha-sortable {
+      display: contents;
+    }
+
+    .content {
+      grid-column: content-start / sidebar-start;
+      grid-row: 1 / -1;
       display: grid;
       align-items: start;
       justify-content: center;
-      grid-template-columns: repeat(var(--column-count), 1fr);
+      grid-template-columns: repeat(var(--content-column-count), 1fr);
       grid-auto-flow: row;
       gap: var(--row-gap) var(--column-gap);
-      padding: var(--row-gap) var(--column-gap);
-      box-sizing: content-box;
-      margin: 0 auto;
-      max-width: calc(
-        var(--column-count) * var(--column-max-width) +
-          (var(--column-count) - 1) * var(--column-gap)
+    }
+
+    .wrapper.narrow .content {
+      grid-column: 1 / -1;
+    }
+
+    .wrapper.narrow.has-sidebar .content {
+      padding-bottom: calc(
+        var(--ha-space-4) + 56px + var(--ha-space-4) +
+          env(safe-area-inset-bottom)
       );
     }
-    .container.dense {
+
+    .content.dense {
       grid-auto-flow: row dense;
     }
 
@@ -483,13 +655,7 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
 
     hui-view-header {
       display: block;
-      padding: 0 var(--column-gap);
       padding-top: var(--row-gap);
-      margin: auto;
-      max-width: calc(
-        var(--max-column-count) * var(--column-max-width) +
-          (var(--max-column-count) - 1) * var(--column-gap)
-      );
     }
 
     .imported-cards {

src/panels/lovelace/views/hui-view-sidebar.ts

@@ -0,0 +1,57 @@
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property } from "lit/decorators";
+import { repeat } from "lit/directives/repeat";
+import type { LovelaceViewSidebarConfig } from "../../../data/lovelace/config/view";
+import type { HomeAssistant } from "../../../types";
+import "../sections/hui-section";
+import type { Lovelace } from "../types";
+
+export const DEFAULT_VIEW_SIDEBAR_LAYOUT = "start";
+
+@customElement("hui-view-sidebar")
+export class HuiViewSidebar extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public lovelace!: Lovelace;
+
+  @property({ attribute: false }) public config?: LovelaceViewSidebarConfig;
+
+  @property({ attribute: false }) public viewIndex!: number;
+
+  render() {
+    if (!this.lovelace) return nothing;
+
+    // Use preview mode instead of setting lovelace to avoid the sections to be
+    // editable as it is not yet supported
+    return html`
+      <div class="container">
+        ${repeat(
+          this.config?.sections || [],
+          (section) => html`
+            <hui-section
+              .config=${section}
+              .hass=${this.hass}
+              .preview=${this.lovelace.editMode}
+              .viewIndex=${this.viewIndex}
+            ></hui-section>
+          `
+        )}
+      </div>
+    `;
+  }
+
+  static styles = css`
+    .container {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+      width: 100%;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-view-sidebar": HuiViewSidebar;
+  }
+}

src/panels/profile/ha-advanced-mode-row.ts

@@ -7,6 +7,7 @@ import "../../components/ha-settings-row";
 import "../../components/ha-switch";
 import type { CoreFrontendUserData } from "../../data/frontend";
 import { saveFrontendUserData } from "../../data/frontend";
+import { documentationUrl } from "../../util/documentation-url";
 import type { HomeAssistant } from "../../types";
 
 @customElement("ha-advanced-mode-row")
@@ -31,7 +32,10 @@ class AdvancedModeRow extends LitElement {
         <span slot="description">
           ${this.hass.localize("ui.panel.profile.advanced_mode.description")}
           <a
-            href="https://www.home-assistant.io/blog/2019/07/17/release-96/#advanced-mode"
+            href=${documentationUrl(
+              this.hass,
+              "/blog/2019/07/17/release-96/#advanced-mode"
+            )}
             target="_blank"
             rel="noreferrer"
             >${this.hass.localize("ui.panel.profile.advanced_mode.link_promo")}

src/translations/en.json

@@ -2220,6 +2220,14 @@
       "migrate_to_user_data": "This will change the sidebar on all the devices you are logged in to. To create a sidebar per device, you should use a different user for that device."
     },
     "panel": {
+      "home": {
+        "editor": {
+          "title": "Edit home page",
+          "description": "Configure your home page display preferences.",
+          "favorite_entities_helper": "Display your favorite entities. Home Assistant will still suggest based on commonly used up to 8 slots.",
+          "save_failed": "Failed to save home page configuration"
+        }
+      },
       "my": {
         "not_supported": "This redirect is not supported by your Home Assistant instance. Check the {link} for the supported redirects and the version they where introduced.",
         "component_not_loaded": "This redirect is not supported by your Home Assistant instance. You need the integration {integration} to use this redirect.",
@@ -7317,6 +7325,8 @@
             "header": "View configuration",
             "header_name": "{name} view configuration",
             "add": "Add view",
+            "show_sidebar": "Show sidebar",
+            "show_content": "Show content",
             "background": {
               "settings": "Background settings",
               "image": "Background image",