init

hassio/src/dashboard/hassio-dashboard.ts

@@ -5,6 +5,7 @@ import "../../../src/layouts/hass-tabs-subpage";
 import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant, Route } from "../../../src/types";
 import { supervisorTabs } from "../hassio-tabs";
+import { hassioStyle } from "../resources/hassio-style";
 import "./hassio-addons";
 import "./hassio-update";
 
@@ -32,6 +33,7 @@ class HassioDashboard extends LitElement {
         <span slot="header">
           ${this.supervisor.localize("panel.dashboard")}
         </span>
+
         <div class="content">
           <hassio-update
             .hass=${this.hass}
@@ -49,9 +51,15 @@ class HassioDashboard extends LitElement {
   static get styles(): CSSResultGroup {
     return [
       haStyle,
+      hassioStyle,
       css`
         .content {
-          margin: 0 auto;
+          display: flex;
+          max-width: 1500px;
+        }
+        .content > * {
+          display: block;
+          min-width: 400px;
         }
       `,
     ];

hassio/src/dashboard/hassio-update.ts

@@ -46,7 +46,8 @@ export class HassioUpdate extends LitElement {
     (supervisor: Supervisor): number =>
       Object.keys(supervisor).filter(
         (value) => supervisor[value].update_available
-      ).length
+      ).length +
+      supervisor.addon.addons.filter((addon) => addon.update_available).length
   );
 
   protected render(): TemplateResult {
@@ -60,15 +61,24 @@ export class HassioUpdate extends LitElement {
     }
 
     return html`
+      <ha-card
+        .header="${this.supervisor.localize(
+          "common.update_available",
+          "count",
+          updatesAvailable
+        )}
+          🎉"
+      >
+        <ha-settings-row two-lines>
+          <span slot="prefix">
+            <ha-svg-icon .path=${mdiHomeAssistant}></ha-svg-icon>
+          </span>
+          <span slot="heading"> Home Assistant Core </span>
+          <span slot="description"> Version XXX is available </span>
+        </ha-settings-row>
+      </ha-card>
       <div class="content">
-        <h1>
-          ${this.supervisor.localize(
-            "common.update_available",
-            "count",
-            updatesAvailable
-          )}
-          🎉
-        </h1>
+        <h1></h1>
         <div class="card-group">
           ${this._renderUpdateCard(
             "Home Assistant Core",