Add navigation to dashboard & resources to lovelace editor + icons (#8156)

src/panels/lovelace/hui-root.ts

@@ -3,8 +3,11 @@ import "@material/mwc-list/mwc-list-item";
 import type { RequestSelectedDetail } from "@material/mwc-list/mwc-list-item";
 import {
   mdiClose,
+  mdiCodeBraces,
   mdiCog,
   mdiDotsVertical,
+  mdiFileMultiple,
+  mdiFormatListBulletedTriangle,
   mdiHelp,
   mdiHelpCircle,
   mdiMicrophone,
@@ -12,6 +15,7 @@ import {
   mdiPlus,
   mdiRefresh,
   mdiShape,
+  mdiViewDashboard,
 } from "@mdi/js";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-scroll-effects/effects/waterfall";
@@ -169,17 +173,54 @@ class HUIRoot extends LitElement {
                       ? ""
                       : html`
                           <mwc-list-item
+                            graphic="icon"
                             aria-label=${this.hass!.localize(
                               "ui.panel.lovelace.unused_entities.title"
                             )}
                             @request-selected="${this._handleUnusedEntities}"
                           >
+                            <ha-svg-icon
+                              slot="graphic"
+                              .path=${mdiFormatListBulletedTriangle}
+                            >
+                            </ha-svg-icon>
                             ${this.hass!.localize(
                               "ui.panel.lovelace.unused_entities.title"
                             )}
                           </mwc-list-item>
                         `}
-                    <mwc-list-item @request-selected="${this._handleRawEditor}">
+                    <mwc-list-item
+                      graphic="icon"
+                      @request-selected="${this._handleManageDashboards}"
+                    >
+                      <ha-svg-icon
+                        slot="graphic"
+                        .path=${mdiViewDashboard}
+                      ></ha-svg-icon>
+                      ${this.hass!.localize(
+                        "ui.panel.lovelace.editor.menu.manage_dashboards"
+                      )}
+                    </mwc-list-item>
+                    <mwc-list-item
+                      graphic="icon"
+                      @request-selected="${this._handleManageResources}"
+                    >
+                      <ha-svg-icon
+                        slot="graphic"
+                        .path=${mdiFileMultiple}
+                      ></ha-svg-icon>
+                      ${this.hass!.localize(
+                        "ui.panel.lovelace.editor.menu.manage_resources"
+                      )}
+                    </mwc-list-item>
+                    <mwc-list-item
+                      graphic="icon"
+                      @request-selected="${this._handleRawEditor}"
+                    >
+                      <ha-svg-icon
+                        slot="graphic"
+                        .path=${mdiCodeBraces}
+                      ></ha-svg-icon>
                       ${this.hass!.localize(
                         "ui.panel.lovelace.editor.menu.raw_editor"
                       )}
@@ -626,6 +667,22 @@ class HUIRoot extends LitElement {
     this.lovelace!.enableFullEditMode();
   }
 
+  private _handleManageDashboards(
+    ev: CustomEvent<RequestSelectedDetail>
+  ): void {
+    if (!shouldHandleRequestSelectedEvent(ev)) {
+      return;
+    }
+    navigate(this, "/config/lovelace/dashboards");
+  }
+
+  private _handleManageResources(ev: CustomEvent<RequestSelectedDetail>): void {
+    if (!shouldHandleRequestSelectedEvent(ev)) {
+      return;
+    }
+    navigate(this, "/config/lovelace/resources");
+  }
+
   private _handleUnusedEntities(ev: CustomEvent<RequestSelectedDetail>): void {
     if (!shouldHandleRequestSelectedEvent(ev)) {
       return;

src/translations/en.json

@@ -2567,7 +2567,9 @@
           "header": "Edit UI",
           "menu": {
             "open": "Open Lovelace UI menu",
-            "raw_editor": "Raw configuration editor"
+            "raw_editor": "Raw configuration editor",
+            "manage_dashboards": "Manage dashboards",
+            "manage_resources": "Manage resources"
           },
           "common": {
             "edit": "Edit",