Fix quick bar dark mode contrast, filter returning all items, no primary text (#7430)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

src/common/string/filter/sequence-matching.ts

@@ -59,7 +59,7 @@ export const fuzzyFilterSort: FuzzyFilterSort = (filter, items) => {
         : fuzzySequentialMatch(filter, item.text);
       return item;
     })
-    .filter((item) => item.score === undefined || item.score > 0)
+    .filter((item) => item.score !== undefined && item.score > 0)
     .sort(({ score: scoreA = 0 }, { score: scoreB = 0 }) =>
       scoreA > scoreB ? -1 : scoreA < scoreB ? 1 : 0
     );

src/dialogs/quick-bar/ha-quick-bar.ts

@@ -61,8 +61,6 @@ export class QuickBar extends LitElement {
 
   @internalProperty() private _commandMode = false;
 
-  @internalProperty() private _commandTriggered = -1;
-
   @internalProperty() private _done = false;
 
   @query("search-input", false) private _filterInputField?: HTMLElement;
@@ -82,7 +80,6 @@ export class QuickBar extends LitElement {
     this._focusSet = false;
     this._filter = "";
     this._search = "";
-    this._commandTriggered = -1;
     this._items = [];
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
@@ -137,7 +134,6 @@ export class QuickBar extends LitElement {
               active
             ></ha-circular-progress>`
           : html`<mwc-list
-              activatable
               @rangechange=${this._handleRangeChanged}
               @keydown=${this._handleListItemKeyDown}
               @selected=${this._handleSelected}
@@ -192,19 +188,12 @@ export class QuickBar extends LitElement {
               <span slot="secondary" class="secondary">${item.altText}</span>
             `
           : null}
-        ${this._commandTriggered === index
-          ? html`<ha-circular-progress
-              size="small"
-              active
-              slot="meta"
-            ></ha-circular-progress>`
-          : null}
       </mwc-list-item>
     `;
   }
 
   private async processItemAndCloseDialog(item: QuickBarItem, index: number) {
-    this._commandTriggered = index;
+    this._addSpinnerToCommandItem(index);
 
     await item.action();
     this.closeDialog();
@@ -234,6 +223,14 @@ export class QuickBar extends LitElement {
     return this.renderRoot.querySelector(`mwc-list-item[index="${index}"]`);
   }
 
+  private _addSpinnerToCommandItem(index: number): void {
+    const spinner = document.createElement("ha-circular-progress");
+    spinner.size = "small";
+    spinner.slot = "meta";
+    spinner.active = true;
+    this._getItemAtIndex(index)?.appendChild(spinner);
+  }
+
   private _handleSearchChange(ev: CustomEvent): void {
     const newFilter = ev.detail.value;
     const oldCommandMode = this._commandMode;
@@ -303,7 +300,7 @@ export class QuickBar extends LitElement {
   private _generateEntityItems(): QuickBarItem[] {
     return Object.keys(this.hass.states)
       .map((entityId) => ({
-        text: computeStateName(this.hass.states[entityId]),
+        text: computeStateName(this.hass.states[entityId]) || entityId,
         altText: entityId,
         icon: domainIcon(computeDomain(entityId), this.hass.states[entityId]),
         action: () => fireEvent(this, "hass-more-info", { entityId }),

src/resources/styles.ts

@@ -12,6 +12,7 @@ export const darkStyles = {
   "switch-unchecked-button-color": "#999999",
   "switch-unchecked-track-color": "#9b9b9b",
   "divider-color": "rgba(225, 225, 225, .12)",
+  "mdc-ripple-color": "#AAAAAA",
   "codemirror-keyword": "#C792EA",
   "codemirror-operator": "#89DDFF",
   "codemirror-variable": "#f07178",