Merge pull request #7422 from home-assistant/dev

20201021.0

.eslintrc.json

@@ -1,7 +1,7 @@
 {
   "extends": [
-    "plugin:@typescript-eslint/recommended",
     "airbnb-typescript/base",
+    "plugin:@typescript-eslint/recommended",
     "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": 0,
+    "no-bitwise": 2,
     "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,13 +75,16 @@
     "object-curly-newline": 0,
     "default-case": 0,
     "wc/no-self-class": 0,
+    "no-shadow": 0,
     "@typescript-eslint/camelcase": 0,
-    "@typescript-eslint/ban-ts-ignore": 0,
+    "@typescript-eslint/ban-ts-comment": 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-function-return-type": 0,
+    "@typescript-eslint/explicit-module-boundary-types": 0,
+    "@typescript-eslint/no-shadow": ["error"]
   },
   "plugins": ["disable", "import", "lit", "prettier", "@typescript-eslint"],
   "processor": "disable/disable"

.github/ISSUE_TEMPLATE/FEATURE_REQUEST.md

@@ -1,26 +0,0 @@
----
-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,5 +1,8 @@
 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

@@ -0,0 +1,60 @@
+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 variation of devices.
+We use [BrowserStack](https://www.browserstack.com) to test Home Assistant on a large variety of devices.

build-scripts/bundle.js

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

build-scripts/removedIcons.json

@@ -1,263 +1 @@
-[
-  {
-    "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,7 +2,6 @@ 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");
 
@@ -30,7 +29,7 @@ const createWebpackConfig = ({
     module: {
       rules: [
         {
-          test: /\.js$|\.ts$/,
+          test: /\.m?js$|\.ts$/,
           exclude: bundle.babelExclude(),
           use: {
             loader: "babel-loader",
@@ -54,8 +53,10 @@ const createWebpackConfig = ({
         }),
       ],
     },
+    experiments: {
+      topLevelAwait: true,
+    },
     plugins: [
-      new WorkerPlugin(),
       new ManifestPlugin({
         // Only include the JS of entrypoints
         filter: (file) => file.isInitial && !file.name.endsWith(".map"),
@@ -110,6 +111,22 @@ 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,13 +212,8 @@
           Chromecast is a technology developed by Google, and is available on:
         </p>
         <ul>
-          <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>
+          <li>Google Chrome (all platforms except iOS)</li>
+          <li>Microsoft Edge (all platforms)</li>
         </ul>
       </div>
 

cast/src/launcher/entrypoint.ts

@@ -1,3 +1,4 @@
+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" />
-          <div class="card-header">
+          <h1 class="card-header">
             Home Assistant Cast${this.subtitle ? ` – ${this.subtitle}` : ""}
             ${this.auth
               ? html`
@@ -44,7 +44,7 @@ class HcLayout extends LitElement {
                   </div>
                 `
               : ""}
-          </div>
+          </h1>
           <slot></slot>
         </div>
       </ha-card>

cast/src/receiver/entrypoint.ts

@@ -6,13 +6,60 @@ import { castContext } from "./cast_context";
 import { HcMain } from "./layout/hc-main";
 import { ReceivedMessage } from "./types";
 
-const controller = new HcMain();
-document.body.append(controller);
+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 options = new cast.framework.CastReceiverOptions();
 options.disableIdleTimeout = true;
 options.customNamespaces = {
-  // @ts-ignore
   [CAST_NS]: cast.framework.system.MessageType.JSON,
 };
 
@@ -30,13 +77,61 @@ 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;
-    controller.processIncomingMessage(msg);
+    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();
+    }
   }
 );
 

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

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

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

@@ -87,6 +87,7 @@ export class HcMain extends HassElement {
         .hass=${this.hass}
         .lovelaceConfig=${this._lovelaceConfig}
         .viewPath=${this._lovelacePath}
+        .urlPath=${this._urlPath}
         @config-refresh=${this._generateLovelaceConfig}
       ></hc-lovelace>
     `;
@@ -215,9 +216,7 @@ export class HcMain extends HassElement {
     }
     this._showDemo = false;
     this._lovelacePath = msg.viewPath;
-    if (castContext.getDeviceCapabilities().touch_input_supported) {
-      this._breakFree();
-    }
+
     this._sendStatus();
   }
 
@@ -240,9 +239,6 @@ export class HcMain extends HassElement {
       this._showDemo = true;
       this._lovelacePath = "overview";
       this._sendStatus();
-      if (castContext.getDeviceCapabilities().touch_input_supported) {
-        this._breakFree();
-      }
     });
   }
 
@@ -263,14 +259,6 @@ 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/entrypoint.ts

@@ -1,3 +1,4 @@
+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";

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/dialogs/more-info/more-info-content";
 import "../../../src/state-summary/state-card-content";
+import "./more-info-content";
 
 class DemoMoreInfo extends PolymerElement {
   static get template() {

gallery/src/components/more-info-content.ts

@@ -0,0 +1,73 @@
+import { HassEntity } from "home-assistant-js-websocket";
+import { property, PropertyValues, UpdatingElement } from "lit-element";
+import dynamicContentUpdater from "../../../src/common/dom/dynamic_content_updater";
+import { stateMoreInfoType } from "../../../src/dialogs/more-info/state_more_info_control";
+import "../../../src/dialogs/more-info/controls/more-info-alarm_control_panel";
+import "../../../src/dialogs/more-info/controls/more-info-automation";
+import "../../../src/dialogs/more-info/controls/more-info-camera";
+import "../../../src/dialogs/more-info/controls/more-info-climate";
+import "../../../src/dialogs/more-info/controls/more-info-configurator";
+import "../../../src/dialogs/more-info/controls/more-info-counter";
+import "../../../src/dialogs/more-info/controls/more-info-cover";
+import "../../../src/dialogs/more-info/controls/more-info-default";
+import "../../../src/dialogs/more-info/controls/more-info-fan";
+import "../../../src/dialogs/more-info/controls/more-info-group";
+import "../../../src/dialogs/more-info/controls/more-info-humidifier";
+import "../../../src/dialogs/more-info/controls/more-info-input_datetime";
+import "../../../src/dialogs/more-info/controls/more-info-light";
+import "../../../src/dialogs/more-info/controls/more-info-lock";
+import "../../../src/dialogs/more-info/controls/more-info-media_player";
+import "../../../src/dialogs/more-info/controls/more-info-person";
+import "../../../src/dialogs/more-info/controls/more-info-script";
+import "../../../src/dialogs/more-info/controls/more-info-sun";
+import "../../../src/dialogs/more-info/controls/more-info-timer";
+import "../../../src/dialogs/more-info/controls/more-info-vacuum";
+import "../../../src/dialogs/more-info/controls/more-info-water_heater";
+import "../../../src/dialogs/more-info/controls/more-info-weather";
+import { HomeAssistant } from "../../../src/types";
+
+class MoreInfoContent extends UpdatingElement {
+  @property({ attribute: false }) public hass?: HomeAssistant;
+
+  @property() public stateObj?: HassEntity;
+
+  private _detachedChild?: ChildNode;
+
+  protected firstUpdated(): void {
+    this.style.position = "relative";
+    this.style.display = "block";
+  }
+
+  // This is not a lit element, but an updating element, so we implement update
+  protected update(changedProps: PropertyValues): void {
+    super.update(changedProps);
+    const stateObj = this.stateObj;
+    const hass = this.hass;
+
+    if (!stateObj || !hass) {
+      if (this.lastChild) {
+        this._detachedChild = this.lastChild;
+        // Detach child to prevent it from doing work.
+        this.removeChild(this.lastChild);
+      }
+      return;
+    }
+
+    if (this._detachedChild) {
+      this.appendChild(this._detachedChild);
+      this._detachedChild = undefined;
+    }
+
+    const moreInfoType =
+      stateObj.attributes && "custom_ui_more_info" in stateObj.attributes
+        ? stateObj.attributes.custom_ui_more_info
+        : "more-info-" + stateMoreInfoType(stateObj);
+
+    dynamicContentUpdater(this, moreInfoType.toUpperCase(), {
+      hass,
+      stateObj,
+    });
+  }
+}
+
+customElements.define("more-info-content", MoreInfoContent);

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 "../components/more-info-content";
 
 const ENTITIES = [
   getEntity("light", "bed_light", "on", {

gallery/src/ha-gallery.js

@@ -1,16 +1,17 @@
 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() public repo!: HassioAddonRepository;
+  @property({ attribute: false }) public repo!: HassioAddonRepository;
 
-  @property() public addons!: HassioAddonInfo[];
+  @property({ attribute: false }) 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.installed !== addon.version
+                    .icon=${addon.installed && addon.update_available
                       ? mdiArrowUpBoldCircle
                       : mdiPuzzle}
                     .iconTitle=${addon.installed
-                      ? addon.installed !== addon.version
+                      ? addon.update_available
                         ? "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.installed !== addon.version
+                      ? addon.update_available
                         ? "update"
                         : "installed"
                       : !addon.available
@@ -104,7 +104,7 @@ class HassioAddonRepositoryEl extends LitElement {
                       : undefined}
                     .showTopbar=${addon.installed || !addon.available}
                     .topbarClass=${addon.installed
-                      ? addon.installed !== addon.version
+                      ? addon.update_available
                         ? "update"
                         : "installed"
                       : !addon.available

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

@@ -1,15 +1,17 @@
 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";
@@ -19,13 +21,14 @@ import {
   HassioAddonRepository,
   reloadHassioAddons,
 } from "../../../src/data/hassio/addon";
-import "../../../src/layouts/hass-tabs-subpage";
+import { extractApiErrorMessage } from "../../../src/data/hassio/common";
 import "../../../src/layouts/hass-loading-screen";
+import "../../../src/layouts/hass-tabs-subpage";
 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") {
@@ -97,14 +100,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
@@ -112,6 +115,12 @@ 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>`
@@ -156,6 +165,9 @@ class HassioAddonStore extends LitElement {
       case 1:
         this.refreshData();
         break;
+      case 2:
+        this._manageRegistries();
+        break;
     }
   }
 
@@ -172,6 +184,10 @@ class HassioAddonStore extends LitElement {
     });
   }
 
+  private async _manageRegistries() {
+    showRegistriesDialog(this);
+  }
+
   private async _loadData() {
     try {
       const addonsInfo = await fetchHassioAddonsInfo(this.hass);
@@ -179,7 +195,7 @@ class HassioAddonStore extends LitElement {
       this._repos.sort(sortRepos);
       this._addons = addonsInfo.addons;
     } catch (err) {
-      alert("Failed to fetch add-on info");
+      alert(extractApiErrorMessage(err));
     }
   }
 

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

@@ -28,6 +28,7 @@ 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 {
@@ -91,7 +92,9 @@ class HassioAddonAudio extends LitElement {
           </paper-dropdown-menu>
         </div>
         <div class="card-actions">
-          <mwc-button @click=${this._saveSettings}>Save</mwc-button>
+          <ha-progress-button @click=${this._saveSettings}>
+            Save
+          </ha-progress-button>
         </div>
       </ha-card>
     `;
@@ -172,7 +175,10 @@ class HassioAddonAudio extends LitElement {
     }
   }
 
-  private async _saveSettings(): Promise<void> {
+  private async _saveSettings(ev: CustomEvent): Promise<void> {
+    const button = ev.currentTarget as any;
+    button.progress = true;
+
     this._error = undefined;
     const data: HassioAddonSetOptionParams = {
       audio_input:
@@ -182,12 +188,14 @@ 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";
     }
-    if (!this._error && this.addon?.state === "started") {
-      await suggestAddonRestart(this, this.hass, this.addon);
-    }
+
+    button.progress = false;
   }
 }
 

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

@@ -5,14 +5,15 @@ 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";
@@ -21,6 +22,7 @@ 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";
@@ -37,13 +39,11 @@ class HassioAddonConfig extends LitElement {
 
   @property({ type: Boolean }) private _configHasChanged = false;
 
-  @query("ha-yaml-editor") private _editor!: HaYamlEditor;
+  @property({ type: Boolean }) private _valid = true;
+
+  @query("ha-yaml-editor", true) 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,23 +52,106 @@ class HassioAddonConfig extends LitElement {
             @value-changed=${this._configChanged}
           ></ha-yaml-editor>
           ${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
-          ${valid ? "" : html` <div class="errors">Invalid YAML</div> `}
+          ${this._valid ? "" : html` <div class="errors">Invalid YAML</div> `}
         </div>
         <div class="card-actions">
-          <mwc-button class="warning" @click=${this._resetTapped}>
+          <ha-progress-button class="warning" @click=${this._resetTapped}>
             Reset to defaults
-          </mwc-button>
-          <mwc-button
+          </ha-progress-button>
+          <ha-progress-button
             @click=${this._saveTapped}
-            .disabled=${!this._configHasChanged || !valid}
+            .disabled=${!this._configHasChanged || !this._valid}
           >
             Save
-          </mwc-button>
+          </ha-progress-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,
@@ -90,7 +173,7 @@ class HassioAddonConfig extends LitElement {
         }
         iron-autogrow-textarea {
           width: 100%;
-          font-family: monospace;
+          font-family: var(--code-font-family, monospace);
         }
         .syntaxerror {
           color: var(--error-color);
@@ -98,80 +181,6 @@ 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,19 +4,21 @@ 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";
@@ -85,38 +87,17 @@ class HassioAddonNetwork extends LitElement {
           </table>
         </div>
         <div class="card-actions">
-          <mwc-button class="warning" @click=${this._resetTapped}>
+          <ha-progress-button class="warning" @click=${this._resetTapped}>
             Reset to defaults
-          </mwc-button>
-          <mwc-button @click=${this._saveTapped}>Save</mwc-button>
+          </ha-progress-button>
+          <ha-progress-button @click=${this._saveTapped}>
+            Save
+          </ha-progress-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")) {
@@ -149,7 +130,10 @@ class HassioAddonNetwork extends LitElement {
     });
   }
 
-  private async _resetTapped(): Promise<void> {
+  private async _resetTapped(ev: CustomEvent): Promise<void> {
+    const button = ev.currentTarget as any;
+    button.progress = true;
+
     const data: HassioAddonSetOptionParams = {
       network: null,
     };
@@ -162,17 +146,22 @@ 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, ${
-        err.body?.message || err
-      }`;
-    }
-    if (!this._error && this.addon?.state === "started") {
-      await suggestAddonRestart(this, this.hass, this.addon);
+      this._error = `Failed to set addon network configuration, ${extractApiErrorMessage(
+        err
+      )}`;
     }
+
+    button.progress = false;
   }
 
-  private async _saveTapped(): Promise<void> {
+  private async _saveTapped(ev: CustomEvent): Promise<void> {
+    const button = ev.currentTarget as any;
+    button.progress = true;
+
     this._error = undefined;
     const networkconfiguration = {};
     this._config!.forEach((item) => {
@@ -191,14 +180,38 @@ 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, ${
-        err.body?.message || err
-      }`;
-    }
-    if (!this._error && this.addon?.state === "started") {
-      await suggestAddonRestart(this, this.hass, this.addon);
+      this._error = `Failed to set addon network configuration, ${extractApiErrorMessage(
+        err
+      )}`;
     }
+    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,18 +3,19 @@ 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";
@@ -80,9 +81,9 @@ class HassioAddonDocumentationDashboard extends LitElement {
         this.addon!.slug
       );
     } catch (err) {
-      this._error = `Failed to get addon documentation, ${
-        err.body?.message || err
-      }`;
+      this._error = `Failed to get addon documentation, ${extractApiErrorMessage(
+        err
+      )}`;
     }
   }
 }

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

@@ -9,21 +9,19 @@ 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";
@@ -35,19 +33,27 @@ 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 { showConfirmationDialog } from "../../../../src/dialogs/generic/show-dialog-box";
+import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
+import {
+  showAlertDialog,
+  showConfirmationDialog,
+} from "../../../../src/dialogs/generic/show-dialog-box";
 import { haStyle } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
 import "../../components/hassio-card-content";
@@ -63,7 +69,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",
@@ -127,11 +133,9 @@ class HassioAddonInfo extends LitElement {
 
   @internalProperty() private _error?: string;
 
-  @property({ type: Boolean }) private _installing = false;
-
   protected render(): TemplateResult {
     return html`
-      ${this._computeUpdateAvailable
+      ${this.addon.update_available
         ? html`
             <ha-card header="Update available! 🎉">
               <div class="card-content">
@@ -174,7 +178,7 @@ class HassioAddonInfo extends LitElement {
       ${!this.addon.protected
         ? html`
         <ha-card class="warning">
-          <div class="card-header">Warning: Protection mode is disabled!</div>
+          <h1 class="card-header">Warning: Protection mode is disabled!</h1>
           <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>
@@ -198,14 +202,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>
                         `}
                   `
@@ -242,19 +246,23 @@ class HassioAddonInfo extends LitElement {
               `
             : ""}
           <div class="security">
-            <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>
+            ${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: [5, 6].includes(Number(this.addon.rating)),
@@ -275,7 +283,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>
                 `
               : ""}
@@ -287,7 +295,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>
                 `
               : ""}
@@ -299,7 +307,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>
                 `
               : ""}
@@ -311,7 +319,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>
                 `
               : ""}
@@ -323,7 +331,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>
                 `
               : ""}
@@ -335,7 +343,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>
                 `
               : ""}
@@ -348,7 +356,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>
                 `
               : ""}
@@ -360,7 +368,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>
                 `
               : ""}
@@ -373,7 +381,7 @@ class HassioAddonInfo extends LitElement {
                     description=""
                   >
                     <ha-svg-icon
-                      path=${mdiCursorDefaultClickOutline}
+                      .path=${mdiCursorDefaultClickOutline}
                     ></ha-svg-icon>
                   </ha-label-badge>
                 `
@@ -382,67 +390,94 @@ class HassioAddonInfo extends LitElement {
 
           ${this.addon.version
             ? html`
-                <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>
+                <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>
-                        </div>
-                        <ha-switch
-                          @change=${this._protectionToggled}
-                          .checked=${this.addon.protected}
-                          haptic
-                        ></ha-switch>
-                      </div>
-                    `
-                  : ""}
+                          <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>
               `
             : ""}
           ${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
@@ -468,12 +503,9 @@ class HassioAddonInfo extends LitElement {
                       </ha-call-api-button>
                     `
                   : html`
-                      <ha-call-api-button
-                        .hass=${this.hass}
-                        .path="hassio/addons/${this.addon.slug}/start"
-                      >
+                      <ha-progress-button @click=${this._startClicked}>
                         Start
-                      </ha-call-api-button>
+                      </ha-progress-button>
                     `}
                 ${this._computeShowWebUI
                   ? html`
@@ -497,12 +529,12 @@ class HassioAddonInfo extends LitElement {
                       </mwc-button>
                     `
                   : ""}
-                <mwc-button
+                <ha-progress-button
                   class=" right warning"
                   @click=${this._uninstallClicked}
                 >
                   Uninstall
-                </mwc-button>
+                </ha-progress-button>
                 ${this.addon.build
                   ? html`
                       <ha-call-api-button
@@ -524,8 +556,7 @@ class HassioAddonInfo extends LitElement {
                     `
                   : ""}
                 <ha-progress-button
-                  .disabled=${!this.addon.available || this._installing}
-                  .progress=${this._installing}
+                  .disabled=${!this.addon.available}
                   @click=${this._installClicked}
                 >
                   Install
@@ -548,6 +579,284 @@ 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,
@@ -602,19 +911,7 @@ 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;
         }
@@ -675,214 +972,30 @@ 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,6 +14,7 @@ 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";
@@ -75,7 +76,7 @@ class HassioAddonLogs extends LitElement {
     try {
       this._content = await fetchHassioAddonLogs(this.hass, this.addon.slug);
     } catch (err) {
-      this._error = `Failed to get addon logs, ${err.body?.message || err}`;
+      this._error = `Failed to get addon logs, ${extractApiErrorMessage(err)}`;
     }
   }
 

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

@@ -21,7 +21,7 @@ interface State {
 class HassioAnsiToHtml extends LitElement {
   @property() public content!: string;
 
-  public render(): TemplateResult | void {
+  protected 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

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

hassio/src/dashboard/hassio-update.ts

@@ -7,17 +7,26 @@ import {
   html,
   LitElement,
   property,
-  internalProperty,
   TemplateResult,
 } from "lit-element";
-import "../../../src/components/buttons/ha-call-api-button";
+import memoizeOne from "memoize-one";
+import "../../../src/components/buttons/ha-progress-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";
@@ -26,29 +35,30 @@ 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() public supervisorInfo: HassioSupervisorInfo;
+  @property({ attribute: false }) public supervisorInfo?: HassioSupervisorInfo;
 
-  @internalProperty() private _error?: string;
+  private _pendingUpdates = memoizeOne(
+    (
+      core?: HassioHomeAssistantInfo,
+      supervisor?: HassioSupervisorInfo,
+      os?: HassioHassOSInfo
+    ): number => {
+      return [core, supervisor, os].filter(
+        (value) => !!value && value?.update_available
+      ).length;
+    }
+  );
 
   protected render(): TemplateResult {
-    const updatesAvailable: number = [
+    const updatesAvailable = this._pendingUpdates(
       this.hassInfo,
       this.supervisorInfo,
-      this.hassOsInfo,
-    ].filter((value) => {
-      return (
-        !!value &&
-        (value.version_latest
-          ? value.version !== value.version_latest
-          : value.version_latest
-          ? value.version !== value.version_latest
-          : false)
-      );
-    }).length;
+      this.hassOsInfo
+    );
 
     if (!updatesAvailable) {
       return html``;
@@ -56,9 +66,6 @@ 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 🎉"
@@ -67,26 +74,24 @@ export class HassioUpdate extends LitElement {
         <div class="card-group">
           ${this._renderUpdateCard(
             "Home Assistant Core",
-            this.hassInfo.version,
-            this.hassInfo.version_latest,
+            this.hassInfo!,
             "hassio/homeassistant/update",
             `https://${
-              this.hassInfo.version_latest.includes("b") ? "rc" : "www"
-            }.home-assistant.io/latest-release-notes/`,
-            mdiHomeAssistant
+              this.hassInfo?.version_latest.includes("b") ? "rc" : "www"
+            }.home-assistant.io/latest-release-notes/`
           )}
           ${this._renderUpdateCard(
             "Supervisor",
-            this.supervisorInfo.version,
-            this.supervisorInfo.version_latest,
+            this.supervisorInfo!,
             "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.version,
-                this.hassOsInfo.version_latest,
+                this.hassOsInfo,
                 "hassio/os/update",
                 `https://github.com//home-assistant/hassos/releases/tag/${this.hassOsInfo.version_latest}`
               )
@@ -98,59 +103,68 @@ export class HassioUpdate extends LitElement {
 
   private _renderUpdateCard(
     name: string,
-    curVersion: string,
-    lastVersion: string,
+    object: HassioHomeAssistantInfo | HassioSupervisorInfo | HassioHassOSInfo,
     apiPath: string,
-    releaseNotesUrl: string,
-    icon?: string
+    releaseNotesUrl: string
   ): TemplateResult {
-    if (!lastVersion || lastVersion === curVersion) {
+    if (!object.update_available) {
       return html``;
     }
     return html`
       <ha-card>
         <div class="card-content">
-          ${icon
-            ? html`
-                <div class="icon">
-                  <ha-svg-icon .path=${icon}></ha-svg-icon>
-                </div>
-              `
-            : ""}
-          <div class="update-heading">${name} ${lastVersion}</div>
+          <div class="icon">
+            <ha-svg-icon .path=${mdiHomeAssistant}></ha-svg-icon>
+          </div>
+          <div class="update-heading">${name} ${object.version_latest}</div>
           <div class="warning">
-            You are currently running version ${curVersion}
+            You are currently running version ${object.version}
           </div>
         </div>
         <div class="card-actions">
           <a href="${releaseNotesUrl}" target="_blank" rel="noreferrer">
             <mwc-button>Release notes</mwc-button>
           </a>
-          <ha-call-api-button
-            .hass=${this.hass}
-            .path=${apiPath}
-            @hass-api-called=${this._apiCalled}
+          <ha-progress-button
+            .apiPath=${apiPath}
+            .name=${name}
+            .version=${object.version_latest}
+            @click=${this._confirmUpdate}
           >
             Update
-          </ha-call-api-button>
+          </ha-progress-button>
         </div>
       </ha-card>
     `;
   }
 
-  private _apiCalled(ev): void {
-    if (ev.detail.success) {
-      this._error = "";
+  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;
       return;
     }
-
-    const response = ev.detail.response;
-
-    if (typeof response.body === "object") {
-      this._error = response.body.message || "Unknown error";
-    } else {
-      this._error = response.body;
+    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),
+        });
+      }
     }
+    item.progress = false;
   }
 
   static get styles(): CSSResult[] {

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

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

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

@@ -0,0 +1,334 @@
+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;
+  }
+}

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

@@ -0,0 +1,22 @@
+import { fireEvent } from "../../../../src/common/dom/fire_event";
+import { NetworkInfo } from "../../../../src/data/hassio/network";
+import "./dialog-hassio-network";
+
+export interface HassioNetworkDialogParams {
+  network: NetworkInfo;
+  loadData: () => Promise<void>;
+}
+
+export const showNetworkDialog = (
+  element: HTMLElement,
+  dialogParams: HassioNetworkDialogParams
+): void => {
+  fireEvent(element, "show-dialog", {
+    dialogTag: "dialog-hassio-network",
+    dialogImport: () =>
+      import(
+        /* webpackChunkName: "dialog-hassio-network" */ "./dialog-hassio-network"
+      ),
+    dialogParams,
+  });
+};

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

@@ -0,0 +1,245 @@
+import "@material/mwc-button/mwc-button";
+import "@material/mwc-icon-button/mwc-icon-button";
+import "@material/mwc-list/mwc-list-item";
+import { mdiDelete } from "@mdi/js";
+import { PaperInputElement } from "@polymer/paper-input/paper-input";
+import {
+  css,
+  CSSResult,
+  customElement,
+  html,
+  internalProperty,
+  LitElement,
+  property,
+  TemplateResult,
+} from "lit-element";
+import "../../../../src/components/ha-circular-progress";
+import { createCloseHeading } from "../../../../src/components/ha-dialog";
+import "../../../../src/components/ha-svg-icon";
+import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
+import {
+  addHassioDockerRegistry,
+  fetchHassioDockerRegistries,
+  removeHassioDockerRegistry,
+} from "../../../../src/data/hassio/docker";
+import { showAlertDialog } from "../../../../src/dialogs/generic/show-dialog-box";
+import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
+import type { HomeAssistant } from "../../../../src/types";
+
+@customElement("dialog-hassio-registries")
+class HassioRegistriesDialog extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) private _registries?: {
+    registry: string;
+    username: string;
+  }[];
+
+  @internalProperty() private _registry?: string;
+
+  @internalProperty() private _username?: string;
+
+  @internalProperty() private _password?: string;
+
+  @internalProperty() private _opened = false;
+
+  @internalProperty() private _addingRegistry = false;
+
+  protected render(): TemplateResult {
+    return html`
+      <ha-dialog
+        .open=${this._opened}
+        @closing=${this.closeDialog}
+        scrimClickAction
+        escapeKeyAction
+        .heading=${createCloseHeading(
+          this.hass,
+          this._addingRegistry
+            ? "Add New Docker Registry"
+            : "Manage Docker Registries"
+        )}
+      >
+        <div class="form">
+          ${this._addingRegistry
+            ? html`
+                <paper-input
+                  @value-changed=${this._inputChanged}
+                  class="flex-auto"
+                  name="registry"
+                  label="Registry"
+                  required
+                  auto-validate
+                ></paper-input>
+                <paper-input
+                  @value-changed=${this._inputChanged}
+                  class="flex-auto"
+                  name="username"
+                  label="Username"
+                  required
+                  auto-validate
+                ></paper-input>
+                <paper-input
+                  @value-changed=${this._inputChanged}
+                  class="flex-auto"
+                  name="password"
+                  label="Password"
+                  type="password"
+                  required
+                  auto-validate
+                ></paper-input>
+
+                <mwc-button
+                  ?disabled=${Boolean(
+                    !this._registry || !this._username || !this._password
+                  )}
+                  @click=${this._addNewRegistry}
+                >
+                  Add registry
+                </mwc-button>
+              `
+            : html`${this._registries?.length
+                  ? this._registries.map((entry) => {
+                      return html`
+                        <mwc-list-item class="option" hasMeta twoline>
+                          <span>${entry.registry}</span>
+                          <span slot="secondary"
+                            >Username: ${entry.username}</span
+                          >
+                          <mwc-icon-button
+                            .entry=${entry}
+                            title="Remove"
+                            slot="meta"
+                            @click=${this._removeRegistry}
+                          >
+                            <ha-svg-icon .path=${mdiDelete}></ha-svg-icon>
+                          </mwc-icon-button>
+                        </mwc-list-item>
+                      `;
+                    })
+                  : html`
+                      <mwc-list-item>
+                        <span>No registries configured</span>
+                      </mwc-list-item>
+                    `}
+                <mwc-button @click=${this._addRegistry}>
+                  Add new registry
+                </mwc-button> `}
+        </div>
+      </ha-dialog>
+    `;
+  }
+
+  private _inputChanged(ev: Event) {
+    const target = ev.currentTarget as PaperInputElement;
+    this[`_${target.name}`] = target.value;
+  }
+
+  public async showDialog(_dialogParams: any): Promise<void> {
+    this._opened = true;
+    await this._loadRegistries();
+    await this.updateComplete;
+  }
+
+  public closeDialog(): void {
+    this._addingRegistry = false;
+    this._opened = false;
+  }
+
+  public focus(): void {
+    this.updateComplete.then(() =>
+      (this.shadowRoot?.querySelector(
+        "[dialogInitialFocus]"
+      ) as HTMLElement)?.focus()
+    );
+  }
+
+  private async _loadRegistries(): Promise<void> {
+    const registries = await fetchHassioDockerRegistries(this.hass);
+    this._registries = Object.keys(registries!.registries).map((key) => ({
+      registry: key,
+      username: registries.registries[key].username,
+    }));
+  }
+
+  private _addRegistry(): void {
+    this._addingRegistry = true;
+  }
+
+  private async _addNewRegistry(): Promise<void> {
+    const data = {};
+    data[this._registry!] = {
+      username: this._username,
+      password: this._password,
+    };
+
+    try {
+      await addHassioDockerRegistry(this.hass, data);
+      await this._loadRegistries();
+      this._addingRegistry = false;
+    } catch (err) {
+      showAlertDialog(this, {
+        title: "Failed to add registry",
+        text: extractApiErrorMessage(err),
+      });
+    }
+  }
+
+  private async _removeRegistry(ev: Event): Promise<void> {
+    const entry = (ev.currentTarget as any).entry;
+
+    try {
+      await removeHassioDockerRegistry(this.hass, entry.registry);
+      await this._loadRegistries();
+    } catch (err) {
+      showAlertDialog(this, {
+        title: "Failed to remove registry",
+        text: extractApiErrorMessage(err),
+      });
+    }
+  }
+
+  static get styles(): CSSResult[] {
+    return [
+      haStyle,
+      haStyleDialog,
+      css`
+        ha-dialog.button-left {
+          --justify-action-buttons: flex-start;
+        }
+        paper-icon-item {
+          cursor: pointer;
+        }
+        .form {
+          color: var(--primary-text-color);
+        }
+        .option {
+          border: 1px solid var(--divider-color);
+          border-radius: 4px;
+          margin-top: 4px;
+        }
+        mwc-button {
+          margin-left: 8px;
+        }
+        mwc-icon-button {
+          color: var(--error-color);
+          margin: -10px;
+        }
+        mwc-list-item {
+          cursor: default;
+        }
+        mwc-list-item span[slot="secondary"] {
+          color: var(--secondary-text-color);
+        }
+        ha-paper-dropdown-menu {
+          display: block;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "dialog-hassio-registries": HassioRegistriesDialog;
+  }
+}

hassio/src/dialogs/registries/show-dialog-registries.ts

@@ -0,0 +1,13 @@
+import { fireEvent } from "../../../../src/common/dom/fire_event";
+import "./dialog-hassio-registries";
+
+export const showRegistriesDialog = (element: HTMLElement): void => {
+  fireEvent(element, "show-dialog", {
+    dialogTag: "dialog-hassio-registries",
+    dialogImport: () =>
+      import(
+        /* webpackChunkName: "dialog-hassio-registries" */ "./dialog-hassio-registries"
+      ),
+    dialogParams: {},
+  });
+};

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

@@ -5,25 +5,26 @@ import "@polymer/paper-input/paper-input";
 import type { PaperInputElement } from "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
-import "../../../../src/components/ha-circular-progress";
 import {
   css,
   CSSResult,
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
-  internalProperty,
   query,
   TemplateResult,
 } from "lit-element";
 import memoizeOne from "memoize-one";
+import "../../../../src/components/ha-circular-progress";
 import "../../../../src/components/ha-dialog";
 import "../../../../src/components/ha-svg-icon";
 import {
   fetchHassioAddonsInfo,
   HassioAddonRepository,
 } from "../../../../src/data/hassio/addon";
+import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
 import { setSupervisorOption } from "../../../../src/data/hassio/supervisor";
 import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
 import type { HomeAssistant } from "../../../../src/types";
@@ -38,7 +39,7 @@ class HassioRepositoriesDialog extends LitElement {
   @property({ attribute: false })
   private _dialogParams?: HassioRepositoryDialogParams;
 
-  @query("#repository_input") private _optionInput?: PaperInputElement;
+  @query("#repository_input", true) private _optionInput?: PaperInputElement;
 
   @internalProperty() private _opened = false;
 
@@ -90,7 +91,7 @@ class HassioRepositoriesDialog extends LitElement {
                       title="Remove"
                       @click=${this._removeRepository}
                     >
-                      <ha-svg-icon path=${mdiDelete}></ha-svg-icon>
+                      <ha-svg-icon .path=${mdiDelete}></ha-svg-icon>
                     </mwc-icon-button>
                   </paper-item>
                 `;
@@ -190,7 +191,7 @@ class HassioRepositoriesDialog extends LitElement {
 
       input.value = "";
     } catch (err) {
-      this._error = err.message;
+      this._error = extractApiErrorMessage(err);
     }
     this._prosessing = false;
   }
@@ -222,7 +223,7 @@ class HassioRepositoriesDialog extends LitElement {
 
       await this._dialogParams!.loadData();
     } catch (err) {
-      this._error = err.message;
+      this._error = extractApiErrorMessage(err);
     }
   }
 }

hassio/src/dialogs/snapshot/dialog-hassio-snapshot-upload.ts

@@ -0,0 +1,107 @@
+import { mdiClose } from "@mdi/js";
+import {
+  css,
+  CSSResult,
+  customElement,
+  html,
+  internalProperty,
+  LitElement,
+  property,
+  TemplateResult,
+} from "lit-element";
+import { fireEvent } from "../../../../src/common/dom/fire_event";
+import "../../../../src/components/ha-header-bar";
+import { HassDialog } from "../../../../src/dialogs/make-dialog-manager";
+import { haStyleDialog } from "../../../../src/resources/styles";
+import type { HomeAssistant } from "../../../../src/types";
+import "../../components/hassio-upload-snapshot";
+import { HassioSnapshotUploadDialogParams } from "./show-dialog-snapshot-upload";
+
+@customElement("dialog-hassio-snapshot-upload")
+export class DialogHassioSnapshotUpload extends LitElement
+  implements HassDialog<HassioSnapshotUploadDialogParams> {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @internalProperty() private _params?: HassioSnapshotUploadDialogParams;
+
+  public async showDialog(
+    params: HassioSnapshotUploadDialogParams
+  ): Promise<void> {
+    this._params = params;
+    await this.updateComplete;
+  }
+
+  public closeDialog(): void {
+    if (this._params && !this._params.onboarding) {
+      if (this._params.reloadSnapshot) {
+        this._params.reloadSnapshot();
+      }
+    }
+    this._params = undefined;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
+  }
+
+  protected render(): TemplateResult {
+    if (!this._params) {
+      return html``;
+    }
+
+    return html`
+      <ha-dialog
+        open
+        scrimClickAction
+        escapeKeyAction
+        hideActions
+        .heading=${true}
+        @closed=${this.closeDialog}
+      >
+        <div slot="heading">
+          <ha-header-bar>
+            <span slot="title">
+              Upload snapshot
+            </span>
+            <mwc-icon-button slot="actionItems" dialogAction="cancel">
+              <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
+            </mwc-icon-button>
+          </ha-header-bar>
+        </div>
+        <hassio-upload-snapshot
+          @snapshot-uploaded=${this._snapshotUploaded}
+          .hass=${this.hass}
+        ></hassio-upload-snapshot>
+      </ha-dialog>
+    `;
+  }
+
+  private _snapshotUploaded(ev) {
+    const snapshot = ev.detail.snapshot;
+    this._params?.showSnapshot(snapshot.slug);
+    this.closeDialog();
+  }
+
+  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;
+        }
+        /* 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);
+          }
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "dialog-hassio-snapshot-upload": DialogHassioSnapshotUpload;
+  }
+}

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

@@ -1,26 +1,30 @@
 import "@material/mwc-button";
-import { mdiDelete, mdiDownload, mdiHistory } from "@mdi/js";
-import { PaperCheckboxElement } from "@polymer/paper-checkbox/paper-checkbox";
+import { mdiClose, mdiDelete, mdiDownload, mdiHistory } from "@mdi/js";
+import "@polymer/paper-checkbox/paper-checkbox";
+import type { PaperCheckboxElement } from "@polymer/paper-checkbox/paper-checkbox";
 import "@polymer/paper-input/paper-input";
 import {
   css,
   CSSResult,
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
-  internalProperty,
   TemplateResult,
 } from "lit-element";
-import { createCloseHeading } from "../../../../src/components/ha-dialog";
+import { fireEvent } from "../../../../src/common/dom/fire_event";
+import "../../../../src/components/ha-header-bar";
 import "../../../../src/components/ha-svg-icon";
 import { getSignedPath } from "../../../../src/data/auth";
+import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
 import {
   fetchHassioSnapshotInfo,
   HassioSnapshotDetail,
 } from "../../../../src/data/hassio/snapshot";
+import { showConfirmationDialog } from "../../../../src/dialogs/generic/show-dialog-box";
 import { PolymerChangedEvent } from "../../../../src/polymer-types";
-import { haStyleDialog } from "../../../../src/resources/styles";
+import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
 import { HassioSnapshotDialogParams } from "./show-dialog-hassio-snapshot";
 
@@ -73,6 +77,8 @@ class HassioSnapshotDialog extends LitElement {
 
   @internalProperty() private _error?: string;
 
+  @internalProperty() private _onboarding = false;
+
   @internalProperty() private _snapshot?: HassioSnapshotDetail;
 
   @internalProperty() private _folders!: FolderItem[];
@@ -88,13 +94,14 @@ class HassioSnapshotDialog extends LitElement {
   public async showDialog(params: HassioSnapshotDialogParams) {
     this._snapshot = await fetchHassioSnapshotInfo(this.hass, params.slug);
     this._folders = _computeFolders(
-      this._snapshot.folders
+      this._snapshot?.folders
     ).sort((a: FolderItem, b: FolderItem) => (a.name > b.name ? 1 : -1));
     this._addons = _computeAddons(
-      this._snapshot.addons
+      this._snapshot?.addons
     ).sort((a: AddonItem, b: AddonItem) => (a.name > b.name ? 1 : -1));
 
     this._dialogParams = params;
+    this._onboarding = params.onboarding ?? false;
   }
 
   protected render(): TemplateResult {
@@ -102,12 +109,17 @@ class HassioSnapshotDialog extends LitElement {
       return html``;
     }
     return html`
-      <ha-dialog
-        open
-        stacked
-        @closing=${this._closeDialog}
-        .heading=${createCloseHeading(this.hass, this._computeName)}
-      >
+      <ha-dialog open stacked @closing=${this._closeDialog} .heading=${true}>
+        <div slot="heading">
+          <ha-header-bar>
+            <span slot="title">
+              ${this._computeName}
+            </span>
+            <mwc-icon-button slot="actionItems" dialogAction="cancel">
+              <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
+            </mwc-icon-button>
+          </ha-header-bar>
+        </div>
         <div class="details">
           ${this._snapshot.type === "full"
             ? "Full snapshot"
@@ -180,17 +192,21 @@ class HassioSnapshotDialog extends LitElement {
         ${this._error ? html` <p class="error">Error: ${this._error}</p> ` : ""}
 
         <div>Actions:</div>
-
-        <mwc-button @click=${this._downloadClicked} slot="primaryAction">
-          <ha-svg-icon path=${mdiDownload} class="icon"></ha-svg-icon>
-          Download Snapshot
-        </mwc-button>
+        ${!this._onboarding
+          ? html`<mwc-button
+              @click=${this._downloadClicked}
+              slot="primaryAction"
+            >
+              <ha-svg-icon .path=${mdiDownload} class="icon"></ha-svg-icon>
+              Download Snapshot
+            </mwc-button>`
+          : ""}
 
         <mwc-button
           @click=${this._partialRestoreClicked}
           slot="secondaryAction"
         >
-          <ha-svg-icon path=${mdiHistory} class="icon"></ha-svg-icon>
+          <ha-svg-icon .path=${mdiHistory} class="icon"></ha-svg-icon>
           Restore Selected
         </mwc-button>
         ${this._snapshot.type === "full"
@@ -199,21 +215,30 @@ class HassioSnapshotDialog extends LitElement {
                 @click=${this._fullRestoreClicked}
                 slot="secondaryAction"
               >
-                <ha-svg-icon path=${mdiHistory} class="icon"></ha-svg-icon>
+                <ha-svg-icon .path=${mdiHistory} class="icon"></ha-svg-icon>
                 Wipe &amp; restore
               </mwc-button>
             `
           : ""}
-        <mwc-button @click=${this._deleteClicked} slot="secondaryAction">
-          <ha-svg-icon path=${mdiDelete} class="icon warning"></ha-svg-icon>
-          <span class="warning">Delete Snapshot</span>
-        </mwc-button>
+        ${!this._onboarding
+          ? html`<mwc-button
+              @click=${this._deleteClicked}
+              slot="secondaryAction"
+            >
+              <ha-svg-icon
+                .path=${mdiDelete}
+                class="icon warning"
+              ></ha-svg-icon>
+              <span class="warning">Delete Snapshot</span>
+            </mwc-button>`
+          : ""}
       </ha-dialog>
     `;
   }
 
   static get styles(): CSSResult[] {
     return [
+      haStyle,
       haStyleDialog,
       css`
         paper-checkbox {
@@ -240,6 +265,18 @@ class HassioSnapshotDialog extends LitElement {
         .no-margin-top {
           margin-top: 0;
         }
+        ha-header-bar {
+          --mdc-theme-on-primary: var(--primary-text-color);
+          --mdc-theme-primary: var(--mdc-theme-surface);
+          flex-shrink: 0;
+        }
+        /* 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);
+          }
+        }
       `,
     ];
   }
@@ -266,8 +303,14 @@ class HassioSnapshotDialog extends LitElement {
     this._snapshotPassword = ev.detail.value;
   }
 
-  private _partialRestoreClicked() {
-    if (!confirm("Are you sure you want to restore this snapshot?")) {
+  private async _partialRestoreClicked() {
+    if (
+      !(await showConfirmationDialog(this, {
+        title: "Are you sure you want partially to restore this snapshot?",
+        confirmText: "restore",
+        dismissText: "cancel",
+      }))
+    ) {
       return;
     }
 
@@ -294,52 +337,82 @@ class HassioSnapshotDialog extends LitElement {
       data.password = this._snapshotPassword;
     }
 
-    this.hass
-      .callApi(
-        "POST",
+    if (!this._onboarding) {
+      this.hass
+        .callApi(
+          "POST",
 
-        `hassio/snapshots/${this._snapshot!.slug}/restore/partial`,
-        data
-      )
-      .then(
-        () => {
-          alert("Snapshot restored!");
-          this._closeDialog();
-        },
-        (error) => {
-          this._error = error.body.message;
-        }
-      );
+          `hassio/snapshots/${this._snapshot!.slug}/restore/partial`,
+          data
+        )
+        .then(
+          () => {
+            alert("Snapshot restored!");
+            this._closeDialog();
+          },
+          (error) => {
+            this._error = error.body.message;
+          }
+        );
+    } else {
+      fireEvent(this, "restoring");
+      fetch(`/api/hassio/snapshots/${this._snapshot!.slug}/restore/partial`, {
+        method: "POST",
+        body: JSON.stringify(data),
+      });
+      this._closeDialog();
+    }
   }
 
-  private _fullRestoreClicked() {
-    if (!confirm("Are you sure you want to restore this snapshot?")) {
+  private async _fullRestoreClicked() {
+    if (
+      !(await showConfirmationDialog(this, {
+        title:
+          "Are you sure you want to wipe your system and restore this snapshot?",
+        confirmText: "restore",
+        dismissText: "cancel",
+      }))
+    ) {
       return;
     }
 
     const data = this._snapshot!.protected
       ? { password: this._snapshotPassword }
       : undefined;
-
-    this.hass
-      .callApi(
-        "POST",
-        `hassio/snapshots/${this._snapshot!.slug}/restore/full`,
-        data
-      )
-      .then(
-        () => {
-          alert("Snapshot restored!");
-          this._closeDialog();
-        },
-        (error) => {
-          this._error = error.body.message;
-        }
-      );
+    if (!this._onboarding) {
+      this.hass
+        .callApi(
+          "POST",
+          `hassio/snapshots/${this._snapshot!.slug}/restore/full`,
+          data
+        )
+        .then(
+          () => {
+            alert("Snapshot restored!");
+            this._closeDialog();
+          },
+          (error) => {
+            this._error = error.body.message;
+          }
+        );
+    } else {
+      fireEvent(this, "restoring");
+      fetch(`/api/hassio/snapshots/${this._snapshot!.slug}/restore/full`, {
+        method: "POST",
+        body: JSON.stringify(data),
+      });
+      this._closeDialog();
+    }
   }
 
-  private _deleteClicked() {
-    if (!confirm("Are you sure you want to delete this snapshot?")) {
+  private async _deleteClicked() {
+    if (
+      !(await showConfirmationDialog(this, {
+        title: "Are you sure you want to delete this snapshot?",
+        confirmText: "delete",
+        dismissText: "cancel",
+      }))
+    ) {
       return;
     }
 
@@ -348,7 +421,9 @@ class HassioSnapshotDialog extends LitElement {
       .callApi("POST", `hassio/snapshots/${this._snapshot!.slug}/remove`)
       .then(
         () => {
-          this._dialogParams!.onDelete();
+          if (this._dialogParams!.onDelete) {
+            this._dialogParams!.onDelete();
+          }
           this._closeDialog();
         },
         (error) => {
@@ -365,10 +440,23 @@ class HassioSnapshotDialog extends LitElement {
         `/api/hassio/snapshots/${this._snapshot!.slug}/download`
       );
     } catch (err) {
-      alert(`Error: ${err.message}`);
+      alert(`Error: ${extractApiErrorMessage(err)}`);
       return;
     }
 
+    if (window.location.href.includes("ui.nabu.casa")) {
+      const confirm = await showConfirmationDialog(this, {
+        title: "Potential slow download",
+        text:
+          "Downloading snapshots over the Nabu Casa URL will take some time, it is recomended to use your local URL instead, do you want to continue?",
+        confirmText: "continue",
+        dismissText: "cancel",
+      });
+      if (!confirm) {
+        return;
+      }
+    }
+
     const name = this._computeName.replace(/[^a-z0-9]+/gi, "_");
     const a = document.createElement("a");
     a.href = signedPath.path;

hassio/src/dialogs/snapshot/show-dialog-hassio-snapshot.ts

@@ -2,7 +2,8 @@ import { fireEvent } from "../../../../src/common/dom/fire_event";
 
 export interface HassioSnapshotDialogParams {
   slug: string;
-  onDelete: () => void;
+  onDelete?: () => void;
+  onboarding?: boolean;
 }
 
 export const showHassioSnapshotDialog = (

hassio/src/dialogs/snapshot/show-dialog-snapshot-upload.ts

@@ -0,0 +1,22 @@
+import { fireEvent } from "../../../../src/common/dom/fire_event";
+import "./dialog-hassio-snapshot-upload";
+
+export interface HassioSnapshotUploadDialogParams {
+  showSnapshot: (slug: string) => void;
+  reloadSnapshot?: () => Promise<void>;
+  onboarding?: boolean;
+}
+
+export const showSnapshotUploadDialog = (
+  element: HTMLElement,
+  dialogParams: HassioSnapshotUploadDialogParams
+): void => {
+  fireEvent(element, "show-dialog", {
+    dialogTag: "dialog-hassio-snapshot-upload",
+    dialogImport: () =>
+      import(
+        /* webpackChunkName: "dialog-hassio-snapshot-upload" */ "./dialog-hassio-snapshot-upload"
+      ),
+    dialogParams,
+  });
+};