From 619c75ac8b3da8b2000e279b57a889fa3521e15c Mon Sep 17 00:00:00 2001 From: Aidan Timson Date: Mon, 16 Mar 2026 14:12:03 +0000 Subject: [PATCH] Update apps filtering and styles to show stage and remove advanced mode filters (#30165) * Remove filter for unstable app stages * Show stage in app store repository view * Increase size of cards to accomadate badges * Add stage to installed apps, update style * Make "Search" consistent, "Search apps" not needed in this context * Remove show advanced mode logic for app visibility * Add margin to .addition * Remove [deprecated] from app page title also * Use common helper --- .../apps/app-view/info/supervisor-app-info.ts | 9 +- src/panels/config/apps/common/app.ts | 4 + .../supervisor-apps-card-content.ts | 45 ++++++- .../config/apps/ha-config-apps-available.ts | 23 ---- .../config/apps/ha-config-apps-installed.ts | 110 +++++++++--------- src/panels/config/apps/ha-config-apps.ts | 3 - .../apps/resources/supervisor-apps-style.ts | 8 +- .../config/apps/supervisor-apps-repository.ts | 9 +- src/translations/en.json | 1 - 9 files changed, 113 insertions(+), 99 deletions(-) create mode 100644 src/panels/config/apps/common/app.ts diff --git a/src/panels/config/apps/app-view/info/supervisor-app-info.ts b/src/panels/config/apps/app-view/info/supervisor-app-info.ts index 7228b76b46..6cff9fcc8d 100644 --- a/src/panels/config/apps/app-view/info/supervisor-app-info.ts +++ b/src/panels/config/apps/app-view/info/supervisor-app-info.ts @@ -76,6 +76,7 @@ import { mdiHomeAssistant } from "../../../../../resources/home-assistant-logo-s import { haStyle } from "../../../../../resources/styles"; import type { HomeAssistant, Route } from "../../../../../types"; import { bytesToString } from "../../../../../util/bytes-to-string"; +import { getAppDisplayName } from "../../common/app"; import "../../components/supervisor-apps-card-content"; import "../components/supervisor-app-metric"; import { extractChangelog } from "../util/supervisor-app"; @@ -197,7 +198,9 @@ class SupervisorAppInfo extends LitElement {
- ${!this.narrow ? this.addon.name : nothing} + ${!this.narrow + ? getAppDisplayName(this.addon.name, this.addon.stage) + : nothing}
${this.addon.version ? html` @@ -490,7 +493,7 @@ class SupervisorAppInfo extends LitElement { href=${this.addon.url!} target="_blank" rel="noreferrer" - >${this.addon.name}${getAppDisplayName(this.addon.name, this.addon.stage)}`, } )} @@ -1223,7 +1226,7 @@ class SupervisorAppInfo extends LitElement { title: this.hass.localize( "ui.panel.config.apps.dashboard.uninstall_dialog.title", { - name: this.addon.name, + name: getAppDisplayName(this.addon.name, this.addon.stage), } ), text: html` diff --git a/src/panels/config/apps/common/app.ts b/src/panels/config/apps/common/app.ts new file mode 100644 index 0000000000..d9210fe8e2 --- /dev/null +++ b/src/panels/config/apps/common/app.ts @@ -0,0 +1,4 @@ +import type { AddonStage } from "../../../../data/hassio/addon"; + +export const getAppDisplayName = (name: string, stage: AddonStage): string => + stage === "deprecated" ? name.replace(/\s*\[deprecated\]\s*$/i, "") : name; diff --git a/src/panels/config/apps/components/supervisor-apps-card-content.ts b/src/panels/config/apps/components/supervisor-apps-card-content.ts index 596f400859..5258f994fb 100644 --- a/src/panels/config/apps/components/supervisor-apps-card-content.ts +++ b/src/panels/config/apps/components/supervisor-apps-card-content.ts @@ -1,9 +1,11 @@ import { mdiHelpCircleOutline } from "@mdi/js"; import type { TemplateResult } from "lit"; -import { css, html, LitElement } from "lit"; +import { css, html, LitElement, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import "../../../../components/ha-svg-icon"; +import type { AddonStage } from "../../../../data/hassio/addon"; import type { HomeAssistant } from "../../../../types"; +import { getAppDisplayName } from "../common/app"; @customElement("supervisor-apps-card-content") class SupervisorAppsCardContent extends LitElement { @@ -12,6 +14,8 @@ class SupervisorAppsCardContent extends LitElement { // eslint-disable-next-line lit/no-native-attributes @property() public title!: string; + @property() public stage: AddonStage = "stable"; + @property() public description?: string; @property({ type: Boolean }) public available = true; @@ -29,6 +33,13 @@ class SupervisorAppsCardContent extends LitElement { @property({ attribute: false }) public iconImage?: string; protected render(): TemplateResult { + const stageLabel = + this.stage !== "stable" + ? this.hass.localize( + `ui.panel.config.apps.dashboard.capability.stages.${this.stage}` + ) + : undefined; + return html` ${this.showTopbar ? html`
` @@ -52,7 +63,12 @@ class SupervisorAppsCardContent extends LitElement { > `}
-
${this.title}
+
+
${getAppDisplayName(this.title, this.stage)}
+ ${stageLabel + ? html` ${stageLabel} ` + : nothing} +
${this.description} ${ @@ -91,13 +107,38 @@ class SupervisorAppsCardContent extends LitElement { color: var(--error-color); } .title { + flex: 1; + min-width: 0; color: var(--primary-text-color); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } + .title-row { + display: flex; + align-items: center; + gap: var(--ha-space-2); + min-width: 0; + } + .stage { + flex: none; + border-radius: 999px; + font-size: 12px; + line-height: 1; + padding: 4px 8px; + white-space: nowrap; + } + .stage.experimental { + color: var(--warning-color); + background-color: rgba(var(--rgb-warning-color), 0.12); + } + .stage.deprecated { + color: var(--error-color); + background-color: rgba(var(--rgb-error-color), 0.12); + } .addition { color: var(--secondary-text-color); + margin-top: var(--ha-space-1); overflow: hidden; position: relative; height: 2.4em; diff --git a/src/panels/config/apps/ha-config-apps-available.ts b/src/panels/config/apps/ha-config-apps-available.ts index ad29ae3de9..11db2ab0b9 100644 --- a/src/panels/config/apps/ha-config-apps-available.ts +++ b/src/panels/config/apps/ha-config-apps-available.ts @@ -154,17 +154,6 @@ export class HaConfigAppsAvailable extends LitElement { ${repos} `} - ${!this.hass.userData?.showAdvanced - ? html` -
- - ${this.hass.localize( - "ui.panel.config.apps.store.missing_apps" - )} - -
- ` - : ""} `; } @@ -296,18 +285,6 @@ export class HaConfigAppsAvailable extends LitElement { --mdc-text-field-fill-color: var(--sidebar-background-color); --mdc-text-field-idle-line-color: var(--divider-color); } - .advanced { - padding: 12px; - display: flex; - flex-wrap: wrap; - color: var(--primary-text-color); - } - .advanced a { - margin-left: 0.5em; - margin-inline-start: 0.5em; - margin-inline-end: initial; - color: var(--primary-color); - } `; } diff --git a/src/panels/config/apps/ha-config-apps-installed.ts b/src/panels/config/apps/ha-config-apps-installed.ts index 50425d2c6d..1ea55c307c 100644 --- a/src/panels/config/apps/ha-config-apps-installed.ts +++ b/src/panels/config/apps/ha-config-apps-installed.ts @@ -30,6 +30,7 @@ import "../../../layouts/hass-loading-screen"; import "../../../layouts/hass-subpage"; import type { HomeAssistant, Route } from "../../../types"; import "./components/supervisor-apps-card-content"; +import { supervisorAppsStyle } from "./resources/supervisor-apps-style"; @customElement("ha-config-apps-installed") export class HaConfigAppsInstalled extends LitElement { @@ -92,9 +93,6 @@ export class HaConfigAppsInstalled extends LitElement { suffix .filter=${this._filter} @value-changed=${this._handleSearchChange} - .label=${this.hass.localize( - "ui.panel.config.apps.installed.search" - )} >
@@ -123,6 +121,7 @@ export class HaConfigAppsInstalled extends LitElement { !addon.advanced && addon.stage === "stable" - ); - } - const addons = this._getAddons(_addons, this.filter); + const addons = this._getAddons(this.addons, this.filter); if (this.filter && addons.length < 1) { return html` @@ -72,6 +66,7 @@ export class SupervisorAppsRepositoryEl extends LitElement {