Bumped version to 20220502.0

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,4 +1,4 @@
-name: Report a bug with the UI / Dashboards
+name: Report a bug with the UI, Frontend or Lovelace
 description: Report an issue related to the Home Assistant frontend.
 labels: bug
 body:
@@ -9,7 +9,7 @@ body:
 
         If you have a feature or enhancement request for the frontend, please [start an discussion][fr] instead of creating an issue.
 
-        **Please not not report issues for custom cards.**
+        **Please not not report issues for custom Lovelace cards.**
 
         [fr]: https://github.com/home-assistant/frontend/discussions
         [releases]: https://github.com/home-assistant/home-assistant/releases

.github/ISSUE_TEMPLATE/config.yml

@@ -1,17 +1,17 @@
 blank_issues_enabled: false
 contact_links:
-  - name: Request a feature for the UI / Dashboards
+  - name: Request a feature for the UI, Frontend or Lovelace
     url: https://github.com/home-assistant/frontend/discussions/category_choices
     about: Request an new feature for the Home Assistant frontend.
-  - name: Report a bug that is NOT related to the UI / Dashboards
+  - name: Report a bug that is NOT related to the UI, Frontend or Lovelace
     url: https://github.com/home-assistant/core/issues
-    about: This is the issue tracker for our frontend. Please report other issues in the backend ("core") repository.
+    about: This is the issue tracker for our frontend. Please report other issues with the backend repository.
   - name: Report incorrect or missing information on our website
     url: https://github.com/home-assistant/home-assistant.io/issues
     about: Our documentation has its own issue tracker. Please report issues with the website there.
   - name: I have a question or need support
     url: https://www.home-assistant.io/help
-    about: We use GitHub for tracking bugs. Check our website for resources on getting help.
+    about: We use GitHub for tracking bugs, check our website for resources on getting help.
   - name: I'm unsure where to go
     url: https://www.home-assistant.io/join-chat
     about: If you are unsure where to go, then joining our chat is recommended; Just ask!

hassio/src/addon-store/hassio-addon-repository.ts

@@ -68,7 +68,6 @@ class HassioAddonRepositoryEl extends LitElement {
           ${addons.map(
             (addon) => html`
               <ha-card
-                outlined
                 .addon=${addon}
                 class=${addon.available ? "" : "not_available"}
                 @click=${this._addonTapped}

hassio/src/addon-view/config/hassio-addon-audio.ts

@@ -50,7 +50,6 @@ class HassioAddonAudio extends LitElement {
   protected render(): TemplateResult {
     return html`
       <ha-card
-        outlined
         .header=${this.supervisor.localize("addon.configuration.audio.header")}
       >
         <div class="card-content">

hassio/src/addon-view/config/hassio-addon-config.ts

@@ -162,7 +162,7 @@ class HassioAddonConfig extends LitElement {
         );
     return html`
       <h1>${this.addon.name}</h1>
-      <ha-card outlined>
+      <ha-card>
         <div class="header">
           <h2>
             ${this.supervisor.localize("addon.configuration.options.header")}

hassio/src/addon-view/config/hassio-addon-network.ts

@@ -58,7 +58,6 @@ class HassioAddonNetwork extends LitElement {
 
     return html`
       <ha-card
-        outlined
         .header=${this.supervisor.localize(
           "addon.configuration.network.header"
         )}

hassio/src/addon-view/documentation/hassio-addon-documentation-tab.ts

@@ -38,7 +38,7 @@ class HassioAddonDocumentationDashboard extends LitElement {
     }
     return html`
       <div class="content">
-        <ha-card outlined>
+        <ha-card>
           ${this._error
             ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
             : ""}

hassio/src/addon-view/info/hassio-addon-info.ts

@@ -166,7 +166,7 @@ class HassioAddonInfo extends LitElement {
           `
         : ""}
 
-      <ha-card outlined>
+      <ha-card>
         <div class="card-content">
           <div class="addon-header">
             ${!this.narrow ? this.addon.name : ""}
@@ -649,7 +649,7 @@ class HassioAddonInfo extends LitElement {
 
       ${this.addon.long_description
         ? html`
-            <ha-card outlined>
+            <ha-card>
               <div class="card-content">
                 <ha-markdown
                   .content=${this.addon.long_description}

hassio/src/addon-view/log/hassio-addon-logs.ts

@@ -34,7 +34,7 @@ class HassioAddonLogs extends LitElement {
   protected render(): TemplateResult {
     return html`
       <h1>${this.addon.name}</h1>
-      <ha-card outlined>
+      <ha-card>
         ${this._error
           ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
           : ""}

hassio/src/dashboard/hassio-addons.ts

@@ -26,7 +26,7 @@ class HassioAddons extends LitElement {
         <div class="card-group">
           ${!this.supervisor.supervisor.addons?.length
             ? html`
-                <ha-card outlined>
+                <ha-card>
                   <div class="card-content">
                     <button class="link" @click=${this._openStore}>
                       ${this.supervisor.localize("dashboard.no_addons")}
@@ -38,11 +38,7 @@ class HassioAddons extends LitElement {
                 .sort((a, b) => caseInsensitiveStringCompare(a.name, b.name))
                 .map(
                   (addon) => html`
-                    <ha-card
-                      outlined
-                      .addon=${addon}
-                      @click=${this._addonTapped}
-                    >
+                    <ha-card .addon=${addon} @click=${this._addonTapped}>
                       <div class="card-content">
                         <hassio-card-content
                           .hass=${this.hass}

hassio/src/dashboard/hassio-update.ts

@@ -85,7 +85,7 @@ export class HassioUpdate extends LitElement {
       return html``;
     }
     return html`
-      <ha-card outlined>
+      <ha-card>
         <div class="card-content">
           <div class="icon">
             <ha-svg-icon .path=${mdiHomeAssistant}></ha-svg-icon>

hassio/src/system/hassio-core-info.ts

@@ -48,7 +48,7 @@ class HassioCoreInfo extends LitElement {
     ];
 
     return html`
-      <ha-card header="Core" outlined>
+      <ha-card header="Core">
         <div class="card-content">
           <div>
             <ha-settings-row>

hassio/src/system/hassio-host-info.ts

@@ -66,7 +66,7 @@ class HassioHostInfo extends LitElement {
       },
     ];
     return html`
-      <ha-card header="Host" outlined>
+      <ha-card header="Host">
         <div class="card-content">
           <div>
             ${this.supervisor.host.features.includes("hostname")

hassio/src/system/hassio-supervisor-info.ts

@@ -57,7 +57,7 @@ class HassioSupervisorInfo extends LitElement {
       },
     ];
     return html`
-      <ha-card header="Supervisor" outlined>
+      <ha-card header="Supervisor">
         <div class="card-content">
           <div>
             <ha-settings-row>

hassio/src/system/hassio-supervisor-log.ts

@@ -65,7 +65,7 @@ class HassioSupervisorLog extends LitElement {
 
   protected render(): TemplateResult | void {
     return html`
-      <ha-card outlined>
+      <ha-card>
         ${this._error
           ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
           : ""}

hassio/src/update-available/update-available-card.ts

@@ -128,7 +128,6 @@ class UpdateAvailableCard extends LitElement {
 
     return html`
       <ha-card
-        outlined
         .header=${this.supervisor.localize("update_available.update_name", {
           name: this._name,
         })}

package.json

@@ -106,6 +106,7 @@
     "deep-clone-simple": "^1.1.1",
     "deep-freeze": "^0.0.1",
     "fuse.js": "^6.0.0",
+    "fuzzysort": "^1.2.1",
     "google-timezones-json": "^1.0.2",
     "hls.js": "^1.1.5",
     "home-assistant-js-websocket": "^7.0.3",

setup.cfg

@@ -1,6 +1,6 @@
 [metadata]
 name         = home-assistant-frontend
-version      = 20220504.0
+version      = 20220502.0
 author       = The Home Assistant Authors
 author_email = hello@home-assistant.io
 license      = Apache-2.0

src/common/string/filter/char-code.ts

@@ -1,244 +0,0 @@
-// MIT License
-
-// Copyright (c) 2015 - present Microsoft Corporation
-
-// Permission is hereby granted, free of charge, to any person obtaining a copy
-// of this software and associated documentation files (the "Software"), to deal
-// in the Software without restriction, including without limitation the rights
-// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-// copies of the Software, and to permit persons to whom the Software is
-// furnished to do so, subject to the following conditions:
-
-// The above copyright notice and this permission notice shall be included in all
-// copies or substantial portions of the Software.
-
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-// SOFTWARE.
-
-// Names from https://blog.codinghorror.com/ascii-pronunciation-rules-for-programmers/
-
-/**
- * An inlined enum containing useful character codes (to be used with String.charCodeAt).
- * Please leave the const keyword such that it gets inlined when compiled to JavaScript!
- */
-export enum CharCode {
-  Null = 0,
-  /**
-   * The `\b` character.
-   */
-  Backspace = 8,
-  /**
-   * The `\t` character.
-   */
-  Tab = 9,
-  /**
-   * The `\n` character.
-   */
-  LineFeed = 10,
-  /**
-   * The `\r` character.
-   */
-  CarriageReturn = 13,
-  Space = 32,
-  /**
-   * The `!` character.
-   */
-  ExclamationMark = 33,
-  /**
-   * The `"` character.
-   */
-  DoubleQuote = 34,
-  /**
-   * The `#` character.
-   */
-  Hash = 35,
-  /**
-   * The `$` character.
-   */
-  DollarSign = 36,
-  /**
-   * The `%` character.
-   */
-  PercentSign = 37,
-  /**
-   * The `&` character.
-   */
-  Ampersand = 38,
-  /**
-   * The `'` character.
-   */
-  SingleQuote = 39,
-  /**
-   * The `(` character.
-   */
-  OpenParen = 40,
-  /**
-   * The `)` character.
-   */
-  CloseParen = 41,
-  /**
-   * The `*` character.
-   */
-  Asterisk = 42,
-  /**
-   * The `+` character.
-   */
-  Plus = 43,
-  /**
-   * The `,` character.
-   */
-  Comma = 44,
-  /**
-   * The `-` character.
-   */
-  Dash = 45,
-  /**
-   * The `.` character.
-   */
-  Period = 46,
-  /**
-   * The `/` character.
-   */
-  Slash = 47,
-
-  Digit0 = 48,
-  Digit1 = 49,
-  Digit2 = 50,
-  Digit3 = 51,
-  Digit4 = 52,
-  Digit5 = 53,
-  Digit6 = 54,
-  Digit7 = 55,
-  Digit8 = 56,
-  Digit9 = 57,
-
-  /**
-   * The `:` character.
-   */
-  Colon = 58,
-  /**
-   * The `;` character.
-   */
-  Semicolon = 59,
-  /**
-   * The `<` character.
-   */
-  LessThan = 60,
-  /**
-   * The `=` character.
-   */
-  Equals = 61,
-  /**
-   * The `>` character.
-   */
-  GreaterThan = 62,
-  /**
-   * The `?` character.
-   */
-  QuestionMark = 63,
-  /**
-   * The `@` character.
-   */
-  AtSign = 64,
-
-  A = 65,
-  B = 66,
-  C = 67,
-  D = 68,
-  E = 69,
-  F = 70,
-  G = 71,
-  H = 72,
-  I = 73,
-  J = 74,
-  K = 75,
-  L = 76,
-  M = 77,
-  N = 78,
-  O = 79,
-  P = 80,
-  Q = 81,
-  R = 82,
-  S = 83,
-  T = 84,
-  U = 85,
-  V = 86,
-  W = 87,
-  X = 88,
-  Y = 89,
-  Z = 90,
-
-  /**
-   * The `[` character.
-   */
-  OpenSquareBracket = 91,
-  /**
-   * The `\` character.
-   */
-  Backslash = 92,
-  /**
-   * The `]` character.
-   */
-  CloseSquareBracket = 93,
-  /**
-   * The `^` character.
-   */
-  Caret = 94,
-  /**
-   * The `_` character.
-   */
-  Underline = 95,
-  /**
-   * The ``(`)`` character.
-   */
-  BackTick = 96,
-
-  a = 97,
-  b = 98,
-  c = 99,
-  d = 100,
-  e = 101,
-  f = 102,
-  g = 103,
-  h = 104,
-  i = 105,
-  j = 106,
-  k = 107,
-  l = 108,
-  m = 109,
-  n = 110,
-  o = 111,
-  p = 112,
-  q = 113,
-  r = 114,
-  s = 115,
-  t = 116,
-  u = 117,
-  v = 118,
-  w = 119,
-  x = 120,
-  y = 121,
-  z = 122,
-
-  /**
-   * The `{` character.
-   */
-  OpenCurlyBrace = 123,
-  /**
-   * The `|` character.
-   */
-  Pipe = 124,
-  /**
-   * The `}` character.
-   */
-  CloseCurlyBrace = 125,
-  /**
-   * The `~` character.
-   */
-  Tilde = 126,
-}

src/common/string/filter/filter.ts

@@ -1,551 +0,0 @@
-/* eslint-disable no-console */
-// MIT License
-
-// Copyright (c) 2015 - present Microsoft Corporation
-
-// Permission is hereby granted, free of charge, to any person obtaining a copy
-// of this software and associated documentation files (the "Software"), to deal
-// in the Software without restriction, including without limitation the rights
-// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-// copies of the Software, and to permit persons to whom the Software is
-// furnished to do so, subject to the following conditions:
-
-// The above copyright notice and this permission notice shall be included in all
-// copies or substantial portions of the Software.
-
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-// SOFTWARE.
-
-import { CharCode } from "./char-code";
-
-const _debug = false;
-
-export interface Match {
-  start: number;
-  end: number;
-}
-
-const _maxLen = 128;
-
-function initTable() {
-  const table: number[][] = [];
-  const row: number[] = [];
-  for (let i = 0; i <= _maxLen; i++) {
-    row[i] = 0;
-  }
-  for (let i = 0; i <= _maxLen; i++) {
-    table.push(row.slice(0));
-  }
-  return table;
-}
-
-function isSeparatorAtPos(value: string, index: number): boolean {
-  if (index < 0 || index >= value.length) {
-    return false;
-  }
-  const code = value.codePointAt(index);
-  switch (code) {
-    case CharCode.Underline:
-    case CharCode.Dash:
-    case CharCode.Period:
-    case CharCode.Space:
-    case CharCode.Slash:
-    case CharCode.Backslash:
-    case CharCode.SingleQuote:
-    case CharCode.DoubleQuote:
-    case CharCode.Colon:
-    case CharCode.DollarSign:
-    case CharCode.LessThan:
-    case CharCode.OpenParen:
-    case CharCode.OpenSquareBracket:
-      return true;
-    case undefined:
-      return false;
-    default:
-      if (isEmojiImprecise(code)) {
-        return true;
-      }
-      return false;
-  }
-}
-
-function isWhitespaceAtPos(value: string, index: number): boolean {
-  if (index < 0 || index >= value.length) {
-    return false;
-  }
-  const code = value.charCodeAt(index);
-  switch (code) {
-    case CharCode.Space:
-    case CharCode.Tab:
-      return true;
-    default:
-      return false;
-  }
-}
-
-function isUpperCaseAtPos(pos: number, word: string, wordLow: string): boolean {
-  return word[pos] !== wordLow[pos];
-}
-
-export function isPatternInWord(
-  patternLow: string,
-  patternPos: number,
-  patternLen: number,
-  wordLow: string,
-  wordPos: number,
-  wordLen: number,
-  fillMinWordPosArr = false
-): boolean {
-  while (patternPos < patternLen && wordPos < wordLen) {
-    if (patternLow[patternPos] === wordLow[wordPos]) {
-      if (fillMinWordPosArr) {
-        // Remember the min word position for each pattern position
-        _minWordMatchPos[patternPos] = wordPos;
-      }
-      patternPos += 1;
-    }
-    wordPos += 1;
-  }
-  return patternPos === patternLen; // pattern must be exhausted
-}
-
-enum Arrow {
-  Diag = 1,
-  Left = 2,
-  LeftLeft = 3,
-}
-
-/**
- * An array representing a fuzzy match.
- *
- * 0. the score
- * 1. the offset at which matching started
- * 2. `<match_pos_N>`
- * 3. `<match_pos_1>`
- * 4. `<match_pos_0>` etc
- */
-// export type FuzzyScore = [score: number, wordStart: number, ...matches: number[]];// [number, number, number];
-export type FuzzyScore = Array<number>;
-
-export function fuzzyScore(
-  pattern: string,
-  patternLow: string,
-  patternStart: number,
-  word: string,
-  wordLow: string,
-  wordStart: number,
-  firstMatchCanBeWeak: boolean
-): FuzzyScore | undefined {
-  const patternLen = pattern.length > _maxLen ? _maxLen : pattern.length;
-  const wordLen = word.length > _maxLen ? _maxLen : word.length;
-
-  if (
-    patternStart >= patternLen ||
-    wordStart >= wordLen ||
-    patternLen - patternStart > wordLen - wordStart
-  ) {
-    return undefined;
-  }
-
-  // Run a simple check if the characters of pattern occur
-  // (in order) at all in word. If that isn't the case we
-  // stop because no match will be possible
-  if (
-    !isPatternInWord(
-      patternLow,
-      patternStart,
-      patternLen,
-      wordLow,
-      wordStart,
-      wordLen,
-      true
-    )
-  ) {
-    return undefined;
-  }
-
-  // Find the max matching word position for each pattern position
-  // NOTE: the min matching word position was filled in above, in the `isPatternInWord` call
-  _fillInMaxWordMatchPos(
-    patternLen,
-    wordLen,
-    patternStart,
-    wordStart,
-    patternLow,
-    wordLow
-  );
-
-  let row: number;
-  let column = 1;
-  let patternPos: number;
-  let wordPos: number;
-
-  const hasStrongFirstMatch = [false];
-
-  // There will be a match, fill in tables
-  for (
-    row = 1, patternPos = patternStart;
-    patternPos < patternLen;
-    row++, patternPos++
-  ) {
-    // Reduce search space to possible matching word positions and to possible access from next row
-    const minWordMatchPos = _minWordMatchPos[patternPos];
-    const maxWordMatchPos = _maxWordMatchPos[patternPos];
-    const nextMaxWordMatchPos =
-      patternPos + 1 < patternLen ? _maxWordMatchPos[patternPos + 1] : wordLen;
-
-    for (
-      column = minWordMatchPos - wordStart + 1, wordPos = minWordMatchPos;
-      wordPos < nextMaxWordMatchPos;
-      column++, wordPos++
-    ) {
-      let score = Number.MIN_SAFE_INTEGER;
-      let canComeDiag = false;
-
-      if (wordPos <= maxWordMatchPos) {
-        score = _doScore(
-          pattern,
-          patternLow,
-          patternPos,
-          patternStart,
-          word,
-          wordLow,
-          wordPos,
-          wordLen,
-          wordStart,
-          _diag[row - 1][column - 1] === 0,
-          hasStrongFirstMatch
-        );
-      }
-
-      let diagScore = 0;
-      if (score !== Number.MAX_SAFE_INTEGER) {
-        canComeDiag = true;
-        diagScore = score + _table[row - 1][column - 1];
-      }
-
-      const canComeLeft = wordPos > minWordMatchPos;
-      const leftScore = canComeLeft
-        ? _table[row][column - 1] + (_diag[row][column - 1] > 0 ? -5 : 0)
-        : 0; // penalty for a gap start
-
-      const canComeLeftLeft =
-        wordPos > minWordMatchPos + 1 && _diag[row][column - 1] > 0;
-      const leftLeftScore = canComeLeftLeft
-        ? _table[row][column - 2] + (_diag[row][column - 2] > 0 ? -5 : 0)
-        : 0; // penalty for a gap start
-
-      if (
-        canComeLeftLeft &&
-        (!canComeLeft || leftLeftScore >= leftScore) &&
-        (!canComeDiag || leftLeftScore >= diagScore)
-      ) {
-        // always prefer choosing left left to jump over a diagonal because that means a match is earlier in the word
-        _table[row][column] = leftLeftScore;
-        _arrows[row][column] = Arrow.LeftLeft;
-        _diag[row][column] = 0;
-      } else if (canComeLeft && (!canComeDiag || leftScore >= diagScore)) {
-        // always prefer choosing left since that means a match is earlier in the word
-        _table[row][column] = leftScore;
-        _arrows[row][column] = Arrow.Left;
-        _diag[row][column] = 0;
-      } else if (canComeDiag) {
-        _table[row][column] = diagScore;
-        _arrows[row][column] = Arrow.Diag;
-        _diag[row][column] = _diag[row - 1][column - 1] + 1;
-      } else {
-        throw new Error(`not possible`);
-      }
-    }
-  }
-
-  if (_debug) {
-    printTables(pattern, patternStart, word, wordStart);
-  }
-
-  if (!hasStrongFirstMatch[0] && !firstMatchCanBeWeak) {
-    return undefined;
-  }
-
-  row--;
-  column--;
-
-  const result: FuzzyScore = [_table[row][column], wordStart];
-
-  let backwardsDiagLength = 0;
-  let maxMatchColumn = 0;
-
-  while (row >= 1) {
-    // Find the column where we go diagonally up
-    let diagColumn = column;
-    do {
-      const arrow = _arrows[row][diagColumn];
-      if (arrow === Arrow.LeftLeft) {
-        diagColumn -= 2;
-      } else if (arrow === Arrow.Left) {
-        diagColumn -= 1;
-      } else {
-        // found the diagonal
-        break;
-      }
-    } while (diagColumn >= 1);
-
-    // Overturn the "forwards" decision if keeping the "backwards" diagonal would give a better match
-    if (
-      backwardsDiagLength > 1 && // only if we would have a contiguous match of 3 characters
-      patternLow[patternStart + row - 1] === wordLow[wordStart + column - 1] && // only if we can do a contiguous match diagonally
-      !isUpperCaseAtPos(diagColumn + wordStart - 1, word, wordLow) && // only if the forwards chose diagonal is not an uppercase
-      backwardsDiagLength + 1 > _diag[row][diagColumn] // only if our contiguous match would be longer than the "forwards" contiguous match
-    ) {
-      diagColumn = column;
-    }
-
-    if (diagColumn === column) {
-      // this is a contiguous match
-      backwardsDiagLength++;
-    } else {
-      backwardsDiagLength = 1;
-    }
-
-    if (!maxMatchColumn) {
-      // remember the last matched column
-      maxMatchColumn = diagColumn;
-    }
-
-    row--;
-    column = diagColumn - 1;
-    result.push(column);
-  }
-
-  if (wordLen === patternLen) {
-    // the word matches the pattern with all characters!
-    // giving the score a total match boost (to come up ahead other words)
-    result[0] += 2;
-  }
-
-  // Add 1 penalty for each skipped character in the word
-  const skippedCharsCount = maxMatchColumn - patternLen;
-  result[0] -= skippedCharsCount;
-
-  return result;
-}
-
-function _doScore(
-  pattern: string,
-  patternLow: string,
-  patternPos: number,
-  patternStart: number,
-  word: string,
-  wordLow: string,
-  wordPos: number,
-  wordLen: number,
-  wordStart: number,
-  newMatchStart: boolean,
-  outFirstMatchStrong: boolean[]
-): number {
-  if (patternLow[patternPos] !== wordLow[wordPos]) {
-    return Number.MIN_SAFE_INTEGER;
-  }
-
-  let score = 1;
-  let isGapLocation = false;
-  if (wordPos === patternPos - patternStart) {
-    // common prefix: `foobar <-> foobaz`
-    //                            ^^^^^
-    score = pattern[patternPos] === word[wordPos] ? 7 : 5;
-  } else if (
-    isUpperCaseAtPos(wordPos, word, wordLow) &&
-    (wordPos === 0 || !isUpperCaseAtPos(wordPos - 1, word, wordLow))
-  ) {
-    // hitting upper-case: `foo <-> forOthers`
-    //                              ^^ ^
-    score = pattern[patternPos] === word[wordPos] ? 7 : 5;
-    isGapLocation = true;
-  } else if (
-    isSeparatorAtPos(wordLow, wordPos) &&
-    (wordPos === 0 || !isSeparatorAtPos(wordLow, wordPos - 1))
-  ) {
-    // hitting a separator: `. <-> foo.bar`
-    //                                ^
-    score = 5;
-  } else if (
-    isSeparatorAtPos(wordLow, wordPos - 1) ||
-    isWhitespaceAtPos(wordLow, wordPos - 1)
-  ) {
-    // post separator: `foo <-> bar_foo`
-    //                              ^^^
-    score = 5;
-    isGapLocation = true;
-  }
-
-  if (score > 1 && patternPos === patternStart) {
-    outFirstMatchStrong[0] = true;
-  }
-
-  if (!isGapLocation) {
-    isGapLocation =
-      isUpperCaseAtPos(wordPos, word, wordLow) ||
-      isSeparatorAtPos(wordLow, wordPos - 1) ||
-      isWhitespaceAtPos(wordLow, wordPos - 1);
-  }
-
-  //
-  if (patternPos === patternStart) {
-    // first character in pattern
-    if (wordPos > wordStart) {
-      // the first pattern character would match a word character that is not at the word start
-      // so introduce a penalty to account for the gap preceding this match
-      score -= isGapLocation ? 3 : 5;
-    }
-  } else if (newMatchStart) {
-    // this would be the beginning of a new match (i.e. there would be a gap before this location)
-    score += isGapLocation ? 2 : 0;
-  } else {
-    // this is part of a contiguous match, so give it a slight bonus, but do so only if it would not be a prefered gap location
-    score += isGapLocation ? 0 : 1;
-  }
-
-  if (wordPos + 1 === wordLen) {
-    // we always penalize gaps, but this gives unfair advantages to a match that would match the last character in the word
-    // so pretend there is a gap after the last character in the word to normalize things
-    score -= isGapLocation ? 3 : 5;
-  }
-
-  return score;
-}
-
-function printTable(
-  table: number[][],
-  pattern: string,
-  patternLen: number,
-  word: string,
-  wordLen: number
-): string {
-  function pad(s: string, n: number, _pad = " ") {
-    while (s.length < n) {
-      s = _pad + s;
-    }
-    return s;
-  }
-  let ret = ` |   |${word
-    .split("")
-    .map((c) => pad(c, 3))
-    .join("|")}\n`;
-
-  for (let i = 0; i <= patternLen; i++) {
-    if (i === 0) {
-      ret += " |";
-    } else {
-      ret += `${pattern[i - 1]}|`;
-    }
-    ret +=
-      table[i]
-        .slice(0, wordLen + 1)
-        .map((n) => pad(n.toString(), 3))
-        .join("|") + "\n";
-  }
-  return ret;
-}
-
-function printTables(
-  pattern: string,
-  patternStart: number,
-  word: string,
-  wordStart: number
-): void {
-  pattern = pattern.substr(patternStart);
-  word = word.substr(wordStart);
-  console.log(printTable(_table, pattern, pattern.length, word, word.length));
-  console.log(printTable(_arrows, pattern, pattern.length, word, word.length));
-  console.log(printTable(_diag, pattern, pattern.length, word, word.length));
-}
-
-const _minWordMatchPos = initArr(2 * _maxLen); // min word position for a certain pattern position
-const _maxWordMatchPos = initArr(2 * _maxLen); // max word position for a certain pattern position
-const _diag = initTable(); // the length of a contiguous diagonal match
-const _table = initTable();
-const _arrows = <Arrow[][]>initTable();
-
-function initArr(maxLen: number) {
-  const row: number[] = [];
-  for (let i = 0; i <= maxLen; i++) {
-    row[i] = 0;
-  }
-  return row;
-}
-
-function _fillInMaxWordMatchPos(
-  patternLen: number,
-  wordLen: number,
-  patternStart: number,
-  wordStart: number,
-  patternLow: string,
-  wordLow: string
-) {
-  let patternPos = patternLen - 1;
-  let wordPos = wordLen - 1;
-  while (patternPos >= patternStart && wordPos >= wordStart) {
-    if (patternLow[patternPos] === wordLow[wordPos]) {
-      _maxWordMatchPos[patternPos] = wordPos;
-      patternPos--;
-    }
-    wordPos--;
-  }
-}
-
-export interface FuzzyScorer {
-  (
-    pattern: string,
-    lowPattern: string,
-    patternPos: number,
-    word: string,
-    lowWord: string,
-    wordPos: number,
-    firstMatchCanBeWeak: boolean
-  ): FuzzyScore | undefined;
-}
-
-export function createMatches(score: undefined | FuzzyScore): Match[] {
-  if (typeof score === "undefined") {
-    return [];
-  }
-  const res: Match[] = [];
-  const wordPos = score[1];
-  for (let i = score.length - 1; i > 1; i--) {
-    const pos = score[i] + wordPos;
-    const last = res[res.length - 1];
-    if (last && last.end === pos) {
-      last.end = pos + 1;
-    } else {
-      res.push({ start: pos, end: pos + 1 });
-    }
-  }
-  return res;
-}
-
-/**
- * A fast function (therefore imprecise) to check if code points are emojis.
- * Generated using https://github.com/alexdima/unicode-utils/blob/master/generate-emoji-test.js
- */
-export function isEmojiImprecise(x: number): boolean {
-  return (
-    (x >= 0x1f1e6 && x <= 0x1f1ff) ||
-    x === 8986 ||
-    x === 8987 ||
-    x === 9200 ||
-    x === 9203 ||
-    (x >= 9728 && x <= 10175) ||
-    x === 11088 ||
-    x === 11093 ||
-    (x >= 127744 && x <= 128591) ||
-    (x >= 128640 && x <= 128764) ||
-    (x >= 128992 && x <= 129003) ||
-    (x >= 129280 && x <= 129535) ||
-    (x >= 129648 && x <= 129750)
-  );
-}

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

@@ -1,52 +1,4 @@
-import { fuzzyScore } from "./filter";
-
-/**
- * Determine whether a sequence of letters exists in another string,
- *   in that order, allowing for skipping. Ex: "chdr" exists in "chandelier")
- *
- * @param {string} filter - Sequence of letters to check for
- * @param {ScorableTextItem} item - Item against whose strings will be checked
- *
- * @return {number} Score representing how well the word matches the filter. Return of 0 means no match.
- */
-
-export const fuzzySequentialMatch = (
-  filter: string,
-  item: ScorableTextItem
-) => {
-  let topScore = Number.NEGATIVE_INFINITY;
-
-  for (const word of item.strings) {
-    const scores = fuzzyScore(
-      filter,
-      filter.toLowerCase(),
-      0,
-      word,
-      word.toLowerCase(),
-      0,
-      true
-    );
-
-    if (!scores) {
-      continue;
-    }
-
-    // The VS Code implementation of filter returns a 0 for a weak match.
-    // But if .filter() sees a "0", it considers that a failed match and will remove it.
-    // So, we set score to 1 in these cases so the match will be included, and mostly respect correct ordering.
-    const score = scores[0] === 0 ? 1 : scores[0];
-
-    if (score > topScore) {
-      topScore = score;
-    }
-  }
-
-  if (topScore === Number.NEGATIVE_INFINITY) {
-    return undefined;
-  }
-
-  return topScore;
-};
+import fuzzysort from "fuzzysort";
 
 /**
  * An interface that objects must extend in order to use the fuzzy sequence matcher
@@ -66,18 +18,48 @@ export interface ScorableTextItem {
   strings: string[];
 }
 
-type FuzzyFilterSort = <T extends ScorableTextItem>(
+export type FuzzyFilterSort = <T extends ScorableTextItem>(
   filter: string,
   items: T[]
 ) => T[];
 
-export const fuzzyFilterSort: FuzzyFilterSort = (filter, items) =>
-  items
+export function fuzzyMatcher(search: string | null): (string) => boolean {
+  const scorer = fuzzyScorer(search);
+  return (value: string) => scorer([value]) !== Number.NEGATIVE_INFINITY;
+}
+
+export function fuzzyScorer(
+  search: string | null
+): (values: string[]) => number {
+  const searchTerms = (search || "").match(/("[^"]+"|[^"\s]+)/g);
+  if (!searchTerms) {
+    return () => 0;
+  }
+  return (values) =>
+    searchTerms
+      .map((term) => {
+        const resultsForTerm = fuzzysort.go(term, values, {
+          allowTypo: true,
+        });
+        if (resultsForTerm.length > 0) {
+          return Math.max(...resultsForTerm.map((result) => result.score));
+        }
+        return Number.NEGATIVE_INFINITY;
+      })
+      .reduce((partial, current) => partial + current, 0);
+}
+
+export const fuzzySortFilterSort: FuzzyFilterSort = (filter, items) => {
+  const scorer = fuzzyScorer(filter);
+  return items
     .map((item) => {
-      item.score = fuzzySequentialMatch(filter, item);
+      item.score = scorer(item.strings);
       return item;
     })
-    .filter((item) => item.score !== undefined)
+    .filter((item) => item.score !== undefined && item.score > -100000)
     .sort(({ score: scoreA = 0 }, { score: scoreB = 0 }) =>
       scoreA > scoreB ? -1 : scoreA < scoreB ? 1 : 0
     );
+};
+
+export const defaultFuzzyFilterSort = fuzzySortFilterSort;

src/components/data-table/sort_filter_worker.ts

@@ -7,25 +7,26 @@ import type {
   SortableColumnContainer,
   SortingDirection,
 } from "./ha-data-table";
+import { fuzzyMatcher } from "../../common/string/filter/sequence-matching";
 
 const filterData = (
   data: DataTableRowData[],
   columns: SortableColumnContainer,
   filter: string
 ) => {
-  filter = filter.toUpperCase();
+  const matcher = fuzzyMatcher(filter);
   return data.filter((row) =>
     Object.entries(columns).some((columnEntry) => {
       const [key, column] = columnEntry;
       if (column.filterable) {
         if (
-          String(
-            column.filterKey
-              ? row[column.valueColumn || key][column.filterKey]
-              : row[column.valueColumn || key]
+          matcher(
+            String(
+              column.filterKey
+                ? row[column.valueColumn || key][column.filterKey]
+                : row[column.valueColumn || key]
+            )
           )
-            .toUpperCase()
-            .includes(filter)
         ) {
           return true;
         }

src/components/entity/ha-entity-picker.ts

@@ -15,6 +15,7 @@ import type { HaComboBox } from "../ha-combo-box";
 import "../ha-icon-button";
 import "../ha-svg-icon";
 import "./state-badge";
+import { defaultFuzzyFilterSort } from "../../common/string/filter/sequence-matching";
 
 interface HassEntityWithCachedName extends HassEntity {
   friendly_name: string;
@@ -336,11 +337,18 @@ export class HaEntityPicker extends LitElement {
   }
 
   private _filterChanged(ev: CustomEvent): void {
-    const filterString = ev.detail.value.toLowerCase();
-    (this.comboBox as any).filteredItems = this._states.filter(
-      (entityState) =>
-        entityState.entity_id.toLowerCase().includes(filterString) ||
-        computeStateName(entityState).toLowerCase().includes(filterString)
+    const filterString = ev.detail.value;
+
+    const sortableEntityStates = this._states.map((entityState) => ({
+      strings: [entityState.entity_id, computeStateName(entityState)],
+      entityState: entityState,
+    }));
+    const sortedEntityStates = defaultFuzzyFilterSort(
+      filterString,
+      sortableEntityStates
+    );
+    (this.comboBox as any).filteredItems = sortedEntityStates.map(
+      (sortableItem) => sortableItem.entityState
     );
   }
 

src/components/media-player/ha-media-player-browse.ts

@@ -1,11 +1,10 @@
-import "@lit-labs/virtualizer";
-import type { LitVirtualizer } from "@lit-labs/virtualizer";
-import { grid } from "@lit-labs/virtualizer/layouts/grid";
 import "@material/mwc-button/mwc-button";
 import "@material/mwc-list/mwc-list";
 import "@material/mwc-list/mwc-list-item";
 import { mdiArrowUpRight, mdiPlay, mdiPlus } from "@mdi/js";
 import "@polymer/paper-tooltip/paper-tooltip";
+import { grid } from "@lit-labs/virtualizer/layouts/grid";
+import "@lit-labs/virtualizer";
 import {
   css,
   CSSResultGroup,
@@ -22,12 +21,10 @@ import {
   state,
 } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
-import { styleMap } from "lit/directives/style-map";
 import { until } from "lit/directives/until";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeRTLDirection } from "../../common/util/compute_rtl";
 import { debounce } from "../../common/util/debounce";
-import { getSignedPath } from "../../data/auth";
 import type { MediaPlayerItem } from "../../data/media-player";
 import {
   browseMediaPlayer,
@@ -42,7 +39,6 @@ import { showAlertDialog } from "../../dialogs/generic/show-dialog-box";
 import { installResizeObserver } from "../../panels/lovelace/common/install-resize-observer";
 import { haStyle } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
-import { brandsUrl, extractDomainFromBrandUrl } from "../../util/brands-url";
 import { documentationUrl } from "../../util/documentation-url";
 import "../entity/ha-entity-picker";
 import "../ha-button-menu";
@@ -53,6 +49,8 @@ import "../ha-icon-button";
 import "../ha-svg-icon";
 import "./ha-browse-media-tts";
 import type { TtsMediaPickedEvent } from "./ha-browse-media-tts";
+import { getSignedPath } from "../../data/auth";
+import { brandsUrl, extractDomainFromBrandUrl } from "../../util/brands-url";
 
 declare global {
   interface HASSDomEvents {
@@ -102,10 +100,6 @@ export class HaMediaPlayerBrowse extends LitElement {
 
   @query(".content") private _content?: HTMLDivElement;
 
-  @query("lit-virtualizer") private _virtualizer?: LitVirtualizer;
-
-  private _observed = false;
-
   private _headerOffsetHeight = 0;
 
   private _resizeObserver?: ResizeObserver;
@@ -286,19 +280,6 @@ export class HaMediaPlayerBrowse extends LitElement {
       this._animateHeaderHeight();
     } else if (changedProps.has("_currentItem")) {
       this._setHeaderHeight();
-
-      // This fixes a race condition for resizing of the cards using the grid layout
-      if (this._observed) {
-        return;
-      }
-
-      // @ts-ignore
-      const virtualizer = this._virtualizer?._virtualizer;
-
-      if (virtualizer) {
-        this._observed = true;
-        setTimeout(() => virtualizer._observeMutations(), 0);
-      }
     }
   }
 
@@ -496,9 +477,6 @@ export class HaMediaPlayerBrowse extends LitElement {
                       <lit-virtualizer
                         scroller
                         .items=${children}
-                        style=${styleMap({
-                          height: `${children.length * 72 + 26}px`,
-                        })}
                         .renderItem=${this._renderListItem}
                       ></lit-virtualizer>
                       ${currentItem.not_shown
@@ -628,6 +606,7 @@ export class HaMediaPlayerBrowse extends LitElement {
         </div>
         <span class="title">${child.title}</span>
       </mwc-list-item>
+      <li divider role="separator"></li>
     `;
   };
 

src/components/trace/ha-timeline.ts

@@ -10,8 +10,6 @@ export class HaTimeline extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public raised = false;
 
-  @property({ reflect: true, type: Boolean }) notEnabled = false;
-
   @property({ type: Boolean }) public lastItem = false;
 
   @property({ type: String }) public icon?: string;
@@ -78,9 +76,6 @@ export class HaTimeline extends LitElement {
           margin-right: 8px;
           width: 24px;
         }
-        :host([notEnabled]) ha-svg-icon {
-          opacity: 0.5;
-        }
         ha-svg-icon {
           color: var(
             --timeline-ball-color,

src/components/trace/ha-trace-path-details.ts

@@ -114,11 +114,6 @@ export class HaTracePathDetails extends LitElement {
           const { path, timestamp, result, error, changed_variables, ...rest } =
             trace as any;
 
-          if (result?.enabled === false) {
-            return html`This node was disabled and skipped during execution so
-            no further trace information is available.`;
-          }
-
           return html`
             ${curPath === this.selected.path
               ? ""

src/components/trace/hat-graph-node.ts

@@ -116,14 +116,9 @@ export class HatGraphNode extends LitElement {
         --stroke-clr: var(--hover-clr);
         --icon-clr: var(--default-icon-clr);
       }
-      :host([notEnabled]) circle {
-        --stroke-clr: var(--disabled-clr);
-      }
-      :host([notEnabled][active]) circle {
-        --stroke-clr: var(--disabled-active-clr);
-      }
-      :host([notEnabled]:hover) circle {
-        --stroke-clr: var(--disabled-hover-clr);
+      :host([notEnabled]) circle,
+      :host([notEnabled]) path.connector {
+        stroke: var(--disabled-clr);
       }
       svg {
         width: 100%;

src/components/trace/hat-script-graph.ts

@@ -754,8 +754,6 @@ export class HatScriptGraph extends LitElement {
         --track-clr: var(--track-color, var(--accent-color));
         --hover-clr: var(--hover-color, var(--primary-color));
         --disabled-clr: var(--disabled-color, var(--disabled-text-color));
-        --disabled-active-clr: rgba(var(--rgb-primary-color), 0.5);
-        --disabled-hover-clr: rgba(var(--rgb-primary-color), 0.7);
         --default-trigger-color: 3, 169, 244;
         --rgb-trigger-color: var(--trigger-color, var(--default-trigger-color));
         --background-clr: var(--background-color, white);

src/components/trace/hat-trace-timeline.ts

@@ -296,12 +296,7 @@ class ActionRenderer {
       return this._handleParallel(index);
     }
 
-    this._renderEntry(
-      path,
-      describeAction(this.hass, data, actionType),
-      undefined,
-      data.enabled === false
-    );
+    this._renderEntry(path, describeAction(this.hass, data, actionType));
 
     let i = index + 1;
 
@@ -354,16 +349,10 @@ class ActionRenderer {
     const chooseConfig = this._getDataFromPath(
       this.keys[index]
     ) as ChooseAction;
-    const disabled = chooseConfig.enabled === false;
     const name = chooseConfig.alias || "Choose";
 
     if (defaultExecuted) {
-      this._renderEntry(
-        choosePath,
-        `${name}: Default action executed`,
-        undefined,
-        disabled
-      );
+      this._renderEntry(choosePath, `${name}: Default action executed`);
     } else if (chooseTrace.result) {
       const choiceNumeric =
         chooseTrace.result.choice !== "default"
@@ -375,19 +364,9 @@ class ActionRenderer {
       const choiceName = choiceConfig
         ? `${choiceConfig.alias || `Option ${choiceNumeric}`} executed`
         : `Error: ${chooseTrace.error}`;
-      this._renderEntry(
-        choosePath,
-        `${name}: ${choiceName}`,
-        undefined,
-        disabled
-      );
+      this._renderEntry(choosePath, `${name}: ${choiceName}`);
     } else {
-      this._renderEntry(
-        choosePath,
-        `${name}: No action taken`,
-        undefined,
-        disabled
-      );
+      this._renderEntry(choosePath, `${name}: No action taken`);
     }
 
     let i;
@@ -435,11 +414,9 @@ class ActionRenderer {
     const repeatConfig = this._getDataFromPath(
       this.keys[index]
     ) as RepeatAction;
-    const disabled = repeatConfig.enabled === false;
-
     const name = repeatConfig.alias || describeAction(this.hass, repeatConfig);
 
-    this._renderEntry(repeatPath, name, undefined, disabled);
+    this._renderEntry(repeatPath, name);
 
     let i;
 
@@ -464,24 +441,18 @@ class ActionRenderer {
 
     const ifTrace = this._getItem(index)[0] as IfActionTraceStep;
     const ifConfig = this._getDataFromPath(this.keys[index]) as IfAction;
-    const disabled = ifConfig.enabled === false;
     const name = ifConfig.alias || "If";
 
-    if (ifTrace.result?.choice) {
+    if (ifTrace.result) {
       const choiceConfig = this._getDataFromPath(
         `${this.keys[index]}/${ifTrace.result.choice}/`
       ) as any;
       const choiceName = choiceConfig
         ? `${choiceConfig.alias || `${ifTrace.result.choice} action executed`}`
         : `Error: ${ifTrace.error}`;
-      this._renderEntry(ifPath, `${name}: ${choiceName}`, undefined, disabled);
+      this._renderEntry(ifPath, `${name}: ${choiceName}`);
     } else {
-      this._renderEntry(
-        ifPath,
-        `${name}: No action taken`,
-        undefined,
-        disabled
-      );
+      this._renderEntry(ifPath, `${name}: No action taken`);
     }
 
     let i;
@@ -518,11 +489,9 @@ class ActionRenderer {
       this.keys[index]
     ) as ParallelAction;
 
-    const disabled = parallelConfig.enabled === false;
-
     const name = parallelConfig.alias || "Execute in parallel";
 
-    this._renderEntry(parallelPath, name, undefined, disabled);
+    this._renderEntry(parallelPath, name);
 
     let i;
 
@@ -544,14 +513,11 @@ class ActionRenderer {
   private _renderEntry(
     path: string,
     description: string,
-    icon = mdiRecordCircleOutline,
-    disabled = false
+    icon = mdiRecordCircleOutline
   ) {
     this.entries.push(html`
-      <ha-timeline .icon=${icon} data-path=${path} .notEnabled=${disabled}>
-        ${description}${disabled
-          ? html`<span class="disabled"> (disabled)</span>`
-          : ""}
+      <ha-timeline .icon=${icon} data-path=${path}>
+        ${description}
       </ha-timeline>
     `);
   }

src/data/hassio/supervisor.ts

@@ -179,10 +179,7 @@ export const fetchHassioInfo = async (
 };
 
 export const fetchHassioLogs = async (hass: HomeAssistant, provider: string) =>
-  hass.callApi<string>(
-    "GET",
-    `hassio/${provider.includes("_") ? `addons/${provider}` : provider}/logs`
-  );
+  hass.callApi<string>("GET", `hassio/${provider}/logs`);
 
 export const setSupervisorOption = async (
   hass: HomeAssistant,

src/data/update.ts

@@ -2,10 +2,8 @@ import type {
   HassEntities,
   HassEntityAttributeBase,
   HassEntityBase,
-  HassEvent,
 } from "home-assistant-js-websocket";
 import { BINARY_STATE_ON } from "../common/const";
-import { computeDomain } from "../common/entity/compute_domain";
 import { computeStateDomain } from "../common/entity/compute_state_domain";
 import { supportsFeature } from "../common/entity/supports-feature";
 import { caseInsensitiveStringCompare } from "../common/string/compare";
@@ -112,32 +110,15 @@ export const checkForEntityUpdates = async (
     return;
   }
 
-  let updated = 0;
-
-  const unsubscribeEvents = await hass.connection.subscribeEvents<HassEvent>(
-    (event) => {
-      if (computeDomain(event.data.entity_id) === "update") {
-        updated++;
-        showToast(element, {
-          message: hass.localize("ui.panel.config.updates.updates_refreshed", {
-            count: updated,
-          }),
-        });
-      }
-    },
-    "state_changed"
-  );
-
   await hass.callService("homeassistant", "update_entity", {
     entity_id: entities,
   });
 
-  // there is no reliable way to know if all the updates are done updating, so we just wait a bit for now...
-  await new Promise((r) => setTimeout(r, 10000));
-
-  unsubscribeEvents();
-
-  if (updated === 0) {
+  if (filterUpdateEntitiesWithInstall(hass.states).length) {
+    showToast(element, {
+      message: hass.localize("ui.panel.config.updates.updates_refreshed"),
+    });
+  } else {
     showToast(element, {
       message: hass.localize("ui.panel.config.updates.no_new_updates"),
     });

src/dialogs/generic/dialog-box.ts

@@ -1,13 +1,12 @@
 import "@material/mwc-button/mwc-button";
 import { mdiAlertOutline } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
-import { ifDefined } from "lit/directives/if-defined";
+import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../../components/ha-dialog";
 import "../../components/ha-svg-icon";
 import "../../components/ha-switch";
-import { HaTextField } from "../../components/ha-textfield";
+import "../../components/ha-textfield";
 import { haStyleDialog } from "../../resources/styles";
 import { HomeAssistant } from "../../types";
 import { DialogBoxParams } from "./show-dialog-box";
@@ -18,10 +17,13 @@ class DialogBox extends LitElement {
 
   @state() private _params?: DialogBoxParams;
 
-  @query("ha-textfield") private _textField?: HaTextField;
+  @state() private _value?: string;
 
   public async showDialog(params: DialogBoxParams): Promise<void> {
     this._params = params;
+    if (params.prompt) {
+      this._value = params.defaultValue;
+    }
   }
 
   public closeDialog(): boolean {
@@ -73,7 +75,9 @@ class DialogBox extends LitElement {
             ? html`
                 <ha-textfield
                   dialogInitialFocus
-                  value=${ifDefined(this._params.defaultValue)}
+                  .value=${this._value || ""}
+                  @keyup=${this._handleKeyUp}
+                  @input=${this._valueChanged}
                   .label=${this._params.inputLabel
                     ? this._params.inputLabel
                     : ""}
@@ -105,6 +109,10 @@ class DialogBox extends LitElement {
     `;
   }
 
+  private _valueChanged(ev) {
+    this._value = ev.target.value;
+  }
+
   private _dismiss(): void {
     if (this._params?.cancel) {
       this._params.cancel();
@@ -112,9 +120,15 @@ class DialogBox extends LitElement {
     this._close();
   }
 
+  private _handleKeyUp(ev: KeyboardEvent) {
+    if (ev.keyCode === 13) {
+      this._confirm();
+    }
+  }
+
   private _confirm(): void {
     if (this._params!.confirm) {
-      this._params!.confirm(this._textField?.value);
+      this._params!.confirm(this._value);
     }
     this._close();
   }

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

@@ -17,7 +17,6 @@ import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
 import { canShowPage } from "../../common/config/can_show_page";
 import { componentsWithService } from "../../common/config/components_with_service";
-import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeDomain } from "../../common/entity/compute_domain";
 import { computeStateName } from "../../common/entity/compute_state_name";
@@ -25,7 +24,7 @@ import { domainIcon } from "../../common/entity/domain_icon";
 import { navigate } from "../../common/navigate";
 import { caseInsensitiveStringCompare } from "../../common/string/compare";
 import {
-  fuzzyFilterSort,
+  defaultFuzzyFilterSort,
   ScorableTextItem,
 } from "../../common/string/filter/sequence-matching";
 import { debounce } from "../../common/util/debounce";
@@ -34,7 +33,6 @@ import "../../components/ha-circular-progress";
 import "../../components/ha-header-bar";
 import "../../components/ha-icon-button";
 import "../../components/ha-textfield";
-import { fetchHassioSupervisorInfo } from "../../data/hassio/supervisor";
 import { domainToName } from "../../data/integration";
 import { getPanelNameTranslationKey } from "../../data/panel";
 import { PageNavigation } from "../../layouts/hass-tabs-subpage";
@@ -247,10 +245,9 @@ export class QuickBar extends LitElement {
     `;
   }
 
-  private async _initializeItemsIfNeeded() {
+  private _initializeItemsIfNeeded() {
     if (this._commandMode) {
-      this._commandItems =
-        this._commandItems || (await this._generateCommandItems());
+      this._commandItems = this._commandItems || this._generateCommandItems();
     } else {
       this._entityItems = this._entityItems || this._generateEntityItems();
     }
@@ -488,11 +485,11 @@ export class QuickBar extends LitElement {
       );
   }
 
-  private async _generateCommandItems(): Promise<CommandItem[]> {
+  private _generateCommandItems(): CommandItem[] {
     return [
       ...this._generateReloadCommands(),
       ...this._generateServerControlCommands(),
-      ...(await this._generateNavigationCommands()),
+      ...this._generateNavigationCommands(),
     ].sort((a, b) =>
       caseInsensitiveStringCompare(a.strings.join(" "), b.strings.join(" "))
     );
@@ -581,40 +578,11 @@ export class QuickBar extends LitElement {
     });
   }
 
-  private async _generateNavigationCommands(): Promise<CommandItem[]> {
+  private _generateNavigationCommands(): CommandItem[] {
     const panelItems = this._generateNavigationPanelCommands();
     const sectionItems = this._generateNavigationConfigSectionCommands();
-    const supervisorItems: BaseNavigationCommand[] = [];
-    if (isComponentLoaded(this.hass, "hassio")) {
-      const supervisorInfo = await fetchHassioSupervisorInfo(this.hass);
-      supervisorItems.push({
-        path: "/hassio/store",
-        primaryText: this.hass.localize(
-          "ui.dialogs.quick-bar.commands.navigation.addon_store"
-        ),
-      });
-      supervisorItems.push({
-        path: "/hassio/dashboard",
-        primaryText: this.hass.localize(
-          "ui.dialogs.quick-bar.commands.navigation.addon_dashboard"
-        ),
-      });
-      for (const addon of supervisorInfo.addons) {
-        supervisorItems.push({
-          path: `/hassio/addon/${addon.slug}`,
-          primaryText: this.hass.localize(
-            "ui.dialogs.quick-bar.commands.navigation.addon_info",
-            { addon: addon.name }
-          ),
-        });
-      }
-    }
 
-    return this._finalizeNavigationCommands([
-      ...panelItems,
-      ...sectionItems,
-      ...supervisorItems,
-    ]);
+    return this._finalizeNavigationCommands([...panelItems, ...sectionItems]);
   }
 
   private _generateNavigationPanelCommands(): BaseNavigationCommand[] {
@@ -642,14 +610,20 @@ export class QuickBar extends LitElement {
         if (!canShowPage(this.hass, page)) {
           continue;
         }
-
+        if (!page.component) {
+          continue;
+        }
         const info = this._getNavigationInfoFromConfig(page);
 
         if (!info) {
           continue;
         }
         // Add to list, but only if we do not already have an entry for the same path and component
-        if (items.some((e) => e.path === info.path)) {
+        if (
+          items.some(
+            (e) => e.path === info.path && e.component === info.component
+          )
+        ) {
           continue;
         }
 
@@ -663,19 +637,14 @@ export class QuickBar extends LitElement {
   private _getNavigationInfoFromConfig(
     page: PageNavigation
   ): NavigationInfo | undefined {
-    const path = page.path.substring(1);
+    if (!page.component) {
+      return undefined;
+    }
+    const caption = this.hass.localize(
+      `ui.dialogs.quick-bar.commands.navigation.${page.component}`
+    );
 
-    let name = path.substring(path.indexOf("/") + 1);
-    name = name.indexOf("/") > -1 ? name.substring(0, name.indexOf("/")) : name;
-
-    const caption =
-      (name &&
-        this.hass.localize(
-          `ui.dialogs.quick-bar.commands.navigation.${name}`
-        )) ||
-      (page.translationKey && this.hass.localize(page.translationKey));
-
-    if (caption) {
+    if (page.translationKey && caption) {
       return { ...page, primaryText: caption };
     }
 
@@ -725,7 +694,7 @@ export class QuickBar extends LitElement {
 
   private _filterItems = memoizeOne(
     (items: QuickBarItem[], filter: string): QuickBarItem[] =>
-      fuzzyFilterSort<QuickBarItem>(filter.trimLeft(), items)
+      defaultFuzzyFilterSort<QuickBarItem>(filter.trimLeft(), items)
   );
 
   static get styles() {

src/panels/config/areas/ha-config-area-page.ts

@@ -259,7 +259,6 @@ class HaConfigAreaPage extends LitElement {
                   <ha-svg-icon .path=${mdiImagePlus} slot="icon"></ha-svg-icon>
                 </mwc-button>`}
             <ha-card
-              outlined
               .header=${this.hass.localize("ui.panel.config.devices.caption")}
               >${devices.length
                 ? devices.map(
@@ -282,7 +281,6 @@ class HaConfigAreaPage extends LitElement {
                   `}
             </ha-card>
             <ha-card
-              outlined
               .header=${this.hass.localize(
                 "ui.panel.config.areas.editor.linked_entities_caption"
               )}
@@ -316,7 +314,6 @@ class HaConfigAreaPage extends LitElement {
             ${isComponentLoaded(this.hass, "automation")
               ? html`
                   <ha-card
-                    outlined
                     .header=${this.hass.localize(
                       "ui.panel.config.devices.automation.automations_heading"
                     )}
@@ -364,7 +361,6 @@ class HaConfigAreaPage extends LitElement {
             ${isComponentLoaded(this.hass, "scene")
               ? html`
                   <ha-card
-                    outlined
                     .header=${this.hass.localize(
                       "ui.panel.config.devices.scene.scenes_heading"
                     )}
@@ -404,7 +400,6 @@ class HaConfigAreaPage extends LitElement {
             ${isComponentLoaded(this.hass, "script")
               ? html`
                   <ha-card
-                    outlined
                     .header=${this.hass.localize(
                       "ui.panel.config.devices.script.scripts_heading"
                     )}

src/panels/config/automation/action/ha-automation-action-row.ts

@@ -164,7 +164,7 @@ export default class HaAutomationActionRow extends LitElement {
     const yamlMode = this._yamlMode;
 
     return html`
-      <ha-card outlined>
+      <ha-card>
         ${this.action.enabled === false
           ? html`<div class="disabled-bar">
               ${this.hass.localize(

src/panels/config/automation/action/ha-automation-action.ts

@@ -1,4 +1,3 @@
-import deepClone from "deep-clone-simple";
 import "@material/mwc-button";
 import { css, CSSResultGroup, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
@@ -33,7 +32,7 @@ export default class HaAutomationAction extends LitElement {
           ></ha-automation-action-row>
         `
       )}
-      <ha-card outlined>
+      <ha-card>
         <div class="card-actions add-card">
           <mwc-button @click=${this._addAction}>
             ${this.hass.localize(
@@ -84,7 +83,7 @@ export default class HaAutomationAction extends LitElement {
     ev.stopPropagation();
     const index = (ev.target as any).index;
     fireEvent(this, "value-changed", {
-      value: this.actions.concat(deepClone(this.actions[index])),
+      value: this.actions.concat(this.actions[index]),
     });
   }
 

src/panels/config/automation/action/types/ha-automation-action-choose.ts

@@ -69,7 +69,7 @@ export class HaChooseAction extends LitElement implements ActionElement {
           </div>
         </ha-card>`
       )}
-      <ha-card outlined>
+      <ha-card>
         <div class="card-actions add-card">
           <mwc-button @click=${this._addOption}>
             ${this.hass.localize(

src/panels/config/automation/blueprint-automation-editor.ts

@@ -75,7 +75,7 @@ export class HaBlueprintAutomationEditor extends LitElement {
             "ui.panel.config.automation.editor.introduction"
           )}
         </span>
-        <ha-card outlined>
+        <ha-card>
           <div class="card-content">
             <ha-textfield
               .label=${this.hass.localize(
@@ -145,7 +145,6 @@ export class HaBlueprintAutomationEditor extends LitElement {
       </ha-config-section>
 
       <ha-card
-        outlined
         class="blueprint"
         .header=${this.hass.localize(
           "ui.panel.config.automation.editor.blueprint.header"

src/panels/config/automation/condition/ha-automation-condition-editor.ts

@@ -5,6 +5,7 @@ import { dynamicElement } from "../../../../common/dom/dynamic-element-directive
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { stringCompare } from "../../../../common/string/compare";
 import type { LocalizeFunc } from "../../../../common/translations/localize";
+import "../../../../components/ha-card";
 import "../../../../components/ha-select";
 import type { HaSelect } from "../../../../components/ha-select";
 import "../../../../components/ha-yaml-editor";

src/panels/config/automation/condition/ha-automation-condition-row.ts

@@ -67,7 +67,7 @@ export default class HaAutomationConditionRow extends LitElement {
       return html``;
     }
     return html`
-      <ha-card outlined>
+      <ha-card>
         ${this.condition.enabled === false
           ? html`<div class="disabled-bar">
               ${this.hass.localize(

src/panels/config/automation/condition/ha-automation-condition.ts

@@ -1,4 +1,3 @@
-import deepClone from "deep-clone-simple";
 import "@material/mwc-button";
 import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
 import { customElement, property } from "lit/decorators";
@@ -57,7 +56,7 @@ export default class HaAutomationCondition extends LitElement {
           ></ha-automation-condition-row>
         `
       )}
-      <ha-card outlined>
+      <ha-card>
         <div class="card-actions add-card">
           <mwc-button @click=${this._addCondition}>
             ${this.hass.localize(
@@ -97,7 +96,7 @@ export default class HaAutomationCondition extends LitElement {
     ev.stopPropagation();
     const index = (ev.target as any).index;
     fireEvent(this, "value-changed", {
-      value: this.conditions.concat(deepClone(this.conditions[index])),
+      value: this.conditions.concat(this.conditions[index]),
     });
   }
 

src/panels/config/automation/dialog-new-automation.ts

@@ -3,6 +3,7 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-blueprint-picker";
+import "../../../components/ha-card";
 import "../../../components/ha-circular-progress";
 import { createCloseHeading } from "../../../components/ha-dialog";
 import { showAutomationEditor } from "../../../data/automation";

src/panels/config/automation/ha-automation-editor.ts

@@ -239,8 +239,8 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
                   ? html`
                       ${!this.narrow
                         ? html`
-                            <ha-card outlined>
-                              <div class="card-header">
+                            <ha-card
+                              ><div class="card-header">
                                 ${this._config.alias}
                               </div>
                               ${stateObj
@@ -275,8 +275,8 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
                         .defaultValue=${this._preprocessYaml()}
                         @value-changed=${this._yamlChanged}
                       ></ha-yaml-editor>
-                      <ha-card outlined>
-                        <div class="card-actions">
+                      <ha-card
+                        ><div class="card-actions">
                           <mwc-button @click=${this._copyYaml}>
                             ${this.hass.localize(
                               "ui.panel.config.automation.editor.copy_to_clipboard"

src/panels/config/automation/manual-automation-editor.ts

@@ -47,7 +47,7 @@ export class HaManualAutomationEditor extends LitElement {
             "ui.panel.config.automation.editor.introduction"
           )}
         </span>
-        <ha-card outlined>
+        <ha-card>
           <div class="card-content">
             <ha-textfield
               .label=${this.hass.localize(

src/panels/config/automation/trigger/ha-automation-trigger-row.ts

@@ -127,7 +127,7 @@ export default class HaAutomationTriggerRow extends LitElement {
     const showId = "id" in this.trigger || this._requestShowId;
 
     return html`
-      <ha-card outlined>
+      <ha-card>
         ${this.trigger.enabled === false
           ? html`<div class="disabled-bar">
               ${this.hass.localize(

src/panels/config/automation/trigger/ha-automation-trigger.ts

@@ -1,4 +1,3 @@
-import deepClone from "deep-clone-simple";
 import "@material/mwc-button";
 import { css, CSSResultGroup, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
@@ -28,7 +27,7 @@ export default class HaAutomationTrigger extends LitElement {
           ></ha-automation-trigger-row>
         `
       )}
-      <ha-card outlined>
+      <ha-card>
         <div class="card-actions add-card">
           <mwc-button @click=${this._addTrigger}>
             ${this.hass.localize(
@@ -68,7 +67,7 @@ export default class HaAutomationTrigger extends LitElement {
     ev.stopPropagation();
     const index = (ev.target as any).index;
     fireEvent(this, "value-changed", {
-      value: this.triggers.concat(deepClone(this.triggers[index])),
+      value: this.triggers.concat(this.triggers[index]),
     });
   }
 

src/panels/config/cloud/account/cloud-account.ts

@@ -1,28 +1,26 @@
 import "@material/mwc-button";
-import type { ActionDetail } from "@material/mwc-list";
 import "@material/mwc-list/mwc-list-item";
-import { mdiDotsVertical } from "@mdi/js";
+import type { ActionDetail } from "@material/mwc-list";
 import "@polymer/paper-item/paper-item-body";
-import { css, html, LitElement, PropertyValues } from "lit";
+import { mdiDotsVertical } from "@mdi/js";
+import { LitElement, css, html, PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { formatDateTime } from "../../../../common/datetime/format_date_time";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { computeRTLDirection } from "../../../../common/util/compute_rtl";
-import { debounce } from "../../../../common/util/debounce";
 import "../../../../components/buttons/ha-call-api-button";
+import "../../../../components/ha-card";
 import "../../../../components/ha-alert";
 import "../../../../components/ha-button-menu";
-import "../../../../components/ha-card";
 import "../../../../components/ha-icon-button";
+import { debounce } from "../../../../common/util/debounce";
 import {
   cloudLogout,
   CloudStatusLoggedIn,
   fetchCloudSubscriptionInfo,
   SubscriptionInfo,
 } from "../../../../data/cloud";
-import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box";
 import "../../../../layouts/hass-subpage";
-import { SubscribeMixin } from "../../../../mixins/subscribe-mixin";
 import { HomeAssistant } from "../../../../types";
 import "../../ha-config-section";
 import "./cloud-alexa-pref";
@@ -30,6 +28,8 @@ import "./cloud-google-pref";
 import "./cloud-remote-pref";
 import "./cloud-tts-pref";
 import "./cloud-webhooks";
+import { SubscribeMixin } from "../../../../mixins/subscribe-mixin";
+import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box";
 
 @customElement("cloud-account")
 export class CloudAccount extends SubscribeMixin(LitElement) {
@@ -81,7 +81,6 @@ export class CloudAccount extends SubscribeMixin(LitElement) {
             </div>
 
             <ha-card
-              outlined
               .header=${this.hass.localize(
                 "ui.panel.config.cloud.account.nabu_casa_account"
               )}
@@ -211,7 +210,6 @@ export class CloudAccount extends SubscribeMixin(LitElement) {
 
             <cloud-webhooks
               .hass=${this.hass}
-              .narrow=${this.narrow}
               .cloudStatus=${this.cloudStatus}
               dir=${this._rtlDirection}
             ></cloud-webhooks>

src/panels/config/cloud/account/cloud-alexa-pref.ts

@@ -26,7 +26,6 @@ export class CloudAlexaPref extends LitElement {
 
     return html`
       <ha-card
-        outlined
         header=${this.hass!.localize(
           "ui.panel.config.cloud.account.alexa.title"
         )}

src/panels/config/cloud/account/cloud-google-pref.ts

@@ -31,7 +31,6 @@ export class CloudGooglePref extends LitElement {
 
     return html`
       <ha-card
-        outlined
         header=${this.hass.localize(
           "ui.panel.config.cloud.account.google.title"
         )}

src/panels/config/cloud/account/cloud-remote-pref.ts

@@ -34,7 +34,6 @@ export class CloudRemotePref extends LitElement {
     if (!remote_certificate) {
       return html`
         <ha-card
-          outlined
           header=${this.hass.localize(
             "ui.panel.config.cloud.account.remote.title"
           )}
@@ -50,7 +49,6 @@ export class CloudRemotePref extends LitElement {
 
     return html`
       <ha-card
-        outlined
         header=${this.hass.localize(
           "ui.panel.config.cloud.account.remote.title"
         )}

src/panels/config/cloud/account/cloud-tts-pref.ts

@@ -44,7 +44,6 @@ export class CloudTTSPref extends LitElement {
 
     return html`
       <ha-card
-        outlined
         header=${this.hass.localize("ui.panel.config.cloud.account.tts.title")}
       >
         <div class="card-content">

src/panels/config/cloud/account/cloud-webhooks.ts

@@ -40,7 +40,6 @@ export class CloudWebhooks extends LitElement {
   protected render() {
     return html`
       <ha-card
-        outlined
         header=${this.hass!.localize(
           "ui.panel.config.cloud.account.webhooks.title"
         )}

src/panels/config/cloud/alexa/cloud-alexa.ts

@@ -153,7 +153,7 @@ class CloudAlexa extends SubscribeMixin(LitElement) {
       ></ha-icon-button>`;
 
       target.push(html`
-        <ha-card outlined>
+        <ha-card>
           <div class="card-content">
             <div class="top-line">
               <state-info

src/panels/config/cloud/forgot-password/cloud-forgot-password.ts

@@ -36,7 +36,6 @@ export class CloudForgotPassword extends LitElement {
       >
         <div class="content">
           <ha-card
-            outlined
             .header=${this.hass.localize(
               "ui.panel.config.cloud.forgot_password.subtitle"
             )}

src/panels/config/cloud/google-assistant/cloud-google-assistant.ts

@@ -159,7 +159,7 @@ class CloudGoogleAssistant extends SubscribeMixin(LitElement) {
       ></ha-icon-button>`;
 
       target.push(html`
-        <ha-card outlined>
+        <ha-card>
           <div class="card-content">
             <div class="top-line">
               <state-info

src/panels/config/cloud/login/cloud-login.ts

@@ -99,7 +99,6 @@ export class CloudLogin extends LitElement {
               : ""}
 
             <ha-card
-              outlined
               .header=${this.hass.localize(
                 "ui.panel.config.cloud.login.sign_in"
               )}
@@ -158,7 +157,7 @@ export class CloudLogin extends LitElement {
               </div>
             </ha-card>
 
-            <ha-card outlined>
+            <ha-card>
               <paper-item @click=${this._handleRegister}>
                 <paper-item-body two-line>
                   ${this.hass.localize(

src/panels/config/cloud/register/cloud-register.ts

@@ -121,7 +121,6 @@ export class CloudRegister extends LitElement {
               </ul>
             </div>
             <ha-card
-              outlined
               .header=${this.hass.localize(
                 "ui.panel.config.cloud.register.create_account"
               )}

src/panels/config/core/ha-config-section-updates.ts

@@ -109,11 +109,7 @@ class HaConfigSectionUpdates extends LitElement {
                     ></ha-config-updates>
                   `
                 : html`
-                    <div class="no-updates">
-                      ${this.hass.localize(
-                        "ui.panel.config.updates.no_updates"
-                      )}
-                    </div>
+                    ${this.hass.localize("ui.panel.config.updates.no_updates")}
                   `}
             </div>
           </ha-card>
@@ -200,10 +196,6 @@ class HaConfigSectionUpdates extends LitElement {
       display: flex;
       justify-content: space-between;
       flex-direction: column;
-      padding: 0;
-    }
-
-    .no-updates {
       padding: 16px;
     }
   `;

src/panels/config/core/ha-config-system-navigation.ts

@@ -1,21 +1,9 @@
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
 import { canShowPage } from "../../../common/config/can_show_page";
-import { isComponentLoaded } from "../../../common/config/is_component_loaded";
-import { relativeTime } from "../../../common/datetime/relative_time";
 import "../../../components/ha-card";
 import "../../../components/ha-navigation-list";
-import "../../../components/ha-tip";
-import { BackupContent, fetchBackupInfo } from "../../../data/backup";
-import { CloudStatus, fetchCloudStatus } from "../../../data/cloud";
-import { BOARD_NAMES } from "../../../data/hardware";
-import { fetchHassioBackups, HassioBackup } from "../../../data/hassio/backup";
-import {
-  fetchHassioHassOsInfo,
-  fetchHassioHostInfo,
-  HassioHassOSInfo,
-  HassioHostInfo,
-} from "../../../data/hassio/host";
+import { CloudStatus } from "../../../data/cloud";
 import {
   showAlertDialog,
   showConfirmationDialog,
@@ -39,80 +27,15 @@ class HaConfigSystemNavigation extends LitElement {
 
   @property({ type: Boolean }) public showAdvanced!: boolean;
 
-  @state() private _latestBackupDate?: string;
-
-  @state() private _boardName?: string;
-
-  @state() private _storageInfo?: { used: number; free: number; total: number };
-
-  @state() private _externalAccess = false;
-
   protected render(): TemplateResult {
     const pages = configSections.general
       .filter((page) => canShowPage(this.hass, page))
-      .map((page) => {
-        let description = "";
-
-        switch (page.translationKey) {
-          case "backup":
-            description = this._latestBackupDate
-              ? this.hass.localize(
-                  "ui.panel.config.backup.description",
-                  "relative_time",
-                  relativeTime(
-                    new Date(this._latestBackupDate),
-                    this.hass.locale
-                  )
-                )
-              : this.hass.localize(
-                  "ui.panel.config.backup.description_no_backup"
-                );
-            break;
-          case "network":
-            description = this.hass.localize(
-              "ui.panel.config.network.description",
-              "state",
-              this._externalAccess
-                ? this.hass.localize("ui.panel.config.network.enabled")
-                : this.hass.localize("ui.panel.config.network.disabled")
-            );
-            break;
-          case "storage":
-            description = this._storageInfo
-              ? this.hass.localize(
-                  "ui.panel.config.storage.description",
-                  "percent_used",
-                  `${Math.round(
-                    (this._storageInfo.used / this._storageInfo.total) * 100
-                  )}%`,
-                  "free_space",
-                  `${this._storageInfo.free} GB`
-                )
-              : "";
-            break;
-          case "hardware":
-            description =
-              this._boardName ||
-              this.hass.localize("ui.panel.config.hardware.description");
-            break;
-
-          default:
-            description = this.hass.localize(
-              `ui.panel.config.${page.translationKey}.description`
-            );
-            break;
-        }
-
-        return {
-          ...page,
-          name: page.translationKey
-            ? this.hass.localize(
-                `ui.panel.config.${page.translationKey}.caption`
-              )
-            : page.name,
-          description,
-        };
-      });
+      .map((page) => ({
+        ...page,
+        name: page.translationKey
+          ? this.hass.localize(page.translationKey)
+          : page.name,
+      }));
 
     return html`
       <hass-subpage
@@ -136,32 +59,14 @@ class HaConfigSystemNavigation extends LitElement {
               .hass=${this.hass}
               .narrow=${this.narrow}
               .pages=${pages}
-              hasSecondary
             ></ha-navigation-list>
           </ha-card>
-          ${this.hass.userData?.showAdvanced
-            ? html`<ha-tip>
-                Looking for YAML Configuration? It has moved to
-                <a href="/developer-tools/yaml">Developer Tools</a>
-              </ha-tip>`
-            : ""}
+          <div class="yaml-config">Looking for YAML Configuration? It has moved to <a href="/developer-tools/yaml">Developer Tools</a></a></div>
         </ha-config-section>
       </hass-subpage>
     `;
   }
 
-  protected firstUpdated(_changedProperties): void {
-    super.firstUpdated(_changedProperties);
-
-    this._fetchNetworkStatus();
-    const isHassioLoaded = isComponentLoaded(this.hass, "hassio");
-    this._fetchBackupInfo(isHassioLoaded);
-    if (isHassioLoaded) {
-      this._fetchHardwareInfo();
-      this._fetchStorageInfo();
-    }
-  }
-
   private _restart() {
     showConfirmationDialog(this, {
       title: this.hass.localize(
@@ -186,47 +91,6 @@ class HaConfigSystemNavigation extends LitElement {
     });
   }
 
-  private async _fetchBackupInfo(isHassioLoaded: boolean) {
-    const backups: BackupContent[] | HassioBackup[] = isHassioLoaded
-      ? await fetchHassioBackups(this.hass)
-      : await fetchBackupInfo(this.hass).then(
-          (backupData) => backupData.backups
-        );
-
-    if (backups.length > 0) {
-      this._latestBackupDate = (backups as any[]).reduce((a, b) =>
-        a.date > b.date ? a : b
-      ).date;
-    }
-  }
-
-  private async _fetchHardwareInfo() {
-    const osData: HassioHassOSInfo = await fetchHassioHassOsInfo(this.hass);
-    if (osData.board) {
-      this._boardName = BOARD_NAMES[osData.board];
-    }
-  }
-
-  private async _fetchStorageInfo() {
-    const hostInfo: HassioHostInfo = await fetchHassioHostInfo(this.hass);
-    this._storageInfo = {
-      used: hostInfo.disk_used,
-      free: hostInfo.disk_free,
-      total: hostInfo.disk_total,
-    };
-  }
-
-  private async _fetchNetworkStatus() {
-    if (isComponentLoaded(this.hass, "cloud")) {
-      const cloudStatus = await fetchCloudStatus(this.hass);
-      if (cloudStatus.logged_in) {
-        this._externalAccess = true;
-        return;
-      }
-    }
-    this._externalAccess = this.hass.config.external_url !== null;
-  }
-
   static get styles(): CSSResultGroup {
     return [
       haStyle,
@@ -271,9 +135,12 @@ class HaConfigSystemNavigation extends LitElement {
 
         ha-navigation-list {
           --navigation-list-item-title-font-size: 16px;
+          --navigation-list-item-padding: 4px;
         }
-        ha-tip {
-          margin-bottom: max(env(safe-area-inset-bottom), 8px);
+        .yaml-config {
+          margin-bottom: max(env(safe-area-inset-bottom), 24px);
+          text-align: center;
+          font-style: italic;
         }
       `,
     ];

src/panels/config/dashboard/ha-config-navigation.ts

@@ -6,7 +6,7 @@ import { canShowPage } from "../../../common/config/can_show_page";
 import "../../../components/ha-card";
 import "../../../components/ha-icon-next";
 import "../../../components/ha-navigation-list";
-import type { CloudStatus } from "../../../data/cloud";
+import type { CloudStatus, CloudStatusLoggedIn } from "../../../data/cloud";
 import type { PageNavigation } from "../../../layouts/hass-tabs-subpage";
 import type { HomeAssistant } from "../../../types";
 
@@ -37,7 +37,9 @@ class HaConfigNavigation extends LitElement {
             ? page.info.logged_in
               ? `
                   ${this.hass.localize(
-                    "ui.panel.config.cloud.description_login"
+                    "ui.panel.config.cloud.description_login",
+                    "email",
+                    (page.info as CloudStatusLoggedIn).email
                   )}
                 `
               : `

src/panels/config/dashboard/ha-config-updates.ts

@@ -9,7 +9,6 @@ import "../../../components/ha-alert";
 import "../../../components/ha-icon-next";
 import type { UpdateEntity } from "../../../data/update";
 import type { HomeAssistant } from "../../../types";
-import "../../../components/ha-circular-progress";
 
 @customElement("ha-config-updates")
 class HaConfigUpdates extends LitElement {
@@ -52,18 +51,7 @@ class HaConfigUpdates extends LitElement {
                 .title=${entity.attributes.title ||
                 entity.attributes.friendly_name}
                 .stateObj=${entity}
-                class=${this.narrow && entity.attributes.in_progress
-                  ? "updating"
-                  : ""}
               ></state-badge>
-              ${this.narrow && entity.attributes.in_progress
-                ? html`<ha-circular-progress
-                    active
-                    size="small"
-                    slot="graphic"
-                    class="absolute"
-                  ></ha-circular-progress>`
-                : ""}
               <span
                 >${entity.attributes.title ||
                 entity.attributes.friendly_name}</span
@@ -79,13 +67,7 @@ class HaConfigUpdates extends LitElement {
                   : ""}
               </span>
               ${!this.narrow
-                ? entity.attributes.in_progress
-                  ? html`<ha-circular-progress
-                      active
-                      size="small"
-                      slot="meta"
-                    ></ha-circular-progress>`
-                  : html`<ha-icon-next slot="meta"></ha-icon-next>`
+                ? html`<ha-icon-next slot="meta"></ha-icon-next>`
                 : ""}
             </mwc-list-item>
           `
@@ -139,12 +121,6 @@ class HaConfigUpdates extends LitElement {
           cursor: pointer;
           font-size: 16px;
         }
-        ha-circular-progress.absolute {
-          position: absolute;
-        }
-        state-badge.updating {
-          opacity: 0.5;
-        }
       `,
     ];
   }

src/panels/config/devices/device-detail/ha-device-actions-card.ts

@@ -1,4 +1,5 @@
 import { customElement } from "lit/decorators";
+import "../../../../components/ha-card";
 import {
   DeviceAction,
   localizeDeviceAutomationAction,

src/panels/config/devices/device-detail/ha-device-automation-card.ts

@@ -1,6 +1,7 @@
 import { css, html, LitElement, TemplateResult } from "lit";
 import { property, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import "../../../../components/ha-card";
 import "../../../../components/ha-chip";
 import "../../../../components/ha-chip-set";
 import { showAutomationEditor } from "../../../../data/automation";

src/panels/config/devices/device-detail/ha-device-conditions-card.ts

@@ -1,4 +1,5 @@
 import { customElement } from "lit/decorators";
+import "../../../../components/ha-card";
 import {
   DeviceCondition,
   localizeDeviceAutomationCondition,

src/panels/config/devices/device-detail/ha-device-entities-card.ts

@@ -62,7 +62,7 @@ export class HaDeviceEntitiesCard extends LitElement {
   protected render(): TemplateResult {
     if (!this.entities.length) {
       return html`
-        <ha-card outlined .header=${this.header}>
+        <ha-card .header=${this.header}>
           <div class="empty card-content">
             ${this.hass.localize("ui.panel.config.devices.entities.none")}
           </div>
@@ -89,7 +89,7 @@ export class HaDeviceEntitiesCard extends LitElement {
     });
 
     return html`
-      <ha-card outlined .header=${this.header}>
+      <ha-card .header=${this.header}>
         <div id="entities" @hass-more-info=${this._overrideMoreInfo}>
           ${shownEntities.map((entry) =>
             this.hass.states[entry.entity_id]

src/panels/config/devices/device-detail/ha-device-info-card.ts

@@ -1,6 +1,5 @@
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
-import "../../../../components/ha-card";
 import { AreaRegistryEntry } from "../../../../data/area_registry";
 import {
   computeDeviceName,
@@ -25,7 +24,6 @@ export class HaDeviceCard extends LitElement {
   protected render(): TemplateResult {
     return html`
       <ha-card
-        outlined
         .header=${this.hass.localize(
           "ui.panel.config.devices.device_info",
           "type",
@@ -147,9 +145,3 @@ export class HaDeviceCard extends LitElement {
     ];
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-device-info-card": HaDeviceCard;
-  }
-}

src/panels/config/devices/device-detail/integration-elements/zwave_js/ha-device-actions-zwave_js.ts

@@ -20,7 +20,6 @@ import { HomeAssistant } from "../../../../../../types";
 import { showZWaveJSReinterviewNodeDialog } from "../../../../integrations/integration-panels/zwave_js/show-dialog-zwave_js-reinterview-node";
 import { showZWaveJSHealNodeDialog } from "../../../../integrations/integration-panels/zwave_js/show-dialog-zwave_js-heal-node";
 import { showZWaveJSRemoveFailedNodeDialog } from "../../../../integrations/integration-panels/zwave_js/show-dialog-zwave_js-remove-failed-node";
-import { getConfigEntries } from "../../../../../../data/config_entries";
 
 @customElement("ha-device-actions-zwave_js")
 export class HaDeviceActionsZWaveJS extends LitElement {
@@ -34,35 +33,24 @@ export class HaDeviceActionsZWaveJS extends LitElement {
 
   @state() private _node?: ZWaveJSNodeStatus;
 
-  public willUpdate(changedProperties: PropertyValues) {
+  protected updated(changedProperties: PropertyValues) {
     if (changedProperties.has("device")) {
+      const identifiers: ZWaveJSNodeIdentifiers | undefined =
+        getZwaveJsIdentifiersFromDevice(this.device);
+      if (!identifiers) {
+        return;
+      }
+      this._nodeId = identifiers.node_id;
+      this._entryId = this.device.config_entries[0];
+
       this._fetchNodeDetails();
     }
   }
 
   protected async _fetchNodeDetails() {
-    this._node = undefined;
-
-    const identifiers: ZWaveJSNodeIdentifiers | undefined =
-      getZwaveJsIdentifiersFromDevice(this.device);
-    if (!identifiers) {
+    if (!this._nodeId || !this._entryId) {
       return;
     }
-    this._nodeId = identifiers.node_id;
-
-    const configEntries = await getConfigEntries(this.hass, {
-      domain: "zwave_js",
-    });
-
-    const configEntry = configEntries.find((entry) =>
-      this.device.config_entries.includes(entry.entry_id)
-    );
-
-    if (!configEntry) {
-      return;
-    }
-
-    this._entryId = configEntry.entry_id;
 
     this._node = await fetchZwaveNodeStatus(
       this.hass,
@@ -149,9 +137,3 @@ export class HaDeviceActionsZWaveJS extends LitElement {
     ];
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-device-actions-zwave_js": HaDeviceActionsZWaveJS;
-  }
-}

src/panels/config/devices/device-detail/integration-elements/zwave_js/ha-device-info-zwave_js.ts

@@ -39,38 +39,40 @@ export class HaDeviceInfoZWaveJS extends LitElement {
 
   @state() private _node?: ZWaveJSNodeStatus;
 
-  public willUpdate(changedProperties: PropertyValues) {
+  protected updated(changedProperties: PropertyValues) {
     if (changedProperties.has("device")) {
+      const identifiers: ZWaveJSNodeIdentifiers | undefined =
+        getZwaveJsIdentifiersFromDevice(this.device);
+      if (!identifiers) {
+        return;
+      }
+      this._nodeId = identifiers.node_id;
+      this._entryId = this.device.config_entries[0];
+
       this._fetchNodeDetails();
     }
   }
 
   protected async _fetchNodeDetails() {
-    this._node = undefined;
-
-    const identifiers: ZWaveJSNodeIdentifiers | undefined =
-      getZwaveJsIdentifiersFromDevice(this.device);
-    if (!identifiers) {
+    if (!this._nodeId || !this._entryId) {
       return;
     }
-    this._nodeId = identifiers.node_id;
 
     const configEntries = await getConfigEntries(this.hass, {
       domain: "zwave_js",
     });
-
-    this._configEntry = configEntries.find((entry) =>
-      this.device.config_entries.includes(entry.entry_id)
-    );
-
-    if (!this._configEntry) {
-      return;
-    }
-
-    this._entryId = this._configEntry.entry_id;
-
-    if (configEntries.length > 1) {
-      this._multipleConfigEntries = true;
+    let zwaveJsConfEntries = 0;
+    for (const entry of configEntries) {
+      if (zwaveJsConfEntries) {
+        this._multipleConfigEntries = true;
+      }
+      if (entry.entry_id === this._entryId) {
+        this._configEntry = entry;
+      }
+      if (this._configEntry && this._multipleConfigEntries) {
+        break;
+      }
+      zwaveJsConfEntries++;
     }
 
     this._node = await fetchZwaveNodeStatus(

src/panels/config/devices/ha-config-device-page.ts

@@ -579,7 +579,7 @@ export class HaConfigDevicePage extends LitElement {
             ${
               isComponentLoaded(this.hass, "automation")
                 ? html`
-                    <ha-card outlined>
+                    <ha-card>
                       <h1 class="card-header">
                         ${this.hass.localize(
                           "ui.panel.config.devices.automation.automations_heading"
@@ -673,7 +673,7 @@ export class HaConfigDevicePage extends LitElement {
             ${
               isComponentLoaded(this.hass, "scene") && entities.length
                 ? html`
-                    <ha-card outlined>
+                    <ha-card>
                       <h1 class="card-header">
                         ${this.hass.localize(
                           "ui.panel.config.devices.scene.scenes_heading"
@@ -771,7 +771,7 @@ export class HaConfigDevicePage extends LitElement {
               ${
                 isComponentLoaded(this.hass, "script")
                   ? html`
-                      <ha-card outlined>
+                      <ha-card>
                         <h1 class="card-header">
                           ${this.hass.localize(
                             "ui.panel.config.devices.script.scripts_heading"
@@ -895,12 +895,13 @@ export class HaConfigDevicePage extends LitElement {
   }
 
   private _renderIntegrationInfo(
-    device: DeviceRegistryEntry,
+    device,
     integrations: ConfigEntry[],
     deviceInfo: TemplateResult[],
     deviceActions: (string | TemplateResult)[]
-  ) {
+  ): TemplateResult[] {
     const domains = integrations.map((int) => int.domain);
+    const templates: TemplateResult[] = [];
     if (domains.includes("mqtt")) {
       import(
         "./device-detail/integration-elements/mqtt/ha-device-actions-mqtt"
@@ -948,6 +949,7 @@ export class HaConfigDevicePage extends LitElement {
         ></ha-device-actions-zwave_js>
       `);
     }
+    return templates;
   }
 
   private async _showSettings() {

src/panels/config/energy/components/ha-energy-battery-settings.ts

@@ -51,7 +51,7 @@ export class EnergyBatterySettings extends LitElement {
     });
 
     return html`
-      <ha-card outlined>
+      <ha-card>
         <h1 class="card-header">
           <ha-svg-icon .path=${mdiBatteryHigh}></ha-svg-icon>
           ${this.hass.localize("ui.panel.config.energy.battery.title")}

src/panels/config/energy/components/ha-energy-device-settings.ts

@@ -36,7 +36,7 @@ export class EnergyDeviceSettings extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <ha-card outlined>
+      <ha-card>
         <h1 class="card-header">
           <ha-svg-icon .path=${mdiDevices}></ha-svg-icon>
           ${this.hass.localize(

src/panels/config/energy/components/ha-energy-gas-settings.ts

@@ -51,7 +51,7 @@ export class EnergyGasSettings extends LitElement {
     });
 
     return html`
-      <ha-card outlined>
+      <ha-card>
         <h1 class="card-header">
           <ha-svg-icon .path=${mdiFire}></ha-svg-icon>
           ${this.hass.localize("ui.panel.config.energy.gas.title")}

src/panels/config/energy/components/ha-energy-grid-settings.ts

@@ -80,7 +80,7 @@ export class EnergyGridSettings extends LitElement {
     }
 
     return html`
-      <ha-card outlined>
+      <ha-card>
         <h1 class="card-header">
           <ha-svg-icon .path=${mdiTransmissionTower}></ha-svg-icon>
           ${this.hass.localize("ui.panel.config.energy.grid.title")}

src/panels/config/energy/components/ha-energy-solar-settings.ts

@@ -54,7 +54,7 @@ export class EnergySolarSettings extends LitElement {
     });
 
     return html`
-      <ha-card outlined>
+      <ha-card>
         <h1 class="card-header">
           <ha-svg-icon .path=${mdiSolarPower}></ha-svg-icon>
           ${this.hass.localize("ui.panel.config.energy.solar.title")}

src/panels/config/ha-panel-config.ts

@@ -256,68 +256,68 @@ export const configSections: { [name: string]: PageNavigation[] } = {
   general: [
     {
       path: "/config/general",
-      translationKey: "core",
+      translationKey: "ui.panel.config.core.caption",
       iconPath: mdiCog,
       iconColor: "#653249",
       core: true,
     },
     {
       path: "/config/updates",
-      translationKey: "updates",
+      translationKey: "ui.panel.config.updates.caption",
       iconPath: mdiUpdate,
       iconColor: "#3B808E",
     },
     {
       component: "logs",
       path: "/config/logs",
-      translationKey: "logs",
+      translationKey: "ui.panel.config.logs.caption",
       iconPath: mdiMathLog,
       iconColor: "#C65326",
       core: true,
     },
     {
       path: "/config/backup",
-      translationKey: "backup",
+      translationKey: "ui.panel.config.backup.caption",
       iconPath: mdiBackupRestore,
       iconColor: "#0D47A1",
       component: "backup",
     },
     {
       path: "/hassio/backups",
-      translationKey: "backup",
+      translationKey: "ui.panel.config.backup.caption",
       iconPath: mdiBackupRestore,
       iconColor: "#0D47A1",
       component: "hassio",
     },
     {
       path: "/config/analytics",
-      translationKey: "analytics",
+      translationKey: "ui.panel.config.analytics.caption",
       iconPath: mdiShape,
       iconColor: "#f1c447",
     },
     {
       path: "/config/network",
-      translationKey: "network",
+      translationKey: "ui.panel.config.network.caption",
       iconPath: mdiNetwork,
       iconColor: "#B1345C",
     },
     {
       path: "/config/storage",
-      translationKey: "storage",
+      translationKey: "ui.panel.config.storage.caption",
       iconPath: mdiDatabase,
       iconColor: "#518C43",
       component: "hassio",
     },
     {
       path: "/config/hardware",
-      translationKey: "hardware",
+      translationKey: "ui.panel.config.hardware.caption",
       iconPath: mdiMemory,
       iconColor: "#301A8E",
       component: "hassio",
     },
     {
       path: "/config/system_health",
-      translationKey: "system_health",
+      translationKey: "ui.panel.config.system_health.caption",
       iconPath: mdiHeart,
       iconColor: "#507FfE",
       components: ["system_health", "hassio"],

src/panels/config/integrations/ha-integration-card.ts

@@ -52,6 +52,7 @@ import type { ConfigEntryExtended } from "./ha-config-integrations";
 import "./ha-integration-header";
 
 const integrationsWithPanel = {
+  hassio: "/hassio/dashboard",
   mqtt: "/config/mqtt",
   zha: "/config/zha/dashboard",
   zwave_js: "/config/zwave_js/dashboard",

src/panels/config/logs/error-log-card.ts

@@ -21,7 +21,6 @@ import { fetchErrorLog } from "../../../data/error_log";
 import { extractApiErrorMessage } from "../../../data/hassio/common";
 import { fetchHassioLogs } from "../../../data/hassio/supervisor";
 import { HomeAssistant } from "../../../types";
-import { debounce } from "../../../common/util/debounce";
 
 @customElement("error-log-card")
 class ErrorLogCard extends LitElement {
@@ -77,12 +76,6 @@ class ErrorLogCard extends LitElement {
     `;
   }
 
-  private _debounceSearch = debounce(
-    () => (this._isLogLoaded ? this._refreshLogs() : this._debounceSearch()),
-    150,
-    false
-  );
-
   protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
 
@@ -100,15 +93,11 @@ class ErrorLogCard extends LitElement {
     }
 
     if (
+      (changedProps.has("filter") && this._isLogLoaded) ||
       (changedProps.has("show") && this.show) ||
       (changedProps.has("provider") && this.show)
     ) {
       this._refreshLogs();
-      return;
-    }
-
-    if (changedProps.has("filter")) {
-      this._debounceSearch();
     }
   }
 
@@ -127,18 +116,6 @@ class ErrorLogCard extends LitElement {
     if (isComponentLoaded(this.hass, "hassio")) {
       try {
         log = await fetchHassioLogs(this.hass, this.provider);
-        if (this.filter) {
-          log = log
-            .split("\n")
-            .filter((entry) =>
-              entry.toLowerCase().includes(this.filter.toLowerCase())
-            )
-            .join("\n");
-        }
-        if (!log) {
-          this._logHTML = this.hass.localize("ui.panel.config.logs.no_errors");
-          return;
-        }
         this._logHTML = html`<ha-ansi-to-html .content=${log}>
         </ha-ansi-to-html>`;
         this._isLogLoaded = true;
@@ -159,33 +136,31 @@ class ErrorLogCard extends LitElement {
 
     this._isLogLoaded = true;
 
-    const split = log && log.split("\n");
+    this._logHTML = log
+      ? log
+          .split("\n")
+          .filter((entry) => {
+            if (this.filter) {
+              return entry.toLowerCase().includes(this.filter.toLowerCase());
+            }
+            return entry;
+          })
+          .map((entry) => {
+            if (entry.includes("INFO"))
+              return html`<div class="info">${entry}</div>`;
 
-    this._logHTML = split
-      ? (this.filter
-          ? split.filter((entry) => {
-              if (this.filter) {
-                return entry.toLowerCase().includes(this.filter.toLowerCase());
-              }
-              return entry;
-            })
-          : split
-        ).map((entry) => {
-          if (entry.includes("INFO"))
-            return html`<div class="info">${entry}</div>`;
+            if (entry.includes("WARNING"))
+              return html`<div class="warning">${entry}</div>`;
 
-          if (entry.includes("WARNING"))
-            return html`<div class="warning">${entry}</div>`;
+            if (
+              entry.includes("ERROR") ||
+              entry.includes("FATAL") ||
+              entry.includes("CRITICAL")
+            )
+              return html`<div class="error">${entry}</div>`;
 
-          if (
-            entry.includes("ERROR") ||
-            entry.includes("FATAL") ||
-            entry.includes("CRITICAL")
-          )
-            return html`<div class="error">${entry}</div>`;
-
-          return html`<div>${entry}</div>`;
-        })
+            return html`<div>${entry}</div>`;
+          })
       : this.hass.localize("ui.panel.config.logs.no_errors");
   }
 

src/panels/config/logs/ha-config-logs.ts

@@ -6,7 +6,6 @@ import { extractSearchParam } from "../../../common/url/search-params";
 import "../../../components/ha-button-menu";
 import "../../../components/search-input";
 import { LogProvider } from "../../../data/error_log";
-import { fetchHassioSupervisorInfo } from "../../../data/hassio/supervisor";
 import "../../../layouts/hass-subpage";
 import "../../../layouts/hass-tabs-subpage";
 import { haStyle } from "../../../resources/styles";
@@ -60,8 +59,6 @@ export class HaConfigLogs extends LitElement {
 
   @state() private _selectedLogProvider = "core";
 
-  @state() private _logProviders = logProviders;
-
   public connectedCallback() {
     super.connectedCallback();
     if (this.systemLog && this.systemLog.loaded) {
@@ -69,13 +66,6 @@ export class HaConfigLogs extends LitElement {
     }
   }
 
-  protected firstUpdated(changedProps): void {
-    super.firstUpdated(changedProps);
-    if (isComponentLoaded(this.hass, "hassio")) {
-      this._getInstalledAddons();
-    }
-  }
-
   private async _filterChanged(ev) {
     this._filter = ev.detail.value;
   }
@@ -117,7 +107,7 @@ export class HaConfigLogs extends LitElement {
               <ha-button-menu corner="BOTTOM_START" slot="toolbar-icon">
                 <mwc-button
                   slot="trigger"
-                  .label=${this._logProviders.find(
+                  .label=${logProviders.find(
                     (p) => p.key === this._selectedLogProvider
                   )!.name}
                 >
@@ -126,7 +116,7 @@ export class HaConfigLogs extends LitElement {
                     .path=${mdiChevronDown}
                   ></ha-svg-icon>
                 </mwc-button>
-                ${this._logProviders.map(
+                ${logProviders.map(
                   (provider) => html`
                     <mwc-list-item
                       ?selected=${provider.key === this._selectedLogProvider}
@@ -165,21 +155,6 @@ export class HaConfigLogs extends LitElement {
     this._selectedLogProvider = (ev.currentTarget as any).provider;
   }
 
-  private async _getInstalledAddons() {
-    try {
-      const supervisorInfo = await fetchHassioSupervisorInfo(this.hass);
-      this._logProviders = [
-        ...this._logProviders,
-        ...supervisorInfo.addons.map((addon) => ({
-          key: addon.slug,
-          name: addon.name,
-        })),
-      ];
-    } catch (err) {
-      // Ignore, nothing the user can do anyway
-    }
-  }
-
   static get styles(): CSSResultGroup {
     return [
       haStyle,

src/panels/config/person/ha-config-person.ts

@@ -88,7 +88,7 @@ class HaConfigPerson extends LitElement {
             </a>
           </span>
 
-          <ha-card outlined class="storage">
+          <ha-card class="storage">
             ${this._storageItems.map(
               (entry) => html`
                 <paper-icon-item @click=${this._openEditEntry} .entry=${entry}>
@@ -117,7 +117,7 @@ class HaConfigPerson extends LitElement {
           </ha-card>
           ${this._configItems.length > 0
             ? html`
-                <ha-card outlined header="Configuration.yaml persons">
+                <ha-card header="Configuration.yaml persons">
                   ${this._configItems.map(
                     (entry) => html`
                       <paper-icon-item>

src/panels/config/scene/ha-scene-editor.ts

@@ -287,7 +287,7 @@ export class HaSceneEditor extends SubscribeMixin(
                       "ui.panel.config.scene.editor.introduction"
                     )}
                   </div>
-                  <ha-card outlined>
+                  <ha-card>
                     <div class="card-content">
                       <ha-textfield
                         .value=${this._config.name}
@@ -335,7 +335,7 @@ export class HaSceneEditor extends SubscribeMixin(
                   ${devices.map(
                     (device) =>
                       html`
-                        <ha-card outlined>
+                        <ha-card>
                           <h1 class="card-header">
                             ${device.name}
                             <ha-icon-button
@@ -373,7 +373,6 @@ export class HaSceneEditor extends SubscribeMixin(
                   )}
 
                   <ha-card
-                    outlined
                     .header=${this.hass.localize(
                       "ui.panel.config.scene.editor.devices.add"
                     )}
@@ -406,7 +405,6 @@ export class HaSceneEditor extends SubscribeMixin(
                         ${entities.length
                           ? html`
                               <ha-card
-                                outlined
                                 class="entities"
                                 .header=${this.hass.localize(
                                   "ui.panel.config.scene.editor.entities.without_device"
@@ -447,7 +445,6 @@ export class HaSceneEditor extends SubscribeMixin(
                           : ""}
 
                         <ha-card
-                          outlined
                           header=${this.hass.localize(
                             "ui.panel.config.scene.editor.entities.add"
                           )}

src/panels/config/script/blueprint-script-editor.ts

@@ -51,7 +51,7 @@ export class HaBlueprintScriptEditor extends LitElement {
           "ui.panel.config.automation.editor.blueprint.header"
         )}</span
       >
-      <ha-card outlined>
+      <ha-card>
         <div class="blueprint-picker-container">
           ${this._blueprints
             ? Object.keys(this._blueprints).length

src/panels/config/script/ha-script-editor.ts

@@ -290,7 +290,7 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
                               "ui.panel.config.script.editor.introduction"
                             )}
                           </span>
-                          <ha-card outlined>
+                          <ha-card>
                             <div class="card-content">
                               <ha-form
                                 .schema=${schema}
@@ -387,8 +387,8 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
             ? html`
                 ${!this.narrow
                   ? html`
-                      <ha-card outlined>
-                        <div class="card-header">${this._config?.alias}</div>
+                      <ha-card
+                        ><div class="card-header">${this._config?.alias}</div>
                         <div
                           class="card-actions layout horizontal justified center"
                         >
@@ -412,8 +412,8 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
                   .defaultValue=${this._preprocessYaml()}
                   @value-changed=${this._yamlChanged}
                 ></ha-yaml-editor>
-                <ha-card outlined>
-                  <div class="card-actions">
+                <ha-card
+                  ><div class="card-actions">
                     <mwc-button @click=${this._copyYaml}>
                       ${this.hass.localize(
                         "ui.panel.config.automation.editor.copy_to_clipboard"

src/panels/config/storage/ha-config-section-storage.ts

@@ -3,7 +3,6 @@ import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import "../../../components/ha-alert";
-import "../../../components/ha-button-menu";
 import "../../../components/ha-metric";
 import { fetchHassioHostInfo, HassioHostInfo } from "../../../data/hassio/host";
 import "../../../layouts/hass-subpage";

src/panels/config/tags/ha-config-tags.ts

@@ -9,6 +9,7 @@ import { html, LitElement, PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { DataTableColumnContainer } from "../../../components/data-table/ha-data-table";
+import "../../../components/ha-card";
 import "../../../components/ha-fab";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-relative-time";

src/panels/config/zone/ha-config-zone.ts

@@ -228,7 +228,7 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
                 <span slot="introduction">
                   ${hass.localize("ui.panel.config.zone.introduction")}
                 </span>
-                <ha-card outlined>${listBox}</ha-card>
+                <ha-card>${listBox}</ha-card>
               </ha-config-section>
             `
           : ""}
@@ -471,6 +471,7 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
         color: var(--primary-color);
       }
       ha-card {
+        max-width: 600px;
         margin: 16px auto;
         overflow: hidden;
       }

src/panels/lovelace/hui-root.ts

@@ -266,14 +266,10 @@ class HUIRoot extends LitElement {
                         </ha-tabs>
                       `
                     : html`<div main-title>${this.config.title}</div>`}
-                  ${!this.narrow
-                    ? html`
-                        <ha-icon-button
-                          .path=${mdiMagnify}
-                          @click=${this._showQuickBar}
-                        ></ha-icon-button>
-                      `
-                    : ""}
+                  <ha-icon-button
+                    .path=${mdiMagnify}
+                    @click=${this._showQuickBar}
+                  ></ha-icon-button>
                   ${!this.narrow &&
                   this._conversation(this.hass.config.components)
                     ? html`
@@ -296,28 +292,6 @@ class HUIRoot extends LitElement {
                             )}
                             .path=${mdiDotsVertical}
                           ></ha-icon-button>
-
-                          ${this.narrow
-                            ? html`
-                                <mwc-list-item
-                                  .label=${this.hass!.localize(
-                                    "ui.panel.lovelace.menu.search"
-                                  )}
-                                  graphic="icon"
-                                  @request-selected=${this._showQuickBar}
-                                >
-                                  <span
-                                    >${this.hass!.localize(
-                                      "ui.panel.lovelace.menu.search"
-                                    )}</span
-                                  >
-                                  <ha-svg-icon
-                                    slot="graphic"
-                                    .path=${mdiMagnify}
-                                  ></ha-svg-icon>
-                                </mwc-list-item>
-                              `
-                            : ""}
                           ${this.narrow &&
                           this._conversation(this.hass.config.components)
                             ? html`

src/translations/en.json

@@ -676,30 +676,18 @@
             "areas": "[%key:ui::panel::config::areas::caption%]",
             "scene": "[%key:ui::panel::config::scene::caption%]",
             "helpers": "[%key:ui::panel::config::helpers::caption%]",
-            "tags": "[%key:ui::panel::config::tag::caption%]",
+            "tag": "[%key:ui::panel::config::tag::caption%]",
             "person": "[%key:ui::panel::config::person::caption%]",
             "devices": "[%key:ui::panel::config::devices::caption%]",
             "entities": "[%key:ui::panel::config::entities::caption%]",
             "energy": "Energy Configuration",
             "lovelace": "[%key:ui::panel::config::lovelace::caption%]",
+            "core": "[%key:ui::panel::config::core::caption%]",
             "zone": "[%key:ui::panel::config::zone::caption%]",
             "users": "[%key:ui::panel::config::users::caption%]",
             "info": "[%key:ui::panel::config::info::caption%]",
-            "network": "[%key:ui::panel::config::network::caption%]",
-            "updates": "[%key:ui::panel::config::updates::caption%]",
-            "hardware": "[%key:ui::panel::config::hardware::caption%]",
-            "storage": "[%key:ui::panel::config::storage::caption%]",
-            "general": "[%key:ui::panel::config::core::caption%]",
-            "backups": "[%key:ui::panel::config::backup::caption%]",
-            "backup": "[%key:ui::panel::config::backup::caption%]",
-            "analytics": "[%key:ui::panel::config::analytics::caption%]",
-            "system_health": "[%key:ui::panel::config::system_health::caption%]",
             "blueprint": "[%key:ui::panel::config::blueprint::caption%]",
-            "server_control": "[%key:ui::panel::developer-tools::tabs::yaml::title%]",
-            "system": "[%key:ui::panel::config::dashboard::system::main%]",
-            "addon_dashboard": "Add-on Dashboard",
-            "addon_store": "Add-on Store",
-            "addon_info": "{addon} Info"
+            "server_control": "[%key:ui::panel::developer-tools::tabs::yaml::title%]"
           }
         },
         "filter_placeholder": "Entity Filter",
@@ -1144,7 +1132,7 @@
           },
           "tags": {
             "main": "Tags",
-            "secondary": "Setup NFC tags and QR codes"
+            "secondary": "Manage NFC tags and QR codes"
           },
           "people": {
             "main": "People",
@@ -1175,7 +1163,6 @@
         },
         "updates": {
           "caption": "Updates",
-          "description": "Manage updates of Home Assistant, add-ons and devices",
           "no_updates": "No updates available",
           "no_update_entities": {
             "title": "Unable to check for updates",
@@ -1183,7 +1170,7 @@
           },
           "check_updates": "Check for updates",
           "no_new_updates": "No new updates found",
-          "updates_refreshed": "{count} {count, plural,\n  one {update}\n  other {updates}\n} refreshed",
+          "updates_refreshed": "Updates refreshed",
           "title": "{count} {count, plural,\n  one {update}\n  other {updates}\n}",
           "unable_to_fetch": "Unable to load updates",
           "version_available": "Version {version_available} is available",
@@ -1234,8 +1221,6 @@
         },
         "backup": {
           "caption": "Backups",
-          "description": "Last backup {relative_time}",
-          "description_no_backup": "Manage backups and restore Home Assistant to a previous state",
           "create_backup": "[%key:supervisor::backup::create_backup%]",
           "creating_backup": "Backup is currently being created",
           "download_backup": "[%key:supervisor::backup::download_backup%]",
@@ -1490,7 +1475,7 @@
         },
         "core": {
           "caption": "General",
-          "description": "Name, time zone and locale settings",
+          "description": "Location, network and analytics",
           "section": {
             "core": {
               "header": "General Configuration",
@@ -1532,7 +1517,6 @@
         },
         "hardware": {
           "caption": "Hardware",
-          "description": "Configure your hub and connected hardware",
           "available_hardware": {
             "failed_to_get": "Failed to get available hardware",
             "title": "All Hardware",
@@ -1577,7 +1561,7 @@
         },
         "logs": {
           "caption": "Logs",
-          "description": "View and search logs to diagnose issues",
+          "description": "View the Home Assistant logs",
           "details": "Log Details ({level})",
           "search": "Search logs",
           "failed_get_logs": "Failed to get {provider} logs, {error}",
@@ -2246,7 +2230,7 @@
           }
         },
         "cloud": {
-          "description_login": "Logged in and connected",
+          "description_login": "Logged in as {email}",
           "description_not_login": "Not logged in",
           "description_features": "Control home when away and integrate with Alexa and Google Assistant",
           "login": {
@@ -3138,14 +3122,10 @@
           "join": "Join the community on our {forums}, {twitter}, {discord}, {blog} or {newsletter}"
         },
         "analytics": {
-          "caption": "Analytics",
-          "description": "Learn how to share data to improve Home Assistant"
+          "caption": "Analytics"
         },
         "network": {
           "caption": "Network",
-          "description": "External access {state}",
-          "enabled": "enabled",
-          "disabled": "disabled",
           "supervisor": {
             "title": "Configure network interfaces",
             "connected_to": "Connected to {ssid}",
@@ -3166,7 +3146,6 @@
         },
         "storage": {
           "caption": "Storage",
-          "description": "{percent_used} used - {free_space} free",
           "used_space": "Used Space",
           "emmc_lifetime_used": "eMMC Lifetime Used",
           "datadisk": {
@@ -3184,11 +3163,10 @@
         },
         "system_health": {
           "caption": "System Health",
-          "description": "Status, metrics and integration startup time",
           "cpu_usage": "Processor Usage",
           "ram_usage": "Memory Usage",
-          "core_stats": "Core Metrics",
-          "supervisor_stats": "Supervisor Metrics",
+          "core_stats": "Core Stats",
+          "supervisor_stats": "Supervisor Stats",
           "integration_start_time": "Integration Startup Time"
         },
         "system_dashboard": {
@@ -3336,7 +3314,6 @@
         "menu": {
           "configure_ui": "Edit Dashboard",
           "help": "Help",
-          "search": "Search",
           "start_conversation": "Start conversation",
           "reload_resources": "Reload resources",
           "exit_edit_mode": "Done",

test/common/string/sequence_matching.test.ts

@@ -1,8 +1,7 @@
-import { assert } from "chai";
+import { assert, expect } from "chai";
 
 import {
-  fuzzyFilterSort,
-  fuzzySequentialMatch,
+  fuzzySortFilterSort,
   ScorableTextItem,
 } from "../../../src/common/string/filter/sequence-matching";
 
@@ -11,45 +10,34 @@ describe("fuzzySequentialMatch", () => {
     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),
-    createExpectation("automation.", 82),
-    createExpectation("au", 10),
-    createExpectation("automationticker", 85),
-    createExpectation("tion.tick", 8),
-    createExpectation("ticker", -4),
-    createExpectation("automation.r", 73),
-    createExpectation("tick", -8),
-    createExpectation("aumatick", 9),
-    createExpectation("aion.tck", 4),
-    createExpectation("ioticker", -4),
-    createExpectation("atmto.ikr", -34),
-    createExpectation("uoaintce", -39),
-    createExpectation("au.tce", -3),
-    createExpectation("tomaontkr", -19),
-    createExpectation("s", 1),
-    createExpectation("stocks", 42),
-    createExpectation("sks", -5),
+    "",
+    " ",
+    "automation.ticker",
+    "stocks",
+    "automation.ticke",
+    "automation. ticke",
+    "automation.",
+    "automationticker",
+    "automation.r",
+    "aumatick",
+    "tion.tick",
+    "aion.tck",
+    "s",
+    "au.tce",
+    "au",
+    "ticker",
+    "tick",
+    "ioticker",
+    "sks",
+    "tomaontkr",
+    "atmto.ikr",
+    "uoaintce",
   ];
 
   const shouldNotMatchEntity = [
-    "",
-    " ",
     "abcdefghijklmnopqrstuvwxyz",
     "automation.tickerz",
-    "automation. ticke",
     "1",
     "noitamotua",
     "autostocks",
@@ -57,23 +45,23 @@ describe("fuzzySequentialMatch", () => {
   ];
 
   describe(`Entity '${item.strings[0]}'`, () => {
-    for (const expectation of shouldMatchEntity) {
-      it(`matches '${expectation.pattern}' with return of '${expectation.expected}'`, () => {
-        const res = fuzzySequentialMatch(expectation.pattern, item);
-        assert.equal(res, expectation.expected);
+    for (const filter of shouldMatchEntity) {
+      it(`Should matches ${filter}`, () => {
+        const res = fuzzySortFilterSort(filter, [item]);
+        assert.lengthOf(res, 1);
       });
     }
 
     for (const badFilter of shouldNotMatchEntity) {
       it(`fails to match with '${badFilter}'`, () => {
-        const res = fuzzySequentialMatch(badFilter, item);
-        assert.equal(res, undefined);
+        const res = fuzzySortFilterSort(badFilter, [item]);
+        assert.lengthOf(res, 0);
       });
     }
   });
 });
 
-describe("fuzzyFilterSort", () => {
+describe("fuzzyFilterSort original tests", () => {
   const filter = "ticker";
   const automationTicker = {
     strings: ["automation.ticker", "Stocks"],
@@ -105,14 +93,137 @@ describe("fuzzyFilterSort", () => {
 
   it(`filters and sorts correctly`, () => {
     const expectedItemsAfterFilter = [
-      { ...ticker, score: 44 },
-      { ...sensorTicker, score: 1 },
-      { ...automationTicker, score: -4 },
-      { ...timerCheckRouter, score: -8 },
+      { ...ticker, score: 0 },
+      { ...sensorTicker, score: -14 },
+      { ...automationTicker, score: -22 },
+      { ...timerCheckRouter, score: -32012 },
     ];
 
-    const res = fuzzyFilterSort(filter, itemsBeforeFilter);
+    const res = fuzzySortFilterSort(filter, itemsBeforeFilter);
 
     assert.deepEqual(res, expectedItemsAfterFilter);
   });
 });
+
+describe("Fuzzy filter new tests", () => {
+  const testEntities = [
+    {
+      id: "binary_sensor.garage_door_opened",
+      name: "Garage Door Opened (Sensor, Binary)",
+    },
+    {
+      id: "sensor.garage_door_status",
+      name: "Garage Door Opened (Sensor)",
+    },
+    {
+      id: "sensor.temperature_living_room",
+      name: "[Living room] temperature",
+    },
+    {
+      id: "sensor.temperature_parents_bedroom",
+      name: "[Parents bedroom] temperature",
+    },
+    {
+      id: "sensor.temperature_children_bedroom",
+      name: "[Children bedroom] temperature",
+    },
+  ];
+
+  function testEntitySearch(
+    searchInput: string | null,
+    expectedResults: string[]
+  ) {
+    const sortableEntities = testEntities.map((entity) => ({
+      strings: [entity.id, entity.name],
+      entity: entity,
+    }));
+    const sortedEntities = fuzzySortFilterSort(
+      searchInput || "",
+      sortableEntities
+    );
+    // console.log(sortedEntities);
+    expect(sortedEntities.map((it) => it.entity.id)).to.have.ordered.members(
+      expectedResults
+    );
+  }
+
+  it(`test empty or null query`, () => {
+    testEntitySearch(
+      "",
+      testEntities.map((it) => it.id)
+    );
+    testEntitySearch(
+      null,
+      testEntities.map((it) => it.id)
+    );
+  });
+
+  it(`test single word search`, () => {
+    testEntitySearch("bedroom", [
+      "sensor.temperature_parents_bedroom",
+      "sensor.temperature_children_bedroom",
+    ]);
+  });
+
+  it(`test no result`, () => {
+    testEntitySearch("does not exist", []);
+    testEntitySearch("betroom", []);
+  });
+
+  it(`test single word search with typo`, () => {
+    testEntitySearch("bedorom", [
+      "sensor.temperature_parents_bedroom",
+      "sensor.temperature_children_bedroom",
+    ]);
+  });
+
+  it(`test multi word search`, () => {
+    testEntitySearch("bedroom children", [
+      "sensor.temperature_children_bedroom",
+    ]);
+  });
+
+  it(`test partial word search`, () => {
+    testEntitySearch("room", [
+      "sensor.temperature_living_room",
+      "sensor.temperature_parents_bedroom",
+      "sensor.temperature_children_bedroom",
+    ]);
+  });
+
+  it(`test mixed cased word search`, () => {
+    testEntitySearch("garage binary", ["binary_sensor.garage_door_opened"]);
+  });
+
+  it(`test mixed id and name search`, () => {
+    testEntitySearch("status opened", ["sensor.garage_door_status"]);
+  });
+
+  it(`test special chars in query`, () => {
+    testEntitySearch("sensor.temperature", [
+      "sensor.temperature_living_room",
+      "sensor.temperature_parents_bedroom",
+      "sensor.temperature_children_bedroom",
+    ]);
+
+    testEntitySearch("sensor.temperature parents", [
+      "sensor.temperature_parents_bedroom",
+    ]);
+    testEntitySearch("parents_Bedroom", ["sensor.temperature_parents_bedroom"]);
+  });
+
+  it(`test search in name`, () => {
+    testEntitySearch("Binary)", ["binary_sensor.garage_door_opened"]);
+
+    testEntitySearch("Binary)NotExists", []);
+  });
+
+  it(`test regex special chars`, () => {
+    // Should return an empty result, but no error
+    testEntitySearch("\\{}()*+?.,[])", []);
+
+    testEntitySearch("[Children bedroom]", [
+      "sensor.temperature_children_bedroom",
+    ]);
+  });
+});

yarn.lock

@@ -8433,6 +8433,13 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
+"fuzzysort@npm:^1.2.1":
+  version: 1.2.1
+  resolution: "fuzzysort@npm:1.2.1"
+  checksum: 74dad902a0aef6c3237d5ae5330aacca23d408f0e07125fcc39b57561b4c29da512fbf3826c3f3918da89f132f5b393cf5d56b3217282ecfb80a90124bdf03d1
+  languageName: node
+  linkType: hard
+
 "gauge@npm:~2.7.3":
   version: 2.7.4
   resolution: "gauge@npm:2.7.4"
@@ -9119,6 +9126,7 @@ fsevents@^1.2.7:
     fancy-log: ^1.3.3
     fs-extra: ^7.0.1
     fuse.js: ^6.0.0
+    fuzzysort: ^1.2.1
     glob: ^7.2.0
     google-timezones-json: ^1.0.2
     gulp: ^4.0.2