Fix for displaying time left for values > 24 hour

.eslintrc.json

@@ -1,7 +1,7 @@
 {
   "extends": [
-    "airbnb-typescript/base",
     "plugin:@typescript-eslint/recommended",
+    "airbnb-typescript/base",
     "plugin:wc/recommended",
     "plugin:lit/recommended",
     "prettier",
@@ -45,16 +45,16 @@
     "func-names": 0,
     "prefer-arrow-callback": 0,
     "no-underscore-dangle": 0,
+    "no-var": 0,
     "strict": 0,
     "prefer-spread": 0,
     "no-plusplus": 0,
-    "no-bitwise": 2,
+    "no-bitwise": 0,
     "comma-dangle": 0,
     "vars-on-top": 0,
     "no-continue": 0,
     "no-param-reassign": 0,
     "no-multi-assign": 0,
-    "no-console": 2,
     "radix": 0,
     "no-alert": 0,
     "no-return-await": 0,
@@ -75,16 +75,13 @@
     "object-curly-newline": 0,
     "default-case": 0,
     "wc/no-self-class": 0,
-    "no-shadow": 0,
     "@typescript-eslint/camelcase": 0,
-    "@typescript-eslint/ban-ts-comment": 0,
+    "@typescript-eslint/ban-ts-ignore": 0,
     "@typescript-eslint/no-use-before-define": 0,
     "@typescript-eslint/no-non-null-assertion": 0,
     "@typescript-eslint/no-explicit-any": 0,
     "@typescript-eslint/no-unused-vars": 0,
-    "@typescript-eslint/explicit-function-return-type": 0,
-    "@typescript-eslint/explicit-module-boundary-types": 0,
-    "@typescript-eslint/no-shadow": ["error"]
+    "@typescript-eslint/explicit-function-return-type": 0
   },
   "plugins": ["disable", "import", "lit", "prettier", "@typescript-eslint"],
   "processor": "disable/disable"

.github/ISSUE_TEMPLATE/FEATURE_REQUEST.md

@@ -0,0 +1,26 @@
+---
+name: Request a feature for the UI, Frontend or Lovelace
+about: Request an new feature for the Home Assistant frontend.
+labels: feature request
+---
+
+<!--
+  DO NOT DELETE ANY TEXT from this template!
+  Otherwise, your request may be closed without comment.
+-->
+
+## The request
+
+<!--
+  Describe to our maintainers, the feature you would like to be added.
+  Please be clear and concise and, if possible, provide a screenshot or mockup.
+-->
+
+## The alternatives
+
+<!--
+  Are you currently using, or have you considered alternatives?
+  If so, could you please describe those?
+-->
+
+## Additional information

.github/ISSUE_TEMPLATE/config.yml

@@ -1,8 +1,5 @@
 blank_issues_enabled: false
 contact_links:
-  - name: Request a feature for the UI, Frontend or Lovelace
-    url: https://github.com/home-assistant/frontend/discussions/category_choices
-    about: Request an new feature for the Home Assistant frontend.
   - name: Report a bug that is NOT related to the UI, Frontend or Lovelace
     url: https://github.com/home-assistant/core/issues
     about: This is the issue tracker for our frontend. Please report other issues with the backend repository.

.github/workflows/codeql-analysis.yml

@@ -1,60 +0,0 @@
-name: "CodeQL"
-
-on:
-  push:
-    branches: [dev, master]
-  pull_request:
-    # The branches below must be a subset of the branches above
-    branches: [dev]
-
-jobs:
-  analyze:
-    name: Analyze
-    runs-on: ubuntu-latest
-
-    strategy:
-      fail-fast: false
-      matrix:
-        # Override automatic language detection by changing the below list
-        # Supported options are ['csharp', 'cpp', 'go', 'java', 'javascript', 'python']
-        language: ['javascript']
-        # Learn more...
-        # https://docs.github.com/en/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#overriding-automatic-language-detection
-
-    steps:
-    - name: Checkout repository
-      uses: actions/checkout@v2
-      with:
-        # We must fetch at least the immediate parents so that if this is
-        # a pull request then we can checkout the head.
-        fetch-depth: 2
-
-    # If this run was triggered by a pull request event, then checkout
-    # the head of the pull request instead of the merge commit.
-    - run: git checkout HEAD^2
-      if: ${{ github.event_name == 'pull_request' }}
-
-    # Initializes the CodeQL tools for scanning.
-    - name: Initialize CodeQL
-      uses: github/codeql-action/init@v1
-      with:
-        languages: ${{ matrix.language }}
-
-    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
-    # If this step fails, then you should remove it and run the build manually (see below)
-    - name: Autobuild
-      uses: github/codeql-action/autobuild@v1
-
-    # ℹ️ Command-line programs to run using the OS shell.
-    # 📚 https://git.io/JvXDl
-
-    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
-    #    and modify them (or add more) to build your code if your project
-    #    uses a compiled language
-
-    #- run: |
-    #   make bootstrap
-    #   make release
-
-    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v1

README.md

@@ -26,4 +26,4 @@ A complete guide can be found at the following [link](https://www.home-assistant
 
 Home Assistant is open-source and Apache 2 licensed. Feel free to browse the repository, learn and reuse parts in your own projects.
 
-We use [BrowserStack](https://www.browserstack.com) to test Home Assistant on a large variety of devices.
+We use [BrowserStack](https://www.browserstack.com) to test Home Assistant on a large variation of devices.

build-scripts/bundle.js

@@ -52,13 +52,7 @@ module.exports.terserOptions = (latestBuild) => ({
 module.exports.babelOptions = ({ latestBuild }) => ({
   babelrc: false,
   presets: [
-    !latestBuild && [
-      require("@babel/preset-env").default,
-      {
-        useBuiltIns: "entry",
-        corejs: "3.6",
-      },
-    ],
+    !latestBuild && [require("@babel/preset-env").default, { modules: false }],
     require("@babel/preset-typescript").default,
   ].filter(Boolean),
   plugins: [
@@ -68,8 +62,7 @@ module.exports.babelOptions = ({ latestBuild }) => ({
       { loose: true, useBuiltIns: true },
     ],
     // Only support the syntax, Webpack will handle it.
-    "@babel/plugin-syntax-import-meta",
-    "@babel/plugin-syntax-dynamic-import",
+    "@babel/syntax-dynamic-import",
     "@babel/plugin-proposal-optional-chaining",
     "@babel/plugin-proposal-nullish-coalescing-operator",
     [

build-scripts/gulp/translations.js

@@ -7,6 +7,7 @@ const gulp = require("gulp");
 const fs = require("fs");
 const foreach = require("gulp-foreach");
 const merge = require("gulp-merge-json");
+const minify = require("gulp-jsonminify");
 const rename = require("gulp-rename");
 const transform = require("gulp-json-transform");
 const { mapFiles } = require("../util");
@@ -300,6 +301,7 @@ gulp.task("build-flattened-translations", function () {
         return flatten(data);
       })
     )
+    .pipe(minify())
     .pipe(
       rename((filePath) => {
         if (filePath.dirname === "core") {

build-scripts/removedIcons.json

@@ -1 +1,263 @@
-[]
+[
+  {
+    "path": "M17.5,15.61C17.33,15.37 9.53,5.4 9.27,5.08C9,4.75 9.08,4.65 9.13,4.59C9.22,4.5 9.36,4.5 9.93,4.5C10.26,4.5 13.59,4.5 13.94,4.47C14.66,4.47 14.78,4.53 14.85,4.56C14.93,4.58 15.13,4.75 15.26,4.92C15.33,5 22.32,13.36 22.39,13.45C22.46,13.54 22.59,13.69 22.67,13.84C22.76,14 22.77,14.18 22.64,14.25C22.56,14.3 18.7,15.89 18.59,15.93C18.5,16 18.27,16.06 18.11,16.04C18,16 17.77,15.92 17.5,15.61M21.47,15.42L21.75,15.47C21.75,15.47 22.68,15.65 22.77,15.67C22.87,15.69 22.96,15.76 22.95,15.79C22.94,15.87 22.9,15.91 22.83,15.95C22.77,16 18.58,18.58 18.5,18.62C18.43,18.66 18.33,18.72 18.11,18.75C17.7,18.83 16.91,18.61 16.66,18.56C16.41,18.5 6.15,16.23 6.06,16.2C5.97,16.17 5.91,16.16 5.9,16.08C5.89,15.94 6.11,15.88 6.28,15.81C6.46,15.75 11.28,14 11.45,13.93C11.62,13.86 11.84,13.84 11.95,13.83C12.06,13.82 12.73,13.93 13.03,13.97C13.34,14 14.2,14.15 14.2,14.15L16.16,16.7C16.5,17.09 16.72,17.25 17,17.28C17.15,17.29 17.31,17.25 17.42,17.2C17.5,17.16 21.47,15.42 21.47,15.42M10.25,9.18L11.96,11.37L12,11.45V11.5C11.96,11.54 8.93,14.32 8.91,14.35L5.72,15.5C5.72,15.5 5.63,15.55 5.58,15.58C5.53,15.61 5.47,15.67 5.5,15.82C5.5,15.87 5.5,16.59 5.5,16.79L1.56,18.04C1.37,18.1 1,18.23 0.95,18.19C0.88,18.14 0.97,18.03 1,17.97C1.06,17.91 9.08,10 9.39,9.7C9.84,9.24 10.25,9.18 10.25,9.18",
+    "name": "accusoft"
+  },
+  {
+    "path": "M4.94,11.12C5.23,11.12 5.5,11.16 5.76,11.23C5.77,9.09 7.5,7.35 9.65,7.35C11.27,7.35 12.67,8.35 13.24,9.77C13.83,9 14.74,8.53 15.76,8.53C17.5,8.53 18.94,9.95 18.94,11.71C18.94,11.95 18.91,12.2 18.86,12.43C19.1,12.34 19.37,12.29 19.65,12.29C20.95,12.29 22,13.35 22,14.65C22,15.95 20.95,17 19.65,17C18.35,17 6.36,17 4.94,17C3.32,17 2,15.68 2,14.06C2,12.43 3.32,11.12 4.94,11.12Z",
+    "name": "amazon-drive"
+  },
+  {
+    "path": "M8,11.5A1.25,1.25 0 0,0 6.75,12.75A1.25,1.25 0 0,0 8,14A1.25,1.25 0 0,0 9.25,12.75A1.25,1.25 0 0,0 8,11.5M16,11.5A1.25,1.25 0 0,0 14.75,12.75A1.25,1.25 0 0,0 16,14A1.25,1.25 0 0,0 17.25,12.75A1.25,1.25 0 0,0 16,11.5M12,7C13.5,7 14.9,7.33 16.18,7.91L18.34,5.75C18.73,5.36 19.36,5.36 19.75,5.75C20.14,6.14 20.14,6.77 19.75,7.16L17.95,8.96C20.41,10.79 22,13.71 22,17H2C2,13.71 3.59,10.79 6.05,8.96L4.25,7.16C3.86,6.77 3.86,6.14 4.25,5.75C4.64,5.36 5.27,5.36 5.66,5.75L7.82,7.91C9.1,7.33 10.5,7 12,7Z",
+    "name": "android-head"
+  },
+  {
+    "path": "M2,16.25C2,16.25 4,3.75 12,3.75C20,3.75 22,16.25 22,16.25C22,16.25 20,20.25 12,20.25C4,20.25 2,16.25 2,16.25M3.35,15.65C3.35,15.65 4.3,19 12,19C17,19 20,17.8 20.65,15.85C21.3,13.9 15.65,7.6 14.65,7.6C13.65,7.6 11.2,12 10.45,12C8.45,12 8.9,10 7.15,10C5.4,10 3.35,15.65 3.35,15.65Z",
+    "name": "basecamp"
+  },
+  {
+    "path": "M7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7C10.87,7 9.84,7.37 9,8V2.46C9.95,2.16 10.95,2 12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12C2,8.3 4,5.07 7,3.34V12M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9Z",
+    "name": "beats"
+  },
+  {
+    "path": "M19.58,12.27C19.54,11.65 19.33,11.18 18.96,10.86C18.59,10.54 18.13,10.38 17.58,10.38C17,10.38 16.5,10.55 16.19,10.89C15.86,11.23 15.65,11.69 15.57,12.27M21.92,12.04C22,12.45 22,13.04 22,13.81H15.5C15.55,14.71 15.85,15.33 16.44,15.69C16.79,15.92 17.22,16.03 17.73,16.03C18.26,16.03 18.69,15.89 19,15.62C19.2,15.47 19.36,15.27 19.5,15H21.88C21.82,15.54 21.53,16.07 21,16.62C20.22,17.5 19.1,17.92 17.66,17.92C16.47,17.92 15.43,17.55 14.5,16.82C13.62,16.09 13.16,14.9 13.16,13.25C13.16,11.7 13.57,10.5 14.39,9.7C15.21,8.87 16.27,8.46 17.58,8.46C18.35,8.46 19.05,8.6 19.67,8.88C20.29,9.16 20.81,9.59 21.21,10.2C21.58,10.73 21.81,11.34 21.92,12.04M9.58,14.07C9.58,13.42 9.31,12.97 8.79,12.73C8.5,12.6 8.08,12.53 7.54,12.5H4.87V15.84H7.5C8.04,15.84 8.46,15.77 8.76,15.62C9.31,15.35 9.58,14.83 9.58,14.07M4.87,10.46H7.5C8.04,10.46 8.5,10.36 8.82,10.15C9.16,9.95 9.32,9.58 9.32,9.06C9.32,8.5 9.1,8.1 8.66,7.91C8.27,7.78 7.78,7.72 7.19,7.72H4.87M11.72,12.42C12.04,12.92 12.2,13.53 12.2,14.24C12.2,15 12,15.64 11.65,16.23C11.41,16.62 11.12,16.94 10.77,17.21C10.37,17.5 9.9,17.72 9.36,17.83C8.82,17.94 8.24,18 7.61,18H2V5.55H8C9.53,5.58 10.6,6 11.23,6.88C11.61,7.41 11.8,8.04 11.8,8.78C11.8,9.54 11.61,10.15 11.23,10.61C11,10.87 10.7,11.11 10.28,11.32C10.91,11.55 11.39,11.92 11.72,12.42M20.06,7.32H15.05V6.07H20.06V7.32Z",
+    "name": "behance"
+  },
+  {
+    "path": "M5.45,10.28C6.4,10.28 7.5,11.05 7.5,12C7.5,12.95 6.4,13.72 5.45,13.72H2L2.69,10.28H5.45M6.14,4.76C7.09,4.76 8.21,5.53 8.21,6.5C8.21,7.43 7.09,8.21 6.14,8.21H2.69L3.38,4.76H6.14M13.03,4.76C14,4.76 15.1,5.53 15.1,6.5C15.1,7.43 14,8.21 13.03,8.21H9.41L10.1,4.76H13.03M12.34,10.28C13.3,10.28 14.41,11.05 14.41,12C14.41,12.95 13.3,13.72 12.34,13.72H8.72L9.41,10.28H12.34M10.97,15.79C11.92,15.79 13.03,16.57 13.03,17.5C13.03,18.47 11.92,19.24 10.97,19.24H7.5L8.21,15.79H10.97M18.55,13.72C19.5,13.72 20.62,14.5 20.62,15.45C20.62,16.4 19.5,17.17 18.55,17.17H15.1L15.79,13.72H18.55M19.93,8.21C20.88,8.21 22,9 22,9.93C22,10.88 20.88,11.66 19.93,11.66H16.5L17.17,8.21H19.93Z",
+    "name": "blackberry"
+  },
+  {
+    "path": "M12,3A9,9 0 0,1 21,12A9,9 0 0,1 12,21A9,9 0 0,1 3,12A9,9 0 0,1 12,3M5.94,8.5C4,11.85 5.15,16.13 8.5,18.06C11.85,20 18.85,7.87 15.5,5.94C12.15,4 7.87,5.15 5.94,8.5Z",
+    "name": "cisco-webex"
+  },
+  {
+    "path": "M11.9,14.5H10.8V9.5H11.9C13.5,9.5 14.6,10.4 14.6,12C14.6,13.6 13.5,14.5 11.9,14.5M11.9,7H8.1V17H11.8C15.3,17 17.4,14.9 17.4,12V12C17.4,9.1 15.4,7 11.9,7M12,20C10.1,20 8.3,19.3 6.9,18.1L6.2,17.5L4.5,17.7L5.2,16.1L4.9,15.3C4.4,14.2 4.2,13.1 4.2,11.9C4.2,7.5 7.8,3.9 12.1,3.9C16.4,3.9 19.9,7.6 19.9,12C19.9,16.4 16.3,20 12,20M12,2C6.5,2 2.1,6.5 2.1,12C2.1,13.5 2.4,14.9 3,16.2L1.4,20.3L5.7,19.7C7.4,21.2 9.7,22.1 12.1,22.1C17.6,22.1 22,17.6 22,12.1C22,6.6 17.5,2 12,2Z",
+    "name": "disqus-outline"
+  },
+  {
+    "path": "M16.42,18.42C16,16.5 15.5,14.73 15,13.17C15.5,13.1 16,13.06 16.58,13.06H16.6V13.06H16.6C17.53,13.06 18.55,13.18 19.66,13.43C19.28,15.5 18.08,17.27 16.42,18.42M12,19.8C10.26,19.8 8.66,19.23 7.36,18.26C7.64,17.81 8.23,16.94 9.18,16.04C10.14,15.11 11.5,14.15 13.23,13.58C13.82,15.25 14.36,17.15 14.77,19.29C13.91,19.62 13,19.8 12,19.8M4.2,12C4.2,11.96 4.2,11.93 4.2,11.89C4.42,11.9 4.71,11.9 5.05,11.9H5.06C6.62,11.89 9.36,11.76 12.14,10.89C12.29,11.22 12.44,11.56 12.59,11.92C10.73,12.54 9.27,13.53 8.19,14.5C7.16,15.46 6.45,16.39 6.04,17C4.9,15.66 4.2,13.91 4.2,12M8.55,5C9.1,5.65 10.18,7.06 11.34,9.25C9,9.96 6.61,10.12 5.18,10.12C5.14,10.12 5.1,10.12 5.06,10.12H5.05C4.81,10.12 4.6,10.12 4.43,10.11C5,7.87 6.5,6 8.55,5M12,4.2C13.84,4.2 15.53,4.84 16.86,5.91C15.84,7.14 14.5,8 13.03,8.65C12,6.67 11,5.25 10.34,4.38C10.88,4.27 11.43,4.2 12,4.2M18.13,7.18C19.1,8.42 19.71,9.96 19.79,11.63C18.66,11.39 17.6,11.28 16.6,11.28V11.28H16.59C15.79,11.28 15.04,11.35 14.33,11.47C14.16,11.05 14,10.65 13.81,10.26C15.39,9.57 16.9,8.58 18.13,7.18M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z",
+    "name": "dribbble"
+  },
+  {
+    "path": "M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M15.09,16.5C14.81,15.14 14.47,13.91 14.08,12.82L15.2,12.74H15.22V12.74C15.87,12.74 16.59,12.82 17.36,13C17.09,14.44 16.26,15.69 15.09,16.5M12,17.46C10.79,17.46 9.66,17.06 8.76,16.39C8.95,16.07 9.36,15.46 10,14.83C10.7,14.18 11.64,13.5 12.86,13.11C13.28,14.27 13.65,15.6 13.94,17.1C13.33,17.33 12.68,17.46 12,17.46M6.54,12V11.92L7.14,11.93V11.93C8.24,11.93 10.15,11.83 12.1,11.22L12.41,11.94C11.11,12.38 10.09,13.07 9.34,13.76C8.61,14.42 8.12,15.08 7.83,15.5C7.03,14.56 6.54,13.34 6.54,12M9.59,7.11C9.97,7.56 10.73,8.54 11.54,10.08C9.89,10.57 8.23,10.68 7.22,10.68H7.14V10.68H6.7C7.09,9.11 8.17,7.81 9.59,7.11M12,6.54C13.29,6.54 14.47,7 15.41,7.74C14.69,8.6 13.74,9.22 12.72,9.66C12,8.27 11.31,7.28 10.84,6.67C11.21,6.59 11.6,6.54 12,6.54M16.29,8.63C16.97,9.5 17.4,10.57 17.45,11.74C16.66,11.58 15.92,11.5 15.22,11.5V11.5C14.66,11.5 14.13,11.54 13.63,11.63L13.27,10.78C14.37,10.3 15.43,9.61 16.29,8.63M12,5A7,7 0 0,0 5,12A7,7 0 0,0 12,19A7,7 0 0,0 19,12A7,7 0 0,0 12,5Z",
+    "name": "dribbble-box"
+  },
+  {
+    "path": "M6.72,20.78C8.23,20.71 10.07,20.78 11.87,20.78C13.72,20.78 15.62,20.66 17.12,20.78C17.72,20.83 18.28,21.19 18.77,20.87C19.16,20.38 18.87,19.71 18.96,19.05C19.12,17.78 20.28,16.27 18.59,15.95C17.87,16.61 18.35,17.23 17.95,18.05C17.45,19.03 15.68,19.37 14,19.5C12.54,19.62 10,19.76 9.5,18.77C9.04,17.94 9.29,16.65 9.29,15.58C9.29,14.38 9.16,13.22 9.5,12.3C11.32,12.43 13.7,11.69 15,12.5C15.87,13 15.37,14.06 16.38,14.4C17.07,14.21 16.7,13.32 16.66,12.5C16.63,11.94 16.63,11.19 16.66,10.57C16.69,9.73 17,8.76 16.1,8.74C15.39,9.3 15.93,10.23 15.18,10.75C14.95,10.92 14.43,11 14.08,11C12.7,11.17 10.54,11.05 9.38,10.84C9.23,9.16 9.24,6.87 9.38,5.19C10,4.57 11.45,4.54 12.42,4.55C14.13,4.55 16.79,4.7 17.3,5.55C17.58,6 17.36,7 17.85,7.1C18.85,7.33 18.36,5.55 18.41,4.73C18.44,4.11 18.71,3.72 18.59,3.27C18.27,2.83 17.79,3.05 17.5,3.09C14.35,3.5 9.6,3.27 6.26,3.27C5.86,3.27 5.16,3.07 4.88,3.54C4.68,4.6 6.12,4.16 6.62,4.73C6.79,4.91 7.03,5.73 7.08,6.28C7.23,7.74 7.08,9.97 7.08,12.12C7.08,14.38 7.26,16.67 7.08,18.05C7,18.53 6.73,19.3 6.62,19.41C6,20.04 4.34,19.35 4.5,20.69C5.09,21.08 5.93,20.82 6.72,20.78Z",
+    "name": "etsy"
+  },
+  {
+    "path": "M12,17.5C10.15,17.5 8.42,16.56 7.41,15L17.41,12.75L22.08,11.75C22.05,10.32 21.71,8.92 21.08,7.64C18.66,2.61 12.62,0.5 7.58,2.92C2.55,5.34 0.44,11.38 2.86,16.41C5.29,21.44 11.33,23.56 16.36,21.14C18.5,20.09 20.25,18.31 21.22,16.11L16.61,15C15.6,16.57 13.86,17.5 12,17.5M12,6.5C13.76,6.5 15.41,7.34 16.44,8.77L6.57,11.19C6.96,8.5 9.28,6.5 12,6.5Z",
+    "name": "eventbrite"
+  },
+  {
+    "path": "M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M18,5H15.5A3.5,3.5 0 0,0 12,8.5V11H10V14H12V21H15V14H18V11H15V9A1,1 0 0,1 16,8H18V5Z",
+    "name": "facebook-box"
+  },
+  {
+    "path": "M21,12A9,9 0 0,1 12,21H4.5L9.74,15.76L11.16,17.17L9.33,19H12A7,7 0 0,0 19,12V7L21,5V12M3,12A9,9 0 0,1 12,3H19.5L14.26,8.24L12.84,6.83L14.67,5H12A7,7 0 0,0 5,12V17L3,19V12Z",
+    "name": "flattr"
+  },
+  {
+    "path": "M11,12C11,14.5 9,16.5 6.5,16.5C4,16.5 2,14.5 2,12C2,9.5 4,7.5 6.5,7.5C9,7.5 11,9.5 11,12M17.5,7.5C15,7.5 13,9.5 13,12C13,14.5 15,16.5 17.5,16.5C20,16.5 22,14.5 22,12C22,9.5 20,7.5 17.5,7.5Z",
+    "name": "flickr"
+  },
+  {
+    "path": "M17,5L16.57,7.5C16.5,7.73 16.2,8 15.91,8C15.61,8 12,8 12,8C11.53,8 10.95,8.32 10.95,8.79V9.2C10.95,9.67 11.53,10 12,10C12,10 14.95,10 15.28,10C15.61,10 15.93,10.36 15.86,10.71C15.79,11.07 14.94,13.28 14.9,13.5C14.86,13.67 14.64,14 14.25,14C13.92,14 11.37,14 11.37,14C10.85,14 10.69,14.07 10.34,14.5C10,14.94 7.27,18.1 7.27,18.1C7.24,18.13 7,18.04 7,18V5C7,4.7 7.61,4 8,4C8,4 16.17,4 16.5,4C16.82,4 17.08,4.61 17,5M17,14.45C17.11,13.97 18.78,6.72 19.22,4.55M17.58,2C17.58,2 8.38,2 6.91,2C5.43,2 5,3.11 5,3.8C5,4.5 5,20.76 5,20.76C5,21.54 5.42,21.84 5.66,21.93C5.9,22.03 6.55,22.11 6.94,21.66C6.94,21.66 11.65,16.22 11.74,16.13C11.87,16 11.87,16 12,16C12.26,16 14.2,16 15.26,16C16.63,16 16.85,15 17,14.45C17.11,13.97 18.78,6.72 19.22,4.55C19.56,2.89 19.14,2 17.58,2Z",
+    "name": "foursquare"
+  },
+  {
+    "path": "M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H14.56C14.24,20.93 14.23,20.32 14.23,20.11L14.24,17.64C14.24,16.8 13.95,16.25 13.63,15.97C15.64,15.75 17.74,15 17.74,11.53C17.74,10.55 17.39,9.74 16.82,9.11C16.91,8.89 17.22,7.97 16.73,6.73C16.73,6.73 15.97,6.5 14.25,7.66C13.53,7.46 12.77,7.36 12,7.35C11.24,7.36 10.46,7.46 9.75,7.66C8.03,6.5 7.27,6.73 7.27,6.73C6.78,7.97 7.09,8.89 7.18,9.11C6.61,9.74 6.26,10.55 6.26,11.53C6.26,15 8.36,15.75 10.36,16C10.1,16.2 9.87,16.6 9.79,17.18C9.27,17.41 7.97,17.81 7.17,16.43C7.17,16.43 6.69,15.57 5.79,15.5C5.79,15.5 4.91,15.5 5.73,16.05C5.73,16.05 6.32,16.33 6.73,17.37C6.73,17.37 7.25,19.12 9.76,18.58L9.77,20.11C9.77,20.32 9.75,20.93 9.43,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3Z",
+    "name": "github-box"
+  },
+  {
+    "path": "M20.38,8.53C20.54,8.13 21.06,6.54 20.21,4.39C20.21,4.39 18.9,4 15.91,6C14.66,5.67 13.33,5.62 12,5.62C10.68,5.62 9.34,5.67 8.09,6C5.1,3.97 3.79,4.39 3.79,4.39C2.94,6.54 3.46,8.13 3.63,8.53C2.61,9.62 2,11 2,12.72C2,19.16 6.16,20.61 12,20.61C17.79,20.61 22,19.16 22,12.72C22,11 21.39,9.62 20.38,8.53M12,19.38C7.88,19.38 4.53,19.19 4.53,15.19C4.53,14.24 5,13.34 5.8,12.61C7.14,11.38 9.43,12.03 12,12.03C14.59,12.03 16.85,11.38 18.2,12.61C19,13.34 19.5,14.23 19.5,15.19C19.5,19.18 16.13,19.38 12,19.38M8.86,13.12C8.04,13.12 7.36,14.12 7.36,15.34C7.36,16.57 8.04,17.58 8.86,17.58C9.69,17.58 10.36,16.58 10.36,15.34C10.36,14.11 9.69,13.12 8.86,13.12M15.14,13.12C14.31,13.12 13.64,14.11 13.64,15.34C13.64,16.58 14.31,17.58 15.14,17.58C15.96,17.58 16.64,16.58 16.64,15.34C16.64,14.11 16,13.12 15.14,13.12Z",
+    "name": "github-face"
+  },
+  {
+    "path": "M8,2A3,3 0 0,0 5,5V16.5H8V5H19A3,3 0 0,0 16,2H8M16,7.5V19H5A3,3 0 0,0 8,22H16A3,3 0 0,0 19,19V7.5H16Z",
+    "name": "glassdoor"
+  },
+  {
+    "path": "M2,22L8.5,2H15.4L9.2,20C9.2,20 8.6,22 7,22C5.9,22 2,22 2,22M16.4,5L13,15L15,20.7C15,20.7 15.4,22 17,22C18.3,22 22,22 22,22L16.4,5Z",
+    "name": "google-adwords"
+  },
+  {
+    "path": "M19,3H13V8L17,7L16,11H21V5C21,3.89 20.1,3 19,3M17,17L13,16V21H19A2,2 0 0,0 21,19V13H16M8,13H3V19A2,2 0 0,0 5,21H11V16L7,17M3,5V11H8L7,7L11,8V3H5C3.89,3 3,3.89 3,5Z",
+    "name": "google-pages"
+  },
+  {
+    "path": "M12,1.5A9,9 0 0,1 21,10.5C21,13.11 19.89,15.47 18.11,17.11L17.05,16.05C18.55,14.68 19.5,12.7 19.5,10.5A7.5,7.5 0 0,0 12,3A7.5,7.5 0 0,0 4.5,10.5C4.5,12.7 5.45,14.68 6.95,16.05L5.89,17.11C4.11,15.47 3,13.11 3,10.5A9,9 0 0,1 12,1.5M12,4.5A6,6 0 0,1 18,10.5C18,12.28 17.22,13.89 16,15L14.92,13.92C15.89,13.1 16.5,11.87 16.5,10.5C16.5,8 14.5,6 12,6C9.5,6 7.5,8 7.5,10.5C7.5,11.87 8.11,13.1 9.08,13.92L8,15C6.78,13.89 6,12.28 6,10.5A6,6 0 0,1 12,4.5M8.11,17.65L11.29,14.46C11.68,14.07 12.32,14.07 12.71,14.46L15.89,17.65C16.28,18.04 16.28,18.67 15.89,19.06L12.71,22.24C12.32,22.63 11.68,22.63 11.29,22.24L8.11,19.06C7.72,18.67 7.72,18.04 8.11,17.65Z",
+    "name": "google-physical-web"
+  },
+  {
+    "path": "M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M19.5,12H18V10.5H17V12H15.5V13H17V14.5H18V13H19.5V12M9.65,11.36V12.9H12.22C12.09,13.54 11.45,14.83 9.65,14.83C8.11,14.83 6.89,13.54 6.89,12C6.89,10.46 8.11,9.17 9.65,9.17C10.55,9.17 11.13,9.56 11.45,9.88L12.67,8.72C11.9,7.95 10.87,7.5 9.65,7.5C7.14,7.5 5.15,9.5 5.15,12C5.15,14.5 7.14,16.5 9.65,16.5C12.22,16.5 13.96,14.7 13.96,12.13C13.96,11.81 13.96,11.61 13.89,11.36H9.65Z",
+    "name": "google-plus-box"
+  },
+  {
+    "path": "M14,20.95H20V10.78L8,7.34V3.05H4V20.95H10V15.31H14V20.95Z",
+    "name": "houzz"
+  },
+  {
+    "path": "M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M13.5,18.71H18V11.09L9,8.5V5.29H6V18.71H10.5V14.5H13.5V18.71Z",
+    "name": "houzz-box"
+  },
+  {
+    "path": "M10,5A1,1 0 0,0 9,4H8V2H16V4H15A1,1 0 0,0 14,5V19A1,1 0 0,0 15,20H16V22H8V20H9A1,1 0 0,0 10,19V5Z",
+    "name": "instapaper"
+  },
+  {
+    "path": "M7.85,17.07C7.03,17.17 3.5,17.67 4.06,20.26C4.69,23.3 9.87,22.59 9.83,19C9.81,16.57 9.83,9.2 9.83,9.2C9.83,9.2 9.76,8.53 10.43,8.39L18.19,6.79C18.19,6.79 18.83,6.65 18.83,7.29C18.83,7.89 18.83,14.2 18.83,14.2C18.83,14.2 18.9,14.83 18.12,15C17.34,15.12 13.91,15.4 14.19,18C14.5,21.07 20,20.65 20,17.07V2.61C20,2.61 20.04,1.62 18.9,1.87L9.5,3.78C9.5,3.78 8.66,3.96 8.66,4.77C8.66,5.5 8.66,16.11 8.66,16.11C8.66,16.11 8.66,16.96 7.85,17.07Z",
+    "name": "itunes"
+  },
+  {
+    "path": "M2,5.69C8.92,1.07 11.1,7 11.28,10.27C11.46,13.53 8.29,17.64 4.31,14.92V20.3L2,18.77V5.69M4.22,7.4V12.78C7.84,14.95 9.08,13.17 9.08,10.09C9.08,5.74 6.57,5.59 4.22,7.4M15.08,4.15C15.08,4.15 14.9,7.64 15.08,11.07C15.44,14.5 19.69,11.84 19.69,11.84V4.92L22,5.2V14.44C22,20.6 15.85,20.3 15.85,20.3L15.08,18C20.46,18 19.78,14.43 19.78,14.43C13.27,16.97 12.77,12.61 12.77,12.61V5.69L15.08,4.15Z",
+    "name": "language-python-text"
+  },
+  {
+    "path": "M18,17.93C15.92,17.92 14.81,16.9 14.04,15.09L13.82,14.6L11.92,10.23C11.29,8.69 9.72,7.64 7.96,7.64C5.57,7.64 3.63,9.59 3.63,12C3.63,14.41 5.57,16.36 7.96,16.36C9.62,16.36 11.08,15.41 11.8,14L12.57,15.81C11.5,17.15 9.82,18 7.96,18C4.67,18 2,15.32 2,12C2,8.69 4.67,6 7.96,6C10.44,6 12.45,7.34 13.47,9.7C13.54,9.89 14.54,12.24 15.42,14.24C15.96,15.5 16.42,16.31 17.91,16.36C19.38,16.41 20.39,15.5 20.39,14.37C20.39,13.26 19.62,13 18.32,12.56C16,11.79 14.79,11 14.79,9.15C14.79,7.33 16,6.12 18,6.12C19.31,6.12 20.24,6.7 20.89,7.86L19.62,8.5C19.14,7.84 18.61,7.57 17.94,7.57C17,7.57 16.33,8.23 16.33,9.1C16.33,10.34 17.43,10.53 18.97,11.03C21.04,11.71 22,12.5 22,14.42C22,16.45 20.27,17.93 18,17.93Z",
+    "name": "lastfm"
+  },
+  {
+    "path": "M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3H19M18.5,18.5V13.2A3.26,3.26 0 0,0 15.24,9.94C14.39,9.94 13.4,10.46 12.92,11.24V10.13H10.13V18.5H12.92V13.57C12.92,12.8 13.54,12.17 14.31,12.17A1.4,1.4 0 0,1 15.71,13.57V18.5H18.5M6.88,8.56A1.68,1.68 0 0,0 8.56,6.88C8.56,5.95 7.81,5.19 6.88,5.19A1.69,1.69 0 0,0 5.19,6.88C5.19,7.81 5.95,8.56 6.88,8.56M8.27,18.5V10.13H5.5V18.5H8.27Z",
+    "name": "linkedin-box"
+  },
+  {
+    "path": "M9.56,12.5C9.56,12.6 9.5,12.72 9.4,12.79C9.2,12.97 8.89,12.94 8.71,12.74C8.63,12.65 8.59,12.53 8.59,12.41V8.5H5.66V13.39A2.44,2.44 0 0,0 8.1,15.83C8.68,15.83 9.24,15.62 9.68,15.24C9.64,15.6 9.43,15.93 9.11,16.11C8.75,16.31 8.35,16.42 7.94,16.41C7.46,16.41 7,16.3 6.56,16.09L6.39,16V18.6C7.04,18.86 7.74,19 8.44,19C9.47,19 10.46,18.66 11.25,18C12.08,17.25 12.54,16.18 12.5,15.06V8.5H9.56V12.5M4.93,13.39V5.59H2V12.9C1.84,14.35 2.88,15.65 4.33,15.81C4.41,15.82 4.5,15.83 4.56,15.83V15.83C4.93,15.83 5.29,15.74 5.63,15.59L5.75,15.5L5.65,15.41C5.17,14.85 4.91,14.13 4.93,13.39M22,11.39V8.5H21C20.59,6.38 18.53,5 16.41,5.41C16.17,5.45 15.94,5.5 15.71,5.61C14.28,6.24 13.33,7.62 13.26,9.18V15.83H13.39C14.95,15.76 16.19,14.47 16.19,12.9H17.41V10H16.15V9.17C16.15,8.86 16.32,8.57 16.59,8.41C17.06,8.13 17.68,8.28 17.96,8.76C18.05,8.91 18.09,9.07 18.1,9.24V11.93C18.07,14.05 19.75,15.79 21.87,15.83H22V12.9H22A1,1 0 0,1 21,11.9V11.41L22,11.39Z",
+    "name": "lyft"
+  },
+  {
+    "path": "M15.45,11.91C15.34,9.7 13.7,8.37 11.72,8.37H11.64C9.35,8.37 8.09,10.17 8.09,12.21C8.09,14.5 9.62,15.95 11.63,15.95C13.88,15.95 15.35,14.3 15.46,12.36M11.65,6.39C13.18,6.39 14.62,7.07 15.67,8.13V8.13C15.67,7.62 16,7.24 16.5,7.24H16.61C17.35,7.24 17.5,7.94 17.5,8.16V16.06C17.46,16.58 18.04,16.84 18.37,16.5C19.64,15.21 21.15,9.81 17.58,6.69C14.25,3.77 9.78,4.25 7.4,5.89C4.88,7.63 3.26,11.5 4.83,15.11C6.54,19.06 11.44,20.24 14.35,19.06C15.83,18.47 16.5,20.46 15,21.11C12.66,22.1 6.23,22 3.22,16.79C1.19,13.27 1.29,7.08 6.68,3.87C10.81,1.42 16.24,2.1 19.5,5.5C22.95,9.1 22.75,15.8 19.4,18.41C17.89,19.59 15.64,18.44 15.66,16.71L15.64,16.15C14.59,17.2 13.18,17.81 11.65,17.81C8.63,17.81 6,15.15 6,12.13C6,9.08 8.63,6.39 11.65,6.39Z",
+    "name": "mail-ru"
+  },
+  {
+    "path": "M20.93,14C20.66,15.4 18.5,16.95 15.97,17.25C14.66,17.4 13.38,17.55 12,17.5C9.76,17.38 8,16.95 8,16.95L8.03,17.57C8.32,19.78 10.22,19.92 12.03,20C13.85,20.04 15.47,19.53 15.47,19.53L15.55,21.17C15.55,21.17 14.27,21.86 12,22C10.75,22.05 9.2,21.95 7.39,21.47C3.47,20.43 2.79,16.25 2.69,12L2.68,8.57C2.68,4.23 5.5,2.96 5.5,2.96C6.95,2.3 9.41,2 11.97,2H12.03C14.59,2 17.05,2.3 18.5,2.96C18.5,2.96 21.33,4.23 21.33,8.57C21.33,8.57 21.36,11.77 20.93,14M8.33,10.32C8.33,9.54 7.7,8.91 6.93,8.91C6.15,8.91 5.5,9.54 5.5,10.32C5.5,11.09 6.15,11.72 6.93,11.72A1.4,1.4 0 0,0 8.33,10.32M13.41,10.32A1.41,1.41 0 0,0 12,8.91A1.41,1.41 0 0,0 10.59,10.32C10.59,11.09 11.22,11.72 12,11.72C12.78,11.72 13.41,11.09 13.41,10.32M18.5,10.32C18.5,9.54 17.85,8.91 17.07,8.91C16.3,8.91 15.67,9.54 15.67,10.32A1.4,1.4 0 0,0 17.07,11.72C17.85,11.72 18.5,11.09 18.5,10.32Z",
+    "name": "mastodon-variant"
+  },
+  {
+    "path": "M4.37,7.3C4.4,7.05 4.3,6.81 4.12,6.65L2.25,4.4V4.06H8.05L12.53,13.89L16.47,4.06H22V4.4L20.4,5.93C20.27,6.03 20.2,6.21 20.23,6.38V17.62C20.2,17.79 20.27,17.97 20.4,18.07L21.96,19.6V19.94H14.12V19.6L15.73,18.03C15.89,17.88 15.89,17.83 15.89,17.59V8.5L11.4,19.9H10.8L5.57,8.5V16.14C5.5,16.46 5.63,16.78 5.86,17L7.96,19.57V19.9H2V19.57L4.1,17C4.33,16.78 4.43,16.46 4.37,16.14V7.3Z",
+    "name": "medium"
+  },
+  {
+    "path": "M19.61,14.86C19.61,16.68 18.3,18.25 16.5,18.55C16.29,18.59 16.07,18.62 15.84,18.61C15.76,18.61 15.73,18.64 15.71,18.71C15.35,19.74 14.64,20.35 13.57,20.5C12.86,20.6 12.22,20.41 11.65,19.97C11.57,19.9 11.5,19.9 11.44,19.96C10.78,20.43 10.04,20.64 9.23,20.59C7.66,20.5 6.33,19.29 6.08,17.74C6.06,17.63 6.04,17.5 6.04,17.41C6.04,17.32 6,17.29 5.92,17.27C5.44,17.18 5,17 4.63,16.68C3.92,16.13 3.5,15.41 3.4,14.5C3.29,13.5 3.61,12.62 4.32,11.89C4.38,11.83 4.38,11.79 4.34,11.72C4.07,11.24 3.94,10.72 3.96,10.17C4,8.79 4.97,7.65 6.31,7.37C6.46,7.33 6.54,7.27 6.61,7.13C7.27,5.71 8.37,4.85 9.91,4.56C11,4.36 12,4.58 12.94,5.13C13,5.18 13.08,5.18 13.17,5.16C14.67,4.72 16,5.04 17.12,6.11C17.78,6.74 18.15,7.54 18.26,8.46C18.28,8.66 18.29,8.86 18.28,9.06C18.27,9.14 18.29,9.17 18.37,9.19C19.04,9.44 19.5,9.91 19.71,10.6C19.96,11.45 19.75,12.21 19.11,12.83C19.05,12.89 19.07,12.92 19.1,12.97C19.44,13.56 19.61,14.18 19.61,14.86M12.93,14.57C12.93,15.34 13.43,16 14.14,16.26C14.5,16.37 14.85,16.43 15.22,16.45C15.5,16.46 15.75,16.44 16,16.32C16.19,16.22 16.28,16.06 16.27,15.85C16.26,15.64 16.16,15.5 15.96,15.4C15.89,15.37 15.82,15.34 15.74,15.33C15.5,15.29 15.3,15.26 15.07,15.21C14.71,15.14 14.55,14.95 14.55,14.57C14.54,14.24 14.63,13.93 14.73,13.63C14.92,13.07 15.17,12.53 15.41,12C15.64,11.47 15.88,10.95 16.04,10.4C16.13,10.1 16.18,9.8 16.09,9.5C15.97,9 15.69,8.7 15.2,8.61C14.75,8.5 14.3,8.5 13.9,8.78C13.76,8.87 13.63,8.85 13.5,8.74C13.43,8.67 13.34,8.58 13.26,8.5C12.84,8.12 12.3,8.1 11.85,8.45C11.67,8.59 11.5,8.76 11.33,8.89C11.16,9 11,9.03 10.79,8.92C10.6,8.83 10.42,8.74 10.23,8.65C10.03,8.57 9.85,8.46 9.63,8.44C8.95,8.38 8.24,8.79 7.94,9.41C7.8,9.68 7.69,9.96 7.59,10.25C7.11,11.57 6.72,12.91 6.32,14.26C6.14,14.86 6.35,15.45 6.86,15.77C7.26,16 7.69,16.09 8.14,15.95C8.5,15.84 8.71,15.55 8.85,15.22C9.31,14.13 9.73,13 10.17,11.91C10.29,11.61 10.41,11.3 10.54,11C10.67,10.7 11.04,10.6 11.26,10.8C11.4,10.92 11.44,11.09 11.42,11.26C11.41,11.45 11.34,11.62 11.27,11.79C11,12.5 10.69,13.24 10.4,13.97C10.34,14.11 10.28,14.26 10.25,14.42C10.21,14.69 10.31,14.93 10.54,15C10.76,15.12 11,15.14 11.23,15.05C11.5,14.95 11.67,14.74 11.79,14.5C12.22,13.65 12.65,12.8 13.08,11.95C13.28,11.56 13.5,11.17 13.68,10.78C13.76,10.64 13.85,10.5 14,10.41C14.12,10.33 14.25,10.33 14.38,10.4C14.5,10.47 14.5,10.6 14.5,10.73C14.5,10.8 14.5,10.87 14.47,10.93C14.41,11.07 14.36,11.2 14.3,11.33C13.94,12.09 13.57,12.84 13.22,13.59C13.07,13.91 12.91,14.23 12.93,14.57M17.96,20.12C17.96,19.62 17.54,19.2 17.04,19.2C16.5,19.2 16.1,19.61 16.1,20.12A0.93,0.93 0 0,0 17.03,21.05A0.93,0.93 0 0,0 17.96,20.12M2.38,12.46C2.86,12.46 3.27,12.05 3.27,11.57C3.27,11.09 2.87,10.69 2.39,10.69C1.89,10.69 1.5,11.08 1.5,11.57C1.5,12.06 1.89,12.46 2.38,12.46M13.26,2.55C12.77,2.55 12.37,2.94 12.37,3.42C12.37,3.91 12.77,4.3 13.25,4.3C13.74,4.3 14.13,3.92 14.13,3.43C14.13,2.95 13.74,2.55 13.26,2.55M20.45,8.03C20.45,7.63 20.11,7.29 19.71,7.29C19.3,7.28 18.95,7.63 18.95,8.04C18.95,8.45 19.28,8.78 19.7,8.78C20.12,8.78 20.46,8.45 20.45,8.03M5.04,5.89C5.04,6.27 5.34,6.56 5.71,6.56C6.09,6.56 6.39,6.26 6.38,5.88C6.38,5.5 6.09,5.22 5.72,5.22C5.33,5.22 5.04,5.5 5.04,5.89M12.06,21.44C12.06,21.12 11.81,20.86 11.5,20.86C11.16,20.86 10.91,21.11 10.91,21.44C10.91,21.75 11.16,22 11.5,22C11.8,22 12.06,21.75 12.06,21.44M21,12.5C20.71,12.5 20.45,12.78 20.45,13.08A0.55,0.55 0 0,0 21,13.63C21.33,13.63 21.57,13.4 21.57,13.08C21.57,12.77 21.33,12.5 21,12.5M7.62,2C7.35,2 7.14,2.2 7.14,2.47C7.14,2.73 7.35,2.94 7.62,2.94A0.47,0.47 0 0,0 8.09,2.47C8.09,2.2 7.89,2 7.62,2M22.08,10C21.86,10 21.67,10.17 21.66,10.4C21.66,10.63 21.85,10.82 22.08,10.82C22.32,10.82 22.5,10.64 22.5,10.41C22.5,10.17 22.32,10 22.08,10M5.5,18.26C5.5,18.04 5.29,17.85 5.06,17.84C4.84,17.84 4.65,18.03 4.65,18.27C4.65,18.5 4.84,18.68 5.07,18.68C5.3,18.68 5.5,18.5 5.5,18.26Z",
+    "name": "meetup"
+  },
+  {
+    "path": "M21.11,18.5C20.97,18.5 20.83,18.44 20.71,18.36C20.37,18.13 20.28,17.68 20.5,17.34C21.18,16.34 21.54,15.16 21.54,13.93C21.54,12.71 21.18,11.53 20.5,10.5C20.28,10.18 20.37,9.73 20.71,9.5C21.04,9.28 21.5,9.37 21.72,9.7C22.56,10.95 23,12.41 23,13.93C23,15.45 22.56,16.91 21.72,18.16C21.58,18.37 21.35,18.5 21.11,18.5M19,17.29C18.88,17.29 18.74,17.25 18.61,17.17C18.28,16.94 18.19,16.5 18.42,16.15C18.86,15.5 19.1,14.73 19.1,13.93C19.1,13.14 18.86,12.37 18.42,11.71C18.19,11.37 18.28,10.92 18.61,10.69C18.95,10.47 19.4,10.55 19.63,10.89C20.24,11.79 20.56,12.84 20.56,13.93C20.56,15 20.24,16.07 19.63,16.97C19.5,17.18 19.25,17.29 19,17.29M14.9,15.73C15.89,15.73 16.7,14.92 16.7,13.93C16.7,13.17 16.22,12.5 15.55,12.25C15.5,12.55 15.43,12.85 15.34,13.14C15.23,13.44 14.95,13.64 14.64,13.64C14.57,13.64 14.5,13.62 14.41,13.6C14.03,13.47 13.82,13.06 13.95,12.67C14.09,12.24 14.17,11.78 14.17,11.32C14.17,8.93 12.22,7 9.82,7C8.1,7 6.56,8 5.87,9.5C6.54,9.7 7.16,10.04 7.66,10.54C7.95,10.83 7.95,11.29 7.66,11.58C7.38,11.86 6.91,11.86 6.63,11.58C6.17,11.12 5.56,10.86 4.9,10.86C3.56,10.86 2.46,11.96 2.46,13.3C2.46,14.64 3.56,15.73 4.9,15.73H14.9M15.6,10.75C17.06,11.07 18.17,12.37 18.17,13.93C18.17,15.73 16.7,17.19 14.9,17.19H4.9C2.75,17.19 1,15.45 1,13.3C1,11.34 2.45,9.73 4.33,9.45C5.12,7.12 7.33,5.5 9.82,5.5C12.83,5.5 15.31,7.82 15.6,10.75Z",
+    "name": "mixcloud"
+  },
+  {
+    "path": "M3.25,4.03L19.95,20.73L18.7,22L14.86,18.13C14.77,18.12 14.68,18.09 14.59,18.05C14.26,17.89 14.14,17.62 14.11,17.38L12.18,15.45C12.14,15.53 12.09,15.6 12.05,15.66C11.62,16.26 11.19,16.26 10.86,16.04C10.54,15.83 5.5,12 5.23,11.87C4.95,11.76 4.85,12.03 5.12,13.5C5.39,15 4.95,15.39 4.57,15.45C4.2,15.5 3.06,15.18 3,12.14C2.95,9.11 3.76,8.62 4.14,8.62C4.6,8.62 7.08,10.69 8.84,12.12L2,5.28L3.25,4.03M18.38,16.56C18.75,15.4 19.12,13.8 19.1,12.03V12C19.14,8.5 17.66,5.58 17.66,5.58C17.66,5.58 17.42,4.72 18.12,4.39C18.83,4.06 19.3,4.61 19.3,4.61C21.12,8.22 21,11.64 21,12C21,12.27 21.09,14.96 19.88,18.05L18.38,16.56M15.14,13.31C15.19,12.92 15.22,12.5 15.24,12.03V12C15.14,8.5 14.13,7.21 14.13,7.21C14.13,7.21 13.89,6.34 14.59,6C15.3,5.69 15.77,6.23 15.77,6.23C17.26,8.94 17.16,11.64 17.14,12C17.15,12.2 17.2,13.38 16.82,15L15.14,13.31M10.2,8.38C10.23,7.77 10.59,7.64 10.59,7.64C10.59,7.64 11.19,7.37 11.57,7.8C11.91,8.19 12.72,9.57 12.89,11.07L10.2,8.38Z",
+    "name": "nfc-off"
+  },
+  { "path": "M20,4H4V20H12V8H16V20H20V4", "name": "npm-variant" },
+  {
+    "path": "M3,3V21H21V3H3M6,6H18V18H15V9H12V18H6V6Z",
+    "name": "npm-variant-outline"
+  },
+  {
+    "path": "M8.32,21.97C8.21,21.92 8.08,21.76 8.06,21.65C8.03,21.5 8,21.76 8.66,17.56C9.26,13.76 9.25,13.82 9.33,13.71C9.46,13.54 9.44,13.54 10.94,13.53C12.26,13.5 12.54,13.5 13.13,13.41C16.38,12.96 18.39,11.05 19.09,7.75C19.13,7.53 19.17,7.34 19.18,7.34C19.18,7.33 19.25,7.38 19.33,7.44C20.36,8.22 20.71,9.66 20.32,11.58C19.86,13.87 18.64,15.39 16.74,16.04C15.93,16.32 15.25,16.43 14.05,16.46C13.25,16.5 13.23,16.5 13,16.65C12.83,16.82 12.84,16.79 12.45,19.2C12.18,20.9 12.08,21.45 12.04,21.55C11.97,21.71 11.83,21.85 11.67,21.93L11.56,22H10C8.71,22 8.38,22 8.32,21.97V21.97M3.82,19.74C3.63,19.64 3.5,19.47 3.5,19.27C3.5,19 6.11,2.68 6.18,2.5C6.27,2.32 6.5,2.13 6.68,2.06L6.83,2H10.36C14.27,2 14.12,2 15,2.2C17.62,2.75 18.82,4.5 18.37,7.13C17.87,10.06 16.39,11.8 13.87,12.43C13,12.64 12.39,12.7 10.73,12.7C9.42,12.7 9.32,12.71 9.06,12.85C8.8,13 8.59,13.27 8.5,13.6C8.46,13.67 8.23,15.07 7.97,16.7C7.71,18.33 7.5,19.69 7.5,19.72L7.47,19.78H5.69C4.11,19.78 3.89,19.78 3.82,19.74V19.74Z",
+    "name": "paypal"
+  },
+  {
+    "path": "M12,7A2,2 0 0,1 10,9A2,2 0 0,1 8,7C7.37,7.84 7,8.87 7,10A5,5 0 0,0 12,15A5,5 0 0,0 17,10A5,5 0 0,0 12,5C11.57,5 11.16,5.05 10.77,5.15C11.5,5.45 12,6.17 12,7M12,2A8,8 0 0,1 20,10C20,11.05 19.8,12.04 19.43,12.96C17.89,17.38 13.63,22 12,22C10.37,22 6.11,17.38 4.57,12.96C4.2,12.04 4,11.05 4,10A8,8 0 0,1 12,2Z",
+    "name": "periscope"
+  },
+  {
+    "path": "M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H9.29C9.69,20.33 10.19,19.38 10.39,18.64L11.05,16.34C11.36,16.95 12.28,17.45 13.22,17.45C16.17,17.45 18.22,14.78 18.22,11.45C18.22,8.28 15.64,5.89 12.3,5.89C8.14,5.89 5.97,8.67 5.97,11.72C5.97,13.14 6.69,14.89 7.91,15.45C8.08,15.56 8.19,15.5 8.19,15.34L8.47,14.28C8.5,14.14 8.5,14.06 8.41,14C7.97,13.45 7.69,12.61 7.69,11.78C7.69,9.64 9.3,7.61 12.03,7.61C14.42,7.61 16.08,9.19 16.08,11.5C16.08,14.11 14.75,15.95 13.03,15.95C12.05,15.95 11.39,15.11 11.55,14.17C11.83,13.03 12.39,11.83 12.39,11C12.39,10.22 12,9.61 11.16,9.61C10.22,9.61 9.39,10.61 9.39,11.95C9.39,12.83 9.66,13.39 9.66,13.39L8.55,18.17C8.39,19 8.47,20.25 8.55,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3Z",
+    "name": "pinterest-box"
+  },
+  {
+    "path": "M21.9,4.26C21.64,3.55 20.96,3.07 20.2,3.07H20.19L18.46,3.07H3.81C3.07,3.07 2.39,3.54 2.12,4.24C2.04,4.45 2,4.66 2,4.88V10.92L2.07,12.12C2.36,14.85 3.78,17.23 5.97,18.9C6,18.93 6.05,18.96 6.09,19H6.11C7.29,19.86 8.6,20.44 10,20.73C10.68,20.86 11.35,20.93 12,20.93C12.63,20.93 13.25,20.87 13.85,20.76C13.93,20.75 14,20.73 14.07,20.72C14.09,20.71 14.11,20.7 14.14,20.69C15.5,20.4 16.76,19.83 17.89,19H17.91C17.95,18.96 18,18.93 18.03,18.9C20.22,17.23 21.64,14.85 21.93,12.12L22,10.92V4.88C22,4.68 21.97,4.47 21.9,4.26M17.67,10.55L12.96,15.06C12.7,15.32 12.35,15.44 12,15.44C11.67,15.44 11.33,15.32 11.06,15.06L6.36,10.55C5.81,10.03 5.79,9.16 6.32,8.61C6.84,8.06 7.71,8.05 8.26,8.57L12,12.17L15.77,8.57C16.31,8.05 17.18,8.07 17.71,8.61C18.23,9.16 18.21,10.03 17.67,10.55Z",
+    "name": "pocket"
+  },
+  {
+    "path": "M12,3A9,9 0 0,1 21,12C21,13.76 20.5,15.4 19.62,16.79L21,18.17V20A1,1 0 0,1 20,21H18.18L16.79,19.62C15.41,20.5 13.76,21 12,21A9,9 0 0,1 3,12A9,9 0 0,1 12,3M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17C12.65,17 13.26,16.88 13.83,16.65L10.95,13.77C10.17,13 10.17,11.72 10.95,10.94C11.73,10.16 13,10.16 13.78,10.94L16.66,13.82C16.88,13.26 17,12.64 17,12A5,5 0 0,0 12,7Z",
+    "name": "quicktime"
+  },
+  {
+    "path": "M18.61,5.89C18.6,5.79 18.5,5.73 18.44,5.73C18.37,5.72 16.83,5.61 16.83,5.61C16.83,5.61 15.76,4.55 15.65,4.43C15.53,4.31 15.3,4.35 15.21,4.37C15.2,4.37 15,4.44 14.61,4.55C14.25,3.5 13.62,2.58 12.43,2.58C12.11,2.18 11.72,2 11.38,2C8.8,2 7.57,5.22 7.18,6.86C6.18,7.17 5.47,7.39 5.37,7.42C4.82,7.6 4.8,7.62 4.73,8.14C4.67,8.54 3.21,19.86 3.21,19.86L14.61,22L20.79,20.66C20.79,20.66 18.62,6 18.61,5.89M14,4.76C13.69,4.85 13.37,4.95 13,5.06C13,5 13,4.93 13,4.85C13,4.21 12.93,3.7 12.79,3.29C13.35,3.36 13.73,4 14,4.76M12.08,3.42C12.24,3.82 12.34,4.39 12.34,5.16C12.34,5.2 12.34,5.24 12.34,5.27C11.71,5.46 11.03,5.68 10.35,5.89C10.73,4.4 11.45,3.69 12.08,3.42M11.31,2.69C11.42,2.69 11.53,2.73 11.64,2.8C10.81,3.19 9.93,4.17 9.55,6.12C9,6.3 8.47,6.46 8,6.62C8.42,5.12 9.46,2.69 11.31,2.69M12.5,9.15L11.76,11.42C11.76,11.42 11.09,11.06 10.27,11.06C9.07,11.06 9,11.81 9,12C9,13.04 11.71,13.43 11.71,15.86C11.71,17.77 10.5,19 8.87,19C6.91,19 5.91,17.78 5.91,17.78L6.43,16.05C6.43,16.05 7.46,16.93 8.33,16.93C8.9,16.93 9.13,16.5 9.13,16.16C9.13,14.81 6.92,14.75 6.92,12.53C6.92,10.66 8.26,8.85 10.97,8.85C12,8.85 12.5,9.15 12.5,9.15M15.43,5.29L16.75,6.6L17.71,6.68C18.05,9 19.19,16.73 19.66,19.88L14.66,20.97L15.43,5.29Z",
+    "name": "shopify"
+  },
+  {
+    "path": "M7.47,17.19C7.37,17.95 7.08,18.21 6.19,18.21C5.27,18.21 4.87,17.79 4.81,16.87L4.61,13.65C4.61,12.91 4.87,12.55 5.86,12.55C7.21,12.55 7.04,13.54 7.64,14.5C8.33,15.62 10,16.35 12.31,16.35C15.17,16.35 17,15.14 17,13.57C17,12.23 15.89,11.39 13.85,11.16L11.5,10.89C7.21,10.42 5.1,9.19 5.1,6.62C5.1,4.07 8.06,2 12.21,2C13.5,2 14.81,2.29 16.29,2.76C16.29,2.26 16.58,2.1 17.3,2.1C18.46,2.1 18.55,2.39 18.62,3.08L18.85,5.88C18.85,6.5 18.39,6.83 17.63,6.83C16.35,6.83 16.55,5.88 15.86,5.07C15.17,4.26 13.79,3.73 12.08,3.73C9.44,3.73 7.7,4.89 7.7,6.5C7.7,7.8 8.92,8.56 11.38,8.82L13.95,9.08C17.7,9.5 19.61,10.92 19.61,13.33C19.61,16.17 16.71,18.08 12.21,18.08C10.56,18.08 9.08,17.77 7.47,17.19M1,16H2V21H23V22H1V16Z",
+    "name": "slackware"
+  },
+  {
+    "path": "M6,3H18A3,3 0 0,1 21,6V18A3,3 0 0,1 18,21H6A3,3 0 0,1 3,18V6A3,3 0 0,1 6,3M7,6A1,1 0 0,0 6,7V17A1,1 0 0,0 7,18H17A1,1 0 0,0 18,17V7A1,1 0 0,0 17,6H7M9.5,9H14.5A0.5,0.5 0 0,1 15,9.5V14.5A0.5,0.5 0 0,1 14.5,15H9.5A0.5,0.5 0 0,1 9,14.5V9.5A0.5,0.5 0 0,1 9.5,9Z",
+    "name": "square-inc"
+  },
+  {
+    "path": "M5.5,0H18.5A5.5,5.5 0 0,1 24,5.5V18.5A5.5,5.5 0 0,1 18.5,24H5.5A5.5,5.5 0 0,1 0,18.5V5.5A5.5,5.5 0 0,1 5.5,0M15.39,15.18C15.39,16.76 14.5,17.81 12.85,17.95V12.61C14.55,13.13 15.39,13.66 15.39,15.18M11.65,6V10.88C10.34,10.5 9.03,9.93 9.03,8.43C9.03,6.94 10.18,6.12 11.65,6M15.5,7.6L16.5,6.8C15.62,5.66 14.4,4.92 12.85,4.77V3.8H11.65V3.8L11.65,4.75C9.5,4.89 7.68,6.17 7.68,8.5C7.68,11 9.74,11.78 11.65,12.29V17.96C10.54,17.84 9.29,17.31 8.43,16.03L7.3,16.78C8.2,18.12 9.76,19 11.65,19.14V20.2H12.07L12.85,20.2V19.16C15.35,19 16.7,17.34 16.7,15.14C16.7,12.58 14.81,11.76 12.85,11.19V6.05C14,6.22 14.85,6.76 15.5,7.6Z",
+    "name": "square-inc-cash"
+  },
+  {
+    "path": "M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V15L6.19,16.31C6.45,17.6 7.6,18.58 8.97,18.58C10.53,18.58 11.8,17.31 11.8,15.75V15.62L15.2,13.19H15.28C17.36,13.19 19.05,11.5 19.05,9.42C19.05,7.34 17.36,5.65 15.28,5.65C13.2,5.65 11.5,7.34 11.5,9.42V9.47L9.13,12.93L8.97,12.92C8.38,12.92 7.83,13.1 7.38,13.41L3,11.6V5A2,2 0 0,1 5,3H19M8.28,17.17C9.08,17.5 10,17.13 10.33,16.33C10.66,15.53 10.28,14.62 9.5,14.29L8.22,13.76C8.71,13.58 9.26,13.57 9.78,13.79C10.31,14 10.72,14.41 10.93,14.94C11.15,15.46 11.15,16.04 10.93,16.56C10.5,17.64 9.23,18.16 8.15,17.71C7.65,17.5 7.27,17.12 7.06,16.67L8.28,17.17M17.8,9.42C17.8,10.81 16.67,11.94 15.28,11.94C13.9,11.94 12.77,10.81 12.77,9.42A2.51,2.51 0 0,1 15.28,6.91C16.67,6.91 17.8,8.04 17.8,9.42M13.4,9.42C13.4,10.46 14.24,11.31 15.29,11.31C16.33,11.31 17.17,10.46 17.17,9.42C17.17,8.38 16.33,7.53 15.29,7.53C14.24,7.53 13.4,8.38 13.4,9.42Z",
+    "name": "steam-box"
+  },
+  {
+    "path": "M14.92,17.16L16.75,13.53H19.45L14.94,22.5L10.37,13.53H13.07L14.92,17.16M10.63,8.66L8.18,13.55H4.55L10.61,1.5L16.74,13.55H13.11L10.63,8.66Z",
+    "name": "strava"
+  },
+  {
+    "path": "M12,14C11,14 9,15 9,16C9,18 12,18 12,18V17A1,1 0 0,1 11,16A1,1 0 0,1 12,15V14M12,19C12,19 8,18.5 8,16.5C8,13.5 11,12.75 12,12.75V11.5C11,11.5 7,13 7,16C7,20 12,20 12,20V19M10.07,7.03L11.26,7.56C11.69,5.12 12.84,3.5 12.84,3.5C12.41,4.53 12.13,5.38 11.95,6.05C13.16,3.55 15.61,2 15.61,2C14.43,3.18 13.56,4.46 12.97,5.53C14.55,3.85 16.74,2.75 16.74,2.75C14.05,4.47 12.84,7.2 12.54,7.96L13.09,8.04C13.09,8.56 13.09,9.04 13.34,9.42C14.1,11.31 18,11.47 18,16C18,20.53 13.97,22 11.83,22C9.69,22 5,21.03 5,16C5,10.97 9.95,10.93 10.83,8.92C10.95,8.54 10.07,7.03 10.07,7.03Z",
+    "name": "tor"
+  },
+  {
+    "path": "M17,11H13V15.5C13,16.44 13.28,17 14.5,17H17V21C17,21 15.54,21.05 14.17,21.05C10.8,21.05 9.5,19 9.5,16.75V11H7V7C10.07,6.74 10.27,4.5 10.5,3H13V7H17",
+    "name": "tumblr"
+  },
+  {
+    "path": "M16,11H13V14.9C13,15.63 13.14,16 14.1,16H16V19C16,19 14.97,19.1 13.9,19.1C11.25,19.1 10,17.5 10,15.7V11H8V8.2C10.41,8 10.62,6.16 10.8,5H13V8H16M20,2H4C2.89,2 2,2.89 2,4V20A2,2 0 0,0 4,22H20A2,2 0 0,0 22,20V4C22,2.89 21.1,2 20,2Z",
+    "name": "tumblr-box"
+  },
+  {
+    "path": "M3.75,17L8,12.75V16H18V11.5L20,9.5V16A2,2 0 0,1 18,18H8V21.25L3.75,17M20.25,7L16,11.25V8H6V12.5L4,14.5V8A2,2 0 0,1 6,6H16V2.75L20.25,7Z",
+    "name": "tumblr-reblog"
+  },
+  {
+    "path": "M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M17.71,9.33C18.19,8.93 18.75,8.45 19,7.92C18.59,8.13 18.1,8.26 17.56,8.33C18.06,7.97 18.47,7.5 18.68,6.86C18.16,7.14 17.63,7.38 16.97,7.5C15.42,5.63 11.71,7.15 12.37,9.95C9.76,9.79 8.17,8.61 6.85,7.16C6.1,8.38 6.75,10.23 7.64,10.74C7.18,10.71 6.83,10.57 6.5,10.41C6.54,11.95 7.39,12.69 8.58,13.09C8.22,13.16 7.82,13.18 7.44,13.12C7.81,14.19 8.58,14.86 9.9,15C9,15.76 7.34,16.29 6,16.08C7.15,16.81 8.46,17.39 10.28,17.31C14.69,17.11 17.64,13.95 17.71,9.33Z",
+    "name": "twitter-box"
+  },
+  {
+    "path": "M17.71,9.33C18.19,8.93 18.75,8.45 19,7.92C18.59,8.13 18.1,8.26 17.56,8.33C18.06,7.97 18.47,7.5 18.68,6.86C18.16,7.14 17.63,7.38 16.97,7.5C15.42,5.63 11.71,7.15 12.37,9.95C9.76,9.79 8.17,8.61 6.85,7.16C6.1,8.38 6.75,10.23 7.64,10.74C7.18,10.71 6.83,10.57 6.5,10.41C6.54,11.95 7.39,12.69 8.58,13.09C8.22,13.16 7.82,13.18 7.44,13.12C7.81,14.19 8.58,14.86 9.9,15C9,15.76 7.34,16.29 6,16.08C7.15,16.81 8.46,17.39 10.28,17.31C14.69,17.11 17.64,13.95 17.71,9.33M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2Z",
+    "name": "twitter-circle"
+  },
+  {
+    "path": "M6.38,13.24V13.24C6.38,11.84 6.38,10.44 6.38,9.04H7.4V15.84H6.39C6.39,15.63 6.39,15.42 6.39,15.21C5.93,15.68 5.29,15.96 4.58,15.96C3.12,15.96 2,14.9 2,13.3V9.04H3V13.24C3,14.33 3.74,15.04 4.7,15.04C5.64,15.04 6.38,14.31 6.38,13.24M9.14,9.04V11.5C9.37,11.29 9.65,11.1 9.95,10.97C10.25,10.85 10.58,10.78 10.91,10.78C12.37,10.78 13.5,11.94 13.5,13.37C13.5,14.8 12.37,15.96 10.91,15.96C10.58,15.96 10.25,15.89 9.95,15.77C9.64,15.64 9.37,15.45 9.13,15.22C9.13,15.43 9.13,15.63 9.13,15.84C8.81,15.84 8.5,15.84 8.16,15.84V9.04H9.14M12.55,13.37V13.37C12.55,12.41 11.77,11.65 10.84,11.65C9.89,11.65 9.13,12.41 9.13,13.37C9.13,14.32 9.88,15.09 10.84,15.09C11.77,15.09 12.55,14.32 12.55,13.37M16.46,10.79C17.9,10.79 18.95,11.89 18.95,13.36V13.69H14.91C15.04,14.5 15.71,15.09 16.55,15.09C17.13,15.09 17.61,14.86 18,14.36L18.7,14.89C18.2,15.55 17.46,15.95 16.55,15.95C15.06,15.95 13.91,14.84 13.91,13.36C13.91,11.97 15,10.79 16.46,10.79M14.92,12.91H17.95C17.79,12.15 17.18,11.65 16.44,11.65C15.71,11.65 15.1,12.15 14.92,12.91M20.5,13V15.84H19.5V10.89C19.82,10.89 20.14,10.89 20.47,10.89V11.5C20.71,11.1 21.11,10.85 21.66,10.85H22V11.76H21.59C20.95,11.76 20.5,12.26 20.5,13",
+    "name": "uber"
+  },
+  {
+    "path": "M19.5,3C20.14,4.08 20.44,5.19 20.44,6.6C20.44,11.08 16.61,16.91 13.5,21H6.41L3.56,4L9.77,3.39L11.28,15.5C12.69,13.21 14.42,9.61 14.42,7.16C14.42,5.81 14.19,4.9 13.83,4.15L19.5,3Z",
+    "name": "venmo"
+  },
+  {
+    "path": "M5,3A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3H5M5.5,8.5H7C7.36,8.5 7.5,8.66 7.64,9.07C8.36,11.17 9.57,13 10.07,13C10.26,13 10.35,12.92 10.35,12.45V10.28C10.29,9.28 9.76,9.19 9.76,8.84C9.76,8.67 9.9,8.5 10.14,8.5H12.45C12.77,8.5 12.87,8.67 12.87,9.04V11.96C12.87,12.27 13,12.38 13.1,12.38C13.29,12.38 13.45,12.27 13.79,11.93C14.85,10.74 15.6,8.92 15.6,8.92C15.7,8.7 15.87,8.5 16.24,8.5H17.71C18.16,8.5 18.26,8.73 18.16,9.04C17.97,9.9 16.18,12.43 16.18,12.43C16,12.68 15.96,12.8 16.18,13.09C16.33,13.3 16.85,13.74 17.19,14.15C17.83,14.86 18.3,15.46 18.44,15.87C18.56,16.29 18.35,16.5 17.93,16.5H16.45C15.89,16.5 15.73,16.05 14.73,15.05C13.85,14.21 13.5,14.1 13.26,14.1C12.96,14.1 12.87,14.18 12.87,14.61V15.93C12.87,16.29 12.76,16.5 11.82,16.5C10.26,16.5 8.54,15.55 7.33,13.8C5.5,11.24 5,9.31 5,8.92C5,8.7 5.08,8.5 5.5,8.5Z",
+    "name": "vk-box"
+  },
+  {
+    "path": "M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M5.5,8.5H7C7.36,8.5 7.5,8.66 7.64,9.07C8.36,11.17 9.57,13 10.07,13C10.26,13 10.35,12.92 10.35,12.45V10.28C10.29,9.28 9.76,9.19 9.76,8.84C9.76,8.67 9.9,8.5 10.14,8.5H12.45C12.77,8.5 12.87,8.67 12.87,9.04V11.96C12.87,12.27 13,12.38 13.1,12.38C13.29,12.38 13.45,12.27 13.79,11.93C14.85,10.74 15.6,8.92 15.6,8.92C15.7,8.7 15.87,8.5 16.24,8.5H17.71C18.16,8.5 18.26,8.73 18.16,9.04C17.97,9.9 16.18,12.43 16.18,12.43C16,12.68 15.96,12.8 16.18,13.09C16.33,13.3 16.85,13.74 17.19,14.15C17.83,14.86 18.3,15.46 18.44,15.87C18.56,16.29 18.35,16.5 17.93,16.5H16.45C15.89,16.5 15.73,16.05 14.73,15.05C13.85,14.21 13.5,14.1 13.26,14.1C12.96,14.1 12.87,14.18 12.87,14.61V15.93C12.87,16.29 12.76,16.5 11.82,16.5C10.26,16.5 8.54,15.55 7.33,13.8C5.5,11.24 5,9.31 5,8.92C5,8.7 5.08,8.5 5.5,8.5Z",
+    "name": "vk-circle"
+  },
+  {
+    "path": "M17,17.5L12,15L7,17.5V5H5V19H19V5H17V17.5M12,12.42L14.25,13.77L13.65,11.22L15.64,9.5L13,9.27L12,6.86L11,9.27L8.36,9.5L10.35,11.22L9.75,13.77L12,12.42M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3Z",
+    "name": "wunderlist"
+  },
+  {
+    "path": "M0 16.7L3.2 12.9L0 9.1L1.5 7.8L4.5 11.3L7.5 7.8L9 9.1L5.8 12.9L9 16.7L7.5 18L4.5 14.4L1.5 18L0 16.7M24 16.9C24 17.4 23.6 17.9 23 17.9H20C18.9 17.9 18 17 18 15.9V13.9C18 12.8 18.9 11.9 20 11.9H22V9.9H18V8H23C23.5 8 24 8.4 24 9M22 14H20V16H22V14M16 16.9C16 17.4 15.6 17.9 15 17.9H12C10.9 17.9 10 17 10 15.9V9.9C10 8.8 10.9 7.9 12 7.9H14V5H16V16.9M14 15.9V9.9H12V15.9H14Z",
+    "name": "xda"
+  },
+  {
+    "path": "M4.8,3C3.8,3 3,3.8 3,4.8V19.2C3,20.2 3.8,21 4.8,21H19.2C20.2,21 21,20.2 21,19.2V4.8C21,3.8 20.2,3 19.2,3M16.07,5H18.11C18.23,5 18.33,5.04 18.37,5.13C18.43,5.22 18.43,5.33 18.37,5.44L13.9,13.36L16.75,18.56C16.81,18.67 16.81,18.78 16.75,18.87C16.7,18.95 16.61,19 16.5,19H14.47C14.16,19 14,18.79 13.91,18.61L11.04,13.35C11.18,13.1 15.53,5.39 15.53,5.39C15.64,5.19 15.77,5 16.07,5M7.09,7.76H9.1C9.41,7.76 9.57,7.96 9.67,8.15L11.06,10.57C10.97,10.71 8.88,14.42 8.88,14.42C8.77,14.61 8.63,14.81 8.32,14.81H6.3C6.18,14.81 6.09,14.76 6.04,14.67C6,14.59 6,14.47 6.04,14.36L8.18,10.57L6.82,8.2C6.77,8.09 6.75,8 6.81,7.89C6.86,7.81 6.96,7.76 7.09,7.76Z",
+    "name": "xing-box"
+  },
+  {
+    "path": "M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M15.85,6H17.74C17.86,6 17.94,6.04 18,6.12C18.04,6.2 18.04,6.3 18,6.41L13.84,13.76L16.5,18.59C16.53,18.69 16.53,18.8 16.5,18.88C16.43,18.96 16.35,19 16.24,19H14.36C14.07,19 13.93,18.81 13.84,18.64L11.17,13.76C11.31,13.5 15.35,6.36 15.35,6.36C15.45,6.18 15.57,6 15.85,6M7.5,8.57H9.39C9.67,8.57 9.81,8.75 9.9,8.92L11.19,11.17C11.12,11.3 9.17,14.75 9.17,14.75C9.07,14.92 8.94,15.11 8.66,15.11H6.78C6.67,15.11 6.59,15.06 6.54,15C6.5,14.9 6.5,14.8 6.54,14.69L8.53,11.17L7.27,9C7.21,8.87 7.2,8.77 7.25,8.69C7.3,8.61 7.39,8.57 7.5,8.57Z",
+    "name": "xing-circle"
+  },
+  {
+    "path": "M10.59,2C11.23,2 11.5,2.27 11.58,2.97L11.79,6.14L12.03,10.29C12.05,10.64 12,11 11.86,11.32C11.64,11.77 11.14,11.89 10.73,11.58C10.5,11.39 10.31,11.14 10.15,10.87L6.42,4.55C6.06,3.94 6.17,3.54 6.77,3.16C7.5,2.68 9.73,2 10.59,2M14.83,14.85L15.09,14.91L18.95,16.31C19.61,16.55 19.79,16.92 19.5,17.57C19.06,18.7 18.34,19.66 17.42,20.45C16.96,20.85 16.5,20.78 16.21,20.28L13.94,16.32C13.55,15.61 14.03,14.8 14.83,14.85M4.5,14C4.5,13.26 4.5,12.55 4.75,11.87C4.97,11.2 5.33,11 6,11.27L9.63,12.81C10.09,13 10.35,13.32 10.33,13.84C10.3,14.36 9.97,14.58 9.53,14.73L5.85,15.94C5.15,16.17 4.79,15.96 4.64,15.25C4.55,14.83 4.47,14.4 4.5,14M11.97,21C11.95,21.81 11.6,22.12 10.81,22C9.77,21.8 8.81,21.4 7.96,20.76C7.54,20.44 7.45,19.95 7.76,19.53L10.47,15.97C10.7,15.67 11.03,15.6 11.39,15.74C11.77,15.88 11.97,16.18 11.97,16.59V21M14.45,13.32C13.73,13.33 13.23,12.5 13.64,11.91C14.47,10.67 15.35,9.46 16.23,8.26C16.5,7.85 16.94,7.82 17.31,8.16C18.24,9 18.91,10 19.29,11.22C19.43,11.67 19.25,12.08 18.83,12.2L15.09,13.17L14.45,13.32Z",
+    "name": "yelp"
+  }
+]

build-scripts/webpack.js

@@ -2,6 +2,7 @@ const webpack = require("webpack");
 const path = require("path");
 const TerserPlugin = require("terser-webpack-plugin");
 const ManifestPlugin = require("webpack-manifest-plugin");
+const WorkerPlugin = require("worker-plugin");
 const paths = require("./paths.js");
 const bundle = require("./bundle");
 
@@ -29,15 +30,12 @@ const createWebpackConfig = ({
     module: {
       rules: [
         {
-          test: /\.m?js$|\.ts$/,
+          test: /\.js$|\.ts$/,
           exclude: bundle.babelExclude(),
           use: {
             loader: "babel-loader",
             options: bundle.babelOptions({ latestBuild }),
           },
-          resolve: {
-            fullySpecified: false,
-          },
         },
         {
           test: /\.css$/,
@@ -48,13 +46,16 @@ const createWebpackConfig = ({
     optimization: {
       minimizer: [
         new TerserPlugin({
+          cache: true,
           parallel: true,
           extractComments: true,
+          sourceMap: true,
           terserOptions: bundle.terserOptions(latestBuild),
         }),
       ],
     },
     plugins: [
+      new WorkerPlugin(),
       new ManifestPlugin({
         // Only include the JS of entrypoints
         filter: (file) => file.isInitial && !file.name.endsWith(".map"),
@@ -98,15 +99,6 @@ const createWebpackConfig = ({
         new RegExp(bundle.emptyPackages({ latestBuild }).join("|")),
         path.resolve(paths.polymer_dir, "src/util/empty.js")
       ),
-      // We need to change the import of the polyfill for EventTarget, so we replace the polyfill file with our customized one
-      new webpack.NormalModuleReplacementPlugin(
-        new RegExp(
-          require.resolve(
-            "lit-virtualizer/lib/uni-virtualizer/lib/polyfillLoaders/EventTarget.js"
-          )
-        ),
-        path.resolve(paths.polymer_dir, "src/resources/EventTarget-ponyfill.js")
-      ),
     ],
     resolve: {
       extensions: [".ts", ".js", ".json"],
@@ -118,22 +110,6 @@ const createWebpackConfig = ({
         }
         return `${chunk.name}.${chunk.hash.substr(0, 8)}.js`;
       },
-      environment: {
-        // The environment supports arrow functions ('() => { ... }').
-        arrowFunction: latestBuild,
-        // The environment supports BigInt as literal (123n).
-        bigIntLiteral: false,
-        // The environment supports const and let for variable declarations.
-        const: latestBuild,
-        // The environment supports destructuring ('{ a, b } = obj').
-        destructuring: latestBuild,
-        // The environment supports an async import() function to import EcmaScript modules.
-        dynamicImport: latestBuild,
-        // The environment supports 'for of' iteration ('for (const x of array) { ... }').
-        forOf: latestBuild,
-        // The environment supports ECMAScript Module syntax to import ECMAScript modules (import ... from '...').
-        module: latestBuild,
-      },
       chunkFilename:
         isProdBuild && !isStatsBuild
           ? "chunk.[chunkhash].js"

cast/src/html/launcher-faq.html.template

@@ -212,8 +212,13 @@
           Chromecast is a technology developed by Google, and is available on:
         </p>
         <ul>
-          <li>Google Chrome (all platforms except iOS)</li>
-          <li>Microsoft Edge (all platforms)</li>
+          <li>Google Chrome (all platforms except on iOS)</li>
+          <li>
+            Microsoft Edge (all platforms,
+            <a href="https://www.microsoftedgeinsider.com" target="_blank"
+              >dev and canary builds only</a
+            >)
+          </li>
         </ul>
       </div>
 

cast/src/launcher/entrypoint.ts

@@ -1,4 +1,3 @@
-import "../../../src/resources/safari-14-attachshadow-patch";
 import "../../../src/resources/ha-style";
 import "../../../src/resources/roboto";
 import "./layout/hc-connect";

cast/src/launcher/layout/hc-layout.ts

@@ -30,7 +30,7 @@ class HcLayout extends LitElement {
       <ha-card>
         <div class="layout">
           <img class="hero" src="/images/google-nest-hub.png" />
-          <h1 class="card-header">
+          <div class="card-header">
             Home Assistant Cast${this.subtitle ? ` – ${this.subtitle}` : ""}
             ${this.auth
               ? html`
@@ -44,7 +44,7 @@ class HcLayout extends LitElement {
                   </div>
                 `
               : ""}
-          </h1>
+          </div>
           <slot></slot>
         </div>
       </ha-card>

cast/src/receiver/entrypoint.ts

@@ -6,60 +6,13 @@ import { castContext } from "./cast_context";
 import { HcMain } from "./layout/hc-main";
 import { ReceivedMessage } from "./types";
 
-const lovelaceController = new HcMain();
-document.body.append(lovelaceController);
-
-const mediaPlayer = document.createElement("cast-media-player");
-mediaPlayer.style.display = "none";
-document.body.append(mediaPlayer);
-const playerStylesAdded = false;
-
-let controls: HTMLElement | null;
-
-const setTouchControlsVisibility = (visible: boolean) => {
-  if (!castContext.getDeviceCapabilities().touch_input_supported) {
-    return;
-  }
-  controls =
-    controls ||
-    (document.body.querySelector("touch-controls") as HTMLElement | null);
-  if (controls) {
-    controls.style.display = visible ? "initial" : "none";
-  }
-};
-
-const showLovelaceController = () => {
-  mediaPlayer.style.display = "none";
-  lovelaceController.style.display = "initial";
-  document.body.setAttribute("style", "overflow-y: auto !important");
-  setTouchControlsVisibility(false);
-};
-
-const showMediaPlayer = () => {
-  lovelaceController.style.display = "none";
-  mediaPlayer.style.display = "initial";
-  document.body.removeAttribute("style");
-  setTouchControlsVisibility(true);
-  if (!playerStylesAdded) {
-    const style = document.createElement("style");
-    style.innerHTML = `
-    body {
-      --logo-image: url('https://www.home-assistant.io/images/home-assistant-logo.svg');
-      --logo-repeat: no-repeat;
-      --playback-logo-image: url('https://www.home-assistant.io/images/home-assistant-logo.svg');
-      --theme-hue: 200;
-      --progress-color: #03a9f4;
-      --splash-image: url('https://home-assistant.io/images/cast/splash.png');
-      --splash-size: cover;
-    }
-    `;
-    document.head.appendChild(style);
-  }
-};
+const controller = new HcMain();
+document.body.append(controller);
 
 const options = new cast.framework.CastReceiverOptions();
 options.disableIdleTimeout = true;
 options.customNamespaces = {
+  // @ts-ignore
   [CAST_NS]: cast.framework.system.MessageType.JSON,
 };
 
@@ -77,61 +30,13 @@ options.uiConfig = new cast.framework.ui.UiConfig();
 // @ts-ignore
 options.uiConfig.touchScreenOptimizedApp = true;
 
-castContext.setInactivityTimeout(86400); // 1 day
-
 castContext.addCustomMessageListener(
   CAST_NS,
   // @ts-ignore
   (ev: ReceivedMessage<HassMessage>) => {
-    // We received a show Lovelace command, stop media from playing, hide media player and show Lovelace controller
-    if (
-      playerManager.getPlayerState() !==
-      cast.framework.messages.PlayerState.IDLE
-    ) {
-      playerManager.stop();
-    } else {
-      showLovelaceController();
-    }
     const msg = ev.data;
     msg.senderId = ev.senderId;
-    lovelaceController.processIncomingMessage(msg);
-  }
-);
-
-const playerManager = castContext.getPlayerManager();
-
-playerManager.setMessageInterceptor(
-  cast.framework.messages.MessageType.LOAD,
-  (loadRequestData) => {
-    // We received a play media command, hide Lovelace and show media player
-    showMediaPlayer();
-    const media = loadRequestData.media;
-    // Special handling if it came from Google Assistant
-    if (media.entity) {
-      media.contentId = media.entity;
-      media.streamType = cast.framework.messages.StreamType.LIVE;
-      media.contentType = "application/vnd.apple.mpegurl";
-      // @ts-ignore
-      media.hlsVideoSegmentFormat =
-        cast.framework.messages.HlsVideoSegmentFormat.FMP4;
-    }
-    return loadRequestData;
-  }
-);
-
-playerManager.addEventListener(
-  cast.framework.events.EventType.MEDIA_STATUS,
-  (event) => {
-    if (
-      event.mediaStatus?.playerState ===
-        cast.framework.messages.PlayerState.IDLE &&
-      event.mediaStatus?.idleReason &&
-      event.mediaStatus?.idleReason !==
-        cast.framework.messages.IdleReason.INTERRUPTED
-    ) {
-      // media finished or stopped, return to default Lovelace
-      showLovelaceController();
-    }
+    controller.processIncomingMessage(msg);
   }
 );
 

cast/src/receiver/layout/hc-lovelace.ts

@@ -9,6 +9,7 @@ import {
 } from "lit-element";
 import { LovelaceConfig } from "../../../../src/data/lovelace";
 import { Lovelace } from "../../../../src/panels/lovelace/types";
+import "../../../../src/panels/lovelace/views/hui-panel-view";
 import "../../../../src/panels/lovelace/views/hui-view";
 import { HomeAssistant } from "../../../../src/types";
 import "./hc-launch-screen";
@@ -21,8 +22,6 @@ class HcLovelace extends LitElement {
 
   @property() public viewPath?: string | number;
 
-  public urlPath?: string | null;
-
   protected render(): TemplateResult {
     const index = this._viewIndex;
     if (index === undefined) {
@@ -36,7 +35,6 @@ class HcLovelace extends LitElement {
     const lovelace: Lovelace = {
       config: this.lovelaceConfig,
       editMode: false,
-      urlPath: this.urlPath!,
       enableFullEditMode: () => undefined,
       mode: "storage",
       language: "en",
@@ -44,13 +42,22 @@ class HcLovelace extends LitElement {
       deleteConfig: async () => undefined,
       setEditMode: () => undefined,
     };
-    return html`
-      <hui-view
-        .hass=${this.hass}
-        .lovelace=${lovelace}
-        .index=${index}
-      ></hui-view>
-    `;
+    return this.lovelaceConfig.views[index].panel
+      ? html`
+          <hui-panel-view
+            .hass=${this.hass}
+            .lovelace=${lovelace}
+            .config=${this.lovelaceConfig.views[index]}
+          ></hui-panel-view>
+        `
+      : html`
+          <hui-view
+            .hass=${this.hass}
+            .lovelace=${lovelace}
+            .index=${index}
+            columns="2"
+          ></hui-view>
+        `;
   }
 
   protected updated(changedProps) {
@@ -66,7 +73,7 @@ class HcLovelace extends LitElement {
 
         if (configBackground) {
           (this.shadowRoot!.querySelector(
-            "hui-view"
+            "hui-view, hui-panel-view"
           ) as HTMLElement)!.style.setProperty(
             "--lovelace-background",
             configBackground

cast/src/receiver/layout/hc-main.ts

@@ -87,7 +87,6 @@ export class HcMain extends HassElement {
         .hass=${this.hass}
         .lovelaceConfig=${this._lovelaceConfig}
         .viewPath=${this._lovelacePath}
-        .urlPath=${this._urlPath}
         @config-refresh=${this._generateLovelaceConfig}
       ></hc-lovelace>
     `;
@@ -216,7 +215,9 @@ export class HcMain extends HassElement {
     }
     this._showDemo = false;
     this._lovelacePath = msg.viewPath;
-
+    if (castContext.getDeviceCapabilities().touch_input_supported) {
+      this._breakFree();
+    }
     this._sendStatus();
   }
 
@@ -239,6 +240,9 @@ export class HcMain extends HassElement {
       this._showDemo = true;
       this._lovelacePath = "overview";
       this._sendStatus();
+      if (castContext.getDeviceCapabilities().touch_input_supported) {
+        this._breakFree();
+      }
     });
   }
 
@@ -259,6 +263,14 @@ export class HcMain extends HassElement {
     }
   }
 
+  private _breakFree() {
+    const controls = document.body.querySelector("touch-controls");
+    if (controls) {
+      controls.remove();
+    }
+    document.body.setAttribute("style", "overflow-y: auto !important");
+  }
+
   private sendMessage(senderId: string, response: any) {
     castContext.sendCustomMessage(CAST_NS, senderId, response);
   }

demo/src/configs/teachingbirds/lovelace.ts

@@ -7,183 +7,205 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
       cards: [
         { type: "custom:ha-demo-card" },
         {
-          type: "grid",
-          columns: 4,
           cards: [
             {
-              image: "/assets/teachingbirds/isa_square.jpg",
-              type: "picture-entity",
-              show_name: false,
-              tap_action: {
-                action: "more-info",
-              },
-              entity: "sensor.presence_isa",
-            },
-            {
-              image: "/assets/teachingbirds/Stefan_square.jpg",
-              type: "picture-entity",
-              show_name: false,
-              tap_action: {
-                action: "more-info",
-              },
-              entity: "sensor.presence_stefan",
-            },
-            {
-              image: "/assets/teachingbirds/background_square.png",
-              elements: [
+              cards: [
                 {
-                  state_image: {
-                    on: "/assets/teachingbirds/radiator_on.jpg",
-                    off: "/assets/teachingbirds/radiator_off.jpg",
-                  },
-                  type: "image",
-                  style: {
-                    width: "100%",
-                    top: "50%",
-                    left: "50%",
-                  },
+                  image: "/assets/teachingbirds/isa_square.jpg",
+                  type: "picture-entity",
+                  show_name: false,
                   tap_action: {
                     action: "more-info",
                   },
-                  entity: "switch.stefan_radiator_3",
+                  entity: "sensor.presence_isa",
                 },
                 {
-                  style: {
-                    top: "90%",
-                    left: "50%",
+                  image: "/assets/teachingbirds/Stefan_square.jpg",
+                  type: "picture-entity",
+                  show_name: false,
+                  tap_action: {
+                    action: "more-info",
                   },
-                  type: "state-label",
+                  entity: "sensor.presence_stefan",
+                },
+                {
+                  image: "/assets/teachingbirds/background_square.png",
+                  elements: [
+                    {
+                      state_image: {
+                        on: "/assets/teachingbirds/radiator_on.jpg",
+                        off: "/assets/teachingbirds/radiator_off.jpg",
+                      },
+                      type: "image",
+                      style: {
+                        width: "100%",
+                        top: "50%",
+                        left: "50%",
+                      },
+                      tap_action: {
+                        action: "more-info",
+                      },
+                      entity: "switch.stefan_radiator_3",
+                    },
+                    {
+                      style: {
+                        top: "90%",
+                        left: "50%",
+                      },
+                      type: "state-label",
+                      entity: "sensor.temperature_stefan",
+                    },
+                  ],
+                  type: "picture-elements",
+                },
+                {
+                  image: "/assets/teachingbirds/background_square.png",
+                  elements: [
+                    {
+                      style: {
+                        "--mdc-icon-size": "100%",
+                        top: "50%",
+                        left: "50%",
+                      },
+                      type: "icon",
+                      tap_action: {
+                        action: "navigate",
+                        navigation_path: "/lovelace/home_info",
+                      },
+                      icon: "mdi:car",
+                    },
+                  ],
+                  type: "picture-elements",
+                },
+              ],
+              type: "horizontal-stack",
+            },
+            {
+              cards: [
+                {
+                  show_name: false,
+                  type: "picture-entity",
+                  name: "Alarm",
+                  image: "/assets/teachingbirds/House_square.jpg",
+                  entity: "alarm_control_panel.house",
+                },
+                {
+                  name: "Roomba",
+                  image: "/assets/teachingbirds/roomba_square.jpg",
+                  show_name: false,
+                  type: "picture-entity",
+                  state_image: {
+                    "Not Today": "/assets/teachingbirds/roomba_bw_square.jpg",
+                  },
+                  entity: "input_select.roomba_mode",
+                },
+                {
+                  show_name: false,
+                  type: "picture-entity",
+                  state_image: {
+                    Mail: "/assets/teachingbirds/mailbox_square.jpg",
+                    "Package and mail":
+                      "/assets/teachingbirds/mailbox_square.jpg",
+                    Empty: "/assets/teachingbirds/mailbox_bw_square.jpg",
+                    Package: "/assets/teachingbirds/mailbox_square.jpg",
+                  },
+                  entity: "sensor.mailbox",
+                },
+                {
+                  show_name: false,
+                  state_image: {
+                    "Put out": "/assets/teachingbirds/trash_square.jpg",
+                    "Take in": "/assets/teachingbirds/trash_square.jpg",
+                  },
+                  type: "picture-entity",
+                  image: "/assets/teachingbirds/trash_bear_bw_square.jpg",
+                  entity: "sensor.trash_status",
+                },
+              ],
+              type: "horizontal-stack",
+            },
+            {
+              cards: [
+                {
+                  state_image: {
+                    Idle: "/assets/teachingbirds/washer_square.jpg",
+                    Running: "/assets/teachingbirds/laundry_running_square.jpg",
+                    Clean: "/assets/teachingbirds/laundry_clean_2_square.jpg",
+                  },
+                  entity: "input_select.washing_machine_status",
+                  type: "picture-entity",
+                  show_name: false,
+                  name: "Washer",
+                },
+                {
+                  state_image: {
+                    Idle: "/assets/teachingbirds/dryer_square.jpg",
+                    Running: "/assets/teachingbirds/clothes_drying_square.jpg",
+                    Clean: "/assets/teachingbirds/folded_clothes_square.jpg",
+                  },
+                  entity: "input_select.dryer_status",
+                  type: "picture-entity",
+                  show_name: false,
+                  name: "Dryer",
+                },
+                {
+                  image: "/assets/teachingbirds/guests_square.jpg",
+                  type: "picture-entity",
+                  show_name: false,
+                  tap_action: {
+                    action: "toggle",
+                  },
+                  entity: "input_boolean.guest_mode",
+                },
+                {
+                  image: "/assets/teachingbirds/cleaning_square.jpg",
+                  type: "picture-entity",
+                  show_name: false,
+                  tap_action: {
+                    action: "toggle",
+                  },
+                  entity: "input_boolean.cleaning_day",
+                },
+              ],
+              type: "horizontal-stack",
+            },
+          ],
+          type: "vertical-stack",
+        },
+        {
+          type: "vertical-stack",
+          cards: [
+            {
+              cards: [
+                {
+                  graph: "line",
+                  type: "sensor",
+                  entity: "sensor.temperature_bedroom",
+                },
+                {
+                  graph: "line",
+                  type: "sensor",
+                  name: "S's room",
                   entity: "sensor.temperature_stefan",
                 },
               ],
-              type: "picture-elements",
+              type: "horizontal-stack",
             },
             {
-              image: "/assets/teachingbirds/background_square.png",
-              elements: [
+              cards: [
                 {
-                  style: {
-                    "--mdc-icon-size": "100%",
-                    top: "50%",
-                    left: "50%",
-                  },
-                  type: "icon",
-                  tap_action: {
-                    action: "navigate",
-                    navigation_path: "/lovelace/home_info",
-                  },
-                  icon: "mdi:car",
+                  graph: "line",
+                  type: "sensor",
+                  entity: "sensor.temperature_passage",
+                },
+                {
+                  graph: "line",
+                  type: "sensor",
+                  name: "Laundry",
+                  entity: "sensor.temperature_downstairs_bathroom",
                 },
               ],
-              type: "picture-elements",
-            },
-
-            {
-              show_name: false,
-              type: "picture-entity",
-              name: "Alarm",
-              image: "/assets/teachingbirds/House_square.jpg",
-              entity: "alarm_control_panel.house",
-            },
-            {
-              name: "Roomba",
-              image: "/assets/teachingbirds/roomba_square.jpg",
-              show_name: false,
-              type: "picture-entity",
-              state_image: {
-                "Not Today": "/assets/teachingbirds/roomba_bw_square.jpg",
-              },
-              entity: "input_select.roomba_mode",
-            },
-            {
-              show_name: false,
-              type: "picture-entity",
-              state_image: {
-                Mail: "/assets/teachingbirds/mailbox_square.jpg",
-                "Package and mail": "/assets/teachingbirds/mailbox_square.jpg",
-                Empty: "/assets/teachingbirds/mailbox_bw_square.jpg",
-                Package: "/assets/teachingbirds/mailbox_square.jpg",
-              },
-              entity: "sensor.mailbox",
-            },
-            {
-              show_name: false,
-              state_image: {
-                "Put out": "/assets/teachingbirds/trash_square.jpg",
-                "Take in": "/assets/teachingbirds/trash_square.jpg",
-              },
-              type: "picture-entity",
-              image: "/assets/teachingbirds/trash_bear_bw_square.jpg",
-              entity: "sensor.trash_status",
-            },
-
-            {
-              state_image: {
-                Idle: "/assets/teachingbirds/washer_square.jpg",
-                Running: "/assets/teachingbirds/laundry_running_square.jpg",
-                Clean: "/assets/teachingbirds/laundry_clean_2_square.jpg",
-              },
-              entity: "input_select.washing_machine_status",
-              type: "picture-entity",
-              show_name: false,
-              name: "Washer",
-            },
-            {
-              state_image: {
-                Idle: "/assets/teachingbirds/dryer_square.jpg",
-                Running: "/assets/teachingbirds/clothes_drying_square.jpg",
-                Clean: "/assets/teachingbirds/folded_clothes_square.jpg",
-              },
-              entity: "input_select.dryer_status",
-              type: "picture-entity",
-              show_name: false,
-              name: "Dryer",
-            },
-            {
-              image: "/assets/teachingbirds/guests_square.jpg",
-              type: "picture-entity",
-              show_name: false,
-              tap_action: {
-                action: "toggle",
-              },
-              entity: "input_boolean.guest_mode",
-            },
-            {
-              image: "/assets/teachingbirds/cleaning_square.jpg",
-              type: "picture-entity",
-              show_name: false,
-              tap_action: {
-                action: "toggle",
-              },
-              entity: "input_boolean.cleaning_day",
-            },
-          ],
-        },
-        {
-          type: "grid",
-          columns: 2,
-          cards: [
-            {
-              graph: "line",
-              type: "sensor",
-              entity: "sensor.temperature_bedroom",
-            },
-            {
-              graph: "line",
-              type: "sensor",
-              name: "S's room",
-              entity: "sensor.temperature_stefan",
-            },
-            {
-              graph: "line",
-              type: "sensor",
-              entity: "sensor.temperature_passage",
-            },
-            {
-              graph: "line",
-              type: "sensor",
-              name: "Laundry",
-              entity: "sensor.temperature_downstairs_bathroom",
+              type: "horizontal-stack",
             },
           ],
         },

demo/src/entrypoint.ts

@@ -1,4 +1,3 @@
-import "../../src/resources/safari-14-attachshadow-patch";
 import "@polymer/polymer/lib/elements/dom-if";
 import "@polymer/polymer/lib/elements/dom-repeat";
 import "../../src/resources/ha-style";

demo/src/stubs/template.ts

@@ -6,11 +6,4 @@ export const mockTemplate = (hass: MockHomeAssistant) => {
       body: { message: "Template dev tool does not work in the demo." },
     })
   );
-  hass.mockWS("render_template", (msg, onChange) => {
-    onChange!({
-      result: msg.template,
-      listeners: { all: false, domains: [], entities: [], time: false },
-    });
-    return () => {};
-  });
 };

gallery/src/components/demo-cards.js

@@ -5,16 +5,11 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
 import "../../../src/components/ha-switch";
 import "../../../src/components/ha-formfield";
 import "./demo-card";
-import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
 
 class DemoCards extends PolymerElement {
   static get template() {
     return html`
       <style>
-        #container {
-          min-height: calc(100vh - 128px);
-          background: var(--primary-background-color);
-        }
         .cards {
           display: flex;
           flex-wrap: wrap;
@@ -29,9 +24,6 @@ class DemoCards extends PolymerElement {
         .filters {
           margin-left: 60px;
         }
-        ha-formfield {
-          margin-right: 16px;
-        }
       </style>
       <app-toolbar>
         <div class="filters">
@@ -39,21 +31,16 @@ class DemoCards extends PolymerElement {
             <ha-switch checked="[[_showConfig]]" on-change="_showConfigToggled">
             </ha-switch>
           </ha-formfield>
-          <ha-formfield label="Dark theme">
-            <ha-switch on-change="_darkThemeToggled"> </ha-switch>
-          </ha-formfield>
         </div>
       </app-toolbar>
-      <div id="container">
-        <div class="cards">
-          <template is="dom-repeat" items="[[configs]]">
-            <demo-card
-              config="[[item]]"
-              show-config="[[_showConfig]]"
-              hass="[[hass]]"
-            ></demo-card>
-          </template>
-        </div>
+      <div class="cards">
+        <template is="dom-repeat" items="[[configs]]">
+          <demo-card
+            config="[[item]]"
+            show-config="[[_showConfig]]"
+            hass="[[hass]]"
+          ></demo-card>
+        </template>
       </div>
     `;
   }
@@ -72,12 +59,6 @@ class DemoCards extends PolymerElement {
   _showConfigToggled(ev) {
     this._showConfig = ev.target.checked;
   }
-
-  _darkThemeToggled(ev) {
-    applyThemesOnElement(this.$.container, { themes: {} }, "default", {
-      dark: ev.target.checked,
-    });
-  }
 }
 
 customElements.define("demo-cards", DemoCards);

gallery/src/components/demo-more-info.js

@@ -2,8 +2,8 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import "../../../src/components/ha-card";
-import "../../../src/state-summary/state-card-content";
 import "../../../src/dialogs/more-info/more-info-content";
+import "../../../src/state-summary/state-card-content";
 
 class DemoMoreInfo extends PolymerElement {
   static get template() {
@@ -16,12 +16,15 @@ class DemoMoreInfo extends PolymerElement {
 
         ha-card {
           width: 333px;
-          padding: 20px 24px;
         }
 
         state-card-content {
           display: block;
-          margin-bottom: 16px;
+          padding: 16px;
+        }
+
+        more-info-content {
+          padding: 0 16px;
         }
 
         pre {

gallery/src/demos/demo-hui-alarm-panel-card.ts

@@ -15,10 +15,6 @@ const ENTITIES = [
   getEntity("alarm_control_panel", "unavailable", "unavailable", {
     friendly_name: "Alarm",
   }),
-  getEntity("alarm_control_panel", "alarm_code", "disarmed", {
-    friendly_name: "Alarm",
-    code_format: "number",
-  }),
 ];
 
 const CONFIGS = [
@@ -34,14 +30,7 @@ const CONFIGS = [
     config: `
 - type: alarm-panel
   entity: alarm_control_panel.alarm_armed
-  name: My Alarm
-    `,
-  },
-  {
-    heading: "Code Example",
-    config: `
-- type: alarm-panel
-  entity: alarm_control_panel.alarm_code
+  title: My Alarm
     `,
   },
   {
@@ -94,12 +83,8 @@ class DemoAlarmPanelEntity extends PolymerElement {
 
   public ready() {
     super.ready();
-    this._setupDemo();
-  }
-
-  private async _setupDemo() {
     const hass = provideHass(this.$.demos);
-    await hass.updateTranslations(null, "en");
+    hass.updateTranslations(null, "en");
     hass.addEntities(ENTITIES);
   }
 }

gallery/src/demos/demo-hui-entity-button-card.ts

@@ -98,4 +98,4 @@ class DemoButtonEntity extends PolymerElement {
   }
 }
 
-customElements.define("demo-hui-entity-button-card", DemoButtonEntity);
+customElements.define("demo-hui-button-card", DemoButtonEntity);

gallery/src/demos/demo-hui-gauge-card.ts

@@ -8,7 +8,6 @@ import "../components/demo-cards";
 const ENTITIES = [
   getEntity("sensor", "brightness", "12", {}),
   getEntity("plant", "bonsai", "ok", {}),
-  getEntity("sensor", "not_working", "unavailable", {}),
   getEntity("sensor", "outside_humidity", "54", {
     unit_of_measurement: "%",
   }),
@@ -75,13 +74,6 @@ const CONFIGS = [
   entity: plant.bonsai
     `,
   },
-  {
-    heading: "Unavailable entity",
-    config: `
-- type: gauge
-  entity: sensor.not_working
-    `,
-  },
 ];
 
 class DemoGaugeEntity extends PolymerElement {

gallery/src/demos/demo-hui-markdown-card.ts

@@ -1,8 +1,6 @@
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
-import { mockTemplate } from "../../../demo/src/stubs/template";
-import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
 
 const CONFIGS = [
@@ -256,7 +254,7 @@ const CONFIGS = [
 
 class DemoMarkdown extends PolymerElement {
   static get template() {
-    return html` <demo-cards id="demos" configs="[[_configs]]"></demo-cards> `;
+    return html` <demo-cards configs="[[_configs]]"></demo-cards> `;
   }
 
   static get properties() {
@@ -267,12 +265,6 @@ class DemoMarkdown extends PolymerElement {
       },
     };
   }
-
-  public ready() {
-    super.ready();
-    const hass = provideHass(this.$.demos);
-    mockTemplate(hass);
-  }
 }
 
 customElements.define("demo-hui-markdown-card", DemoMarkdown);

gallery/src/demos/demo-hui-stack-card.ts

@@ -1,7 +1,6 @@
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
-import { mockHistory } from "../../../demo/src/stubs/history";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -37,10 +36,6 @@ const ENTITIES = [
     battery: 71,
     friendly_name: "Home Boy",
   }),
-  getEntity("sensor", "illumination", "23", {
-    friendly_name: "Illumination",
-    unit_of_measurement: "lx",
-  }),
 ];
 
 const CONFIGS = [
@@ -94,42 +89,6 @@ const CONFIGS = [
       entity: light.bed_light
     `,
   },
-  {
-    heading: "Default Grid",
-    config: `
-- type: grid
-  cards:
-    - type: entity
-      entity: light.kitchen_lights
-    - type: entity
-      entity: light.bed_light
-    - type: entity
-      entity: device_tracker.demo_paulus
-    - type: sensor
-      entity: sensor.illumination
-      graph: line
-    - type: entity
-      entity: device_tracker.demo_anne_therese
-    `,
-  },
-  {
-    heading: "Non-square Grid with 2 columns",
-    config: `
-- type: grid
-  columns: 2
-  square: false
-  cards:
-    - type: entity
-      entity: light.kitchen_lights
-    - type: entity
-      entity: light.bed_light
-    - type: entity
-      entity: device_tracker.demo_paulus
-    - type: sensor
-      entity: sensor.illumination
-      graph: line
-    `,
-  },
 ];
 
 class DemoStack extends PolymerElement {
@@ -151,7 +110,6 @@ class DemoStack extends PolymerElement {
     const hass = provideHass(this.$.demos);
     hass.updateTranslations(null, "en");
     hass.addEntities(ENTITIES);
-    mockHistory(hass);
   }
 }
 

gallery/src/demos/demo-more-info-light.ts

@@ -3,10 +3,10 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import "../../../src/components/ha-card";
 import { SUPPORT_BRIGHTNESS } from "../../../src/data/light";
+import "../../../src/dialogs/more-info/more-info-content";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-more-infos";
-import "../../../src/dialogs/more-info/more-info-content";
 
 const ENTITIES = [
   getEntity("light", "bed_light", "on", {
@@ -40,12 +40,8 @@ class DemoMoreInfoLight extends PolymerElement {
 
   public ready() {
     super.ready();
-    this._setupDemo();
-  }
-
-  private async _setupDemo() {
     const hass = provideHass(this);
-    await hass.updateTranslations(null, "en");
+    hass.updateTranslations(null, "en");
     hass.addEntities(ENTITIES);
   }
 }

gallery/src/ha-gallery.js

@@ -1,17 +1,16 @@
 import "@polymer/app-layout/app-header-layout/app-header-layout";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
+import "../../src/components/ha-icon-button";
+import "../../src/components/ha-icon";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import "../../src/components/ha-card";
-import "../../src/components/ha-icon";
-import "../../src/components/ha-icon-button";
 import "../../src/managers/notification-manager";
 import "../../src/styles/polymer-ha-style";
-// eslint-disable-next-line import/extensions
 import { DEMOS } from "../build/import-demos";
 
 const fixPath = (path) => path.substr(2, path.length - 5);

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

@@ -23,9 +23,9 @@ import { hassioStyle } from "../resources/hassio-style";
 class HassioAddonRepositoryEl extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ attribute: false }) public repo!: HassioAddonRepository;
+  @property() public repo!: HassioAddonRepository;
 
-  @property({ attribute: false }) public addons!: HassioAddonInfo[];
+  @property() public addons!: HassioAddonInfo[];
 
   @property() public filter!: string;
 
@@ -78,18 +78,18 @@ class HassioAddonRepositoryEl extends LitElement {
                     .title=${addon.name}
                     .description=${addon.description}
                     .available=${addon.available}
-                    .icon=${addon.installed && addon.update_available
+                    .icon=${addon.installed && addon.installed !== addon.version
                       ? mdiArrowUpBoldCircle
                       : mdiPuzzle}
                     .iconTitle=${addon.installed
-                      ? addon.update_available
+                      ? addon.installed !== addon.version
                         ? "New version available"
                         : "Add-on is installed"
                       : addon.available
                       ? "Add-on is not installed"
                       : "Add-on is not available on your system"}
                     .iconClass=${addon.installed
-                      ? addon.update_available
+                      ? addon.installed !== addon.version
                         ? "update"
                         : "installed"
                       : !addon.available
@@ -104,7 +104,7 @@ class HassioAddonRepositoryEl extends LitElement {
                       : undefined}
                     .showTopbar=${addon.installed || !addon.available}
                     .topbarClass=${addon.installed
-                      ? addon.update_available
+                      ? addon.installed !== addon.version
                         ? "update"
                         : "installed"
                       : !addon.available

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

@@ -1,17 +1,15 @@
 import "@material/mwc-icon-button/mwc-icon-button";
-import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
 import "@material/mwc-list/mwc-list-item";
 import { mdiDotsVertical } from "@mdi/js";
 import {
   css,
   CSSResult,
-  internalProperty,
   LitElement,
   property,
+  internalProperty,
   PropertyValues,
 } from "lit-element";
 import { html, TemplateResult } from "lit-html";
-import { atLeastVersion } from "../../../src/common/config/version";
 import "../../../src/common/search/search-input";
 import "../../../src/components/ha-button-menu";
 import "../../../src/components/ha-svg-icon";
@@ -21,14 +19,13 @@ import {
   HassioAddonRepository,
   reloadHassioAddons,
 } from "../../../src/data/hassio/addon";
-import { extractApiErrorMessage } from "../../../src/data/hassio/common";
-import "../../../src/layouts/hass-loading-screen";
 import "../../../src/layouts/hass-tabs-subpage";
+import "../../../src/layouts/hass-loading-screen";
 import { HomeAssistant, Route } from "../../../src/types";
-import { showRegistriesDialog } from "../dialogs/registries/show-dialog-registries";
 import { showRepositoriesDialog } from "../dialogs/repositories/show-dialog-repositories";
 import { supervisorTabs } from "../hassio-tabs";
 import "./hassio-addon-repository";
+import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
 
 const sortRepos = (a: HassioAddonRepository, b: HassioAddonRepository) => {
   if (a.slug === "local") {
@@ -100,14 +97,14 @@ class HassioAddonStore extends LitElement {
         main-page
         .tabs=${supervisorTabs}
       >
-        <span slot="header">Add-on Store</span>
+        <span slot="header">Add-on store</span>
         <ha-button-menu
           corner="BOTTOM_START"
           slot="toolbar-icon"
           @action=${this._handleAction}
         >
           <mwc-icon-button slot="trigger" alt="menu">
-            <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
+            <ha-svg-icon path=${mdiDotsVertical}></ha-svg-icon>
           </mwc-icon-button>
           <mwc-list-item>
             Repositories
@@ -115,12 +112,6 @@ class HassioAddonStore extends LitElement {
           <mwc-list-item>
             Reload
           </mwc-list-item>
-          ${this.hass.userData?.showAdvanced &&
-          atLeastVersion(this.hass.config.version, 0, 117)
-            ? html`<mwc-list-item>
-                Registries
-              </mwc-list-item>`
-            : ""}
         </ha-button-menu>
         ${repos.length === 0
           ? html`<hass-loading-screen no-toolbar></hass-loading-screen>`
@@ -165,9 +156,6 @@ class HassioAddonStore extends LitElement {
       case 1:
         this.refreshData();
         break;
-      case 2:
-        this._manageRegistries();
-        break;
     }
   }
 
@@ -184,10 +172,6 @@ class HassioAddonStore extends LitElement {
     });
   }
 
-  private async _manageRegistries() {
-    showRegistriesDialog(this);
-  }
-
   private async _loadData() {
     try {
       const addonsInfo = await fetchHassioAddonsInfo(this.hass);
@@ -195,7 +179,7 @@ class HassioAddonStore extends LitElement {
       this._repos.sort(sortRepos);
       this._addons = addonsInfo.addons;
     } catch (err) {
-      alert(extractApiErrorMessage(err));
+      alert("Failed to fetch add-on info");
     }
   }
 

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

@@ -28,7 +28,6 @@ import { haStyle } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
 import { suggestAddonRestart } from "../../dialogs/suggestAddonRestart";
 import { hassioStyle } from "../../resources/hassio-style";
-import "../../../../src/components/buttons/ha-progress-button";
 
 @customElement("hassio-addon-audio")
 class HassioAddonAudio extends LitElement {
@@ -92,9 +91,7 @@ class HassioAddonAudio extends LitElement {
           </paper-dropdown-menu>
         </div>
         <div class="card-actions">
-          <ha-progress-button @click=${this._saveSettings}>
-            Save
-          </ha-progress-button>
+          <mwc-button @click=${this._saveSettings}>Save</mwc-button>
         </div>
       </ha-card>
     `;
@@ -175,10 +172,7 @@ class HassioAddonAudio extends LitElement {
     }
   }
 
-  private async _saveSettings(ev: CustomEvent): Promise<void> {
-    const button = ev.currentTarget as any;
-    button.progress = true;
-
+  private async _saveSettings(): Promise<void> {
     this._error = undefined;
     const data: HassioAddonSetOptionParams = {
       audio_input:
@@ -188,14 +182,12 @@ class HassioAddonAudio extends LitElement {
     };
     try {
       await setHassioAddonOption(this.hass, this.addon.slug, data);
-      if (this.addon?.state === "started") {
-        await suggestAddonRestart(this, this.hass, this.addon);
-      }
     } catch {
       this._error = "Failed to set addon audio device";
     }
-
-    button.progress = false;
+    if (!this._error && this.addon?.state === "started") {
+      await suggestAddonRestart(this, this.hass, this.addon);
+    }
   }
 }
 

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

@@ -5,15 +5,14 @@ import {
   CSSResult,
   customElement,
   html,
-  internalProperty,
   LitElement,
   property,
+  internalProperty,
   PropertyValues,
   query,
   TemplateResult,
 } from "lit-element";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
-import "../../../../src/components/buttons/ha-progress-button";
 import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-yaml-editor";
 import type { HaYamlEditor } from "../../../../src/components/ha-yaml-editor";
@@ -22,7 +21,6 @@ import {
   HassioAddonSetOptionParams,
   setHassioAddonOption,
 } from "../../../../src/data/hassio/addon";
-import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
 import { showConfirmationDialog } from "../../../../src/dialogs/generic/show-dialog-box";
 import { haStyle } from "../../../../src/resources/styles";
 import type { HomeAssistant } from "../../../../src/types";
@@ -39,11 +37,13 @@ class HassioAddonConfig extends LitElement {
 
   @property({ type: Boolean }) private _configHasChanged = false;
 
-  @property({ type: Boolean }) private _valid = true;
-
-  @query("ha-yaml-editor", true) private _editor!: HaYamlEditor;
+  @query("ha-yaml-editor") private _editor!: HaYamlEditor;
 
   protected render(): TemplateResult {
+    const editor = this._editor;
+    // If editor not rendered, don't show the error.
+    const valid = editor ? editor.isValid : true;
+
     return html`
       <h1>${this.addon.name}</h1>
       <ha-card header="Configuration">
@@ -52,106 +52,23 @@ class HassioAddonConfig extends LitElement {
             @value-changed=${this._configChanged}
           ></ha-yaml-editor>
           ${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
-          ${this._valid ? "" : html` <div class="errors">Invalid YAML</div> `}
+          ${valid ? "" : html` <div class="errors">Invalid YAML</div> `}
         </div>
         <div class="card-actions">
-          <ha-progress-button class="warning" @click=${this._resetTapped}>
+          <mwc-button class="warning" @click=${this._resetTapped}>
             Reset to defaults
-          </ha-progress-button>
-          <ha-progress-button
+          </mwc-button>
+          <mwc-button
             @click=${this._saveTapped}
-            .disabled=${!this._configHasChanged || !this._valid}
+            .disabled=${!this._configHasChanged || !valid}
           >
             Save
-          </ha-progress-button>
+          </mwc-button>
         </div>
       </ha-card>
     `;
   }
 
-  protected updated(changedProperties: PropertyValues): void {
-    super.updated(changedProperties);
-    if (changedProperties.has("addon")) {
-      this._editor.setValue(this.addon.options);
-    }
-  }
-
-  private _configChanged(ev): void {
-    this._configHasChanged = true;
-    this._valid = ev.detail.isValid;
-  }
-
-  private async _resetTapped(ev: CustomEvent): Promise<void> {
-    const button = ev.currentTarget as any;
-    button.progress = true;
-
-    const confirmed = await showConfirmationDialog(this, {
-      title: this.addon.name,
-      text: "Are you sure you want to reset all your options?",
-      confirmText: "reset options",
-      dismissText: "no",
-    });
-
-    if (!confirmed) {
-      button.progress = false;
-      return;
-    }
-
-    this._error = undefined;
-    const data: HassioAddonSetOptionParams = {
-      options: null,
-    };
-    try {
-      await setHassioAddonOption(this.hass, this.addon.slug, data);
-      this._configHasChanged = false;
-      const eventdata = {
-        success: true,
-        response: undefined,
-        path: "options",
-      };
-      fireEvent(this, "hass-api-called", eventdata);
-    } catch (err) {
-      this._error = `Failed to reset addon configuration, ${extractApiErrorMessage(
-        err
-      )}`;
-    }
-    button.progress = false;
-  }
-
-  private async _saveTapped(ev: CustomEvent): Promise<void> {
-    const button = ev.currentTarget as any;
-    button.progress = true;
-
-    let data: HassioAddonSetOptionParams;
-    this._error = undefined;
-    try {
-      data = {
-        options: this._editor.value,
-      };
-    } catch (err) {
-      this._error = err;
-      return;
-    }
-    try {
-      await setHassioAddonOption(this.hass, this.addon.slug, data);
-      this._configHasChanged = false;
-      const eventdata = {
-        success: true,
-        response: undefined,
-        path: "options",
-      };
-      fireEvent(this, "hass-api-called", eventdata);
-      if (this.addon?.state === "started") {
-        await suggestAddonRestart(this, this.hass, this.addon);
-      }
-    } catch (err) {
-      this._error = `Failed to save addon configuration, ${extractApiErrorMessage(
-        err
-      )}`;
-    }
-    button.progress = false;
-  }
-
   static get styles(): CSSResult[] {
     return [
       haStyle,
@@ -173,7 +90,7 @@ class HassioAddonConfig extends LitElement {
         }
         iron-autogrow-textarea {
           width: 100%;
-          font-family: var(--code-font-family, monospace);
+          font-family: monospace;
         }
         .syntaxerror {
           color: var(--error-color);
@@ -181,6 +98,80 @@ class HassioAddonConfig extends LitElement {
       `,
     ];
   }
+
+  protected updated(changedProperties: PropertyValues): void {
+    super.updated(changedProperties);
+    if (changedProperties.has("addon")) {
+      this._editor.setValue(this.addon.options);
+    }
+  }
+
+  private _configChanged(): void {
+    this._configHasChanged = true;
+    this.requestUpdate();
+  }
+
+  private async _resetTapped(): Promise<void> {
+    const confirmed = await showConfirmationDialog(this, {
+      title: this.addon.name,
+      text: "Are you sure you want to reset all your options?",
+      confirmText: "reset options",
+      dismissText: "no",
+    });
+
+    if (!confirmed) {
+      return;
+    }
+
+    this._error = undefined;
+    const data: HassioAddonSetOptionParams = {
+      options: null,
+    };
+    try {
+      await setHassioAddonOption(this.hass, this.addon.slug, data);
+      this._configHasChanged = false;
+      const eventdata = {
+        success: true,
+        response: undefined,
+        path: "options",
+      };
+      fireEvent(this, "hass-api-called", eventdata);
+    } catch (err) {
+      this._error = `Failed to reset addon configuration, ${
+        err.body?.message || err
+      }`;
+    }
+  }
+
+  private async _saveTapped(): Promise<void> {
+    let data: HassioAddonSetOptionParams;
+    this._error = undefined;
+    try {
+      data = {
+        options: this._editor.value,
+      };
+    } catch (err) {
+      this._error = err;
+      return;
+    }
+    try {
+      await setHassioAddonOption(this.hass, this.addon.slug, data);
+      this._configHasChanged = false;
+      const eventdata = {
+        success: true,
+        response: undefined,
+        path: "options",
+      };
+      fireEvent(this, "hass-api-called", eventdata);
+    } catch (err) {
+      this._error = `Failed to save addon configuration, ${
+        err.body?.message || err
+      }`;
+    }
+    if (!this._error && this.addon?.state === "started") {
+      await suggestAddonRestart(this, this.hass, this.addon);
+    }
+  }
 }
 
 declare global {

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

@@ -4,21 +4,19 @@ import {
   CSSResult,
   customElement,
   html,
-  internalProperty,
   LitElement,
   property,
+  internalProperty,
   PropertyValues,
   TemplateResult,
 } from "lit-element";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
-import "../../../../src/components/buttons/ha-progress-button";
 import "../../../../src/components/ha-card";
 import {
   HassioAddonDetails,
   HassioAddonSetOptionParams,
   setHassioAddonOption,
 } from "../../../../src/data/hassio/addon";
-import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
 import { haStyle } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
 import { suggestAddonRestart } from "../../dialogs/suggestAddonRestart";
@@ -87,17 +85,38 @@ class HassioAddonNetwork extends LitElement {
           </table>
         </div>
         <div class="card-actions">
-          <ha-progress-button class="warning" @click=${this._resetTapped}>
+          <mwc-button class="warning" @click=${this._resetTapped}>
             Reset to defaults
-          </ha-progress-button>
-          <ha-progress-button @click=${this._saveTapped}>
-            Save
-          </ha-progress-button>
+          </mwc-button>
+          <mwc-button @click=${this._saveTapped}>Save</mwc-button>
         </div>
       </ha-card>
     `;
   }
 
+  static get styles(): CSSResult[] {
+    return [
+      haStyle,
+      hassioStyle,
+      css`
+        :host {
+          display: block;
+        }
+        ha-card {
+          display: block;
+        }
+        .errors {
+          color: var(--error-color);
+          margin-bottom: 16px;
+        }
+        .card-actions {
+          display: flex;
+          justify-content: space-between;
+        }
+      `,
+    ];
+  }
+
   protected update(changedProperties: PropertyValues): void {
     super.update(changedProperties);
     if (changedProperties.has("addon")) {
@@ -130,10 +149,7 @@ class HassioAddonNetwork extends LitElement {
     });
   }
 
-  private async _resetTapped(ev: CustomEvent): Promise<void> {
-    const button = ev.currentTarget as any;
-    button.progress = true;
-
+  private async _resetTapped(): Promise<void> {
     const data: HassioAddonSetOptionParams = {
       network: null,
     };
@@ -146,22 +162,17 @@ class HassioAddonNetwork extends LitElement {
         path: "option",
       };
       fireEvent(this, "hass-api-called", eventdata);
-      if (this.addon?.state === "started") {
-        await suggestAddonRestart(this, this.hass, this.addon);
-      }
     } catch (err) {
-      this._error = `Failed to set addon network configuration, ${extractApiErrorMessage(
-        err
-      )}`;
+      this._error = `Failed to set addon network configuration, ${
+        err.body?.message || err
+      }`;
+    }
+    if (!this._error && this.addon?.state === "started") {
+      await suggestAddonRestart(this, this.hass, this.addon);
     }
-
-    button.progress = false;
   }
 
-  private async _saveTapped(ev: CustomEvent): Promise<void> {
-    const button = ev.currentTarget as any;
-    button.progress = true;
-
+  private async _saveTapped(): Promise<void> {
     this._error = undefined;
     const networkconfiguration = {};
     this._config!.forEach((item) => {
@@ -180,38 +191,14 @@ class HassioAddonNetwork extends LitElement {
         path: "option",
       };
       fireEvent(this, "hass-api-called", eventdata);
-      if (this.addon?.state === "started") {
-        await suggestAddonRestart(this, this.hass, this.addon);
-      }
     } catch (err) {
-      this._error = `Failed to set addon network configuration, ${extractApiErrorMessage(
-        err
-      )}`;
+      this._error = `Failed to set addon network configuration, ${
+        err.body?.message || err
+      }`;
+    }
+    if (!this._error && this.addon?.state === "started") {
+      await suggestAddonRestart(this, this.hass, this.addon);
     }
-    button.progress = false;
-  }
-
-  static get styles(): CSSResult[] {
-    return [
-      haStyle,
-      hassioStyle,
-      css`
-        :host {
-          display: block;
-        }
-        ha-card {
-          display: block;
-        }
-        .errors {
-          color: var(--error-color);
-          margin-bottom: 16px;
-        }
-        .card-actions {
-          display: flex;
-          justify-content: space-between;
-        }
-      `,
-    ];
   }
 }
 

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

@@ -3,19 +3,18 @@ import {
   CSSResult,
   customElement,
   html,
-  internalProperty,
   LitElement,
   property,
+  internalProperty,
   TemplateResult,
 } from "lit-element";
-import "../../../../src/components/ha-circular-progress";
 import "../../../../src/components/ha-markdown";
 import {
   fetchHassioAddonDocumentation,
   HassioAddonDetails,
 } from "../../../../src/data/hassio/addon";
-import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
 import "../../../../src/layouts/hass-loading-screen";
+import "../../../../src/components/ha-circular-progress";
 import { haStyle } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
 import { hassioStyle } from "../../resources/hassio-style";
@@ -81,9 +80,9 @@ class HassioAddonDocumentationDashboard extends LitElement {
         this.addon!.slug
       );
     } catch (err) {
-      this._error = `Failed to get addon documentation, ${extractApiErrorMessage(
-        err
-      )}`;
+      this._error = `Failed to get addon documentation, ${
+        err.body?.message || err
+      }`;
     }
   }
 }

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

@@ -9,19 +9,21 @@ import {
   mdiExclamationThick,
   mdiFlask,
   mdiHomeAssistant,
+  mdiInformation,
   mdiKey,
   mdiNetwork,
   mdiPound,
   mdiShield,
 } from "@mdi/js";
+import "@polymer/paper-tooltip/paper-tooltip";
 import {
   css,
   CSSResult,
   customElement,
   html,
-  internalProperty,
   LitElement,
   property,
+  internalProperty,
   TemplateResult,
 } from "lit-element";
 import { classMap } from "lit-html/directives/class-map";
@@ -33,27 +35,19 @@ import "../../../../src/components/buttons/ha-progress-button";
 import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-label-badge";
 import "../../../../src/components/ha-markdown";
-import "../../../../src/components/ha-settings-row";
 import "../../../../src/components/ha-svg-icon";
 import "../../../../src/components/ha-switch";
 import {
   fetchHassioAddonChangelog,
-  fetchHassioAddonInfo,
   HassioAddonDetails,
   HassioAddonSetOptionParams,
   HassioAddonSetSecurityParams,
   installHassioAddon,
   setHassioAddonOption,
   setHassioAddonSecurity,
-  startHassioAddon,
   uninstallHassioAddon,
-  validateHassioAddonOption,
 } from "../../../../src/data/hassio/addon";
-import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
-import {
-  showAlertDialog,
-  showConfirmationDialog,
-} from "../../../../src/dialogs/generic/show-dialog-box";
+import { showConfirmationDialog } from "../../../../src/dialogs/generic/show-dialog-box";
 import { haStyle } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
 import "../../components/hassio-card-content";
@@ -69,7 +63,7 @@ const STAGE_ICON = {
 const PERMIS_DESC = {
   stage: {
     title: "Add-on Stage",
-    description: `Add-ons can have one of three stages:\n\n<ha-svg-icon .path='${STAGE_ICON.stable}'></ha-svg-icon> **Stable**: These are add-ons ready to be used in production.\n\n<ha-svg-icon .path='${STAGE_ICON.experimental}'></ha-svg-icon> **Experimental**: These may contain bugs, and may be unfinished.\n\n<ha-svg-icon .path='${STAGE_ICON.deprecated}'></ha-svg-icon> **Deprecated**: These add-ons will no longer receive any updates.`,
+    description: `Add-ons can have one of three stages:\n\n<ha-svg-icon path='${STAGE_ICON.stable}'></ha-svg-icon> **Stable**: These are add-ons ready to be used in production.\n\n<ha-svg-icon path='${STAGE_ICON.experimental}'></ha-svg-icon> **Experimental**: These may contain bugs, and may be unfinished.\n\n<ha-svg-icon path='${STAGE_ICON.deprecated}'></ha-svg-icon> **Deprecated**: These add-ons will no longer receive any updates.`,
   },
   rating: {
     title: "Add-on Security Rating",
@@ -133,9 +127,11 @@ class HassioAddonInfo extends LitElement {
 
   @internalProperty() private _error?: string;
 
+  @property({ type: Boolean }) private _installing = false;
+
   protected render(): TemplateResult {
     return html`
-      ${this.addon.update_available
+      ${this._computeUpdateAvailable
         ? html`
             <ha-card header="Update available! 🎉">
               <div class="card-content">
@@ -178,7 +174,7 @@ class HassioAddonInfo extends LitElement {
       ${!this.addon.protected
         ? html`
         <ha-card class="warning">
-          <h1 class="card-header">Warning: Protection mode is disabled!</h1>
+          <div class="card-header">Warning: Protection mode is disabled!</div>
           <div class="card-content">
             Protection mode on this add-on is disabled! This gives the add-on full access to the entire system, which adds security risks, and could damage your system when used incorrectly. Only disable the protection mode if you know, need AND trust the source of this add-on.
           </div>
@@ -202,14 +198,14 @@ class HassioAddonInfo extends LitElement {
                           <ha-svg-icon
                             title="Add-on is running"
                             class="running"
-                            .path=${mdiCircle}
+                            path=${mdiCircle}
                           ></ha-svg-icon>
                         `
                       : html`
                           <ha-svg-icon
                             title="Add-on is stopped"
                             class="stopped"
-                            .path=${mdiCircle}
+                            path=${mdiCircle}
                           ></ha-svg-icon>
                         `}
                   `
@@ -246,23 +242,19 @@ class HassioAddonInfo extends LitElement {
               `
             : ""}
           <div class="security">
-            ${this.addon.stage !== "stable"
-              ? html` <ha-label-badge
-                  class=${classMap({
-                    yellow: this.addon.stage === "experimental",
-                    red: this.addon.stage === "deprecated",
-                  })}
-                  @click=${this._showMoreInfo}
-                  id="stage"
-                  label="stage"
-                  description=""
-                >
-                  <ha-svg-icon
-                    .path=${STAGE_ICON[this.addon.stage]}
-                  ></ha-svg-icon>
-                </ha-label-badge>`
-              : ""}
-
+            <ha-label-badge
+              class=${classMap({
+                green: this.addon.stage === "stable",
+                yellow: this.addon.stage === "experimental",
+                red: this.addon.stage === "deprecated",
+              })}
+              @click=${this._showMoreInfo}
+              id="stage"
+              label="stage"
+              description=""
+            >
+              <ha-svg-icon .path=${STAGE_ICON[this.addon.stage]}></ha-svg-icon>
+            </ha-label-badge>
             <ha-label-badge
               class=${classMap({
                 green: [5, 6].includes(Number(this.addon.rating)),
@@ -283,7 +275,7 @@ class HassioAddonInfo extends LitElement {
                     label="host"
                     description=""
                   >
-                    <ha-svg-icon .path=${mdiNetwork}></ha-svg-icon>
+                    <ha-svg-icon path=${mdiNetwork}></ha-svg-icon>
                   </ha-label-badge>
                 `
               : ""}
@@ -295,7 +287,7 @@ class HassioAddonInfo extends LitElement {
                     label="hardware"
                     description=""
                   >
-                    <ha-svg-icon .path=${mdiChip}></ha-svg-icon>
+                    <ha-svg-icon path=${mdiChip}></ha-svg-icon>
                   </ha-label-badge>
                 `
               : ""}
@@ -307,7 +299,7 @@ class HassioAddonInfo extends LitElement {
                     label="hass"
                     description=""
                   >
-                    <ha-svg-icon .path=${mdiHomeAssistant}></ha-svg-icon>
+                    <ha-svg-icon path=${mdiHomeAssistant}></ha-svg-icon>
                   </ha-label-badge>
                 `
               : ""}
@@ -319,7 +311,7 @@ class HassioAddonInfo extends LitElement {
                     label="hassio"
                     .description=${this.addon.hassio_role}
                   >
-                    <ha-svg-icon .path=${mdiHomeAssistant}></ha-svg-icon>
+                    <ha-svg-icon path=${mdiHomeAssistant}></ha-svg-icon>
                   </ha-label-badge>
                 `
               : ""}
@@ -331,7 +323,7 @@ class HassioAddonInfo extends LitElement {
                     label="docker"
                     description=""
                   >
-                    <ha-svg-icon .path=${mdiDocker}></ha-svg-icon>
+                    <ha-svg-icon path=${mdiDocker}></ha-svg-icon>
                   </ha-label-badge>
                 `
               : ""}
@@ -343,7 +335,7 @@ class HassioAddonInfo extends LitElement {
                     label="host pid"
                     description=""
                   >
-                    <ha-svg-icon .path=${mdiPound}></ha-svg-icon>
+                    <ha-svg-icon path=${mdiPound}></ha-svg-icon>
                   </ha-label-badge>
                 `
               : ""}
@@ -356,7 +348,7 @@ class HassioAddonInfo extends LitElement {
                     label="apparmor"
                     description=""
                   >
-                    <ha-svg-icon .path=${mdiShield}></ha-svg-icon>
+                    <ha-svg-icon path=${mdiShield}></ha-svg-icon>
                   </ha-label-badge>
                 `
               : ""}
@@ -368,7 +360,7 @@ class HassioAddonInfo extends LitElement {
                     label="auth"
                     description=""
                   >
-                    <ha-svg-icon .path=${mdiKey}></ha-svg-icon>
+                    <ha-svg-icon path=${mdiKey}></ha-svg-icon>
                   </ha-label-badge>
                 `
               : ""}
@@ -381,7 +373,7 @@ class HassioAddonInfo extends LitElement {
                     description=""
                   >
                     <ha-svg-icon
-                      .path=${mdiCursorDefaultClickOutline}
+                      path=${mdiCursorDefaultClickOutline}
                     ></ha-svg-icon>
                   </ha-label-badge>
                 `
@@ -390,94 +382,67 @@ class HassioAddonInfo extends LitElement {
 
           ${this.addon.version
             ? html`
-                <div class="addon-options">
-                  <ha-settings-row ?three-line=${this.narrow}>
-                    <span slot="heading">
-                      Start on boot
-                    </span>
-                    <span slot="description">
-                      Make the add-on start during a system boot
-                    </span>
-                    <ha-switch
-                      @change=${this._startOnBootToggled}
-                      .checked=${this.addon.boot === "auto"}
-                      haptic
-                    ></ha-switch>
-                  </ha-settings-row>
-
-                  ${this.addon.startup !== "once"
-                    ? html`
-                        <ha-settings-row ?three-line=${this.narrow}>
-                          <span slot="heading">
-                            Watchdog
-                          </span>
-                          <span slot="description">
-                            This will start the add-on if it crashes
-                          </span>
-                          <ha-switch
-                            @change=${this._watchdogToggled}
-                            .checked=${this.addon.watchdog}
-                            haptic
-                          ></ha-switch>
-                        </ha-settings-row>
-                      `
-                    : ""}
-                  ${this.addon.auto_update || this.hass.userData?.showAdvanced
-                    ? html`
-                        <ha-settings-row ?three-line=${this.narrow}>
-                          <span slot="heading">
-                            Auto update
-                          </span>
-                          <span slot="description">
-                            Auto update the add-on when there is a new version
-                            available
-                          </span>
-                          <ha-switch
-                            @change=${this._autoUpdateToggled}
-                            .checked=${this.addon.auto_update}
-                            haptic
-                          ></ha-switch>
-                        </ha-settings-row>
-                      `
-                    : ""}
-                  ${this.addon.ingress
-                    ? html`
-                        <ha-settings-row ?three-line=${this.narrow}>
-                          <span slot="heading">
-                            Show in sidebar
-                          </span>
-                          <span slot="description">
-                            ${this._computeCannotIngressSidebar
-                              ? "This option requires Home Assistant 0.92 or later."
-                              : "Add this add-on to your sidebar"}
-                          </span>
-                          <ha-switch
-                            @change=${this._panelToggled}
-                            .checked=${this.addon.ingress_panel}
-                            .disabled=${this._computeCannotIngressSidebar}
-                            haptic
-                          ></ha-switch>
-                        </ha-settings-row>
-                      `
-                    : ""}
-                  ${this._computeUsesProtectedOptions
-                    ? html`
-                        <ha-settings-row ?three-line=${this.narrow}>
-                          <span slot="heading">
-                            Protection mode
-                          </span>
-                          <span slot="description">
-                            Blocks elevated system access from the add-on
-                          </span>
-                          <ha-switch
-                            @change=${this._protectionToggled}
-                            .checked=${this.addon.protected}
-                            haptic
-                          ></ha-switch>
-                        </ha-settings-row>
-                      `
-                    : ""}
+                <div class="state">
+                  <div>Start on boot</div>
+                  <ha-switch
+                    @change=${this._startOnBootToggled}
+                    .checked=${this.addon.boot === "auto"}
+                    haptic
+                  ></ha-switch>
                 </div>
+                ${this.addon.auto_update || this.hass.userData?.showAdvanced
+                  ? html`
+                      <div class="state">
+                        <div>Auto update</div>
+                        <ha-switch
+                          @change=${this._autoUpdateToggled}
+                          .checked=${this.addon.auto_update}
+                          haptic
+                        ></ha-switch>
+                      </div>
+                    `
+                  : ""}
+                ${this.addon.ingress
+                  ? html`
+                      <div class="state">
+                        <div>Show in sidebar</div>
+                        <ha-switch
+                          @change=${this._panelToggled}
+                          .checked=${this.addon.ingress_panel}
+                          .disabled=${this._computeCannotIngressSidebar}
+                          haptic
+                        ></ha-switch>
+                        ${this._computeCannotIngressSidebar
+                          ? html`
+                              <span>
+                                This option requires Home Assistant 0.92 or
+                                later.
+                              </span>
+                            `
+                          : ""}
+                      </div>
+                    `
+                  : ""}
+                ${this._computeUsesProtectedOptions
+                  ? html`
+                      <div class="state">
+                        <div>
+                          Protection mode
+                          <span>
+                            <ha-svg-icon path=${mdiInformation}></ha-svg-icon>
+                            <paper-tooltip>
+                              Grant the add-on elevated system access.
+                            </paper-tooltip>
+                          </span>
+                        </div>
+                        <ha-switch
+                          @change=${this._protectionToggled}
+                          .checked=${this.addon.protected}
+                          haptic
+                        ></ha-switch>
+                      </div>
+                    `
+                  : ""}
               `
             : ""}
           ${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
@@ -503,9 +468,12 @@ class HassioAddonInfo extends LitElement {
                       </ha-call-api-button>
                     `
                   : html`
-                      <ha-progress-button @click=${this._startClicked}>
+                      <ha-call-api-button
+                        .hass=${this.hass}
+                        .path="hassio/addons/${this.addon.slug}/start"
+                      >
                         Start
-                      </ha-progress-button>
+                      </ha-call-api-button>
                     `}
                 ${this._computeShowWebUI
                   ? html`
@@ -529,12 +497,12 @@ class HassioAddonInfo extends LitElement {
                       </mwc-button>
                     `
                   : ""}
-                <ha-progress-button
+                <mwc-button
                   class=" right warning"
                   @click=${this._uninstallClicked}
                 >
                   Uninstall
-                </ha-progress-button>
+                </mwc-button>
                 ${this.addon.build
                   ? html`
                       <ha-call-api-button
@@ -556,7 +524,8 @@ class HassioAddonInfo extends LitElement {
                     `
                   : ""}
                 <ha-progress-button
-                  .disabled=${!this.addon.available}
+                  .disabled=${!this.addon.available || this._installing}
+                  .progress=${this._installing}
                   @click=${this._installClicked}
                 >
                   Install
@@ -579,284 +548,6 @@ class HassioAddonInfo extends LitElement {
     `;
   }
 
-  private get _computeHassioApi(): boolean {
-    return (
-      this.addon.hassio_api &&
-      (this.addon.hassio_role === "manager" ||
-        this.addon.hassio_role === "admin")
-    );
-  }
-
-  private get _computeApparmorClassName(): string {
-    if (this.addon.apparmor === "profile") {
-      return "green";
-    }
-    if (this.addon.apparmor === "disable") {
-      return "red";
-    }
-    return "";
-  }
-
-  private _showMoreInfo(ev): void {
-    const id = ev.currentTarget.id;
-    showHassioMarkdownDialog(this, {
-      title: PERMIS_DESC[id].title,
-      content: PERMIS_DESC[id].description,
-    });
-  }
-
-  private get _computeIsRunning(): boolean {
-    return this.addon?.state === "started";
-  }
-
-  private get _pathWebui(): string | null {
-    return (
-      this.addon.webui &&
-      this.addon.webui.replace("[HOST]", document.location.hostname)
-    );
-  }
-
-  private get _computeShowWebUI(): boolean | "" | null {
-    return !this.addon.ingress && this.addon.webui && this._computeIsRunning;
-  }
-
-  private _openIngress(): void {
-    navigate(this, `/hassio/ingress/${this.addon.slug}`);
-  }
-
-  private get _computeShowIngressUI(): boolean {
-    return this.addon.ingress && this._computeIsRunning;
-  }
-
-  private get _computeCannotIngressSidebar(): boolean {
-    return (
-      !this.addon.ingress || !atLeastVersion(this.hass.config.version, 0, 92)
-    );
-  }
-
-  private get _computeUsesProtectedOptions(): boolean {
-    return (
-      this.addon.docker_api || this.addon.full_access || this.addon.host_pid
-    );
-  }
-
-  private async _startOnBootToggled(): Promise<void> {
-    this._error = undefined;
-    const data: HassioAddonSetOptionParams = {
-      boot: this.addon.boot === "auto" ? "manual" : "auto",
-    };
-    try {
-      await setHassioAddonOption(this.hass, this.addon.slug, data);
-      const eventdata = {
-        success: true,
-        response: undefined,
-        path: "option",
-      };
-      fireEvent(this, "hass-api-called", eventdata);
-    } catch (err) {
-      this._error = `Failed to set addon option, ${extractApiErrorMessage(
-        err
-      )}`;
-    }
-  }
-
-  private async _watchdogToggled(): Promise<void> {
-    this._error = undefined;
-    const data: HassioAddonSetOptionParams = {
-      watchdog: !this.addon.watchdog,
-    };
-    try {
-      await setHassioAddonOption(this.hass, this.addon.slug, data);
-      const eventdata = {
-        success: true,
-        response: undefined,
-        path: "option",
-      };
-      fireEvent(this, "hass-api-called", eventdata);
-    } catch (err) {
-      this._error = `Failed to set addon option, ${extractApiErrorMessage(
-        err
-      )}`;
-    }
-  }
-
-  private async _autoUpdateToggled(): Promise<void> {
-    this._error = undefined;
-    const data: HassioAddonSetOptionParams = {
-      auto_update: !this.addon.auto_update,
-    };
-    try {
-      await setHassioAddonOption(this.hass, this.addon.slug, data);
-      const eventdata = {
-        success: true,
-        response: undefined,
-        path: "option",
-      };
-      fireEvent(this, "hass-api-called", eventdata);
-    } catch (err) {
-      this._error = `Failed to set addon option, ${extractApiErrorMessage(
-        err
-      )}`;
-    }
-  }
-
-  private async _protectionToggled(): Promise<void> {
-    this._error = undefined;
-    const data: HassioAddonSetSecurityParams = {
-      protected: !this.addon.protected,
-    };
-    try {
-      await setHassioAddonSecurity(this.hass, this.addon.slug, data);
-      const eventdata = {
-        success: true,
-        response: undefined,
-        path: "security",
-      };
-      fireEvent(this, "hass-api-called", eventdata);
-    } catch (err) {
-      this._error = `Failed to set addon security option, ${extractApiErrorMessage(
-        err
-      )}`;
-    }
-  }
-
-  private async _panelToggled(): Promise<void> {
-    this._error = undefined;
-    const data: HassioAddonSetOptionParams = {
-      ingress_panel: !this.addon.ingress_panel,
-    };
-    try {
-      await setHassioAddonOption(this.hass, this.addon.slug, data);
-      const eventdata = {
-        success: true,
-        response: undefined,
-        path: "option",
-      };
-      fireEvent(this, "hass-api-called", eventdata);
-    } catch (err) {
-      this._error = `Failed to set addon option, ${extractApiErrorMessage(
-        err
-      )}`;
-    }
-  }
-
-  private async _openChangelog(): Promise<void> {
-    try {
-      const content = await fetchHassioAddonChangelog(
-        this.hass,
-        this.addon.slug
-      );
-      showHassioMarkdownDialog(this, {
-        title: "Changelog",
-        content,
-      });
-    } catch (err) {
-      showAlertDialog(this, {
-        title: "Failed to get addon changelog",
-        text: extractApiErrorMessage(err),
-      });
-    }
-  }
-
-  private async _installClicked(ev: CustomEvent): Promise<void> {
-    const button = ev.currentTarget as any;
-    button.progress = true;
-
-    try {
-      await installHassioAddon(this.hass, this.addon.slug);
-      const eventdata = {
-        success: true,
-        response: undefined,
-        path: "install",
-      };
-      fireEvent(this, "hass-api-called", eventdata);
-    } catch (err) {
-      showAlertDialog(this, {
-        title: "Failed to install addon",
-        text: extractApiErrorMessage(err),
-      });
-    }
-    button.progress = false;
-  }
-
-  private async _startClicked(ev: CustomEvent): Promise<void> {
-    const button = ev.currentTarget as any;
-    button.progress = true;
-    try {
-      const validate = await validateHassioAddonOption(
-        this.hass,
-        this.addon.slug
-      );
-      if (!validate.data.valid) {
-        await showConfirmationDialog(this, {
-          title: "Failed to start addon - configuration validation failed!",
-          text: validate.data.message.split(" Got ")[0],
-          confirm: () => this._openConfiguration(),
-          confirmText: "Go to configuration",
-          dismissText: "Cancel",
-        });
-        button.progress = false;
-        return;
-      }
-    } catch (err) {
-      showAlertDialog(this, {
-        title: "Failed to validate addon configuration",
-        text: extractApiErrorMessage(err),
-      });
-      button.progress = false;
-      return;
-    }
-
-    try {
-      await startHassioAddon(this.hass, this.addon.slug);
-      this.addon = await fetchHassioAddonInfo(this.hass, this.addon.slug);
-    } catch (err) {
-      showAlertDialog(this, {
-        title: "Failed to start addon",
-        text: extractApiErrorMessage(err),
-      });
-    }
-    button.progress = false;
-  }
-
-  private _openConfiguration(): void {
-    navigate(this, `/hassio/addon/${this.addon.slug}/config`);
-  }
-
-  private async _uninstallClicked(ev: CustomEvent): Promise<void> {
-    const button = ev.currentTarget as any;
-    button.progress = true;
-
-    const confirmed = await showConfirmationDialog(this, {
-      title: this.addon.name,
-      text: "Are you sure you want to uninstall this add-on?",
-      confirmText: "uninstall add-on",
-      dismissText: "no",
-    });
-
-    if (!confirmed) {
-      button.progress = false;
-      return;
-    }
-
-    this._error = undefined;
-    try {
-      await uninstallHassioAddon(this.hass, this.addon.slug);
-      const eventdata = {
-        success: true,
-        response: undefined,
-        path: "uninstall",
-      };
-      fireEvent(this, "hass-api-called", eventdata);
-    } catch (err) {
-      showAlertDialog(this, {
-        title: "Failed to uninstall addon",
-        text: extractApiErrorMessage(err),
-      });
-    }
-    button.progress = false;
-  }
-
   static get styles(): CSSResult[] {
     return [
       haStyle,
@@ -911,7 +602,19 @@ class HassioAddonInfo extends LitElement {
           margin: 16px 0;
           display: block;
         }
-
+        .state {
+          display: flex;
+          margin: 33px 0;
+        }
+        .state div {
+          width: 180px;
+          display: inline-block;
+        }
+        .state ha-svg-icon {
+          width: 16px;
+          height: 16px;
+          color: var(--secondary-text-color);
+        }
         ha-switch {
           display: flex;
         }
@@ -972,30 +675,214 @@ class HassioAddonInfo extends LitElement {
         ha-markdown {
           padding: 16px;
         }
-        ha-settings-row {
-          padding: 0;
-          height: 54px;
-          width: 100%;
-        }
-        ha-settings-row > span[slot="description"] {
-          white-space: normal;
-          color: var(--secondary-text-color);
-        }
-        ha-settings-row[three-line] {
-          height: 74px;
-        }
-
-        .addon-options {
-          max-width: 50%;
-        }
-        @media (max-width: 720px) {
-          .addon-options {
-            max-width: 100%;
-          }
-        }
       `,
     ];
   }
+
+  private get _computeHassioApi(): boolean {
+    return (
+      this.addon.hassio_api &&
+      (this.addon.hassio_role === "manager" ||
+        this.addon.hassio_role === "admin")
+    );
+  }
+
+  private get _computeApparmorClassName(): string {
+    if (this.addon.apparmor === "profile") {
+      return "green";
+    }
+    if (this.addon.apparmor === "disable") {
+      return "red";
+    }
+    return "";
+  }
+
+  private _showMoreInfo(ev): void {
+    const id = ev.currentTarget.id;
+    showHassioMarkdownDialog(this, {
+      title: PERMIS_DESC[id].title,
+      content: PERMIS_DESC[id].description,
+    });
+  }
+
+  private get _computeIsRunning(): boolean {
+    return this.addon?.state === "started";
+  }
+
+  private get _computeUpdateAvailable(): boolean | "" {
+    return (
+      this.addon &&
+      !this.addon.detached &&
+      this.addon.version &&
+      this.addon.version !== this.addon.version_latest
+    );
+  }
+
+  private get _pathWebui(): string | null {
+    return (
+      this.addon.webui &&
+      this.addon.webui.replace("[HOST]", document.location.hostname)
+    );
+  }
+
+  private get _computeShowWebUI(): boolean | "" | null {
+    return !this.addon.ingress && this.addon.webui && this._computeIsRunning;
+  }
+
+  private _openIngress(): void {
+    navigate(this, `/hassio/ingress/${this.addon.slug}`);
+  }
+
+  private get _computeShowIngressUI(): boolean {
+    return this.addon.ingress && this._computeIsRunning;
+  }
+
+  private get _computeCannotIngressSidebar(): boolean {
+    return (
+      !this.addon.ingress || !atLeastVersion(this.hass.config.version, 0, 92)
+    );
+  }
+
+  private get _computeUsesProtectedOptions(): boolean {
+    return (
+      this.addon.docker_api || this.addon.full_access || this.addon.host_pid
+    );
+  }
+
+  private async _startOnBootToggled(): Promise<void> {
+    this._error = undefined;
+    const data: HassioAddonSetOptionParams = {
+      boot: this.addon.boot === "auto" ? "manual" : "auto",
+    };
+    try {
+      await setHassioAddonOption(this.hass, this.addon.slug, data);
+      const eventdata = {
+        success: true,
+        response: undefined,
+        path: "option",
+      };
+      fireEvent(this, "hass-api-called", eventdata);
+    } catch (err) {
+      this._error = `Failed to set addon option, ${err.body?.message || err}`;
+    }
+  }
+
+  private async _autoUpdateToggled(): Promise<void> {
+    this._error = undefined;
+    const data: HassioAddonSetOptionParams = {
+      auto_update: !this.addon.auto_update,
+    };
+    try {
+      await setHassioAddonOption(this.hass, this.addon.slug, data);
+      const eventdata = {
+        success: true,
+        response: undefined,
+        path: "option",
+      };
+      fireEvent(this, "hass-api-called", eventdata);
+    } catch (err) {
+      this._error = `Failed to set addon option, ${err.body?.message || err}`;
+    }
+  }
+
+  private async _protectionToggled(): Promise<void> {
+    this._error = undefined;
+    const data: HassioAddonSetSecurityParams = {
+      protected: !this.addon.protected,
+    };
+    try {
+      await setHassioAddonSecurity(this.hass, this.addon.slug, data);
+      const eventdata = {
+        success: true,
+        response: undefined,
+        path: "security",
+      };
+      fireEvent(this, "hass-api-called", eventdata);
+    } catch (err) {
+      this._error = `Failed to set addon security option, ${
+        err.body?.message || err
+      }`;
+    }
+  }
+
+  private async _panelToggled(): Promise<void> {
+    this._error = undefined;
+    const data: HassioAddonSetOptionParams = {
+      ingress_panel: !this.addon.ingress_panel,
+    };
+    try {
+      await setHassioAddonOption(this.hass, this.addon.slug, data);
+      const eventdata = {
+        success: true,
+        response: undefined,
+        path: "option",
+      };
+      fireEvent(this, "hass-api-called", eventdata);
+    } catch (err) {
+      this._error = `Failed to set addon option, ${err.body?.message || err}`;
+    }
+  }
+
+  private async _openChangelog(): Promise<void> {
+    this._error = undefined;
+    try {
+      const content = await fetchHassioAddonChangelog(
+        this.hass,
+        this.addon.slug
+      );
+      showHassioMarkdownDialog(this, {
+        title: "Changelog",
+        content,
+      });
+    } catch (err) {
+      this._error = `Failed to get addon changelog, ${
+        err.body?.message || err
+      }`;
+    }
+  }
+
+  private async _installClicked(): Promise<void> {
+    this._error = undefined;
+    this._installing = true;
+    try {
+      await installHassioAddon(this.hass, this.addon.slug);
+      const eventdata = {
+        success: true,
+        response: undefined,
+        path: "install",
+      };
+      fireEvent(this, "hass-api-called", eventdata);
+    } catch (err) {
+      this._error = `Failed to install addon, ${err.body?.message || err}`;
+    }
+    this._installing = false;
+  }
+
+  private async _uninstallClicked(): Promise<void> {
+    const confirmed = await showConfirmationDialog(this, {
+      title: this.addon.name,
+      text: "Are you sure you want to uninstall this add-on?",
+      confirmText: "uninstall add-on",
+      dismissText: "no",
+    });
+
+    if (!confirmed) {
+      return;
+    }
+
+    this._error = undefined;
+    try {
+      await uninstallHassioAddon(this.hass, this.addon.slug);
+      const eventdata = {
+        success: true,
+        response: undefined,
+        path: "uninstall",
+      };
+      fireEvent(this, "hass-api-called", eventdata);
+    } catch (err) {
+      this._error = `Failed to uninstall addon, ${err.body?.message || err}`;
+    }
+  }
 }
 declare global {
   interface HTMLElementTagNameMap {

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

@@ -4,9 +4,9 @@ import {
   CSSResult,
   customElement,
   html,
-  internalProperty,
   LitElement,
   property,
+  internalProperty,
   TemplateResult,
 } from "lit-element";
 import "../../../../src/components/ha-card";
@@ -14,7 +14,6 @@ import {
   fetchHassioAddonLogs,
   HassioAddonDetails,
 } from "../../../../src/data/hassio/addon";
-import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
 import { haStyle } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
 import "../../components/hassio-ansi-to-html";
@@ -76,7 +75,7 @@ class HassioAddonLogs extends LitElement {
     try {
       this._content = await fetchHassioAddonLogs(this.hass, this.addon.slug);
     } catch (err) {
-      this._error = `Failed to get addon logs, ${extractApiErrorMessage(err)}`;
+      this._error = `Failed to get addon logs, ${err.body?.message || err}`;
     }
   }
 

hassio/src/components/hassio-ansi-to-html.ts

@@ -21,7 +21,7 @@ interface State {
 class HassioAnsiToHtml extends LitElement {
   @property() public content!: string;
 
-  protected render(): TemplateResult | void {
+  public render(): TemplateResult | void {
     return html`${this._parseTextToColoredPre(this.content)}`;
   }
 

hassio/src/components/hassio-card-content.ts

@@ -50,7 +50,7 @@ class HassioCardContent extends LitElement {
           `
         : html`
             <ha-svg-icon
-              class=${this.iconClass!}
+              class=${this.iconClass}
               .path=${this.icon}
               .title=${this.iconTitle}
             ></ha-svg-icon>

hassio/src/components/hassio-upload-snapshot.ts

@@ -1,82 +0,0 @@
-import "@material/mwc-icon-button/mwc-icon-button";
-import { mdiFolderUpload } from "@mdi/js";
-import "@polymer/iron-input/iron-input";
-import "@polymer/paper-input/paper-input-container";
-import {
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  TemplateResult,
-} from "lit-element";
-import { fireEvent } from "../../../src/common/dom/fire_event";
-import "../../../src/components/ha-circular-progress";
-import "../../../src/components/ha-file-upload";
-import "../../../src/components/ha-svg-icon";
-import { extractApiErrorMessage } from "../../../src/data/hassio/common";
-import {
-  HassioSnapshot,
-  uploadSnapshot,
-} from "../../../src/data/hassio/snapshot";
-import { showAlertDialog } from "../../../src/dialogs/generic/show-dialog-box";
-import { HomeAssistant } from "../../../src/types";
-
-declare global {
-  interface HASSDomEvents {
-    "snapshot-uploaded": { snapshot: HassioSnapshot };
-  }
-}
-
-@customElement("hassio-upload-snapshot")
-export class HassioUploadSnapshot extends LitElement {
-  public hass!: HomeAssistant;
-
-  @internalProperty() public value: string | null = null;
-
-  @internalProperty() private _uploading = false;
-
-  public render(): TemplateResult {
-    return html`
-      <ha-file-upload
-        .uploading=${this._uploading}
-        .icon=${mdiFolderUpload}
-        accept="application/x-tar"
-        label="Upload snapshot"
-        @file-picked=${this._uploadFile}
-        auto-open-file-dialog
-      ></ha-file-upload>
-    `;
-  }
-
-  private async _uploadFile(ev) {
-    const file = ev.detail.files[0];
-
-    if (!["application/x-tar"].includes(file.type)) {
-      showAlertDialog(this, {
-        title: "Unsupported file format",
-        text: "Please choose a Home Assistant snapshot file (.tar)",
-        confirmText: "ok",
-      });
-      return;
-    }
-    this._uploading = true;
-    try {
-      const snapshot = await uploadSnapshot(this.hass, file);
-      fireEvent(this, "snapshot-uploaded", { snapshot: snapshot.data });
-    } catch (err) {
-      showAlertDialog(this, {
-        title: "Upload failed",
-        text: extractApiErrorMessage(err),
-        confirmText: "ok",
-      });
-    } finally {
-      this._uploading = false;
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hassio-upload-snapshot": HassioUploadSnapshot;
-  }
-}

hassio/src/dashboard/hassio-addons.ts

@@ -10,7 +10,6 @@ import {
 } from "lit-element";
 import { atLeastVersion } from "../../../src/common/config/version";
 import { navigate } from "../../../src/common/navigate";
-import { compare } from "../../../src/common/string/compare";
 import "../../../src/components/ha-card";
 import { HassioAddonInfo } from "../../../src/data/hassio/addon";
 import { haStyle } from "../../../src/resources/styles";
@@ -22,27 +21,25 @@ import { hassioStyle } from "../resources/hassio-style";
 class HassioAddons extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ attribute: false }) public addons?: HassioAddonInfo[];
+  @property() public addons?: HassioAddonInfo[];
 
   protected render(): TemplateResult {
     return html`
       <div class="content">
         <h1>Add-ons</h1>
         <div class="card-group">
-          ${!this.addons?.length
+          ${!this.addons
             ? html`
                 <ha-card>
                   <div class="card-content">
                     You don't have any add-ons installed yet. Head over to
-                    <button class="link" @click=${this._openStore}>
-                      the add-on store
-                    </button>
+                    <a href="#" @click=${this._openStore}>the add-on store</a>
                     to get started!
                   </div>
                 </ha-card>
               `
             : this.addons
-                .sort((a, b) => compare(a.name, b.name))
+                .sort((a, b) => (a.name > b.name ? 1 : -1))
                 .map(
                   (addon) => html`
                     <ha-card .addon=${addon} @click=${this._addonTapped}>
@@ -52,21 +49,22 @@ class HassioAddons extends LitElement {
                           .title=${addon.name}
                           .description=${addon.description}
                           available
-                          .showTopbar=${addon.update_available}
+                          .showTopbar=${addon.installed !== addon.version}
                           topbarClass="update"
-                          .icon=${addon.update_available!
+                          .icon=${addon.installed !== addon.version
                             ? mdiArrowUpBoldCircle
                             : mdiPuzzle}
                           .iconTitle=${addon.state !== "started"
                             ? "Add-on is stopped"
-                            : addon.update_available!
+                            : addon.installed !== addon.version
                             ? "New version available"
                             : "Add-on is running"}
-                          .iconClass=${addon.update_available
+                          .iconClass=${addon.installed &&
+                          addon.installed !== addon.version
                             ? addon.state === "started"
                               ? "update"
                               : "update stopped"
-                            : addon.state === "started"
+                            : addon.installed && addon.state === "started"
                             ? "running"
                             : "stopped"}
                           .iconImage=${atLeastVersion(

hassio/src/dashboard/hassio-update.ts

@@ -7,26 +7,17 @@ import {
   html,
   LitElement,
   property,
+  internalProperty,
   TemplateResult,
 } from "lit-element";
-import memoizeOne from "memoize-one";
-import "../../../src/components/buttons/ha-progress-button";
+import "../../../src/components/buttons/ha-call-api-button";
 import "../../../src/components/ha-card";
 import "../../../src/components/ha-svg-icon";
-import {
-  extractApiErrorMessage,
-  HassioResponse,
-  ignoredStatusCodes,
-} from "../../../src/data/hassio/common";
 import { HassioHassOSInfo } from "../../../src/data/hassio/host";
 import {
   HassioHomeAssistantInfo,
   HassioSupervisorInfo,
 } from "../../../src/data/hassio/supervisor";
-import {
-  showAlertDialog,
-  showConfirmationDialog,
-} from "../../../src/dialogs/generic/show-dialog-box";
 import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant } from "../../../src/types";
 import { hassioStyle } from "../resources/hassio-style";
@@ -35,30 +26,29 @@ import { hassioStyle } from "../resources/hassio-style";
 export class HassioUpdate extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ attribute: false }) public hassInfo?: HassioHomeAssistantInfo;
+  @property({ attribute: false }) public hassInfo: HassioHomeAssistantInfo;
 
   @property({ attribute: false }) public hassOsInfo?: HassioHassOSInfo;
 
-  @property({ attribute: false }) public supervisorInfo?: HassioSupervisorInfo;
+  @property() public supervisorInfo: HassioSupervisorInfo;
 
-  private _pendingUpdates = memoizeOne(
-    (
-      core?: HassioHomeAssistantInfo,
-      supervisor?: HassioSupervisorInfo,
-      os?: HassioHassOSInfo
-    ): number => {
-      return [core, supervisor, os].filter(
-        (value) => !!value && value?.update_available
-      ).length;
-    }
-  );
+  @internalProperty() private _error?: string;
 
   protected render(): TemplateResult {
-    const updatesAvailable = this._pendingUpdates(
+    const updatesAvailable: number = [
       this.hassInfo,
       this.supervisorInfo,
-      this.hassOsInfo
-    );
+      this.hassOsInfo,
+    ].filter((value) => {
+      return (
+        !!value &&
+        (value.version_latest
+          ? value.version !== value.version_latest
+          : value.version_latest
+          ? value.version !== value.version_latest
+          : false)
+      );
+    }).length;
 
     if (!updatesAvailable) {
       return html``;
@@ -66,6 +56,9 @@ export class HassioUpdate extends LitElement {
 
     return html`
       <div class="content">
+        ${this._error
+          ? html` <div class="error">Error: ${this._error}</div> `
+          : ""}
         <h1>
           ${updatesAvailable > 1
             ? "Updates Available 🎉"
@@ -74,24 +67,26 @@ export class HassioUpdate extends LitElement {
         <div class="card-group">
           ${this._renderUpdateCard(
             "Home Assistant Core",
-            this.hassInfo!,
+            this.hassInfo.version,
+            this.hassInfo.version_latest,
             "hassio/homeassistant/update",
             `https://${
-              this.hassInfo?.version_latest.includes("b") ? "rc" : "www"
-            }.home-assistant.io/latest-release-notes/`
+              this.hassInfo.version_latest.includes("b") ? "rc" : "www"
+            }.home-assistant.io/latest-release-notes/`,
+            mdiHomeAssistant
           )}
           ${this._renderUpdateCard(
             "Supervisor",
-            this.supervisorInfo!,
+            this.supervisorInfo.version,
+            this.supervisorInfo.version_latest,
             "hassio/supervisor/update",
-            `https://github.com//home-assistant/hassio/releases/tag/${
-              this.supervisorInfo!.version_latest
-            }`
+            `https://github.com//home-assistant/hassio/releases/tag/${this.supervisorInfo.version_latest}`
           )}
           ${this.hassOsInfo
             ? this._renderUpdateCard(
                 "Operating System",
-                this.hassOsInfo,
+                this.hassOsInfo.version,
+                this.hassOsInfo.version_latest,
                 "hassio/os/update",
                 `https://github.com//home-assistant/hassos/releases/tag/${this.hassOsInfo.version_latest}`
               )
@@ -103,68 +98,59 @@ export class HassioUpdate extends LitElement {
 
   private _renderUpdateCard(
     name: string,
-    object: HassioHomeAssistantInfo | HassioSupervisorInfo | HassioHassOSInfo,
+    curVersion: string,
+    lastVersion: string,
     apiPath: string,
-    releaseNotesUrl: string
+    releaseNotesUrl: string,
+    icon?: string
   ): TemplateResult {
-    if (!object.update_available) {
+    if (!lastVersion || lastVersion === curVersion) {
       return html``;
     }
     return html`
       <ha-card>
         <div class="card-content">
-          <div class="icon">
-            <ha-svg-icon .path=${mdiHomeAssistant}></ha-svg-icon>
-          </div>
-          <div class="update-heading">${name} ${object.version_latest}</div>
+          ${icon
+            ? html`
+                <div class="icon">
+                  <ha-svg-icon .path=${icon}></ha-svg-icon>
+                </div>
+              `
+            : ""}
+          <div class="update-heading">${name} ${lastVersion}</div>
           <div class="warning">
-            You are currently running version ${object.version}
+            You are currently running version ${curVersion}
           </div>
         </div>
         <div class="card-actions">
           <a href="${releaseNotesUrl}" target="_blank" rel="noreferrer">
             <mwc-button>Release notes</mwc-button>
           </a>
-          <ha-progress-button
-            .apiPath=${apiPath}
-            .name=${name}
-            .version=${object.version_latest}
-            @click=${this._confirmUpdate}
+          <ha-call-api-button
+            .hass=${this.hass}
+            .path=${apiPath}
+            @hass-api-called=${this._apiCalled}
           >
             Update
-          </ha-progress-button>
+          </ha-call-api-button>
         </div>
       </ha-card>
     `;
   }
 
-  private async _confirmUpdate(ev): Promise<void> {
-    const item = ev.currentTarget;
-    item.progress = true;
-    const confirmed = await showConfirmationDialog(this, {
-      title: `Update ${item.name}`,
-      text: `Are you sure you want to update ${item.name} to version ${item.version}?`,
-      confirmText: "update",
-      dismissText: "cancel",
-    });
-
-    if (!confirmed) {
-      item.progress = false;
+  private _apiCalled(ev): void {
+    if (ev.detail.success) {
+      this._error = "";
       return;
     }
-    try {
-      await this.hass.callApi<HassioResponse<void>>("POST", item.apiPath);
-    } catch (err) {
-      // Only show an error if the status code was not expected (user behind proxy)
-      // or no status at all(connection terminated)
-      if (err.status_code && !ignoredStatusCodes.has(err.status_code)) {
-        showAlertDialog(this, {
-          title: "Update failed",
-          text: extractApiErrorMessage(err),
-        });
-      }
+
+    const response = ev.detail.response;
+
+    if (typeof response.body === "object") {
+      this._error = response.body.message || "Unknown error";
+    } else {
+      this._error = response.body;
     }
-    item.progress = false;
   }
 
   static get styles(): CSSResult[] {

hassio/src/dialogs/markdown/dialog-hassio-markdown.ts

@@ -31,10 +31,6 @@ class HassioMarkdownDialog extends LitElement {
     this._opened = true;
   }
 
-  public closeDialog() {
-    this._opened = false;
-  }
-
   protected render(): TemplateResult {
     if (!this._opened) {
       return html``;
@@ -42,7 +38,7 @@ class HassioMarkdownDialog extends LitElement {
     return html`
       <ha-dialog
         open
-        @closed=${this.closeDialog}
+        @closing=${this._closeDialog}
         .heading=${createCloseHeading(this.hass, this.title)}
       >
         <ha-markdown .content=${this.content || ""}></ha-markdown>
@@ -50,6 +46,10 @@ class HassioMarkdownDialog extends LitElement {
     `;
   }
 
+  private _closeDialog(): void {
+    this._opened = false;
+  }
+
   static get styles(): CSSResult[] {
     return [
       haStyleDialog,

hassio/src/dialogs/network/dialog-hassio-network.ts

@@ -1,334 +0,0 @@
-import "@material/mwc-button/mwc-button";
-import "@material/mwc-icon-button";
-import "@material/mwc-tab";
-import "@material/mwc-tab-bar";
-import { mdiClose } from "@mdi/js";
-import { PaperInputElement } from "@polymer/paper-input/paper-input";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
-import { cache } from "lit-html/directives/cache";
-import { fireEvent } from "../../../../src/common/dom/fire_event";
-import "../../../../src/components/ha-circular-progress";
-import "../../../../src/components/ha-dialog";
-import "../../../../src/components/ha-formfield";
-import "../../../../src/components/ha-header-bar";
-import "../../../../src/components/ha-radio";
-import type { HaRadio } from "../../../../src/components/ha-radio";
-import "../../../../src/components/ha-related-items";
-import "../../../../src/components/ha-svg-icon";
-import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
-import {
-  NetworkInterface,
-  updateNetworkInterface,
-} from "../../../../src/data/hassio/network";
-import {
-  showAlertDialog,
-  showConfirmationDialog,
-} from "../../../../src/dialogs/generic/show-dialog-box";
-import { HassDialog } from "../../../../src/dialogs/make-dialog-manager";
-import { haStyleDialog } from "../../../../src/resources/styles";
-import type { HomeAssistant } from "../../../../src/types";
-import { HassioNetworkDialogParams } from "./show-dialog-network";
-
-@customElement("dialog-hassio-network")
-export class DialogHassioNetwork extends LitElement
-  implements HassDialog<HassioNetworkDialogParams> {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @internalProperty() private _prosessing = false;
-
-  @internalProperty() private _params?: HassioNetworkDialogParams;
-
-  @internalProperty() private _network!: {
-    interface: string;
-    data: NetworkInterface;
-  }[];
-
-  @internalProperty() private _curTabIndex = 0;
-
-  @internalProperty() private _device?: {
-    interface: string;
-    data: NetworkInterface;
-  };
-
-  @internalProperty() private _dirty = false;
-
-  public async showDialog(params: HassioNetworkDialogParams): Promise<void> {
-    this._params = params;
-    this._dirty = false;
-    this._curTabIndex = 0;
-    this._network = Object.keys(params.network?.interfaces)
-      .map((device) => ({
-        interface: device,
-        data: params.network.interfaces[device],
-      }))
-      .sort((a, b) => {
-        return a.data.primary > b.data.primary ? -1 : 1;
-      });
-    this._device = this._network[this._curTabIndex];
-    this._device.data.nameservers = String(this._device.data.nameservers);
-    await this.updateComplete;
-  }
-
-  public closeDialog(): void {
-    this._params = undefined;
-    this._prosessing = false;
-    fireEvent(this, "dialog-closed", { dialog: this.localName });
-  }
-
-  protected render(): TemplateResult {
-    if (!this._params || !this._network) {
-      return html``;
-    }
-
-    return html`
-      <ha-dialog
-        open
-        scrimClickAction
-        escapeKeyAction
-        .heading=${true}
-        hideActions
-        @closed=${this.closeDialog}
-      >
-        <div slot="heading">
-          <ha-header-bar>
-            <span slot="title">
-              Network settings
-            </span>
-            <mwc-icon-button slot="actionItems" dialogAction="cancel">
-              <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
-            </mwc-icon-button>
-          </ha-header-bar>
-          ${this._network.length > 1
-            ? html` <mwc-tab-bar
-                .activeIndex=${this._curTabIndex}
-                @MDCTabBar:activated=${this._handleTabActivated}
-                >${this._network.map(
-                  (device) =>
-                    html`<mwc-tab
-                      .id=${device.interface}
-                      .label=${device.interface}
-                    >
-                    </mwc-tab>`
-                )}
-              </mwc-tab-bar>`
-            : ""}
-        </div>
-        ${cache(this._renderTab())}
-      </ha-dialog>
-    `;
-  }
-
-  private _renderTab() {
-    return html` <div class="form container">
-        <ha-formfield label="DHCP">
-          <ha-radio
-            @change=${this._handleRadioValueChanged}
-            value="dhcp"
-            name="method"
-            ?checked=${this._device!.data.method === "dhcp"}
-          >
-          </ha-radio>
-        </ha-formfield>
-        <ha-formfield label="Static">
-          <ha-radio
-            @change=${this._handleRadioValueChanged}
-            value="static"
-            name="method"
-            ?checked=${this._device!.data.method === "static"}
-          >
-          </ha-radio>
-        </ha-formfield>
-        ${this._device!.data.method !== "dhcp"
-          ? html` <paper-input
-                class="flex-auto"
-                id="ip_address"
-                label="IP address/Netmask"
-                .value="${this._device!.data.ip_address}"
-                @value-changed=${this._handleInputValueChanged}
-              ></paper-input>
-              <paper-input
-                class="flex-auto"
-                id="gateway"
-                label="Gateway address"
-                .value="${this._device!.data.gateway}"
-                @value-changed=${this._handleInputValueChanged}
-              ></paper-input>
-              <paper-input
-                class="flex-auto"
-                id="nameservers"
-                label="DNS servers"
-                .value="${this._device!.data.nameservers as string}"
-                @value-changed=${this._handleInputValueChanged}
-              ></paper-input>
-              NB!: If you are changing IP or gateway addresses, you might lose
-              the connection.`
-          : ""}
-      </div>
-      <div class="buttons">
-        <mwc-button label="close" @click=${this.closeDialog}> </mwc-button>
-        <mwc-button @click=${this._updateNetwork} ?disabled=${!this._dirty}>
-          ${this._prosessing
-            ? html`<ha-circular-progress active></ha-circular-progress>`
-            : "Update"}
-        </mwc-button>
-      </div>`;
-  }
-
-  private async _updateNetwork() {
-    this._prosessing = true;
-    let options: Partial<NetworkInterface> = {
-      method: this._device!.data.method,
-    };
-    if (options.method !== "dhcp") {
-      options = {
-        ...options,
-        address: this._device!.data.ip_address,
-        gateway: this._device!.data.gateway,
-        dns: String(this._device!.data.nameservers).split(","),
-      };
-    }
-    try {
-      await updateNetworkInterface(this.hass, this._device!.interface, options);
-    } catch (err) {
-      showAlertDialog(this, {
-        title: "Failed to change network settings",
-        text: extractApiErrorMessage(err),
-      });
-      this._prosessing = false;
-      return;
-    }
-    this._params?.loadData();
-    this.closeDialog();
-  }
-
-  private async _handleTabActivated(ev: CustomEvent): Promise<void> {
-    if (this._dirty) {
-      const confirm = await showConfirmationDialog(this, {
-        text:
-          "You have unsaved changes, these will get lost if you change tabs, do you want to continue?",
-        confirmText: "yes",
-        dismissText: "no",
-      });
-      if (!confirm) {
-        this.requestUpdate("_device");
-        return;
-      }
-    }
-    this._curTabIndex = ev.detail.index;
-    this._device = this._network[ev.detail.index];
-    this._device.data.nameservers = String(this._device.data.nameservers);
-  }
-
-  private _handleRadioValueChanged(ev: CustomEvent): void {
-    const value = (ev.target as HaRadio).value as "dhcp" | "static";
-
-    if (!value || !this._device || this._device!.data.method === value) {
-      return;
-    }
-
-    this._dirty = true;
-
-    this._device!.data.method = value;
-    this.requestUpdate("_device");
-  }
-
-  private _handleInputValueChanged(ev: CustomEvent): void {
-    const value: string | null | undefined = (ev.target as PaperInputElement)
-      .value;
-    const id = (ev.target as PaperInputElement).id;
-
-    if (!value || !this._device || this._device.data[id] === value) {
-      return;
-    }
-
-    this._dirty = true;
-
-    this._device.data[id] = value;
-  }
-
-  static get styles(): CSSResult[] {
-    return [
-      haStyleDialog,
-      css`
-        ha-header-bar {
-          --mdc-theme-on-primary: var(--primary-text-color);
-          --mdc-theme-primary: var(--mdc-theme-surface);
-          flex-shrink: 0;
-        }
-
-        mwc-tab-bar {
-          border-bottom: 1px solid
-            var(--mdc-dialog-scroll-divider-color, rgba(0, 0, 0, 0.12));
-        }
-
-        ha-dialog {
-          --dialog-content-position: static;
-          --dialog-content-padding: 0;
-          --dialog-z-index: 6;
-        }
-
-        @media all and (min-width: 451px) and (min-height: 501px) {
-          .container {
-            width: 400px;
-          }
-        }
-
-        .content {
-          display: block;
-          padding: 20px 24px;
-        }
-
-        /* overrule the ha-style-dialog max-height on small screens */
-        @media all and (max-width: 450px), all and (max-height: 500px) {
-          ha-header-bar {
-            --mdc-theme-primary: var(--app-header-background-color);
-            --mdc-theme-on-primary: var(--app-header-text-color, white);
-          }
-        }
-
-        mwc-button.warning {
-          --mdc-theme-primary: var(--error-color);
-        }
-
-        :host([rtl]) app-toolbar {
-          direction: rtl;
-          text-align: right;
-        }
-        .container {
-          padding: 20px 24px;
-        }
-        .form {
-          margin-bottom: 53px;
-        }
-        .buttons {
-          position: absolute;
-          bottom: 0;
-          width: 100%;
-          box-sizing: border-box;
-          border-top: 1px solid
-            var(--mdc-dialog-scroll-divider-color, rgba(0, 0, 0, 0.12));
-          display: flex;
-          justify-content: space-between;
-          padding: 8px;
-          padding-bottom: max(env(safe-area-inset-bottom), 8px);
-          background-color: var(--mdc-theme-surface, #fff);
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "dialog-hassio-network": DialogHassioNetwork;
-  }
-}