${!atLeastVersion(this.hass.config.version, 2021, 12)
- ? html`
${this.supervisor.localize("dashboard.addons")}
`
+ ? html`
${this.supervisor.localize("dashboard.addons")}
`
: ""}
${!this.supervisor.addon.addons.length
@@ -34,67 +51,73 @@ class HassioAddons extends LitElement {
`
- : this.supervisor.addon.addons
- .sort((a, b) =>
- caseInsensitiveStringCompare(
- a.name,
- b.name,
- this.hass.locale.language
- )
- )
- .map(
- (addon) => html`
-
-
-
-
-
- `
- )}
+ : this._getAddons(this.supervisor.addon.addons, this._filter).map(
+ (addon) => html`
+
+
+
+
+
+ `
+ )}
`;
}
+ private _getAddons = memoizeOne(
+ (addons: HassioAddonInfo[], filter?: string) => {
+ if (filter) {
+ addons = addons.filter((addon) => {
+ const lowerCaseFilter = filter.toLowerCase();
+ return (
+ addon.name.toLowerCase().includes(lowerCaseFilter) ||
+ addon.description.toLowerCase().includes(lowerCaseFilter) ||
+ addon.slug.toLowerCase().includes(lowerCaseFilter)
+ );
+ });
+ }
+ return addons.sort((a, b) =>
+ caseInsensitiveStringCompare(a.name, b.name, this.hass.locale.language)
+ );
+ }
+ );
+
+ private _handleSearchChange(ev: CustomEvent) {
+ this._filter = ev.detail.value;
+ }
+
static get styles(): CSSResultGroup {
return [
haStyle,
@@ -103,6 +126,16 @@ class HassioAddons extends LitElement {
ha-card {
cursor: pointer;
}
+ .search {
+ position: sticky;
+ top: 0;
+ z-index: 2;
+ }
+ search-input {
+ display: block;
+ --mdc-text-field-fill-color: var(--sidebar-background-color);
+ --mdc-text-field-idle-line-color: var(--divider-color);
+ }
`,
];
}
diff --git a/hassio/src/dashboard/hassio-dashboard.ts b/hassio/src/dashboard/hassio-dashboard.ts
index f1bfb7a329..d60819861c 100644
--- a/hassio/src/dashboard/hassio-dashboard.ts
+++ b/hassio/src/dashboard/hassio-dashboard.ts
@@ -1,4 +1,4 @@
-import { mdiStorePlus } from "@mdi/js";
+import { mdiStorePlus, mdiUpdate } from "@mdi/js";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
import { atLeastVersion } from "../../../src/common/config/version";
@@ -10,6 +10,10 @@ import { HomeAssistant, Route } from "../../../src/types";
import { supervisorTabs } from "../hassio-tabs";
import "./hassio-addons";
import "../../../src/layouts/hass-subpage";
+import { reloadHassioAddons } from "../../../src/data/hassio/addon";
+import { extractApiErrorMessage } from "../../../src/data/hassio/common";
+import { showAlertDialog } from "../../../src/dialogs/generic/show-dialog-box";
+import { fireEvent } from "../../../src/common/dom/fire_event";
@customElement("hassio-dashboard")
class HassioDashboard extends LitElement {
@@ -36,9 +40,16 @@ class HassioDashboard extends LitElement {
back-path="/config"
.header=${this.supervisor.localize("panel.addons")}
>
+