diff --git a/src/panels/hacs-experimental-panel.ts b/src/panels/hacs-experimental-panel.ts
index e84c5d8a..7f883238 100644
--- a/src/panels/hacs-experimental-panel.ts
+++ b/src/panels/hacs-experimental-panel.ts
@@ -14,17 +14,19 @@ import {
import "@polymer/app-layout/app-header/app-header";
import "@polymer/app-layout/app-toolbar/app-toolbar";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
import memoize from "memoize-one";
import { relativeTime } from "../../homeassistant-frontend/src/common/datetime/relative_time";
import { LocalStorage } from "../../homeassistant-frontend/src/common/decorators/local-storage";
import { mainWindow } from "../../homeassistant-frontend/src/common/dom/get_main_window";
+import { stopPropagation } from "../../homeassistant-frontend/src/common/dom/stop_propagation";
import { navigate } from "../../homeassistant-frontend/src/common/navigate";
import type { DataTableColumnContainer } from "../../homeassistant-frontend/src/components/data-table/ha-data-table";
import "../../homeassistant-frontend/src/components/ha-button-menu";
import "../../homeassistant-frontend/src/components/ha-check-list-item";
import "../../homeassistant-frontend/src/components/ha-fab";
+import "../../homeassistant-frontend/src/components/ha-select";
import { IconOverflowMenuItem } from "../../homeassistant-frontend/src/components/ha-icon-overflow-menu";
import "../../homeassistant-frontend/src/components/ha-menu-button";
import "../../homeassistant-frontend/src/components/ha-svg-icon";
@@ -83,7 +85,8 @@ export class HacsExperimentalPanel extends LitElement {
@property({ attribute: false }) public section!: "entry" | "explore";
- @state() activeFilters?: string[];
+ @LocalStorage("hacs-table-filters", true, false)
+ private activeFilters?: string[];
@LocalStorage("hacs-table-columns", true, false)
private _tableColumns: TableColumnsOptions = tableColumnDefaults;
@@ -183,55 +186,55 @@ export class HacsExperimentalPanel extends LitElement {
].filter((item) => item !== undefined) as IconOverflowMenuItem[]}
>
+ ${!this.narrow
+ ? html`
+
+
-
-
-
- ${!this.narrow ? html`` : " "}
- ${this.narrow && this.activeFilters?.length
- ? html`
- ${this.hass.localize("ui.components.data-table.filtering_by")}
- ${this.activeFilters.join(", ")} Clear
- `
- : ""}
- ${this.hacs.info.categories.map(
- (category) => html`
-
+ filter.startsWith(`${this.hacs.localize(`dialog_custom_repositories.category`)}: `)
+ ) || ""}
>
- ${this.hacs.localize(`common.${category}`)}
-
- `
- )}
- ${!this.narrow
- ? html`
-
-
- ${Object.keys(tableColumnDefaults[this.section]).map(
- (entry) => html`
-
- ${this.hacs.localize(`column.${entry}`)}
-
- `
+ ${this.hacs.info.categories.map(
+ (category) =>
+ html`
+
+ ${this.hacs.localize(`common.${category}`)}
+
+ `
)}
- `
- : " "}
-
-
+
+
+
+ ${Object.keys(tableColumnDefaults[this.section]).map(
+ (entry) => html`
+
+ ${this.hacs.localize(`column.${entry}`)}
+
+ `
+ )}
+ `
+ : " "}
${this.section === "entry"
? html`
@@ -251,7 +254,14 @@ export class HacsExperimentalPanel extends LitElement {
): RepositoryBase[] =>
repositories
.filter((reposiotry) => {
- if (activeFilters?.includes(`Hide ${reposiotry.category}`)) {
+ if (
+ activeFilters &&
+ !activeFilters.includes(
+ `${this.hacs.localize(`dialog_custom_repositories.category`)}: ${this.hacs.localize(
+ `common.${reposiotry.category}`
+ )}`
+ )
+ ) {
return false;
}
return (!downloaded && !reposiotry.installed) || (downloaded && reposiotry.installed);
@@ -355,7 +365,7 @@ export class HacsExperimentalPanel extends LitElement {
html`
@@ -370,12 +380,10 @@ export class HacsExperimentalPanel extends LitElement {
private _handleCategoryFilterChange(ev: CustomEvent) {
ev.stopPropagation();
- const category = `Hide ${(ev.target as any).category}`;
- if (ev.detail.selected) {
- this.activeFilters = Array.from(new Set([...(this.activeFilters || []), category]));
- return;
+ const categoryFilter = (ev.target as any).value;
+ if (categoryFilter) {
+ this.activeFilters = [categoryFilter];
}
- this.activeFilters = this.activeFilters?.filter((item) => item !== category);
}
private _handleColumnChange(ev: CustomEvent) {
@@ -420,6 +428,9 @@ export class HacsExperimentalPanel extends LitElement {
height: 1px;
background-color: var(--divider-color);
}
+ ha-select {
+ margin: 0 8px;
+ }
`,
];
}