Logs are default

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

gallery/src/pages/automation/describe-action.ts

@@ -77,9 +77,29 @@ const ACTIONS = [
     stop: "No one is home!",
   },
   { repeat: { count: 3, sequence: [{ delay: "00:00:01" }] } },
+  {
+    repeat: {
+      for_each: ["bread", "butter", "cheese"],
+      sequence: [{ delay: "00:00:01" }],
+    },
+  },
   {
     if: [{ condition: "state" }],
     then: [{ delay: "00:00:01" }],
+    else: [{ delay: "00:00:05" }],
+  },
+  {
+    choose: [
+      {
+        conditions: [{ condition: "state" }],
+        sequence: [{ delay: "00:00:01" }],
+      },
+      {
+        conditions: [{ condition: "sun" }],
+        sequence: [{ delay: "00:00:05" }],
+      },
+    ],
+    default: [{ delay: "00:00:03" }],
   },
 ];
 

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

@@ -68,6 +68,7 @@ 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,6 +50,7 @@ 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>
+      <ha-card outlined>
         <div class="header">
           <h2>
             ${this.supervisor.localize("addon.configuration.options.header")}

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

@@ -58,6 +58,7 @@ 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>
+        <ha-card outlined>
           ${this._error
             ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
             : ""}

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

@@ -17,7 +17,9 @@ import {
   HassioAddonDetails,
 } from "../../../src/data/hassio/addon";
 import { extractApiErrorMessage } from "../../../src/data/hassio/common";
+import { setSupervisorOption } from "../../../src/data/hassio/supervisor";
 import { Supervisor } from "../../../src/data/supervisor/supervisor";
+import { showConfirmationDialog } from "../../../src/dialogs/generic/show-dialog-box";
 import "../../../src/layouts/hass-error-screen";
 import "../../../src/layouts/hass-loading-screen";
 import "../../../src/layouts/hass-tabs-subpage";
@@ -166,6 +168,42 @@ class HassioAddonDashboard extends LitElement {
   protected async firstUpdated(): Promise<void> {
     if (this.route.path === "") {
       const requestedAddon = extractSearchParam("addon");
+      const requestedAddonRepository = extractSearchParam("repository_url");
+      if (
+        requestedAddonRepository &&
+        !this.supervisor.supervisor.addons_repositories.find(
+          (repo) => repo === requestedAddonRepository
+        )
+      ) {
+        if (
+          !(await showConfirmationDialog(this, {
+            title: this.supervisor.localize("my.add_addon_repository_title"),
+            text: this.supervisor.localize(
+              "my.add_addon_repository_description",
+              { addon: requestedAddon, repository: requestedAddonRepository }
+            ),
+            confirmText: this.supervisor.localize("common.add"),
+            dismissText: this.supervisor.localize("common.cancel"),
+          }))
+        ) {
+          this._error = this.supervisor.localize(
+            "my.error_repository_not_found"
+          );
+          return;
+        }
+
+        try {
+          await setSupervisorOption(this.hass, {
+            addons_repositories: [
+              ...this.supervisor.supervisor.addons_repositories,
+              requestedAddonRepository,
+            ],
+          });
+        } catch (err: any) {
+          this._error = extractApiErrorMessage(err);
+        }
+      }
+
       if (requestedAddon) {
         const addonsInfo = await fetchHassioAddonsInfo(this.hass);
         const validAddon = addonsInfo.addons.some(

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

@@ -166,7 +166,7 @@ class HassioAddonInfo extends LitElement {
           `
         : ""}
 
-      <ha-card>
+      <ha-card outlined>
         <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>
+            <ha-card outlined>
               <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>
+      <ha-card outlined>
         ${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>
+                <ha-card outlined>
                   <div class="card-content">
                     <button class="link" @click=${this._openStore}>
                       ${this.supervisor.localize("dashboard.no_addons")}
@@ -38,7 +38,11 @@ class HassioAddons extends LitElement {
                 .sort((a, b) => caseInsensitiveStringCompare(a.name, b.name))
                 .map(
                   (addon) => html`
-                    <ha-card .addon=${addon} @click=${this._addonTapped}>
+                    <ha-card
+                      outlined
+                      .addon=${addon}
+                      @click=${this._addonTapped}
+                    >
                       <div class="card-content">
                         <hassio-card-content
                           .hass=${this.hass}

hassio/src/hassio-main.ts

@@ -74,7 +74,11 @@ export class HassioMain extends SupervisorBaseElement {
     });
 
     // Forward keydown events to the main window for quickbar access
-    document.body.addEventListener("keydown", (ev) => {
+    document.body.addEventListener("keydown", (ev: KeyboardEvent) => {
+      if (ev.altKey || ev.ctrlKey || ev.shiftKey || ev.metaKey) {
+        // Ignore if modifier keys are pressed
+        return;
+      }
       // @ts-ignore
       fireEvent(mainWindow, "hass-quick-bar-trigger", ev, {
         bubbles: false,

hassio/src/hassio-my-redirect.ts

@@ -42,6 +42,9 @@ export const REDIRECTS: Redirects = {
     params: {
       addon: "string",
     },
+    optional_params: {
+      repository_url: "url",
+    },
   },
   supervisor_ingress: {
     redirect: "/hassio/ingress",
@@ -124,6 +127,14 @@ class HassioMyRedirect extends LitElement {
       }
       resultParams[key] = params[key];
     });
+    Object.entries(redirect.optional_params || {}).forEach(([key, type]) => {
+      if (params[key]) {
+        if (!this._checkParamType(type, params[key])) {
+          throw Error();
+        }
+        resultParams[key] = params[key];
+      }
+    });
     return `?${createSearchParam(resultParams)}`;
   }
 

setup.cfg

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

src/components/ha-clickable-list-item.ts

@@ -12,6 +12,8 @@ export class HaClickableListItem extends ListItemBase {
   // property used only in css
   @property({ type: Boolean, reflect: true }) public rtl = false;
 
+  @property({ type: Boolean, reflect: true }) public openNewTab = false;
+
   @query("a") private _anchor!: HTMLAnchorElement;
 
   public render() {
@@ -20,7 +22,12 @@ export class HaClickableListItem extends ListItemBase {
 
     return html`${this.disableHref
       ? html`<a aria-role="option">${r}</a>`
-      : html`<a aria-role="option" href=${href}>${r}</a>`}`;
+      : html`<a
+          aria-role="option"
+          target=${this.openNewTab ? "_blank" : ""}
+          href=${href}
+          >${r}</a
+        >`}`;
   }
 
   firstUpdated() {

src/components/ha-selector/ha-selector-color-temp.ts

@@ -27,8 +27,8 @@ export class HaColorTempSelector extends LitElement {
         pin
         icon="hass:thermometer"
         .caption=${this.label || ""}
-        .min=${this.selector.color_temp.min_mireds ?? 153}
-        .max=${this.selector.color_temp.max_mireds ?? 500}
+        .min=${this.selector.color_temp?.min_mireds ?? 153}
+        .max=${this.selector.color_temp?.max_mireds ?? 500}
         .value=${this.value}
         .disabled=${this.disabled}
         .helper=${this.helper}

src/components/trace/ha-timeline.ts

@@ -10,6 +10,8 @@ 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;
@@ -76,6 +78,9 @@ 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,6 +114,11 @@ 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

@@ -19,6 +19,8 @@ export class HatGraphNode extends LitElement {
 
   @property({ reflect: true, type: Boolean }) disabled?: boolean;
 
+  @property({ reflect: true, type: Boolean }) notEnabled = false;
+
   @property({ reflect: true, type: Boolean }) graphStart?: boolean;
 
   @property({ type: Boolean, attribute: "nofocus" }) noFocus = false;
@@ -114,8 +116,14 @@ export class HatGraphNode extends LitElement {
         --stroke-clr: var(--hover-clr);
         --icon-clr: var(--default-icon-clr);
       }
-      :host([disabled]) circle {
-        stroke: var(--disabled-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);
       }
       svg {
         width: 100%;

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

@@ -34,6 +34,7 @@ import {
   DeviceAction,
   EventAction,
   IfAction,
+  ManualScriptConfig,
   ParallelAction,
   RepeatAction,
   SceneAction,
@@ -95,6 +96,7 @@ export class HatScriptGraph extends LitElement {
         @focus=${this.selectNode(config, path)}
         ?active=${this.selected === path}
         .iconPath=${mdiAsterisk}
+        .notEnabled=${config.enabled === false}
         tabindex=${track ? "0" : "-1"}
       ></hat-graph-node>
     `;
@@ -111,6 +113,9 @@ export class HatScriptGraph extends LitElement {
 
   private typeRenderers = {
     condition: this.render_condition_node,
+    and: this.render_condition_node,
+    or: this.render_condition_node,
+    not: this.render_condition_node,
     delay: this.render_delay_node,
     event: this.render_event_node,
     scene: this.render_scene_node,
@@ -126,20 +131,31 @@ export class HatScriptGraph extends LitElement {
     other: this.render_other_node,
   };
 
-  private render_action_node(node: Action, path: string, graphStart = false) {
+  private render_action_node(
+    node: Action,
+    path: string,
+    graphStart = false,
+    disabled = false
+  ) {
     const type =
       Object.keys(this.typeRenderers).find((key) => key in node) || "other";
     this.renderedNodes[path] = { config: node, path };
     if (this.trace && path in this.trace.trace) {
       this.trackedNodes[path] = this.renderedNodes[path];
     }
-    return this.typeRenderers[type].bind(this)(node, path, graphStart);
+    return this.typeRenderers[type].bind(this)(
+      node,
+      path,
+      graphStart,
+      disabled
+    );
   }
 
   private render_choose_node(
     config: ChooseAction,
     path: string,
-    graphStart = false
+    graphStart = false,
+    disabled = false
   ) {
     const trace = this.trace.trace[path] as ChooseActionTraceStep[] | undefined;
     const trace_path = trace
@@ -156,12 +172,14 @@ export class HatScriptGraph extends LitElement {
         @focus=${this.selectNode(config, path)}
         ?track=${trace !== undefined}
         ?active=${this.selected === path}
+        .notEnabled=${disabled || config.enabled === false}
       >
         <hat-graph-node
           .graphStart=${graphStart}
           .iconPath=${mdiArrowDecision}
           ?track=${trace !== undefined}
           ?active=${this.selected === path}
+          .notEnabled=${disabled || config.enabled === false}
           slot="head"
           nofocus
         ></hat-graph-node>
@@ -184,12 +202,15 @@ export class HatScriptGraph extends LitElement {
                     @focus=${this.selectNode(config, branch_path)}
                     ?track=${track_this}
                     ?active=${this.selected === branch_path}
+                    .notEnabled=${disabled || config.enabled === false}
                   ></hat-graph-node>
                   ${branch.sequence !== null
                     ? ensureArray(branch.sequence).map((action, j) =>
                         this.render_action_node(
                           action,
-                          `${branch_path}/sequence/${j}`
+                          `${branch_path}/sequence/${j}`,
+                          false,
+                          disabled || config.enabled === false
                         )
                       )
                     : ""}
@@ -201,7 +222,12 @@ export class HatScriptGraph extends LitElement {
           <hat-graph-spacer ?track=${track_default}></hat-graph-spacer>
           ${config.default !== null
             ? ensureArray(config.default)?.map((action, i) =>
-                this.render_action_node(action, `${path}/default/${i}`)
+                this.render_action_node(
+                  action,
+                  `${path}/default/${i}`,
+                  false,
+                  disabled || config.enabled === false
+                )
               )
             : ""}
         </div>
@@ -209,48 +235,77 @@ export class HatScriptGraph extends LitElement {
     `;
   }
 
-  private render_if_node(config: IfAction, path: string, graphStart = false) {
+  private render_if_node(
+    config: IfAction,
+    path: string,
+    graphStart = false,
+    disabled = false
+  ) {
     const trace = this.trace.trace[path] as IfActionTraceStep[] | undefined;
-    const result = trace?.[0].result?.choice;
+    let trackThen = false;
+    let trackElse = false;
+    for (const trc of trace || []) {
+      if (!trackThen && trc.result?.choice === "then") {
+        trackThen = true;
+      }
+      if ((!trackElse && trc.result?.choice === "else") || !trc.result) {
+        trackElse = true;
+      }
+      if (trackElse && trackThen) {
+        break;
+      }
+    }
     return html`
       <hat-graph-branch
         tabindex=${trace === undefined ? "-1" : "0"}
         @focus=${this.selectNode(config, path)}
         ?track=${trace !== undefined}
         ?active=${this.selected === path}
+        .notEnabled=${disabled || config.enabled === false}
       >
         <hat-graph-node
           .graphStart=${graphStart}
           .iconPath=${mdiCallSplit}
           ?track=${trace !== undefined}
           ?active=${this.selected === path}
+          .notEnabled=${disabled || config.enabled === false}
           slot="head"
           nofocus
         ></hat-graph-node>
         ${config.else
-          ? html`<div class="graph-container" ?track=${result === "else"}>
+          ? html`<div class="graph-container" ?track=${trackElse}>
               <hat-graph-node
                 .iconPath=${mdiCallMissed}
-                ?track=${result === "else"}
+                ?track=${trackElse}
                 ?active=${this.selected === path}
+                .notEnabled=${disabled || config.enabled === false}
                 nofocus
               ></hat-graph-node
               >${ensureArray(config.else).map((action, j) =>
-                this.render_action_node(action, `${path}/else/${j}`)
+                this.render_action_node(
+                  action,
+                  `${path}/else/${j}`,
+                  false,
+                  disabled || config.enabled === false
+                )
               )}
             </div>`
-          : html`<hat-graph-spacer
-              ?track=${result === "else" || result === undefined}
-            ></hat-graph-spacer>`}
-        <div class="graph-container" ?track=${result === "then"}>
+          : html`<hat-graph-spacer ?track=${trackElse}></hat-graph-spacer>`}
+        <div class="graph-container" ?track=${trackThen}>
           <hat-graph-node
             .iconPath=${mdiCallReceived}
-            ?track=${result === "then"}
+            ?track=${trackThen}
             ?active=${this.selected === path}
+            .notEnabled=${disabled || config.enabled === false}
             nofocus
           ></hat-graph-node>
           ${ensureArray(config.then).map((action, j) =>
-            this.render_action_node(action, `${path}/then/${j}`)
+            this.render_action_node(
+              action,
+              `${path}/then/${j}`,
+              false,
+              disabled || config.enabled === false
+            )
           )}
         </div>
       </hat-graph-branch>
@@ -260,7 +315,8 @@ export class HatScriptGraph extends LitElement {
   private render_condition_node(
     node: Condition,
     path: string,
-    graphStart = false
+    graphStart = false,
+    disabled = false
   ) {
     const trace = this.trace.trace[path] as ConditionTraceStep[] | undefined;
     let track = false;
@@ -286,6 +342,7 @@ export class HatScriptGraph extends LitElement {
         @focus=${this.selectNode(node, path)}
         ?track=${track}
         ?active=${this.selected === path}
+        .notEnabled=${disabled || node.enabled === false}
         tabindex=${trace === undefined ? "-1" : "0"}
         short
       >
@@ -294,6 +351,7 @@ export class HatScriptGraph extends LitElement {
           slot="head"
           ?track=${track}
           ?active=${this.selected === path}
+          .notEnabled=${disabled || node.enabled === false}
           .iconPath=${mdiAbTesting}
           nofocus
         ></hat-graph-node>
@@ -308,6 +366,7 @@ export class HatScriptGraph extends LitElement {
           nofocus
           ?track=${trackFailed}
           ?active=${this.selected === path}
+          .notEnabled=${disabled || node.enabled === false}
         ></hat-graph-node>
       </hat-graph-branch>
     `;
@@ -316,7 +375,8 @@ export class HatScriptGraph extends LitElement {
   private render_delay_node(
     node: DelayAction,
     path: string,
-    graphStart = false
+    graphStart = false,
+    disabled = false
   ) {
     return html`
       <hat-graph-node
@@ -325,6 +385,7 @@ export class HatScriptGraph extends LitElement {
         @focus=${this.selectNode(node, path)}
         ?track=${path in this.trace.trace}
         ?active=${this.selected === path}
+        .notEnabled=${disabled || node.enabled === false}
         tabindex=${this.trace && path in this.trace.trace ? "0" : "-1"}
       ></hat-graph-node>
     `;
@@ -333,7 +394,8 @@ export class HatScriptGraph extends LitElement {
   private render_device_node(
     node: DeviceAction,
     path: string,
-    graphStart = false
+    graphStart = false,
+    disabled = false
   ) {
     return html`
       <hat-graph-node
@@ -342,6 +404,7 @@ export class HatScriptGraph extends LitElement {
         @focus=${this.selectNode(node, path)}
         ?track=${path in this.trace.trace}
         ?active=${this.selected === path}
+        .notEnabled=${disabled || node.enabled === false}
         tabindex=${this.trace && path in this.trace.trace ? "0" : "-1"}
       ></hat-graph-node>
     `;
@@ -350,7 +413,8 @@ export class HatScriptGraph extends LitElement {
   private render_event_node(
     node: EventAction,
     path: string,
-    graphStart = false
+    graphStart = false,
+    disabled = false
   ) {
     return html`
       <hat-graph-node
@@ -359,6 +423,7 @@ export class HatScriptGraph extends LitElement {
         @focus=${this.selectNode(node, path)}
         ?track=${path in this.trace.trace}
         ?active=${this.selected === path}
+        .notEnabled=${disabled || node.enabled === false}
         tabindex=${this.trace && path in this.trace.trace ? "0" : "-1"}
       ></hat-graph-node>
     `;
@@ -367,7 +432,8 @@ export class HatScriptGraph extends LitElement {
   private render_repeat_node(
     node: RepeatAction,
     path: string,
-    graphStart = false
+    graphStart = false,
+    disabled = false
   ) {
     const trace: any = this.trace.trace[path];
     const repeats = this.trace?.trace[`${path}/repeat/sequence/0`]?.length;
@@ -377,12 +443,14 @@ export class HatScriptGraph extends LitElement {
         @focus=${this.selectNode(node, path)}
         ?track=${path in this.trace.trace}
         ?active=${this.selected === path}
+        .notEnabled=${disabled || node.enabled === false}
       >
         <hat-graph-node
           .graphStart=${graphStart}
           .iconPath=${mdiRefresh}
           ?track=${path in this.trace.trace}
           ?active=${this.selected === path}
+          .notEnabled=${disabled || node.enabled === false}
           slot="head"
           nofocus
         ></hat-graph-node>
@@ -390,12 +458,18 @@ export class HatScriptGraph extends LitElement {
           .iconPath=${mdiArrowUp}
           ?track=${repeats > 1}
           ?active=${this.selected === path}
+          .notEnabled=${disabled || node.enabled === false}
           nofocus
           .badge=${repeats > 1 ? repeats : undefined}
         ></hat-graph-node>
         <div ?track=${trace}>
           ${ensureArray(node.repeat.sequence).map((action, i) =>
-            this.render_action_node(action, `${path}/repeat/sequence/${i}`)
+            this.render_action_node(
+              action,
+              `${path}/repeat/sequence/${i}`,
+              false,
+              disabled || node.enabled === false
+            )
           )}
         </div>
       </hat-graph-branch>
@@ -405,7 +479,8 @@ export class HatScriptGraph extends LitElement {
   private render_scene_node(
     node: SceneAction,
     path: string,
-    graphStart = false
+    graphStart = false,
+    disabled = false
   ) {
     return html`
       <hat-graph-node
@@ -414,6 +489,7 @@ export class HatScriptGraph extends LitElement {
         @focus=${this.selectNode(node, path)}
         ?track=${path in this.trace.trace}
         ?active=${this.selected === path}
+        .notEnabled=${disabled || node.enabled === false}
         tabindex=${this.trace && path in this.trace.trace ? "0" : "-1"}
       ></hat-graph-node>
     `;
@@ -422,7 +498,8 @@ export class HatScriptGraph extends LitElement {
   private render_service_node(
     node: ServiceAction,
     path: string,
-    graphStart = false
+    graphStart = false,
+    disabled = false
   ) {
     return html`
       <hat-graph-node
@@ -431,6 +508,7 @@ export class HatScriptGraph extends LitElement {
         @focus=${this.selectNode(node, path)}
         ?track=${path in this.trace.trace}
         ?active=${this.selected === path}
+        .notEnabled=${disabled || node.enabled === false}
         tabindex=${this.trace && path in this.trace.trace ? "0" : "-1"}
       ></hat-graph-node>
     `;
@@ -439,7 +517,8 @@ export class HatScriptGraph extends LitElement {
   private render_wait_node(
     node: WaitAction | WaitForTriggerAction,
     path: string,
-    graphStart = false
+    graphStart = false,
+    disabled = false
   ) {
     return html`
       <hat-graph-node
@@ -448,6 +527,7 @@ export class HatScriptGraph extends LitElement {
         @focus=${this.selectNode(node, path)}
         ?track=${path in this.trace.trace}
         ?active=${this.selected === path}
+        .notEnabled=${disabled || node.enabled === false}
         tabindex=${this.trace && path in this.trace.trace ? "0" : "-1"}
       ></hat-graph-node>
     `;
@@ -456,7 +536,8 @@ export class HatScriptGraph extends LitElement {
   private render_parallel_node(
     node: ParallelAction,
     path: string,
-    graphStart = false
+    graphStart = false,
+    disabled = false
   ) {
     const trace: any = this.trace.trace[path];
     return html`
@@ -465,23 +546,47 @@ export class HatScriptGraph extends LitElement {
         @focus=${this.selectNode(node, path)}
         ?track=${path in this.trace.trace}
         ?active=${this.selected === path}
+        .notEnabled=${disabled || node.enabled === false}
       >
         <hat-graph-node
           .graphStart=${graphStart}
           .iconPath=${mdiShuffleDisabled}
           ?track=${path in this.trace.trace}
           ?active=${this.selected === path}
+          .notEnabled=${disabled || node.enabled === false}
           slot="head"
           nofocus
         ></hat-graph-node>
         ${ensureArray(node.parallel).map((action, i) =>
-          this.render_action_node(action, `${path}/parallel/${i}/0`)
+          "sequence" in action
+            ? html`<div ?track=${path in this.trace.trace}>
+                ${ensureArray((action as ManualScriptConfig).sequence).map(
+                  (sAction, j) =>
+                    this.render_action_node(
+                      sAction,
+                      `${path}/parallel/${i}/sequence/${j}`,
+                      false,
+                      disabled || node.enabled === false
+                    )
+                )}
+              </div>`
+            : this.render_action_node(
+                action,
+                `${path}/parallel/${i}/sequence/0`,
+                false,
+                disabled || node.enabled === false
+              )
         )}
       </hat-graph-branch>
     `;
   }
 
-  private render_stop_node(node: Action, path: string, graphStart = false) {
+  private render_stop_node(
+    node: Action,
+    path: string,
+    graphStart = false,
+    disabled = false
+  ) {
     const trace = this.trace.trace[path] as StopActionTraceStep[] | undefined;
     return html`
       <hat-graph-node
@@ -492,11 +597,17 @@ export class HatScriptGraph extends LitElement {
         @focus=${this.selectNode(node, path)}
         ?track=${path in this.trace.trace}
         ?active=${this.selected === path}
+        .notEnabled=${disabled || node.enabled === false}
       ></hat-graph-node>
     `;
   }
 
-  private render_other_node(node: Action, path: string, graphStart = false) {
+  private render_other_node(
+    node: Action,
+    path: string,
+    graphStart = false,
+    disabled = false
+  ) {
     return html`
       <hat-graph-node
         .graphStart=${graphStart}
@@ -504,6 +615,7 @@ export class HatScriptGraph extends LitElement {
         @focus=${this.selectNode(node, path)}
         ?track=${path in this.trace.trace}
         ?active=${this.selected === path}
+        .notEnabled=${disabled || node.enabled === false}
       ></hat-graph-node>
     `;
   }
@@ -642,6 +754,8 @@ 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

@@ -25,12 +25,17 @@ import {
   ChooseAction,
   ChooseActionChoice,
   getActionType,
+  IfAction,
+  ParallelAction,
+  RepeatAction,
 } from "../../data/script";
 import { describeAction } from "../../data/script_i18n";
 import {
+  ActionTraceStep,
   AutomationTraceExtended,
   ChooseActionTraceStep,
   getDataFromPath,
+  IfActionTraceStep,
   isTriggerPath,
   TriggerTraceStep,
 } from "../../data/trace";
@@ -105,7 +110,7 @@ class LogbookRenderer {
   }
 
   get hasNext() {
-    return this.curIndex !== this.logbookEntries.length;
+    return this.curIndex < this.logbookEntries.length;
   }
 
   maybeRenderItem() {
@@ -201,7 +206,7 @@ class ActionRenderer {
   }
 
   get hasNext() {
-    return this.curIndex !== this.keys.length;
+    return this.curIndex < this.keys.length;
   }
 
   renderItem() {
@@ -214,15 +219,31 @@ class ActionRenderer {
 
   private _renderItem(
     index: number,
-    actionType?: ReturnType<typeof getActionType>
+    actionType?: ReturnType<typeof getActionType>,
+    renderAllIterations?: boolean
   ): number {
     const value = this._getItem(index);
 
-    if (isTriggerPath(value[0].path)) {
-      return this._handleTrigger(index, value[0] as TriggerTraceStep);
+    if (renderAllIterations) {
+      let i;
+      value.forEach((item) => {
+        i = this._renderIteration(index, item, actionType);
+      });
+      return i;
+    }
+    return this._renderIteration(index, value[0], actionType);
+  }
+
+  private _renderIteration(
+    index: number,
+    value: ActionTraceStep,
+    actionType?: ReturnType<typeof getActionType>
+  ) {
+    if (isTriggerPath(value.path)) {
+      return this._handleTrigger(index, value as TriggerTraceStep);
     }
 
-    const timestamp = new Date(value[0].timestamp);
+    const timestamp = new Date(value.timestamp);
 
     // Render all logbook items that are in front of this item.
     while (
@@ -235,7 +256,7 @@ class ActionRenderer {
     this.logbookRenderer.flush();
     this.timeTracker.maybeRenderTime(timestamp);
 
-    const path = value[0].path;
+    const path = value.path;
     let data;
     try {
       data = getDataFromPath(this.trace.config, path);
@@ -263,7 +284,24 @@ class ActionRenderer {
       return this._handleChoose(index);
     }
 
-    this._renderEntry(path, describeAction(this.hass, data, actionType));
+    if (actionType === "repeat") {
+      return this._handleRepeat(index);
+    }
+
+    if (actionType === "if") {
+      return this._handleIf(index);
+    }
+
+    if (actionType === "parallel") {
+      return this._handleParallel(index);
+    }
+
+    this._renderEntry(
+      path,
+      describeAction(this.hass, data, actionType),
+      undefined,
+      data.enabled === false
+    );
 
     let i = index + 1;
 
@@ -316,10 +354,16 @@ 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`);
+      this._renderEntry(
+        choosePath,
+        `${name}: Default action executed`,
+        undefined,
+        disabled
+      );
     } else if (chooseTrace.result) {
       const choiceNumeric =
         chooseTrace.result.choice !== "default"
@@ -331,9 +375,19 @@ class ActionRenderer {
       const choiceName = choiceConfig
         ? `${choiceConfig.alias || `Option ${choiceNumeric}`} executed`
         : `Error: ${chooseTrace.error}`;
-      this._renderEntry(choosePath, `${name}: ${choiceName}`);
+      this._renderEntry(
+        choosePath,
+        `${name}: ${choiceName}`,
+        undefined,
+        disabled
+      );
     } else {
-      this._renderEntry(choosePath, `${name}: No action taken`);
+      this._renderEntry(
+        choosePath,
+        `${name}: No action taken`,
+        undefined,
+        disabled
+      );
     }
 
     let i;
@@ -374,14 +428,130 @@ class ActionRenderer {
     return i;
   }
 
+  private _handleRepeat(index: number): number {
+    const repeatPath = this.keys[index];
+    const startLevel = repeatPath.split("/").length;
+
+    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);
+
+    let i;
+
+    for (i = index + 1; i < this.keys.length; i++) {
+      const path = this.keys[i];
+      const parts = path.split("/");
+
+      // We're done if no more sequence in current level
+      if (parts.length <= startLevel) {
+        return i;
+      }
+
+      i = this._renderItem(i, getActionType(this._getDataFromPath(path)), true);
+    }
+
+    return i;
+  }
+
+  private _handleIf(index: number): number {
+    const ifPath = this.keys[index];
+    const startLevel = ifPath.split("/").length;
+
+    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) {
+      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);
+    } else {
+      this._renderEntry(
+        ifPath,
+        `${name}: No action taken`,
+        undefined,
+        disabled
+      );
+    }
+
+    let i;
+
+    // Skip over conditions
+    for (i = index + 1; i < this.keys.length; i++) {
+      const path = this.keys[i];
+      const parts = this.keys[i].split("/");
+
+      // We're done if no more sequence in current level
+      if (parts.length <= startLevel) {
+        return i;
+      }
+
+      // We're going to skip all conditions
+      if (
+        parts[startLevel + 1] === "condition" ||
+        parts.length < startLevel + 2
+      ) {
+        continue;
+      }
+
+      i = this._renderItem(i, getActionType(this._getDataFromPath(path)));
+    }
+
+    return i;
+  }
+
+  private _handleParallel(index: number): number {
+    const parallelPath = this.keys[index];
+    const startLevel = parallelPath.split("/").length;
+
+    const parallelConfig = this._getDataFromPath(
+      this.keys[index]
+    ) as ParallelAction;
+
+    const disabled = parallelConfig.enabled === false;
+
+    const name = parallelConfig.alias || "Execute in parallel";
+
+    this._renderEntry(parallelPath, name, undefined, disabled);
+
+    let i;
+
+    for (i = index + 1; i < this.keys.length; i++) {
+      const path = this.keys[i];
+      const parts = path.split("/");
+
+      // We're done if no more sequence in current level
+      if (parts.length <= startLevel) {
+        return i;
+      }
+
+      i = this._renderItem(i, getActionType(this._getDataFromPath(path)));
+    }
+
+    return i;
+  }
+
   private _renderEntry(
     path: string,
     description: string,
-    icon = mdiRecordCircleOutline
+    icon = mdiRecordCircleOutline,
+    disabled = false
   ) {
     this.entries.push(html`
-      <ha-timeline .icon=${icon} data-path=${path}>
-        ${description}
+      <ha-timeline .icon=${icon} data-path=${path} .notEnabled=${disabled}>
+        ${description}${disabled
+          ? html`<span class="disabled"> (disabled)</span>`
+          : ""}
       </ha-timeline>
     `);
   }

src/data/hassio/supervisor.ts

@@ -1,7 +1,7 @@
 import { atLeastVersion } from "../../common/config/version";
 import { HomeAssistant, PanelInfo } from "../../types";
 import { SupervisorArch } from "../supervisor/supervisor";
-import { HassioAddonInfo, HassioAddonRepository } from "./addon";
+import { HassioAddonInfo } from "./addon";
 import { hassioApiResultExtractor, HassioResponse } from "./common";
 
 export type HassioHomeAssistantInfo = {
@@ -23,7 +23,7 @@ export type HassioHomeAssistantInfo = {
 
 export type HassioSupervisorInfo = {
   addons: HassioAddonInfo[];
-  addons_repositories: HassioAddonRepository[];
+  addons_repositories: string[];
   arch: SupervisorArch;
   channel: string;
   debug: boolean;
@@ -179,7 +179,10 @@ export const fetchHassioInfo = async (
 };
 
 export const fetchHassioLogs = async (hass: HomeAssistant, provider: string) =>
-  hass.callApi<string>("GET", `hassio/${provider}/logs`);
+  hass.callApi<string>(
+    "GET",
+    `hassio/${provider.includes("_") ? `addons/${provider}` : provider}/logs`
+  );
 
 export const setSupervisorOption = async (
   hass: HomeAssistant,

src/data/script.ts

@@ -165,7 +165,7 @@ export interface PlayMediaAction extends BaseAction {
 }
 
 export interface RepeatAction extends BaseAction {
-  repeat: CountRepeat | WhileRepeat | UntilRepeat;
+  repeat: CountRepeat | WhileRepeat | UntilRepeat | ForEachRepeat;
 }
 
 interface BaseRepeat extends BaseAction {
@@ -184,6 +184,10 @@ export interface UntilRepeat extends BaseRepeat {
   until: Condition[];
 }
 
+export interface ForEachRepeat extends BaseRepeat {
+  for_each: string | any[];
+}
+
 export interface ChooseActionChoice extends BaseAction {
   conditions: string | Condition[];
   sequence: Action | Action[];
@@ -210,7 +214,7 @@ export interface StopAction extends BaseAction {
 }
 
 export interface ParallelAction extends BaseAction {
-  parallel: Action | Action[];
+  parallel: ManualScriptConfig | Action | (ManualScriptConfig | Action)[];
 }
 
 interface UnknownAction extends BaseAction {

src/data/script_i18n.ts

@@ -8,12 +8,17 @@ import { describeCondition, describeTrigger } from "./automation_i18n";
 import {
   ActionType,
   ActionTypes,
+  ChooseAction,
   DelayAction,
   DeviceAction,
   EventAction,
   getActionType,
+  IfAction,
+  ParallelAction,
   PlayMediaAction,
+  RepeatAction,
   SceneAction,
+  StopAction,
   VariablesAction,
   WaitForTriggerAction,
 } from "./script";
@@ -161,6 +166,81 @@ export const describeAction = <T extends ActionType>(
     return `Test ${describeCondition(action as Condition)}`;
   }
 
+  if (actionType === "stop") {
+    const config = action as StopAction;
+    return `Stopped${config.stop ? ` because: ${config.stop}` : ""}`;
+  }
+
+  if (actionType === "if") {
+    const config = action as IfAction;
+    return `If ${
+      typeof config.if === "string"
+        ? config.if
+        : ensureArray(config.if)
+            .map((condition) => describeCondition(condition))
+            .join(", ")
+    } then ${ensureArray(config.then).map((thenAction) =>
+      describeAction(hass, thenAction)
+    )}${
+      config.else
+        ? ` else ${ensureArray(config.else).map((elseAction) =>
+            describeAction(hass, elseAction)
+          )}`
+        : ""
+    }`;
+  }
+
+  if (actionType === "choose") {
+    const config = action as ChooseAction;
+    return config.choose
+      ? `If ${ensureArray(config.choose)
+          .map(
+            (chooseAction) =>
+              `${
+                typeof chooseAction.conditions === "string"
+                  ? chooseAction.conditions
+                  : ensureArray(chooseAction.conditions)
+                      .map((condition) => describeCondition(condition))
+                      .join(", ")
+              } then ${ensureArray(chooseAction.sequence)
+                .map((chooseSeq) => describeAction(hass, chooseSeq))
+                .join(", ")}`
+          )
+          .join(", else if ")}${
+          config.default
+            ? `. If none match: ${ensureArray(config.default)
+                .map((dAction) => describeAction(hass, dAction))
+                .join(", ")}`
+            : ""
+        }`
+      : "Choose";
+  }
+
+  if (actionType === "repeat") {
+    const config = action as RepeatAction;
+    return `Repeat ${ensureArray(config.repeat.sequence).map((repeatAction) =>
+      describeAction(hass, repeatAction)
+    )} ${"count" in config.repeat ? `${config.repeat.count} times` : ""}${
+      "while" in config.repeat
+        ? `while ${ensureArray(config.repeat.while)
+            .map((condition) => describeCondition(condition))
+            .join(", ")} is true`
+        : "until" in config.repeat
+        ? `until ${ensureArray(config.repeat.until)
+            .map((condition) => describeCondition(condition))
+            .join(", ")} is true`
+        : "for_each" in config.repeat
+        ? `for every item: ${ensureArray(config.repeat.for_each)
+            .map((item) => JSON.stringify(item))
+            .join(", ")}`
+        : ""
+    }`;
+  }
+
+  if (actionType === "check_condition") {
+    return `Test ${describeCondition(action as Condition)}`;
+  }
+
   if (actionType === "device_action") {
     const config = action as DeviceAction;
     const stateObj = hass.states[config.entity_id as string];
@@ -170,7 +250,10 @@ export const describeAction = <T extends ActionType>(
   }
 
   if (actionType === "parallel") {
-    return "Run in parallel";
+    const config = action as ParallelAction;
+    return `Run in parallel: ${ensureArray(config.parallel)
+      .map((pAction) => describeAction(hass, pAction))
+      .join(", ")}`;
   }
 
   return actionType;

src/data/trace.ts

@@ -185,7 +185,11 @@ export const getDataFromPath = (
     const asNumber = Number(raw);
 
     if (isNaN(asNumber)) {
-      result = result[raw];
+      const tempResult = result[raw];
+      if (!tempResult && raw === "sequence") {
+        continue;
+      }
+      result = tempResult;
       continue;
     }
 

src/dialogs/config-flow/dialog-data-entry-flow.ts

@@ -312,6 +312,7 @@ class DataEntryFlowDialog extends LitElement {
                         .flowConfig=${this._params.flowConfig}
                         .step=${this._step}
                         .hass=${this.hass}
+                        .domain=${this._step.handler}
                       ></step-flow-abort>
                     `
                   : this._step.type === "progress"

src/dialogs/config-flow/step-flow-abort.ts

@@ -15,13 +15,11 @@ class StepFlowAbort extends LitElement {
 
   @property({ attribute: false }) public step!: DataEntryFlowStepAbort;
 
+  @property({ attribute: false }) public domain!: string;
+
   protected render(): TemplateResult {
     return html`
-      <h2>
-        ${this.hass.localize(
-          "ui.panel.config.integrations.config_flow.aborted"
-        )}
-      </h2>
+      <h2>${this.hass.localize(`component.${this.domain}.title`)}</h2>
       <div class="content">
         ${this.flowConfig.renderAbortDescription(this.hass, this.step)}
       </div>

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

@@ -17,6 +17,7 @@ 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";
@@ -33,6 +34,7 @@ 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";
@@ -245,9 +247,10 @@ export class QuickBar extends LitElement {
     `;
   }
 
-  private _initializeItemsIfNeeded() {
+  private async _initializeItemsIfNeeded() {
     if (this._commandMode) {
-      this._commandItems = this._commandItems || this._generateCommandItems();
+      this._commandItems =
+        this._commandItems || (await this._generateCommandItems());
     } else {
       this._entityItems = this._entityItems || this._generateEntityItems();
     }
@@ -485,11 +488,11 @@ export class QuickBar extends LitElement {
       );
   }
 
-  private _generateCommandItems(): CommandItem[] {
+  private async _generateCommandItems(): Promise<CommandItem[]> {
     return [
       ...this._generateReloadCommands(),
       ...this._generateServerControlCommands(),
-      ...this._generateNavigationCommands(),
+      ...(await this._generateNavigationCommands()),
     ].sort((a, b) =>
       caseInsensitiveStringCompare(a.strings.join(" "), b.strings.join(" "))
     );
@@ -578,11 +581,40 @@ export class QuickBar extends LitElement {
     });
   }
 
-  private _generateNavigationCommands(): CommandItem[] {
+  private async _generateNavigationCommands(): Promise<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]);
+    return this._finalizeNavigationCommands([
+      ...panelItems,
+      ...sectionItems,
+      ...supervisorItems,
+    ]);
   }
 
   private _generateNavigationPanelCommands(): BaseNavigationCommand[] {
@@ -610,20 +642,14 @@ 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 && e.component === info.component
-          )
-        ) {
+        if (items.some((e) => e.path === info.path)) {
           continue;
         }
 
@@ -637,14 +663,19 @@ export class QuickBar extends LitElement {
   private _getNavigationInfoFromConfig(
     page: PageNavigation
   ): NavigationInfo | undefined {
-    if (!page.component) {
-      return undefined;
-    }
-    const caption = this.hass.localize(
-      `ui.dialogs.quick-bar.commands.navigation.${page.component}`
-    );
+    const path = page.path.substring(1);
 
-    if (page.translationKey && caption) {
+    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) {
       return { ...page, primaryText: caption };
     }
 

src/panels/calendar/ha-full-calendar.ts

@@ -11,14 +11,7 @@ import listPlugin from "@fullcalendar/list";
 // @ts-ignore
 import listStyle from "@fullcalendar/list/main.css";
 import "@material/mwc-button";
-import {
-  mdiChevronLeft,
-  mdiChevronRight,
-  mdiViewAgenda,
-  mdiViewDay,
-  mdiViewModule,
-  mdiViewWeek,
-} from "@mdi/js";
+import { mdiViewAgenda, mdiViewDay, mdiViewModule, mdiViewWeek } from "@mdi/js";
 import {
   css,
   CSSResultGroup,
@@ -33,7 +26,6 @@ import memoize from "memoize-one";
 import { useAmPm } from "../../common/datetime/use_am_pm";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../../components/ha-button-toggle-group";
-import "../../components/ha-icon-button";
 import "../../components/ha-icon-button-prev";
 import "../../components/ha-icon-button-next";
 import { haStyle } from "../../resources/styles";
@@ -152,20 +144,18 @@ export class HAFullCalendar extends LitElement {
                     <div class="controls">
                       <h1>${this.calendar.view.title}</h1>
                       <div>
-                        <ha-icon-button
+                        <ha-icon-button-prev
                           .label=${this.hass.localize("ui.common.previous")}
-                          .path=${mdiChevronLeft}
                           class="prev"
                           @click=${this._handlePrev}
                         >
-                        </ha-icon-button>
-                        <ha-icon-button
+                        </ha-icon-button-prev>
+                        <ha-icon-button-next
                           .label=${this.hass.localize("ui.common.next")}
-                          .path=${mdiChevronRight}
                           class="next"
                           @click=${this._handleNext}
                         >
-                        </ha-icon-button>
+                        </ha-icon-button-next>
                       </div>
                     </div>
                     <div class="controls">

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

@@ -259,6 +259,7 @@ 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(
@@ -281,6 +282,7 @@ class HaConfigAreaPage extends LitElement {
                   `}
             </ha-card>
             <ha-card
+              outlined
               .header=${this.hass.localize(
                 "ui.panel.config.areas.editor.linked_entities_caption"
               )}
@@ -314,6 +316,7 @@ class HaConfigAreaPage extends LitElement {
             ${isComponentLoaded(this.hass, "automation")
               ? html`
                   <ha-card
+                    outlined
                     .header=${this.hass.localize(
                       "ui.panel.config.devices.automation.automations_heading"
                     )}
@@ -361,6 +364,7 @@ class HaConfigAreaPage extends LitElement {
             ${isComponentLoaded(this.hass, "scene")
               ? html`
                   <ha-card
+                    outlined
                     .header=${this.hass.localize(
                       "ui.panel.config.devices.scene.scenes_heading"
                     )}
@@ -400,6 +404,7 @@ 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>
+      <ha-card outlined>
         ${this.action.enabled === false
           ? html`<div class="disabled-bar">
               ${this.hass.localize(

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

@@ -32,7 +32,7 @@ export default class HaAutomationAction extends LitElement {
           ></ha-automation-action-row>
         `
       )}
-      <ha-card>
+      <ha-card outlined>
         <div class="card-actions add-card">
           <mwc-button @click=${this._addAction}>
             ${this.hass.localize(

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>
+      <ha-card outlined>
         <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>
+        <ha-card outlined>
           <div class="card-content">
             <ha-textfield
               .label=${this.hass.localize(
@@ -145,6 +145,7 @@ 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,7 +5,6 @@ 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>
+      <ha-card outlined>
         ${this.condition.enabled === false
           ? html`<div class="disabled-bar">
               ${this.hass.localize(

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

@@ -56,7 +56,7 @@ export default class HaAutomationCondition extends LitElement {
           ></ha-automation-condition-row>
         `
       )}
-      <ha-card>
+      <ha-card outlined>
         <div class="card-actions add-card">
           <mwc-button @click=${this._addCondition}>
             ${this.hass.localize(

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

@@ -3,7 +3,6 @@ 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
-                              ><div class="card-header">
+                            <ha-card outlined>
+                              <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
-                        ><div class="card-actions">
+                      <ha-card outlined>
+                        <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>
+        <ha-card outlined>
           <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>
+      <ha-card outlined>
         ${this.trigger.enabled === false
           ? html`<div class="disabled-bar">
               ${this.hass.localize(

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

@@ -27,7 +27,7 @@ export default class HaAutomationTrigger extends LitElement {
           ></ha-automation-trigger-row>
         `
       )}
-      <ha-card>
+      <ha-card outlined>
         <div class="card-actions add-card">
           <mwc-button @click=${this._addTrigger}>
             ${this.hass.localize(

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

@@ -1,26 +1,28 @@
 import "@material/mwc-button";
-import "@material/mwc-list/mwc-list-item";
 import type { ActionDetail } from "@material/mwc-list";
-import "@polymer/paper-item/paper-item-body";
+import "@material/mwc-list/mwc-list-item";
 import { mdiDotsVertical } from "@mdi/js";
-import { LitElement, css, html, PropertyValues } from "lit";
+import "@polymer/paper-item/paper-item-body";
+import { css, html, LitElement, 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";
@@ -28,8 +30,6 @@ 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,6 +81,7 @@ export class CloudAccount extends SubscribeMixin(LitElement) {
             </div>
 
             <ha-card
+              outlined
               .header=${this.hass.localize(
                 "ui.panel.config.cloud.account.nabu_casa_account"
               )}
@@ -210,6 +211,7 @@ 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,6 +26,7 @@ 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,6 +31,7 @@ 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,6 +34,7 @@ export class CloudRemotePref extends LitElement {
     if (!remote_certificate) {
       return html`
         <ha-card
+          outlined
           header=${this.hass.localize(
             "ui.panel.config.cloud.account.remote.title"
           )}
@@ -49,6 +50,7 @@ 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,6 +44,7 @@ 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,6 +40,7 @@ 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>
+        <ha-card outlined>
           <div class="card-content">
             <div class="top-line">
               <state-info

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

@@ -36,6 +36,7 @@ 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>
+        <ha-card outlined>
           <div class="card-content">
             <div class="top-line">
               <state-info

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

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

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

@@ -121,6 +121,7 @@ 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

@@ -196,7 +196,7 @@ class HaConfigSectionUpdates extends LitElement {
       display: flex;
       justify-content: space-between;
       flex-direction: column;
-      padding: 16px;
+      padding: 0;
     }
   `;
 }

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

@@ -1,9 +1,21 @@
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } 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 { CloudStatus } from "../../../data/cloud";
+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 {
   showAlertDialog,
   showConfirmationDialog,
@@ -27,15 +39,80 @@ 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) => ({
-        ...page,
-        name: page.translationKey
-          ? this.hass.localize(page.translationKey)
-          : page.name,
-      }));
+      .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,
+        };
+      });
 
     return html`
       <hass-subpage
@@ -59,13 +136,32 @@ 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>`
+            : ""}
         </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(
@@ -90,6 +186,48 @@ 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")) {
+      fetchCloudStatus(this.hass).then((cloudStatus) => {
+        if (cloudStatus.logged_in) {
+          this._externalAccess = true;
+        }
+      });
+    } else {
+      this._externalAccess = this.hass.config.external_url !== null;
+    }
+  }
+
   static get styles(): CSSResultGroup {
     return [
       haStyle,
@@ -134,7 +272,9 @@ 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);
         }
       `,
     ];

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, CloudStatusLoggedIn } from "../../../data/cloud";
+import type { CloudStatus } from "../../../data/cloud";
 import type { PageNavigation } from "../../../layouts/hass-tabs-subpage";
 import type { HomeAssistant } from "../../../types";
 
@@ -37,9 +37,7 @@ class HaConfigNavigation extends LitElement {
             ? page.info.logged_in
               ? `
                   ${this.hass.localize(
-                    "ui.panel.config.cloud.description_login",
-                    "email",
-                    (page.info as CloudStatusLoggedIn).email
+                    "ui.panel.config.cloud.description_login"
                   )}
                 `
               : `

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

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

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

@@ -1,7 +1,6 @@
 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,5 +1,4 @@
 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 .header=${this.header}>
+        <ha-card outlined .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 .header=${this.header}>
+      <ha-card outlined .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,5 +1,6 @@
 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,
@@ -24,6 +25,7 @@ export class HaDeviceCard extends LitElement {
   protected render(): TemplateResult {
     return html`
       <ha-card
+        outlined
         .header=${this.hass.localize(
           "ui.panel.config.devices.device_info",
           "type",
@@ -145,3 +147,9 @@ export class HaDeviceCard extends LitElement {
     ];
   }
 }
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-device-info-card": HaDeviceCard;
+  }
+}

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>
+                    <ha-card outlined>
                       <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>
+                    <ha-card outlined>
                       <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>
+                      <ha-card outlined>
                         <h1 class="card-header">
                           ${this.hass.localize(
                             "ui.panel.config.devices.script.scripts_heading"

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

@@ -51,7 +51,7 @@ export class EnergyBatterySettings extends LitElement {
     });
 
     return html`
-      <ha-card>
+      <ha-card outlined>
         <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>
+      <ha-card outlined>
         <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>
+      <ha-card outlined>
         <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>
+      <ha-card outlined>
         <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>
+      <ha-card outlined>
         <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

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

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

@@ -13,7 +13,6 @@ import "../../../layouts/hass-subpage";
 import { haStyle } from "../../../resources/styles";
 import { HomeAssistant, Route } from "../../../types";
 import { documentationUrl } from "../../../util/documentation-url";
-import "./integrations-card";
 
 const JS_TYPE = __BUILD__;
 const JS_VERSION = __VERSION__;
@@ -21,13 +20,13 @@ const JS_VERSION = __VERSION__;
 class HaConfigInfo extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public narrow!: boolean;
+  @property({ type: Boolean }) public narrow!: boolean;
 
-  @property() public isWide!: boolean;
+  @property({ type: Boolean }) public isWide!: boolean;
 
-  @property() public showAdvanced!: boolean;
+  @property({ type: Boolean }) public showAdvanced!: boolean;
 
-  @property() public route!: Route;
+  @property({ attribute: false }) public route!: Route;
 
   @state() private _hostInfo?: HassioHostInfo;
 
@@ -61,18 +60,22 @@ class HaConfigInfo extends LitElement {
             </ha-logo-svg>
           </a>
           <br />
-          <h2>Home Assistant Core ${hass.connection.haVersion}</h2>
+          <h3>Home Assistant Core ${hass.connection.haVersion}</h3>
           ${this._hassioInfo
-            ? html`<h2>
-                Home Assistant Supervisor ${this._hassioInfo.supervisor}
-              </h2>`
+            ? html`
+                <h3>
+                  Home Assistant Supervisor ${this._hassioInfo.supervisor}
+                </h3>
+              `
             : ""}
           ${this._osInfo?.version
-            ? html`<h2>Home Assistant OS ${this._osInfo.version}</h2>`
+            ? html`<h3>Home Assistant OS ${this._osInfo.version}</h3>`
             : ""}
           ${this._hostInfo
-            ? html`<h4>Kernel version ${this._hostInfo.kernel}</h4>
-                <h4>Agent version ${this._hostInfo.agent_version}</h4>`
+            ? html`
+                <h4>Kernel version ${this._hostInfo.kernel}</h4>
+                <h4>Agent version ${this._hostInfo.agent_version}</h4>
+              `
             : ""}
           <p>
             ${this.hass.localize(
@@ -211,18 +214,15 @@ class HaConfigInfo extends LitElement {
         .about a {
           color: var(--primary-color);
         }
-
-        integrations-card {
-          display: block;
-          max-width: 600px;
-          margin: 0 auto;
-          padding-bottom: 16px;
-        }
         ha-logo-svg {
           padding: 12px;
           height: 180px;
           width: 180px;
         }
+
+        h4 {
+          font-weight: 400;
+        }
       `,
     ];
   }

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

@@ -21,6 +21,7 @@ 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 {
@@ -76,6 +77,12 @@ class ErrorLogCard extends LitElement {
     `;
   }
 
+  private _debounceSearch = debounce(
+    () => (this._isLogLoaded ? this._refreshLogs() : this._debounceSearch()),
+    150,
+    false
+  );
+
   protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
 
@@ -93,11 +100,15 @@ 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();
     }
   }
 
@@ -116,6 +127,18 @@ 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;
@@ -136,31 +159,33 @@ class ErrorLogCard extends LitElement {
 
     this._isLogLoaded = true;
 
-    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>`;
+    const split = log && log.split("\n");
 
-            if (entry.includes("WARNING"))
-              return html`<div class="warning">${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("ERROR") ||
-              entry.includes("FATAL") ||
-              entry.includes("CRITICAL")
-            )
-              return html`<div class="error">${entry}</div>`;
+          if (entry.includes("WARNING"))
+            return html`<div class="warning">${entry}</div>`;
 
-            return html`<div>${entry}</div>`;
-          })
+          if (
+            entry.includes("ERROR") ||
+            entry.includes("FATAL") ||
+            entry.includes("CRITICAL")
+          )
+            return html`<div class="error">${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,6 +6,7 @@ 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";
@@ -59,6 +60,8 @@ export class HaConfigLogs extends LitElement {
 
   @state() private _selectedLogProvider = "core";
 
+  @state() private _logProviders = logProviders;
+
   public connectedCallback() {
     super.connectedCallback();
     if (this.systemLog && this.systemLog.loaded) {
@@ -66,6 +69,13 @@ 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;
   }
@@ -107,7 +117,7 @@ export class HaConfigLogs extends LitElement {
               <ha-button-menu corner="BOTTOM_START" slot="toolbar-icon">
                 <mwc-button
                   slot="trigger"
-                  .label=${logProviders.find(
+                  .label=${this._logProviders.find(
                     (p) => p.key === this._selectedLogProvider
                   )!.name}
                 >
@@ -116,7 +126,7 @@ export class HaConfigLogs extends LitElement {
                     .path=${mdiChevronDown}
                   ></ha-svg-icon>
                 </mwc-button>
-                ${logProviders.map(
+                ${this._logProviders.map(
                   (provider) => html`
                     <mwc-list-item
                       ?selected=${provider.key === this._selectedLogProvider}
@@ -155,6 +165,21 @@ 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 class="storage">
+          <ha-card outlined 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 header="Configuration.yaml persons">
+                <ha-card outlined 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>
+                  <ha-card outlined>
                     <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>
+                        <ha-card outlined>
                           <h1 class="card-header">
                             ${device.name}
                             <ha-icon-button
@@ -373,6 +373,7 @@ export class HaSceneEditor extends SubscribeMixin(
                   )}
 
                   <ha-card
+                    outlined
                     .header=${this.hass.localize(
                       "ui.panel.config.scene.editor.devices.add"
                     )}
@@ -405,6 +406,7 @@ 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"
@@ -445,6 +447,7 @@ 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>
+      <ha-card outlined>
         <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>
+                          <ha-card outlined>
                             <div class="card-content">
                               <ha-form
                                 .schema=${schema}
@@ -387,8 +387,8 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
             ? html`
                 ${!this.narrow
                   ? html`
-                      <ha-card
-                        ><div class="card-header">${this._config?.alias}</div>
+                      <ha-card outlined>
+                        <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
-                  ><div class="card-actions">
+                <ha-card outlined>
+                  <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,6 +3,7 @@ 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/system-health/ha-config-system-health.ts

@@ -30,7 +30,7 @@ import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import type { HomeAssistant } from "../../../types";
 import { documentationUrl } from "../../../util/documentation-url";
 import { showToast } from "../../../util/toast";
-import "../info/integrations-card";
+import "./integrations-card";
 
 const sortKeys = (a: string, b: string) => {
   if (a === "homeassistant") {

src/panels/config/system-health/integrations-card.ts

@@ -48,7 +48,7 @@ class IntegrationsCard extends LitElement {
       <ha-card
         outlined
         .header=${this.hass.localize(
-          "ui.panel.config.system_health.long_loading_integrations"
+          "ui.panel.config.system_health.integration_start_time"
         )}
       >
         <mwc-list>
@@ -69,6 +69,7 @@ class IntegrationsCard extends LitElement {
                 graphic="avatar"
                 twoline
                 hasMeta
+                openNewTab
                 @click=${this._entryClicked}
                 href=${docLink}
               >
@@ -129,7 +130,7 @@ class IntegrationsCard extends LitElement {
   static get styles(): CSSResultGroup {
     return css`
       ha-clickable-list-item {
-        --mdc-list-item-meta-size: 48px;
+        --mdc-list-item-meta-size: 64px;
         --mdc-typography-caption-font-size: 12px;
       }
       img {
@@ -137,6 +138,11 @@ class IntegrationsCard extends LitElement {
         max-height: 40px;
         max-width: 40px;
       }
+      div[slot="meta"] {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
     `;
   }
 }

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

@@ -9,7 +9,6 @@ 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>${listBox}</ha-card>
+                <ha-card outlined>${listBox}</ha-card>
               </ha-config-section>
             `
           : ""}
@@ -471,7 +471,6 @@ 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,10 +266,14 @@ class HUIRoot extends LitElement {
                         </ha-tabs>
                       `
                     : html`<div main-title>${this.config.title}</div>`}
-                  <ha-icon-button
-                    .path=${mdiMagnify}
-                    @click=${this._showQuickBar}
-                  ></ha-icon-button>
+                  ${!this.narrow
+                    ? html`
+                        <ha-icon-button
+                          .path=${mdiMagnify}
+                          @click=${this._showQuickBar}
+                        ></ha-icon-button>
+                      `
+                    : ""}
                   ${!this.narrow &&
                   this._conversation(this.hass.config.components)
                     ? html`
@@ -292,6 +296,28 @@ 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/panels/my/ha-panel-my.ts

@@ -220,6 +220,9 @@ export interface Redirect {
   params?: {
     [key: string]: ParamType;
   };
+  optional_params?: {
+    [key: string]: ParamType;
+  };
 }
 
 @customElement("ha-panel-my")

src/translations/en.json

@@ -2,7 +2,7 @@
   "panel": {
     "energy": "Energy",
     "calendar": "Calendar",
-    "config": "Configuration",
+    "config": "Settings",
     "states": "Overview",
     "map": "Map",
     "logbook": "Logbook",
@@ -676,18 +676,30 @@
             "areas": "[%key:ui::panel::config::areas::caption%]",
             "scene": "[%key:ui::panel::config::scene::caption%]",
             "helpers": "[%key:ui::panel::config::helpers::caption%]",
-            "tag": "[%key:ui::panel::config::tag::caption%]",
+            "tags": "[%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%]"
+            "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"
           }
         },
         "filter_placeholder": "Entity Filter",
@@ -1132,7 +1144,7 @@
           },
           "tags": {
             "main": "Tags",
-            "secondary": "Manage NFC tags and QR codes"
+            "secondary": "Setup NFC tags and QR codes"
           },
           "people": {
             "main": "People",
@@ -1152,7 +1164,7 @@
           },
           "about": {
             "main": "About",
-            "secondary": "Version, loaded integrations and links to documentation"
+            "secondary": "Version information, credits and more"
           }
         },
         "common": {
@@ -1163,6 +1175,7 @@
         },
         "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",
@@ -1221,6 +1234,8 @@
         },
         "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%]",
@@ -1475,7 +1490,7 @@
         },
         "core": {
           "caption": "General",
-          "description": "Location, network and analytics",
+          "description": "Name, Timezone and locale settings",
           "section": {
             "core": {
               "header": "General Configuration",
@@ -1517,6 +1532,7 @@
         },
         "hardware": {
           "caption": "Hardware",
+          "description": "Configure your hub and connected hardware",
           "available_hardware": {
             "failed_to_get": "Failed to get available hardware",
             "title": "All Hardware",
@@ -1561,7 +1577,7 @@
         },
         "logs": {
           "caption": "Logs",
-          "description": "View the Home Assistant logs",
+          "description": "View and search logs to diagnose issues",
           "details": "Log Details ({level})",
           "search": "Search logs",
           "failed_get_logs": "Failed to get {provider} logs, {error}",
@@ -2230,7 +2246,7 @@
           }
         },
         "cloud": {
-          "description_login": "Logged in as {email}",
+          "description_login": "Logged in and connected",
           "description_not_login": "Not logged in",
           "description_features": "Control home when away and integrate with Alexa and Google Assistant",
           "login": {
@@ -3122,10 +3138,14 @@
           "join": "Join the community on our {forums}, {twitter}, {discord}, {blog} or {newsletter}"
         },
         "analytics": {
-          "caption": "Analytics"
+          "caption": "Analytics",
+          "description": "Learn how to share data to better the Open Home"
         },
         "network": {
           "caption": "Network",
+          "description": "External access {state}",
+          "enabled": "enabled",
+          "disabled": "disabled",
           "supervisor": {
             "title": "Configure network interfaces",
             "connected_to": "Connected to {ssid}",
@@ -3146,6 +3166,7 @@
         },
         "storage": {
           "caption": "Storage",
+          "description": "{percent_used} used - {free_space} free",
           "used_space": "Used Space",
           "emmc_lifetime_used": "eMMC Lifetime Used",
           "datadisk": {
@@ -3163,11 +3184,12 @@
         },
         "system_health": {
           "caption": "System Health",
+          "description": "Status, Stats and Integration startup time",
           "cpu_usage": "Processor Usage",
           "ram_usage": "Memory Usage",
           "core_stats": "Core Stats",
           "supervisor_stats": "Supervisor Stats",
-          "long_loading_integrations": "Long Loading Integrations"
+          "integration_start_time": "Integration Startup Time"
         },
         "system_dashboard": {
           "confirm_restart_text": "Restarting Home Assistant will stop all your active dashboards, automations and scripts.",
@@ -3314,6 +3336,7 @@
         "menu": {
           "configure_ui": "Edit Dashboard",
           "help": "Help",
+          "search": "Search",
           "start_conversation": "Start conversation",
           "reload_resources": "Reload resources",
           "exit_edit_mode": "Done",
@@ -4155,7 +4178,7 @@
             "adjust_sum": "Adjust sum"
           },
           "yaml": {
-            "title": "YAML Configuration",
+            "title": "YAML",
             "section": {
               "validation": {
                 "heading": "Configuration validation",
@@ -4480,6 +4503,7 @@
       "cancel": "[%key:ui::common::cancel%]",
       "yes": "[%key:ui::common::yes%]",
       "no": "[%key:ui::common::no%]",
+      "add": "[%key:supervisor::dialog::repositories::add%]",
       "description": "Description",
       "failed_to_restart_name": "Failed to restart {name}",
       "failed_to_update_name": "Failed to update {name}",
@@ -4549,8 +4573,11 @@
     "my": {
       "not_supported": "[%key:ui::panel::my::not_supported%]",
       "faq_link": "[%key:ui::panel::my::faq_link%]",
+      "add_addon_repository_title": "Missing add-on repository",
+      "add_addon_repository_description": "The addon ''{addon}'' is a part of the add-on repository ''{repository}'', this repository is missing on your system, do you want to add that now?",
       "error": "[%key:ui::panel::my::error%]",
       "error_addon_not_found": "Add-on not found",
+      "error_repository_not_found": "The required repository for this Add-on was not found",
       "error_addon_not_started": "The requested add-on is not running. Please start it first",
       "error_addon_not_installed": "The requested add-on is not installed. Please install it first",
       "error_addon_no_ingress": "The requested add-on does not support ingress"