Fix zones on mobile, align mobile and non mobile view (#20525)

* Fix zones on mobile, align mobile and non mobile view

* Fix CI

---------

Co-authored-by: Simon Lamon <32477463+silamon@users.noreply.github.com>

src/panels/config/core/ha-config-section-general.ts

@@ -1,7 +1,6 @@
 import "@material/mwc-list/mwc-list-item";
 import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import memoizeOne from "memoize-one";
 import { UNIT_C } from "../../../common/const";
 import { stopPropagation } from "../../../common/dom/stop_propagation";
 import { navigate } from "../../../common/navigate";
@@ -18,8 +17,6 @@ import "../../../components/ha-language-picker";
 import "../../../components/ha-radio";
 import type { HaRadio } from "../../../components/ha-radio";
 import "../../../components/ha-select";
-import "../../../components/ha-selector/ha-selector-location";
-import type { LocationSelectorValue } from "../../../data/selector";
 import "../../../components/ha-settings-row";
 import "../../../components/ha-textfield";
 import type { HaTextField } from "../../../components/ha-textfield";
@@ -30,8 +27,6 @@ import "../../../layouts/hass-subpage";
 import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant, ValueChangedEvent } from "../../../types";
 
-const LOCATION_SELECTOR = { location: {} };
-
 @customElement("ha-config-section-general")
 class HaConfigSectionGeneral extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -244,20 +239,7 @@ class HaConfigSectionGeneral extends LitElement {
               >
               </ha-language-picker>
             </div>
-            ${this.narrow
+
-              ? html`
-                  <ha-selector-location
-                    .hass=${this.hass}
-                    .selector=${LOCATION_SELECTOR}
-                    .value=${this._selectorLocation(
-                      this.hass.config.latitude,
-                      this.hass.config.longitude,
-                      this._location
-                    )}
-                    @value-changed=${this._locationChanged}
-                  ></ha-selector-location>
-                `
-              : html`
             <ha-settings-row>
               <div slot="heading">
                 ${this.hass.localize(
@@ -273,7 +255,6 @@ class HaConfigSectionGeneral extends LitElement {
                 >${this.hass.localize("ui.common.edit")}</mwc-button
               >
             </ha-settings-row>
-                `}
             <div class="card-actions">
               <ha-progress-button @click=${this._updateEntry}>
                 ${this.hass!.localize("ui.panel.config.zone.detail.update")}
@@ -322,10 +303,6 @@ class HaConfigSectionGeneral extends LitElement {
     this._updateUnits = (ev.target as HaCheckbox).checked;
   }
 
-  private _locationChanged(ev: CustomEvent) {
-    this._location = [ev.detail.value.latitude, ev.detail.value.longitude];
-  }
-
   private async _updateEntry(ev: CustomEvent) {
     const button = ev.target as HaProgressButton;
     if (button.progress) {
@@ -384,17 +361,6 @@ class HaConfigSectionGeneral extends LitElement {
     }
   }
 
-  private _selectorLocation = memoizeOne(
-    (
-      latDefault: number,
-      lngDefault: number,
-      location?: [number, number]
-    ): LocationSelectorValue => ({
-      latitude: location != null ? location[0] : latDefault,
-      longitude: location != null ? location[1] : lngDefault,
-    })
-  );
-
   private _editLocation() {
     navigate("/config/zone/edit/zone.home");
   }

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

@@ -1,23 +1,26 @@
+import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
 import "@material/mwc-list/mwc-list";
 import { mdiPencil, mdiPencilOff, mdiPlus } from "@mdi/js";
-import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
 import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
-  css,
   CSSResultGroup,
-  html,
   LitElement,
   PropertyValues,
   TemplateResult,
+  css,
+  html,
+  nothing,
 } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { computeStateDomain } from "../../../common/entity/compute_state_domain";
+import { shouldHandleRequestSelectedEvent } from "../../../common/mwc/handle-request-selected-event";
 import { navigate } from "../../../common/navigate";
 import { stringCompare } from "../../../common/string/compare";
 import "../../../components/ha-card";
 import "../../../components/ha-fab";
 import "../../../components/ha-icon-button";
+import "../../../components/ha-list-item";
 import "../../../components/ha-svg-icon";
 import "../../../components/map/ha-locations-editor";
 import type {
@@ -27,13 +30,13 @@ import type {
 import { saveCoreConfig } from "../../../data/core";
 import { subscribeEntityRegistry } from "../../../data/entity_registry";
 import {
+  HomeZoneMutableParams,
+  Zone,
+  ZoneMutableParams,
   createZone,
   deleteZone,
   fetchZones,
   updateZone,
-  Zone,
-  ZoneMutableParams,
-  HomeZoneMutableParams,
 } from "../../../data/zone";
 import {
   showAlertDialog,
@@ -45,10 +48,8 @@ import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import type { HomeAssistant, Route } from "../../../types";
 import "../ha-config-section";
 import { configSections } from "../ha-panel-config";
-import { showZoneDetailDialog } from "./show-dialog-zone-detail";
-import "../../../components/ha-list-item";
-import { shouldHandleRequestSelectedEvent } from "../../../common/mwc/handle-request-selected-event";
 import { showHomeZoneDetailDialog } from "./show-dialog-home-zone-detail";
+import { showZoneDetailDialog } from "./show-dialog-zone-detail";
 
 @customElement("ha-config-zone")
 export class HaConfigZone extends SubscribeMixin(LitElement) {
@@ -150,6 +151,7 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
                 (entry) => html`
                   <ha-list-item
                     .entry=${entry}
+                    .id=${this.narrow ? entry.id : ""}
                     graphic="icon"
                     .hasMeta=${!this.narrow}
                     @request-selected=${this._itemClicked}
@@ -162,6 +164,7 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
                       ? html`
                           <div slot="meta">
                             <ha-icon-button
+                              .id=${entry.id}
                               .entry=${entry}
                               @click=${this._openEditEntry}
                               .path=${mdiPencil}
@@ -179,10 +182,14 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
                 (stateObject) => html`
                   <ha-list-item
                     graphic="icon"
-                    hasMeta
+                    .id=${this.narrow ? stateObject.entity_id : ""}
+                    .hasMeta=${!this.narrow ||
+                    stateObject.entity_id !== "zone.home"}
                     .value=${stateObject.entity_id}
                     @request-selected=${this._stateItemClicked}
                     ?selected=${this._activeEntry === stateObject.entity_id}
+                    .noEdit=${stateObject.entity_id !== "zone.home" ||
+                    !this._canEditCore}
                   >
                     <ha-icon
                       .icon=${stateObject.attributes.icon}
@@ -192,8 +199,13 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
 
                     ${stateObject.attributes.friendly_name ||
                     stateObject.entity_id}
-                    <div slot="meta">
+                    ${this.narrow &&
+                    stateObject.entity_id === "zone.home" &&
+                    !this._canEditCore
+                      ? nothing
+                      : html`<div slot="meta">
                           <ha-icon-button
+                            .id=${!this.narrow ? stateObject.entity_id : ""}
                             .entityId=${stateObject.entity_id}
                             .noEdit=${stateObject.entity_id !== "zone.home" ||
                             !this._canEditCore}
@@ -208,14 +220,17 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
                           ></ha-icon-button>
                           ${stateObject.entity_id !== "zone.home"
                             ? html`
-                            <simple-tooltip animation-delay="0" position="left">
+                                <simple-tooltip
+                                  animation-delay="0"
+                                  position="left"
+                                >
                                   ${hass.localize(
                                     "ui.panel.config.zone.configured_in_yaml"
                                   )}
                                 </simple-tooltip>
                               `
                             : ""}
-                    </div>
+                        </div>`}
                   </ha-list-item>
                 `
               )}
@@ -292,7 +307,11 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
       return;
     }
     const id = this.route.path.slice(6);
+    this._editZone(id);
     navigate("/config/zone", { replace: true });
+    if (this.narrow) {
+      return;
+    }
     this._zoomZone(id);
   }
 
@@ -401,6 +420,12 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
     }
 
     const entryId: string = (ev.currentTarget! as any).value;
+
+    if (this.narrow && entryId === "zone.home") {
+      this._editHomeZone(ev);
+      return;
+    }
+
     this._zoomZone(entryId);
     this._activeEntry = entryId;
   }
@@ -409,6 +434,11 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
     this._map?.fitMarker(id);
   }
 
+  private async _editZone(id: string) {
+    await this.updateComplete;
+    (this.shadowRoot?.querySelector(`[id="${id}"]`) as HTMLElement)?.click();
+  }
+
   private _openEditEntry(ev: Event) {
     const entry: Zone = (ev.currentTarget! as any).entry;
     this._openDialog(entry);