CSS tweaks

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

@@ -12,12 +12,14 @@ import { unsafeHTML } from "lit-html/directives/unsafe-html";
  * @return {number} Score representing how well the word matches the filter. Return of 0 means no match.
  */
 
-export const fuzzySequentialMatch = (
+type FuzzySequentialMatcher = (
   filter: string,
   item: ScorableTextItem
-) => {
+) => ScorableTextItem | undefined;
+
+export const fuzzySequentialMatch: FuzzySequentialMatcher = (filter, item) => {
   let topScore = Number.NEGATIVE_INFINITY;
-  const decoratedWords: TemplateResult[][] = [];
+  const decoratedStrings: TemplateResult[][] = [];
 
   for (const word of item.strings) {
     const scores = fuzzyScore(
@@ -30,7 +32,7 @@ export const fuzzySequentialMatch = (
       true
     );
 
-    decoratedWords.push(decorateMatch(word, scores));
+    decoratedStrings.push(decorateMatch(word, scores));
 
     if (!scores) {
       continue;
@@ -53,7 +55,7 @@ export const fuzzySequentialMatch = (
   return {
     score: topScore,
     strings: item.strings,
-    decoratedWords,
+    decoratedStrings,
   };
 };
 
@@ -73,7 +75,7 @@ export const fuzzySequentialMatch = (
 export interface ScorableTextItem {
   score?: number;
   strings: string[];
-  decoratedWords?: TemplateResult[][];
+  decoratedStrings?: TemplateResult[][];
 }
 
 type FuzzyFilterSort = <T extends ScorableTextItem>(
@@ -87,7 +89,7 @@ export const fuzzyFilterSort: FuzzyFilterSort = (filter, items) => {
       const match = fuzzySequentialMatch(filter, item);
 
       item.score = match?.score;
-      item.decoratedWords = match?.decoratedWords;
+      item.decoratedStrings = match?.decoratedStrings;
 
       return item;
     })

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

@@ -258,7 +258,7 @@ export class QuickBar extends LitElement {
               class="entity"
               slot="graphic"
             ></ha-icon>`}
-        <span
+        <span class="item-text primary"
           >${item.decoratedWords
             ? item.decoratedWords[0]
             : item.primaryText}</span
@@ -689,7 +689,9 @@ export class QuickBar extends LitElement {
           color: #0051ff;
         }
 
-        span.command-text span.highlight-letter {
+        span.command-text span.highlight-letter,
+        span.item-text.secondary span.highlight-letter,
+        span.item-text.primary span.highlight-letter {
           font-weight: bold;
           color: #0098ff;
         }

test-mocha/common/string/sequence_matching.test.ts

@@ -6,22 +6,35 @@ import {
   ScorableTextItem,
 } from "../../../src/common/string/filter/sequence-matching";
 
+type CreateExpectation = (
+  pattern: string,
+  score: ScorableTextItem["score"],
+  strings?: ScorableTextItem["strings"],
+  decoratedStrings?: ScorableTextItem["decoratedStrings"]
+) => {
+  pattern: string;
+  expected: ScorableTextItem;
+};
+
+const createExpectation: CreateExpectation = (
+  pattern,
+  score,
+  strings = [],
+  decoratedStrings = []
+) => ({
+  pattern,
+  expected: {
+    score,
+    strings,
+    decoratedStrings,
+  },
+});
+
 describe("fuzzySequentialMatch", () => {
   const item: ScorableTextItem = {
     strings: ["automation.ticker", "Stocks"],
   };
 
-  const createExpectation: (
-    pattern,
-    expected
-  ) => {
-    pattern: string;
-    expected: string | number | undefined;
-  } = (pattern, expected) => ({
-    pattern,
-    expected,
-  });
-
   const shouldMatchEntity = [
     createExpectation("automation.ticker", 131),
     createExpectation("automation.ticke", 121),