Small config fixes (#12472)

src/layouts/hass-subpage.ts

@@ -99,6 +99,7 @@ class HassSubpage extends LitElement {
       ha-icon-button-arrow-prev,
       ::slotted([slot="toolbar-icon"]) {
         pointer-events: auto;
+        color: var(--sidebar-icon-color);
       }
 
       .main-title {

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

@@ -1,15 +1,23 @@
+import "@material/mwc-list/mwc-list-item";
 import timezones from "google-timezones-json";
 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";
-import { HaProgressButton } from "../../../components/buttons/ha-progress-button";
+import "../../../components/buttons/ha-progress-button";
+import type { HaProgressButton } from "../../../components/buttons/ha-progress-button";
 import { currencies } from "../../../components/currency-datalist";
+import "../../../components/ha-card";
 import "../../../components/ha-formfield";
 import "../../../components/ha-radio";
 import type { HaRadio } from "../../../components/ha-radio";
+import "../../../components/ha-select";
 import "../../../components/ha-settings-row";
+import "../../../components/ha-textfield";
+import "../../../components/map/ha-locations-editor";
+import type { MarkerLocation } from "../../../components/map/ha-locations-editor";
 import { ConfigUpdateValues, saveCoreConfig } from "../../../data/core";
 import { SYMBOL_TO_ISO } from "../../../data/currency";
 import "../../../layouts/hass-subpage";
@@ -34,6 +42,8 @@ class HaConfigSectionGeneral extends LitElement {
 
   @state() private _timeZone?: string;
 
+  @state() private _location?: [number, number];
+
   protected render(): TemplateResult {
     const canEdit = ["storage", "default"].includes(
       this.hass.config.config_source
@@ -47,7 +57,7 @@ class HaConfigSectionGeneral extends LitElement {
         .header=${this.hass.localize("ui.panel.config.core.caption")}
       >
         <div class="content">
-          <ha-card>
+          <ha-card outlined>
             <div class="card-content">
               ${!canEdit
                 ? html`
@@ -183,6 +193,19 @@ class HaConfigSectionGeneral extends LitElement {
                 >
               </div>
             </div>
+            ${this.narrow
+              ? html`
+                  <ha-locations-editor
+                    .hass=${this.hass}
+                    .locations=${this._markerLocation(
+                      this.hass.config.latitude,
+                      this.hass.config.longitude,
+                      this._location
+                    )}
+                    @location-updated=${this._locationChanged}
+                  ></ha-locations-editor>
+                `
+              : html`
                   <ha-settings-row>
                     <div slot="heading">
                       ${this.hass.localize(
@@ -198,6 +221,7 @@ 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")}
@@ -237,7 +261,11 @@ class HaConfigSectionGeneral extends LitElement {
     this._unitSystem = (ev.target as HaRadio).value as "metric" | "imperial";
   }
 
-  private async _updateEntry(ev) {
+  private _locationChanged(ev: CustomEvent) {
+    this._location = ev.detail.location;
+  }
+
+  private async _updateEntry(ev: CustomEvent) {
     const button = ev.target as HaProgressButton;
     if (button.progress) {
       return;
@@ -261,6 +289,21 @@ class HaConfigSectionGeneral extends LitElement {
     }
   }
 
+  private _markerLocation = memoizeOne(
+    (
+      lat: number,
+      lng: number,
+      location?: [number, number]
+    ): MarkerLocation[] => [
+      {
+        id: "location",
+        latitude: location ? location[0] : lat,
+        longitude: location ? location[1] : lng,
+        location_editable: true,
+      },
+    ]
+  );
+
   private _editLocation() {
     navigate("/config/zone");
   }
@@ -274,7 +317,7 @@ class HaConfigSectionGeneral extends LitElement {
         margin: 0 auto;
       }
       ha-card {
-        max-width: 500px;
+        max-width: 600px;
         margin: 0 auto;
         height: 100%;
         justify-content: space-between;
@@ -302,6 +345,11 @@ class HaConfigSectionGeneral extends LitElement {
       ha-select {
         display: block;
       }
+      ha-locations-editor {
+        display: block;
+        height: 400px;
+        padding: 16px;
+      }
     `,
   ];
 }

src/panels/config/core/ha-config-system-navigation.ts

@@ -43,8 +43,8 @@ class HaConfigSystemNavigation extends LitElement {
       >
         <ha-button-menu
           corner="BOTTOM_START"
-          slot="toolbar-icon"
           @action=${this._handleAction}
+          slot="toolbar-icon"
         >
           <ha-icon-button
             slot="trigger"
@@ -63,11 +63,6 @@ class HaConfigSystemNavigation extends LitElement {
           full-width
         >
           <ha-card outlined>
-            ${this.narrow
-              ? html`<div class="title">
-                  ${this.hass.localize("ui.panel.config.dashboard.system.main")}
-                </div>`
-              : ""}
             <ha-navigation-list
               .hass=${this.hass}
               .narrow=${this.narrow}