Quick Bar: Use command category labels instead of icons (#7692)

* Change commands to use category labels instead of icons. Fixes several translation issues. * Hydrate with latest dev and resolve conflicts * Replace custom pill element with material chips * Add category icons. Fix dark mode text colors * Update src/components/ha-chip-set.ts Co-authored-by: Bram Kragten <mail@bramkragten.nl> * Update src/dialogs/quick-bar/ha-quick-bar.ts Co-authored-by: Bram Kragten <mail@bramkragten.nl> * Update src/dialogs/quick-bar/ha-quick-bar.ts Co-authored-by: Bram Kragten <mail@bramkragten.nl> * Update src/components/ha-chip.ts Co-authored-by: Bram Kragten <mail@bramkragten.nl> * Update src/components/ha-chip.ts Co-authored-by: Bram Kragten <mail@bramkragten.nl> Co-authored-by: Bram Kragten <mail@bramkragten.nl>
2025-07-09 18:36:35 +00:00 · 2021-03-25 08:21:48 -07:00 · 2021-03-25 08:21:48 -07:00 · 6de8b4e35f
commit 6de8b4e35f
parent 57e535c2c8
9 changed files with 318 additions and 143 deletions
--- a/hassio/src/dialogs/network/dialog-hassio-network.ts
+++ b/hassio/src/dialogs/network/dialog-hassio-network.ts
@ -18,7 +18,6 @@ import {
 } from "lit-element";
 import { cache } from "lit-html/directives/cache";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
-import "../../../../src/components/ha-chips";
 import "../../../../src/components/ha-circular-progress";
 import "../../../../src/components/ha-dialog";
 import "../../../../src/components/ha-expansion-panel";
--- a/src/common/string/filter/sequence-matching.ts
+++ b/src/common/string/filter/sequence-matching.ts
@ -42,7 +42,7 @@ export const fuzzySequentialMatch = (filter: string, ...words: string[]) => {

 export interface ScorableTextItem {
  score?: number;
-  text: string;
+  filterText: string;
  altText?: string;
 }

@ -55,8 +55,8 @@ export const fuzzyFilterSort: FuzzyFilterSort = (filter, items) => {
  return items
    .map((item) => {
      item.score = item.altText
-        ? fuzzySequentialMatch(filter, item.text, item.altText)
-        : fuzzySequentialMatch(filter, item.text);
+        ? fuzzySequentialMatch(filter, item.filterText, item.altText)
+        : fuzzySequentialMatch(filter, item.filterText);
      return item;
    })
    .filter((item) => item.score !== undefined && item.score > 0)
--- a/src/components/ha-chip-set.ts
+++ b/src/components/ha-chip-set.ts
@ -1,6 +1,5 @@
 // @ts-ignore
 import chipStyles from "@material/chips/dist/mdc.chips.min.css";
-import { ripple } from "@material/mwc-ripple/ripple-directive";
 import {
  css,
  CSSResult,
@ -12,6 +11,7 @@ import {
  unsafeCSS,
 } from "lit-element";
 import { fireEvent } from "../common/dom/fire_event";
+import "./ha-chip";

 declare global {
  // for fire event
@ -20,8 +20,8 @@ declare global {
  }
 }

-@customElement("ha-chips")
-export class HaChips extends LitElement {
+@customElement("ha-chip-set")
+export class HaChipSet extends LitElement {
  @property() public items = [];

  protected render(): TemplateResult {
@ -33,18 +33,9 @@ export class HaChips extends LitElement {
        ${this.items.map(
          (item, idx) =>
            html`
-              <div class="mdc-chip" .index=${idx} @click=${this._handleClick}>
-                <div class="mdc-chip__ripple" .ripple="${ripple()}"></div>
-                <span role="gridcell">
-                  <span
-                    role="button"
-                    tabindex="0"
-                    class="mdc-chip__primary-action"
-                  >
-                    <span class="mdc-chip__text">${item}</span>
-                  </span>
-                </span>
-              </div>
+              <ha-chip .index=${idx} @click=${this._handleClick}>
+                ${item}
+              </ha-chip>
            `
        )}
      </div>
@ -60,16 +51,12 @@ export class HaChips extends LitElement {
  static get styles(): CSSResult {
    return css`
      ${unsafeCSS(chipStyles)}
-      .mdc-chip {
-        background-color: rgba(var(--rgb-primary-text-color), 0.15);
-        color: var(--primary-text-color);
-      }
    `;
  }
 }

 declare global {
  interface HTMLElementTagNameMap {
-    "ha-chips": HaChips;
+    "ha-chip-set": HaChipSet;
  }
 }
--- a/src/components/ha-chip.ts
+++ b/src/components/ha-chip.ts
@ -0,0 +1,75 @@
+// @ts-ignore
+import chipStyles from "@material/chips/dist/mdc.chips.min.css";
+import { ripple } from "@material/mwc-ripple/ripple-directive";
+import "./ha-icon";
+import {
+  css,
+  CSSResult,
+  customElement,
+  html,
+  LitElement,
+  property,
+  TemplateResult,
+  unsafeCSS,
+} from "lit-element";
+
+declare global {
+  // for fire event
+  interface HASSDomEvents {
+    "chip-clicked": { index: string };
+  }
+}
+
+@customElement("ha-chip")
+export class HaChip extends LitElement {
+  @property() public index = 0;
+
+  @property({type: Boolean}) public hasIcon = false;
+
+  protected render(): TemplateResult {
+    return html`
+      <div class="mdc-chip" .index=${this.index}>
+        ${this.hasIcon
+          ? html`<div class="mdc-chip__icon mdc-chip__icon--leading">
+              <slot name="icon"></slot>
+            </div>`
+          : null}
+        <div class="mdc-chip__ripple" .ripple="${ripple()}"></div>
+        <span role="gridcell">
+          <span role="button" tabindex="0" class="mdc-chip__primary-action">
+            <span class="mdc-chip__text"><slot></slot></span>
+          </span>
+        </span>
+      </div>
+    `;
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      ${unsafeCSS(chipStyles)}
+      .mdc-chip {
+        margin: 4px;
+        background-color: var(
+          --ha-chip-background-color,
+          rgba(var(--rgb-primary-text-color), 0.15)
+        );
+        color: var(--ha-chip-text-color, var(--primary-text-color));
+      }
+
+      .mdc-chip:hover {
+        color: var(--ha-chip-text-color, var(--primary-text-color));
+      }
+
+      .mdc-chip__icon--leading {
+        --mdc-icon-size: 20px;
+        color: var(--ha-chip-icon-color, var(--ha-chip-text-color));
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-chip": HaChip;
+  }
+}
--- a/src/dialogs/quick-bar/ha-quick-bar.ts
+++ b/src/dialogs/quick-bar/ha-quick-bar.ts
@ -3,7 +3,7 @@ import type { List } from "@material/mwc-list/mwc-list";
 import { SingleSelectedEvent } from "@material/mwc-list/mwc-list-foundation";
 import "@material/mwc-list/mwc-list-item";
 import type { ListItem } from "@material/mwc-list/mwc-list-item";
-import { mdiConsoleLine } from "@mdi/js";
+import { mdiConsoleLine, mdiEarth, mdiReload, mdiServerNetwork } from "@mdi/js";
 import {
  css,
  customElement,
@ -36,7 +36,7 @@ import "../../components/ha-circular-progress";
 import "../../components/ha-dialog";
 import "../../components/ha-header-bar";
 import { domainToName } from "../../data/integration";
-import { getPanelIcon, getPanelNameTranslationKey } from "../../data/panel";
+import { getPanelNameTranslationKey } from "../../data/panel";
 import { PageNavigation } from "../../layouts/hass-tabs-subpage";
 import { configSections } from "../../panels/config/ha-panel-config";
 import { haStyleDialog } from "../../resources/styles";
@ -46,31 +46,44 @@ import {
  showConfirmationDialog,
 } from "../generic/show-dialog-box";
 import { QuickBarParams } from "./show-dialog-quick-bar";
-
-const DEFAULT_NAVIGATION_ICON = "hass:arrow-right-circle";
-const DEFAULT_SERVER_ICON = "hass:server";
+import "../../components/ha-chip";

 interface QuickBarItem extends ScorableTextItem {
-  icon?: string;
+  primaryText: string;
  iconPath?: string;
  action(data?: any): void;
 }

-interface QuickBarNavigationItem extends QuickBarItem {
+interface CommandItem extends QuickBarItem {
+  categoryKey: "reload" | "navigation" | "server_control";
+  categoryText: string;
+}
+
+interface EntityItem extends QuickBarItem {
+  icon?: string;
+}
+
+const isCommandItem = (item: EntityItem | CommandItem): item is CommandItem => {
+  return (item as CommandItem).categoryKey !== undefined;
+};
+
+interface QuickBarNavigationItem extends CommandItem {
  path: string;
 }

-interface NavigationInfo extends PageNavigation {
-  text: string;
-}
+type NavigationInfo = PageNavigation & Pick<QuickBarItem, "primaryText">;

+type BaseNavigationCommand = Pick<
+  QuickBarNavigationItem,
+  "primaryText" | "path"
+>;
@customElement("ha-quick-bar")
 export class QuickBar extends LitElement {
  @property({ attribute: false }) public hass!: HomeAssistant;

-  @internalProperty() private _commandItems?: QuickBarItem[];
+  @internalProperty() private _commandItems?: CommandItem[];

-  @internalProperty() private _entityItems?: QuickBarItem[];
+  @internalProperty() private _entityItems?: EntityItem[];

  @internalProperty() private _items?: QuickBarItem[] = [];

@ -201,6 +214,12 @@ export class QuickBar extends LitElement {
  }

  private _renderItem(item: QuickBarItem, index?: number) {
+    return isCommandItem(item)
+      ? this._renderCommandItem(item, index)
+      : this._renderEntityItem(item, index);
+  }
+
+  private _renderEntityItem(item: EntityItem, index?: number) {
    return html`
      <mwc-list-item
        .twoline=${Boolean(item.altText)}
@ -213,10 +232,50 @@ export class QuickBar extends LitElement {
        ${item.iconPath
          ? html`<ha-svg-icon
              .path=${item.iconPath}
+              class="entity"
              slot="graphic"
            ></ha-svg-icon>`
-          : html`<ha-icon .icon=${item.icon} slot="graphic"></ha-icon>`}
-        ${item.text}
+          : html`<ha-icon
+              .icon=${item.icon}
+              class="entity"
+              slot="graphic"
+            ></ha-icon>`}
+        <span>${item.primaryText}</span>
+        ${item.altText
+          ? html`
+              <span slot="secondary" class="item-text secondary"
+                >${item.altText}</span
+              >
+            `
+          : null}
+      </mwc-list-item>
+    `;
+  }
+
+  private _renderCommandItem(item: CommandItem, index?: number) {
+    return html`
+      <mwc-list-item
+        .twoline=${Boolean(item.altText)}
+        .item=${item}
+        index=${ifDefined(index)}
+      >
+        <span>
+          <ha-chip
+            .label="${item.categoryText}"
+            hasIcon
+            class="command-category ${item.categoryKey}"
+          >
+            ${item.iconPath
+              ? html`<ha-svg-icon
+                  .path=${item.iconPath}
+                  slot="icon"
+                ></ha-svg-icon>`
+              : ""}
+            ${item.categoryText}</ha-chip
+          >
+        </span>
+
+        <span>${item.primaryText}</span>
        ${item.altText
          ? html`
              <span slot="secondary" class="item-text secondary"
@ -315,94 +374,112 @@ export class QuickBar extends LitElement {

  private _generateEntityItems(): QuickBarItem[] {
    return Object.keys(this.hass.states)
-      .map((entityId) => ({
-        text: computeStateName(this.hass.states[entityId]),
-        altText: entityId,
-        icon: domainIcon(computeDomain(entityId), this.hass.states[entityId]),
-        action: () => fireEvent(this, "hass-more-info", { entityId }),
-      }))
-      .sort((a, b) => compare(a.text.toLowerCase(), b.text.toLowerCase()));
+      .map((entityId) => {
+        const primaryText = computeStateName(this.hass.states[entityId]);
+        return {
+          primaryText,
+          filterText: primaryText,
+          altText: entityId,
+          icon: domainIcon(computeDomain(entityId), this.hass.states[entityId]),
+          action: () => fireEvent(this, "hass-more-info", { entityId }),
+        };
+      })
+      .sort((a, b) =>
+        compare(a.primaryText.toLowerCase(), b.primaryText.toLowerCase())
+      );
  }

-  private _generateCommandItems(): QuickBarItem[] {
+  private _generateCommandItems(): CommandItem[] {
    return [
      ...this._generateReloadCommands(),
      ...this._generateServerControlCommands(),
      ...this._generateNavigationCommands(),
-    ].sort((a, b) => compare(a.text.toLowerCase(), b.text.toLowerCase()));
+    ].sort((a, b) =>
+      compare(a.filterText.toLowerCase(), b.filterText.toLowerCase())
+    );
  }

-  private _generateReloadCommands(): QuickBarItem[] {
+  private _generateReloadCommands(): CommandItem[] {
    const reloadableDomains = componentsWithService(this.hass, "reload").sort();

-    return reloadableDomains.map((domain) => ({
-      text:
+    return reloadableDomains.map((domain) => {
+      const categoryText = this.hass.localize(
+        `ui.dialogs.quick-bar.commands.types.reload`
+      );
+      const primaryText =
        this.hass.localize(`ui.dialogs.quick-bar.commands.reload.${domain}`) ||
        this.hass.localize(
          "ui.dialogs.quick-bar.commands.reload.reload",
          "domain",
          domainToName(this.hass.localize, domain)
-        ),
-      icon: domainIcon(domain),
-      action: () => this.hass.callService(domain, "reload"),
-    }));
+        );
+
+      return {
+        primaryText,
+        filterText: `${categoryText} ${primaryText}`,
+        action: () => this.hass.callService(domain, "reload"),
+        categoryKey: "reload",
+        iconPath: mdiReload,
+        categoryText,
+      };
+    });
  }

-  private _generateServerControlCommands(): QuickBarItem[] {
+  private _generateServerControlCommands(): CommandItem[] {
    const serverActions = ["restart", "stop"];

-    return serverActions.map((action) =>
-      this._generateConfirmationCommand(
+    return serverActions.map((action) => {
+      const categoryKey = "server_control";
+      const categoryText = this.hass.localize(
+        `ui.dialogs.quick-bar.commands.types.${categoryKey}`
+      );
+      const primaryText = this.hass.localize(
+        "ui.dialogs.quick-bar.commands.server_control.perform_action",
+        "action",
+        this.hass.localize(
+          `ui.dialogs.quick-bar.commands.server_control.${action}`
+        )
+      );
+
+      return this._generateConfirmationCommand(
        {
-          text: this.hass.localize(
-            "ui.dialogs.quick-bar.commands.server_control.perform_action",
-            "action",
-            this.hass.localize(
-              `ui.dialogs.quick-bar.commands.server_control.${action}`
-            )
-          ),
-          icon: DEFAULT_SERVER_ICON,
+          primaryText,
+          filterText: `${categoryText} ${primaryText}`,
+          categoryKey,
+          iconPath: mdiServerNetwork,
+          categoryText,
          action: () => this.hass.callService("homeassistant", action),
        },
        this.hass.localize("ui.dialogs.generic.ok")
-      )
-    );
+      );
+    });
  }

-  private _generateNavigationCommands(): QuickBarItem[] {
+  private _generateNavigationCommands(): CommandItem[] {
    const panelItems = this._generateNavigationPanelCommands();
    const sectionItems = this._generateNavigationConfigSectionCommands();

-    return this._withNavigationActions([...panelItems, ...sectionItems]);
+    return this._finalizeNavigationCommands([...panelItems, ...sectionItems]);
  }

-  private _generateNavigationPanelCommands(): Omit<
-    QuickBarNavigationItem,
-    "action"
-  >[] {
+  private _generateNavigationPanelCommands(): BaseNavigationCommand[] {
    return Object.keys(this.hass.panels)
      .filter((panelKey) => panelKey !== "_my_redirect")
      .map((panelKey) => {
        const panel = this.hass.panels[panelKey];
        const translationKey = getPanelNameTranslationKey(panel);

-        const text = this.hass.localize(
-          "ui.dialogs.quick-bar.commands.navigation.navigate_to",
-          "panel",
-          this.hass.localize(translationKey) || panel.title || panel.url_path
-        );
+        const primaryText =
+          this.hass.localize(translationKey) || panel.title || panel.url_path;

        return {
-          text,
-          icon: getPanelIcon(panel) || DEFAULT_NAVIGATION_ICON,
+          primaryText,
          path: `/${panel.url_path}`,
        };
      });
  }

-  private _generateNavigationConfigSectionCommands(): Partial<
-    QuickBarNavigationItem
-  >[] {
+  private _generateNavigationConfigSectionCommands(): BaseNavigationCommand[] {
    const items: NavigationInfo[] = [];

    for (const sectionKey of Object.keys(configSections)) {
@ -426,18 +503,12 @@ export class QuickBar extends LitElement {
    page: PageNavigation
  ): NavigationInfo | undefined {
    if (page.component) {
-      const shortCaption = this.hass.localize(
+      const caption = this.hass.localize(
        `ui.dialogs.quick-bar.commands.navigation.${page.component}`
      );

-      if (page.translationKey && shortCaption) {
-        const caption = this.hass.localize(
-          "ui.dialogs.quick-bar.commands.navigation.navigate_to",
-          "panel",
-          shortCaption
-        );
-
-        return { ...page, text: caption };
+      if (page.translationKey && caption) {
+        return { ...page, primaryText: caption };
      }
    }

@ -445,9 +516,9 @@ export class QuickBar extends LitElement {
  }

  private _generateConfirmationCommand(
-    item: QuickBarItem,
+    item: CommandItem,
    confirmText: ConfirmationDialogParams["confirmText"]
-  ): QuickBarItem {
+  ): CommandItem {
    return {
      ...item,
      action: () =>
@ -458,13 +529,24 @@ export class QuickBar extends LitElement {
    };
  }

-  private _withNavigationActions(items) {
-    return items.map(({ text, icon, iconPath, path }) => ({
-      text,
-      icon,
-      iconPath,
-      action: () => navigate(this, path),
-    }));
+  private _finalizeNavigationCommands(
+    items: BaseNavigationCommand[]
+  ): CommandItem[] {
+    return items.map((item) => {
+      const categoryKey = "navigation";
+      const categoryText = this.hass.localize(
+        `ui.dialogs.quick-bar.commands.types.${categoryKey}`
+      );
+
+      return {
+        ...item,
+        categoryKey,
+        iconPath: mdiEarth,
+        categoryText,
+        filterText: `${categoryText} ${item.primaryText}`,
+        action: () => navigate(this, item.path),
+      };
+    });
  }

  private _toggleIfAlreadyOpened() {
@ -506,8 +588,8 @@ export class QuickBar extends LitElement {
          }
        }

-        ha-icon,
-        ha-svg-icon {
+        ha-icon.entity,
+        ha-svg-icon.entity {
          margin-left: 20px;
        }

@ -516,6 +598,29 @@ export class QuickBar extends LitElement {
          color: var(--primary-text-color);
        }

+        span.command-category {
+          font-weight: bold;
+          padding: 3px;
+          display: inline-flex;
+          border-radius: 6px;
+          color: black;
+        }
+
+        .command-category.reload {
+          --ha-chip-background-color: #cddc39;
+          --ha-chip-text-color: black;
+        }
+
+        .command-category.navigation {
+          --ha-chip-background-color: var(--light-primary-color);
+          --ha-chip-text-color: black;
+        }
+
+        .command-category.server_control {
+          --ha-chip-background-color: var(--warning-color);
+          --ha-chip-text-color: black;
+        }
+
        .uni-virtualizer-host {
          display: block;
          position: relative;
--- a/src/panels/config/devices/device-detail/ha-device-automation-card.ts
+++ b/src/panels/config/devices/device-detail/ha-device-automation-card.ts
@ -7,7 +7,7 @@ import {
  TemplateResult,
 } from "lit-element";
 import "../../../../components/ha-card";
-import "../../../../components/ha-chips";
+import "../../../../components/ha-chip-set";
 import { showAutomationEditor } from "../../../../data/automation";
 import {
  DeviceAction,
@ -65,13 +65,13 @@ export abstract class HaDeviceAutomationCard<
        ${this.hass.localize(this.headerKey)}
      </h3>
      <div class="content">
-        <ha-chips
+        <ha-chip-set
          @chip-clicked=${this._handleAutomationClicked}
          .items=${this.automations.map((automation) =>
            this._localizeDeviceAutomation(this.hass, automation)
          )}
        >
-        </ha-chips>
+        </ha-chip-set>
      </div>
    `;
  }
--- a/src/resources/styles.ts
+++ b/src/resources/styles.ts
@ -92,6 +92,7 @@ export const derivedStyles = {
  "mdc-button-disabled-ink-color": "var(--disabled-text-color)",
  "mdc-button-outline-color": "var(--divider-color)",
  "mdc-dialog-scroll-divider-color": "var(--divider-color)",
+  "chip-background-color": "rgba(var(--rgb-primary-text-color), 0.15)",
 };

 export const buttonLinkStyle = css`
--- a/src/translations/en.json
+++ b/src/translations/en.json
@ -546,12 +546,16 @@
            "rpi_gpio": "[%key:ui::panel::config::server_control::section::reloading::rpi_gpio%]"
          },
          "server_control": {
-            "perform_action": "{action} Server",
+            "perform_action": "{action} server",
            "restart": "[%key:ui::panel::config::server_control::section::server_management::restart%]",
            "stop": "[%key:ui::panel::config::server_control::section::server_management::stop%]"
          },
+          "types": {
+            "reload": "Reload",
+            "navigation": "Navigate",
+            "server_control": "Server"
+          },
          "navigation": {
-            "navigate_to": "Navigate to {panel}",
            "logs": "[%key:ui::panel::config::logs::caption%]",
            "automation": "[%key:ui::panel::config::automation::caption%]",
            "script": "[%key:ui::panel::config::script::caption%]",
@ -1107,37 +1111,37 @@
            "reloading": {
              "heading": "YAML configuration reloading",
              "introduction": "Some parts of Home Assistant can reload without requiring a restart. Hitting reload will unload their current YAML configuration and load the new one.",
-              "reload": "Reload {domain}",
-              "core": "Reload location & customizations",
-              "group": "Reload groups, group entities, and group notify services",
-              "automation": "Reload automations",
-              "script": "Reload scripts",
-              "scene": "Reload scenes",
-              "person": "Reload people",
-              "zone": "Reload zones",
-              "input_boolean": "Reload input booleans",
-              "input_text": "Reload input texts",
-              "input_number": "Reload input numbers",
-              "input_datetime": "Reload input date times",
-              "input_select": "Reload input selects",
-              "template": "Reload template entities",
-              "universal": "Reload universal media player entities",
-              "rest": "Reload rest entities, and rest notify services",
-              "command_line": "Reload command line entities",
-              "filter": "Reload filter entities",
-              "statistics": "Reload statistics entities",
-              "generic": "Reload generic IP camera entities",
-              "generic_thermostat": "Reload generic thermostat entities",
-              "homekit": "Reload HomeKit",
-              "min_max": "Reload min/max entities",
-              "history_stats": "Reload history stats entities",
-              "trend": "Reload trend entities",
-              "ping": "Reload ping binary sensor entities",
-              "filesize": "Reload file size entities",
-              "telegram": "Reload telegram notify services",
-              "smtp": "Reload SMTP notify services",
-              "mqtt": "Reload manually configured MQTT entities",
-              "rpi_gpio": "Reload Raspberry Pi GPIO entities"
+              "reload": "{domain}",
+              "core": "Location & customizations",
+              "group": "Groups, group entities, and notify services",
+              "automation": "Automations",
+              "script": "Scripts",
+              "scene": "Scenes",
+              "person": "People",
+              "zone": "Zones",
+              "input_boolean": "Input booleans",
+              "input_text": "Input texts",
+              "input_number": "Input numbers",
+              "input_datetime": "Input date times",
+              "input_select": "Input selects",
+              "template": "Template entities",
+              "universal": "Universal media player entities",
+              "rest": "Rest entities and notify services",
+              "command_line": "Command line entities",
+              "filter": "Filter entities",
+              "statistics": "Statistics entities",
+              "generic": "Generic IP camera entities",
+              "generic_thermostat": "Generic thermostat entities",
+              "homekit": "HomeKit",
+              "min_max": "Min/max entities",
+              "history_stats": "History stats entities",
+              "trend": "Trend entities",
+              "ping": "Ping binary sensor entities",
+              "filesize": "File size entities",
+              "telegram": "Telegram notify services",
+              "smtp": "SMTP notify services",
+              "mqtt": "Manually configured MQTT entities",
+              "rpi_gpio": "Raspberry Pi GPIO entities"
            },
            "server_management": {
              "heading": "Server management",
--- a/test-mocha/common/string/sequence_matching.test.ts
+++ b/test-mocha/common/string/sequence_matching.test.ts
@ -80,10 +80,14 @@ describe("fuzzySequentialMatch", () => {

 describe("fuzzyFilterSort", () => {
  const filter = "ticker";
-  const item1 = { text: "automation.ticker", altText: "Stocks", score: 0 };
-  const item2 = { text: "sensor.ticker", altText: "Stocks up", score: 0 };
+  const item1 = {
+    filterText: "automation.ticker",
+    altText: "Stocks",
+    score: 0,
+  };
+  const item2 = { filterText: "sensor.ticker", altText: "Stocks up", score: 0 };
  const item3 = {
-    text: "automation.check_router",
+    filterText: "automation.check_router",
    altText: "Timer Check Router",
    score: 0,
  };