Add back path to protocol config pages

* proper functionnames

* refactor _applyFilters on scenes and script page

* Apply suggestions from code review

---------

Co-authored-by: Petar Petrov <[email protected]>

.devcontainer/Dockerfile

@@ -1,4 +1,4 @@
-FROM mcr.microsoft.com/devcontainers/python:1-3.13
+FROM mcr.microsoft.com/devcontainers/python:1-3.14
 
 ENV \
   DEBIAN_FRONTEND=noninteractive \

.github/ISSUE_TEMPLATE.md

@@ -67,7 +67,7 @@ DO NOT DELETE ANY TEXT from this template! Otherwise, your issue may be closed w
 <!--
   If your issue is about how an entity is shown in the UI, please add the state
   and attributes for all situations with a screenshot of the UI.
-  You can find this information at `/developer-tools/state`
+  You can find this information at `/config/developer-tools/state`
 -->
 
 ```yaml

.github/copilot-instructions.md

@@ -22,11 +22,13 @@ You are an assistant helping with development of the Home Assistant frontend. Th
 ```bash
 yarn lint          # ESLint + Prettier + TypeScript + Lit
 yarn format        # Auto-fix ESLint + Prettier
-yarn lint:types    # TypeScript compiler
+yarn lint:types    # TypeScript compiler (run WITHOUT file arguments)
 yarn test          # Vitest
 script/develop     # Development server
 ```
 
+> **WARNING:** Never run `tsc` or `yarn lint:types` with file arguments (e.g., `yarn lint:types src/file.ts`). When `tsc` receives file arguments, it ignores `tsconfig.json` and emits `.js` files into `src/`, polluting the codebase. Always run `yarn lint:types` without arguments. For individual file type checking, rely on IDE diagnostics. If `.js` files are accidentally generated, clean up with `git clean -fd src/`.
+
 ### Component Prefixes
 
 - `ha-` - Home Assistant components
@@ -154,7 +156,7 @@ try {
 
 - **Use CSS custom properties**: Leverage the theme system
 - **Use spacing tokens**: Prefer `--ha-space-*` tokens over hardcoded values for consistent spacing
-  - Spacing scale: `--ha-space-0` (0px) through `--ha-space-20` (80px) in 4px increments
+  - Spacing scale: `--ha-space-1` (4px) through `--ha-space-20` (80px) in 4px increments
   - Defined in `src/resources/theme/core.globals.ts`
   - Common values: `--ha-space-2` (8px), `--ha-space-4` (16px), `--ha-space-8` (32px)
 - **Mobile-first responsive**: Design for mobile, enhance for desktop
@@ -619,7 +621,6 @@ this.hass.localize("ui.panel.config.updates.update_available", {
 
 #### Key Terminology
 
-- **"add-on"** (hyphenated, not "addon")
 - **"integration"** (preferred over "component")
 - **Technical terms**: Use lowercase (automation, entity, device, service)
 
@@ -711,7 +712,7 @@ this.hass.localize("ui.panel.config.automation.delete_confirm", {
 - [ ] American English spelling
 - [ ] Friendly, informational tone
 - [ ] Avoids abbreviations and jargon
-- [ ] Correct terminology (add-on not addon, integration not component)
+- [ ] Correct terminology (integration not component)
 
 ### Component-Specific Checks
 

.github/labeler.yml

@@ -44,8 +44,3 @@ GitHub Actions:
       - any-glob-to-any-file:
           - .github/workflows/**
           - .github/*.yml
-
-Supervisor:
-  - changed-files:
-      - any-glob-to-any-file:
-          - hassio/src/**

.github/workflows/cast_deployment.yaml

@@ -21,12 +21,12 @@ jobs:
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           ref: dev
 
       - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -56,12 +56,12 @@ jobs:
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           ref: master
 
       - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.github/workflows/ci.yaml

@@ -24,9 +24,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
       - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -37,7 +37,7 @@ jobs:
       - name: Build resources
         run: ./node_modules/.bin/gulp gen-icons-json build-translations build-locale-data gather-gallery-pages
       - name: Setup lint cache
-        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
+        uses: actions/cache@cdf6c1fa76f9f475f3d7449005a359c84ca0f306 # v5.0.3
         with:
           path: |
             node_modules/.cache/prettier
@@ -58,9 +58,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
       - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -76,9 +76,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
       - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -89,32 +89,15 @@ jobs:
         env:
           IS_TEST: "true"
       - name: Upload bundle stats
-        uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5.0.0
+        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
         with:
           name: frontend-bundle-stats
           path: build/stats/*.json
           if-no-files-found: error
-  supervisor:
-    name: Build supervisor
-    needs: [lint, test]
-    runs-on: ubuntu-latest
-    steps:
-      - name: Check out files from GitHub
-        uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
-      - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+      - name: Upload frontend build
+        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
         with:
-          node-version-file: ".nvmrc"
-          cache: yarn
-      - name: Install dependencies
-        run: yarn install --immutable
-      - name: Build Application
-        run: ./node_modules/.bin/gulp build-hassio
-        env:
-          IS_TEST: "true"
-      - name: Upload bundle stats
-        uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5.0.0
-        with:
-          name: supervisor-bundle-stats
-          path: build/stats/*.json
+          name: frontend-build
+          path: hass_frontend/
           if-no-files-found: error
+          retention-days: 7

.github/workflows/codeql-analysis.yml

@@ -23,7 +23,7 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           # We must fetch at least the immediate parents so that if this is
           # a pull request then we can checkout the head.
@@ -36,14 +36,14 @@ jobs:
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@e12f0178983d466f2f6028f5cc7a6d786fd97f4b # v4.31.4
+        uses: github/codeql-action/init@b20883b0cd1f46c72ae0ba6d1090936928f9fa30 # v4.32.0
         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@e12f0178983d466f2f6028f5cc7a6d786fd97f4b # v4.31.4
+        uses: github/codeql-action/autobuild@b20883b0cd1f46c72ae0ba6d1090936928f9fa30 # v4.32.0
 
       # ℹ️ Command-line programs to run using the OS shell.
       # 📚 https://git.io/JvXDl
@@ -57,4 +57,4 @@ jobs:
       #   make release
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@e12f0178983d466f2f6028f5cc7a6d786fd97f4b # v4.31.4
+        uses: github/codeql-action/analyze@b20883b0cd1f46c72ae0ba6d1090936928f9fa30 # v4.32.0

.github/workflows/demo_deployment.yaml

@@ -22,12 +22,12 @@ jobs:
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           ref: dev
 
       - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -57,12 +57,12 @@ jobs:
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           ref: master
 
       - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.github/workflows/design_deployment.yaml

@@ -16,10 +16,10 @@ jobs:
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
 
       - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.github/workflows/design_preview.yaml

@@ -21,10 +21,10 @@ jobs:
     if: github.repository == 'home-assistant/frontend' && contains(github.event.pull_request.labels.*.name, 'needs design preview')
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
 
       - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.github/workflows/lock.yml

@@ -9,7 +9,7 @@ jobs:
   lock:
     runs-on: ubuntu-latest
     steps:
-      - uses: dessant/lock-threads@1bf7ec25051fe7c00bdd17e6a7cf3d7bfb7dc771 # v5.0.1
+      - uses: dessant/lock-threads@7266a7ce5c1df01b1c6db85bf8cd86c737dadbe7 # v6.0.0
         with:
           github-token: ${{ github.token }}
           process-only: "issues, prs"

.github/workflows/nightly.yaml

@@ -6,7 +6,7 @@ on:
     - cron: "0 1 * * *"
 
 env:
-  PYTHON_VERSION: "3.13"
+  PYTHON_VERSION: "3.14"
   NODE_OPTIONS: --max_old_space_size=6144
 
 permissions:
@@ -20,15 +20,15 @@ jobs:
       contents: write
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
 
       - name: Set up Python ${{ env.PYTHON_VERSION }}
-        uses: actions/setup-python@e797f83bcb11b83ae66e0230d6156d7c80228e7c # v6
+        uses: actions/setup-python@a309ff8b426b58ec0e2a45f0f869d46889d02405 # v6
         with:
           python-version: ${{ env.PYTHON_VERSION }}
 
       - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -57,14 +57,14 @@ jobs:
         run: tar -czvf translations.tar.gz translations
 
       - name: Upload build artifacts
-        uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5.0.0
+        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
         with:
           name: wheels
           path: dist/home_assistant_frontend*.whl
           if-no-files-found: error
 
       - name: Upload translations
-        uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5.0.0
+        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
         with:
           name: translations
           path: translations.tar.gz

.github/workflows/relative-ci.yaml

@@ -12,12 +12,12 @@ jobs:
     if: ${{ github.event.workflow_run.conclusion == 'success' }}
     strategy:
       matrix:
-        bundle: [frontend, supervisor]
+        bundle: [frontend]
         build: [modern, legacy]
     runs-on: ubuntu-latest
     steps:
       - name: Send bundle stats and build information to RelativeCI
-        uses: relative-ci/agent-action@feb19ddc698445db27401f1490f6ac182da0816f # v3.2.0
+        uses: relative-ci/agent-action@3c681926017930047fc03acaa35cd6a44efcbfc3 # v3.2.2
         with:
           key: ${{ secrets[format('RELATIVE_CI_KEY_{0}_{1}', matrix.bundle, matrix.build)] }}
           token: ${{ github.token }}

.github/workflows/release-drafter.yaml

@@ -18,6 +18,6 @@ jobs:
       pull-requests: read
     runs-on: ubuntu-latest
     steps:
-      - uses: release-drafter/release-drafter@b1476f6e6eb133afa41ed8589daba6dc69b4d3f5 # v6.1.0
+      - uses: release-drafter/release-drafter@6db134d15f3909ccc9eefd369f02bd1e9cffdf97 # v6.2.0
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/release.yaml

@@ -6,7 +6,7 @@ on:
       - published
 
 env:
-  PYTHON_VERSION: "3.13"
+  PYTHON_VERSION: "3.14"
   NODE_OPTIONS: --max_old_space_size=6144
 
 # Set default workflow permissions
@@ -19,14 +19,17 @@ jobs:
   release:
     name: Release
     runs-on: ubuntu-latest
+    environment: pypi
     permissions:
       contents: write # Required to upload release assets
+      id-token: write # For "Trusted Publisher" to PyPi
+    if: github.repository_owner == 'home-assistant'
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
 
       - name: Set up Python ${{ env.PYTHON_VERSION }}
-        uses: actions/setup-python@e797f83bcb11b83ae66e0230d6156d7c80228e7c # v6.0.0
+        uses: actions/setup-python@a309ff8b426b58ec0e2a45f0f869d46889d02405 # v6.2.0
         with:
           python-version: ${{ env.PYTHON_VERSION }}
 
@@ -34,7 +37,7 @@ jobs:
         uses: home-assistant/actions/helpers/verify-version@master
 
       - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -46,16 +49,20 @@ jobs:
         run: ./script/translations_download
         env:
           LOKALISE_TOKEN: ${{ secrets.LOKALISE_TOKEN }}
+
       - name: Build and release package
         run: |
-          python3 -m pip install twine build
-          export TWINE_USERNAME="__token__"
-          export TWINE_PASSWORD="${{ secrets.TWINE_TOKEN }}"
+          python3 -m pip install build
           export SKIP_FETCH_NIGHTLY_TRANSLATIONS=1
           script/release
 
+      - name: Publish to PyPI
+        uses: pypa/gh-action-pypi-publish@ed0c53931b1dc9bd32cbe73a98c7f6766f8a527e # v1.13.0
+        with:
+          skip-existing: true
+
       - name: Upload release assets
-        uses: softprops/action-gh-release@5be0e66d93ac7ed76da52eca8bb058f665c3a5fe # v2.4.2
+        uses: softprops/action-gh-release@a06a81a03ee405af7f2048a818ed3f03bbf83c7b # v2.5.0
         with:
           files: |
             dist/*.whl
@@ -75,9 +82,9 @@ jobs:
 
       # home-assistant/wheels doesn't support SHA pinning
       - name: Build wheels
-        uses: home-assistant/[email protected]0.0
+        uses: home-assistant/[email protected]2.0
         with:
-          abi: cp313
+          abi: cp314
           tag: musllinux_1_2
           arch: amd64
           wheels-key: ${{ secrets.WHEELS_KEY }}
@@ -91,9 +98,9 @@ jobs:
       contents: write # Required to upload release assets
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
       - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -108,35 +115,6 @@ jobs:
       - name: Tar folder
         run: tar -czf landing-page/home_assistant_frontend_landingpage-${{ github.event.release.tag_name }}.tar.gz -C landing-page/dist .
       - name: Upload release asset
-        uses: softprops/action-gh-release@5be0e66d93ac7ed76da52eca8bb058f665c3a5fe # v2.4.2
+        uses: softprops/action-gh-release@a06a81a03ee405af7f2048a818ed3f03bbf83c7b # v2.5.0
         with:
           files: landing-page/home_assistant_frontend_landingpage-${{ github.event.release.tag_name }}.tar.gz
-
-  release-supervisor:
-    name: Release supervisor frontend
-    if: github.event.release.prerelease == false
-    runs-on: ubuntu-latest
-    permissions:
-      contents: write # Required to upload release assets
-    steps:
-      - name: Checkout the repository
-        uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
-      - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
-        with:
-          node-version-file: ".nvmrc"
-          cache: yarn
-      - name: Install dependencies
-        run: yarn install
-      - name: Download Translations
-        run: ./script/translations_download
-        env:
-          LOKALISE_TOKEN: ${{ secrets.LOKALISE_TOKEN }}
-      - name: Build supervisor
-        run: hassio/script/build_hassio
-      - name: Tar folder
-        run: tar -czf hassio/home_assistant_frontend_supervisor-${{ github.event.release.tag_name }}.tar.gz -C hassio/build .
-      - name: Upload release asset
-        uses: softprops/action-gh-release@5be0e66d93ac7ed76da52eca8bb058f665c3a5fe # v2.4.2
-        with:
-          files: hassio/home_assistant_frontend_supervisor-${{ github.event.release.tag_name }}.tar.gz

.github/workflows/stale.yml

@@ -10,7 +10,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: 90 days stale policy
-        uses: actions/stale@5f858e3efba33a5ca4407a664cc011ad407f2008 # v10.1.0
+        uses: actions/stale@997185467fa4f803885201cee163a9f38240193d # v10.1.1
         with:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
           days-before-stale: 90

.github/workflows/translations.yaml

@@ -14,7 +14,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
 
       - name: Upload Translations
         run: |

.gitignore

@@ -15,7 +15,7 @@ dist/
 !.yarn/sdks
 !.yarn/versions
 .pnp.*
-/node_modules/
+node_modules/
 yarn-error.log
 npm-debug.log
 
@@ -56,4 +56,5 @@ test/coverage/
 
 # AI tooling
 .claude
+.cursor
 

.nvmrc

@@ -1 +1 @@
-22.21.1
+24.13.0

.vscode/tasks.json

@@ -73,37 +73,6 @@
         "instanceLimit": 1
       }
     },
-    {
-      "label": "Develop Supervisor panel",
-      "type": "gulp",
-      "task": "develop-hassio",
-      "problemMatcher": {
-        "owner": "ha-build",
-        "source": "ha-build",
-        "fileLocation": "absolute",
-        "severity": "error",
-        "pattern": [
-          {
-            "regexp": "(SyntaxError): (.+): (.+) \\((\\d+):(\\d+)\\)",
-            "severity": 1,
-            "file": 2,
-            "message": 3,
-            "line": 4,
-            "column": 5
-          }
-        ],
-        "background": {
-          "activeOnStart": true,
-          "beginsPattern": "Changes detected. Starting compilation",
-          "endsPattern": "Build done @"
-        }
-      },
-      "isBackground": true,
-      "group": "build",
-      "runOptions": {
-        "instanceLimit": 1
-      }
-    },
     {
       "label": "Develop Gallery",
       "type": "gulp",
@@ -246,20 +215,6 @@
         "instanceLimit": 1
       }
     },
-    {
-      "label": "Run HA Core for Supervisor in devcontainer",
-      "type": "shell",
-      "command": "SUPERVISOR=${input:supervisorHost} SUPERVISOR_TOKEN=${input:supervisorToken} script/core",
-      "isBackground": true,
-      "group": {
-        "kind": "build",
-        "isDefault": true
-      },
-      "problemMatcher": [],
-      "runOptions": {
-        "instanceLimit": 1
-      }
-    },
     {
       "label": "Setup and fetch nightly translations",
       "type": "gulp",
@@ -268,16 +223,6 @@
     }
   ],
   "inputs": [
-    {
-      "id": "supervisorHost",
-      "type": "promptString",
-      "description": "The IP of the Supervisor host running the Remote API proxy add-on"
-    },
-    {
-      "id": "supervisorToken",
-      "type": "promptString",
-      "description": "The token for the Remote API proxy add-on"
-    },
     {
       "id": "coreUrl",
       "type": "promptString",

.yarnrc.yml

@@ -1,9 +1,11 @@
 compressionLevel: mixed
 
+npmMinimalAgeGate: "3d"
+
 defaultSemverRangePrefix: ""
 
 enableGlobalCache: false
 
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.11.0.cjs
+yarnPath: .yarn/releases/yarn-4.12.0.cjs

README.md

@@ -14,7 +14,6 @@ This is the repository for the official [Home Assistant](https://home-assistant.
 - Development: [Instructions](https://developers.home-assistant.io/docs/frontend/development/)
 - Production build: `script/build_frontend`
 - Gallery: `cd gallery && script/develop_gallery`
-- Supervisor: [Instructions](https://developers.home-assistant.io/docs/supervisor/developing)
 
 ## Frontend development
 

build-scripts/bundle.cjs

@@ -18,16 +18,14 @@ module.exports.sourceMapURL = () => {
 module.exports.ignorePackages = () => [];
 
 // Files from NPM packages that we should replace with empty file
-module.exports.emptyPackages = ({ isHassioBuild, isLandingPageBuild }) =>
+module.exports.emptyPackages = ({ isLandingPageBuild }) =>
   [
-    require.resolve("@vaadin/vaadin-material-styles/typography.js"),
-    require.resolve("@vaadin/vaadin-material-styles/font-icons.js"),
-    // Icons in supervisor conflict with icons in HA so we don't load.
-    (isHassioBuild || isLandingPageBuild) &&
+    // Icons in landingpage conflict with icons in HA so we don't load.
+    isLandingPageBuild &&
       require.resolve(
         path.resolve(paths.root_dir, "src/components/ha-icon.ts")
       ),
-    (isHassioBuild || isLandingPageBuild) &&
+    isLandingPageBuild &&
       require.resolve(
         path.resolve(paths.root_dir, "src/components/ha-icon-picker.ts")
       ),
@@ -38,7 +36,6 @@ module.exports.definedVars = ({ isProdBuild, latestBuild, defineOverlay }) => ({
   __BUILD__: JSON.stringify(latestBuild ? "modern" : "legacy"),
   __VERSION__: JSON.stringify(env.version()),
   __DEMO__: false,
-  __SUPERVISOR__: false,
   __BACKWARDS_COMPAT__: false,
   __STATIC_PATH__: "/static/",
   __HASS_URL__: `\`${
@@ -291,26 +288,6 @@ module.exports.config = {
     };
   },
 
-  hassio({ isProdBuild, latestBuild, isStatsBuild, isTestBuild }) {
-    return {
-      name: "supervisor" + nameSuffix(latestBuild),
-      entry: {
-        entrypoint: path.resolve(paths.hassio_dir, "src/entrypoint.ts"),
-      },
-      outputPath: outputPath(paths.hassio_output_root, latestBuild),
-      publicPath: publicPath(latestBuild, paths.hassio_publicPath),
-      isProdBuild,
-      latestBuild,
-      isStatsBuild,
-      isTestBuild,
-      isHassioBuild: true,
-      defineOverlay: {
-        __SUPERVISOR__: true,
-        __STATIC_PATH__: `"${paths.hassio_publicPath}/static/"`,
-      },
-    };
-  },
-
   gallery({ isProdBuild, latestBuild }) {
     return {
       name: "gallery" + nameSuffix(latestBuild),

build-scripts/gulp/clean.js

@@ -24,10 +24,6 @@ gulp.task(
   )
 );
 
-gulp.task("clean-hassio", async () =>
-  deleteSync([paths.hassio_output_root, paths.build_dir])
-);
-
 gulp.task(
   "clean-gallery",
   gulp.parallel("clean-translations", async () =>

build-scripts/gulp/compress.js

@@ -43,29 +43,11 @@ const compressAppModernBrotli = () =>
 const compressAppModernZopfli = () =>
   compressModern(paths.app_output_root, paths.app_output_latest, "zopfli");
 
-const compressHassioModernBrotli = () =>
-  compressModern(
-    paths.hassio_output_root,
-    paths.hassio_output_latest,
-    "brotli"
-  );
-const compressHassioModernZopfli = () =>
-  compressModern(
-    paths.hassio_output_root,
-    paths.hassio_output_latest,
-    "zopfli"
-  );
-
 const compressAppOtherBrotli = () =>
   compressOther(paths.app_output_root, paths.app_output_latest, "brotli");
 const compressAppOtherZopfli = () =>
   compressOther(paths.app_output_root, paths.app_output_latest, "zopfli");
 
-const compressHassioOtherBrotli = () =>
-  compressOther(paths.hassio_output_root, paths.hassio_output_latest, "brotli");
-const compressHassioOtherZopfli = () =>
-  compressOther(paths.hassio_output_root, paths.hassio_output_latest, "zopfli");
-
 gulp.task(
   "compress-app",
   gulp.parallel(
@@ -75,12 +57,3 @@ gulp.task(
     compressAppOtherZopfli
   )
 );
-gulp.task(
-  "compress-hassio",
-  gulp.parallel(
-    compressHassioModernBrotli,
-    compressHassioOtherBrotli,
-    compressHassioModernZopfli,
-    compressHassioOtherZopfli
-  )
-);

build-scripts/gulp/entry-html.js

@@ -266,28 +266,3 @@ gulp.task(
     paths.landingPage_output_es5
   )
 );
-
-const HASSIO_PAGE_ENTRIES = { "entrypoint.js": ["entrypoint"] };
-
-gulp.task(
-  "gen-pages-hassio-dev",
-  genPagesDevTask(
-    HASSIO_PAGE_ENTRIES,
-    paths.hassio_dir,
-    paths.hassio_output_root,
-    "src",
-    paths.hassio_publicPath
-  )
-);
-
-gulp.task(
-  "gen-pages-hassio-prod",
-  genPagesProdTask(
-    HASSIO_PAGE_ENTRIES,
-    paths.hassio_dir,
-    paths.hassio_output_root,
-    paths.hassio_output_latest,
-    paths.hassio_output_es5,
-    "src"
-  )
-);

build-scripts/gulp/gather-static.js

@@ -123,22 +123,11 @@ gulp.task("copy-translations-app", async () => {
   copyTranslations(staticDir);
 });
 
-gulp.task("copy-translations-supervisor", async () => {
-  const staticDir = paths.hassio_output_static;
-  copyTranslations(staticDir);
-});
-
 gulp.task("copy-translations-landing-page", async () => {
   const staticDir = paths.landingPage_output_static;
   copyTranslations(staticDir);
 });
 
-gulp.task("copy-static-supervisor", async () => {
-  const staticDir = paths.hassio_output_static;
-  copyLocaleData(staticDir);
-  copyFonts(staticDir);
-});
-
 gulp.task("copy-static-app", async () => {
   const staticDir = paths.app_output_static;
   // Basic static files

build-scripts/gulp/hassio.js

@@ -1,45 +0,0 @@
-import gulp from "gulp";
-import env from "../env.cjs";
-import "./clean.js";
-import "./compress.js";
-import "./entry-html.js";
-import "./gather-static.js";
-import "./gen-icons-json.js";
-import "./translations.js";
-import "./rspack.js";
-
-gulp.task(
-  "develop-hassio",
-  gulp.series(
-    async function setEnv() {
-      process.env.NODE_ENV = "development";
-    },
-    "clean-hassio",
-    "gen-dummy-icons-json",
-    "gen-pages-hassio-dev",
-    "build-supervisor-translations",
-    "copy-translations-supervisor",
-    "build-locale-data",
-    "copy-static-supervisor",
-    "rspack-watch-hassio"
-  )
-);
-
-gulp.task(
-  "build-hassio",
-  gulp.series(
-    async function setEnv() {
-      process.env.NODE_ENV = "production";
-    },
-    "clean-hassio",
-    "gen-dummy-icons-json",
-    "build-supervisor-translations",
-    "copy-translations-supervisor",
-    "build-locale-data",
-    "copy-static-supervisor",
-    "rspack-prod-hassio",
-    "gen-pages-hassio-prod",
-    ...// Don't compress running tests
-    (env.isTestBuild() ? [] : ["compress-hassio"])
-  )
-);

build-scripts/gulp/index.mjs

@@ -9,7 +9,6 @@ import "./fetch-nightly-translations.js";
 import "./gallery.js";
 import "./gather-static.js";
 import "./gen-icons-json.js";
-import "./hassio.js";
 import "./landing-page.js";
 import "./locale-data.js";
 import "./rspack.js";

build-scripts/gulp/rspack.js

@@ -13,7 +13,6 @@ import {
   createCastConfig,
   createDemoConfig,
   createGalleryConfig,
-  createHassioConfig,
   createLandingPageConfig,
 } from "../rspack.cjs";
 
@@ -159,31 +158,6 @@ gulp.task("rspack-prod-cast", () =>
   )
 );
 
-gulp.task("rspack-watch-hassio", () => {
-  // This command will run forever because we don't close compiler
-  rspack(
-    createHassioConfig({
-      isProdBuild: false,
-      latestBuild: true,
-    })
-  ).watch({ ignored: /build/, poll: isWsl }, doneHandler());
-
-  gulp.watch(
-    path.join(paths.translations_src, "en.json"),
-    gulp.series("build-supervisor-translations", "copy-translations-supervisor")
-  );
-});
-
-gulp.task("rspack-prod-hassio", () =>
-  prodBuild(
-    bothBuilds(createHassioConfig, {
-      isProdBuild: true,
-      isStatsBuild: env.isStatsBuild(),
-      isTestBuild: env.isTestBuild(),
-    })
-  )
-);
-
 gulp.task("rspack-dev-server-gallery", () =>
   runDevServer({
     compiler: rspack(

build-scripts/gulp/translations.js

@@ -156,7 +156,9 @@ const createTestTranslation = () =>
  */
 const createMasterTranslation = () =>
   gulp
-    .src([EN_SRC, ...(mergeBackend ? [`${inBackendDir}/en.json`] : [])])
+    .src([EN_SRC, ...(mergeBackend ? [`${inBackendDir}/en.json`] : [])], {
+      allowEmpty: true,
+    })
     .pipe(new CustomJSON(lokaliseTransform))
     .pipe(new MergeJSON("en"))
     .pipe(gulp.dest(workDir));
@@ -168,9 +170,7 @@ const setFragment = (fragment) => async () => {
 };
 
 const panelFragment = (fragment) =>
-  fragment !== "base" &&
-  fragment !== "supervisor" &&
-  fragment !== "landing-page";
+  fragment !== "base" && fragment !== "landing-page";
 
 const HASHES = new Map();
 
@@ -205,18 +205,15 @@ const createTranslations = async () => {
         FRAGMENTS.map((fragment) => {
           switch (fragment) {
             case "base":
-              // Remove the panels and supervisor to create the base translations
+              // Remove the panels and landing-page to create the base translations
               return [
                 flatten({
                   ...data,
                   ui: { ...data.ui, panel: undefined },
-                  supervisor: undefined,
+                  "landing-page": undefined,
                 }),
                 "",
               ];
-            case "supervisor":
-              // Supervisor key is at the top level
-              return [flatten(data.supervisor), ""];
             case "landing-page":
               // landing-page key is at the top level
               return [flatten(data["landing-page"]), ""];
@@ -316,11 +313,6 @@ gulp.task(
   )
 );
 
-gulp.task(
-  "build-supervisor-translations",
-  gulp.series(setFragment("supervisor"), "build-translations")
-);
-
 gulp.task(
   "build-landing-page-translations",
   gulp.series(setFragment("landing-page"), "build-translations")

build-scripts/paths.cjs

@@ -49,15 +49,5 @@ module.exports = {
     "../landing-page/dist/static"
   ),
 
-  hassio_dir: path.resolve(__dirname, "../hassio"),
-  hassio_output_root: path.resolve(__dirname, "../hassio/build"),
-  hassio_output_static: path.resolve(__dirname, "../hassio/build/static"),
-  hassio_output_latest: path.resolve(
-    __dirname,
-    "../hassio/build/frontend_latest"
-  ),
-  hassio_output_es5: path.resolve(__dirname, "../hassio/build/frontend_es5"),
-  hassio_publicPath: "/api/hassio/app",
-
   translations_src: path.resolve(__dirname, "../src/translations"),
 };

build-scripts/rspack.cjs

@@ -40,7 +40,6 @@ const createRspackConfig = ({
   latestBuild,
   isStatsBuild,
   isTestBuild,
-  isHassioBuild,
   isLandingPageBuild,
   dontHash,
 }) => {
@@ -168,12 +167,12 @@ const createRspackConfig = ({
           );
         },
       }),
-      new rspack.NormalModuleReplacementPlugin(
-        new RegExp(
-          bundle.emptyPackages({ isHassioBuild, isLandingPageBuild }).join("|")
-        ),
-        path.resolve(paths.root_dir, "src/util/empty.js")
-      ),
+      bundle.emptyPackages({ isLandingPageBuild }).length
+        ? new rspack.NormalModuleReplacementPlugin(
+            new RegExp(bundle.emptyPackages({ isLandingPageBuild }).join("|")),
+            path.resolve(paths.root_dir, "src/util/empty.js")
+          )
+        : false,
       !isProdBuild && new LogStartCompilePlugin(),
       isProdBuild &&
         new StatsWriterPlugin({
@@ -201,6 +200,7 @@ const createRspackConfig = ({
         "lit/decorators$": "lit/decorators.js",
         "lit/directive$": "lit/directive.js",
         "lit/directives/until$": "lit/directives/until.js",
+        "lit/directives/ref$": "lit/directives/ref.js",
         "lit/directives/class-map$": "lit/directives/class-map.js",
         "lit/directives/style-map$": "lit/directives/style-map.js",
         "lit/directives/if-defined$": "lit/directives/if-defined.js",
@@ -209,7 +209,9 @@ const createRspackConfig = ({
         "lit/directives/join$": "lit/directives/join.js",
         "lit/directives/repeat$": "lit/directives/repeat.js",
         "lit/directives/live$": "lit/directives/live.js",
-        "lit/directives/keyed$": "lit/directives/keyed.js",
+        "lit/directives/keyed$": latestBuild
+          ? "lit/directives/keyed.js"
+          : path.resolve(__dirname, "../src/common/lit/keyed-es5.ts"),
         "lit/polyfill-support$": "lit/polyfill-support.js",
         "@lit-labs/virtualizer/layouts/grid":
           "@lit-labs/virtualizer/layouts/grid.js",
@@ -217,6 +219,42 @@ const createRspackConfig = ({
           "@lit-labs/virtualizer/polyfills/resize-observer-polyfill/ResizeObserver.js",
         "@lit-labs/observers/resize-controller":
           "@lit-labs/observers/resize-controller.js",
+        "@formatjs/intl-durationformat/should-polyfill$":
+          "@formatjs/intl-durationformat/should-polyfill.js",
+        "@formatjs/intl-durationformat/polyfill-force$":
+          "@formatjs/intl-durationformat/polyfill-force.js",
+        "@formatjs/intl-datetimeformat/should-polyfill":
+          "@formatjs/intl-datetimeformat/should-polyfill.js",
+        "@formatjs/intl-datetimeformat/polyfill-force":
+          "@formatjs/intl-datetimeformat/polyfill-force.js",
+        "@formatjs/intl-displaynames/should-polyfill":
+          "@formatjs/intl-displaynames/should-polyfill.js",
+        "@formatjs/intl-displaynames/polyfill-force":
+          "@formatjs/intl-displaynames/polyfill-force.js",
+        "@formatjs/intl-getcanonicallocales/should-polyfill":
+          "@formatjs/intl-getcanonicallocales/should-polyfill.js",
+        "@formatjs/intl-getcanonicallocales/polyfill-force":
+          "@formatjs/intl-getcanonicallocales/polyfill-force.js",
+        "@formatjs/intl-listformat/should-polyfill":
+          "@formatjs/intl-listformat/should-polyfill.js",
+        "@formatjs/intl-listformat/polyfill-force":
+          "@formatjs/intl-listformat/polyfill-force.js",
+        "@formatjs/intl-locale/should-polyfill":
+          "@formatjs/intl-locale/should-polyfill.js",
+        "@formatjs/intl-locale/polyfill-force":
+          "@formatjs/intl-locale/polyfill-force.js",
+        "@formatjs/intl-numberformat/should-polyfill":
+          "@formatjs/intl-numberformat/should-polyfill.js",
+        "@formatjs/intl-numberformat/polyfill-force":
+          "@formatjs/intl-numberformat/polyfill-force.js",
+        "@formatjs/intl-pluralrules/should-polyfill":
+          "@formatjs/intl-pluralrules/should-polyfill.js",
+        "@formatjs/intl-pluralrules/polyfill-force":
+          "@formatjs/intl-pluralrules/polyfill-force.js",
+        "@formatjs/intl-relativetimeformat/should-polyfill":
+          "@formatjs/intl-relativetimeformat/should-polyfill.js",
+        "@formatjs/intl-relativetimeformat/polyfill-force":
+          "@formatjs/intl-relativetimeformat/polyfill-force.js",
       },
     },
     output: {
@@ -283,21 +321,6 @@ const createDemoConfig = ({ isProdBuild, latestBuild, isStatsBuild }) =>
 const createCastConfig = ({ isProdBuild, latestBuild }) =>
   createRspackConfig(bundle.config.cast({ isProdBuild, latestBuild }));
 
-const createHassioConfig = ({
-  isProdBuild,
-  latestBuild,
-  isStatsBuild,
-  isTestBuild,
-}) =>
-  createRspackConfig(
-    bundle.config.hassio({
-      isProdBuild,
-      latestBuild,
-      isStatsBuild,
-      isTestBuild,
-    })
-  );
-
 const createGalleryConfig = ({ isProdBuild, latestBuild }) =>
   createRspackConfig(bundle.config.gallery({ isProdBuild, latestBuild }));
 
@@ -308,7 +331,6 @@ module.exports = {
   createAppConfig,
   createDemoConfig,
   createCastConfig,
-  createHassioConfig,
   createGalleryConfig,
   createRspackConfig,
   createLandingPageConfig,

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

@@ -206,7 +206,7 @@ class HcCast extends LitElement {
   }
 
   private async _handlePickView(ev: CustomEvent<ActionDetail>) {
-    const path = this.lovelaceViews![ev.detail.index].path ?? ev.detail.index;
+    const path = this.lovelaceViews?.[ev.detail.index]?.path ?? ev.detail.index;
     await ensureConnectedCastSession(this.castManager!, this.auth!);
     castSendShowLovelaceView(this.castManager, this.auth.data.hassUrl, path);
   }

cast/src/media/entrypoint.ts

@@ -5,17 +5,19 @@ const castContext = framework.CastReceiverContext.getInstance();
 const playerManager = castContext.getPlayerManager();
 
 playerManager.setMessageInterceptor(
-  framework.messages.MessageType.LOAD,
+  "LOAD" as framework.messages.MessageType.LOAD,
   (loadRequestData) => {
     const media = loadRequestData.media;
     // Special handling if it came from Google Assistant
     if (media.entity) {
       media.contentId = media.entity;
-      media.streamType = framework.messages.StreamType.LIVE;
+      media.streamType = "LIVE" as framework.messages.StreamType.LIVE;
       media.contentType = "application/vnd.apple.mpegurl";
       // @ts-ignore
+      // type definition is wrong, should be "FMP4" instead of "fmp4"
+      // https://developers.google.com/cast/docs/reference/web_receiver/cast.framework.messages#.HlsVideoSegmentFormat
       media.hlsVideoSegmentFormat =
-        framework.messages.HlsVideoSegmentFormat.FMP4;
+        "FMP4" as framework.messages.HlsVideoSegmentFormat.FMP4;
     }
     return loadRequestData;
   }

cast/src/receiver/entrypoint.ts

@@ -1,10 +1,9 @@
-import { framework } from "./cast_framework";
 import { CAST_NS } from "../../../src/cast/const";
 import type { HassMessage } from "../../../src/cast/receiver_messages";
 import "../../../src/resources/custom-card-support";
 import { castContext } from "./cast_context";
+import { framework } from "./cast_framework";
 import { HcMain } from "./layout/hc-main";
-import type { ReceivedMessage } from "./types";
 
 const lovelaceController = new HcMain();
 document.body.append(lovelaceController);
@@ -40,7 +39,8 @@ const playDummyMedia = (viewTitle?: string) => {
   loadRequestData.media.contentId =
     "https://cast.home-assistant.io/images/google-nest-hub.png";
   loadRequestData.media.contentType = "image/jpeg";
-  loadRequestData.media.streamType = framework.messages.StreamType.NONE;
+  loadRequestData.media.streamType =
+    "NONE" as framework.messages.StreamType.NONE;
   const metadata = new framework.messages.GenericMediaMetadata();
   metadata.title = viewTitle;
   loadRequestData.media.metadata = metadata;
@@ -89,31 +89,30 @@ const showMediaPlayer = () => {
 const options = new framework.CastReceiverOptions();
 options.disableIdleTimeout = true;
 options.customNamespaces = {
-  [CAST_NS]: framework.system.MessageType.JSON,
+  // type definition is wrong, should be "JSON" instead of "json"
+  // https://developers.google.com/cast/docs/reference/web_receiver/cast.framework.system#.MessageType
+  [CAST_NS]: "JSON" as framework.system.MessageType.JSON,
 };
 
-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() !== framework.messages.PlayerState.IDLE
-    ) {
-      playerManager.stop();
-    } else {
-      showLovelaceController();
-    }
-    const msg = ev.data;
-    msg.senderId = ev.senderId;
-    lovelaceController.processIncomingMessage(msg);
+castContext.addCustomMessageListener(CAST_NS, (ev) => {
+  // We received a show Lovelace command, stop media from playing, hide media player and show Lovelace controller
+  if (
+    playerManager.getPlayerState() !==
+    ("IDLE" as framework.messages.PlayerState.IDLE)
+  ) {
+    playerManager.stop();
+  } else {
+    showLovelaceController();
   }
-);
+  const msg = ev.data as HassMessage;
+  msg.senderId = ev.senderId;
+  lovelaceController.processIncomingMessage(msg);
+});
 
 const playerManager = castContext.getPlayerManager();
 
 playerManager.setMessageInterceptor(
-  framework.messages.MessageType.LOAD,
+  "LOAD" as framework.messages.MessageType.LOAD,
   (loadRequestData) => {
     if (
       loadRequestData.media.contentId ===
@@ -127,24 +126,26 @@ playerManager.setMessageInterceptor(
     // Special handling if it came from Google Assistant
     if (media.entity) {
       media.contentId = media.entity;
-      media.streamType = framework.messages.StreamType.LIVE;
+      media.streamType = "LIVE" as framework.messages.StreamType.LIVE;
       media.contentType = "application/vnd.apple.mpegurl";
-      // @ts-ignore
+      // type definition is wrong, should be "FMP4" instead of "fmp4"
+      // https://developers.google.com/cast/docs/reference/web_receiver/cast.framework.messages#.HlsVideoSegmentFormat
       media.hlsVideoSegmentFormat =
-        framework.messages.HlsVideoSegmentFormat.FMP4;
+        "FMP4" as framework.messages.HlsVideoSegmentFormat.FMP4;
     }
     return loadRequestData;
   }
 );
 
 playerManager.addEventListener(
-  framework.events.EventType.MEDIA_STATUS,
+  "MEDIA_STATUS" as framework.events.EventType.MEDIA_STATUS,
   (event) => {
     if (
-      event.mediaStatus?.playerState === framework.messages.PlayerState.IDLE &&
+      event.mediaStatus?.playerState ===
+        ("IDLE" as framework.messages.PlayerState.IDLE) &&
       event.mediaStatus?.idleReason &&
       event.mediaStatus?.idleReason !==
-        framework.messages.IdleReason.INTERRUPTED
+        ("INTERRUPTED" as framework.messages.IdleReason.INTERRUPTED)
     ) {
       // media finished or stopped, return to default Lovelace
       showLovelaceController();

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

@@ -305,9 +305,8 @@ export class HcMain extends HassElement {
         await llColl.refresh();
         this._unsubLovelace = llColl.subscribe(async (rawConfig) => {
           if (isStrategyDashboard(rawConfig)) {
-            const { generateLovelaceDashboardStrategy } = await import(
-              "../../../../src/panels/lovelace/strategies/get-strategy"
-            );
+            const { generateLovelaceDashboardStrategy } =
+              await import("../../../../src/panels/lovelace/strategies/get-strategy");
             const config = await generateLovelaceDashboardStrategy(
               rawConfig,
               this.hass!
@@ -347,9 +346,8 @@ export class HcMain extends HassElement {
   }
 
   private async _generateDefaultLovelaceConfig() {
-    const { generateLovelaceDashboardStrategy } = await import(
-      "../../../../src/panels/lovelace/strategies/get-strategy"
-    );
+    const { generateLovelaceDashboardStrategy } =
+      await import("../../../../src/panels/lovelace/strategies/get-strategy");
     this._handleNewLovelaceConfig(
       await generateLovelaceDashboardStrategy(DEFAULT_CONFIG, this.hass!)
     );

cast/src/receiver/types.ts

@@ -1,6 +0,0 @@
-export interface ReceivedMessage<T> {
-  gj: boolean;
-  data: T;
-  senderId: string;
-  type: "message";
-}

demo/src/ha-demo.ts

@@ -9,11 +9,14 @@ import { selectedDemoConfig } from "./configs/demo-configs";
 import { mockAreaRegistry } from "./stubs/area_registry";
 import { mockAuth } from "./stubs/auth";
 import { mockConfigEntries } from "./stubs/config_entries";
+import { mockDeviceRegistry } from "./stubs/device_registry";
 import { mockEnergy } from "./stubs/energy";
 import { energyEntities } from "./stubs/entities";
 import { mockEntityRegistry } from "./stubs/entity_registry";
 import { mockEvents } from "./stubs/events";
+import { mockFloorRegistry } from "./stubs/floor_registry";
 import { mockFrontend } from "./stubs/frontend";
+import { mockLabelRegistry } from "./stubs/label_registry";
 import { mockIcons } from "./stubs/icons";
 import { mockHistory } from "./stubs/history";
 import { mockLovelace } from "./stubs/lovelace";
@@ -60,6 +63,9 @@ export class HaDemo extends HomeAssistantAppEl {
     mockPersistentNotification(hass);
     mockConfigEntries(hass);
     mockAreaRegistry(hass);
+    mockDeviceRegistry(hass);
+    mockFloorRegistry(hass);
+    mockLabelRegistry(hass);
     mockEntityRegistry(hass, [
       {
         config_entry_id: "co2signal",

demo/src/stubs/area_registry.ts

@@ -1,4 +1,4 @@
-import type { AreaRegistryEntry } from "../../../src/data/area_registry";
+import type { AreaRegistryEntry } from "../../../src/data/area/area_registry";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 export const mockAreaRegistry = (

demo/src/stubs/device_registry.ts

@@ -1,4 +1,4 @@
-import type { DeviceRegistryEntry } from "../../../src/data/device_registry";
+import type { DeviceRegistryEntry } from "../../../src/data/device/device_registry";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 export const mockDeviceRegistry = (

demo/src/stubs/energy.ts

@@ -44,18 +44,24 @@ export const mockEnergy = (hass: MockHomeAssistant) => {
               number_energy_price: null,
             },
           ],
+          power: [
+            { stat_rate: "sensor.power_grid" },
+            { stat_rate: "sensor.power_grid_return" },
+          ],
           cost_adjustment_day: 0,
         },
         {
           type: "solar",
           stat_energy_from: "sensor.solar_production",
+          stat_rate: "sensor.power_solar",
           config_entry_solar_forecast: ["solar_forecast"],
         },
-        /*         {
+        {
           type: "battery",
           stat_energy_from: "sensor.battery_output",
           stat_energy_to: "sensor.battery_input",
-        }, */
+          stat_rate: "sensor.power_battery",
+        },
         {
           type: "gas",
           stat_energy_from: "sensor.energy_gas",
@@ -63,25 +69,46 @@ export const mockEnergy = (hass: MockHomeAssistant) => {
           entity_energy_price: null,
           number_energy_price: null,
         },
+        {
+          type: "water",
+          stat_energy_from: "sensor.energy_water",
+          stat_cost: "sensor.energy_water_cost",
+          entity_energy_price: null,
+          number_energy_price: null,
+        },
       ],
       device_consumption: [
         {
           stat_consumption: "sensor.energy_car",
+          stat_rate: "sensor.power_car",
         },
         {
           stat_consumption: "sensor.energy_ac",
+          stat_rate: "sensor.power_ac",
         },
         {
           stat_consumption: "sensor.energy_washing_machine",
+          stat_rate: "sensor.power_washing_machine",
         },
         {
           stat_consumption: "sensor.energy_dryer",
+          stat_rate: "sensor.power_dryer",
         },
         {
           stat_consumption: "sensor.energy_heat_pump",
+          stat_rate: "sensor.power_heat_pump",
         },
         {
           stat_consumption: "sensor.energy_boiler",
+          stat_rate: "sensor.power_boiler",
+        },
+      ],
+      device_consumption_water: [
+        {
+          stat_consumption: "sensor.water_kitchen",
+        },
+        {
+          stat_consumption: "sensor.water_garden",
         },
       ],
     })

demo/src/stubs/entities.ts

@@ -154,6 +154,38 @@ export const energyEntities = () =>
         unit_of_measurement: "EUR",
       },
     },
+    "sensor.power_grid": {
+      entity_id: "sensor.power_grid",
+      state: "500",
+      attributes: {
+        state_class: "measurement",
+        unit_of_measurement: "W",
+      },
+    },
+    "sensor.power_grid_return": {
+      entity_id: "sensor.power_grid_return",
+      state: "-100",
+      attributes: {
+        state_class: "measurement",
+        unit_of_measurement: "W",
+      },
+    },
+    "sensor.power_solar": {
+      entity_id: "sensor.power_solar",
+      state: "200",
+      attributes: {
+        state_class: "measurement",
+        unit_of_measurement: "W",
+      },
+    },
+    "sensor.power_battery": {
+      entity_id: "sensor.power_battery",
+      state: "100",
+      attributes: {
+        state_class: "measurement",
+        unit_of_measurement: "W",
+      },
+    },
     "sensor.energy_gas_cost": {
       entity_id: "sensor.energy_gas_cost",
       state: "2",
@@ -171,6 +203,15 @@ export const energyEntities = () =>
         unit_of_measurement: "m³",
       },
     },
+    "sensor.energy_water": {
+      entity_id: "sensor.energy_water",
+      state: "4000",
+      attributes: {
+        last_reset: "1970-01-01T00:00:00:00+00",
+        friendly_name: "Water",
+        unit_of_measurement: "L",
+      },
+    },
     "sensor.energy_car": {
       entity_id: "sensor.energy_car",
       state: "4",
@@ -225,4 +266,58 @@ export const energyEntities = () =>
         unit_of_measurement: "kWh",
       },
     },
+    "sensor.power_car": {
+      entity_id: "sensor.power_car",
+      state: "40",
+      attributes: {
+        state_class: "measurement",
+        friendly_name: "Electric car",
+        unit_of_measurement: "W",
+      },
+    },
+    "sensor.power_ac": {
+      entity_id: "sensor.power_ac",
+      state: "30",
+      attributes: {
+        state_class: "measurement",
+        friendly_name: "Air conditioning",
+        unit_of_measurement: "W",
+      },
+    },
+    "sensor.power_washing_machine": {
+      entity_id: "sensor.power_washing_machine",
+      state: "60",
+      attributes: {
+        state_class: "measurement",
+        friendly_name: "Washing machine",
+        unit_of_measurement: "W",
+      },
+    },
+    "sensor.power_dryer": {
+      entity_id: "sensor.power_dryer",
+      state: "55",
+      attributes: {
+        state_class: "measurement",
+        friendly_name: "Dryer",
+        unit_of_measurement: "W",
+      },
+    },
+    "sensor.power_heat_pump": {
+      entity_id: "sensor.power_heat_pump",
+      state: "60",
+      attributes: {
+        state_class: "measurement",
+        friendly_name: "Heat pump",
+        unit_of_measurement: "W",
+      },
+    },
+    "sensor.power_boiler": {
+      entity_id: "sensor.power_boiler",
+      state: "70",
+      attributes: {
+        state_class: "measurement",
+        friendly_name: "Boiler",
+        unit_of_measurement: "W",
+      },
+    },
   });

demo/src/stubs/entity_registry.ts

@@ -1,4 +1,4 @@
-import type { EntityRegistryEntry } from "../../../src/data/entity_registry";
+import type { EntityRegistryEntry } from "../../../src/data/entity/entity_registry";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 export const mockEntityRegistry = (

demo/src/stubs/frontend.ts

@@ -27,4 +27,25 @@ export const mockFrontend = (hass: MockHomeAssistant) => {
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     return () => {};
   });
+  hass.mockWS(
+    "frontend/subscribe_system_data",
+    (_msg, currentHass, onChange) => {
+      onChange?.({
+        value: currentHass.systemData,
+      });
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      return () => {};
+    }
+  );
+  hass.mockWS("labs/subscribe", (_msg, _currentHass, onChange) => {
+    onChange?.({
+      preview_feature: _msg.preview_feature,
+      domain: _msg.domain,
+      enabled: false,
+      is_built_in: true,
+    });
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    return () => {};
+  });
+  hass.mockWS("repairs/list_issues", () => ({ issues: [] }));
 };

demo/src/stubs/label_registry.ts

@@ -1,4 +1,4 @@
-import type { LabelRegistryEntry } from "../../../src/data/label_registry";
+import type { LabelRegistryEntry } from "../../../src/data/label/label_registry";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 export const mockLabelRegistry = (

demo/src/stubs/recorder.ts

@@ -17,17 +17,15 @@ const generateMeanStatistics = (
   end: Date,
   // eslint-disable-next-line default-param-last
   period: "5minute" | "hour" | "day" | "month" = "hour",
-  initValue: number,
   maxDiff: number
 ): StatisticValue[] => {
   const statistics: StatisticValue[] = [];
   let currentDate = new Date(start);
   currentDate.setMinutes(0, 0, 0);
-  let lastVal = initValue;
   const now = new Date();
   while (end > currentDate && currentDate < now) {
     const delta = Math.random() * maxDiff;
-    const mean = lastVal + delta;
+    const mean = delta;
     statistics.push({
       start: currentDate.getTime(),
       end: currentDate.getTime(),
@@ -38,7 +36,6 @@ const generateMeanStatistics = (
       state: mean,
       sum: null,
     });
-    lastVal = mean;
     currentDate =
       period === "day"
         ? addDays(currentDate, 1)
@@ -336,7 +333,6 @@ export const mockRecorder = (mockHass: MockHomeAssistant) => {
                   start,
                   end,
                   period,
-                  state,
                   state * (state > 80 ? 0.05 : 0.1)
                 );
         }

demo/src/stubs/template.ts

@@ -7,8 +7,18 @@ export const mockTemplate = (hass: MockHomeAssistant) => {
     })
   );
   hass.mockWS("render_template", (msg, _hass, onChange) => {
+    let result = msg.template;
+    // Simple variable substitution for demo purposes
+    if (msg.variables) {
+      for (const [key, value] of Object.entries(msg.variables)) {
+        result = result.replace(
+          new RegExp(`\\{\\{\\s*${key}\\s*\\}\\}`, "g"),
+          String(value)
+        );
+      }
+    }
     onChange!({
-      result: msg.template,
+      result,
       listeners: { all: false, domains: [], entities: [], time: false },
     });
     // eslint-disable-next-line @typescript-eslint/no-empty-function

eslint.config.mjs

@@ -43,7 +43,6 @@ export default tseslint.config(
         __BUILD__: false,
         __VERSION__: false,
         __STATIC_PATH__: false,
-        __SUPERVISOR__: false,
       },
 
       parser: tseslint.parser,
@@ -187,5 +186,11 @@ export default tseslint.config(
       ],
       "no-use-before-define": "off",
     },
+  },
+  {
+    files: ["src/util/recorder-worklet.js"],
+    languageOptions: {
+      globals: globals.audioWorklet,
+    },
   }
 );

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

@@ -142,7 +142,7 @@ export class DemoAutomationDescribeAction extends LitElement {
         <div class="action">
           <span>
             ${this._action
-              ? describeAction(this.hass, [], [], {}, this._action)
+              ? describeAction(this.hass, [], this._action)
               : "<invalid YAML>"}
           </span>
           <ha-yaml-editor
@@ -155,7 +155,7 @@ export class DemoAutomationDescribeAction extends LitElement {
         ${ACTIONS.map(
           (conf) => html`
             <div class="action">
-              <span>${describeAction(this.hass, [], [], {}, conf as any)}</span>
+              <span>${describeAction(this.hass, [], conf as any)}</span>
               <pre>${dump(conf)}</pre>
             </div>
           `

gallery/src/pages/automation/editor-trigger.ts

@@ -18,7 +18,6 @@ import { HaEventTrigger } from "../../../../src/panels/config/automation/trigger
 import { HaGeolocationTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-geo_location";
 import { HaHassTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-homeassistant";
 import { HaTriggerList } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-list";
-import { HaMQTTTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-mqtt";
 import { HaNumericStateTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-numeric_state";
 import { HaPersistentNotificationTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-persistent_notification";
 import { HaStateTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-state";
@@ -38,11 +37,6 @@ const SCHEMAS: { name: string; triggers: Trigger[] }[] = [
     triggers: [{ ...HaStateTrigger.defaultConfig }],
   },
 
-  {
-    name: "MQTT",
-    triggers: [{ ...HaMQTTTrigger.defaultConfig }],
-  },
-
   {
     name: "GeoLocation",
     triggers: [{ ...HaGeolocationTrigger.defaultConfig }],

gallery/src/pages/components/ha-adaptive-dialog.markdown

@@ -0,0 +1,3 @@
+---
+title: Adaptive dialog (ha-adaptive-dialog)
+---

gallery/src/pages/components/ha-adaptive-dialog.ts

@@ -0,0 +1,732 @@
+import { css, html, LitElement } from "lit";
+import { customElement, state } from "lit/decorators";
+import { mdiCog, mdiHelp } from "@mdi/js";
+import "../../../../src/components/ha-button";
+import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-dialog-footer";
+import "../../../../src/components/ha-adaptive-dialog";
+import "../../../../src/components/ha-form/ha-form";
+import "../../../../src/components/ha-icon-button";
+import type { HaFormSchema } from "../../../../src/components/ha-form/types";
+import { provideHass } from "../../../../src/fake_data/provide_hass";
+import type { HomeAssistant } from "../../../../src/types";
+
+const SCHEMA: HaFormSchema[] = [
+  { type: "string", name: "Name", default: "", autofocus: true },
+  { type: "string", name: "Email", default: "" },
+];
+
+type DialogType =
+  | false
+  | "basic"
+  | "basic-subtitle-below"
+  | "basic-subtitle-above"
+  | "form"
+  | "form-block-mode"
+  | "actions"
+  | "large"
+  | "small";
+
+@customElement("demo-components-ha-adaptive-dialog")
+export class DemoHaAdaptiveDialog extends LitElement {
+  @state() private _openDialog: DialogType = false;
+
+  @state() private _hass?: HomeAssistant;
+
+  protected firstUpdated() {
+    const hass = provideHass(this);
+    this._hass = hass;
+  }
+
+  protected render() {
+    return html`
+      <div class="content">
+        <h1>Adaptive dialog <code>&lt;ha-adaptive-dialog&gt;</code></h1>
+
+        <p class="subtitle">
+          Responsive dialog component that automatically switches between a full
+          dialog and bottom sheet based on screen size.
+        </p>
+
+        <h2>Demos</h2>
+
+        <div class="buttons">
+          <ha-button @click=${this._handleOpenDialog("basic")}
+            >Basic adaptive dialog</ha-button
+          >
+          <ha-button @click=${this._handleOpenDialog("basic-subtitle-below")}
+            >Adaptive dialog with subtitle below</ha-button
+          >
+          <ha-button @click=${this._handleOpenDialog("basic-subtitle-above")}
+            >Adaptive dialog with subtitle above</ha-button
+          >
+          <ha-button @click=${this._handleOpenDialog("small")}
+            >Small width adaptive dialog</ha-button
+          >
+          <ha-button @click=${this._handleOpenDialog("large")}
+            >Large width adaptive dialog</ha-button
+          >
+          <ha-button @click=${this._handleOpenDialog("form")}
+            >Adaptive dialog with form</ha-button
+          >
+          <ha-button @click=${this._handleOpenDialog("form-block-mode")}
+            >Adaptive dialog with form (block mode change)</ha-button
+          >
+          <ha-button @click=${this._handleOpenDialog("actions")}
+            >Adaptive dialog with actions</ha-button
+          >
+        </div>
+
+        <ha-card>
+          <div class="card-content">
+            <p>
+              <strong>Tip:</strong> Resize your browser window to see the
+              responsive behavior. The dialog automatically switches to a bottom
+              sheet on narrow screens (&lt;870px width) or short screens
+              (&lt;500px height).
+            </p>
+          </div>
+        </ha-card>
+
+        <ha-adaptive-dialog
+          .hass=${this._hass}
+          .open=${this._openDialog === "basic"}
+          header-title="Basic adaptive dialog"
+          @closed=${this._handleClosed}
+        >
+          <div>Adaptive dialog content</div>
+        </ha-adaptive-dialog>
+
+        <ha-adaptive-dialog
+          .hass=${this._hass}
+          .open=${this._openDialog === "basic-subtitle-below"}
+          header-title="Adaptive dialog with subtitle"
+          header-subtitle="This is an adaptive dialog with a subtitle below"
+          @closed=${this._handleClosed}
+        >
+          <div>Adaptive dialog content</div>
+        </ha-adaptive-dialog>
+
+        <ha-adaptive-dialog
+          .hass=${this._hass}
+          .open=${this._openDialog === "basic-subtitle-above"}
+          header-title="Adaptive dialog with subtitle above"
+          header-subtitle="This is an adaptive dialog with a subtitle above"
+          header-subtitle-position="above"
+          @closed=${this._handleClosed}
+        >
+          <div>Adaptive dialog content</div>
+        </ha-adaptive-dialog>
+
+        <ha-adaptive-dialog
+          .hass=${this._hass}
+          .open=${this._openDialog === "small"}
+          width="small"
+          header-title="Small adaptive dialog"
+          @closed=${this._handleClosed}
+        >
+          <div>This dialog uses the small width preset (320px).</div>
+        </ha-adaptive-dialog>
+
+        <ha-adaptive-dialog
+          .hass=${this._hass}
+          .open=${this._openDialog === "large"}
+          width="large"
+          header-title="Large adaptive dialog"
+          @closed=${this._handleClosed}
+        >
+          <div>This dialog uses the large width preset (1024px).</div>
+        </ha-adaptive-dialog>
+
+        <ha-adaptive-dialog
+          .hass=${this._hass}
+          .open=${this._openDialog === "form"}
+          header-title="Adaptive dialog with form"
+          header-subtitle="This is an adaptive dialog with a form"
+          @closed=${this._handleClosed}
+        >
+          <ha-form autofocus .schema=${SCHEMA}></ha-form>
+          <ha-dialog-footer slot="footer">
+            <ha-button
+              @click=${this._handleClosed}
+              slot="secondaryAction"
+              variant="plain"
+              >Cancel</ha-button
+            >
+            <ha-button
+              @click=${this._handleClosed}
+              slot="primaryAction"
+              variant="accent"
+              >Submit</ha-button
+            >
+          </ha-dialog-footer>
+        </ha-adaptive-dialog>
+
+        <ha-adaptive-dialog
+          .hass=${this._hass}
+          .open=${this._openDialog === "form-block-mode"}
+          header-title="Adaptive dialog with form (block mode change)"
+          header-subtitle="This form will not reset when the viewport size changes"
+          block-mode-change
+          @closed=${this._handleClosed}
+        >
+          <ha-form autofocus .schema=${SCHEMA}></ha-form>
+          <ha-dialog-footer slot="footer">
+            <ha-button
+              @click=${this._handleClosed}
+              slot="secondaryAction"
+              variant="plain"
+              >Cancel</ha-button
+            >
+            <ha-button
+              @click=${this._handleClosed}
+              slot="primaryAction"
+              variant="accent"
+              >Submit</ha-button
+            >
+          </ha-dialog-footer>
+        </ha-adaptive-dialog>
+
+        <ha-adaptive-dialog
+          .hass=${this._hass}
+          .open=${this._openDialog === "actions"}
+          header-title="Adaptive dialog with actions"
+          header-subtitle="This is an adaptive dialog with header actions"
+          @closed=${this._handleClosed}
+        >
+          <div slot="headerActionItems">
+            <ha-icon-button label="Settings" path=${mdiCog}></ha-icon-button>
+            <ha-icon-button label="Help" path=${mdiHelp}></ha-icon-button>
+          </div>
+
+          <div>Adaptive dialog content</div>
+        </ha-adaptive-dialog>
+
+        <h2>Design</h2>
+
+        <h3>Responsive behavior</h3>
+
+        <p>
+          The <code>ha-adaptive-dialog</code> component automatically switches
+          between two modes based on screen size:
+        </p>
+
+        <ul>
+          <li>
+            <strong>Dialog mode:</strong> Used on larger screens (width &gt;
+            870px and height &gt; 500px). Renders as a centered dialog using
+            <code>ha-wa-dialog</code>.
+          </li>
+          <li>
+            <strong>Bottom sheet mode:</strong> Used on mobile devices and
+            smaller screens (width ≤ 870px or height ≤ 500px). Renders as a
+            drawer from the bottom using <code>ha-bottom-sheet</code>.
+          </li>
+        </ul>
+
+        <p>
+          The mode is determined automatically and updates when the window is
+          resized. To prevent mode changes after the initial mount (useful for
+          preventing form resets), use the <code>block-mode-change</code>
+          attribute.
+        </p>
+
+        <h3>Width</h3>
+
+        <p>
+          In dialog mode, there are multiple width presets available. These are
+          ignored in bottom sheet mode.
+        </p>
+
+        <table>
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Value</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td><code>small</code></td>
+              <td><code>min(320px, var(--full-width))</code></td>
+            </tr>
+            <tr>
+              <td><code>medium</code></td>
+              <td><code>min(580px, var(--full-width))</code></td>
+            </tr>
+            <tr>
+              <td><code>large</code></td>
+              <td><code>min(1024px, var(--full-width))</code></td>
+            </tr>
+            <tr>
+              <td><code>full</code></td>
+              <td><code>var(--full-width)</code></td>
+            </tr>
+          </tbody>
+        </table>
+
+        <p>Adaptive dialogs have a default width of <code>medium</code>.</p>
+
+        <h3>Header</h3>
+
+        <p>
+          The header contains a navigation icon, title, subtitle, and action
+          items.
+        </p>
+
+        <table>
+          <thead>
+            <tr>
+              <th>Slot</th>
+              <th>Description</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td><code>headerNavigationIcon</code></td>
+              <td>
+                Leading header action (e.g., close/back button). In bottom sheet
+                mode, defaults to a close button if not provided.
+              </td>
+            </tr>
+            <tr>
+              <td><code>headerTitle</code></td>
+              <td>The header title content.</td>
+            </tr>
+            <tr>
+              <td><code>headerSubtitle</code></td>
+              <td>The header subtitle content.</td>
+            </tr>
+            <tr>
+              <td><code>headerActionItems</code></td>
+              <td>Trailing header actions (e.g., icon buttons, menus).</td>
+            </tr>
+          </tbody>
+        </table>
+
+        <h4>Header title</h4>
+
+        <p>
+          The header title can be set using the <code>header-title</code>
+          attribute or by providing custom content in the
+          <code>headerTitle</code> slot.
+        </p>
+
+        <h4>Header subtitle</h4>
+
+        <p>
+          The header subtitle can be set using the
+          <code>header-subtitle</code> attribute or by providing custom content
+          in the <code>headerSubtitle</code> slot. The subtitle position
+          relative to the title can be controlled with the
+          <code>header-subtitle-position</code> attribute.
+        </p>
+
+        <h4>Header navigation icon</h4>
+
+        <p>
+          In bottom sheet mode, a close button is automatically provided if no
+          custom navigation icon is specified. In dialog mode, the dialog can be
+          closed via the standard dialog close button.
+        </p>
+
+        <h4>Header action items</h4>
+
+        <p>
+          The header action items usually contain icon buttons and/or menu
+          buttons.
+        </p>
+
+        <h3>Body</h3>
+
+        <p>The body is the content of the adaptive dialog.</p>
+
+        <h3>Footer</h3>
+
+        <p>The footer is the footer of the adaptive dialog.</p>
+
+        <p>
+          It is recommended to use the <code>ha-dialog-footer</code> component
+          for the footer and to style the buttons inside the footer as follows:
+        </p>
+
+        <table>
+          <thead>
+            <tr>
+              <th>Slot</th>
+              <th>Description</th>
+              <th>Variant to use</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td><code>secondaryAction</code></td>
+              <td>The secondary action button(s).</td>
+              <td><code>plain</code></td>
+            </tr>
+            <tr>
+              <td><code>primaryAction</code></td>
+              <td>The primary action button(s).</td>
+              <td><code>accent</code></td>
+            </tr>
+          </tbody>
+        </table>
+
+        <h2>Implementation</h2>
+
+        <h3>When to use</h3>
+
+        <p>
+          Use <code>ha-adaptive-dialog</code> when you need a dialog that should
+          adapt to different screen sizes automatically. This is particularly
+          useful for:
+        </p>
+
+        <ul>
+          <li>Forms and data entry that need to work well on mobile devices</li>
+          <li>
+            Content that benefits from full-screen presentation on small devices
+          </li>
+          <li>
+            Interfaces that need consistent behavior across desktop and mobile
+          </li>
+        </ul>
+
+        <p>
+          If you don't need responsive behavior, use
+          <code>ha-wa-dialog</code> directly for desktop-only dialogs or
+          <code>ha-bottom-sheet</code> for mobile-only sheets.
+        </p>
+
+        <p>
+          Use the <code>block-mode-change</code> attribute when you want to
+          prevent the dialog from switching modes after it's opened. This is
+          especially useful for forms, as it prevents form data from being lost
+          when users resize their browser window.
+        </p>
+
+        <h3>Example usage</h3>
+
+        <pre><code>&lt;ha-adaptive-dialog
+  .hass=\${this.hass}
+  open
+  width="medium"
+  header-title="Dialog title"
+  header-subtitle="Dialog subtitle"
+&gt;
+  &lt;div slot="headerActionItems"&gt;
+    &lt;ha-icon-button label="Settings" path="mdiCog"&gt;&lt;/ha-icon-button&gt;
+    &lt;ha-icon-button label="Help" path="mdiHelp"&gt;&lt;/ha-icon-button&gt;
+  &lt;/div&gt;
+  &lt;div&gt;Dialog content&lt;/div&gt;
+  &lt;ha-dialog-footer slot="footer"&gt;
+    &lt;ha-button slot="secondaryAction" variant="plain"
+      &gt;Cancel&lt;/ha-button
+    &gt;
+    &lt;ha-button slot="primaryAction" variant="accent"&gt;Submit&lt;/ha-button&gt;
+  &lt;/ha-dialog-footer&gt;
+&lt;/ha-adaptive-dialog&gt;</code></pre>
+
+        <p>Example with <code>block-mode-change</code> for forms:</p>
+
+        <pre><code>&lt;ha-adaptive-dialog
+  .hass=\${this.hass}
+  open
+  header-title="Edit configuration"
+  block-mode-change
+&gt;
+  &lt;ha-form .schema=\${schema} .data=\${data}&gt;&lt;/ha-form&gt;
+  &lt;ha-dialog-footer slot="footer"&gt;
+    &lt;ha-button slot="secondaryAction" variant="plain"
+      &gt;Cancel&lt;/ha-button
+    &gt;
+    &lt;ha-button slot="primaryAction" variant="accent"&gt;Save&lt;/ha-button&gt;
+  &lt;/ha-dialog-footer&gt;
+&lt;/ha-adaptive-dialog&gt;</code></pre>
+
+        <h3>API</h3>
+
+        <p>
+          This component combines <code>ha-wa-dialog</code> and
+          <code>ha-bottom-sheet</code> with automatic mode switching based on
+          screen size.
+        </p>
+
+        <h4>Attributes</h4>
+
+        <table>
+          <thead>
+            <tr>
+              <th>Attribute</th>
+              <th>Description</th>
+              <th>Default</th>
+              <th>Options</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td><code>open</code></td>
+              <td>Controls the adaptive dialog open state.</td>
+              <td><code>false</code></td>
+              <td><code>false</code>, <code>true</code></td>
+            </tr>
+            <tr>
+              <td><code>width</code></td>
+              <td>
+                Preferred dialog width preset (dialog mode only, ignored in
+                bottom sheet mode).
+              </td>
+              <td><code>medium</code></td>
+              <td>
+                <code>small</code>, <code>medium</code>, <code>large</code>,
+                <code>full</code>
+              </td>
+            </tr>
+            <tr>
+              <td><code>header-title</code></td>
+              <td>Header title text when no custom title slot is provided.</td>
+              <td></td>
+              <td></td>
+            </tr>
+            <tr>
+              <td><code>header-subtitle</code></td>
+              <td>
+                Header subtitle text when no custom subtitle slot is provided.
+              </td>
+              <td></td>
+              <td></td>
+            </tr>
+            <tr>
+              <td><code>header-subtitle-position</code></td>
+              <td>Position of the subtitle relative to the title.</td>
+              <td><code>below</code></td>
+              <td><code>above</code>, <code>below</code></td>
+            </tr>
+            <tr>
+              <td><code>aria-labelledby</code></td>
+              <td>
+                The ID of the element that labels the dialog (for
+                accessibility).
+              </td>
+              <td></td>
+              <td></td>
+            </tr>
+            <tr>
+              <td><code>aria-describedby</code></td>
+              <td>
+                The ID of the element that describes the dialog (for
+                accessibility).
+              </td>
+              <td></td>
+              <td></td>
+            </tr>
+            <tr>
+              <td><code>block-mode-change</code></td>
+              <td>
+                When set, the mode is determined at mount time based on the
+                current screen size, but subsequent mode changes are blocked.
+                Useful for preventing forms from resetting when the viewport
+                size changes.
+              </td>
+              <td><code>false</code></td>
+              <td><code>false</code>, <code>true</code></td>
+            </tr>
+          </tbody>
+        </table>
+
+        <h4>CSS custom properties</h4>
+
+        <table>
+          <thead>
+            <tr>
+              <th>CSS Property</th>
+              <th>Description</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td><code>--ha-dialog-surface-background</code></td>
+              <td>Dialog/sheet background color.</td>
+            </tr>
+            <tr>
+              <td><code>--ha-dialog-border-radius</code></td>
+              <td>Border radius of the dialog surface (dialog mode only).</td>
+            </tr>
+            <tr>
+              <td><code>--ha-dialog-show-duration</code></td>
+              <td>Show animation duration (dialog mode only).</td>
+            </tr>
+            <tr>
+              <td><code>--ha-dialog-hide-duration</code></td>
+              <td>Hide animation duration (dialog mode only).</td>
+            </tr>
+          </tbody>
+        </table>
+
+        <h4>Events</h4>
+
+        <table>
+          <thead>
+            <tr>
+              <th>Event</th>
+              <th>Description</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td><code>opened</code></td>
+              <td>
+                Fired when the adaptive dialog is shown (dialog mode only).
+              </td>
+            </tr>
+            <tr>
+              <td><code>closed</code></td>
+              <td>
+                Fired after the adaptive dialog is hidden (dialog mode only).
+              </td>
+            </tr>
+            <tr>
+              <td><code>after-show</code></td>
+              <td>Fired after show animation completes (dialog mode only).</td>
+            </tr>
+          </tbody>
+        </table>
+
+        <h3>Focus management</h3>
+
+        <p>
+          To automatically focus an element when the adaptive dialog opens, add
+          the
+          <code>autofocus</code> attribute to it. Components with
+          <code>delegatesFocus: true</code> (like <code>ha-form</code>) will
+          forward focus to their first focusable child.
+        </p>
+
+        <p>Example:</p>
+
+        <pre><code>&lt;ha-adaptive-dialog .hass=\${this.hass} open&gt;
+  &lt;ha-form autofocus .schema=\${schema}&gt;&lt;/ha-form&gt;
+&lt;/ha-adaptive-dialog&gt;</code></pre>
+      </div>
+    `;
+  }
+
+  private _handleOpenDialog = (dialog: DialogType) => () => {
+    this._openDialog = dialog;
+  };
+
+  private _handleClosed = () => {
+    this._openDialog = false;
+  };
+
+  static styles = [
+    css`
+      :host {
+        display: block;
+        padding: var(--ha-space-4);
+      }
+
+      .content {
+        max-width: 1000px;
+        margin: 0 auto;
+      }
+
+      h1 {
+        margin-top: 0;
+        margin-bottom: var(--ha-space-2);
+      }
+
+      h2 {
+        margin-top: var(--ha-space-6);
+        margin-bottom: var(--ha-space-3);
+      }
+
+      h3,
+      h4 {
+        margin-top: var(--ha-space-4);
+        margin-bottom: var(--ha-space-2);
+      }
+
+      p {
+        margin: var(--ha-space-2) 0;
+        line-height: 1.6;
+      }
+
+      ul {
+        margin: var(--ha-space-2) 0;
+        padding-left: var(--ha-space-5);
+      }
+
+      li {
+        margin: var(--ha-space-1) 0;
+        line-height: 1.6;
+      }
+
+      .subtitle {
+        color: var(--secondary-text-color);
+        font-size: 1.1em;
+        margin-bottom: var(--ha-space-4);
+      }
+
+      table {
+        width: 100%;
+        border-collapse: collapse;
+        margin: var(--ha-space-3) 0;
+      }
+
+      th,
+      td {
+        text-align: left;
+        padding: var(--ha-space-2);
+        border-bottom: 1px solid var(--divider-color);
+      }
+
+      th {
+        font-weight: 500;
+      }
+
+      code {
+        background-color: var(--secondary-background-color);
+        padding: 2px 6px;
+        border-radius: 4px;
+        font-family: monospace;
+        font-size: 0.9em;
+      }
+
+      pre {
+        background-color: var(--secondary-background-color);
+        padding: var(--ha-space-3);
+        border-radius: 8px;
+        overflow-x: auto;
+        margin: var(--ha-space-3) 0;
+      }
+
+      pre code {
+        background-color: transparent;
+        padding: 0;
+      }
+
+      .buttons {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: var(--ha-space-2);
+        margin: var(--ha-space-4) 0;
+      }
+
+      .card-content {
+        padding: var(--ha-space-3);
+      }
+
+      a {
+        color: var(--primary-color);
+      }
+    `,
+  ];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-components-ha-adaptive-dialog": DemoHaAdaptiveDialog;
+  }
+}

gallery/src/pages/components/ha-form.ts

@@ -10,12 +10,12 @@ import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervis
 import { computeInitialHaFormData } from "../../../../src/components/ha-form/compute-initial-ha-form-data";
 import "../../../../src/components/ha-form/ha-form";
 import type { HaFormSchema } from "../../../../src/components/ha-form/types";
-import type { AreaRegistryEntry } from "../../../../src/data/area_registry";
+import type { AreaRegistryEntry } from "../../../../src/data/area/area_registry";
+import type { DeviceRegistryEntry } from "../../../../src/data/device/device_registry";
 import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import type { HomeAssistant } from "../../../../src/types";
 import "../../components/demo-black-white-row";
-import type { DeviceRegistryEntry } from "../../../../src/data/device_registry";
 
 const ENTITIES = [
   getEntity("alarm_control_panel", "alarm", "disarmed", {
@@ -169,7 +169,7 @@ const SCHEMAS: {
   {
     title: "Selectors",
     translations: {
-      addon: "Addon",
+      app: "App",
       entity: "Entity",
       device: "Device",
       area: "Area",
@@ -188,7 +188,7 @@ const SCHEMAS: {
       entities: "Entities",
     },
     schema: [
-      { name: "addon", selector: { addon: {} } },
+      { name: "app", selector: { app: {} } },
       { name: "entity", selector: { entity: {} } },
       {
         name: "Attribute",

gallery/src/pages/components/ha-selector.ts

@@ -11,11 +11,11 @@ import { mockLabelRegistry } from "../../../../demo/src/stubs/label_registry";
 import "../../../../src/components/ha-formfield";
 import "../../../../src/components/ha-selector/ha-selector";
 import "../../../../src/components/ha-settings-row";
-import type { AreaRegistryEntry } from "../../../../src/data/area_registry";
+import type { AreaRegistryEntry } from "../../../../src/data/area/area_registry";
 import type { BlueprintInput } from "../../../../src/data/blueprint";
-import type { DeviceRegistryEntry } from "../../../../src/data/device_registry";
+import type { DeviceRegistryEntry } from "../../../../src/data/device/device_registry";
 import type { FloorRegistryEntry } from "../../../../src/data/floor_registry";
-import type { LabelRegistryEntry } from "../../../../src/data/label_registry";
+import type { LabelRegistryEntry } from "../../../../src/data/label/label_registry";
 import { showDialog } from "../../../../src/dialogs/make-dialog-manager";
 import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
@@ -40,6 +40,9 @@ const ENTITIES = [
   getEntity("switch", "coffee", "off", {
     friendly_name: "Coffee",
   }),
+  getEntity("number", "number", 5, {
+    friendly_name: "Number",
+  }),
 ];
 
 const DEVICES: DeviceRegistryEntry[] = [
@@ -236,7 +239,7 @@ const SCHEMAS: {
         selector: { config_entry: {} },
       },
       duration: { name: "Duration", selector: { duration: {} } },
-      addon: { name: "Addon", selector: { addon: {} } },
+      app: { name: "App", selector: { app: {} } },
       number_box: {
         name: "Number Box",
         selector: {
@@ -377,6 +380,33 @@ const SCHEMAS: {
         name: "Constant",
         selector: { constant: { value: true, label: "Yes!" } },
       },
+      choose: {
+        name: "Choose",
+        selector: {
+          choose: {
+            choices: {
+              number: {
+                selector: {
+                  number: {
+                    min: 0,
+                    max: 100,
+                    step: 0.1,
+                  },
+                },
+              },
+              entity: {
+                selector: {
+                  entity: {
+                    filter: {
+                      domain: "number",
+                    },
+                  },
+                },
+              },
+            },
+          },
+        },
+      },
     },
   },
   {

gallery/src/pages/components/ha-wa-dialog.ts

@@ -139,7 +139,7 @@ export class DemoHaWaDialog extends LitElement {
             </tr>
             <tr>
               <td><code>large</code></td>
-              <td><code>min(720px, var(--full-width))</code></td>
+              <td><code>min(1024px, var(--full-width))</code></td>
             </tr>
             <tr>
               <td><code>full</code></td>
@@ -381,10 +381,6 @@ export class DemoHaWaDialog extends LitElement {
               <td><code>--dialog-z-index</code></td>
               <td>Z-index for the dialog.</td>
             </tr>
-            <tr>
-              <td><code>--dialog-surface-position</code></td>
-              <td>CSS position of the dialog surface.</td>
-            </tr>
             <tr>
               <td><code>--dialog-surface-margin-top</code></td>
               <td>Top margin for the dialog surface.</td>

gallery/src/pages/misc/integration-card.ts

@@ -6,8 +6,8 @@ import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import type { IntegrationManifest } from "../../../../src/data/integration";
 
-import type { DeviceRegistryEntry } from "../../../../src/data/device_registry";
-import type { EntityRegistryEntry } from "../../../../src/data/entity_registry";
+import type { DeviceRegistryEntry } from "../../../../src/data/device/device_registry";
+import type { EntityRegistryEntry } from "../../../../src/data/entity/entity_registry";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../../../src/panels/config/integrations/ha-config-flow-card";
 import type {

hassio/config.cjs

@@ -1,9 +0,0 @@
-const path = require("path");
-
-module.exports = {
-  // Target directory for the build.
-  buildDir: path.resolve(__dirname, "build"),
-  nodeDir: path.resolve(__dirname, "../node_modules"),
-  // Path where the Hass.io frontend will be publicly available.
-  publicPath: "/api/hassio/app",
-};

hassio/script/build_hassio

@@ -1,9 +0,0 @@
-#!/bin/sh
-# Builds the Hass.io app for production
-
-# Stop on errors
-set -e
-
-cd "$(dirname "$0")/../.."
-
-./node_modules/.bin/gulp build-hassio

hassio/script/develop

@@ -1,9 +0,0 @@
-#!/bin/sh
-# Run the Hass.io development server
-
-# Stop on errors
-set -e
-
-cd "$(dirname "$0")/../.."
-
-./node_modules/.bin/gulp develop-hassio

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

@@ -1,248 +0,0 @@
-import type { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
-
-import { mdiDotsVertical } from "@mdi/js";
-import type { PropertyValues, TemplateResult } from "lit";
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import memoizeOne from "memoize-one";
-import { atLeastVersion } from "../../../src/common/config/version";
-import { fireEvent } from "../../../src/common/dom/fire_event";
-import { navigate } from "../../../src/common/navigate";
-import { extractSearchParam } from "../../../src/common/url/search-params";
-import "../../../src/components/ha-button-menu";
-import "../../../src/components/ha-icon-button";
-import "../../../src/components/ha-list-item";
-import "../../../src/components/search-input";
-import type { HassioAddonRepository } from "../../../src/data/hassio/addon";
-import { reloadHassioAddons } from "../../../src/data/hassio/addon";
-import { extractApiErrorMessage } from "../../../src/data/hassio/common";
-import type { StoreAddon } from "../../../src/data/supervisor/store";
-import type { Supervisor } from "../../../src/data/supervisor/supervisor";
-import { showAlertDialog } from "../../../src/dialogs/generic/show-dialog-box";
-import "../../../src/layouts/hass-loading-screen";
-import "../../../src/layouts/hass-subpage";
-import type { HomeAssistant, Route } from "../../../src/types";
-import { showRegistriesDialog } from "../dialogs/registries/show-dialog-registries";
-import { showRepositoriesDialog } from "../dialogs/repositories/show-dialog-repositories";
-import "./hassio-addon-repository";
-
-const sortRepos = (a: HassioAddonRepository, b: HassioAddonRepository) => {
-  if (a.slug === "local") {
-    return -1;
-  }
-  if (b.slug === "local") {
-    return 1;
-  }
-  if (a.slug === "core") {
-    return -1;
-  }
-  if (b.slug === "core") {
-    return 1;
-  }
-  return a.name.toUpperCase() < b.name.toUpperCase() ? -1 : 1;
-};
-
-@customElement("hassio-addon-store")
-export class HassioAddonStore extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ attribute: false }) public supervisor!: Supervisor;
-
-  @property({ type: Boolean }) public narrow = false;
-
-  @property({ attribute: false }) public route!: Route;
-
-  @state() private _filter?: string;
-
-  public async refreshData() {
-    try {
-      await reloadHassioAddons(this.hass);
-    } catch (err) {
-      showAlertDialog(this, {
-        text: extractApiErrorMessage(err),
-      });
-    } finally {
-      this._loadData();
-    }
-  }
-
-  protected render() {
-    let repos: (TemplateResult | typeof nothing)[] = [];
-
-    if (this.supervisor.store.repositories) {
-      repos = this.addonRepositories(
-        this.supervisor.store.repositories,
-        this.supervisor.store.addons,
-        this._filter
-      );
-    }
-
-    return html`
-      <hass-subpage
-        .hass=${this.hass}
-        .narrow=${this.narrow}
-        .route=${this.route}
-        .header=${this.supervisor.localize("panel.store")}
-      >
-        <ha-button-menu slot="toolbar-icon" @action=${this._handleAction}>
-          <ha-icon-button
-            .label=${this.supervisor.localize("common.menu")}
-            .path=${mdiDotsVertical}
-            slot="trigger"
-          ></ha-icon-button>
-          <ha-list-item>
-            ${this.supervisor.localize("store.check_updates")}
-          </ha-list-item>
-          <ha-list-item>
-            ${this.supervisor.localize("store.repositories")}
-          </ha-list-item>
-          ${this.hass.userData?.showAdvanced &&
-          atLeastVersion(this.hass.config.version, 0, 117)
-            ? html`<ha-list-item>
-                ${this.supervisor.localize("store.registries")}
-              </ha-list-item>`
-            : ""}
-        </ha-button-menu>
-        ${repos.length === 0
-          ? html`<hass-loading-screen no-toolbar></hass-loading-screen>`
-          : html`
-              <div class="search">
-                <search-input
-                  .hass=${this.hass}
-                  .filter=${this._filter}
-                  @value-changed=${this._filterChanged}
-                ></search-input>
-              </div>
-
-              ${repos}
-            `}
-        ${!this.hass.userData?.showAdvanced
-          ? html`
-              <div class="advanced">
-                <a href="/profile" target="_top">
-                  ${this.supervisor.localize("store.missing_addons")}
-                </a>
-              </div>
-            `
-          : ""}
-      </hass-subpage>
-    `;
-  }
-
-  protected firstUpdated(changedProps: PropertyValues) {
-    super.firstUpdated(changedProps);
-    const repositoryUrl = extractSearchParam("repository_url");
-    navigate("/hassio/store", { replace: true });
-    if (repositoryUrl) {
-      this._manageRepositories(repositoryUrl);
-    }
-
-    this.addEventListener("hass-api-called", (ev) => this._apiCalled(ev));
-    this._loadData();
-  }
-
-  private addonRepositories = memoizeOne(
-    (
-      repositories: HassioAddonRepository[],
-      addons: StoreAddon[],
-      filter?: string
-    ) =>
-      repositories.sort(sortRepos).map((repo) => {
-        const filteredAddons = addons.filter(
-          (addon) => addon.repository === repo.slug
-        );
-
-        return filteredAddons.length !== 0
-          ? html`
-              <hassio-addon-repository
-                .hass=${this.hass}
-                .repo=${repo}
-                .addons=${filteredAddons}
-                .filter=${filter!}
-                .supervisor=${this.supervisor}
-              ></hassio-addon-repository>
-            `
-          : nothing;
-      })
-  );
-
-  private _handleAction(ev: CustomEvent<ActionDetail>) {
-    switch (ev.detail.index) {
-      case 0:
-        this.refreshData();
-        break;
-      case 1:
-        this._manageRepositoriesClicked();
-        break;
-      case 2:
-        this._manageRegistries();
-        break;
-    }
-  }
-
-  private _apiCalled(ev) {
-    if (ev.detail.success) {
-      this._loadData();
-    }
-  }
-
-  private _manageRepositoriesClicked() {
-    this._manageRepositories();
-  }
-
-  private _manageRepositories(url?: string) {
-    showRepositoriesDialog(this, {
-      supervisor: this.supervisor,
-      url,
-    });
-  }
-
-  private _manageRegistries() {
-    showRegistriesDialog(this, { supervisor: this.supervisor });
-  }
-
-  private _loadData() {
-    fireEvent(this, "supervisor-collection-refresh", { collection: "addon" });
-    fireEvent(this, "supervisor-collection-refresh", {
-      collection: "supervisor",
-    });
-  }
-
-  private _filterChanged(e) {
-    this._filter = e.detail.value;
-  }
-
-  static styles = css`
-    hassio-addon-repository {
-      margin-top: 24px;
-    }
-    .search {
-      position: sticky;
-      top: 0;
-      z-index: 2;
-    }
-    search-input {
-      display: block;
-      --mdc-text-field-fill-color: var(--sidebar-background-color);
-      --mdc-text-field-idle-line-color: var(--divider-color);
-    }
-    .advanced {
-      padding: 12px;
-      display: flex;
-      flex-wrap: wrap;
-      color: var(--primary-text-color);
-    }
-    .advanced a {
-      margin-left: 0.5em;
-      margin-inline-start: 0.5em;
-      margin-inline-end: initial;
-      color: var(--primary-color);
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hassio-addon-store": HassioAddonStore;
-  }
-}

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

@@ -1,294 +0,0 @@
-import {
-  mdiCogs,
-  mdiFileDocument,
-  mdiInformationVariant,
-  mdiMathLog,
-} from "@mdi/js";
-import type { CSSResultGroup, TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import memoizeOne from "memoize-one";
-import { fireEvent } from "../../../src/common/dom/fire_event";
-import { navigate } from "../../../src/common/navigate";
-import { extractSearchParam } from "../../../src/common/url/search-params";
-import type { HassioAddonDetails } from "../../../src/data/hassio/addon";
-import {
-  fetchAddonInfo,
-  fetchHassioAddonInfo,
-  fetchHassioAddonsInfo,
-} from "../../../src/data/hassio/addon";
-import { extractApiErrorMessage } from "../../../src/data/hassio/common";
-import type { StoreAddonDetails } from "../../../src/data/supervisor/store";
-import {
-  addStoreRepository,
-  fetchSupervisorStore,
-} from "../../../src/data/supervisor/store";
-import type { Supervisor } from "../../../src/data/supervisor/supervisor";
-import { showConfirmationDialog } from "../../../src/dialogs/generic/show-dialog-box";
-import "../../../src/layouts/hass-error-screen";
-import "../../../src/layouts/hass-loading-screen";
-import "../../../src/layouts/hass-tabs-subpage";
-import type { PageNavigation } from "../../../src/layouts/hass-tabs-subpage";
-import { haStyle } from "../../../src/resources/styles";
-import type { HomeAssistant, Route } from "../../../src/types";
-import { hassioStyle } from "../resources/hassio-style";
-import "./config/hassio-addon-audio";
-import "./config/hassio-addon-config";
-import "./config/hassio-addon-network";
-import "./hassio-addon-router";
-import "./info/hassio-addon-info";
-
-@customElement("hassio-addon-dashboard")
-class HassioAddonDashboard extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ attribute: false }) public supervisor!: Supervisor;
-
-  @property({ attribute: false }) public route!: Route;
-
-  @property({ attribute: false }) public addon?:
-    | HassioAddonDetails
-    | StoreAddonDetails;
-
-  @property({ type: Boolean }) public narrow = false;
-
-  @state()
-  private _controlEnabled = false;
-
-  @state() private _error?: string;
-
-  private _backPath = new URLSearchParams(window.parent.location.search).get(
-    "store"
-  )
-    ? "/hassio/store"
-    : "/hassio/dashboard";
-
-  private _computeTail = memoizeOne((route: Route) => {
-    const dividerPos = route.path.indexOf("/", 1);
-    return dividerPos === -1
-      ? {
-          prefix: route.prefix + route.path,
-          path: "",
-        }
-      : {
-          prefix: route.prefix + route.path.substr(0, dividerPos),
-          path: route.path.substr(dividerPos),
-        };
-  });
-
-  protected render(): TemplateResult {
-    if (this._error) {
-      return html`<hass-error-screen
-        .error=${this._error}
-      ></hass-error-screen>`;
-    }
-
-    if (!this.addon || !this.supervisor?.addon) {
-      return html`<hass-loading-screen></hass-loading-screen>`;
-    }
-
-    const addonTabs: PageNavigation[] = [
-      {
-        translationKey: "addon.panel.info",
-        path: `/hassio/addon/${this.addon.slug}/info`,
-        iconPath: mdiInformationVariant,
-      },
-    ];
-
-    if (this.addon.documentation) {
-      addonTabs.push({
-        translationKey: "addon.panel.documentation",
-        path: `/hassio/addon/${this.addon.slug}/documentation`,
-        iconPath: mdiFileDocument,
-      });
-    }
-
-    if (this.addon.version) {
-      addonTabs.push(
-        {
-          translationKey: "addon.panel.configuration",
-          path: `/hassio/addon/${this.addon.slug}/config`,
-          iconPath: mdiCogs,
-        },
-        {
-          translationKey: "addon.panel.log",
-          path: `/hassio/addon/${this.addon.slug}/logs`,
-          iconPath: mdiMathLog,
-        }
-      );
-    }
-
-    const route = this._computeTail(this.route);
-
-    return html`
-      <hass-tabs-subpage
-        .hass=${this.hass}
-        .localizeFunc=${this.supervisor.localize}
-        .narrow=${this.narrow}
-        .route=${route}
-        .tabs=${addonTabs}
-        .backPath=${this._backPath}
-        supervisor
-      >
-        <span slot="header">${this.addon.name}</span>
-        <hassio-addon-router
-          .route=${route}
-          .narrow=${this.narrow}
-          .hass=${this.hass}
-          .supervisor=${this.supervisor}
-          .addon=${this.addon}
-          .controlEnabled=${this._controlEnabled}
-          @system-managed-take-control=${this._enableControl}
-        ></hassio-addon-router>
-      </hass-tabs-subpage>
-    `;
-  }
-
-  private _enableControl() {
-    this._controlEnabled = true;
-  }
-
-  static get styles(): CSSResultGroup {
-    return [
-      haStyle,
-      hassioStyle,
-      css`
-        :host {
-          color: var(--primary-text-color);
-        }
-        .content {
-          padding: 24px 0 32px;
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-        }
-        hassio-addon-info,
-        hassio-addon-network,
-        hassio-addon-audio,
-        hassio-addon-config {
-          margin-bottom: 24px;
-          width: 600px;
-        }
-        @media only screen and (max-width: 600px) {
-          hassio-addon-info,
-          hassio-addon-network,
-          hassio-addon-audio,
-          hassio-addon-config {
-            max-width: 100%;
-            min-width: 100%;
-          }
-        }
-      `,
-    ];
-  }
-
-  protected async firstUpdated(): Promise<void> {
-    if (this.route.path === "") {
-      const requestedAddon = extractSearchParam("addon");
-      const requestedAddonRepository = extractSearchParam("repository_url");
-      if (requestedAddonRepository) {
-        const storeInfo = await fetchSupervisorStore(this.hass);
-        if (
-          !storeInfo.repositories.find(
-            (repo) => repo.source === requestedAddonRepository
-          )
-        ) {
-          if (
-            !(await showConfirmationDialog(this, {
-              title: this.supervisor.localize("my.add_addon_repository_title"),
-              text: this.supervisor.localize(
-                "my.add_addon_repository_description",
-                { addon: requestedAddon, repository: requestedAddonRepository }
-              ),
-              confirmText: this.supervisor.localize("common.add"),
-              dismissText: this.supervisor.localize("common.cancel"),
-            }))
-          ) {
-            this._error = this.supervisor.localize(
-              "my.error_repository_not_found"
-            );
-            return;
-          }
-
-          try {
-            await addStoreRepository(this.hass, requestedAddonRepository);
-          } catch (err: any) {
-            this._error = extractApiErrorMessage(err);
-          }
-        }
-      }
-
-      if (requestedAddon) {
-        const store = await fetchSupervisorStore(this.hass);
-        const validAddon = store.addons.some(
-          (addon) => addon.slug === requestedAddon
-        );
-        if (!validAddon) {
-          this._error = this.supervisor.localize("my.error_addon_not_found");
-        } else {
-          navigate(`/hassio/addon/${requestedAddon}`, { replace: true });
-        }
-      }
-    }
-    this.addEventListener("hass-api-called", (ev) => this._apiCalled(ev));
-  }
-
-  private async _apiCalled(ev): Promise<void> {
-    if (!ev.detail.success) {
-      return;
-    }
-
-    const pathSplit: string[] = ev.detail.path?.split("/");
-
-    if (!pathSplit || pathSplit.length === 0) {
-      return;
-    }
-
-    const path: string = pathSplit[pathSplit.length - 1];
-
-    if (["uninstall", "install", "update", "start", "stop"].includes(path)) {
-      fireEvent(this, "supervisor-collection-refresh", {
-        collection: "addon",
-      });
-    }
-
-    if (path === "uninstall") {
-      if (this.isConnected) {
-        navigate(this._backPath);
-      }
-    } else if (path === "install") {
-      this.addon = await fetchHassioAddonInfo(this.hass, this.addon!.slug);
-    } else {
-      await this._routeDataChanged();
-    }
-  }
-
-  protected updated(changedProperties) {
-    if (changedProperties.has("route") && !this.addon) {
-      this._routeDataChanged();
-    }
-  }
-
-  private async _routeDataChanged(): Promise<void> {
-    const addon = this.route.path.split("/")[1];
-    if (!addon) {
-      return;
-    }
-    try {
-      if (!this.supervisor.addon) {
-        const addonsInfo = await fetchHassioAddonsInfo(this.hass);
-        fireEvent(this, "supervisor-update", { addon: addonsInfo });
-      }
-      this.addon = await fetchAddonInfo(this.hass, this.supervisor, addon);
-    } catch (err: any) {
-      this._error = `Error fetching addon info: ${extractApiErrorMessage(err)}`;
-      this.addon = undefined;
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hassio-addon-dashboard": HassioAddonDashboard;
-  }
-}

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

@@ -1,62 +0,0 @@
-import { customElement, property } from "lit/decorators";
-import type { HassioAddonDetails } from "../../../src/data/hassio/addon";
-import type { StoreAddonDetails } from "../../../src/data/supervisor/store";
-import type { Supervisor } from "../../../src/data/supervisor/supervisor";
-import type { RouterOptions } from "../../../src/layouts/hass-router-page";
-import { HassRouterPage } from "../../../src/layouts/hass-router-page";
-import type { HomeAssistant } from "../../../src/types";
-import "./config/hassio-addon-config-tab";
-import "./documentation/hassio-addon-documentation-tab";
-// Don't codesplit the others, because it breaks the UI when pushed to a Pi
-import "./info/hassio-addon-info-tab";
-import "./log/hassio-addon-log-tab";
-
-@customElement("hassio-addon-router")
-class HassioAddonRouter extends HassRouterPage {
-  @property({ type: Boolean }) public narrow = false;
-
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ attribute: false }) public supervisor!: Supervisor;
-
-  @property({ attribute: false }) public addon!:
-    | HassioAddonDetails
-    | StoreAddonDetails;
-
-  @property({ type: Boolean, attribute: "control-enabled" })
-  public controlEnabled = false;
-
-  protected routerOptions: RouterOptions = {
-    defaultPage: "info",
-    showLoading: true,
-    routes: {
-      info: {
-        tag: "hassio-addon-info-tab",
-      },
-      documentation: {
-        tag: "hassio-addon-documentation-tab",
-      },
-      config: {
-        tag: "hassio-addon-config-tab",
-      },
-      logs: {
-        tag: "hassio-addon-log-tab",
-      },
-    },
-  };
-
-  protected updatePageEl(el) {
-    el.route = this.routeTail;
-    el.hass = this.hass;
-    el.supervisor = this.supervisor;
-    el.addon = this.addon;
-    el.narrow = this.narrow;
-    el.controlEnabled = this.controlEnabled;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hassio-addon-router": HassioAddonRouter;
-  }
-}

hassio/src/backups/hassio-backups.ts

@@ -1,425 +0,0 @@
-import type { ActionDetail } from "@material/mwc-list";
-
-import { mdiBackupRestore, mdiDelete, mdiDotsVertical, mdiPlus } from "@mdi/js";
-import type { CSSResultGroup, PropertyValues } from "lit";
-import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
-import memoizeOne from "memoize-one";
-import { atLeastVersion } from "../../../src/common/config/version";
-import { relativeTime } from "../../../src/common/datetime/relative_time";
-import type { HASSDomEvent } from "../../../src/common/dom/fire_event";
-import type {
-  DataTableColumnContainer,
-  RowClickedEvent,
-  SelectionChangedEvent,
-} from "../../../src/components/data-table/ha-data-table";
-import "../../../src/components/ha-button-menu";
-import "../../../src/components/ha-fab";
-import "../../../src/components/ha-button";
-import "../../../src/components/ha-icon-button";
-import "../../../src/components/ha-list-item";
-import "../../../src/components/ha-svg-icon";
-import type { HassioBackup } from "../../../src/data/hassio/backup";
-import {
-  fetchHassioBackups,
-  friendlyFolderName,
-  reloadHassioBackups,
-  removeBackup,
-} from "../../../src/data/hassio/backup";
-import { extractApiErrorMessage } from "../../../src/data/hassio/common";
-import type { Supervisor } from "../../../src/data/supervisor/supervisor";
-import {
-  showAlertDialog,
-  showConfirmationDialog,
-} from "../../../src/dialogs/generic/show-dialog-box";
-import "../../../src/layouts/hass-loading-screen";
-import "../../../src/layouts/hass-tabs-subpage-data-table";
-import type { HaTabsSubpageDataTable } from "../../../src/layouts/hass-tabs-subpage-data-table";
-import { haStyle } from "../../../src/resources/styles";
-import type { HomeAssistant, Route } from "../../../src/types";
-import { showBackupUploadDialog } from "../dialogs/backup/show-dialog-backup-upload";
-import { showHassioBackupLocationDialog } from "../dialogs/backup/show-dialog-hassio-backu-location";
-import { showHassioBackupDialog } from "../dialogs/backup/show-dialog-hassio-backup";
-import { showHassioCreateBackupDialog } from "../dialogs/backup/show-dialog-hassio-create-backup";
-import { supervisorTabs } from "../hassio-tabs";
-import { hassioStyle } from "../resources/hassio-style";
-
-type BackupItem = HassioBackup & {
-  secondary: string;
-};
-
-@customElement("hassio-backups")
-export class HassioBackups extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ attribute: false }) public supervisor!: Supervisor;
-
-  @property({ attribute: false }) public route!: Route;
-
-  @property({ type: Boolean }) public narrow = false;
-
-  @property({ attribute: "is-wide", type: Boolean }) public isWide = false;
-
-  @state() private _selectedBackups: string[] = [];
-
-  @state() private _backups?: HassioBackup[] = [];
-
-  @state() private _isLoading = false;
-
-  @query("hass-tabs-subpage-data-table", true)
-  private _dataTable!: HaTabsSubpageDataTable;
-
-  private _firstUpdatedCalled = false;
-
-  public connectedCallback(): void {
-    super.connectedCallback();
-    if (this.hass && this._firstUpdatedCalled) {
-      this._fetchBackups();
-    }
-  }
-
-  private _computeBackupContent = (backup: HassioBackup): string => {
-    if (backup.type === "full") {
-      return this.supervisor.localize("backup.full_backup");
-    }
-    const content: string[] = [];
-    if (backup.content.homeassistant) {
-      content.push("Home Assistant");
-    }
-    if (backup.content.folders.length !== 0) {
-      for (const folder of backup.content.folders) {
-        content.push(friendlyFolderName[folder] || folder);
-      }
-    }
-
-    if (backup.content.addons.length !== 0) {
-      for (const addon of backup.content.addons) {
-        content.push(
-          this.supervisor.addon.addons.find((entry) => entry.slug === addon)
-            ?.name || addon
-        );
-      }
-    }
-
-    return content.join(", ");
-  };
-
-  protected firstUpdated(changedProperties: PropertyValues): void {
-    super.firstUpdated(changedProperties);
-    if (this.hass && this.isConnected) {
-      this._fetchBackups();
-    }
-    this._firstUpdatedCalled = true;
-  }
-
-  private _columns = memoizeOne(
-    (narrow: boolean): DataTableColumnContainer<BackupItem> => ({
-      name: {
-        title: this.supervisor.localize("backup.name"),
-        main: true,
-        sortable: true,
-        filterable: true,
-        flex: 2,
-        template: (backup) =>
-          html`${backup.name || backup.slug}
-            <div class="secondary">${backup.secondary}</div>`,
-      },
-      size: {
-        title: this.supervisor.localize("backup.size"),
-        hidden: narrow,
-        filterable: true,
-        sortable: true,
-        template: (backup) => Math.ceil(backup.size * 10) / 10 + " MB",
-      },
-      location: {
-        title: this.supervisor.localize("backup.location"),
-        hidden: narrow,
-        filterable: true,
-        sortable: true,
-        template: (backup) =>
-          backup.location || this.supervisor.localize("backup.data_disk"),
-      },
-      date: {
-        title: this.supervisor.localize("backup.created"),
-        direction: "desc",
-        hidden: narrow,
-        filterable: true,
-        sortable: true,
-        template: (backup) =>
-          relativeTime(new Date(backup.date), this.hass.locale),
-      },
-      secondary: {
-        title: "",
-        hidden: true,
-        filterable: true,
-      },
-    })
-  );
-
-  private _backupData = memoizeOne((backups: HassioBackup[]): BackupItem[] =>
-    backups.map((backup) => ({
-      ...backup,
-      secondary: this._computeBackupContent(backup),
-    }))
-  );
-
-  protected render() {
-    if (!this.supervisor) {
-      return nothing;
-    }
-
-    if (this._isLoading) {
-      return html`<hass-loading-screen
-        .message=${this.supervisor.localize("backup.loading_backups")}
-      ></hass-loading-screen>`;
-    }
-
-    return html`
-      <hass-tabs-subpage-data-table
-        .tabs=${atLeastVersion(this.hass.config.version, 2022, 5)
-          ? [
-              {
-                translationKey: "panel.backups",
-                path: `/hassio/backups`,
-                iconPath: mdiBackupRestore,
-              },
-            ]
-          : supervisorTabs(this.hass)}
-        .hass=${this.hass}
-        .localizeFunc=${this.supervisor.localize}
-        .searchLabel=${this.supervisor.localize("backup.search")}
-        .noDataText=${this.supervisor.localize("backup.no_backups")}
-        .narrow=${this.narrow}
-        .route=${this.route}
-        .columns=${this._columns(this.narrow)}
-        .data=${this._backupData(this._backups || [])}
-        id="slug"
-        @row-click=${this._handleRowClicked}
-        @selection-changed=${this._handleSelectionChanged}
-        clickable
-        selectable
-        has-fab
-        .mainPage=${!atLeastVersion(this.hass.config.version, 2021, 12)}
-        back-path=${atLeastVersion(this.hass.config.version, 2022, 5)
-          ? "/config/system"
-          : "/config"}
-        supervisor
-      >
-        <ha-button-menu slot="toolbar-icon" @action=${this._handleAction}>
-          <ha-icon-button
-            .label=${this.supervisor?.localize("common.menu")}
-            .path=${mdiDotsVertical}
-            slot="trigger"
-          ></ha-icon-button>
-          <ha-list-item>
-            ${this.supervisor.localize("common.reload")}
-          </ha-list-item>
-          <ha-list-item>
-            ${this.supervisor.localize("dialog.backup_location.title")}
-          </ha-list-item>
-          ${atLeastVersion(this.hass.config.version, 0, 116)
-            ? html`<ha-list-item>
-                ${this.supervisor.localize("backup.upload_backup")}
-              </ha-list-item>`
-            : ""}
-        </ha-button-menu>
-
-        ${this._selectedBackups.length
-          ? html`<div
-              class=${classMap({
-                "header-toolbar": this.narrow,
-                "table-header": !this.narrow,
-              })}
-              slot="header"
-            >
-              <p class="selected-txt">
-                ${this.supervisor.localize("backup.selected", {
-                  number: this._selectedBackups.length,
-                })}
-              </p>
-              <div class="header-btns">
-                ${!this.narrow
-                  ? html`
-                      <ha-button
-                        appearance="plain"
-                        variant="danger"
-                        @click=${this._deleteSelected}
-                      >
-                        ${this.supervisor.localize("backup.delete_selected")}
-                      </ha-button>
-                    `
-                  : html`
-                      <ha-icon-button
-                        .label=${this.supervisor.localize(
-                          "backup.delete_selected"
-                        )}
-                        .path=${mdiDelete}
-                        class="warning"
-                        @click=${this._deleteSelected}
-                      ></ha-icon-button>
-                    `}
-              </div>
-            </div> `
-          : ""}
-
-        <ha-fab
-          slot="fab"
-          @click=${this._createBackup}
-          .label=${this.supervisor.localize("backup.create_backup")}
-          extended
-        >
-          <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
-        </ha-fab>
-      </hass-tabs-subpage-data-table>
-    `;
-  }
-
-  private _handleAction(ev: CustomEvent<ActionDetail>) {
-    switch (ev.detail.index) {
-      case 0:
-        this._fetchBackups();
-        break;
-      case 1:
-        showHassioBackupLocationDialog(this, { supervisor: this.supervisor });
-        break;
-      case 2:
-        this._showUploadBackupDialog();
-        break;
-    }
-  }
-
-  private _handleSelectionChanged(
-    ev: HASSDomEvent<SelectionChangedEvent>
-  ): void {
-    this._selectedBackups = ev.detail.value;
-  }
-
-  private _showUploadBackupDialog() {
-    showBackupUploadDialog(this, {
-      showBackup: (slug: string) =>
-        showHassioBackupDialog(this, {
-          slug,
-          supervisor: this.supervisor,
-          onDelete: () => this._fetchBackups(),
-        }),
-      reloadBackup: () => this._fetchBackups(),
-    });
-  }
-
-  private async _fetchBackups() {
-    this._isLoading = true;
-    await reloadHassioBackups(this.hass);
-    this._backups = await fetchHassioBackups(this.hass);
-    this._isLoading = false;
-  }
-
-  private async _deleteSelected() {
-    const confirm = await showConfirmationDialog(this, {
-      title: this.supervisor.localize("backup.delete_backup_title"),
-      text: this.supervisor.localize("backup.delete_backup_text", {
-        number: this._selectedBackups.length,
-      }),
-      confirmText: this.supervisor.localize("backup.delete_backup_confirm"),
-      destructive: true,
-    });
-
-    if (!confirm) {
-      return;
-    }
-
-    try {
-      await Promise.all(
-        this._selectedBackups.map((slug) => removeBackup(this.hass, slug))
-      );
-    } catch (err: any) {
-      showAlertDialog(this, {
-        title: this.supervisor.localize("backup.failed_to_delete"),
-        text: extractApiErrorMessage(err),
-      });
-      return;
-    }
-    await this._fetchBackups();
-    this._dataTable.clearSelection();
-  }
-
-  private _handleRowClicked(ev: HASSDomEvent<RowClickedEvent>) {
-    const slug = ev.detail.id;
-    showHassioBackupDialog(this, {
-      slug,
-      supervisor: this.supervisor,
-      onDelete: () => this._fetchBackups(),
-    });
-  }
-
-  private _createBackup() {
-    if (this.supervisor!.info.state !== "running") {
-      showAlertDialog(this, {
-        title: this.supervisor!.localize("backup.could_not_create"),
-        text: this.supervisor!.localize("backup.create_blocked_not_running", {
-          state: this.supervisor!.info.state,
-        }),
-      });
-      return;
-    }
-    showHassioCreateBackupDialog(this, {
-      supervisor: this.supervisor!,
-      onCreate: () => this._fetchBackups(),
-    });
-  }
-
-  static get styles(): CSSResultGroup {
-    return [
-      haStyle,
-      hassioStyle,
-      css`
-        :host {
-          color: var(--primary-text-color);
-        }
-        .table-header {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          height: 58px;
-          border-bottom: 1px solid rgba(var(--rgb-primary-text-color), 0.12);
-        }
-        .header-toolbar {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          color: var(--secondary-text-color);
-          position: relative;
-          top: -4px;
-        }
-        .selected-txt {
-          font-weight: var(--ha-font-weight-bold);
-          padding-left: 16px;
-          padding-inline-start: 16px;
-          padding-inline-end: initial;
-          color: var(--primary-text-color);
-        }
-        .table-header .selected-txt {
-          margin-top: 20px;
-        }
-        .header-toolbar .selected-txt {
-          font-size: var(--ha-font-size-l);
-        }
-        .header-toolbar .header-btns {
-          margin-right: -12px;
-          margin-inline-end: -12px;
-          margin-inline-start: initial;
-        }
-        .header-btns > ha-button,
-        .header-btns > ha-icon-button {
-          margin: 8px;
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hassio-backups": HassioBackups;
-  }
-}

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

@@ -1,89 +0,0 @@
-import { mdiFolderUpload } from "@mdi/js";
-import type { TemplateResult } from "lit";
-import { html, LitElement } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { fireEvent } from "../../../src/common/dom/fire_event";
-import "../../../src/components/ha-file-upload";
-import type { HassioBackup } from "../../../src/data/hassio/backup";
-import { uploadBackup } from "../../../src/data/hassio/backup";
-import { extractApiErrorMessage } from "../../../src/data/hassio/common";
-import { showAlertDialog } from "../../../src/dialogs/generic/show-dialog-box";
-import type { HomeAssistant } from "../../../src/types";
-import type { LocalizeFunc } from "../../../src/common/translations/localize";
-
-declare global {
-  interface HASSDomEvents {
-    "hassio-backup-uploaded": { backup: HassioBackup };
-    "backup-cleared": undefined;
-  }
-}
-
-@customElement("hassio-upload-backup")
-export class HassioUploadBackup extends LitElement {
-  public hass?: HomeAssistant;
-
-  @property({ attribute: false }) public localize?: LocalizeFunc;
-
-  @state() public value: string | null = null;
-
-  @state() private _uploading = false;
-
-  public render(): TemplateResult {
-    return html`
-      <ha-file-upload
-        .hass=${this.hass}
-        .uploading=${this._uploading}
-        .icon=${mdiFolderUpload}
-        accept="application/x-tar"
-        .label=${this.localize?.(
-          "ui.panel.page-onboarding.restore.upload_backup"
-        ) || "Upload backup"}
-        .supports=${this.localize?.(
-          "ui.panel.page-onboarding.restore.upload_supports"
-        ) || "Supports .TAR files"}
-        .secondary=${this.localize?.(
-          "ui.panel.page-onboarding.restore.upload_drop"
-        ) || "Or drop your file here"}
-        @file-picked=${this._uploadFile}
-        @files-cleared=${this._clear}
-      ></ha-file-upload>
-    `;
-  }
-
-  private _clear() {
-    this.value = null;
-    fireEvent(this, "backup-cleared");
-  }
-
-  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 backup file (.tar)",
-        confirmText: "ok",
-      });
-      return;
-    }
-    this._uploading = true;
-    try {
-      const backup = await uploadBackup(this.hass, file);
-      fireEvent(this, "hassio-backup-uploaded", { backup: backup.data });
-    } catch (err: any) {
-      showAlertDialog(this, {
-        title: "Upload failed",
-        text: extractApiErrorMessage(err),
-        confirmText: "ok",
-      });
-    } finally {
-      this._uploading = false;
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hassio-upload-backup": HassioUploadBackup;
-  }
-}

hassio/src/components/supervisor-backup-content.ts

@@ -1,460 +0,0 @@
-import { mdiFolder, mdiPuzzle } from "@mdi/js";
-import type { TemplateResult } from "lit";
-import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, query } from "lit/decorators";
-import { atLeastVersion } from "../../../src/common/config/version";
-import { formatDate } from "../../../src/common/datetime/format_date";
-import { formatDateTime } from "../../../src/common/datetime/format_date_time";
-import "../../../src/components/ha-checkbox";
-import "../../../src/components/ha-formfield";
-import "../../../src/components/ha-textfield";
-import "../../../src/components/ha-password-field";
-import "../../../src/components/ha-radio";
-import type { HaRadio } from "../../../src/components/ha-radio";
-import type {
-  HassioBackupDetail,
-  HassioFullBackupCreateParams,
-  HassioPartialBackupCreateParams,
-} from "../../../src/data/hassio/backup";
-import type { Supervisor } from "../../../src/data/supervisor/supervisor";
-import { mdiHomeAssistant } from "../../../src/resources/home-assistant-logo-svg";
-import type { HomeAssistant } from "../../../src/types";
-import "./supervisor-formfield-label";
-import type { HaTextField } from "../../../src/components/ha-textfield";
-
-interface CheckboxItem {
-  slug: string;
-  checked: boolean;
-  name: string;
-}
-
-interface AddonCheckboxItem extends CheckboxItem {
-  version: string;
-}
-
-const _computeFolders = (folders): CheckboxItem[] => {
-  const list: CheckboxItem[] = [];
-  if (folders.includes("ssl")) {
-    list.push({ slug: "ssl", name: "SSL", checked: false });
-  }
-  if (folders.includes("share")) {
-    list.push({ slug: "share", name: "Share", checked: false });
-  }
-  if (folders.includes("media")) {
-    list.push({ slug: "media", name: "Media", checked: false });
-  }
-  if (folders.includes("addons/local")) {
-    list.push({ slug: "addons/local", name: "Local add-ons", checked: false });
-  }
-  return list.sort((a, b) => (a.name > b.name ? 1 : -1));
-};
-
-const _computeAddons = (addons): AddonCheckboxItem[] =>
-  addons
-    .map((addon) => ({
-      slug: addon.slug,
-      name: addon.name,
-      version: addon.version,
-      checked: false,
-    }))
-    .sort((a, b) => (a.name > b.name ? 1 : -1));
-
-@customElement("supervisor-backup-content")
-export class SupervisorBackupContent extends LitElement {
-  @property({ attribute: false }) public hass?: HomeAssistant;
-
-  @property({ attribute: false }) public supervisor?: Supervisor;
-
-  @property({ attribute: false }) public backup?: HassioBackupDetail;
-
-  @property({ attribute: false })
-  public backupType: HassioBackupDetail["type"] = "full";
-
-  @property({ attribute: false }) public folders?: CheckboxItem[];
-
-  @property({ attribute: false }) public addons?: AddonCheckboxItem[];
-
-  @property({ attribute: false }) public homeAssistant = false;
-
-  @property({ attribute: false }) public backupHasPassword = false;
-
-  @property({ type: Boolean }) public onboarding = false;
-
-  @property({ attribute: false }) public backupName = "";
-
-  @property({ attribute: false }) public backupPassword = "";
-
-  @property({ attribute: false }) public confirmBackupPassword = "";
-
-  @query("ha-textfield, ha-radio, ha-checkbox", true) private _focusTarget;
-
-  public willUpdate(changedProps) {
-    super.willUpdate(changedProps);
-    if (!this.hasUpdated) {
-      this.folders = _computeFolders(
-        this.backup
-          ? this.backup.folders
-          : ["ssl", "share", "media", "addons/local"]
-      );
-      this.addons = _computeAddons(
-        this.backup ? this.backup.addons : this.supervisor?.addon.addons
-      );
-      this.backupType = this.backup?.type || "full";
-      this.backupName = this.backup?.name || "";
-      this.backupHasPassword = this.backup?.protected || false;
-    }
-  }
-
-  public override focus() {
-    this._focusTarget?.focus();
-  }
-
-  protected render() {
-    if (!this.onboarding && !this.supervisor) {
-      return nothing;
-    }
-    const foldersSection =
-      this.backupType === "partial" ? this._getSection("folders") : undefined;
-    const addonsSection =
-      this.backupType === "partial" ? this._getSection("addons") : undefined;
-
-    return html`
-      ${this.backup
-        ? html`<div class="details">
-            ${this.backup.type === "full"
-              ? this.supervisor?.localize("backup.full_backup")
-              : this.supervisor?.localize("backup.partial_backup")}
-            (${Math.ceil(this.backup.size * 10) / 10 + " MB"})<br />
-            ${this.hass
-              ? formatDateTime(
-                  new Date(this.backup.date),
-                  this.hass.locale,
-                  this.hass.config
-                )
-              : this.backup.date}
-          </div>`
-        : html`<ha-textfield
-            name="backupName"
-            .label=${this.supervisor?.localize("backup.name")}
-            .value=${this.backupName}
-            @change=${this._handleTextValueChanged}
-          >
-          </ha-textfield>`}
-      ${!this.backup || this.backup.type === "full"
-        ? html`<div class="sub-header">
-              ${!this.backup
-                ? this.supervisor?.localize("backup.type")
-                : this.supervisor?.localize("backup.select_type")}
-            </div>
-            <div class="backup-types">
-              <ha-formfield
-                .label=${this.supervisor?.localize("backup.full_backup")}
-              >
-                <ha-radio
-                  @change=${this._handleRadioValueChanged}
-                  value="full"
-                  name="backupType"
-                  .checked=${this.backupType === "full"}
-                >
-                </ha-radio>
-              </ha-formfield>
-              <ha-formfield
-                .label=${this.supervisor?.localize("backup.partial_backup")}
-              >
-                <ha-radio
-                  @change=${this._handleRadioValueChanged}
-                  value="partial"
-                  name="backupType"
-                  .checked=${this.backupType === "partial"}
-                >
-                </ha-radio>
-              </ha-formfield>
-            </div>`
-        : ""}
-      ${this.backupType === "partial"
-        ? html`<div class="partial-picker">
-            ${!this.backup || this.backup.homeassistant
-              ? html`<ha-formfield
-                  .label=${html`<supervisor-formfield-label
-                    label="Home Assistant"
-                    .iconPath=${mdiHomeAssistant}
-                    .version=${this.backup
-                      ? this.backup.homeassistant
-                      : this.hass?.config.version}
-                  >
-                  </supervisor-formfield-label>`}
-                >
-                  <ha-checkbox
-                    .checked=${this.onboarding || this.homeAssistant}
-                    .disabled=${this.onboarding}
-                    @change=${this._toggleHomeAssistant}
-                  >
-                  </ha-checkbox>
-                </ha-formfield>`
-              : ""}
-            ${foldersSection?.templates.length
-              ? html`
-                  <ha-formfield
-                    .label=${html`<supervisor-formfield-label
-                      .label=${this.supervisor?.localize("backup.folders")}
-                      .iconPath=${mdiFolder}
-                    >
-                    </supervisor-formfield-label>`}
-                  >
-                    <ha-checkbox
-                      @change=${this._toggleSection}
-                      .checked=${foldersSection.checked}
-                      .indeterminate=${foldersSection.indeterminate}
-                      .section=${"folders"}
-                    >
-                    </ha-checkbox>
-                  </ha-formfield>
-                  <div class="section-content">${foldersSection.templates}</div>
-                `
-              : ""}
-            ${addonsSection?.templates.length
-              ? html`
-                  <ha-formfield
-                    .label=${html`<supervisor-formfield-label
-                      .label=${this.supervisor?.localize("backup.addons")}
-                      .iconPath=${mdiPuzzle}
-                    >
-                    </supervisor-formfield-label>`}
-                  >
-                    <ha-checkbox
-                      @change=${this._toggleSection}
-                      .checked=${addonsSection.checked}
-                      .indeterminate=${addonsSection.indeterminate}
-                      .section=${"addons"}
-                    >
-                    </ha-checkbox>
-                  </ha-formfield>
-                  <div class="section-content">${addonsSection.templates}</div>
-                `
-              : ""}
-          </div> `
-        : ""}
-      ${this.backupType === "partial" &&
-      (!this.backup || this.backupHasPassword)
-        ? html`<hr />`
-        : ""}
-      ${!this.backup
-        ? html`<ha-formfield
-            class="password"
-            .label=${this.supervisor?.localize("backup.password_protection")}
-          >
-            <ha-checkbox
-              .checked=${this.backupHasPassword}
-              @change=${this._toggleHasPassword}
-            >
-            </ha-checkbox>
-          </ha-formfield>`
-        : ""}
-      ${this.backupHasPassword
-        ? html`
-            <ha-password-field
-              .label=${this.supervisor?.localize("backup.password")}
-              name="backupPassword"
-              .value=${this.backupPassword}
-              @change=${this._handleTextValueChanged}
-            >
-            </ha-password-field>
-            ${!this.backup
-              ? html`<ha-password-field
-                  .label=${this.supervisor?.localize("backup.confirm_password")}
-                  name="confirmBackupPassword"
-                  .value=${this.confirmBackupPassword}
-                  @change=${this._handleTextValueChanged}
-                >
-                </ha-password-field>`
-              : ""}
-          `
-        : ""}
-    `;
-  }
-
-  private _toggleHomeAssistant() {
-    this.homeAssistant = !this.homeAssistant;
-  }
-
-  static styles = css`
-    .partial-picker ha-formfield {
-      display: block;
-    }
-    .partial-picker ha-checkbox {
-      --mdc-checkbox-touch-target-size: 32px;
-    }
-    .partial-picker {
-      display: block;
-      margin: 0px -6px;
-    }
-    supervisor-formfield-label {
-      display: inline-flex;
-      align-items: center;
-    }
-    hr {
-      border-color: var(--divider-color);
-      border-bottom: none;
-      margin: 16px 0;
-    }
-    .details {
-      color: var(--secondary-text-color);
-    }
-    .section-content {
-      display: flex;
-      flex-direction: column;
-      margin-left: 30px;
-      margin-inline-start: 30px;
-      margin-inline-end: initial;
-    }
-    ha-formfield.password {
-      display: block;
-      margin: 0 -14px -16px;
-    }
-    .backup-types {
-      display: flex;
-      margin-left: -13px;
-      margin-inline-start: -13px;
-      margin-inline-end: initial;
-    }
-    .sub-header {
-      margin-top: 8px;
-    }
-  `;
-
-  public backupDetails():
-    | HassioPartialBackupCreateParams
-    | HassioFullBackupCreateParams {
-    const data: any = {};
-
-    if (!this.backup && this.hass) {
-      data.name =
-        this.backupName ||
-        formatDate(new Date(), this.hass.locale, this.hass.config);
-    }
-
-    if (this.backupHasPassword) {
-      data.password = this.backupPassword;
-      if (!this.backup) {
-        data.confirm_password = this.confirmBackupPassword;
-      }
-    }
-
-    if (this.backupType === "full") {
-      return data;
-    }
-
-    const addons = this.addons
-      ?.filter((addon) => addon.checked)
-      .map((addon) => addon.slug);
-    const folders = this.folders
-      ?.filter((folder) => folder.checked)
-      .map((folder) => folder.slug);
-
-    if (addons?.length) {
-      data.addons = addons;
-    }
-    if (folders?.length) {
-      data.folders = folders;
-    }
-
-    // onboarding needs at least homeassistant to restore
-    data.homeassistant = this.onboarding || this.homeAssistant;
-
-    return data;
-  }
-
-  private _getSection(section: string) {
-    const templates: TemplateResult[] = [];
-    const addons =
-      section === "addons"
-        ? new Map(
-            this.supervisor?.addon.addons.map((item) => [item.slug, item])
-          )
-        : undefined;
-    let checkedItems = 0;
-    this[section].forEach((item) => {
-      templates.push(
-        html`<ha-formfield
-          .label=${html`<supervisor-formfield-label
-            .label=${item.name}
-            .iconPath=${section === "addons" ? mdiPuzzle : mdiFolder}
-            .imageUrl=${section === "addons" &&
-            !this.onboarding &&
-            this.hass &&
-            atLeastVersion(this.hass.config.version, 0, 105) &&
-            addons?.get(item.slug)?.icon
-              ? `/api/hassio/addons/${item.slug}/icon`
-              : undefined}
-            .version=${item.version}
-          >
-          </supervisor-formfield-label>`}
-        >
-          <ha-checkbox
-            .item=${item}
-            .checked=${item.checked}
-            .section=${section}
-            @change=${this._updateSectionEntry}
-          >
-          </ha-checkbox>
-        </ha-formfield>`
-      );
-
-      if (item.checked) {
-        checkedItems++;
-      }
-    });
-
-    const checked = checkedItems === this[section].length;
-
-    return {
-      templates,
-      checked,
-      indeterminate: !checked && checkedItems !== 0,
-    };
-  }
-
-  private _handleRadioValueChanged(ev: CustomEvent) {
-    const input = ev.currentTarget as HaRadio;
-    this[input.name] = input.value;
-  }
-
-  private _handleTextValueChanged(ev: InputEvent) {
-    const input = ev.currentTarget as HaTextField;
-    this[input.name!] = input.value;
-  }
-
-  private _toggleHasPassword(): void {
-    this.backupHasPassword = !this.backupHasPassword;
-  }
-
-  private _toggleSection(ev): void {
-    const section = ev.currentTarget.section;
-
-    this[section] = (section === "addons" ? this.addons : this.folders)!.map(
-      (item) => ({
-        ...item,
-        checked: ev.currentTarget.checked,
-      })
-    );
-  }
-
-  private _updateSectionEntry(ev): void {
-    const item = ev.currentTarget.item;
-    const section = ev.currentTarget.section;
-    this[section] = this[section].map((entry) =>
-      entry.slug === item.slug
-        ? {
-            ...entry,
-            checked: ev.currentTarget.checked,
-          }
-        : entry
-    );
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "supervisor-backup-content": SupervisorBackupContent;
-  }
-}

hassio/src/components/supervisor-formfield-label.ts

@@ -1,60 +0,0 @@
-import type { TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
-import "../../../src/components/ha-svg-icon";
-
-@customElement("supervisor-formfield-label")
-class SupervisorFormfieldLabel extends LitElement {
-  @property({ type: String }) public label!: string;
-
-  @property({ attribute: false }) public imageUrl?: string;
-
-  @property({ attribute: false }) public iconPath?: string;
-
-  @property({ type: String }) public version?: string;
-
-  protected render(): TemplateResult {
-    return html`
-      ${this.imageUrl
-        ? html`<img loading="lazy" alt="" src=${this.imageUrl} class="icon" />`
-        : this.iconPath
-          ? html`<ha-svg-icon
-              .path=${this.iconPath}
-              class="icon"
-            ></ha-svg-icon>`
-          : ""}
-      <span class="label">${this.label}</span>
-      ${this.version
-        ? html`<span class="version">(${this.version})</span>`
-        : ""}
-    `;
-  }
-
-  static styles = css`
-    :host {
-      display: flex;
-      align-items: center;
-    }
-    .label {
-      margin-right: 4px;
-      margin-inline-end: 4px;
-      margin-inline-start: initial;
-    }
-    .version {
-      color: var(--secondary-text-color);
-    }
-    .icon {
-      max-height: 22px;
-      max-width: 22px;
-      margin-right: 8px;
-      margin-inline-end: 8px;
-      margin-inline-start: initial;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "supervisor-formfield-label": SupervisorFormfieldLabel;
-  }
-}

hassio/src/dashboard/hassio-addons.ts

@@ -1,164 +0,0 @@
-import { mdiArrowUpBoldCircle, mdiPuzzle } from "@mdi/js";
-import type { CSSResultGroup, TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import memoizeOne from "memoize-one";
-import { atLeastVersion } from "../../../src/common/config/version";
-import { navigate } from "../../../src/common/navigate";
-import { caseInsensitiveStringCompare } from "../../../src/common/string/compare";
-import "../../../src/components/ha-card";
-import "../../../src/components/search-input";
-import type { HassioAddonInfo } from "../../../src/data/hassio/addon";
-import type { Supervisor } from "../../../src/data/supervisor/supervisor";
-import { haStyle } from "../../../src/resources/styles";
-import type { HomeAssistant } from "../../../src/types";
-import "../components/hassio-card-content";
-import { hassioStyle } from "../resources/hassio-style";
-
-@customElement("hassio-addons")
-class HassioAddons extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ attribute: false }) public supervisor!: Supervisor;
-
-  @property({ type: Boolean }) public narrow = false;
-
-  @state() private _filter?: string;
-
-  protected render(): TemplateResult {
-    return html`
-      <div class="search">
-        <search-input
-          .hass=${this.hass}
-          suffix
-          .filter=${this._filter}
-          @value-changed=${this._handleSearchChange}
-          .label=${this.supervisor.localize("dashboard.search_addons")}
-        >
-        </search-input>
-      </div>
-      <div class="content">
-        ${!atLeastVersion(this.hass.config.version, 2021, 12)
-          ? html`<h1>${this.supervisor.localize("dashboard.addons")}</h1>`
-          : ""}
-        <div class="card-group">
-          ${!this.supervisor.addon.addons.length
-            ? html`
-                <ha-card outlined>
-                  <div class="card-content">
-                    <button class="link" @click=${this._openStore}>
-                      ${this.supervisor.localize("dashboard.no_addons")}
-                    </button>
-                  </div>
-                </ha-card>
-              `
-            : this._getAddons(this.supervisor.addon.addons, this._filter).map(
-                (addon) => html`
-                  <ha-card outlined .addon=${addon} @click=${this._addonTapped}>
-                    <div class="card-content">
-                      <hassio-card-content
-                        .hass=${this.hass}
-                        .title=${addon.name}
-                        .description=${addon.description}
-                        available
-                        .showTopbar=${addon.update_available}
-                        topbarClass="update"
-                        .icon=${addon.update_available!
-                          ? mdiArrowUpBoldCircle
-                          : mdiPuzzle}
-                        .iconTitle=${addon.state !== "started"
-                          ? this.supervisor.localize("dashboard.addon_stopped")
-                          : addon.update_available!
-                            ? this.supervisor.localize(
-                                "dashboard.addon_new_version"
-                              )
-                            : this.supervisor.localize(
-                                "dashboard.addon_running"
-                              )}
-                        .iconClass=${addon.update_available
-                          ? addon.state === "started"
-                            ? "update"
-                            : "update stopped"
-                          : addon.state === "started"
-                            ? "running"
-                            : "stopped"}
-                        .iconImage=${atLeastVersion(
-                          this.hass.config.version,
-                          0,
-                          105
-                        ) && addon.icon
-                          ? `/api/hassio/addons/${addon.slug}/icon`
-                          : undefined}
-                      ></hassio-card-content>
-                    </div>
-                  </ha-card>
-                `
-              )}
-        </div>
-      </div>
-    `;
-  }
-
-  private _getAddons = memoizeOne(
-    (addons: HassioAddonInfo[], filter?: string) => {
-      if (filter) {
-        addons = addons.filter((addon) => {
-          const lowerCaseFilter = filter.toLowerCase();
-          return (
-            addon.name.toLowerCase().includes(lowerCaseFilter) ||
-            addon.description.toLowerCase().includes(lowerCaseFilter) ||
-            addon.slug.toLowerCase().includes(lowerCaseFilter)
-          );
-        });
-      }
-      return addons.sort((a, b) =>
-        caseInsensitiveStringCompare(a.name, b.name, this.hass.locale.language)
-      );
-    }
-  );
-
-  private _handleSearchChange(ev: CustomEvent) {
-    this._filter = ev.detail.value;
-  }
-
-  static get styles(): CSSResultGroup {
-    return [
-      haStyle,
-      hassioStyle,
-      css`
-        ha-card {
-          cursor: pointer;
-          overflow: hidden;
-          direction: ltr;
-        }
-        .search {
-          position: sticky;
-          top: 0;
-          z-index: 2;
-        }
-        search-input {
-          display: block;
-          --mdc-text-field-fill-color: var(--sidebar-background-color);
-          --mdc-text-field-idle-line-color: var(--divider-color);
-        }
-        .content {
-          margin-bottom: 72px;
-        }
-      `,
-    ];
-  }
-
-  private _addonTapped(ev: any): void {
-    navigate(`/hassio/addon/${ev.currentTarget.addon.slug}/info`);
-  }
-
-  private _openStore(): void {
-    navigate("/hassio/store");
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hassio-addons": HassioAddons;
-  }
-}

hassio/src/dashboard/hassio-dashboard.ts

@@ -1,150 +0,0 @@
-import { mdiRefresh, mdiStorePlus } from "@mdi/js";
-import type { CSSResultGroup, TemplateResult } from "lit";
-import { LitElement, css, html } from "lit";
-import { customElement, property } from "lit/decorators";
-import { atLeastVersion } from "../../../src/common/config/version";
-import { fireEvent } from "../../../src/common/dom/fire_event";
-import "../../../src/components/ha-fab";
-import { reloadHassioAddons } from "../../../src/data/hassio/addon";
-import { extractApiErrorMessage } from "../../../src/data/hassio/common";
-import type { Supervisor } from "../../../src/data/supervisor/supervisor";
-import { showAlertDialog } from "../../../src/dialogs/generic/show-dialog-box";
-import "../../../src/layouts/hass-subpage";
-import "../../../src/layouts/hass-tabs-subpage";
-import { haStyle } from "../../../src/resources/styles";
-import type { HomeAssistant, Route } from "../../../src/types";
-import { supervisorTabs } from "../hassio-tabs";
-import "./hassio-addons";
-
-@customElement("hassio-dashboard")
-class HassioDashboard extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ attribute: false }) public supervisor!: Supervisor;
-
-  @property({ type: Boolean }) public narrow = false;
-
-  @property({ attribute: false }) public route!: Route;
-
-  firstUpdated() {
-    if (!atLeastVersion(this.hass.config.version, 2022, 5)) {
-      import("./hassio-update");
-    }
-  }
-
-  protected render(): TemplateResult {
-    if (atLeastVersion(this.hass.config.version, 2022, 5)) {
-      return html`<hass-subpage
-        .hass=${this.hass}
-        .narrow=${this.narrow}
-        .route=${this.route}
-        back-path="/config"
-        .header=${this.supervisor.localize("panel.addons")}
-      >
-        <ha-icon-button
-          slot="toolbar-icon"
-          @click=${this._handleCheckUpdates}
-          .path=${mdiRefresh}
-          .label=${this.supervisor.localize("store.check_updates")}
-        ></ha-icon-button>
-        <hassio-addons
-          .hass=${this.hass}
-          .supervisor=${this.supervisor}
-          .narrow=${this.narrow}
-        ></hassio-addons>
-        <a href="/hassio/store">
-          <ha-fab
-            .label=${this.supervisor.localize("panel.store")}
-            extended
-            class="non-tabs"
-          >
-            <ha-svg-icon
-              slot="icon"
-              .path=${mdiStorePlus}
-            ></ha-svg-icon></ha-fab
-        ></a>
-      </hass-subpage>`;
-    }
-
-    return html`
-      <hass-tabs-subpage
-        .hass=${this.hass}
-        .localizeFunc=${this.supervisor.localize}
-        .narrow=${this.narrow}
-        .route=${this.route}
-        .tabs=${supervisorTabs(this.hass)}
-        .mainPage=${!atLeastVersion(this.hass.config.version, 2021, 12)}
-        back-path="/config"
-        supervisor
-        has-fab
-      >
-        <span slot="header">
-          ${this.supervisor.localize(
-            atLeastVersion(this.hass.config.version, 2021, 12)
-              ? "panel.addons"
-              : "panel.dashboard"
-          )}
-        </span>
-        <div class="content">
-          ${!atLeastVersion(this.hass.config.version, 2021, 12)
-            ? html`
-                <hassio-update
-                  .hass=${this.hass}
-                  .supervisor=${this.supervisor}
-                ></hassio-update>
-              `
-            : ""}
-          <hassio-addons
-            .hass=${this.hass}
-            .supervisor=${this.supervisor}
-          ></hassio-addons>
-        </div>
-
-        <a href="/hassio/store" slot="fab">
-          <ha-fab .label=${this.supervisor.localize("panel.store")} extended>
-            <ha-svg-icon
-              slot="icon"
-              .path=${mdiStorePlus}
-            ></ha-svg-icon> </ha-fab
-        ></a>
-      </hass-tabs-subpage>
-    `;
-  }
-
-  private async _handleCheckUpdates() {
-    try {
-      await reloadHassioAddons(this.hass);
-    } catch (err) {
-      showAlertDialog(this, {
-        text: extractApiErrorMessage(err),
-      });
-    } finally {
-      fireEvent(this, "supervisor-collection-refresh", { collection: "addon" });
-    }
-  }
-
-  static get styles(): CSSResultGroup {
-    return [
-      haStyle,
-      css`
-        .content {
-          margin: 0 auto;
-        }
-        ha-fab.non-tabs {
-          position: fixed;
-          right: calc(16px + var(--safe-area-inset-right));
-          bottom: calc(16px + var(--safe-area-inset-bottom));
-          inset-inline-end: calc(16px + var(--safe-area-inset-right));
-          inset-inline-start: initial;
-          z-index: 1;
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hassio-dashboard": HassioDashboard;
-  }
-}

hassio/src/dashboard/hassio-update.ts

@@ -1,158 +0,0 @@
-import type { CSSResultGroup } from "lit";
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
-import memoizeOne from "memoize-one";
-import "../../../src/components/ha-card";
-import "../../../src/components/ha-button";
-import "../../../src/components/ha-settings-row";
-import "../../../src/components/ha-svg-icon";
-import type { HassioHassOSInfo } from "../../../src/data/hassio/host";
-import type {
-  HassioHomeAssistantInfo,
-  HassioSupervisorInfo,
-} from "../../../src/data/hassio/supervisor";
-import type { Supervisor } from "../../../src/data/supervisor/supervisor";
-import { mdiHomeAssistant } from "../../../src/resources/home-assistant-logo-svg";
-import { haStyle } from "../../../src/resources/styles";
-import type { HomeAssistant } from "../../../src/types";
-import { hassioStyle } from "../resources/hassio-style";
-
-const computeVersion = (key: string, version: string): string =>
-  key === "os" ? version : `${key}-${version}`;
-
-@customElement("hassio-update")
-export class HassioUpdate extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ attribute: false }) public supervisor!: Supervisor;
-
-  private _pendingUpdates = memoizeOne(
-    (supervisor: Supervisor): number =>
-      Object.keys(supervisor).filter(
-        (value) => supervisor[value].update_available
-      ).length
-  );
-
-  protected render() {
-    if (!this.supervisor) {
-      return nothing;
-    }
-
-    const updatesAvailable = this._pendingUpdates(this.supervisor);
-    if (!updatesAvailable) {
-      return nothing;
-    }
-
-    return html`
-      <div class="content">
-        <h1>
-          ${this.supervisor.localize("common.update_available", {
-            count: updatesAvailable,
-          })}
-          🎉
-        </h1>
-        <div class="card-group">
-          ${this._renderUpdateCard(
-            "Home Assistant Core",
-            "core",
-            this.supervisor.core
-          )}
-          ${this._renderUpdateCard(
-            "Supervisor",
-            "supervisor",
-            this.supervisor.supervisor
-          )}
-          ${this.supervisor.host.features.includes("haos")
-            ? this._renderUpdateCard(
-                "Operating System",
-                "os",
-                this.supervisor.os
-              )
-            : ""}
-        </div>
-      </div>
-    `;
-  }
-
-  private _renderUpdateCard(
-    name: string,
-    key: string,
-    object: HassioHomeAssistantInfo | HassioSupervisorInfo | HassioHassOSInfo
-  ) {
-    if (!object.update_available) {
-      return nothing;
-    }
-    return html`
-      <ha-card outlined>
-        <div class="card-content">
-          <div class="icon">
-            <ha-svg-icon .path=${mdiHomeAssistant}></ha-svg-icon>
-          </div>
-          <div class="update-heading">${name}</div>
-          <ha-settings-row two-line>
-            <span slot="heading">
-              ${this.supervisor.localize("common.version")}
-            </span>
-            <span slot="description">
-              ${computeVersion(key, object.version!)}
-            </span>
-          </ha-settings-row>
-
-          <ha-settings-row two-line>
-            <span slot="heading">
-              ${this.supervisor.localize("common.newest_version")}
-            </span>
-            <span slot="description">
-              ${computeVersion(key, object.version_latest!)}
-            </span>
-          </ha-settings-row>
-        </div>
-        <div class="card-actions">
-          <ha-button appearance="plain" href="/hassio/update-available/${key}">
-            ${this.supervisor.localize("common.show")}
-          </ha-button>
-        </div>
-      </ha-card>
-    `;
-  }
-
-  static get styles(): CSSResultGroup {
-    return [
-      haStyle,
-      hassioStyle,
-      css`
-        .icon {
-          --mdc-icon-size: 48px;
-          float: right;
-          margin: 0 0 2px 10px;
-          color: var(--primary-text-color);
-        }
-        .update-heading {
-          font-size: var(--ha-font-size-l);
-          font-weight: var(--ha-font-weight-medium);
-          margin-bottom: 0.5em;
-          color: var(--primary-text-color);
-        }
-        .card-content {
-          height: calc(100% - 47px);
-          box-sizing: border-box;
-        }
-        .card-actions {
-          text-align: right;
-        }
-        a {
-          text-decoration: none;
-        }
-        ha-settings-row {
-          padding: 0;
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hassio-update": HassioUpdate;
-  }
-}

hassio/src/dialogs/backup/dialog-hassio-backup-location.ts

@@ -1,155 +0,0 @@
-import type { CSSResultGroup } from "lit";
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import memoizeOne from "memoize-one";
-import { fireEvent } from "../../../../src/common/dom/fire_event";
-import "../../../../src/components/ha-dialog";
-import "../../../../src/components/ha-button";
-import "../../../../src/components/ha-form/ha-form";
-import type { SchemaUnion } from "../../../../src/components/ha-form/types";
-import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
-import { changeMountOptions } from "../../../../src/data/supervisor/mounts";
-import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
-import type { HomeAssistant } from "../../../../src/types";
-import type { HassioBackupLocationDialogParams } from "./show-dialog-hassio-backu-location";
-
-const SCHEMA = memoizeOne(
-  () =>
-    [
-      {
-        name: "default_backup_mount",
-        required: true,
-        selector: { backup_location: {} },
-      },
-    ] as const
-);
-
-@customElement("dialog-hassio-backup-location")
-class HassioBackupLocationDialog extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @state() private _dialogParams?: HassioBackupLocationDialogParams;
-
-  @state() private _data?: { default_backup_mount: string | null };
-
-  @state() private _waiting?: boolean;
-
-  @state() private _error?: string;
-
-  public async showDialog(
-    dialogParams: HassioBackupLocationDialogParams
-  ): Promise<void> {
-    this._dialogParams = dialogParams;
-  }
-
-  public closeDialog(): void {
-    this._data = undefined;
-    this._error = undefined;
-    this._waiting = undefined;
-    this._dialogParams = undefined;
-    fireEvent(this, "dialog-closed", { dialog: this.localName });
-  }
-
-  protected render() {
-    if (!this._dialogParams) {
-      return nothing;
-    }
-    return html`
-      <ha-dialog
-        open
-        scrimClickAction
-        escapeKeyAction
-        .heading=${this._dialogParams.supervisor.localize(
-          "dialog.backup_location.title"
-        )}
-        @closed=${this.closeDialog}
-      >
-        ${this._error
-          ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
-          : nothing}
-
-        <ha-form
-          .hass=${this.hass}
-          .data=${this._data}
-          .schema=${SCHEMA()}
-          .computeLabel=${this._computeLabelCallback}
-          .computeHelper=${this._computeHelperCallback}
-          @value-changed=${this._valueChanged}
-          dialogInitialFocus
-        ></ha-form>
-        <ha-button
-          appearance="plain"
-          slot="secondaryAction"
-          @click=${this.closeDialog}
-          dialogInitialFocus
-        >
-          ${this._dialogParams.supervisor.localize("common.cancel")}
-        </ha-button>
-        <ha-button
-          .disabled=${this._waiting || !this._data}
-          slot="primaryAction"
-          @click=${this._changeMount}
-        >
-          ${this._dialogParams.supervisor.localize("common.save")}
-        </ha-button>
-      </ha-dialog>
-    `;
-  }
-
-  private _computeLabelCallback = (
-    // @ts-ignore
-    schema: SchemaUnion<ReturnType<typeof SCHEMA>>
-  ): string =>
-    this._dialogParams!.supervisor.localize(
-      `dialog.backup_location.options.${schema.name}.name`
-    ) || schema.name;
-
-  private _computeHelperCallback = (
-    // @ts-ignore
-    schema: SchemaUnion<ReturnType<typeof SCHEMA>>
-  ): string =>
-    this._dialogParams!.supervisor.localize(
-      `dialog.backup_location.options.${schema.name}.description`
-    );
-
-  private _valueChanged(ev: CustomEvent) {
-    const newLocation = ev.detail.value.default_backup_mount;
-    this._data = {
-      default_backup_mount: newLocation === "/backup" ? null : newLocation,
-    };
-  }
-
-  private async _changeMount() {
-    if (!this._data) {
-      return;
-    }
-    this._error = undefined;
-    this._waiting = true;
-    try {
-      await changeMountOptions(this.hass, this._data);
-    } catch (err: any) {
-      this._error = extractApiErrorMessage(err);
-      this._waiting = false;
-      return;
-    }
-    this.closeDialog();
-  }
-
-  static get styles(): CSSResultGroup {
-    return [
-      haStyle,
-      haStyleDialog,
-      css`
-        .delete-btn {
-          --mdc-theme-primary: var(--error-color);
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "dialog-hassio-backup-location": HassioBackupLocationDialog;
-  }
-}

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

@@ -1,113 +0,0 @@
-import { mdiClose } from "@mdi/js";
-import type { CSSResultGroup } from "lit";
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { fireEvent } from "../../../../src/common/dom/fire_event";
-import "../../../../src/components/ha-header-bar";
-import "../../../../src/components/ha-icon-button";
-import "../../../../src/components/ha-dialog";
-import type { HassDialog } from "../../../../src/dialogs/make-dialog-manager";
-import { haStyleDialog } from "../../../../src/resources/styles";
-import type { HomeAssistant } from "../../../../src/types";
-import "../../components/hassio-upload-backup";
-import type { HassioBackupUploadDialogParams } from "./show-dialog-backup-upload";
-
-@customElement("dialog-hassio-backup-upload")
-export class DialogHassioBackupUpload
-  extends LitElement
-  implements HassDialog<HassioBackupUploadDialogParams>
-{
-  @property({ attribute: false }) public hass?: HomeAssistant;
-
-  @state() private _dialogParams?: HassioBackupUploadDialogParams;
-
-  public async showDialog(
-    dialogParams: HassioBackupUploadDialogParams
-  ): Promise<void> {
-    this._dialogParams = dialogParams;
-    await this.updateComplete;
-  }
-
-  public closeDialog() {
-    if (this._dialogParams && !this._dialogParams.onboarding) {
-      if (this._dialogParams.reloadBackup) {
-        this._dialogParams.reloadBackup();
-      }
-    }
-    this._dialogParams = undefined;
-    fireEvent(this, "dialog-closed", { dialog: this.localName });
-    return true;
-  }
-
-  protected render() {
-    if (!this._dialogParams) {
-      return nothing;
-    }
-
-    return html`
-      <ha-dialog
-        open
-        scrimClickAction
-        escapeKeyAction
-        hideActions
-        .heading=${this.hass?.localize(
-          "ui.panel.page-onboarding.restore.upload_backup"
-        ) || "Upload backup"}
-        @closed=${this.closeDialog}
-      >
-        <div slot="heading">
-          <ha-header-bar>
-            <span slot="title"
-              >${this.hass?.localize(
-                "ui.panel.page-onboarding.restore.upload_backup"
-              ) || "Upload backup"}</span
-            >
-            <ha-icon-button
-              .label=${this.hass?.localize("ui.common.close") || "Close"}
-              .path=${mdiClose}
-              slot="actionItems"
-              dialogAction="cancel"
-              dialogInitialFocus
-            ></ha-icon-button>
-          </ha-header-bar>
-        </div>
-        <hassio-upload-backup
-          @hassio-backup-uploaded=${this._backupUploaded}
-          .hass=${this.hass}
-        ></hassio-upload-backup>
-      </ha-dialog>
-    `;
-  }
-
-  private _backupUploaded(ev) {
-    const backup = ev.detail.backup;
-    this._dialogParams?.showBackup(backup.slug);
-    this.closeDialog();
-  }
-
-  static get styles(): CSSResultGroup {
-    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-backup-upload": DialogHassioBackupUpload;
-  }
-}

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

@@ -1,339 +0,0 @@
-import type { ActionDetail } from "@material/mwc-list";
-
-import { mdiClose, mdiDotsVertical } from "@mdi/js";
-import type { CSSResultGroup } from "lit";
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
-import { atLeastVersion } from "../../../../src/common/config/version";
-import { fireEvent } from "../../../../src/common/dom/fire_event";
-import { stopPropagation } from "../../../../src/common/dom/stop_propagation";
-import { slugify } from "../../../../src/common/string/slugify";
-import "../../../../src/components/ha-alert";
-import "../../../../src/components/ha-button";
-import "../../../../src/components/ha-button-menu";
-import "../../../../src/components/ha-dialog-header";
-import "../../../../src/components/ha-header-bar";
-import "../../../../src/components/ha-icon-button";
-import "../../../../src/components/ha-list-item";
-import "../../../../src/components/ha-md-dialog";
-import type { HaMdDialog } from "../../../../src/components/ha-md-dialog";
-import "../../../../src/components/ha-spinner";
-import { getSignedPath } from "../../../../src/data/auth";
-import type { HassioBackupDetail } from "../../../../src/data/hassio/backup";
-import {
-  fetchHassioBackupInfo,
-  removeBackup,
-  restoreBackup,
-} from "../../../../src/data/hassio/backup";
-import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
-import {
-  showAlertDialog,
-  showConfirmationDialog,
-} from "../../../../src/dialogs/generic/show-dialog-box";
-import type { HassDialog } from "../../../../src/dialogs/make-dialog-manager";
-import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
-import type { HomeAssistant } from "../../../../src/types";
-import { fileDownload } from "../../../../src/util/file_download";
-import "../../components/supervisor-backup-content";
-import type { SupervisorBackupContent } from "../../components/supervisor-backup-content";
-import type { HassioBackupDialogParams } from "./show-dialog-hassio-backup";
-
-@customElement("dialog-hassio-backup")
-class HassioBackupDialog
-  extends LitElement
-  implements HassDialog<HassioBackupDialogParams>
-{
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @state() private _error?: string;
-
-  @state() private _backup?: HassioBackupDetail;
-
-  @state() private _dialogParams?: HassioBackupDialogParams;
-
-  @state() private _restoringBackup = false;
-
-  @query("supervisor-backup-content")
-  private _backupContent!: SupervisorBackupContent;
-
-  @query("ha-md-dialog") private _dialog?: HaMdDialog;
-
-  public async showDialog(dialogParams: HassioBackupDialogParams) {
-    this._dialogParams = dialogParams;
-    this._backup = await fetchHassioBackupInfo(this.hass, dialogParams.slug);
-    if (!this._backup) {
-      this._error = this._dialogParams.supervisor?.localize(
-        "backup.no_backup_found"
-      );
-    } else if (this._dialogParams.onboarding && !this._backup.homeassistant) {
-      this._error = this._dialogParams.supervisor?.localize(
-        "backup.restore_no_home_assistant"
-      );
-    }
-    this._restoringBackup = false;
-  }
-
-  private _dialogClosed(): void {
-    this._backup = undefined;
-    this._dialogParams = undefined;
-    this._restoringBackup = false;
-    this._error = undefined;
-    fireEvent(this, "dialog-closed", { dialog: this.localName });
-  }
-
-  public closeDialog() {
-    this._dialog?.close();
-    return true;
-  }
-
-  protected render() {
-    if (!this._dialogParams || !this._backup) {
-      return nothing;
-    }
-    return html`
-      <ha-md-dialog
-        open
-        .disableCancelAction=${!this._error}
-        @closed=${this._dialogClosed}
-      >
-        <ha-dialog-header slot="headline">
-          <ha-icon-button
-            slot="navigationIcon"
-            .label=${this._dialogParams.supervisor?.localize("backup.close")}
-            .path=${mdiClose}
-            @click=${this.closeDialog}
-            .disabled=${this._restoringBackup}
-          ></ha-icon-button>
-          <span slot="title" .title=${this._backup.name}
-            >${this._backup.name}</span
-          >
-          ${!this._dialogParams.onboarding && this._dialogParams.supervisor
-            ? html`<ha-button-menu
-                slot="actionItems"
-                fixed
-                @action=${this._handleMenuAction}
-                @closed=${stopPropagation}
-              >
-                <ha-icon-button
-                  .label=${this._dialogParams.supervisor.localize(
-                    "backup.more_actions"
-                  )}
-                  .path=${mdiDotsVertical}
-                  slot="trigger"
-                ></ha-icon-button>
-                <ha-list-item
-                  >${this._dialogParams.supervisor.localize(
-                    "backup.download_backup"
-                  )}</ha-list-item
-                >
-                <ha-list-item class="error"
-                  >${this._dialogParams.supervisor.localize(
-                    "backup.delete_backup_title"
-                  )}</ha-list-item
-                >
-              </ha-button-menu>`
-            : nothing}
-        </ha-dialog-header>
-        <div slot="content">
-          ${this._error
-            ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
-            : this._restoringBackup
-              ? html`<div class="loading">
-                  <ha-spinner></ha-spinner>
-                </div>`
-              : html`
-                  <supervisor-backup-content
-                    .hass=${this.hass}
-                    .supervisor=${this._dialogParams.supervisor}
-                    .backup=${this._backup}
-                    .onboarding=${this._dialogParams.onboarding || false}
-                    dialogInitialFocus
-                  >
-                  </supervisor-backup-content>
-                `}
-        </div>
-        <div slot="actions">
-          <ha-button
-            .disabled=${this._restoringBackup || !!this._error}
-            @click=${this._restoreClicked}
-          >
-            ${this._dialogParams.supervisor?.localize("backup.restore")}
-          </ha-button>
-        </div>
-      </ha-md-dialog>
-    `;
-  }
-
-  private _handleMenuAction(ev: CustomEvent<ActionDetail>) {
-    switch (ev.detail.index) {
-      case 0:
-        this._downloadClicked();
-        break;
-      case 1:
-        this._deleteClicked();
-        break;
-    }
-  }
-
-  private async _restoreClicked() {
-    const backupDetails = this._backupContent.backupDetails();
-    this._restoringBackup = true;
-
-    const supervisor = this._dialogParams?.supervisor;
-    if (supervisor !== undefined && supervisor.info.state !== "running") {
-      await showAlertDialog(this, {
-        title: supervisor.localize("backup.could_not_restore"),
-        text: supervisor.localize("backup.restore_blocked_not_running", {
-          state: supervisor.info.state,
-        }),
-      });
-      this._restoringBackup = false;
-      return;
-    }
-    if (
-      !(await showConfirmationDialog(this, {
-        title: supervisor?.localize(
-          `backup.${
-            this._backup!.type === "full"
-              ? "confirm_restore_full_backup_title"
-              : "confirm_restore_partial_backup_title"
-          }`
-        ),
-        text: supervisor?.localize(
-          `backup.${
-            this._backup!.type === "full"
-              ? "confirm_restore_full_backup_text"
-              : "confirm_restore_partial_backup_text"
-          }`
-        ),
-        confirmText: supervisor?.localize("backup.restore"),
-        dismissText: supervisor?.localize("backup.cancel"),
-      }))
-    ) {
-      this._restoringBackup = false;
-      return;
-    }
-
-    try {
-      await restoreBackup(
-        this.hass,
-        this._backup!.type,
-        this._backup!.slug,
-        { ...backupDetails, background: this._dialogParams?.onboarding },
-        !!this.hass && atLeastVersion(this.hass.config.version, 2021, 9)
-      );
-
-      this._dialogParams?.onRestoring?.();
-      this.closeDialog();
-    } catch (error: any) {
-      this._error =
-        error?.body?.message ||
-        supervisor?.localize("backup.restore_start_failed");
-    } finally {
-      this._restoringBackup = false;
-    }
-  }
-
-  private async _deleteClicked() {
-    const supervisor = this._dialogParams?.supervisor;
-    if (!supervisor) return;
-
-    if (
-      !(await showConfirmationDialog(this, {
-        title: supervisor!.localize("backup.confirm_delete_title"),
-        text: supervisor!.localize("backup.confirm_delete_text"),
-        confirmText: supervisor!.localize("backup.delete"),
-        dismissText: supervisor!.localize("backup.cancel"),
-        destructive: true,
-      }))
-    ) {
-      return;
-    }
-
-    try {
-      await removeBackup(this.hass!, this._backup!.slug);
-      if (this._dialogParams!.onDelete) {
-        this._dialogParams!.onDelete();
-      }
-      this.closeDialog();
-    } catch (err: any) {
-      this._error = err.body.message;
-    }
-  }
-
-  private async _downloadClicked() {
-    const supervisor = this._dialogParams?.supervisor;
-    if (!supervisor) return;
-
-    let signedPath: { path: string };
-    try {
-      signedPath = await getSignedPath(
-        this.hass!,
-        `/api/hassio/${
-          atLeastVersion(this.hass!.config.version, 2021, 9)
-            ? "backups"
-            : "snapshots"
-        }/${this._backup!.slug}/download`
-      );
-    } catch (err: any) {
-      await showAlertDialog(this, {
-        text: extractApiErrorMessage(err),
-      });
-      return;
-    }
-
-    if (window.location.href.includes("ui.nabu.casa")) {
-      const confirm = await showConfirmationDialog(this, {
-        title: supervisor.localize("backup.remote_download_title"),
-        text: supervisor.localize("backup.remote_download_text"),
-        confirmText: supervisor.localize("backup.download"),
-        dismissText: supervisor?.localize("backup.cancel"),
-      });
-      if (!confirm) {
-        return;
-      }
-    }
-
-    fileDownload(
-      signedPath.path,
-      `home_assistant_backup_${slugify(this._computeName)}.tar`
-    );
-  }
-
-  private get _computeName() {
-    return this._backup
-      ? this._backup.name || this._backup.slug
-      : this._dialogParams!.supervisor?.localize("backup.unnamed_backup") || "";
-  }
-
-  static get styles(): CSSResultGroup {
-    return [
-      haStyle,
-      haStyleDialog,
-      css`
-        ha-header-bar {
-          --mdc-theme-on-primary: var(--primary-text-color);
-          --mdc-theme-primary: var(--mdc-theme-surface);
-          flex-shrink: 0;
-          display: block;
-        }
-        ha-icon-button {
-          color: var(--secondary-text-color);
-        }
-        .loading {
-          width: 100%;
-          display: flex;
-          height: 100%;
-          justify-content: center;
-          align-items: center;
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "dialog-hassio-backup": HassioBackupDialog;
-  }
-}

hassio/src/dialogs/backup/dialog-hassio-create-backup.ts

@@ -1,158 +0,0 @@
-import type { CSSResultGroup } from "lit";
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
-import { fireEvent } from "../../../../src/common/dom/fire_event";
-import "../../../../src/components/ha-alert";
-import "../../../../src/components/ha-button";
-import "../../../../src/components/ha-spinner";
-import { createCloseHeading } from "../../../../src/components/ha-dialog";
-import {
-  createHassioFullBackup,
-  createHassioPartialBackup,
-} from "../../../../src/data/hassio/backup";
-import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
-import { showAlertDialog } from "../../../../src/dialogs/generic/show-dialog-box";
-import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
-import type { HomeAssistant } from "../../../../src/types";
-import "../../components/supervisor-backup-content";
-import type { SupervisorBackupContent } from "../../components/supervisor-backup-content";
-import type { HassioCreateBackupDialogParams } from "./show-dialog-hassio-create-backup";
-
-@customElement("dialog-hassio-create-backup")
-class HassioCreateBackupDialog extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @state() private _dialogParams?: HassioCreateBackupDialogParams;
-
-  @state() private _error?: string;
-
-  @state() private _creatingBackup = false;
-
-  @query("supervisor-backup-content")
-  private _backupContent!: SupervisorBackupContent;
-
-  public showDialog(dialogParams: HassioCreateBackupDialogParams) {
-    this._dialogParams = dialogParams;
-    this._creatingBackup = false;
-  }
-
-  public closeDialog() {
-    this._dialogParams = undefined;
-    this._creatingBackup = false;
-    this._error = undefined;
-    fireEvent(this, "dialog-closed", { dialog: this.localName });
-  }
-
-  protected render() {
-    if (!this._dialogParams) {
-      return nothing;
-    }
-    return html`
-      <ha-dialog
-        open
-        scrimClickAction
-        @closed=${this.closeDialog}
-        .heading=${createCloseHeading(
-          this.hass,
-          this._dialogParams.supervisor.localize("backup.create_backup")
-        )}
-      >
-        ${this._creatingBackup
-          ? html`<ha-spinner></ha-spinner>`
-          : html`<supervisor-backup-content
-              .hass=${this.hass}
-              .supervisor=${this._dialogParams.supervisor}
-              dialogInitialFocus
-            >
-            </supervisor-backup-content>`}
-        ${this._error
-          ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
-          : ""}
-        <ha-button
-          appearance="plain"
-          slot="secondaryAction"
-          @click=${this.closeDialog}
-        >
-          ${this._dialogParams.supervisor.localize("common.close")}
-        </ha-button>
-        <ha-button
-          .disabled=${this._creatingBackup}
-          slot="primaryAction"
-          @click=${this._createBackup}
-        >
-          ${this._dialogParams.supervisor.localize("backup.create")}
-        </ha-button>
-      </ha-dialog>
-    `;
-  }
-
-  private async _createBackup(): Promise<void> {
-    if (this._dialogParams!.supervisor.info.state !== "running") {
-      showAlertDialog(this, {
-        title: this._dialogParams!.supervisor.localize(
-          "backup.could_not_create"
-        ),
-        text: this._dialogParams!.supervisor.localize(
-          "backup.create_blocked_not_running",
-          { state: this._dialogParams!.supervisor.info.state }
-        ),
-      });
-      return;
-    }
-    const backupDetails = this._backupContent.backupDetails();
-    this._creatingBackup = true;
-
-    this._error = "";
-    if (backupDetails.password && !backupDetails.password.length) {
-      this._error = this._dialogParams!.supervisor.localize(
-        "backup.enter_password"
-      );
-      this._creatingBackup = false;
-      return;
-    }
-    if (
-      backupDetails.password &&
-      backupDetails.password !== backupDetails.confirm_password
-    ) {
-      this._error = this._dialogParams!.supervisor.localize(
-        "backup.passwords_not_matching"
-      );
-      this._creatingBackup = false;
-      return;
-    }
-
-    delete backupDetails.confirm_password;
-
-    try {
-      if (this._backupContent.backupType === "full") {
-        await createHassioFullBackup(this.hass, backupDetails);
-      } else {
-        await createHassioPartialBackup(this.hass, backupDetails);
-      }
-
-      this._dialogParams!.onCreate();
-      this.closeDialog();
-    } catch (err: any) {
-      this._error = extractApiErrorMessage(err);
-    }
-    this._creatingBackup = false;
-  }
-
-  static get styles(): CSSResultGroup {
-    return [
-      haStyle,
-      haStyleDialog,
-      css`
-        :host {
-          direction: var(--direction);
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "dialog-hassio-create-backup": HassioCreateBackupDialog;
-  }
-}

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

@@ -1,19 +0,0 @@
-import { fireEvent } from "../../../../src/common/dom/fire_event";
-import "./dialog-hassio-backup-upload";
-
-export interface HassioBackupUploadDialogParams {
-  showBackup: (slug: string) => void;
-  reloadBackup?: () => Promise<void>;
-  onboarding?: boolean;
-}
-
-export const showBackupUploadDialog = (
-  element: HTMLElement,
-  dialogParams: HassioBackupUploadDialogParams
-): void => {
-  fireEvent(element, "show-dialog", {
-    dialogTag: "dialog-hassio-backup-upload",
-    dialogImport: () => import("./dialog-hassio-backup-upload"),
-    dialogParams,
-  });
-};

hassio/src/dialogs/backup/show-dialog-hassio-backu-location.ts

@@ -1,17 +0,0 @@
-import { fireEvent } from "../../../../src/common/dom/fire_event";
-import type { Supervisor } from "../../../../src/data/supervisor/supervisor";
-
-export interface HassioBackupLocationDialogParams {
-  supervisor: Supervisor;
-}
-
-export const showHassioBackupLocationDialog = (
-  element: HTMLElement,
-  dialogParams: HassioBackupLocationDialogParams
-): void => {
-  fireEvent(element, "show-dialog", {
-    dialogTag: "dialog-hassio-backup-location",
-    dialogImport: () => import("./dialog-hassio-backup-location"),
-    dialogParams,
-  });
-};

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

@@ -1,21 +0,0 @@
-import { fireEvent } from "../../../../src/common/dom/fire_event";
-import type { Supervisor } from "../../../../src/data/supervisor/supervisor";
-
-export interface HassioBackupDialogParams {
-  slug: string;
-  onDelete?: () => void;
-  onRestoring?: () => void;
-  onboarding?: boolean;
-  supervisor?: Supervisor;
-}
-
-export const showHassioBackupDialog = (
-  element: HTMLElement,
-  dialogParams: HassioBackupDialogParams
-): void => {
-  fireEvent(element, "show-dialog", {
-    dialogTag: "dialog-hassio-backup",
-    dialogImport: () => import("./dialog-hassio-backup"),
-    dialogParams,
-  });
-};

hassio/src/dialogs/backup/show-dialog-hassio-create-backup.ts

@@ -1,18 +0,0 @@
-import { fireEvent } from "../../../../src/common/dom/fire_event";
-import type { Supervisor } from "../../../../src/data/supervisor/supervisor";
-
-export interface HassioCreateBackupDialogParams {
-  supervisor: Supervisor;
-  onCreate: () => void;
-}
-
-export const showHassioCreateBackupDialog = (
-  element: HTMLElement,
-  dialogParams: HassioCreateBackupDialogParams
-): void => {
-  fireEvent(element, "show-dialog", {
-    dialogTag: "dialog-hassio-create-backup",
-    dialogImport: () => import("./dialog-hassio-create-backup"),
-    dialogParams,
-  });
-};

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

@@ -1,184 +0,0 @@
-import type { CSSResultGroup } from "lit";
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import memoizeOne from "memoize-one";
-import { fireEvent } from "../../../../src/common/dom/fire_event";
-import "../../../../src/components/ha-dialog";
-import "../../../../src/components/ha-button";
-import "../../../../src/components/ha-list-item";
-import "../../../../src/components/ha-select";
-import "../../../../src/components/ha-spinner";
-import {
-  extractApiErrorMessage,
-  ignoreSupervisorError,
-} from "../../../../src/data/hassio/common";
-import type { DatadiskList } from "../../../../src/data/hassio/host";
-import { listDatadisks, moveDatadisk } from "../../../../src/data/hassio/host";
-import type { Supervisor } from "../../../../src/data/supervisor/supervisor";
-import { showAlertDialog } from "../../../../src/dialogs/generic/show-dialog-box";
-import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
-import type { HomeAssistant } from "../../../../src/types";
-import type { HassioDatatiskDialogParams } from "./show-dialog-hassio-datadisk";
-
-const calculateMoveTime = memoizeOne((supervisor: Supervisor): number => {
-  // Assume a speed of 30 MB/s.
-  const moveTime = (supervisor.host.disk_used * 1000) / 60 / 30;
-  const rebootTime = (supervisor.host.startup_time * 4) / 60;
-  return Math.ceil((moveTime + rebootTime) / 10) * 10;
-});
-
-@customElement("dialog-hassio-datadisk")
-class HassioDatadiskDialog extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @state() private dialogParams?: HassioDatatiskDialogParams;
-
-  @state() private selectedDevice?: string;
-
-  @state() private devices?: DatadiskList["devices"];
-
-  @state() private moving = false;
-
-  public showDialog(params: HassioDatatiskDialogParams) {
-    this.dialogParams = params;
-    listDatadisks(this.hass).then((data) => {
-      this.devices = data.devices;
-    });
-  }
-
-  public closeDialog(): void {
-    this.dialogParams = undefined;
-    this.selectedDevice = undefined;
-    this.devices = undefined;
-    this.moving = false;
-    fireEvent(this, "dialog-closed", { dialog: this.localName });
-  }
-
-  protected render() {
-    if (!this.dialogParams) {
-      return nothing;
-    }
-    return html`
-      <ha-dialog
-        open
-        scrimClickAction
-        escapeKeyAction
-        .heading=${this.moving
-          ? this.dialogParams.supervisor.localize("dialog.datadisk_move.moving")
-          : this.dialogParams.supervisor.localize("dialog.datadisk_move.title")}
-        @closed=${this.closeDialog}
-        ?hideActions=${this.moving}
-      >
-        ${this.moving
-          ? html`<ha-spinner aria-label="Moving" size="large"></ha-spinner>
-              <p class="progress-text">
-                ${this.dialogParams.supervisor.localize(
-                  "dialog.datadisk_move.moving_desc"
-                )}
-              </p>`
-          : html` ${this.devices?.length
-                ? html`
-                    ${this.dialogParams.supervisor.localize(
-                      "dialog.datadisk_move.description",
-                      {
-                        current_path: this.dialogParams.supervisor.os.data_disk,
-                        time: calculateMoveTime(this.dialogParams.supervisor),
-                      }
-                    )}
-                    <br /><br />
-
-                    <ha-select
-                      .label=${this.dialogParams.supervisor.localize(
-                        "dialog.datadisk_move.select_device"
-                      )}
-                      @selected=${this._selectDevice}
-                      dialogInitialFocus
-                    >
-                      ${this.devices.map(
-                        (device) =>
-                          html`<ha-list-item .value=${device}
-                            >${device}</ha-list-item
-                          >`
-                      )}
-                    </ha-select>
-                  `
-                : this.devices === undefined
-                  ? this.dialogParams.supervisor.localize(
-                      "dialog.datadisk_move.loading_devices"
-                    )
-                  : this.dialogParams.supervisor.localize(
-                      "dialog.datadisk_move.no_devices"
-                    )}
-
-              <ha-button
-                appearance="plain"
-                slot="primaryAction"
-                @click=${this.closeDialog}
-                dialogInitialFocus
-              >
-                ${this.dialogParams.supervisor.localize(
-                  "dialog.datadisk_move.cancel"
-                )}
-              </ha-button>
-
-              <ha-button
-                .disabled=${!this.selectedDevice}
-                slot="primaryAction"
-                @click=${this._moveDatadisk}
-              >
-                ${this.dialogParams.supervisor.localize(
-                  "dialog.datadisk_move.move"
-                )}
-              </ha-button>`}
-      </ha-dialog>
-    `;
-  }
-
-  private _selectDevice(ev) {
-    this.selectedDevice = ev.target.value;
-  }
-
-  private async _moveDatadisk() {
-    this.moving = true;
-    try {
-      await moveDatadisk(this.hass, this.selectedDevice!);
-    } catch (err: any) {
-      if (this.hass.connection.connected && !ignoreSupervisorError(err)) {
-        showAlertDialog(this, {
-          title: this.dialogParams!.supervisor.localize(
-            "system.host.failed_to_move"
-          ),
-          text: extractApiErrorMessage(err),
-        });
-        this.closeDialog();
-      }
-    }
-  }
-
-  static get styles(): CSSResultGroup {
-    return [
-      haStyle,
-      haStyleDialog,
-      css`
-        ha-select {
-          width: 100%;
-        }
-        ha-spinner {
-          display: block;
-          margin: 32px;
-          text-align: center;
-        }
-
-        .progress-text {
-          text-align: center;
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "dialog-hassio-datadisk": HassioDatadiskDialog;
-  }
-}

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

@@ -1,17 +0,0 @@
-import { fireEvent } from "../../../../src/common/dom/fire_event";
-import type { Supervisor } from "../../../../src/data/supervisor/supervisor";
-
-export interface HassioDatatiskDialogParams {
-  supervisor: Supervisor;
-}
-
-export const showHassioDatadiskDialog = (
-  element: HTMLElement,
-  dialogParams: HassioDatatiskDialogParams
-): void => {
-  fireEvent(element, "show-dialog", {
-    dialogTag: "dialog-hassio-datadisk",
-    dialogImport: () => import("./dialog-hassio-datadisk"),
-    dialogParams,
-  });
-};

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

@@ -1,199 +0,0 @@
-import { mdiClose } from "@mdi/js";
-import { dump } from "js-yaml";
-import type { CSSResultGroup } from "lit";
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import memoizeOne from "memoize-one";
-import { fireEvent } from "../../../../src/common/dom/fire_event";
-import { stringCompare } from "../../../../src/common/string/compare";
-import "../../../../src/components/ha-dialog";
-import "../../../../src/components/ha-expansion-panel";
-import "../../../../src/components/ha-icon-button";
-import "../../../../src/components/search-input";
-import type { HassioHardwareInfo } from "../../../../src/data/hassio/hardware";
-import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
-import type { HomeAssistant } from "../../../../src/types";
-import type { HassioHardwareDialogParams } from "./show-dialog-hassio-hardware";
-
-const _filterDevices = memoizeOne(
-  (hardware: HassioHardwareInfo, filter: string, language: string) =>
-    hardware.devices
-      .filter(
-        (device) =>
-          device.by_id?.toLowerCase().includes(filter) ||
-          device.name.toLowerCase().includes(filter) ||
-          device.dev_path.toLocaleLowerCase().includes(filter) ||
-          JSON.stringify(device.attributes).toLocaleLowerCase().includes(filter)
-      )
-      .sort((a, b) => stringCompare(a.name, b.name, language))
-);
-
-@customElement("dialog-hassio-hardware")
-class HassioHardwareDialog extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @state() private _dialogParams?: HassioHardwareDialogParams;
-
-  @state() private _filter?: string;
-
-  public showDialog(dialogParams: HassioHardwareDialogParams) {
-    this._dialogParams = dialogParams;
-  }
-
-  public closeDialog() {
-    this._dialogParams = undefined;
-    fireEvent(this, "dialog-closed", { dialog: this.localName });
-  }
-
-  protected render() {
-    if (!this._dialogParams) {
-      return nothing;
-    }
-
-    const devices = _filterDevices(
-      this._dialogParams.hardware,
-      (this._filter || "").toLowerCase(),
-      this.hass.locale.language
-    );
-
-    return html`
-      <ha-dialog
-        open
-        scrimClickAction
-        hideActions
-        @closed=${this.closeDialog}
-        .heading=${this._dialogParams.supervisor.localize(
-          "dialog.hardware.title"
-        )}
-      >
-        <div class="header" slot="heading">
-          <h2>
-            ${this._dialogParams.supervisor.localize("dialog.hardware.title")}
-          </h2>
-          <ha-icon-button
-            .label=${this._dialogParams.supervisor.localize("common.close")}
-            .path=${mdiClose}
-            dialogAction="close"
-          ></ha-icon-button>
-          <search-input
-            .hass=${this.hass}
-            .filter=${this._filter}
-            @value-changed=${this._handleSearchChange}
-            .label=${this._dialogParams.supervisor.localize(
-              "dialog.hardware.search"
-            )}
-          >
-          </search-input>
-        </div>
-
-        ${devices.map(
-          (device) =>
-            html`<ha-expansion-panel
-              .header=${device.name}
-              .secondary=${device.by_id || undefined}
-              outlined
-            >
-              <div class="device-property">
-                <span>
-                  ${this._dialogParams!.supervisor.localize(
-                    "dialog.hardware.subsystem"
-                  )}:
-                </span>
-                <span>${device.subsystem}</span>
-              </div>
-              <div class="device-property">
-                <span>
-                  ${this._dialogParams!.supervisor.localize(
-                    "dialog.hardware.device_path"
-                  )}:
-                </span>
-                <code>${device.dev_path}</code>
-              </div>
-              ${device.by_id
-                ? html` <div class="device-property">
-                    <span>
-                      ${this._dialogParams!.supervisor.localize(
-                        "dialog.hardware.id"
-                      )}:
-                    </span>
-                    <code>${device.by_id}</code>
-                  </div>`
-                : ""}
-              <div class="attributes">
-                <span>
-                  ${this._dialogParams!.supervisor.localize(
-                    "dialog.hardware.attributes"
-                  )}:
-                </span>
-                <pre>${dump(device.attributes, { indent: 2 })}</pre>
-              </div>
-            </ha-expansion-panel>`
-        )}
-      </ha-dialog>
-    `;
-  }
-
-  private _handleSearchChange(ev: CustomEvent) {
-    this._filter = ev.detail.value;
-  }
-
-  static get styles(): CSSResultGroup {
-    return [
-      haStyle,
-      haStyleDialog,
-      css`
-        ha-icon-button {
-          position: absolute;
-          right: 16px;
-          inset-inline-end: 16px;
-          inset-inline-start: initial;
-          top: 10px;
-          text-decoration: none;
-          color: var(--primary-text-color);
-        }
-        h2 {
-          margin: 18px 42px 0 18px;
-          margin-inline-start: 18px;
-          margin-inline-end: 42px;
-          color: var(--primary-text-color);
-        }
-
-        ha-expansion-panel {
-          margin: 4px 0;
-        }
-        pre,
-        code {
-          background-color: var(--markdown-code-background-color, none);
-          border-radius: var(--ha-border-radius-sm);
-        }
-        pre {
-          padding: 16px;
-          overflow: auto;
-          line-height: 1.45;
-          font-family: var(--ha-font-family-code);
-        }
-        code {
-          font-size: var(--ha-font-size-s);
-          padding: 0.2em 0.4em;
-        }
-        search-input {
-          margin: 8px 16px 0;
-          display: block;
-        }
-        .device-property {
-          display: flex;
-          justify-content: space-between;
-        }
-        .attributes {
-          margin-top: 12px;
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "dialog-hassio-hardware": HassioHardwareDialog;
-  }
-}

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

@@ -1,19 +0,0 @@
-import { fireEvent } from "../../../../src/common/dom/fire_event";
-import type { HassioHardwareInfo } from "../../../../src/data/hassio/hardware";
-import type { Supervisor } from "../../../../src/data/supervisor/supervisor";
-
-export interface HassioHardwareDialogParams {
-  supervisor: Supervisor;
-  hardware: HassioHardwareInfo;
-}
-
-export const showHassioHardwareDialog = (
-  element: HTMLElement,
-  dialogParams: HassioHardwareDialogParams
-): void => {
-  fireEvent(element, "show-dialog", {
-    dialogTag: "dialog-hassio-hardware",
-    dialogImport: () => import("./dialog-hassio-hardware"),
-    dialogParams,
-  });
-};

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

@@ -1,70 +0,0 @@
-import type { CSSResultGroup } from "lit";
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { createCloseHeading } from "../../../../src/components/ha-dialog";
-import "../../../../src/components/ha-markdown";
-import { haStyleDialog } from "../../../../src/resources/styles";
-import type { HomeAssistant } from "../../../../src/types";
-import { hassioStyle } from "../../resources/hassio-style";
-import type { HassioMarkdownDialogParams } from "./show-dialog-hassio-markdown";
-
-@customElement("dialog-hassio-markdown")
-class HassioMarkdownDialog extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  // eslint-disable-next-line lit/no-native-attributes
-  @property() public title!: string;
-
-  @property() public content!: string;
-
-  @state() private _opened = false;
-
-  public showDialog(params: HassioMarkdownDialogParams) {
-    this.title = params.title;
-    this.content = params.content;
-    this._opened = true;
-  }
-
-  public closeDialog() {
-    this._opened = false;
-  }
-
-  protected render() {
-    if (!this._opened) {
-      return nothing;
-    }
-    return html`
-      <ha-dialog
-        open
-        @closed=${this.closeDialog}
-        .heading=${createCloseHeading(this.hass, this.title)}
-        hideactions
-      >
-        <ha-markdown
-          .content=${this.content || ""}
-          dialogInitialFocus
-        ></ha-markdown>
-      </ha-dialog>
-    `;
-  }
-
-  static get styles(): CSSResultGroup {
-    return [
-      haStyleDialog,
-      hassioStyle,
-      css`
-        @media all and (max-width: 450px), all and (max-height: 500px) {
-          ha-markdown {
-            padding: 16px;
-          }
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "dialog-hassio-markdown": HassioMarkdownDialog;
-  }
-}

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

@@ -1,17 +0,0 @@
-import { fireEvent } from "../../../../src/common/dom/fire_event";
-
-export interface HassioMarkdownDialogParams {
-  title: string;
-  content: string;
-}
-
-export const showHassioMarkdownDialog = (
-  element: HTMLElement,
-  dialogParams: HassioMarkdownDialogParams
-): void => {
-  fireEvent(element, "show-dialog", {
-    dialogTag: "dialog-hassio-markdown",
-    dialogImport: () => import("./dialog-hassio-markdown"),
-    dialogParams,
-  });
-};

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

@@ -1,647 +0,0 @@
-import { mdiClose } from "@mdi/js";
-import type { CSSResultGroup } from "lit";
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { cache } from "lit/directives/cache";
-import { fireEvent } from "../../../../src/common/dom/fire_event";
-import "../../../../src/components/ha-alert";
-import "../../../../src/components/ha-button";
-import "../../../../src/components/ha-dialog";
-import "../../../../src/components/ha-expansion-panel";
-import "../../../../src/components/ha-formfield";
-import "../../../../src/components/ha-header-bar";
-import "../../../../src/components/ha-icon-button";
-import "../../../../src/components/ha-list";
-import "../../../../src/components/ha-list-item";
-import "../../../../src/components/ha-password-field";
-import "../../../../src/components/ha-radio";
-import "../../../../src/components/ha-tab-group";
-import "../../../../src/components/ha-tab-group-tab";
-import "../../../../src/components/ha-textfield";
-import type { HaTextField } from "../../../../src/components/ha-textfield";
-import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
-import type {
-  AccessPoints,
-  NetworkInterface,
-  WifiConfiguration,
-} from "../../../../src/data/hassio/network";
-import {
-  accesspointScan,
-  updateNetworkInterface,
-} from "../../../../src/data/hassio/network";
-import type { Supervisor } from "../../../../src/data/supervisor/supervisor";
-import {
-  showAlertDialog,
-  showConfirmationDialog,
-} from "../../../../src/dialogs/generic/show-dialog-box";
-import type { HassDialog } from "../../../../src/dialogs/make-dialog-manager";
-import { haStyleDialog } from "../../../../src/resources/styles";
-import type { HomeAssistant } from "../../../../src/types";
-import type { HassioNetworkDialogParams } from "./show-dialog-network";
-
-const IP_VERSIONS = ["ipv4", "ipv6"];
-
-@customElement("dialog-hassio-network")
-export class DialogHassioNetwork
-  extends LitElement
-  implements HassDialog<HassioNetworkDialogParams>
-{
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ attribute: false }) public supervisor!: Supervisor;
-
-  @state() private _accessPoints?: AccessPoints;
-
-  @state() private _curTabIndex = 0;
-
-  @state() private _dirty = false;
-
-  @state() private _interface?: NetworkInterface;
-
-  @state() private _interfaces!: NetworkInterface[];
-
-  @state() private _params?: HassioNetworkDialogParams;
-
-  @state() private _processing = false;
-
-  @state() private _scanning = false;
-
-  @state() private _wifiConfiguration?: WifiConfiguration;
-
-  public async showDialog(params: HassioNetworkDialogParams): Promise<void> {
-    this._params = params;
-    this._dirty = false;
-    this._curTabIndex = 0;
-    this.supervisor = params.supervisor;
-    this._interfaces = params.supervisor.network.interfaces.sort((a, b) =>
-      a.primary > b.primary ? -1 : 1
-    );
-    this._interface = { ...this._interfaces[this._curTabIndex] };
-
-    await this.updateComplete;
-  }
-
-  public closeDialog() {
-    this._params = undefined;
-    this._processing = false;
-    fireEvent(this, "dialog-closed", { dialog: this.localName });
-    return true;
-  }
-
-  protected render() {
-    if (!this._params || !this._interface) {
-      return nothing;
-    }
-
-    return html`
-      <ha-dialog
-        open
-        scrimClickAction
-        escapeKeyAction
-        .heading=${this.supervisor.localize("dialog.network.title")}
-        hideActions
-        @closed=${this.closeDialog}
-      >
-        <div slot="heading">
-          <ha-header-bar>
-            <span slot="title">
-              ${this.supervisor.localize("dialog.network.title")}
-            </span>
-            <ha-icon-button
-              .label=${this.supervisor.localize("common.close")}
-              .path=${mdiClose}
-              slot="actionItems"
-              dialogAction="cancel"
-            ></ha-icon-button>
-          </ha-header-bar>
-          ${this._interfaces.length > 1
-            ? html`<ha-tab-group @wa-tab-show=${this._handleTabActivated}
-                >${this._interfaces.map(
-                  (device, index) =>
-                    html`<ha-tab-group-tab
-                      slot="nav"
-                      .id=${device.interface}
-                      .panel=${index.toString()}
-                      .active=${this._curTabIndex === index}
-                    >
-                      ${device.interface}
-                    </ha-tab-group-tab>`
-                )}
-              </ha-tab-group>`
-            : ""}
-        </div>
-        ${cache(this._renderTab())}
-      </ha-dialog>
-    `;
-  }
-
-  private _renderTab() {
-    return html` <div class="form container">
-        ${IP_VERSIONS.map((version) =>
-          this._interface![version] ? this._renderIPConfiguration(version) : ""
-        )}
-        ${this._interface?.type === "wireless"
-          ? html`
-              <ha-expansion-panel
-                .header=${this.supervisor.localize("dialog.network.wifi")}
-                outlined
-              >
-                ${this._interface?.wifi?.ssid
-                  ? html`<p>
-                      ${this.supervisor.localize(
-                        "dialog.network.connected_to",
-                        { ssid: this._interface?.wifi?.ssid }
-                      )}
-                    </p>`
-                  : ""}
-                <ha-button
-                  appearance="plain"
-                  size="small"
-                  class="scan"
-                  @click=${this._scanForAP}
-                  .disabled=${this._scanning}
-                  .loading=${this._scanning}
-                >
-                  ${this.supervisor.localize("dialog.network.scan_ap")}
-                </ha-button>
-                ${this._accessPoints &&
-                this._accessPoints.accesspoints &&
-                this._accessPoints.accesspoints.length !== 0
-                  ? html`
-                      <ha-list>
-                        ${this._accessPoints.accesspoints
-                          .filter((ap) => ap.ssid)
-                          .map(
-                            (ap) => html`
-                              <ha-list-item
-                                twoline
-                                @click=${this._selectAP}
-                                .activated=${ap.ssid ===
-                                this._wifiConfiguration?.ssid}
-                                .ap=${ap}
-                              >
-                                <span>${ap.ssid}</span>
-                                <span slot="secondary">
-                                  ${ap.mac} -
-                                  ${this.supervisor.localize(
-                                    "dialog.network.signal_strength"
-                                  )}:
-                                  ${ap.signal}
-                                </span>
-                              </ha-list-item>
-                            `
-                          )}
-                      </ha-list>
-                    `
-                  : ""}
-                ${this._wifiConfiguration
-                  ? html`
-                      <div class="radio-row">
-                        <ha-formfield
-                          .label=${this.supervisor.localize(
-                            "dialog.network.open"
-                          )}
-                        >
-                          <ha-radio
-                            @change=${this._handleRadioValueChangedAp}
-                            .ap=${this._wifiConfiguration}
-                            value="open"
-                            name="auth"
-                            .checked=${this._wifiConfiguration.auth ===
-                              undefined ||
-                            this._wifiConfiguration.auth === "open"}
-                          >
-                          </ha-radio>
-                        </ha-formfield>
-                        <ha-formfield
-                          .label=${this.supervisor.localize(
-                            "dialog.network.wep"
-                          )}
-                        >
-                          <ha-radio
-                            @change=${this._handleRadioValueChangedAp}
-                            .ap=${this._wifiConfiguration}
-                            value="wep"
-                            name="auth"
-                            .checked=${this._wifiConfiguration.auth === "wep"}
-                          >
-                          </ha-radio>
-                        </ha-formfield>
-                        <ha-formfield
-                          .label=${this.supervisor.localize(
-                            "dialog.network.wpa"
-                          )}
-                        >
-                          <ha-radio
-                            @change=${this._handleRadioValueChangedAp}
-                            .ap=${this._wifiConfiguration}
-                            value="wpa-psk"
-                            name="auth"
-                            .checked=${this._wifiConfiguration.auth ===
-                            "wpa-psk"}
-                          >
-                          </ha-radio>
-                        </ha-formfield>
-                      </div>
-                      ${this._wifiConfiguration.auth === "wpa-psk" ||
-                      this._wifiConfiguration.auth === "wep"
-                        ? html`
-                            <ha-password-field
-                              class="flex-auto"
-                              id="psk"
-                              .label=${this.supervisor.localize(
-                                "dialog.network.wifi_password"
-                              )}
-                              version="wifi"
-                              @change=${this._handleInputValueChangedWifi}
-                            >
-                            </ha-password-field>
-                          `
-                        : ""}
-                    `
-                  : ""}
-              </ha-expansion-panel>
-            `
-          : ""}
-        ${this._dirty
-          ? html`<ha-alert alert-type="warning">
-              ${this.supervisor.localize("dialog.network.warning")}
-            </ha-alert>`
-          : ""}
-      </div>
-      <div class="buttons">
-        <ha-button @click=${this.closeDialog} appearance="plain">
-          ${this.supervisor.localize("common.cancel")}
-        </ha-button>
-        <ha-button
-          @click=${this._updateNetwork}
-          .disabled=${!this._dirty}
-          .loading=${this._processing}
-        >
-          ${this.supervisor.localize("common.save")}
-        </ha-button>
-      </div>`;
-  }
-
-  private _selectAP(event) {
-    this._wifiConfiguration = event.currentTarget.ap;
-    this._dirty = true;
-  }
-
-  private async _scanForAP() {
-    if (!this._interface) {
-      return;
-    }
-    this._scanning = true;
-    try {
-      this._accessPoints = await accesspointScan(
-        this.hass,
-        this._interface.interface
-      );
-    } catch (err: any) {
-      showAlertDialog(this, {
-        title: "Failed to scan for accesspoints",
-        text: extractApiErrorMessage(err),
-      });
-    } finally {
-      this._scanning = false;
-    }
-  }
-
-  private _renderIPConfiguration(version: string) {
-    return html`
-      <ha-expansion-panel
-        .header=${`IPv${version.charAt(version.length - 1)}`}
-        outlined
-      >
-        <div class="radio-row">
-          <ha-formfield
-            .label=${this.supervisor.localize("dialog.network.auto")}
-          >
-            <ha-radio
-              @change=${this._handleRadioValueChanged}
-              .version=${version}
-              value="auto"
-              name="${version}method"
-              .checked=${this._interface![version]?.method === "auto"}
-              dialogInitialFocus
-            >
-            </ha-radio>
-          </ha-formfield>
-          <ha-formfield
-            .label=${this.supervisor.localize("dialog.network.static")}
-          >
-            <ha-radio
-              @change=${this._handleRadioValueChanged}
-              .version=${version}
-              value="static"
-              name="${version}method"
-              .checked=${this._interface![version]?.method === "static"}
-            >
-            </ha-radio>
-          </ha-formfield>
-          <ha-formfield
-            .label=${this.supervisor.localize("dialog.network.disabled")}
-            class="warning"
-          >
-            <ha-radio
-              @change=${this._handleRadioValueChanged}
-              .version=${version}
-              value="disabled"
-              name="${version}method"
-              .checked=${this._interface![version]?.method === "disabled"}
-            >
-            </ha-radio>
-          </ha-formfield>
-        </div>
-        ${this._interface![version].method === "static"
-          ? html`
-              <ha-textfield
-                class="flex-auto"
-                id="address"
-                .label=${this.supervisor.localize("dialog.network.ip_netmask")}
-                .version=${version}
-                .value=${this._toString(this._interface![version].address)}
-                @change=${this._handleInputValueChanged}
-              >
-              </ha-textfield>
-              <ha-textfield
-                class="flex-auto"
-                id="gateway"
-                .label=${this.supervisor.localize("dialog.network.gateway")}
-                .version=${version}
-                .value=${this._interface![version].gateway}
-                @change=${this._handleInputValueChanged}
-              >
-              </ha-textfield>
-              <ha-textfield
-                class="flex-auto"
-                id="nameservers"
-                .label=${this.supervisor.localize("dialog.network.dns_servers")}
-                .version=${version}
-                .value=${this._toString(this._interface![version].nameservers)}
-                @change=${this._handleInputValueChanged}
-              >
-              </ha-textfield>
-            `
-          : ""}
-      </ha-expansion-panel>
-    `;
-  }
-
-  private _toArray(data: string | string[]): string[] {
-    if (Array.isArray(data)) {
-      if (data && typeof data[0] === "string") {
-        data = data[0];
-      }
-    }
-    if (!data) {
-      return [];
-    }
-    if (typeof data === "string") {
-      return data.replace(/ /g, "").split(",");
-    }
-    return data;
-  }
-
-  private _toString(data: string | string[]): string {
-    if (!data) {
-      return "";
-    }
-    if (Array.isArray(data)) {
-      return data.join(", ");
-    }
-    return data;
-  }
-
-  private async _updateNetwork() {
-    this._processing = true;
-    let interfaceOptions: Partial<NetworkInterface> = {};
-
-    IP_VERSIONS.forEach((version) => {
-      interfaceOptions[version] = {
-        method: this._interface![version]?.method || "auto",
-      };
-      if (this._interface![version]?.method === "static") {
-        interfaceOptions[version] = {
-          ...interfaceOptions[version],
-          address: this._toArray(this._interface![version]?.address),
-          gateway: this._interface![version]?.gateway,
-          nameservers: this._toArray(this._interface![version]?.nameservers),
-        };
-      }
-    });
-
-    if (this._wifiConfiguration) {
-      interfaceOptions = {
-        ...interfaceOptions,
-        wifi: {
-          ssid: this._wifiConfiguration.ssid,
-          mode: this._wifiConfiguration.mode,
-          auth: this._wifiConfiguration.auth || "open",
-        },
-      };
-      if (interfaceOptions.wifi!.auth !== "open") {
-        interfaceOptions.wifi = {
-          ...interfaceOptions.wifi,
-          psk: this._wifiConfiguration.psk,
-        };
-      }
-    }
-
-    interfaceOptions.enabled =
-      this._wifiConfiguration !== undefined ||
-      interfaceOptions.ipv4?.method !== "disabled" ||
-      interfaceOptions.ipv6?.method !== "disabled";
-
-    try {
-      await updateNetworkInterface(
-        this.hass,
-        this._interface!.interface,
-        interfaceOptions
-      );
-    } catch (err: any) {
-      showAlertDialog(this, {
-        title: this.supervisor.localize("dialog.network.failed_to_change"),
-        text: extractApiErrorMessage(err),
-      });
-      this._processing = false;
-      return;
-    }
-    this._params?.loadData();
-    this.closeDialog();
-  }
-
-  private async _handleTabActivated(ev: CustomEvent): Promise<void> {
-    if (this._dirty) {
-      const confirm = await showConfirmationDialog(this, {
-        text: this.supervisor.localize("dialog.network.unsaved"),
-        confirmText: this.supervisor.localize("common.yes"),
-        dismissText: this.supervisor.localize("common.no"),
-      });
-      if (!confirm) {
-        this.requestUpdate("_interface");
-        return;
-      }
-    }
-    this._curTabIndex = Number(ev.detail.name);
-    this._interface = { ...this._interfaces[this._curTabIndex] };
-  }
-
-  private _handleRadioValueChanged(ev: CustomEvent): void {
-    const value = (ev.target as any).value as "disabled" | "auto" | "static";
-    const version = (ev.target as any).version as "ipv4" | "ipv6";
-
-    if (
-      !value ||
-      !this._interface ||
-      this._interface[version]!.method === value
-    ) {
-      return;
-    }
-    this._dirty = true;
-
-    this._interface[version]!.method = value;
-    this.requestUpdate("_interface");
-  }
-
-  private _handleRadioValueChangedAp(ev: CustomEvent): void {
-    const value = (ev.target as any).value as string as
-      | "open"
-      | "wep"
-      | "wpa-psk";
-    this._wifiConfiguration!.auth = value;
-    this._dirty = true;
-    this.requestUpdate("_wifiConfiguration");
-  }
-
-  private _handleInputValueChanged(ev: Event): void {
-    const source = ev.target as HaTextField;
-    const value = source.value;
-    const version = (ev.target as any).version as "ipv4" | "ipv6";
-    const id = source.id;
-
-    if (
-      !value ||
-      !this._interface ||
-      this._toString(this._interface[version]![id]) === this._toString(value)
-    ) {
-      return;
-    }
-
-    this._dirty = true;
-    this._interface[version]![id] = value;
-  }
-
-  private _handleInputValueChangedWifi(ev: Event): void {
-    const source = ev.target as HaTextField;
-    const value = source.value;
-    const id = source.id;
-
-    if (
-      !value ||
-      !this._wifiConfiguration ||
-      this._wifiConfiguration![id] === value
-    ) {
-      return;
-    }
-    this._dirty = true;
-    this._wifiConfiguration![id] = value;
-  }
-
-  static get styles(): CSSResultGroup {
-    return [
-      haStyleDialog,
-      css`
-        ha-header-bar {
-          --mdc-theme-on-primary: var(--primary-text-color);
-          --mdc-theme-primary: var(--mdc-theme-surface);
-          flex-shrink: 0;
-        }
-
-        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);
-          }
-        }
-
-        ha-button.scan {
-          margin-left: 8px;
-          margin-inline-start: 8px;
-          margin-inline-end: initial;
-        }
-
-        .container {
-          padding: 0 8px 4px;
-        }
-        .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: 16px;
-          padding-bottom: max(var(--safe-area-inset-bottom), 16px);
-          background-color: var(--mdc-theme-surface, #fff);
-        }
-        .warning {
-          color: var(--error-color);
-          --primary-color: var(--error-color);
-        }
-        div.warning {
-          margin: 12px 4px -12px;
-        }
-
-        ha-expansion-panel {
-          --expansion-panel-summary-padding: 0 16px;
-          margin: 4px 0;
-        }
-        ha-textfield {
-          padding: 0 14px;
-        }
-        ha-list-item {
-          --mdc-list-side-padding: 10px;
-        }
-
-        ha-tab-group-tab {
-          flex: 1;
-        }
-        ha-tab-group-tab::part(base) {
-          width: 100%;
-          justify-content: center;
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "dialog-hassio-network": DialogHassioNetwork;
-  }
-}

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

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

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

@@ -1,18 +0,0 @@
-import { fireEvent } from "../../../../src/common/dom/fire_event";
-import type { Supervisor } from "../../../../src/data/supervisor/supervisor";
-import "./dialog-hassio-registries";
-
-export interface RegistriesDialogParams {
-  supervisor: Supervisor;
-}
-
-export const showRegistriesDialog = (
-  element: HTMLElement,
-  dialogParams: RegistriesDialogParams
-): void => {
-  fireEvent(element, "show-dialog", {
-    dialogTag: "dialog-hassio-registries",
-    dialogImport: () => import("./dialog-hassio-registries"),
-    dialogParams,
-  });
-};

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

@@ -1,19 +0,0 @@
-import { fireEvent } from "../../../../src/common/dom/fire_event";
-import type { Supervisor } from "../../../../src/data/supervisor/supervisor";
-import "./dialog-hassio-repositories";
-
-export interface HassioRepositoryDialogParams {
-  supervisor: Supervisor;
-  url?: string;
-}
-
-export const showRepositoriesDialog = (
-  element: HTMLElement,
-  dialogParams: HassioRepositoryDialogParams
-): void => {
-  fireEvent(element, "show-dialog", {
-    dialogTag: "dialog-hassio-repositories",
-    dialogImport: () => import("./dialog-hassio-repositories"),
-    dialogParams,
-  });
-};

hassio/src/dialogs/suggestAddonRestart.ts

@@ -1,38 +0,0 @@
-import type { LitElement } from "lit";
-import type { HassioAddonDetails } from "../../../src/data/hassio/addon";
-import { restartHassioAddon } from "../../../src/data/hassio/addon";
-import { extractApiErrorMessage } from "../../../src/data/hassio/common";
-import type { Supervisor } from "../../../src/data/supervisor/supervisor";
-import {
-  showAlertDialog,
-  showConfirmationDialog,
-} from "../../../src/dialogs/generic/show-dialog-box";
-import type { HomeAssistant } from "../../../src/types";
-
-export const suggestAddonRestart = async (
-  element: LitElement,
-  hass: HomeAssistant,
-  supervisor: Supervisor,
-  addon: HassioAddonDetails
-): Promise<void> => {
-  const confirmed = await showConfirmationDialog(element, {
-    title: supervisor.localize("dialog.restart_addon.title", {
-      name: addon.name,
-    }),
-    text: supervisor.localize("dialog.restart_addon.text"),
-    confirmText: supervisor.localize("dialog.restart_addon.restart"),
-    dismissText: supervisor.localize("common.cancel"),
-  });
-  if (confirmed) {
-    try {
-      await restartHassioAddon(hass, addon.slug);
-    } catch (err: any) {
-      showAlertDialog(element, {
-        title: supervisor.localize("common.failed_to_restart_name", {
-          name: addon.name,
-        }),
-        text: extractApiErrorMessage(err),
-      });
-    }
-  }
-};

hassio/src/dialogs/system-managed/dialog-system-managed.ts

@@ -1,192 +0,0 @@
-import { mdiClose, mdiPuzzle, mdiSwapHorizontal } from "@mdi/js";
-import type { CSSResultGroup } from "lit";
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
-import { atLeastVersion } from "../../../../src/common/config/version";
-import "../../../../src/components/ha-dialog-header";
-import "../../../../src/components/ha-icon-button";
-import "../../../../src/components/ha-icon-next";
-import "../../../../src/components/ha-md-dialog";
-import type { HaMdDialog } from "../../../../src/components/ha-md-dialog";
-import "../../../../src/components/ha-md-list";
-import "../../../../src/components/ha-md-list-item";
-import "../../../../src/components/ha-svg-icon";
-import {
-  getConfigEntry,
-  type ConfigEntry,
-} from "../../../../src/data/config_entries";
-import type { HassioAddonDetails } from "../../../../src/data/hassio/addon";
-import type { Supervisor } from "../../../../src/data/supervisor/supervisor";
-import { mdiHomeAssistant } from "../../../../src/resources/home-assistant-logo-svg";
-import { haStyle } from "../../../../src/resources/styles";
-import type { HomeAssistant } from "../../../../src/types";
-import { brandsUrl } from "../../../../src/util/brands-url";
-import type { SystemManagedDialogParams } from "./show-dialog-system-managed";
-
-@customElement("dialog-system-managed")
-class HassioSystemManagedDialog extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @state() private _supervisor?: Supervisor;
-
-  @state() private _addon?: HassioAddonDetails;
-
-  @state() private _open = false;
-
-  @state() private _configEntry?: ConfigEntry;
-
-  @query("ha-md-dialog") private _dialog?: HaMdDialog;
-
-  public async showDialog(
-    dialogParams: SystemManagedDialogParams
-  ): Promise<void> {
-    this._addon = dialogParams.addon;
-    this._supervisor = dialogParams.supervisor;
-    this._open = true;
-    this._loadConfigEntry();
-  }
-
-  private _dialogClosed() {
-    this._addon = undefined;
-    this._supervisor = undefined;
-    this._configEntry = undefined;
-    this._open = false;
-  }
-
-  public closeDialog() {
-    this._dialog?.close();
-    return true;
-  }
-
-  protected render() {
-    if (!this._addon || !this._open || !this._supervisor) {
-      return nothing;
-    }
-
-    const addonImage =
-      atLeastVersion(this.hass.config.version, 0, 105) && this._addon.icon
-        ? `/api/hassio/addons/${this._addon.slug}/icon`
-        : undefined;
-
-    return html`
-      <ha-md-dialog open @closed=${this._dialogClosed}>
-        <ha-dialog-header slot="headline">
-          <ha-icon-button
-            slot="navigationIcon"
-            .path=${mdiClose}
-            @click=${this.closeDialog}
-          ></ha-icon-button>
-          <span slot="title">${this._addon?.name}</span>
-        </ha-dialog-header>
-        <div slot="content">
-          <div class="icons">
-            <ha-svg-icon
-              class="primary"
-              .path=${mdiHomeAssistant}
-            ></ha-svg-icon>
-            <ha-svg-icon .path=${mdiSwapHorizontal}></ha-svg-icon>
-            ${addonImage
-              ? html`<img src=${addonImage} alt=${this._addon.name} />`
-              : html`<ha-svg-icon .path=${mdiPuzzle}></ha-svg-icon>`}
-          </div>
-          ${this._supervisor.localize("addon.system_managed.title")}.<br />
-          ${this._supervisor.localize("addon.system_managed.description")}
-          ${this._configEntry
-            ? html`
-                <h3>
-                  ${this._supervisor.localize(
-                    "addon.system_managed.managed_by"
-                  )}:
-                </h3>
-                <ha-md-list>
-                  <ha-md-list-item
-                    type="link"
-                    href=${`/config/integrations/integration/${this._configEntry.domain}`}
-                  >
-                    <img
-                      slot="start"
-                      class="integration-icon"
-                      alt=${this._configEntry.title}
-                      src=${brandsUrl({
-                        domain: this._configEntry.domain,
-                        type: "icon",
-                        darkOptimized: this.hass.themes?.darkMode,
-                      })}
-                      crossorigin="anonymous"
-                      referrerpolicy="no-referrer"
-                      @error=${this._onImageError}
-                      @load=${this._onImageLoad}
-                    />
-                    ${this._configEntry.title}
-                    <ha-icon-next slot="end"></ha-icon-next>
-                  </ha-md-list-item>
-                </ha-md-list>
-              `
-            : nothing}
-        </div>
-      </ha-md-dialog>
-    `;
-  }
-
-  private _onImageLoad(ev) {
-    ev.target.style.visibility = "initial";
-  }
-
-  private _onImageError(ev) {
-    ev.target.style.visibility = "hidden";
-  }
-
-  private async _loadConfigEntry() {
-    if (this._addon?.system_managed_config_entry) {
-      try {
-        const { config_entry } = await getConfigEntry(
-          this.hass,
-          this._addon.system_managed_config_entry
-        );
-        this._configEntry = config_entry;
-      } catch (err) {
-        // eslint-disable-next-line no-console
-        console.error(err);
-      }
-    }
-  }
-
-  static get styles(): CSSResultGroup {
-    return [
-      haStyle,
-      css`
-        .icons {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          gap: var(--ha-space-4);
-          --mdc-icon-size: 48px;
-          margin-bottom: 32px;
-        }
-        .icons img {
-          width: 48px;
-        }
-        .icons .primary {
-          color: var(--primary-color);
-        }
-        .actions {
-          display: flex;
-          justify-content: space-between;
-        }
-        .integration-icon {
-          width: 24px;
-        }
-        ha-md-list-item {
-          --md-list-item-leading-space: 4px;
-          --md-list-item-trailing-space: 4px;
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "dialog-system-managed": HassioSystemManagedDialog;
-  }
-}

hassio/src/dialogs/system-managed/show-dialog-system-managed.ts

@@ -1,19 +0,0 @@
-import { fireEvent } from "../../../../src/common/dom/fire_event";
-import type { HassioAddonDetails } from "../../../../src/data/hassio/addon";
-import type { Supervisor } from "../../../../src/data/supervisor/supervisor";
-
-export interface SystemManagedDialogParams {
-  addon: HassioAddonDetails;
-  supervisor: Supervisor;
-}
-
-export const showSystemManagedDialog = (
-  element: HTMLElement,
-  dialogParams: SystemManagedDialogParams
-): void => {
-  fireEvent(element, "show-dialog", {
-    dialogTag: "dialog-system-managed",
-    dialogImport: () => import("./dialog-system-managed"),
-    dialogParams,
-  });
-};

hassio/src/entrypoint.js.template

@@ -1,23 +0,0 @@
-(function () {
-  function loadES5(src) {
-    var el = document.createElement("script");
-    el.src = src;
-    document.body.appendChild(el);
-  }
-  if (<%= modernRegex %>.test(navigator.userAgent)) {
-    try {
-        <% for (const entry of latestEntryJS) { %>
-          new Function("import('<%= entry %>')")();
-        <% } %>
-    } catch (err) {
-      <% for (const entry of es5EntryJS) { %>
-        loadES5("<%= entry %>");
-      <% } %>
-    }
-  } else {
-    <% for (const entry of es5EntryJS) { %>
-      loadES5("<%= entry %>");
-    <% } %>
-  }
-})();
- 

hassio/src/entrypoint.ts

@@ -1,28 +0,0 @@
-import {
-  haFontFamilyBody,
-  haFontSmoothing,
-  haMozOsxFontSmoothing,
-} from "../../src/resources/theme/typography.globals";
-import "./hassio-main";
-
-import("../../src/resources/append-ha-style");
-
-const styleEl = document.createElement("style");
-styleEl.textContent = `
-body {
-  font-family: ${haFontFamilyBody};
-  -moz-osx-font-smoothing: ${haMozOsxFontSmoothing};
-  -webkit-font-smoothing: ${haFontSmoothing};
-  font-weight: var(--ha-font-weight-normal);
-  margin: 0;
-  padding: 0;
-  height: 100vh;
-}
-@media (prefers-color-scheme: dark) {
-  body {
-    background-color: #111111;
-    color: #e1e1e1;
-  }
-}
-`;
-document.head.appendChild(styleEl);

hassio/src/hassio-main.ts

@@ -1,146 +0,0 @@
-import type { PropertyValues } from "lit";
-import { html } from "lit";
-import { customElement, property } from "lit/decorators";
-import { atLeastVersion } from "../../src/common/config/version";
-import { applyThemesOnElement } from "../../src/common/dom/apply_themes_on_element";
-import { fireEvent } from "../../src/common/dom/fire_event";
-import { mainWindow } from "../../src/common/dom/get_main_window";
-import { isNavigationClick } from "../../src/common/dom/is-navigation-click";
-import { navigate } from "../../src/common/navigate";
-import type { HassioPanelInfo } from "../../src/data/hassio/supervisor";
-import type { Supervisor } from "../../src/data/supervisor/supervisor";
-import { makeDialogManager } from "../../src/dialogs/make-dialog-manager";
-import type { HomeAssistant } from "../../src/types";
-import "./hassio-router";
-import { SupervisorBaseElement } from "./supervisor-base-element";
-
-@customElement("hassio-main")
-export class HassioMain extends SupervisorBaseElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ attribute: false }) public supervisor!: Supervisor;
-
-  @property({ attribute: false }) public panel!: HassioPanelInfo;
-
-  @property({ type: Boolean }) public narrow = false;
-
-  protected firstUpdated(changedProps: PropertyValues) {
-    super.firstUpdated(changedProps);
-
-    this._applyTheme();
-
-    // Paulus - March 17, 2019
-    // We went to a single hass-toggle-menu event in HA 0.90. However, the
-    // supervisor UI can also run under older versions of Home Assistant.
-    // So here we are going to translate toggle events into the appropriate
-    // open and close events. These events are a no-op in newer versions of
-    // Home Assistant.
-    this.addEventListener("hass-toggle-menu", () => {
-      fireEvent(
-        (window.parent as any).customPanel,
-        // @ts-ignore
-        this.hass.dockedSidebar ? "hass-close-menu" : "hass-open-menu"
-      );
-    });
-    // Paulus - March 19, 2019
-    // We changed the navigate event to fire directly on the window, as that's
-    // where we are listening for it. However, the older panel_custom will
-    // listen on this element for navigation events, so we need to forward them.
-
-    // Joakim - April 26, 2021
-    // Due to changes in behavior in Google Chrome, we changed navigate to listen on the top element
-    mainWindow.addEventListener("location-changed", (ev) =>
-      // @ts-ignore
-      fireEvent(this, ev.type, ev.detail, {
-        bubbles: false,
-      })
-    );
-
-    // Paulus - May 17, 2021
-    // Convert the <a> tags to native nav in Home Assistant < 2021.6
-    document.body.addEventListener("click", (ev) => {
-      const href = isNavigationClick(ev);
-      if (href) {
-        navigate(href);
-      }
-    });
-
-    // Forward haptic events to parent window.
-    window.addEventListener("haptic", (ev) => {
-      // @ts-ignore
-      fireEvent(window.parent, ev.type, ev.detail, {
-        bubbles: false,
-      });
-    });
-
-    // Forward keydown events to the main window for quickbar access
-    document.body.addEventListener("keydown", (ev: KeyboardEvent) => {
-      if (ev.altKey || ev.ctrlKey || ev.shiftKey || ev.metaKey) {
-        // Ignore if modifier keys are pressed
-        return;
-      }
-      // @ts-ignore
-      fireEvent(mainWindow, "hass-quick-bar-trigger", ev, {
-        bubbles: false,
-      });
-    });
-
-    makeDialogManager(this, this.shadowRoot!);
-  }
-
-  protected updated(changedProps: PropertyValues) {
-    super.updated(changedProps);
-    const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
-    if (!oldHass) {
-      return;
-    }
-    if (oldHass.themes !== this.hass.themes) {
-      this._applyTheme();
-    }
-  }
-
-  protected render() {
-    return html`
-      <hassio-router
-        .hass=${this.hass}
-        .supervisor=${this.supervisor}
-        .route=${this.route}
-        .panel=${this.panel}
-        .narrow=${this.narrow}
-      ></hassio-router>
-    `;
-  }
-
-  private _applyTheme() {
-    let themeName: string;
-    let themeSettings: Partial<HomeAssistant["selectedTheme"]> | undefined;
-
-    if (atLeastVersion(this.hass.config.version, 0, 114)) {
-      themeName =
-        this.hass.selectedTheme?.theme ||
-        (this.hass.themes.darkMode && this.hass.themes.default_dark_theme
-          ? this.hass.themes.default_dark_theme!
-          : this.hass.themes.default_theme);
-
-      themeSettings = this.hass.selectedTheme;
-    } else {
-      themeName =
-        (this.hass.selectedTheme as unknown as string) ||
-        this.hass.themes.default_theme;
-    }
-
-    applyThemesOnElement(
-      this.parentElement,
-      this.hass.themes,
-      themeName,
-      themeSettings,
-      true
-    );
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hassio-main": HassioMain;
-  }
-}

hassio/src/hassio-my-redirect.ts

@@ -1,155 +0,0 @@
-import { sanitizeUrl } from "@braintree/sanitize-url";
-import type { TemplateResult } from "lit";
-import { html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { navigate } from "../../src/common/navigate";
-import {
-  createSearchParam,
-  extractSearchParamsObject,
-} from "../../src/common/url/search-params";
-import type { Supervisor } from "../../src/data/supervisor/supervisor";
-import "../../src/layouts/hass-error-screen";
-import type {
-  ParamType,
-  Redirect,
-  Redirects,
-} from "../../src/panels/my/ha-panel-my";
-import type { HomeAssistant, Route } from "../../src/types";
-
-export const REDIRECTS: Redirects = {
-  supervisor: {
-    redirect: "/hassio/dashboard",
-  },
-  supervisor_logs: {
-    redirect: "/hassio/system",
-  },
-  supervisor_info: {
-    redirect: "/hassio/system",
-  },
-  supervisor_snapshots: {
-    redirect: "/hassio/backups",
-  },
-  supervisor_backups: {
-    redirect: "/hassio/backups",
-  },
-  supervisor_store: {
-    redirect: "/hassio/store",
-  },
-  supervisor_addons: {
-    redirect: "/hassio/dashboard",
-  },
-  supervisor_addon: {
-    redirect: "/hassio/addon",
-    params: {
-      addon: "string",
-    },
-    optional_params: {
-      repository_url: "url",
-    },
-  },
-  supervisor_ingress: {
-    redirect: "/hassio/ingress",
-    params: {
-      addon: "string",
-    },
-  },
-  supervisor_add_addon_repository: {
-    redirect: "/hassio/store",
-    params: {
-      repository_url: "url",
-    },
-  },
-};
-
-@customElement("hassio-my-redirect")
-class HassioMyRedirect extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ attribute: false }) public supervisor!: Supervisor;
-
-  @property({ attribute: false }) public route!: Route;
-
-  @state() public _error?: TemplateResult | string;
-
-  connectedCallback() {
-    super.connectedCallback();
-    const path = this.route.path.substr(1);
-    const redirect = REDIRECTS[path];
-
-    if (!redirect) {
-      this._error = this.supervisor.localize("my.not_supported", {
-        link: html`<a
-          target="_blank"
-          rel="noreferrer noopener"
-          href="https://my.home-assistant.io/faq.html#supported-pages"
-        >
-          ${this.supervisor.localize("my.faq_link")}
-        </a>`,
-      });
-      return;
-    }
-
-    let url: string;
-    try {
-      url = this._createRedirectUrl(redirect);
-    } catch (_err: any) {
-      this._error = this.supervisor.localize("my.error");
-      return;
-    }
-
-    navigate(url, { replace: true });
-  }
-
-  protected render() {
-    if (this._error) {
-      return html`<hass-error-screen
-        .error=${this._error}
-      ></hass-error-screen>`;
-    }
-    return nothing;
-  }
-
-  private _createRedirectUrl(redirect: Redirect): string {
-    const params = this._createRedirectParams(redirect);
-    return `${redirect.redirect}${params}`;
-  }
-
-  private _createRedirectParams(redirect: Redirect): string {
-    const params = extractSearchParamsObject();
-    if (!redirect.params && !Object.keys(params).length) {
-      return "";
-    }
-    const resultParams = {};
-    Object.entries(redirect.params || {}).forEach(([key, type]) => {
-      if (!params[key] || !this._checkParamType(type, params[key])) {
-        throw Error();
-      }
-      resultParams[key] = params[key];
-    });
-    Object.entries(redirect.optional_params || {}).forEach(([key, type]) => {
-      if (params[key]) {
-        if (!this._checkParamType(type, params[key])) {
-          throw Error();
-        }
-        resultParams[key] = params[key];
-      }
-    });
-    return `?${createSearchParam(resultParams)}`;
-  }
-
-  private _checkParamType(type: ParamType, value: string) {
-    if (type === "string") {
-      return true;
-    }
-    if (type === "url") {
-      return value && value === sanitizeUrl(value);
-    }
-    return false;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hassio-my-redirect": HassioMyRedirect;
-  }
-}

hassio/src/hassio-panel-router.ts

@@ -1,53 +0,0 @@
-import { customElement, property } from "lit/decorators";
-import type { Supervisor } from "../../src/data/supervisor/supervisor";
-import type { RouterOptions } from "../../src/layouts/hass-router-page";
-import { HassRouterPage } from "../../src/layouts/hass-router-page";
-import type { HomeAssistant, Route } from "../../src/types";
-// Don't codesplit it, that way the dashboard always loads fast.
-import "./dashboard/hassio-dashboard";
-
-@customElement("hassio-panel-router")
-class HassioPanelRouter extends HassRouterPage {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ attribute: false }) public supervisor!: Supervisor;
-
-  @property({ attribute: false }) public route!: Route;
-
-  @property({ type: Boolean }) public narrow = false;
-
-  protected routerOptions: RouterOptions = {
-    beforeRender: (page: string) =>
-      page === "snapshots" ? "backups" : undefined,
-    routes: {
-      dashboard: {
-        tag: "hassio-dashboard",
-      },
-      store: {
-        tag: "hassio-addon-store",
-        load: () => import("./addon-store/hassio-addon-store"),
-      },
-      backups: {
-        tag: "hassio-backups",
-        load: () => import("./backups/hassio-backups"),
-      },
-      system: {
-        tag: "hassio-system",
-        load: () => import("./system/hassio-system"),
-      },
-    },
-  };
-
-  protected updatePageEl(el) {
-    el.hass = this.hass;
-    el.supervisor = this.supervisor;
-    el.route = this.route;
-    el.narrow = this.narrow;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hassio-panel-router": HassioPanelRouter;
-  }
-}

hassio/src/hassio-panel.ts

@@ -1,55 +0,0 @@
-import type { TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
-import type { Supervisor } from "../../src/data/supervisor/supervisor";
-import { supervisorCollection } from "../../src/data/supervisor/supervisor";
-import "../../src/layouts/hass-loading-screen";
-import type { HomeAssistant, Route } from "../../src/types";
-import "./hassio-panel-router";
-
-@customElement("hassio-panel")
-class HassioPanel extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ attribute: false }) public supervisor!: Supervisor;
-
-  @property({ type: Boolean }) public narrow = false;
-
-  @property({ attribute: false }) public route!: Route;
-
-  protected render(): TemplateResult {
-    if (!this.hass) {
-      return html`<hass-loading-screen></hass-loading-screen>`;
-    }
-
-    if (
-      Object.keys(supervisorCollection).some(
-        (collection) => !this.supervisor[collection]
-      )
-    ) {
-      return html`<hass-loading-screen></hass-loading-screen>`;
-    }
-    return html`
-      <hassio-panel-router
-        .hass=${this.hass}
-        .supervisor=${this.supervisor}
-        .route=${this.route}
-        .narrow=${this.narrow}
-      ></hassio-panel-router>
-    `;
-  }
-
-  static styles = css`
-    :host {
-      --app-header-background-color: var(--sidebar-background-color);
-      --app-header-text-color: var(--sidebar-text-color);
-      --app-header-border-bottom: 1px solid var(--divider-color);
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hassio-panel": HassioPanel;
-  }
-}

hassio/src/hassio-router.ts

@@ -1,91 +0,0 @@
-import { customElement, property } from "lit/decorators";
-import memoizeOne from "memoize-one";
-import type { HassioPanelInfo } from "../../src/data/hassio/supervisor";
-import type { Supervisor } from "../../src/data/supervisor/supervisor";
-import type { RouterOptions } from "../../src/layouts/hass-router-page";
-import { HassRouterPage } from "../../src/layouts/hass-router-page";
-import type { HomeAssistant } from "../../src/types";
-// Don't codesplit it, that way the dashboard always loads fast.
-import "./hassio-panel";
-
-@customElement("hassio-router")
-class HassioRouter extends HassRouterPage {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ attribute: false }) public supervisor!: Supervisor;
-
-  @property({ attribute: false }) public panel!: HassioPanelInfo;
-
-  @property({ type: Boolean }) public narrow = false;
-
-  protected routerOptions: RouterOptions = {
-    // Hass.io has a page with tabs, so we route all non-matching routes to it.
-    defaultPage: "dashboard",
-    beforeRender: (page: string) => {
-      if (page === "snapshots") {
-        return "backups";
-      }
-      if (page === "dashboard" && this.panel.config?.ingress) {
-        return "ingress";
-      }
-      return undefined;
-    },
-    showLoading: true,
-    routes: {
-      dashboard: {
-        tag: "hassio-panel",
-        cache: true,
-      },
-      backups: "dashboard",
-      store: "dashboard",
-      system: "dashboard",
-      "update-available": {
-        tag: "update-available-dashboard",
-        load: () => import("./update-available/update-available-dashboard"),
-      },
-      addon: {
-        tag: "hassio-addon-dashboard",
-        load: () => import("./addon-view/hassio-addon-dashboard"),
-      },
-      ingress: {
-        tag: "hassio-ingress-view",
-        load: () => import("./ingress-view/hassio-ingress-view"),
-      },
-      _my_redirect: {
-        tag: "hassio-my-redirect",
-        load: () => import("./hassio-my-redirect"),
-      },
-    },
-  };
-
-  protected updatePageEl(el) {
-    // the tabs page does its own routing so needs full route.
-    const hassioPanel = el.localName === "hassio-panel";
-    const ingressPanel = el.localName === "hassio-ingress-view";
-    const route = hassioPanel
-      ? this.route
-      : ingressPanel && this.panel.config?.ingress
-        ? this._ingressRoute(this.panel.config?.ingress)
-        : this.routeTail;
-
-    el.hass = this.hass;
-    el.narrow = this.narrow;
-    el.route = route;
-    el.supervisor = this.supervisor;
-
-    if (ingressPanel) {
-      el.ingressPanel = Boolean(this.panel.config?.ingress);
-    }
-  }
-
-  private _ingressRoute = memoizeOne((ingress: string) => ({
-    prefix: "/hassio/ingress",
-    path: `/${ingress}`,
-  }));
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hassio-router": HassioRouter;
-  }
-}

hassio/src/hassio-tabs.ts

@@ -1,34 +0,0 @@
-import {
-  mdiBackupRestore,
-  mdiCogs,
-  mdiPuzzle,
-  mdiViewDashboard,
-} from "@mdi/js";
-import { atLeastVersion } from "../../src/common/config/version";
-import type { PageNavigation } from "../../src/layouts/hass-tabs-subpage";
-import type { HomeAssistant } from "../../src/types";
-
-export const supervisorTabs = (hass: HomeAssistant): PageNavigation[] =>
-  atLeastVersion(hass.config.version, 2022, 5)
-    ? []
-    : [
-        {
-          translationKey: atLeastVersion(hass.config.version, 2021, 12)
-            ? "panel.addons"
-            : "panel.dashboard",
-          path: `/hassio/dashboard`,
-          iconPath: atLeastVersion(hass.config.version, 2021, 12)
-            ? mdiPuzzle
-            : mdiViewDashboard,
-        },
-        {
-          translationKey: "panel.backups",
-          path: `/hassio/backups`,
-          iconPath: mdiBackupRestore,
-        },
-        {
-          translationKey: "panel.system",
-          path: `/hassio/system`,
-          iconPath: mdiCogs,
-        },
-      ];