From 5e53ba7146713651f6f46b88418c2443ef46ea59 Mon Sep 17 00:00:00 2001
From: ludeeus <joasoe@gmail.com>
Date: Mon, 2 Sep 2024 16:49:27 +0000
Subject: [PATCH] Switch quick action to ha-menu

---
 .../hacs-repository-owerflow-menu.ts          |   2 +-
 src/dashboards/hacs-dashboard.ts              | 283 +++++++++++-------
 2 files changed, 172 insertions(+), 113 deletions(-)

diff --git a/src/components/hacs-repository-owerflow-menu.ts b/src/components/hacs-repository-owerflow-menu.ts
index 5ebf0b280..6c6d4603e 100644
--- a/src/components/hacs-repository-owerflow-menu.ts
+++ b/src/components/hacs-repository-owerflow-menu.ts
@@ -143,7 +143,7 @@ export const repositoryMenuItems = memoizeOne(
                 destructive: true,
               });
             },
-            warning: true,
+            error: true,
           },
         ]
       : []),
diff --git a/src/dashboards/hacs-dashboard.ts b/src/dashboards/hacs-dashboard.ts
index 0e444f6e8..8e10baecb 100644
--- a/src/dashboards/hacs-dashboard.ts
+++ b/src/dashboards/hacs-dashboard.ts
@@ -3,6 +3,7 @@ import "@material/mwc-list/mwc-list";
 import "@material/mwc-list/mwc-list-item";
 import {
   mdiAlertCircleOutline,
+  mdiDotsVertical,
   mdiFileDocument,
   mdiGit,
   mdiGithub,
@@ -10,8 +11,8 @@ import {
   mdiNewBox,
 } from "@mdi/js";
 import type { CSSResultGroup, TemplateResult } from "lit";
-import { LitElement, html, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property, query, state } from "lit/decorators";
 import memoize from "memoize-one";
 import { relativeTime } from "../../homeassistant-frontend/src/common/datetime/relative_time";
 import { storage } from "../../homeassistant-frontend/src/common/decorators/storage";
@@ -28,12 +29,16 @@ import "../../homeassistant-frontend/src/components/ha-button-menu";
 import "../../homeassistant-frontend/src/components/ha-fab";
 import "../../homeassistant-frontend/src/components/ha-form/ha-form";
 import "../../homeassistant-frontend/src/components/ha-markdown";
+import "../../homeassistant-frontend/src/components/ha-menu";
+import "../../homeassistant-frontend/src/components/ha-menu-item";
 
 import { LocalizeFunc } from "../../homeassistant-frontend/src/common/translations/localize";
 import { HaFormSchema } from "../../homeassistant-frontend/src/components/ha-form/types";
 import "../../homeassistant-frontend/src/components/ha-icon-overflow-menu";
 import { IconOverflowMenuItem } from "../../homeassistant-frontend/src/components/ha-icon-overflow-menu";
+import { HaMenu } from "../../homeassistant-frontend/src/components/ha-menu";
 import "../../homeassistant-frontend/src/components/ha-svg-icon";
+import { PageNavigation } from "../../homeassistant-frontend/src/layouts/hass-tabs-subpage";
 import { haStyle } from "../../homeassistant-frontend/src/resources/styles";
 import type { HomeAssistant, Route } from "../../homeassistant-frontend/src/types";
 import { brandsUrl } from "../../homeassistant-frontend/src/util/brands-url";
@@ -51,7 +56,6 @@ import { repositoriesClearNew } from "../data/websocket";
 import { HacsStyles } from "../styles/hacs-common-style";
 import { documentationUrl } from "../tools/documentation";
 import { typeIcon } from "../tools/type-icon";
-import { PageNavigation } from "../../homeassistant-frontend/src/layouts/hass-tabs-subpage";
 
 const defaultKeyData = {
   title: "",
@@ -102,6 +106,12 @@ export class HacsDashboard extends LitElement {
   @storage({ key: "hacs-dashboard-table-columns-ordering", state: true, subscribe: false })
   private _orderTableColumns?: string[];
 
+  @query("#overflow-menu")
+  private _repositoryOverflowMenu!: HaMenu;
+
+  @state()
+  private _overflowMenuRepository?: RepositoryBase;
+
   protected render = (): TemplateResult | void => {
     const repositories = this._filterRepositories(
       this.hacs.repositories,
@@ -111,111 +121,130 @@ export class HacsDashboard extends LitElement {
     const repositoriesContainsNew = repositories.some((repository) => repository.new);
 
     return html`<hass-tabs-subpage-data-table
-      .tabs=${TABS}
-      .columns=${this._columns(this.hacs.localize, this.narrow)}
-      .data=${repositories}
-      .hass=${this.hass}
-      ?iswide=${this.isWide}
-      .localizeFunc=${this.hacs.localize as LocalizeFunc}
-      main-page
-      .narrow=${this.narrow}
-      .route=${this.route}
-      clickable
-      .filter=${this._activeSearch || ""}
-      hasFilters
-      hasFab
-      .filters=${this._activeFilters?.length}
-      .noDataText=${this.hacs.localize("dashboard.no_data")}
-      .initialGroupColumn=${this._activeGrouping || "translated_status"}
-      .initialCollapsedGroups=${this._activeCollapsed || []}
-      .groupOrder=${this._groupOrder(this.hacs.localize, this._activeGrouping)}
-      .initialSorting=${this._activeSorting}
-      .columnOrder=${this._orderTableColumns}
-      .hiddenColumns=${this._hiddenTableColumns}
-      @columns-changed=${this._handleColumnsChanged}
-      @row-click=${this._handleRowClicked}
-      @clear-filter=${this._handleClearFilter}
-      @value-changed=${this._handleSearchFilterChanged}
-      @sorting-changed=${this._handleSortingChanged}
-      @grouping-changed=${this._handleGroupingChanged}
-      @collapsed-changed=${this._handleCollapseChanged}
-    >
-      <ha-icon-overflow-menu
-        narrow
-        slot="toolbar-icon"
+        .tabs=${TABS}
+        .columns=${this._columns(this.hacs.localize, this.narrow)}
+        .data=${repositories}
         .hass=${this.hass}
-        .items=${[
-          {
-            path: mdiFileDocument,
-            label: this.hacs.localize("menu.documentation"),
-            action: () => mainWindow.open(documentationUrl({}), "_blank", "noreferrer=true"),
-          },
-          {
-            path: mdiGithub,
-            label: "GitHub",
-            action: () => mainWindow.open(`https://github.com/hacs`, "_blank", "noreferrer=true"),
-          },
-          {
-            path: mdiAlertCircleOutline,
-            label: this.hacs.localize("menu.open_issue"),
-            action: () =>
-              mainWindow.open(
-                documentationUrl({
-                  path: "/docs/help/issues",
-                }),
-                "_blank",
-                "noreferrer=true",
-              ),
-          },
-          {
-            path: mdiGit,
-            disabled: Boolean(this.hacs.info.disabled_reason),
-            label: this.hacs.localize("menu.custom_repositories"),
-            action: () => {
-              showHacsCustomRepositoriesDialog(this, {
-                hacs: this.hacs,
-              });
+        ?iswide=${this.isWide}
+        .localizeFunc=${this.hacs.localize as LocalizeFunc}
+        main-page
+        .narrow=${this.narrow}
+        .route=${this.route}
+        clickable
+        .filter=${this._activeSearch || ""}
+        hasFilters
+        hasFab
+        .filters=${this._activeFilters?.length}
+        .noDataText=${this.hacs.localize("dashboard.no_data")}
+        .initialGroupColumn=${this._activeGrouping || "translated_status"}
+        .initialCollapsedGroups=${this._activeCollapsed || []}
+        .groupOrder=${this._groupOrder(this.hacs.localize, this._activeGrouping)}
+        .initialSorting=${this._activeSorting}
+        .columnOrder=${this._orderTableColumns}
+        .hiddenColumns=${this._hiddenTableColumns}
+        @columns-changed=${this._handleColumnsChanged}
+        @row-click=${this._handleRowClicked}
+        @clear-filter=${this._handleClearFilter}
+        @value-changed=${this._handleSearchFilterChanged}
+        @sorting-changed=${this._handleSortingChanged}
+        @grouping-changed=${this._handleGroupingChanged}
+        @collapsed-changed=${this._handleCollapseChanged}
+      >
+        <ha-icon-overflow-menu
+          narrow
+          slot="toolbar-icon"
+          .hass=${this.hass}
+          .items=${[
+            {
+              path: mdiFileDocument,
+              label: this.hacs.localize("menu.documentation"),
+              action: () => mainWindow.open(documentationUrl({}), "_blank", "noreferrer=true"),
             },
-          },
-          repositoriesContainsNew
-            ? {
-                path: mdiNewBox,
-                label: this.hacs.localize("menu.dismiss"),
-                action: () => {
-                  repositoriesClearNew(this.hass, this.hacs);
-                },
-              }
-            : undefined,
-          {
-            path: mdiInformation,
-            label: this.hacs.localize("menu.about"),
-            action: () => {
-              showHacsFormDialog(this, {
-                hacs: this.hacs,
-                title: APP_FULL_NAME,
-                description: html`<ha-markdown
-                  .content=${aboutHacsmarkdownContent(this.hacs)}
-                ></ha-markdown>`,
-              });
+            {
+              path: mdiGithub,
+              label: "GitHub",
+              action: () => mainWindow.open(`https://github.com/hacs`, "_blank", "noreferrer=true"),
             },
-          },
-        ].filter((item) => item !== undefined) as IconOverflowMenuItem[]}
-      >
-      </ha-icon-overflow-menu>
-
-      <ha-form
-        slot="filter-pane"
-        class="filters"
-        .hass=${this.hass}
-        .data=${{
-          status: this._activeFilters?.find((filter) => filter.startsWith("status_")) || "",
-          type: this._activeFilters?.find((filter) => filter.startsWith("type_")) || "",
-        }}
-        .schema=${this._filterSchema(this.hacs.localize, this.hacs.info.categories)}
-        .computeLabel=${this._computeFilterFormLabel}
-        @value-changed=${this._handleFilterChanged}
-      ></ha-form>
-    </hass-tabs-subpage-data-table>`;
+            {
+              path: mdiAlertCircleOutline,
+              label: this.hacs.localize("menu.open_issue"),
+              action: () =>
+                mainWindow.open(
+                  documentationUrl({
+                    path: "/docs/help/issues",
+                  }),
+                  "_blank",
+                  "noreferrer=true",
+                ),
+            },
+            {
+              path: mdiGit,
+              disabled: Boolean(this.hacs.info.disabled_reason),
+              label: this.hacs.localize("menu.custom_repositories"),
+              action: () => {
+                showHacsCustomRepositoriesDialog(this, {
+                  hacs: this.hacs,
+                });
+              },
+            },
+            repositoriesContainsNew
+              ? {
+                  path: mdiNewBox,
+                  label: this.hacs.localize("menu.dismiss"),
+                  action: () => {
+                    repositoriesClearNew(this.hass, this.hacs);
+                  },
+                }
+              : undefined,
+            {
+              path: mdiInformation,
+              label: this.hacs.localize("menu.about"),
+              action: () => {
+                showHacsFormDialog(this, {
+                  hacs: this.hacs,
+                  title: APP_FULL_NAME,
+                  description: html`<ha-markdown
+                    .content=${aboutHacsmarkdownContent(this.hacs)}
+                  ></ha-markdown>`,
+                });
+              },
+            },
+          ].filter((item) => item !== undefined) as IconOverflowMenuItem[]}
+        >
+        </ha-icon-overflow-menu>
+
+        <ha-form
+          slot="filter-pane"
+          class="filters"
+          .hass=${this.hass}
+          .data=${{
+            status: this._activeFilters?.find((filter) => filter.startsWith("status_")) || "",
+            type: this._activeFilters?.find((filter) => filter.startsWith("type_")) || "",
+          }}
+          .schema=${this._filterSchema(this.hacs.localize, this.hacs.info.categories)}
+          .computeLabel=${this._computeFilterFormLabel}
+          @value-changed=${this._handleFilterChanged}
+        ></ha-form>
+      </hass-tabs-subpage-data-table>
+      <ha-menu id="overflow-menu" positioning="fixed">
+        ${this._overflowMenuRepository
+          ? repositoryMenuItems(this, this._overflowMenuRepository).map((entry) =>
+              entry.divider
+                ? html`<li divider role="separator"></li>`
+                : html`
+                    <ha-menu-item
+                      class="${entry.error ? "error" : entry.warning ? "warning" : ""}"
+                      .clickAction=${() => {
+                        entry?.action && entry.action();
+                      }}
+                    >
+                      <ha-svg-icon .path=${entry.path} slot="start"></ha-svg-icon>
+                      <div slot="headline">${entry.label}</div>
+                    </ha-menu-item>
+                  `,
+            )
+          : nothing}
+      </ha-menu> `;
   };
 
   private _filterRepositories = memoize(
@@ -381,17 +410,30 @@ export class HacsDashboard extends LitElement {
         showNarrow: true,
         type: "overflow-menu",
         template: (repository: RepositoryBase) => html`
-          <ha-icon-overflow-menu
-            .hass=${this.hass}
-            .items=${repositoryMenuItems(this, repository) as IconOverflowMenuItem[]}
-            narrow
-          >
-          </ha-icon-overflow-menu>
+          <ha-icon-button
+            .repository=${repository}
+            .label=${this.hass.localize("ui.common.overflow_menu") || "overflow_menu"}
+            .path=${mdiDotsVertical}
+            @click=${this._showOverflowRepositoryMenu}
+          ></ha-icon-button>
         `,
       },
     }),
   );
 
+  private _showOverflowRepositoryMenu = (ev: any) => {
+    if (
+      this._repositoryOverflowMenu.open &&
+      ev.target === this._repositoryOverflowMenu.anchorElement
+    ) {
+      this._repositoryOverflowMenu.close();
+      return;
+    }
+    this._repositoryOverflowMenu.anchorElement = ev.target;
+    this._overflowMenuRepository = ev.target.repository;
+    this._repositoryOverflowMenu.show();
+  };
+
   private _groupOrder = memoize(
     (localize: LocalizeFunc<HacsLocalizeKeys>, activeGrouping: string | undefined) =>
       activeGrouping === "translated_status"
@@ -511,7 +553,24 @@ export class HacsDashboard extends LitElement {
   }
 
   static get styles(): CSSResultGroup {
-    return [haStyle, HacsStyles];
+    return [
+      haStyle,
+      HacsStyles,
+      css`
+        ha-menu-item.error {
+          --md-menu-item-label-text-color: var(--error-color);
+          --hcv-color-icon: var(--error-color);
+        }
+
+        ha-menu-item.warning {
+          --md-menu-item-label-text-color: var(--warning-color);
+          --hcv-color-icon: var(--warning-color);
+        }
+        li[role="separator"] {
+          border-bottom: 1px solid var(--divider-color);
+        }
+      `,
+    ];
   }
 }