Remove

.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 `/config/developer-tools/state`
+  You can find this information at `/developer-tools/state`
 -->
 
 ```yaml

.github/copilot-instructions.md

@@ -2,8 +2,6 @@
 
 You are an assistant helping with development of the Home Assistant frontend. The frontend is built using Lit-based Web Components and TypeScript, providing a responsive and performant interface for home automation control.
 
-**Note**: This file contains high-level guidelines and references to implementation patterns. For detailed component documentation, API references, and usage examples, refer to the `gallery/` directory.
-
 ## Table of Contents
 
 - [Quick Reference](#quick-reference)
@@ -22,13 +20,11 @@ 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 (run WITHOUT file arguments)
+yarn lint:types    # TypeScript compiler
 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
@@ -155,10 +151,6 @@ try {
 ### Styling Guidelines
 
 - **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-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
 - **Follow Material Design**: Use Material Web Components where appropriate
 - **Support RTL**: Ensure all layouts work in RTL languages
@@ -167,68 +159,21 @@ try {
 static get styles() {
   return css`
     :host {
-      padding: var(--ha-space-4);
+      --spacing: 16px;
+      padding: var(--spacing);
       color: var(--primary-text-color);
       background-color: var(--card-background-color);
     }
 
-    .content {
-      gap: var(--ha-space-2);
-    }
-
     @media (max-width: 600px) {
       :host {
-        padding: var(--ha-space-2);
+        --spacing: 8px;
       }
     }
   `;
 }
 ```
 
-### View Transitions
-
-The View Transitions API creates smooth animations between DOM state changes. When implementing view transitions:
-
-**Core Resources:**
-
-- **Utility wrapper**: `src/common/util/view-transition.ts` - `withViewTransition()` function with graceful fallback
-- **Real-world example**: `src/util/launch-screen.ts` - Launch screen fade pattern with browser support detection
-- **Animation keyframes**: `src/resources/theme/animations.globals.ts` - Global `fade-in`, `fade-out`, `scale` animations
-- **Animation duration**: `src/resources/theme/core.globals.ts` - `--ha-animation-base-duration` (350ms, respects `prefers-reduced-motion`)
-
-**Implementation Guidelines:**
-
-1. Always use `withViewTransition()` wrapper for automatic fallback
-2. Keep transitions simple (subtle crossfades and fades work best)
-3. Use `--ha-animation-base-duration` CSS variable for consistent timing
-4. Assign unique `view-transition-name` to elements (must be unique at any given time)
-5. For Lit components: Override `performUpdate()` or use `::part()` for internal elements
-
-**Default Root Transition:**
-
-By default, `:root` receives `view-transition-name: root`, creating a full-page crossfade. Target with [`::view-transition-group(root)`](https://developer.mozilla.org/en-US/docs/Web/CSS/::view-transition-group) to customize the default page transition.
-
-**Important Constraints:**
-
-- Each `view-transition-name` must be unique at any given time
-- Only one view transition can run at a time
-- **Shadow DOM incompatibility**: View transitions operate at document level and do not work within Shadow DOM due to style isolation ([spec discussion](https://github.com/w3c/csswg-drafts/issues/10303)). For web components, set `view-transition-name` on the `:host` element or use document-level transitions
-
-**Current Usage & Planned Applications:**
-
-- Launch screen fade out (implemented)
-- Automation sidebar transitions (planned - #27238)
-- More info dialog content changes (planned - #27672)
-- Toolbar navigation, ha-spinner transitions (planned)
-
-**Specification & Documentation:**
-
-For browser support, API details, and current specifications, refer to these authoritative sources (note: check publication dates as specs evolve):
-
-- [MDN: View Transition API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API) - Comprehensive API reference
-- [Chrome for Developers: View Transitions](https://developer.chrome.com/docs/web-platform/view-transitions) - Implementation guide and examples
-- [W3C Draft Specification](https://drafts.csswg.org/css-view-transitions/) - Official specification (evolving)
-
 ### Performance Best Practices
 
 - **Code split**: Split code at the panel/dialog level
@@ -250,9 +195,8 @@ For browser support, API details, and current specifications, refer to these aut
 
 **Available Dialog Types:**
 
-- `ha-wa-dialog` - Preferred for new dialogs (Web Awesome based)
-- `ha-md-dialog` - Material Design 3 dialog component
-- `ha-dialog` - Legacy component (still widely used)
+- `ha-md-dialog` - Preferred for new code (Material Design 3)
+- `ha-dialog` - Legacy component still widely used
 
 **Opening Dialogs (Fire Event Pattern - Recommended):**
 
@@ -267,45 +211,15 @@ fireEvent(this, "show-dialog", {
 **Dialog Implementation Requirements:**
 
 - Implement `HassDialog<T>` interface
-- Use `@state() private _open = false` to control dialog visibility
-- Set `_open = true` in `showDialog()`, `_open = false` in `closeDialog()`
+- Use `createCloseHeading()` for standard headers
+- Import `haStyleDialog` for consistent styling
 - Return `nothing` when no params (loading state)
-- Fire `dialog-closed` event in `_dialogClosed()` handler
-- Use `header-title` attribute for simple titles
-- Use `header-subtitle` attribute for simple subtitles
-- Use slots for custom content where the standard attributes are not enough
-- Use `ha-dialog-footer` with `primaryAction`/`secondaryAction` slots for footer content
-- Add `autofocus` to first focusable element (e.g., `<ha-form autofocus>`). The component may need to forward this attribute internally.
+- Fire `dialog-closed` event when closing
+- Add `dialogInitialFocus` for accessibility
 
-**Dialog Sizing:**
-
-- Use `width` attribute with predefined sizes: `"small"` (320px), `"medium"` (560px - default), `"large"` (720px), or `"full"`
-- Custom sizing is NOT recommended - use the standard width presets
-- Example: `<ha-wa-dialog width="small">` for alert/confirmation dialogs
-
-**Button Appearance Guidelines:**
-
-- **Primary action buttons**: Default appearance (no appearance attribute) or omit for standard styling
-- **Secondary action buttons**: Use `appearance="plain"` for cancel/dismiss actions
-- **Destructive actions**: Use `appearance="filled"` for delete/remove operations (combined with appropriate semantic styling)
-- **Button sizes**: Use `size="small"` (32px height) or default/medium (40px height)
-- Always place primary action in `slot="primaryAction"` and secondary in `slot="secondaryAction"` within `ha-dialog-footer`
-
-**Recent Examples:**
-
-See these files for current patterns:
-
-- `src/panels/config/repairs/dialog-repairs-issue.ts`
-- `src/dialogs/restart/dialog-restart.ts`
-- `src/panels/config/lovelace/resources/dialog-lovelace-resource-detail.ts`
-
-**Gallery Documentation:**
-
-- `gallery/src/pages/components/ha-wa-dialog.markdown`
-- `gallery/src/pages/components/ha-dialogs.markdown`
+````
 
 ### Form Component (ha-form)
-
 - Schema-driven using `HaFormSchema[]`
 - Supports entity, device, area, target, number, boolean, time, action, text, object, select, icon, media, location selectors
 - Built-in validation with error display
@@ -321,11 +235,7 @@ See these files for current patterns:
   .computeLabel=${(schema) => this.hass.localize(`ui.panel.${schema.name}`)}
   @value-changed=${this._valueChanged}
 ></ha-form>
-```
-
-**Gallery Documentation:**
-
-- `gallery/src/pages/components/ha-form.markdown`
+````
 
 ### Alert Component (ha-alert)
 
@@ -339,35 +249,6 @@ See these files for current patterns:
 <ha-alert alert-type="success" dismissable>Success message</ha-alert>
 ```
 
-**Gallery Documentation:**
-
-- `gallery/src/pages/components/ha-alert.markdown`
-
-### Keyboard Shortcuts (ShortcutManager)
-
-The `ShortcutManager` class provides a unified way to register keyboard shortcuts with automatic input field protection.
-
-**Key Features:**
-
-- Automatically blocks shortcuts when input fields are focused
-- Prevents shortcuts during text selection (configurable via `allowWhenTextSelected`)
-- Supports both character-based and KeyCode-based shortcuts (for non-latin keyboards)
-
-**Implementation:**
-
-- **Class definition**: `src/common/keyboard/shortcuts.ts`
-- **Real-world example**: `src/state/quick-bar-mixin.ts` - Global shortcuts (e, c, d, m, a, Shift+?) with non-latin keyboard fallbacks
-
-### Tooltip Component (ha-tooltip)
-
-The `ha-tooltip` component wraps Web Awesome tooltip with Home Assistant theming. Use for providing contextual help text on hover.
-
-**Implementation:**
-
-- **Component definition**: `src/components/ha-tooltip.ts`
-- **Usage example**: `src/components/ha-label.ts`
-- **Gallery documentation**: `gallery/src/pages/components/ha-tooltip.markdown`
-
 ## Common Patterns
 
 ### Creating a Panel
@@ -408,19 +289,11 @@ export class DialogMyFeature
   @state()
   private _params?: MyDialogParams;
 
-  @state()
-  private _open = false;
-
   public async showDialog(params: MyDialogParams): Promise<void> {
     this._params = params;
-    this._open = true;
   }
 
   public closeDialog(): void {
-    this._open = false;
-  }
-
-  private _dialogClosed(): void {
     this._params = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
@@ -431,27 +304,23 @@ export class DialogMyFeature
     }
 
     return html`
-      <ha-wa-dialog
-        .hass=${this.hass}
-        .open=${this._open}
-        header-title=${this._params.title}
-        header-subtitle=${this._params.subtitle}
-        @closed=${this._dialogClosed}
+      <ha-dialog
+        open
+        @closed=${this.closeDialog}
+        .heading=${createCloseHeading(this.hass, this._params.title)}
       >
-        <p>Dialog content</p>
-        <ha-dialog-footer slot="footer">
-          <ha-button
-            slot="secondaryAction"
-            appearance="plain"
-            @click=${this.closeDialog}
-          >
-            ${this.hass.localize("ui.common.cancel")}
-          </ha-button>
-          <ha-button slot="primaryAction" @click=${this._submit}>
-            ${this.hass.localize("ui.common.save")}
-          </ha-button>
-        </ha-dialog-footer>
-      </ha-wa-dialog>
+        <!-- Dialog content -->
+        <ha-button
+          appearance="plain"
+          @click=${this.closeDialog}
+          slot="secondaryAction"
+        >
+          ${this.hass.localize("ui.common.cancel")}
+        </ha-button>
+        <ha-button @click=${this._submit} slot="primaryAction">
+          ${this.hass.localize("ui.common.save")}
+        </ha-button>
+      </ha-dialog>
     `;
   }
 
@@ -621,6 +490,7 @@ 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)
 
@@ -712,7 +582,7 @@ this.hass.localize("ui.panel.config.automation.delete_confirm", {
 - [ ] American English spelling
 - [ ] Friendly, informational tone
 - [ ] Avoids abbreviations and jargon
-- [ ] Correct terminology (integration not component)
+- [ ] Correct terminology (add-on not addon, integration not component)
 
 ### Component-Specific Checks
 

.github/labeler.yml

@@ -44,3 +44,8 @@ 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@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
         with:
           ref: dev
 
       - name: Setup Node
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.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@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
         with:
           ref: master
 
       - name: Setup Node
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.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@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
       - name: Setup Node
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.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@8b402f58fbc84540c8b491a91e594a4576fec3d7 # v5.0.2
+        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
         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@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
       - name: Setup Node
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.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@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
       - name: Setup Node
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -89,15 +89,32 @@ jobs:
         env:
           IS_TEST: "true"
       - name: Upload bundle stats
-        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
+        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
         with:
           name: frontend-bundle-stats
           path: build/stats/*.json
           if-no-files-found: error
-      - name: Upload frontend build
-        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
+  supervisor:
+    name: Build supervisor
+    needs: [lint, test]
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out files from GitHub
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
+      - name: Setup Node
+        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
         with:
-          name: frontend-build
-          path: hass_frontend/
+          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@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
+        with:
+          name: supervisor-bundle-stats
+          path: build/stats/*.json
           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@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
         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@19b2f06db2b6f5108140aeb04014ef02b648f789 # v4.31.11
+        uses: github/codeql-action/init@16140ae1a102900babc80a33c44059580f687047 # v4.30.9
         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@19b2f06db2b6f5108140aeb04014ef02b648f789 # v4.31.11
+        uses: github/codeql-action/autobuild@16140ae1a102900babc80a33c44059580f687047 # v4.30.9
 
       # ℹ️ 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@19b2f06db2b6f5108140aeb04014ef02b648f789 # v4.31.11
+        uses: github/codeql-action/analyze@16140ae1a102900babc80a33c44059580f687047 # v4.30.9

.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@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
         with:
           ref: dev
 
       - name: Setup Node
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.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@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
         with:
           ref: master
 
       - name: Setup Node
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.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@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
 
       - name: Setup Node
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.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@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
 
       - name: Setup Node
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.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@7266a7ce5c1df01b1c6db85bf8cd86c737dadbe7 # v6.0.0
+      - uses: dessant/lock-threads@1bf7ec25051fe7c00bdd17e6a7cf3d7bfb7dc771 # v5.0.1
         with:
           github-token: ${{ github.token }}
           process-only: "issues, prs"

.github/workflows/nightly.yaml

@@ -20,15 +20,15 @@ jobs:
       contents: write
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
 
       - name: Set up Python ${{ env.PYTHON_VERSION }}
-        uses: actions/setup-python@a309ff8b426b58ec0e2a45f0f869d46889d02405 # v6
+        uses: actions/setup-python@e797f83bcb11b83ae66e0230d6156d7c80228e7c # v6
         with:
           python-version: ${{ env.PYTHON_VERSION }}
 
       - name: Setup Node
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.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@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
+        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
         with:
           name: wheels
           path: dist/home_assistant_frontend*.whl
           if-no-files-found: error
 
       - name: Upload translations
-        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
+        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
         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]
+        bundle: [frontend, supervisor]
         build: [modern, legacy]
     runs-on: ubuntu-latest
     steps:
       - name: Send bundle stats and build information to RelativeCI
-        uses: relative-ci/agent-action@3c681926017930047fc03acaa35cd6a44efcbfc3 # v3.2.2
+        uses: relative-ci/agent-action@8504826a02078b05756e4c07e380023cc2c4274a # v3.1.0
         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@6db134d15f3909ccc9eefd369f02bd1e9cffdf97 # v6.2.0
+      - uses: release-drafter/release-drafter@b1476f6e6eb133afa41ed8589daba6dc69b4d3f5 # v6.1.0
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/release.yaml

@@ -19,17 +19,14 @@ 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@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
 
       - name: Set up Python ${{ env.PYTHON_VERSION }}
-        uses: actions/setup-python@a309ff8b426b58ec0e2a45f0f869d46889d02405 # v6.2.0
+        uses: actions/setup-python@e797f83bcb11b83ae66e0230d6156d7c80228e7c # v6.0.0
         with:
           python-version: ${{ env.PYTHON_VERSION }}
 
@@ -37,7 +34,7 @@ jobs:
         uses: home-assistant/actions/helpers/verify-version@master
 
       - name: Setup Node
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -49,20 +46,16 @@ jobs:
         run: ./script/translations_download
         env:
           LOKALISE_TOKEN: ${{ secrets.LOKALISE_TOKEN }}
-
       - name: Build and release package
         run: |
-          python3 -m pip install build
+          python3 -m pip install twine build
+          export TWINE_USERNAME="__token__"
+          export TWINE_PASSWORD="${{ secrets.TWINE_TOKEN }}"
           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@a06a81a03ee405af7f2048a818ed3f03bbf83c7b # v2.5.0
+        uses: softprops/action-gh-release@6da8fa9354ddfdc4aeace5fc48d7f679b5214090 # v2.4.1
         with:
           files: |
             dist/*.whl
@@ -82,7 +75,7 @@ jobs:
 
       # home-assistant/wheels doesn't support SHA pinning
       - name: Build wheels
-        uses: home-assistant/wheels@2025.12.0
+        uses: home-assistant/wheels@2025.10.0
         with:
           abi: cp313
           tag: musllinux_1_2
@@ -98,9 +91,9 @@ jobs:
       contents: write # Required to upload release assets
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
       - name: Setup Node
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -115,6 +108,35 @@ 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@a06a81a03ee405af7f2048a818ed3f03bbf83c7b # v2.5.0
+        uses: softprops/action-gh-release@6da8fa9354ddfdc4aeace5fc48d7f679b5214090 # v2.4.1
         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@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.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@6da8fa9354ddfdc4aeace5fc48d7f679b5214090 # v2.4.1
+        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@997185467fa4f803885201cee163a9f38240193d # v10.1.1
+        uses: actions/stale@5f858e3efba33a5ca4407a664cc011ad407f2008 # v10.1.0
         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@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
 
       - 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,5 +56,4 @@ test/coverage/
 
 # AI tooling
 .claude
-.cursor
 

.nvmrc

@@ -1 +1 @@
-24.13.0
+22.21.0

.vscode/tasks.json

@@ -73,6 +73,37 @@
         "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",
@@ -215,6 +246,20 @@
         "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",
@@ -223,6 +268,16 @@
     }
   ],
   "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,11 +1,9 @@
 compressionLevel: mixed
 
-npmMinimalAgeGate: "3d"
-
 defaultSemverRangePrefix: ""
 
 enableGlobalCache: false
 
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.12.0.cjs
+yarnPath: .yarn/releases/yarn-4.10.3.cjs

AGENTS.md

@@ -1 +0,0 @@
-.github/copilot-instructions.md

README.md

@@ -14,6 +14,7 @@ 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,14 +18,16 @@ module.exports.sourceMapURL = () => {
 module.exports.ignorePackages = () => [];
 
 // Files from NPM packages that we should replace with empty file
-module.exports.emptyPackages = ({ isLandingPageBuild }) =>
+module.exports.emptyPackages = ({ isHassioBuild }) =>
   [
-    // Icons in landingpage conflict with icons in HA so we don't load.
-    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 &&
       require.resolve(
         path.resolve(paths.root_dir, "src/components/ha-icon.ts")
       ),
-    isLandingPageBuild &&
+    isHassioBuild &&
       require.resolve(
         path.resolve(paths.root_dir, "src/components/ha-icon-picker.ts")
       ),
@@ -36,6 +38,7 @@ 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__: `\`${
@@ -288,6 +291,26 @@ 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),
@@ -314,7 +337,6 @@ module.exports.config = {
       publicPath: publicPath(latestBuild),
       isProdBuild,
       latestBuild,
-      isLandingPageBuild: true,
     };
   },
 };

build-scripts/gulp/clean.js

@@ -24,6 +24,10 @@ 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,17 +43,44 @@ 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(
-    // compressAppModernBrotli,
-    // compressAppOtherBrotli,
+    compressAppModernBrotli,
+    compressAppOtherBrotli,
     compressAppModernZopfli,
     compressAppOtherZopfli
   )
 );
+gulp.task(
+  "compress-hassio",
+  gulp.parallel(
+    compressHassioModernBrotli,
+    compressHassioOtherBrotli,
+    compressHassioModernZopfli,
+    compressHassioOtherZopfli
+  )
+);

build-scripts/gulp/entry-html.js

@@ -266,3 +266,28 @@ 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,11 +123,22 @@ 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

@@ -0,0 +1,45 @@
+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,6 +9,7 @@ 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,6 +13,7 @@ import {
   createCastConfig,
   createDemoConfig,
   createGalleryConfig,
+  createHassioConfig,
   createLandingPageConfig,
 } from "../rspack.cjs";
 
@@ -158,6 +159,31 @@ 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,9 +156,7 @@ const createTestTranslation = () =>
  */
 const createMasterTranslation = () =>
   gulp
-    .src([EN_SRC, ...(mergeBackend ? [`${inBackendDir}/en.json`] : [])], {
-      allowEmpty: true,
-    })
+    .src([EN_SRC, ...(mergeBackend ? [`${inBackendDir}/en.json`] : [])])
     .pipe(new CustomJSON(lokaliseTransform))
     .pipe(new MergeJSON("en"))
     .pipe(gulp.dest(workDir));
@@ -170,7 +168,9 @@ const setFragment = (fragment) => async () => {
 };
 
 const panelFragment = (fragment) =>
-  fragment !== "base" && fragment !== "landing-page";
+  fragment !== "base" &&
+  fragment !== "supervisor" &&
+  fragment !== "landing-page";
 
 const HASHES = new Map();
 
@@ -205,15 +205,18 @@ const createTranslations = async () => {
         FRAGMENTS.map((fragment) => {
           switch (fragment) {
             case "base":
-              // Remove the panels and landing-page to create the base translations
+              // Remove the panels and supervisor to create the base translations
               return [
                 flatten({
                   ...data,
                   ui: { ...data.ui, panel: undefined },
-                  "landing-page": undefined,
+                  supervisor: 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"]), ""];
@@ -313,6 +316,11 @@ 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,5 +49,15 @@ 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,7 @@ const createRspackConfig = ({
   latestBuild,
   isStatsBuild,
   isTestBuild,
-  isLandingPageBuild,
+  isHassioBuild,
   dontHash,
 }) => {
   if (!dontHash) {
@@ -167,12 +167,10 @@ const createRspackConfig = ({
           );
         },
       }),
-      bundle.emptyPackages({ isLandingPageBuild }).length
-        ? new rspack.NormalModuleReplacementPlugin(
-            new RegExp(bundle.emptyPackages({ isLandingPageBuild }).join("|")),
-            path.resolve(paths.root_dir, "src/util/empty.js")
-          )
-        : false,
+      new rspack.NormalModuleReplacementPlugin(
+        new RegExp(bundle.emptyPackages({ isHassioBuild }).join("|")),
+        path.resolve(paths.root_dir, "src/util/empty.js")
+      ),
       !isProdBuild && new LogStartCompilePlugin(),
       isProdBuild &&
         new StatsWriterPlugin({
@@ -200,7 +198,6 @@ 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,9 +206,7 @@ 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$": latestBuild
-          ? "lit/directives/keyed.js"
-          : path.resolve(__dirname, "../src/common/lit/keyed-es5.ts"),
+        "lit/directives/keyed$": "lit/directives/keyed.js",
         "lit/polyfill-support$": "lit/polyfill-support.js",
         "@lit-labs/virtualizer/layouts/grid":
           "@lit-labs/virtualizer/layouts/grid.js",
@@ -219,42 +214,6 @@ 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: {
@@ -298,6 +257,7 @@ const createRspackConfig = ({
       ),
     },
     experiments: {
+      layers: true,
       outputModule: true,
     },
   };
@@ -321,6 +281,21 @@ 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 }));
 
@@ -331,6 +306,7 @@ module.exports = {
   createAppConfig,
   createDemoConfig,
   createCastConfig,
+  createHassioConfig,
   createGalleryConfig,
   createRspackConfig,
   createLandingPageConfig,

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

@@ -16,9 +16,9 @@ import {
 } from "../../../../src/common/auth/token_storage";
 import { atLeastVersion } from "../../../../src/common/config/version";
 import { toggleAttribute } from "../../../../src/common/dom/toggle_attribute";
-import "../../../../src/components/ha-button";
 import "../../../../src/components/ha-icon";
 import "../../../../src/components/ha-list";
+import "../../../../src/components/ha-button";
 import "../../../../src/components/ha-list-item";
 import "../../../../src/components/ha-svg-icon";
 import {
@@ -28,6 +28,7 @@ import {
 import { isStrategyDashboard } from "../../../../src/data/lovelace/config/types";
 import type { LovelaceViewConfig } from "../../../../src/data/lovelace/config/view";
 import "../../../../src/layouts/hass-loading-screen";
+import { generateDefaultViewConfig } from "../../../../src/panels/lovelace/common/generate-lovelace-config";
 import "./hc-layout";
 
 @customElement("hc-cast")
@@ -95,9 +96,7 @@ class HcCast extends LitElement {
                 <ha-list @action=${this._handlePickView} activatable>
                   ${(
                     this.lovelaceViews ?? [
-                      {
-                        title: "Home",
-                      },
+                      generateDefaultViewConfig({}, {}, {}, {}, () => ""),
                     ]
                   ).map(
                     (view, idx) => html`
@@ -206,7 +205,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,19 +5,17 @@ const castContext = framework.CastReceiverContext.getInstance();
 const playerManager = castContext.getPlayerManager();
 
 playerManager.setMessageInterceptor(
-  "LOAD" as framework.messages.MessageType.LOAD,
+  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 = "LIVE" as framework.messages.StreamType.LIVE;
+      media.streamType = 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 =
-        "FMP4" as framework.messages.HlsVideoSegmentFormat.FMP4;
+        framework.messages.HlsVideoSegmentFormat.FMP4;
     }
     return loadRequestData;
   }

cast/src/receiver/entrypoint.ts

@@ -1,9 +1,10 @@
+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);
@@ -39,8 +40,7 @@ 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 =
-    "NONE" as framework.messages.StreamType.NONE;
+  loadRequestData.media.streamType = framework.messages.StreamType.NONE;
   const metadata = new framework.messages.GenericMediaMetadata();
   metadata.title = viewTitle;
   loadRequestData.media.metadata = metadata;
@@ -89,30 +89,31 @@ const showMediaPlayer = () => {
 const options = new framework.CastReceiverOptions();
 options.disableIdleTimeout = true;
 options.customNamespaces = {
-  // 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,
+  [CAST_NS]: framework.system.MessageType.JSON,
 };
 
-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();
+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);
   }
-  const msg = ev.data as HassMessage;
-  msg.senderId = ev.senderId;
-  lovelaceController.processIncomingMessage(msg);
-});
+);
 
 const playerManager = castContext.getPlayerManager();
 
 playerManager.setMessageInterceptor(
-  "LOAD" as framework.messages.MessageType.LOAD,
+  framework.messages.MessageType.LOAD,
   (loadRequestData) => {
     if (
       loadRequestData.media.contentId ===
@@ -126,26 +127,24 @@ playerManager.setMessageInterceptor(
     // Special handling if it came from Google Assistant
     if (media.entity) {
       media.contentId = media.entity;
-      media.streamType = "LIVE" as framework.messages.StreamType.LIVE;
+      media.streamType = framework.messages.StreamType.LIVE;
       media.contentType = "application/vnd.apple.mpegurl";
-      // type definition is wrong, should be "FMP4" instead of "fmp4"
-      // https://developers.google.com/cast/docs/reference/web_receiver/cast.framework.messages#.HlsVideoSegmentFormat
+      // @ts-ignore
       media.hlsVideoSegmentFormat =
-        "FMP4" as framework.messages.HlsVideoSegmentFormat.FMP4;
+        framework.messages.HlsVideoSegmentFormat.FMP4;
     }
     return loadRequestData;
   }
 );
 
 playerManager.addEventListener(
-  "MEDIA_STATUS" as framework.events.EventType.MEDIA_STATUS,
+  framework.events.EventType.MEDIA_STATUS,
   (event) => {
     if (
-      event.mediaStatus?.playerState ===
-        ("IDLE" as framework.messages.PlayerState.IDLE) &&
+      event.mediaStatus?.playerState === framework.messages.PlayerState.IDLE &&
       event.mediaStatus?.idleReason &&
       event.mediaStatus?.idleReason !==
-        ("INTERRUPTED" as framework.messages.IdleReason.INTERRUPTED)
+        framework.messages.IdleReason.INTERRUPTED
     ) {
       // media finished or stopped, return to default Lovelace
       showLovelaceController();

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

@@ -305,8 +305,9 @@ 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!
@@ -346,8 +347,9 @@ 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

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

demo/src/stubs/area_registry.ts

@@ -1,4 +1,4 @@
-import type { AreaRegistryEntry } from "../../../src/data/area/area_registry";
+import type { AreaRegistryEntry } from "../../../src/data/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/device_registry";
+import type { DeviceRegistryEntry } from "../../../src/data/device_registry";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 export const mockDeviceRegistry = (

demo/src/stubs/energy.ts

@@ -44,24 +44,18 @@ 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",
@@ -69,46 +63,25 @@ 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,38 +154,6 @@ 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",
@@ -203,15 +171,6 @@ 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",
@@ -266,58 +225,4 @@ 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/entity_registry";
+import type { EntityRegistryEntry } from "../../../src/data/entity_registry";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 export const mockEntityRegistry = (

demo/src/stubs/label_registry.ts

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

demo/src/stubs/recorder.ts

@@ -17,15 +17,17 @@ 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 = delta;
+    const mean = lastVal + delta;
     statistics.push({
       start: currentDate.getTime(),
       end: currentDate.getTime(),
@@ -36,6 +38,7 @@ const generateMeanStatistics = (
       state: mean,
       sum: null,
     });
+    lastVal = mean;
     currentDate =
       period === "day"
         ? addDays(currentDate, 1)
@@ -333,6 +336,7 @@ export const mockRecorder = (mockHass: MockHomeAssistant) => {
                   start,
                   end,
                   period,
+                  state,
                   state * (state > 80 ? 0.05 : 0.1)
                 );
         }

eslint.config.mjs

@@ -43,6 +43,7 @@ export default tseslint.config(
         __BUILD__: false,
         __VERSION__: false,
         __STATIC_PATH__: false,
+        __SUPERVISOR__: false,
       },
 
       parser: tseslint.parser,
@@ -186,11 +187,5 @@ 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/describe-trigger.ts

@@ -3,7 +3,7 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-yaml-editor";
-import type { LegacyTrigger } from "../../../../src/data/automation";
+import type { Trigger } from "../../../../src/data/automation";
 import { describeTrigger } from "../../../../src/data/automation_i18n";
 import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
@@ -66,7 +66,7 @@ const triggers = [
   },
 ];
 
-const initialTrigger: LegacyTrigger = {
+const initialTrigger: Trigger = {
   trigger: "state",
   entity_id: "light.kitchen",
 };

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

@@ -18,6 +18,7 @@ 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";
@@ -37,6 +38,11 @@ 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

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

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

@@ -1,732 +0,0 @@
-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-dialogs.markdown

@@ -5,14 +5,14 @@ subtitle: Dialogs provide important prompts in a user flow.
 
 # Material Design 3
 
-Our dialogs are based on the latest version of Material Design. Please note that we have made some well-considered adjustments to these guidelines. Specs and guidelines can be found on its [website](https://m3.material.io/components/dialogs/overview).
+Our dialogs are based on the latest version of Material Design. Please note that we have made some well-considered adjustments to these guideliness. Specs and guidelines can be found on its [website](https://m3.material.io/components/dialogs/overview).
 
 # Guidelines
 
 ## Design
 
-- Dialogs have a max width of 560px. Alert and confirmation dialogs have a fixed width of 320px. If you need more width, consider a dedicated page instead.
-- The close X-icon is on the top left, on all screen sizes. Except for alert and confirmation dialogs, they only have buttons and no X-icon. This is different compared to the Material guidelines.
+- Dialogs have a max width of 560px. Alert and confirmation dialogs got a fixed width of 320px. If you need more width, consider a dedicated page instead.
+- The close X-icon is on the top left, on all screen sizes. Except for alert and confirmation dialogs, they only have buttons and no X-icon. This is different compared to the Material guideliness.
 - Dialogs can't be closed with ESC or clicked outside of the dialog when there is a form that the user needs to fill out. Instead it will animate "no" by a little shake.
 - Extra icon buttons are on the top right, for example help, settings and expand dialog. More than 2 icon buttons, they will be in an overflow menu.
 - The submit button is grouped with a cancel button at the bottom right, on all screen sizes. Fullscreen mobile dialogs have them sticky at the bottom.
@@ -26,7 +26,7 @@ Our dialogs are based on the latest version of Material Design. Please note that
 
 - A best practice is to always use a title, even if it is optional by Material guidelines.
 - People mainly read the title and a button. Put the most important information in those two.
-- Try to avoid user generated content in the title, this could make the title unreadably long.
+- Try to avoid user generated content in the title, this could make the title unreadable long.
 - If users become unsure, they read the description. Make sure this explains what will happen.
 - Strive for minimalism.
 

gallery/src/pages/components/ha-dropdown.markdown

@@ -1,55 +0,0 @@
----
-title: Dropdown
----
-
-# Dropdown `<ha-dropdown>`
-
-## Implementation
-
-A compact, accessible dropdown menu for choosing actions or settings. `ha-dropdown` supports composed menu items (`<ha-dropdown-item>`) for icons, submenus, checkboxes, disabled entries, and destructive variants. Use composition with `slot="trigger"` to control the trigger button and use `<ha-dropdown-item>` for rich item content.
-
-### Example usage (composition)
-
-```html
-<ha-dropdown>
-  <ha-button slot="trigger" with-caret>Dropdown</ha-button>
-
-  <ha-dropdown-item>
-    <ha-svg-icon .path="mdiContentCut" slot="icon"></ha-svg-icon>
-    Cut
-  </ha-dropdown-item>
-
-  <ha-dropdown-item>
-    <ha-svg-icon .path="mdiContentCopy" slot="icon"></ha-svg-icon>
-    Copy
-  </ha-dropdown-item>
-
-  <ha-dropdown-item disabled>
-    <ha-svg-icon .path="mdiContentPaste" slot="icon"></ha-svg-icon>
-    Paste
-  </ha-dropdown-item>
-
-  <ha-dropdown-item>
-    Show images
-    <ha-dropdown-item slot="submenu" value="show-all-images"
-      >Show all images</ha-dropdown-item
-    >
-    <ha-dropdown-item slot="submenu" value="show-thumbnails"
-      >Show thumbnails</ha-dropdown-item
-    >
-  </ha-dropdown-item>
-
-  <ha-dropdown-item type="checkbox" checked>Emoji shortcuts</ha-dropdown-item>
-  <ha-dropdown-item type="checkbox" checked>Word wrap</ha-dropdown-item>
-
-  <ha-dropdown-item variant="danger">
-    <ha-svg-icon .path="mdiDelete" slot="icon"></ha-svg-icon>
-    Delete
-  </ha-dropdown-item>
-</ha-dropdown>
-```
-
-### API
-
-This component is based on the webawesome dropdown component.
-Check the [webawesome documentation](https://webawesome.com/docs/components/dropdown/) for more details.

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

@@ -1,133 +0,0 @@
-import "@home-assistant/webawesome/dist/components/button/button";
-import "@home-assistant/webawesome/dist/components/dropdown/dropdown";
-import "@home-assistant/webawesome/dist/components/icon/icon";
-import "@home-assistant/webawesome/dist/components/popup/popup";
-import {
-  mdiContentCopy,
-  mdiContentCut,
-  mdiContentPaste,
-  mdiDelete,
-} from "@mdi/js";
-import type { TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
-import { customElement } from "lit/decorators";
-import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
-import "../../../../src/components/ha-button";
-import "../../../../src/components/ha-card";
-import "../../../../src/components/ha-dropdown";
-import "../../../../src/components/ha-dropdown-item";
-import "../../../../src/components/ha-icon-button";
-import "../../../../src/components/ha-svg-icon";
-
-@customElement("demo-components-ha-dropdown")
-export class DemoHaDropdown extends LitElement {
-  protected render(): TemplateResult {
-    return html`
-      ${["light", "dark"].map(
-        (mode) => html`
-          <div class=${mode}>
-            <ha-card header="ha-button in ${mode}">
-              <div class="card-content">
-                <ha-dropdown>
-                  <ha-button slot="trigger" with-caret>Dropdown</ha-button>
-
-                  <ha-dropdown-item>
-                    <ha-svg-icon
-                      .path=${mdiContentCut}
-                      slot="icon"
-                    ></ha-svg-icon>
-                    Cut
-                  </ha-dropdown-item>
-                  <ha-dropdown-item>
-                    <ha-svg-icon
-                      .path=${mdiContentCopy}
-                      slot="icon"
-                    ></ha-svg-icon>
-                    Copy
-                  </ha-dropdown-item>
-                  <ha-dropdown-item disabled>
-                    <ha-svg-icon
-                      .path=${mdiContentPaste}
-                      slot="icon"
-                    ></ha-svg-icon>
-                    Paste
-                  </ha-dropdown-item>
-                  <ha-dropdown-item>
-                    Show images
-                    <ha-dropdown-item slot="submenu" value="show-all-images"
-                      >Show All Images</ha-dropdown-item
-                    >
-                    <ha-dropdown-item slot="submenu" value="show-thumbnails"
-                      >Show Thumbnails</ha-dropdown-item
-                    >
-                  </ha-dropdown-item>
-                  <ha-dropdown-item type="checkbox" checked
-                    >Emoji Shortcuts</ha-dropdown-item
-                  >
-                  <ha-dropdown-item type="checkbox" checked
-                    >Word Wrap</ha-dropdown-item
-                  >
-                  <ha-dropdown-item variant="danger">
-                    <ha-svg-icon .path=${mdiDelete} slot="icon"></ha-svg-icon>
-                    Delete
-                  </ha-dropdown-item>
-                </ha-dropdown>
-              </div>
-            </ha-card>
-          </div>
-        `
-      )}
-    `;
-  }
-
-  firstUpdated(changedProps) {
-    super.firstUpdated(changedProps);
-    applyThemesOnElement(
-      this.shadowRoot!.querySelector(".dark"),
-      {
-        default_theme: "default",
-        default_dark_theme: "default",
-        themes: {},
-        darkMode: true,
-        theme: "default",
-      },
-      undefined,
-      undefined,
-      true
-    );
-  }
-
-  static styles = css`
-    :host {
-      display: flex;
-      justify-content: center;
-    }
-    .dark,
-    .light {
-      display: block;
-      background-color: var(--primary-background-color);
-      padding: 0 50px;
-    }
-    .button {
-      padding: unset;
-    }
-    ha-card {
-      margin: 24px auto;
-    }
-    .card-content {
-      display: flex;
-      flex-direction: column;
-      gap: 24px;
-    }
-    .card-content div {
-      display: flex;
-      gap: 8px;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-components-ha-dropdown": DemoHaDropdown;
-  }
-}

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/area_registry";
-import type { DeviceRegistryEntry } from "../../../../src/data/device/device_registry";
+import type { AreaRegistryEntry } from "../../../../src/data/area_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: {
-      app: "App",
+      addon: "Addon",
       entity: "Entity",
       device: "Device",
       area: "Area",
@@ -188,7 +188,7 @@ const SCHEMAS: {
       entities: "Entities",
     },
     schema: [
-      { name: "app", selector: { app: {} } },
+      { name: "addon", selector: { addon: {} } },
       { 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/area_registry";
+import type { AreaRegistryEntry } from "../../../../src/data/area_registry";
 import type { BlueprintInput } from "../../../../src/data/blueprint";
-import type { DeviceRegistryEntry } from "../../../../src/data/device/device_registry";
+import type { DeviceRegistryEntry } from "../../../../src/data/device_registry";
 import type { FloorRegistryEntry } from "../../../../src/data/floor_registry";
-import type { LabelRegistryEntry } from "../../../../src/data/label/label_registry";
+import type { LabelRegistryEntry } from "../../../../src/data/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,9 +40,6 @@ const ENTITIES = [
   getEntity("switch", "coffee", "off", {
     friendly_name: "Coffee",
   }),
-  getEntity("number", "number", 5, {
-    friendly_name: "Number",
-  }),
 ];
 
 const DEVICES: DeviceRegistryEntry[] = [
@@ -239,7 +236,7 @@ const SCHEMAS: {
         selector: { config_entry: {} },
       },
       duration: { name: "Duration", selector: { duration: {} } },
-      app: { name: "App", selector: { app: {} } },
+      addon: { name: "Addon", selector: { addon: {} } },
       number_box: {
         name: "Number Box",
         selector: {
@@ -380,33 +377,6 @@ 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(1024px, var(--full-width))</code></td>
+              <td><code>min(720px, var(--full-width))</code></td>
             </tr>
             <tr>
               <td><code>full</code></td>
@@ -381,6 +381,10 @@ 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/entity-state.ts

@@ -39,7 +39,6 @@ const SENSOR_DEVICE_CLASSES = [
   "pm1",
   "pm10",
   "pm25",
-  "pm4",
   "power_factor",
   "power",
   "precipitation",

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/device_registry";
-import type { EntityRegistryEntry } from "../../../../src/data/entity/entity_registry";
+import type { DeviceRegistryEntry } from "../../../../src/data/device_registry";
+import type { EntityRegistryEntry } from "../../../../src/data/entity_registry";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../../../src/panels/config/integrations/ha-config-flow-card";
 import type {

hassio/config.cjs

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,9 @@
+#!/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

@@ -0,0 +1,9 @@
+#!/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-repository.ts

@@ -3,20 +3,24 @@ import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
-import { navigate } from "../../../common/navigate";
-import { caseInsensitiveStringCompare } from "../../../common/string/compare";
-import "../../../components/ha-card";
-import type { HassioAddonRepository } from "../../../data/hassio/addon";
-import type { StoreAddon } from "../../../data/supervisor/store";
-import type { HomeAssistant } from "../../../types";
-import "./components/supervisor-apps-card-content";
-import { filterAndSort } from "./components/supervisor-apps-filter";
-import { supervisorAppsStyle } from "./resources/supervisor-apps-style";
+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 type { HassioAddonRepository } from "../../../src/data/hassio/addon";
+import type { StoreAddon } from "../../../src/data/supervisor/store";
+import type { Supervisor } from "../../../src/data/supervisor/supervisor";
+import type { HomeAssistant } from "../../../src/types";
+import "../components/hassio-card-content";
+import { filterAndSort } from "../components/hassio-filter-addons";
+import { hassioStyle } from "../resources/hassio-style";
 
-@customElement("supervisor-apps-repository")
-export class SupervisorAppsRepositoryEl extends LitElement {
+@customElement("hassio-addon-repository")
+export class HassioAddonRepositoryEl extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property({ attribute: false }) public supervisor!: Supervisor;
+
   @property({ attribute: false }) public repo!: HassioAddonRepository;
 
   @property({ attribute: false }) public addons!: StoreAddon[];
@@ -46,12 +50,9 @@ export class SupervisorAppsRepositoryEl extends LitElement {
       return html`
         <div class="content">
           <p class="description">
-            ${this.hass.localize(
-              "ui.panel.config.apps.store.no_results_found",
-              {
-                repository: repo.name,
-              }
-            )}
+            ${this.supervisor.localize("store.no_results_found", {
+              repository: repo.name,
+            })}
           </p>
         </div>
       `;
@@ -69,7 +70,7 @@ export class SupervisorAppsRepositoryEl extends LitElement {
                 @click=${this._addonTapped}
               >
                 <div class="card-content">
-                  <supervisor-apps-card-content
+                  <hassio-card-content
                     .hass=${this.hass}
                     .title=${addon.name}
                     .description=${addon.description}
@@ -79,19 +80,13 @@ export class SupervisorAppsRepositoryEl extends LitElement {
                       : mdiPuzzle}
                     .iconTitle=${addon.installed
                       ? addon.update_available
-                        ? this.hass.localize(
-                            "ui.panel.config.apps.state.update_available"
-                          )
-                        : this.hass.localize(
-                            "ui.panel.config.apps.state.installed"
+                        ? this.supervisor.localize(
+                            "common.new_version_available"
                           )
+                        : this.supervisor.localize("addon.state.installed")
                       : addon.available
-                        ? this.hass.localize(
-                            "ui.panel.config.apps.state.not_installed"
-                          )
-                        : this.hass.localize(
-                            "ui.panel.config.apps.state.not_available"
-                          )}
+                        ? this.supervisor.localize("addon.state.not_installed")
+                        : this.supervisor.localize("addon.state.not_available")}
                     .iconClass=${addon.installed
                       ? addon.update_available
                         ? "update"
@@ -99,7 +94,11 @@ export class SupervisorAppsRepositoryEl extends LitElement {
                       : !addon.available
                         ? "not_available"
                         : ""}
-                    .iconImage=${addon.icon
+                    .iconImage=${atLeastVersion(
+                      this.hass.config.version,
+                      0,
+                      105
+                    ) && addon.icon
                       ? `/api/hassio/addons/${addon.slug}/icon`
                       : undefined}
                     .showTopbar=${addon.installed || !addon.available}
@@ -110,7 +109,7 @@ export class SupervisorAppsRepositoryEl extends LitElement {
                       : !addon.available
                         ? "unavailable"
                         : ""}
-                  ></supervisor-apps-card-content>
+                  ></hassio-card-content>
                 </div>
               </ha-card>
             `
@@ -121,12 +120,12 @@ export class SupervisorAppsRepositoryEl extends LitElement {
   }
 
   private _addonTapped(ev) {
-    navigate(`/config/app/${ev.currentTarget.addon.slug}/info?store=true`);
+    navigate(`/hassio/addon/${ev.currentTarget.addon.slug}?store=true`);
   }
 
   static get styles(): CSSResultGroup {
     return [
-      supervisorAppsStyle,
+      hassioStyle,
       css`
         ha-card {
           cursor: pointer;
@@ -145,6 +144,6 @@ export class SupervisorAppsRepositoryEl extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "supervisor-apps-repository": SupervisorAppsRepositoryEl;
+    "hassio-addon-repository": HassioAddonRepositoryEl;
   }
 }

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

@@ -0,0 +1,248 @@
+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/config/hassio-addon-audio.ts

@@ -1,28 +1,31 @@
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { stopPropagation } from "../../../../../common/dom/stop_propagation";
-import "../../../../../components/buttons/ha-progress-button";
-import "../../../../../components/ha-alert";
-import "../../../../../components/ha-card";
-import "../../../../../components/ha-list-item";
-import "../../../../../components/ha-select";
+import { stopPropagation } from "../../../../src/common/dom/stop_propagation";
+import "../../../../src/components/buttons/ha-progress-button";
+import "../../../../src/components/ha-alert";
+import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-list-item";
+import "../../../../src/components/ha-select";
 import type {
   HassioAddonDetails,
   HassioAddonSetOptionParams,
-} from "../../../../../data/hassio/addon";
-import { setHassioAddonOption } from "../../../../../data/hassio/addon";
-import type { HassioHardwareAudioDevice } from "../../../../../data/hassio/hardware";
-import { fetchHassioHardwareAudio } from "../../../../../data/hassio/hardware";
-import { haStyle } from "../../../../../resources/styles";
-import type { HomeAssistant } from "../../../../../types";
-import { suggestSupervisorAppRestart } from "../dialogs/suggestSupervisorAppRestart";
-import { supervisorAppsStyle } from "../../resources/supervisor-apps-style";
+} from "../../../../src/data/hassio/addon";
+import { setHassioAddonOption } from "../../../../src/data/hassio/addon";
+import type { HassioHardwareAudioDevice } from "../../../../src/data/hassio/hardware";
+import { fetchHassioHardwareAudio } from "../../../../src/data/hassio/hardware";
+import type { Supervisor } from "../../../../src/data/supervisor/supervisor";
+import { haStyle } from "../../../../src/resources/styles";
+import type { HomeAssistant } from "../../../../src/types";
+import { suggestAddonRestart } from "../../dialogs/suggestAddonRestart";
+import { hassioStyle } from "../../resources/hassio-style";
 
-@customElement("supervisor-app-audio")
-class SupervisorAppAudio extends LitElement {
+@customElement("hassio-addon-audio")
+class HassioAddonAudio extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property({ attribute: false }) public supervisor!: Supervisor;
+
   @property({ attribute: false }) public addon!: HassioAddonDetails;
 
   @property({ type: Boolean }) public disabled = false;
@@ -41,9 +44,7 @@ class SupervisorAppAudio extends LitElement {
     return html`
       <ha-card
         outlined
-        .header=${this.hass.localize(
-          "ui.panel.config.apps.configuration.audio.header"
-        )}
+        .header=${this.supervisor.localize("addon.configuration.audio.header")}
       >
         <div class="card-content">
           ${this._error
@@ -51,8 +52,8 @@ class SupervisorAppAudio extends LitElement {
             : nothing}
           ${this._inputDevices &&
           html`<ha-select
-            .label=${this.hass.localize(
-              "ui.panel.config.apps.configuration.audio.input"
+            .label=${this.supervisor.localize(
+              "addon.configuration.audio.input"
             )}
             @selected=${this._setInputDevice}
             @closed=${stopPropagation}
@@ -71,8 +72,8 @@ class SupervisorAppAudio extends LitElement {
           </ha-select>`}
           ${this._outputDevices &&
           html`<ha-select
-            .label=${this.hass.localize(
-              "ui.panel.config.apps.configuration.audio.output"
+            .label=${this.supervisor.localize(
+              "addon.configuration.audio.output"
             )}
             @selected=${this._setOutputDevice}
             @closed=${stopPropagation}
@@ -95,7 +96,7 @@ class SupervisorAppAudio extends LitElement {
             .disabled=${this.disabled}
             @click=${this._saveSettings}
           >
-            ${this.hass.localize("ui.common.save")}
+            ${this.supervisor.localize("common.save")}
           </ha-progress-button>
         </div>
       </ha-card>
@@ -105,7 +106,7 @@ class SupervisorAppAudio extends LitElement {
   static get styles(): CSSResultGroup {
     return [
       haStyle,
-      supervisorAppsStyle,
+      hassioStyle,
       css`
         :host,
         ha-card {
@@ -118,7 +119,7 @@ class SupervisorAppAudio extends LitElement {
           width: 100%;
         }
         ha-select:last-child {
-          margin-top: var(--ha-space-2);
+          margin-top: 8px;
         }
       `,
     ];
@@ -152,9 +153,7 @@ class SupervisorAppAudio extends LitElement {
 
     const noDevice: HassioHardwareAudioDevice = {
       device: "default",
-      name: this.hass.localize(
-        "ui.panel.config.apps.configuration.audio.default"
-      ),
+      name: this.supervisor.localize("addon.configuration.audio.default"),
     };
 
     try {
@@ -171,9 +170,7 @@ class SupervisorAppAudio extends LitElement {
       this._inputDevices = [noDevice, ...input];
       this._outputDevices = [noDevice, ...output];
     } catch {
-      this._error = this.hass.localize(
-        "ui.panel.config.apps.configuration.audio.failed_to_load_hardware"
-      );
+      this._error = "Failed to fetch audio hardware";
       this._inputDevices = [noDevice];
       this._outputDevices = [noDevice];
     }
@@ -197,12 +194,10 @@ class SupervisorAppAudio extends LitElement {
     try {
       await setHassioAddonOption(this.hass, this.addon.slug, data);
       if (this.addon?.state === "started") {
-        await suggestSupervisorAppRestart(this, this.hass, this.addon);
+        await suggestAddonRestart(this, this.hass, this.supervisor, this.addon);
       }
     } catch {
-      this._error = this.hass.localize(
-        "ui.panel.config.apps.configuration.audio.failed_to_save"
-      );
+      this._error = "Failed to set addon audio device";
     }
 
     button.progress = false;
@@ -211,6 +206,6 @@ class SupervisorAppAudio extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "supervisor-app-audio": SupervisorAppAudio;
+    "hassio-addon-audio": HassioAddonAudio;
   }
 }

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

@@ -1,20 +1,23 @@
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
-import "../../../../../components/ha-spinner";
-import type { HassioAddonDetails } from "../../../../../data/hassio/addon";
-import { haStyle } from "../../../../../resources/styles";
-import type { HomeAssistant } from "../../../../../types";
-import { supervisorAppsStyle } from "../../resources/supervisor-apps-style";
-import "../info/supervisor-app-system-managed";
-import "./supervisor-app-audio";
-import "./supervisor-app-config";
-import "./supervisor-app-network";
+import "../../../../src/components/ha-spinner";
+import type { HassioAddonDetails } 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 { hassioStyle } from "../../resources/hassio-style";
+import "../info/hassio-addon-system-managed";
+import "./hassio-addon-audio";
+import "./hassio-addon-config";
+import "./hassio-addon-network";
 
-@customElement("supervisor-app-config-tab")
-class SupervisorAppConfigDashboard extends LitElement {
+@customElement("hassio-addon-config-tab")
+class HassioAddonConfigDashboard extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property({ attribute: false }) public supervisor!: Supervisor;
+
   @property({ attribute: false }) public addon?: HassioAddonDetails;
 
   @property({ type: Boolean }) public narrow = false;
@@ -35,49 +38,50 @@ class SupervisorAppConfigDashboard extends LitElement {
         ${this.addon.system_managed &&
         (hasConfiguration || this.addon.network || this.addon.audio)
           ? html`
-              <supervisor-app-system-managed
-                .hass=${this.hass}
+              <hassio-addon-system-managed
+                .supervisor=${this.supervisor}
                 .narrow=${this.narrow}
                 .hideButton=${this.controlEnabled}
-              ></supervisor-app-system-managed>
+              ></hassio-addon-system-managed>
             `
           : nothing}
         ${hasConfiguration || this.addon.network || this.addon.audio
           ? html`
               ${hasConfiguration
                 ? html`
-                    <supervisor-app-config
+                    <hassio-addon-config
                       .hass=${this.hass}
                       .addon=${this.addon}
+                      .supervisor=${this.supervisor}
                       .disabled=${this.addon.system_managed &&
                       !this.controlEnabled}
-                    ></supervisor-app-config>
+                    ></hassio-addon-config>
                   `
                 : nothing}
               ${this.addon.network
                 ? html`
-                    <supervisor-app-network
+                    <hassio-addon-network
                       .hass=${this.hass}
                       .addon=${this.addon}
+                      .supervisor=${this.supervisor}
                       .disabled=${this.addon.system_managed &&
                       !this.controlEnabled}
-                    ></supervisor-app-network>
+                    ></hassio-addon-network>
                   `
                 : nothing}
               ${this.addon.audio
                 ? html`
-                    <supervisor-app-audio
+                    <hassio-addon-audio
                       .hass=${this.hass}
                       .addon=${this.addon}
+                      .supervisor=${this.supervisor}
                       .disabled=${this.addon.system_managed &&
                       !this.controlEnabled}
-                    ></supervisor-app-audio>
+                    ></hassio-addon-audio>
                   `
                 : nothing}
             `
-          : this.hass.localize(
-              "ui.panel.config.apps.configuration.no_configuration"
-            )}
+          : this.supervisor.localize("addon.configuration.no_configuration")}
       </div>
     `;
   }
@@ -85,17 +89,17 @@ class SupervisorAppConfigDashboard extends LitElement {
   static get styles(): CSSResultGroup {
     return [
       haStyle,
-      supervisorAppsStyle,
+      hassioStyle,
       css`
         .content {
           margin: auto;
-          padding: var(--ha-space-2);
+          padding: 8px;
           max-width: 1024px;
         }
-        supervisor-app-network,
-        supervisor-app-audio,
-        supervisor-app-config {
-          margin-bottom: var(--ha-space-6);
+        hassio-addon-network,
+        hassio-addon-audio,
+        hassio-addon-config {
+          margin-bottom: 24px;
         }
       `,
     ];
@@ -104,6 +108,6 @@ class SupervisorAppConfigDashboard extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "supervisor-app-config-tab": SupervisorAppConfigDashboard;
+    "hassio-addon-config-tab": HassioAddonConfigDashboard;
   }
 }

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

@@ -1,41 +1,42 @@
+import type { ActionDetail } from "@material/mwc-list";
 import { mdiDotsVertical } from "@mdi/js";
 import { DEFAULT_SCHEMA, Type } from "js-yaml";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
-import { fireEvent } from "../../../../../common/dom/fire_event";
-import "../../../../../components/buttons/ha-progress-button";
-import "../../../../../components/ha-alert";
-import "../../../../../components/ha-card";
-import "../../../../../components/ha-dropdown";
-import "../../../../../components/ha-dropdown-item";
-import type { HaDropdownItem } from "../../../../../components/ha-dropdown-item";
-import "../../../../../components/ha-form/ha-form";
+import { fireEvent } from "../../../../src/common/dom/fire_event";
+import "../../../../src/components/buttons/ha-progress-button";
+import "../../../../src/components/ha-alert";
+import "../../../../src/components/ha-button-menu";
+import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-form/ha-form";
 import type {
-  HaFormDataContainer,
   HaFormSchema,
-} from "../../../../../components/ha-form/types";
-import "../../../../../components/ha-formfield";
-import "../../../../../components/ha-icon-button";
-import "../../../../../components/ha-switch";
-import "../../../../../components/ha-yaml-editor";
-import type { HaYamlEditor } from "../../../../../components/ha-yaml-editor";
+  HaFormDataContainer,
+} from "../../../../src/components/ha-form/types";
+import "../../../../src/components/ha-formfield";
+import "../../../../src/components/ha-icon-button";
+import "../../../../src/components/ha-list-item";
+import "../../../../src/components/ha-switch";
+import "../../../../src/components/ha-yaml-editor";
+import type { HaYamlEditor } from "../../../../src/components/ha-yaml-editor";
 import type {
   HassioAddonDetails,
   HassioAddonSetOptionParams,
-} from "../../../../../data/hassio/addon";
+} from "../../../../src/data/hassio/addon";
 import {
   setHassioAddonOption,
   validateHassioAddonOption,
-} from "../../../../../data/hassio/addon";
-import { extractApiErrorMessage } from "../../../../../data/hassio/common";
-import type { ObjectSelector, Selector } from "../../../../../data/selector";
-import { showConfirmationDialog } from "../../../../../dialogs/generic/show-dialog-box";
-import { haStyle } from "../../../../../resources/styles";
-import type { HomeAssistant } from "../../../../../types";
-import { supervisorAppsStyle } from "../../resources/supervisor-apps-style";
-import { suggestSupervisorAppRestart } from "../dialogs/suggestSupervisorAppRestart";
+} from "../../../../src/data/hassio/addon";
+import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
+import type { Supervisor } from "../../../../src/data/supervisor/supervisor";
+import { showConfirmationDialog } from "../../../../src/dialogs/generic/show-dialog-box";
+import { haStyle } from "../../../../src/resources/styles";
+import type { HomeAssistant } from "../../../../src/types";
+import { suggestAddonRestart } from "../../dialogs/suggestAddonRestart";
+import { hassioStyle } from "../../resources/hassio-style";
+import type { ObjectSelector, Selector } from "../../../../src/data/selector";
 
 const SUPPORTED_UI_TYPES = [
   "string",
@@ -55,12 +56,14 @@ const ADDON_YAML_SCHEMA = DEFAULT_SCHEMA.extend([
 
 const MASKED_FIELDS = ["password", "secret", "token"];
 
-@customElement("supervisor-app-config")
-class SupervisorAppConfig extends LitElement {
+@customElement("hassio-addon-config")
+class HassioAddonConfig extends LitElement {
   @property({ attribute: false }) public addon!: HassioAddonDetails;
 
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property({ attribute: false }) public supervisor!: Supervisor;
+
   @property({ type: Boolean }) public disabled = false;
 
   @state() private _configHasChanged = false;
@@ -216,39 +219,31 @@ class SupervisorAppConfig extends LitElement {
       <ha-card outlined>
         <div class="header">
           <h2>
-            ${this.hass.localize(
-              "ui.panel.config.apps.configuration.options.header"
-            )}
+            ${this.supervisor.localize("addon.configuration.options.header")}
           </h2>
           <div class="card-menu">
-            <ha-dropdown @wa-select=${this._handleAction}>
+            <ha-button-menu @action=${this._handleAction}>
               <ha-icon-button
-                .label=${this.hass.localize("ui.common.menu")}
+                .label=${this.supervisor.localize("common.menu")}
                 .path=${mdiDotsVertical}
                 slot="trigger"
               ></ha-icon-button>
-              <ha-dropdown-item
-                value="toggle_yaml"
-                .disabled=${!this._canShowSchema || this.disabled}
-              >
+              <ha-list-item .disabled=${!this._canShowSchema || this.disabled}>
                 ${this._yamlMode
-                  ? this.hass.localize(
-                      "ui.panel.config.apps.configuration.options.edit_in_ui"
+                  ? this.supervisor.localize(
+                      "addon.configuration.options.edit_in_ui"
                     )
-                  : this.hass.localize(
-                      "ui.panel.config.apps.configuration.options.edit_in_yaml"
+                  : this.supervisor.localize(
+                      "addon.configuration.options.edit_in_yaml"
                     )}
-              </ha-dropdown-item>
-              <ha-dropdown-item
-                value="reset"
-                .variant=${!this.disabled ? "danger" : "default"}
+              </ha-list-item>
+              <ha-list-item
+                class=${!this.disabled ? "warning" : ""}
                 .disabled=${this.disabled}
               >
-                ${this.hass.localize(
-                  "ui.panel.config.apps.configuration.reset_defaults"
-                )}
-              </ha-dropdown-item>
-            </ha-dropdown>
+                ${this.supervisor.localize("common.reset_defaults")}
+              </ha-list-item>
+            </ha-button-menu>
           </div>
         </div>
 
@@ -283,8 +278,8 @@ class SupervisorAppConfig extends LitElement {
             ? ""
             : html`
                 <ha-alert alert-type="error">
-                  ${this.hass.localize(
-                    "ui.panel.config.apps.configuration.options.invalid_yaml"
+                  ${this.supervisor.localize(
+                    "addon.configuration.options.invalid_yaml"
                   )}
                 </ha-alert>
               `}
@@ -292,8 +287,8 @@ class SupervisorAppConfig extends LitElement {
         ${hasHiddenOptions
           ? html`<ha-formfield
               class="show-additional"
-              .label=${this.hass.localize(
-                "ui.panel.config.apps.configuration.options.show_unused_optional"
+              .label=${this.supervisor.localize(
+                "addon.configuration.options.show_unused_optional"
               )}
             >
               <ha-switch
@@ -310,7 +305,7 @@ class SupervisorAppConfig extends LitElement {
             !this._configHasChanged ||
             !this._valid}
           >
-            ${this.hass.localize("ui.common.save")}
+            ${this.supervisor.localize("common.save")}
           </ha-progress-button>
         </div>
       </ha-card>
@@ -319,13 +314,11 @@ class SupervisorAppConfig extends LitElement {
 
   protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
-    this._canShowSchema =
-      this.addon.schema !== null &&
-      !this.addon.schema!.find(
-        (entry) =>
-          // @ts-ignore
-          !SUPPORTED_UI_TYPES.includes(entry.type)
-      );
+    this._canShowSchema = !this.addon.schema!.find(
+      (entry) =>
+        // @ts-ignore
+        !SUPPORTED_UI_TYPES.includes(entry.type)
+    );
     this._yamlMode = !this._canShowSchema;
   }
 
@@ -347,19 +340,14 @@ class SupervisorAppConfig extends LitElement {
     }
   }
 
-  private _handleAction(ev: CustomEvent<{ item: HaDropdownItem }>) {
-    const action = ev.detail.item.value;
-
-    if (!action) {
-      return;
-    }
-
-    switch (action) {
-      case "toggle_yaml":
+  private _handleAction(ev: CustomEvent<ActionDetail>) {
+    switch (ev.detail.index) {
+      case 0:
         this._yamlMode = !this._yamlMode;
-        return;
-      case "reset":
+        break;
+      case 1:
         this._resetTapped(ev);
+        break;
     }
   }
 
@@ -383,14 +371,10 @@ class SupervisorAppConfig extends LitElement {
     button.progress = true;
 
     const confirmed = await showConfirmationDialog(this, {
-      title: this.hass.localize(
-        "ui.panel.config.apps.configuration.confirm.reset_options.title"
-      ),
-      text: this.hass.localize(
-        "ui.panel.config.apps.configuration.confirm.reset_options.text"
-      ),
-      confirmText: this.hass.localize("ui.common.reset_options"),
-      dismissText: this.hass.localize("ui.common.cancel"),
+      title: this.supervisor.localize("confirm.reset_options.title"),
+      text: this.supervisor.localize("confirm.reset_options.text"),
+      confirmText: this.supervisor.localize("common.reset_options"),
+      dismissText: this.supervisor.localize("common.cancel"),
       destructive: true,
     });
 
@@ -413,12 +397,9 @@ class SupervisorAppConfig extends LitElement {
       };
       fireEvent(this, "hass-api-called", eventdata);
     } catch (err: any) {
-      this._error = this.hass.localize(
-        "ui.panel.config.apps.dashboard.failed_to_reset",
-        {
-          error: extractApiErrorMessage(err),
-        }
-      );
+      this._error = this.supervisor.localize("addon.failed_to_reset", {
+        error: extractApiErrorMessage(err),
+      });
     }
     button.progress = false;
   }
@@ -456,15 +437,12 @@ class SupervisorAppConfig extends LitElement {
 
       this._configHasChanged = false;
       if (this.addon?.state === "started") {
-        await suggestSupervisorAppRestart(this, this.hass, this.addon);
+        await suggestAddonRestart(this, this.hass, this.supervisor, this.addon);
       }
     } catch (err: any) {
-      this._error = this.hass.localize(
-        "ui.panel.config.apps.dashboard.failed_to_save",
-        {
-          error: extractApiErrorMessage(err),
-        }
-      );
+      this._error = this.supervisor.localize("addon.failed_to_save", {
+        error: extractApiErrorMessage(err),
+      });
       eventdata.success = false;
     }
     button.progress = false;
@@ -474,7 +452,7 @@ class SupervisorAppConfig extends LitElement {
   static get styles(): CSSResultGroup {
     return [
       haStyle,
-      supervisorAppsStyle,
+      hassioStyle,
       css`
         :host {
           display: block;
@@ -492,7 +470,7 @@ class SupervisorAppConfig extends LitElement {
           z-index: 3;
           --mdc-theme-text-primary-on-background: var(--primary-text-color);
         }
-        ha-dropdown-item[disabled] {
+        ha-list-item[disabled] {
           --mdc-theme-text-primary-on-background: var(--disabled-text-color);
         }
         .header {
@@ -524,6 +502,6 @@ class SupervisorAppConfig extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "supervisor-app-config": SupervisorAppConfig;
+    "hassio-addon-config": HassioAddonConfig;
   }
 }

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

@@ -2,28 +2,31 @@ import type { CSSResultGroup, PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
-import { fireEvent } from "../../../../../common/dom/fire_event";
-import "../../../../../components/buttons/ha-progress-button";
-import "../../../../../components/ha-alert";
-import "../../../../../components/ha-card";
-import "../../../../../components/ha-formfield";
-import "../../../../../components/ha-form/ha-form";
-import type { HaFormSchema } from "../../../../../components/ha-form/types";
+import { fireEvent } from "../../../../src/common/dom/fire_event";
+import "../../../../src/components/buttons/ha-progress-button";
+import "../../../../src/components/ha-alert";
+import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-formfield";
+import "../../../../src/components/ha-form/ha-form";
+import type { HaFormSchema } from "../../../../src/components/ha-form/types";
 import type {
   HassioAddonDetails,
   HassioAddonSetOptionParams,
-} from "../../../../../data/hassio/addon";
-import { setHassioAddonOption } from "../../../../../data/hassio/addon";
-import { extractApiErrorMessage } from "../../../../../data/hassio/common";
-import { haStyle } from "../../../../../resources/styles";
-import type { HomeAssistant } from "../../../../../types";
-import { suggestSupervisorAppRestart } from "../dialogs/suggestSupervisorAppRestart";
-import { supervisorAppsStyle } from "../../resources/supervisor-apps-style";
+} from "../../../../src/data/hassio/addon";
+import { setHassioAddonOption } from "../../../../src/data/hassio/addon";
+import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
+import type { Supervisor } from "../../../../src/data/supervisor/supervisor";
+import { haStyle } from "../../../../src/resources/styles";
+import type { HomeAssistant } from "../../../../src/types";
+import { suggestAddonRestart } from "../../dialogs/suggestAddonRestart";
+import { hassioStyle } from "../../resources/hassio-style";
 
-@customElement("supervisor-app-network")
-class SupervisorAppNetwork extends LitElement {
+@customElement("hassio-addon-network")
+class HassioAddonNetwork extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property({ attribute: false }) public supervisor!: Supervisor;
+
   @property({ attribute: false }) public addon!: HassioAddonDetails;
 
   @property({ type: Boolean }) public disabled = false;
@@ -36,6 +39,11 @@ class SupervisorAppNetwork extends LitElement {
 
   @state() private _config?: Record<string, any>;
 
+  public connectedCallback(): void {
+    super.connectedCallback();
+    this._setNetworkConfig();
+  }
+
   protected render() {
     if (!this._config) {
       return nothing;
@@ -48,14 +56,14 @@ class SupervisorAppNetwork extends LitElement {
     return html`
       <ha-card
         outlined
-        .header=${this.hass.localize(
-          "ui.panel.config.apps.configuration.network.header"
+        .header=${this.supervisor.localize(
+          "addon.configuration.network.header"
         )}
       >
         <div class="card-content">
           <p>
-            ${this.hass.localize(
-              "ui.panel.config.apps.configuration.network.introduction"
+            ${this.supervisor.localize(
+              "addon.configuration.network.introduction"
             )}
           </p>
           ${this._error
@@ -78,8 +86,8 @@ class SupervisorAppNetwork extends LitElement {
         ${hasHiddenOptions
           ? html`<ha-formfield
               class="show-optional"
-              .label=${this.hass.localize(
-                "ui.panel.config.apps.configuration.network.show_disabled"
+              .label=${this.supervisor.localize(
+                "addon.configuration.network.show_disabled"
               )}
             >
               <ha-switch
@@ -96,23 +104,21 @@ class SupervisorAppNetwork extends LitElement {
             .disabled=${this.disabled}
             @click=${this._resetTapped}
           >
-            ${this.hass.localize(
-              "ui.panel.config.apps.configuration.network.reset_defaults"
-            )}
+            ${this.supervisor.localize("common.reset_defaults")}
           </ha-progress-button>
           <ha-progress-button
             @click=${this._saveTapped}
             .disabled=${!this._configHasChanged || this.disabled}
           >
-            ${this.hass.localize("ui.common.save")}
+            ${this.supervisor.localize("common.save")}
           </ha-progress-button>
         </div>
       </ha-card>
     `;
   }
 
-  protected willUpdate(changedProperties: PropertyValues): void {
-    super.willUpdate(changedProperties);
+  protected update(changedProperties: PropertyValues): void {
+    super.update(changedProperties);
     if (changedProperties.has("addon")) {
       this._setNetworkConfig();
     }
@@ -178,15 +184,12 @@ class SupervisorAppNetwork extends LitElement {
       button.actionSuccess();
       fireEvent(this, "hass-api-called", eventdata);
       if (this.addon?.state === "started") {
-        await suggestSupervisorAppRestart(this, this.hass, this.addon);
+        await suggestAddonRestart(this, this.hass, this.supervisor, this.addon);
       }
     } catch (err: any) {
-      this._error = this.hass.localize(
-        "ui.panel.config.apps.dashboard.failed_to_reset",
-        {
-          error: extractApiErrorMessage(err),
-        }
-      );
+      this._error = this.supervisor.localize("addon.failed_to_reset", {
+        error: extractApiErrorMessage(err),
+      });
       button.actionError();
     }
   }
@@ -223,15 +226,12 @@ class SupervisorAppNetwork extends LitElement {
       button.actionSuccess();
       fireEvent(this, "hass-api-called", eventdata);
       if (this.addon?.state === "started") {
-        await suggestSupervisorAppRestart(this, this.hass, this.addon);
+        await suggestAddonRestart(this, this.hass, this.supervisor, this.addon);
       }
     } catch (err: any) {
-      this._error = this.hass.localize(
-        "ui.panel.config.apps.dashboard.failed_to_save",
-        {
-          error: extractApiErrorMessage(err),
-        }
-      );
+      this._error = this.supervisor.localize("addon.failed_to_save", {
+        error: extractApiErrorMessage(err),
+      });
       button.actionError();
     }
   }
@@ -239,7 +239,7 @@ class SupervisorAppNetwork extends LitElement {
   static get styles(): CSSResultGroup {
     return [
       haStyle,
-      supervisorAppsStyle,
+      hassioStyle,
       css`
         :host {
           display: block;
@@ -261,6 +261,6 @@ class SupervisorAppNetwork extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "supervisor-app-network": SupervisorAppNetwork;
+    "hassio-addon-network": HassioAddonNetwork;
   }
 }

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

@@ -1,22 +1,25 @@
-import "../../../../../components/ha-card";
+import "../../../../src/components/ha-card";
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
-import "../../../../../components/ha-alert";
-import "../../../../../components/ha-spinner";
-import "../../../../../components/ha-markdown";
+import "../../../../src/components/ha-alert";
+import "../../../../src/components/ha-spinner";
+import "../../../../src/components/ha-markdown";
 import { customElement, property, state } from "lit/decorators";
-import type { HassioAddonDetails } from "../../../../../data/hassio/addon";
-import { fetchHassioAddonDocumentation } from "../../../../../data/hassio/addon";
-import { extractApiErrorMessage } from "../../../../../data/hassio/common";
-import "../../../../../layouts/hass-loading-screen";
-import { haStyle } from "../../../../../resources/styles";
-import type { HomeAssistant } from "../../../../../types";
-import { supervisorAppsStyle } from "../../resources/supervisor-apps-style";
+import type { HassioAddonDetails } from "../../../../src/data/hassio/addon";
+import { fetchHassioAddonDocumentation } from "../../../../src/data/hassio/addon";
+import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
+import "../../../../src/layouts/hass-loading-screen";
+import { haStyle } from "../../../../src/resources/styles";
+import type { HomeAssistant } from "../../../../src/types";
+import { hassioStyle } from "../../resources/hassio-style";
+import type { Supervisor } from "../../../../src/data/supervisor/supervisor";
 
-@customElement("supervisor-app-documentation-tab")
-class SupervisorAppDocumentationDashboard extends LitElement {
+@customElement("hassio-addon-documentation-tab")
+class HassioAddonDocumentationDashboard extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property({ attribute: false }) public supervisor!: Supervisor;
+
   @property({ attribute: false }) public addon?: HassioAddonDetails;
 
   @state() private _error?: string;
@@ -54,18 +57,18 @@ class SupervisorAppDocumentationDashboard extends LitElement {
   static get styles(): CSSResultGroup {
     return [
       haStyle,
-      supervisorAppsStyle,
+      hassioStyle,
       css`
         ha-card {
           display: block;
         }
         .content {
           margin: auto;
-          padding: var(--ha-space-2);
+          padding: 8px;
           max-width: 1024px;
         }
         ha-markdown {
-          padding: var(--ha-space-4);
+          padding: 16px;
         }
       `,
     ];
@@ -79,8 +82,8 @@ class SupervisorAppDocumentationDashboard extends LitElement {
         this.addon!.slug
       );
     } catch (err: any) {
-      this._error = this.hass.localize(
-        "ui.panel.config.apps.documentation.get_documentation",
+      this._error = this.supervisor.localize(
+        "addon.documentation.get_documentation",
         { error: extractApiErrorMessage(err) }
       );
     }
@@ -89,6 +92,6 @@ class SupervisorAppDocumentationDashboard extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "supervisor-app-documentation-tab": SupervisorAppDocumentationDashboard;
+    "hassio-addon-documentation-tab": HassioAddonDocumentationDashboard;
   }
 }

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

@@ -0,0 +1,294 @@
+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

@@ -0,0 +1,62 @@
+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/addon-view/info/hassio-addon-info-tab.ts

@@ -1,21 +1,24 @@
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import "../../../../../components/ha-spinner";
-import type { HassioAddonDetails } from "../../../../../data/hassio/addon";
-import { haStyle } from "../../../../../resources/styles";
-import type { HomeAssistant, Route } from "../../../../../types";
-import { supervisorAppsStyle } from "../../resources/supervisor-apps-style";
-import "./supervisor-app-info";
+import "../../../../src/components/ha-spinner";
+import type { HassioAddonDetails } from "../../../../src/data/hassio/addon";
+import type { Supervisor } from "../../../../src/data/supervisor/supervisor";
+import { haStyle } from "../../../../src/resources/styles";
+import type { HomeAssistant, Route } from "../../../../src/types";
+import { hassioStyle } from "../../resources/hassio-style";
+import "./hassio-addon-info";
 
-@customElement("supervisor-app-info-tab")
-class SupervisorAppInfoDashboard extends LitElement {
+@customElement("hassio-addon-info-tab")
+class HassioAddonInfoDashboard extends LitElement {
   @property({ type: Boolean }) public narrow = false;
 
   @property({ attribute: false }) public route!: Route;
 
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property({ attribute: false }) public supervisor!: Supervisor;
+
   @property({ attribute: false }) public addon?: HassioAddonDetails;
 
   @property({ type: Boolean, attribute: "control-enabled" })
@@ -28,13 +31,14 @@ class SupervisorAppInfoDashboard extends LitElement {
 
     return html`
       <div class="content">
-        <supervisor-app-info
+        <hassio-addon-info
           .narrow=${this.narrow}
           .route=${this.route}
           .hass=${this.hass}
+          .supervisor=${this.supervisor}
           .addon=${this.addon}
           .controlEnabled=${this.controlEnabled}
-        ></supervisor-app-info>
+        ></hassio-addon-info>
       </div>
     `;
   }
@@ -42,11 +46,11 @@ class SupervisorAppInfoDashboard extends LitElement {
   static get styles(): CSSResultGroup {
     return [
       haStyle,
-      supervisorAppsStyle,
+      hassioStyle,
       css`
         .content {
           margin: auto;
-          padding: var(--ha-space-2);
+          padding: 8px;
           max-width: 1024px;
         }
       `,
@@ -56,6 +60,6 @@ class SupervisorAppInfoDashboard extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "supervisor-app-info-tab": SupervisorAppInfoDashboard;
+    "hassio-addon-info-tab": HassioAddonInfoDashboard;
   }
 }

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

@@ -27,28 +27,28 @@ import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { ifDefined } from "lit/directives/if-defined";
 import memoizeOne from "memoize-one";
-import { atLeastVersion } from "../../../../../common/config/version";
-import { fireEvent } from "../../../../../common/dom/fire_event";
-import { navigate } from "../../../../../common/navigate";
-import { capitalizeFirstLetter } from "../../../../../common/string/capitalize-first-letter";
-import "../../../../../components/buttons/ha-progress-button";
-import "../../../../../components/chips/ha-assist-chip";
-import "../../../../../components/chips/ha-chip-set";
-import "../../../../../components/ha-alert";
-import "../../../../../components/ha-button";
-import "../../../../../components/ha-card";
-import "../../../../../components/ha-formfield";
-import "../../../../../components/ha-markdown";
-import "../../../../../components/ha-settings-row";
-import "../../../../../components/ha-svg-icon";
-import "../../../../../components/ha-switch";
-import type { HaSwitch } from "../../../../../components/ha-switch";
+import { atLeastVersion } from "../../../../src/common/config/version";
+import { fireEvent } from "../../../../src/common/dom/fire_event";
+import { navigate } from "../../../../src/common/navigate";
+import { capitalizeFirstLetter } from "../../../../src/common/string/capitalize-first-letter";
+import "../../../../src/components/buttons/ha-progress-button";
+import "../../../../src/components/chips/ha-assist-chip";
+import "../../../../src/components/chips/ha-chip-set";
+import "../../../../src/components/ha-alert";
+import "../../../../src/components/ha-button";
+import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-formfield";
+import "../../../../src/components/ha-markdown";
+import "../../../../src/components/ha-settings-row";
+import "../../../../src/components/ha-svg-icon";
+import "../../../../src/components/ha-switch";
+import type { HaSwitch } from "../../../../src/components/ha-switch";
 import type {
   AddonCapability,
   HassioAddonDetails,
   HassioAddonSetOptionParams,
   HassioAddonSetSecurityParams,
-} from "../../../../../data/hassio/addon";
+} from "../../../../src/data/hassio/addon";
 import {
   fetchHassioAddonChangelog,
   fetchHassioAddonInfo,
@@ -61,26 +61,33 @@ import {
   stopHassioAddon,
   uninstallHassioAddon,
   validateHassioAddonOption,
-} from "../../../../../data/hassio/addon";
-import type { HassioStats } from "../../../../../data/hassio/common";
+} from "../../../../src/data/hassio/addon";
+import type { HassioStats } from "../../../../src/data/hassio/common";
 import {
   extractApiErrorMessage,
   fetchHassioStats,
-} from "../../../../../data/hassio/common";
-import type { StoreAddonDetails } from "../../../../../data/supervisor/store";
+} from "../../../../src/data/hassio/common";
+import type {
+  StoreAddon,
+  StoreAddonDetails,
+} from "../../../../src/data/supervisor/store";
+import type { Supervisor } from "../../../../src/data/supervisor/supervisor";
 import {
   showAlertDialog,
   showConfirmationDialog,
-} from "../../../../../dialogs/generic/show-dialog-box";
-import { mdiHomeAssistant } from "../../../../../resources/home-assistant-logo-svg";
-import { haStyle } from "../../../../../resources/styles";
-import type { HomeAssistant, Route } from "../../../../../types";
-import { bytesToString } from "../../../../../util/bytes-to-string";
-import "../../components/supervisor-apps-card-content";
-import "../components/supervisor-app-metric";
-import { extractChangelog } from "../util/supervisor-app";
-import "./supervisor-app-system-managed";
-import "../components/supervisor-app-update-available-card";
+} from "../../../../src/dialogs/generic/show-dialog-box";
+import { mdiHomeAssistant } from "../../../../src/resources/home-assistant-logo-svg";
+import { haStyle } from "../../../../src/resources/styles";
+import type { HomeAssistant, Route } from "../../../../src/types";
+import { bytesToString } from "../../../../src/util/bytes-to-string";
+import "../../components/hassio-card-content";
+import "../../components/supervisor-metric";
+import { showHassioMarkdownDialog } from "../../dialogs/markdown/show-dialog-hassio-markdown";
+import { showSystemManagedDialog } from "../../dialogs/system-managed/show-dialog-system-managed";
+import { hassioStyle } from "../../resources/hassio-style";
+import "../../update-available/update-available-card";
+import { addonArchIsSupported, extractChangelog } from "../../util/addon";
+import "./hassio-addon-system-managed";
 
 const STAGE_ICON = {
   stable: mdiCheckCircle,
@@ -99,8 +106,8 @@ const RATING_ICON = {
   8: mdiNumeric8,
 };
 
-@customElement("supervisor-app-info")
-class SupervisorAppInfo extends LitElement {
+@customElement("hassio-addon-info")
+class HassioAddonInfo extends LitElement {
   @property({ type: Boolean }) public narrow = false;
 
   @property({ attribute: false }) public route!: Route;
@@ -111,6 +118,8 @@ class SupervisorAppInfo extends LitElement {
     | HassioAddonDetails
     | StoreAddonDetails;
 
+  @property({ attribute: false }) public supervisor!: Supervisor;
+
   @property({ type: Boolean, attribute: "control-enabled" })
   public controlEnabled = false;
 
@@ -120,27 +129,32 @@ class SupervisorAppInfo extends LitElement {
 
   private _fetchDataTimeout?: number;
 
+  private _addonStoreInfo = memoizeOne(
+    (slug: string, storeAddons: StoreAddon[]) =>
+      storeAddons.find((addon) => addon.slug === slug)
+  );
+
   public disconnectedCallback() {
     super.disconnectedCallback();
 
     if (this._fetchDataTimeout) {
-      clearTimeout(this._fetchDataTimeout);
+      clearInterval(this._fetchDataTimeout);
       this._fetchDataTimeout = undefined;
     }
   }
 
   protected render(): TemplateResult {
+    const addonStoreInfo =
+      !this.addon.detached && !this.addon.available
+        ? this._addonStoreInfo(this.addon.slug, this.supervisor.store.addons)
+        : undefined;
     const metrics = [
       {
-        description: this.hass.localize(
-          "ui.panel.config.apps.dashboard.cpu_usage"
-        ),
+        description: this.supervisor.localize("addon.dashboard.cpu_usage"),
         value: this._metrics?.cpu_percent,
       },
       {
-        description: this.hass.localize(
-          "ui.panel.config.apps.dashboard.ram_usage"
-        ),
+        description: this.supervisor.localize("addon.dashboard.ram_usage"),
         value: this._metrics?.memory_percent,
         tooltip: `${bytesToString(this._metrics?.memory_usage)}/${bytesToString(
           this._metrics?.memory_limit
@@ -153,32 +167,33 @@ class SupervisorAppInfo extends LitElement {
     return html`
       ${this.addon.update_available
         ? html`
-            <supervisor-app-update-available-card
+            <update-available-card
               .hass=${this.hass}
               .narrow=${this.narrow}
-              .addon=${this.addon}
+              .supervisor=${this.supervisor}
+              .addonSlug=${this.addon.slug}
               @update-complete=${this._updateComplete}
-            ></supervisor-app-update-available-card>
+            ></update-available-card>
           `
         : nothing}
       ${"protected" in this.addon && !this.addon.protected
         ? html`
             <ha-alert
               alert-type="error"
-              .title=${this.hass.localize(
-                "ui.panel.config.apps.dashboard.protection_mode.title"
+              .title=${this.supervisor.localize(
+                "addon.dashboard.protection_mode.title"
               )}
             >
-              ${this.hass.localize(
-                "ui.panel.config.apps.dashboard.protection_mode.content"
+              ${this.supervisor.localize(
+                "addon.dashboard.protection_mode.content"
               )}
               <ha-button
                 variant="danger"
                 slot="action"
                 @click=${this._protectionToggled}
               >
-                ${this.hass.localize(
-                  "ui.panel.config.apps.dashboard.protection_mode.enable"
+                ${this.supervisor.localize(
+                  "addon.dashboard.protection_mode.enable"
                 )}
               </ha-button>
             </ha-alert>
@@ -186,11 +201,11 @@ class SupervisorAppInfo extends LitElement {
         : nothing}
       ${systemManaged
         ? html`
-            <supervisor-app-system-managed
-              .hass=${this.hass}
+            <hassio-addon-system-managed
+              .supervisor=${this.supervisor}
               .narrow=${this.narrow}
               .hideButton=${this.controlEnabled}
-            ></supervisor-app-system-managed>
+            ></hassio-addon-system-managed>
           `
         : nothing}
 
@@ -204,8 +219,8 @@ class SupervisorAppInfo extends LitElement {
                     ${this._computeIsRunning
                       ? html`
                           <ha-svg-icon
-                            .title=${this.hass.localize(
-                              "ui.panel.config.apps.dashboard.app_running"
+                            .title=${this.supervisor.localize(
+                              "dashboard.addon_running"
                             )}
                             class="running"
                             .path=${mdiPlayCircle}
@@ -213,8 +228,8 @@ class SupervisorAppInfo extends LitElement {
                         `
                       : html`
                           <ha-svg-icon
-                            .title=${this.hass.localize(
-                              "ui.panel.config.apps.dashboard.app_stopped"
+                            .title=${this.supervisor.localize(
+                              "dashboard.addon_stopped"
                             )}
                             class="stopped"
                             .path=${mdiCircleOffOutline}
@@ -227,21 +242,21 @@ class SupervisorAppInfo extends LitElement {
           <div class="description light-color">
             ${this.addon.version
               ? html`
-                  ${this.hass.localize(
-                    "ui.panel.config.apps.dashboard.current_version",
+                  ${this.supervisor.localize(
+                    "addon.dashboard.current_version",
                     { version: this.addon.version }
                   )}
                   <div class="changelog" @click=${this._openChangelog}>
                     (<span class="changelog-link"
-                      >${this.hass.localize(
-                        "ui.panel.config.apps.dashboard.changelog"
+                      >${this.supervisor.localize(
+                        "addon.dashboard.changelog"
                       )}</span
                     >)
                   </div>
                 `
               : html`<span class="changelog-link" @click=${this._openChangelog}
-                  >${this.hass.localize(
-                    "ui.panel.config.apps.dashboard.changelog"
+                  >${this.supervisor.localize(
+                    "addon.dashboard.changelog"
                   )}</span
                 >`}
           </div>
@@ -258,8 +273,8 @@ class SupervisorAppInfo extends LitElement {
                     @click=${this._showMoreInfo}
                     id="stage"
                     .label=${capitalizeFirstLetter(
-                      this.hass.localize(
-                        `ui.panel.config.apps.dashboard.capability.stages.${this.addon.stage}`
+                      this.supervisor.localize(
+                        `addon.dashboard.capability.stages.${this.addon.stage}`
                       )
                     )}
                   >
@@ -277,13 +292,13 @@ class SupervisorAppInfo extends LitElement {
               class=${classMap({
                 green: Number(this.addon.rating) >= 6,
                 yellow: [3, 4, 5].includes(Number(this.addon.rating)),
-                red: Number(this.addon.rating) <= 2,
+                red: Number(this.addon.rating) >= 2,
               })}
               @click=${this._showMoreInfo}
               id="rating"
               .label=${capitalizeFirstLetter(
-                this.hass.localize(
-                  "ui.panel.config.apps.dashboard.capability.label.rating"
+                this.supervisor.localize(
+                  "addon.dashboard.capability.label.rating"
                 )
               )}
             >
@@ -297,8 +312,8 @@ class SupervisorAppInfo extends LitElement {
                     @click=${this._showMoreInfo}
                     id="host_network"
                     .label=${capitalizeFirstLetter(
-                      this.hass.localize(
-                        "ui.panel.config.apps.dashboard.capability.label.host"
+                      this.supervisor.localize(
+                        "addon.dashboard.capability.label.host"
                       )
                     )}
                   >
@@ -313,8 +328,8 @@ class SupervisorAppInfo extends LitElement {
                     @click=${this._showMoreInfo}
                     id="full_access"
                     .label=${capitalizeFirstLetter(
-                      this.hass.localize(
-                        "ui.panel.config.apps.dashboard.capability.label.hardware"
+                      this.supervisor.localize(
+                        "addon.dashboard.capability.label.hardware"
                       )
                     )}
                   >
@@ -329,8 +344,8 @@ class SupervisorAppInfo extends LitElement {
                     @click=${this._showMoreInfo}
                     id="homeassistant_api"
                     .label=${capitalizeFirstLetter(
-                      this.hass.localize(
-                        "ui.panel.config.apps.dashboard.capability.label.core"
+                      this.supervisor.localize(
+                        "addon.dashboard.capability.label.core"
                       )
                     )}
                   >
@@ -348,8 +363,8 @@ class SupervisorAppInfo extends LitElement {
                     @click=${this._showMoreInfo}
                     id="hassio_api"
                     .label=${capitalizeFirstLetter(
-                      this.hass.localize(
-                        `ui.panel.config.apps.dashboard.capability.role.${this.addon.hassio_role}`
+                      this.supervisor.localize(
+                        `addon.dashboard.capability.role.${this.addon.hassio_role}`
                       ) || this.addon.hassio_role
                     )}
                   >
@@ -367,8 +382,8 @@ class SupervisorAppInfo extends LitElement {
                     @click=${this._showMoreInfo}
                     id="docker_api"
                     .label=${capitalizeFirstLetter(
-                      this.hass.localize(
-                        "ui.panel.config.apps.dashboard.capability.label.docker"
+                      this.supervisor.localize(
+                        "addon.dashboard.capability.label.docker"
                       )
                     )}
                   >
@@ -383,8 +398,8 @@ class SupervisorAppInfo extends LitElement {
                     @click=${this._showMoreInfo}
                     id="host_pid"
                     .label=${capitalizeFirstLetter(
-                      this.hass.localize(
-                        "ui.panel.config.apps.dashboard.capability.label.host_pid"
+                      this.supervisor.localize(
+                        "addon.dashboard.capability.label.host_pid"
                       )
                     )}
                   >
@@ -400,8 +415,8 @@ class SupervisorAppInfo extends LitElement {
                     class=${this._computeApparmorClassName}
                     id="apparmor"
                     .label=${capitalizeFirstLetter(
-                      this.hass.localize(
-                        "ui.panel.config.apps.dashboard.capability.label.apparmor"
+                      this.supervisor.localize(
+                        "addon.dashboard.capability.label.apparmor"
                       )
                     )}
                   >
@@ -416,8 +431,8 @@ class SupervisorAppInfo extends LitElement {
                     @click=${this._showMoreInfo}
                     id="auth_api"
                     .label=${capitalizeFirstLetter(
-                      this.hass.localize(
-                        "ui.panel.config.apps.dashboard.capability.label.auth"
+                      this.supervisor.localize(
+                        "addon.dashboard.capability.label.auth"
                       )
                     )}
                   >
@@ -432,8 +447,8 @@ class SupervisorAppInfo extends LitElement {
                     @click=${this._showMoreInfo}
                     id="ingress"
                     .label=${capitalizeFirstLetter(
-                      this.hass.localize(
-                        "ui.panel.config.apps.dashboard.capability.label.ingress"
+                      this.supervisor.localize(
+                        "addon.dashboard.capability.label.ingress"
                       )
                     )}
                   >
@@ -451,8 +466,8 @@ class SupervisorAppInfo extends LitElement {
                     @click=${this._showMoreInfo}
                     id="signed"
                     .label=${capitalizeFirstLetter(
-                      this.hass.localize(
-                        "ui.panel.config.apps.dashboard.capability.label.signed"
+                      this.supervisor.localize(
+                        "addon.dashboard.capability.label.signed"
                       )
                     )}
                   >
@@ -464,12 +479,10 @@ class SupervisorAppInfo extends LitElement {
               ? html`
                   <ha-assist-chip
                     filled
-                    @click=${this._showSystemManagedInfo}
+                    @click=${this._showSystemManagedDialog}
                     id="system_managed"
                     .label=${capitalizeFirstLetter(
-                      this.hass.localize(
-                        "ui.panel.config.apps.dashboard.system_managed.badge"
-                      )
+                      this.supervisor.localize("addon.system_managed.badge")
                     )}
                   >
                     <ha-svg-icon
@@ -483,17 +496,14 @@ class SupervisorAppInfo extends LitElement {
 
           <div class="description light-color">
             ${this.addon.description}.<br />
-            ${this.hass.localize(
-              "ui.panel.config.apps.dashboard.visit_app_page",
-              {
-                name: html`<a
-                  href=${this.addon.url!}
-                  target="_blank"
-                  rel="noreferrer"
-                  >${this.addon.name}</a
-                >`,
-              }
-            )}
+            ${this.supervisor.localize("addon.dashboard.visit_addon_page", {
+              name: html`<a
+                href=${this.addon.url!}
+                target="_blank"
+                rel="noreferrer"
+                >${this.addon.name}</a
+              >`,
+            })}
           </div>
           <div class="addon-container">
             <div>
@@ -516,13 +526,13 @@ class SupervisorAppInfo extends LitElement {
                     >
                       <ha-settings-row ?three-line=${this.narrow}>
                         <span slot="heading">
-                          ${this.hass.localize(
-                            "ui.panel.config.apps.dashboard.option.boot.title"
+                          ${this.supervisor.localize(
+                            "addon.dashboard.option.boot.title"
                           )}
                         </span>
                         <span slot="description">
-                          ${this.hass.localize(
-                            "ui.panel.config.apps.dashboard.option.boot.description"
+                          ${this.supervisor.localize(
+                            "addon.dashboard.option.boot.description"
                           )}
                         </span>
                         <ha-switch
@@ -537,13 +547,13 @@ class SupervisorAppInfo extends LitElement {
                         ? html`
                             <ha-settings-row ?three-line=${this.narrow}>
                               <span slot="heading">
-                                ${this.hass.localize(
-                                  "ui.panel.config.apps.dashboard.option.watchdog.title"
+                                ${this.supervisor.localize(
+                                  "addon.dashboard.option.watchdog.title"
                                 )}
                               </span>
                               <span slot="description">
-                                ${this.hass.localize(
-                                  "ui.panel.config.apps.dashboard.option.watchdog.description"
+                                ${this.supervisor.localize(
+                                  "addon.dashboard.option.watchdog.description"
                                 )}
                               </span>
                               <ha-switch
@@ -561,13 +571,13 @@ class SupervisorAppInfo extends LitElement {
                         ? html`
                             <ha-settings-row ?three-line=${this.narrow}>
                               <span slot="heading">
-                                ${this.hass.localize(
-                                  "ui.panel.config.apps.dashboard.option.auto_update.title"
+                                ${this.supervisor.localize(
+                                  "addon.dashboard.option.auto_update.title"
                                 )}
                               </span>
                               <span slot="description">
-                                ${this.hass.localize(
-                                  "ui.panel.config.apps.dashboard.option.auto_update.description"
+                                ${this.supervisor.localize(
+                                  "addon.dashboard.option.auto_update.description"
                                 )}
                               </span>
                               <ha-switch
@@ -584,13 +594,13 @@ class SupervisorAppInfo extends LitElement {
                         ? html`
                             <ha-settings-row ?three-line=${this.narrow}>
                               <span slot="heading">
-                                ${this.hass.localize(
-                                  "ui.panel.config.apps.dashboard.option.ingress_panel.title"
+                                ${this.supervisor.localize(
+                                  "addon.dashboard.option.ingress_panel.title"
                                 )}
                               </span>
                               <span slot="description">
-                                ${this.hass.localize(
-                                  "ui.panel.config.apps.dashboard.option.ingress_panel.description"
+                                ${this.supervisor.localize(
+                                  "addon.dashboard.option.ingress_panel.description"
                                 )}
                               </span>
                               <ha-switch
@@ -607,13 +617,13 @@ class SupervisorAppInfo extends LitElement {
                         ? html`
                             <ha-settings-row ?three-line=${this.narrow}>
                               <span slot="heading">
-                                ${this.hass.localize(
-                                  "ui.panel.config.apps.dashboard.option.protected.title"
+                                ${this.supervisor.localize(
+                                  "addon.dashboard.option.protected.title"
                                 )}
                               </span>
                               <span slot="description">
-                                ${this.hass.localize(
-                                  "ui.panel.config.apps.dashboard.option.protected.description"
+                                ${this.supervisor.localize(
+                                  "addon.dashboard.option.protected.description"
                                 )}
                               </span>
                               <ha-switch
@@ -634,19 +644,17 @@ class SupervisorAppInfo extends LitElement {
               ${this.addon.version && this.addon.state === "started"
                 ? html`<ha-settings-row ?three-line=${this.narrow}>
                       <span slot="heading">
-                        ${this.hass.localize(
-                          "ui.panel.config.apps.dashboard.hostname"
-                        )}
+                        ${this.supervisor.localize("addon.dashboard.hostname")}
                       </span>
                       <code slot="description"> ${this.addon.hostname} </code>
                     </ha-settings-row>
                     ${metrics.map(
                       (metric) => html`
-                        <supervisor-app-metric
+                        <supervisor-metric
                           .description=${metric.description}
                           .value=${metric.value ?? 0}
                           .tooltip=${metric.tooltip}
-                        ></supervisor-app-metric>
+                        ></supervisor-metric>
                       `
                     )}`
                 : nothing}
@@ -655,6 +663,30 @@ class SupervisorAppInfo extends LitElement {
           ${this._error
             ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
             : nothing}
+          ${!this.addon.version && addonStoreInfo && !this.addon.available
+            ? !addonArchIsSupported(
+                this.supervisor.info.supported_arch,
+                this.addon.arch
+              )
+              ? html`
+                  <ha-alert alert-type="warning">
+                    ${this.supervisor.localize(
+                      "addon.dashboard.not_available_arch"
+                    )}
+                  </ha-alert>
+                `
+              : html`
+                  <ha-alert alert-type="warning">
+                    ${this.supervisor.localize(
+                      "addon.dashboard.not_available_version",
+                      {
+                        core_version_installed: this.supervisor.core.version,
+                        core_version_needed: addonStoreInfo!.homeassistant,
+                      }
+                    )}
+                  </ha-alert>
+                `
+            : nothing}
         </div>
         <div class="card-actions">
           <div>
@@ -667,19 +699,14 @@ class SupervisorAppInfo extends LitElement {
                       @click=${this._stopClicked}
                       .disabled=${systemManaged && !this.controlEnabled}
                     >
-                      ${this.hass.localize(
-                        "ui.panel.config.apps.dashboard.stop"
-                      )}
+                      ${this.supervisor.localize("addon.dashboard.stop")}
                     </ha-progress-button>
                     <ha-progress-button
                       variant="danger"
                       appearance="plain"
                       @click=${this._restartClicked}
-                      .disabled=${systemManaged && !this.controlEnabled}
                     >
-                      ${this.hass.localize(
-                        "ui.panel.config.apps.dashboard.restart"
-                      )}
+                      ${this.supervisor.localize("addon.dashboard.restart")}
                     </ha-progress-button>
                   `
                 : html`
@@ -688,9 +715,7 @@ class SupervisorAppInfo extends LitElement {
                       .progress=${this.addon.state === "startup"}
                       appearance="plain"
                     >
-                      ${this.hass.localize(
-                        "ui.panel.config.apps.dashboard.start"
-                      )}
+                      ${this.supervisor.localize("addon.dashboard.start")}
                     </ha-progress-button>
                   `
               : nothing}
@@ -704,9 +729,7 @@ class SupervisorAppInfo extends LitElement {
                     @click=${this._uninstallClicked}
                     .disabled=${systemManaged && !this.controlEnabled}
                   >
-                    ${this.hass.localize(
-                      "ui.panel.config.apps.dashboard.uninstall"
-                    )}
+                    ${this.supervisor.localize("addon.dashboard.uninstall")}
                   </ha-progress-button>
                   ${this.addon.build
                     ? html`
@@ -715,9 +738,7 @@ class SupervisorAppInfo extends LitElement {
                           appearance="plain"
                           @click=${this._rebuildClicked}
                         >
-                          ${this.hass.localize(
-                            "ui.panel.config.apps.dashboard.rebuild"
-                          )}
+                          ${this.supervisor.localize("addon.dashboard.rebuild")}
                         </ha-progress-button>
                       `
                     : nothing}
@@ -739,8 +760,8 @@ class SupervisorAppInfo extends LitElement {
                             ? this._openIngress
                             : undefined}
                         >
-                          ${this.hass.localize(
-                            "ui.panel.config.apps.dashboard.open_web_ui"
+                          ${this.supervisor.localize(
+                            "addon.dashboard.open_web_ui"
                           )}
                         </ha-button>
                       `
@@ -751,9 +772,7 @@ class SupervisorAppInfo extends LitElement {
                     .disabled=${!this.addon.available}
                     @click=${this._installClicked}
                   >
-                    ${this.hass.localize(
-                      "ui.panel.config.apps.dashboard.install"
-                    )}
+                    ${this.supervisor.localize("addon.dashboard.install")}
                   </ha-progress-button>
                 `}
           </div>
@@ -785,7 +804,7 @@ class SupervisorAppInfo extends LitElement {
         "state" in this.addon &&
         this.addon.state === "startup"
       ) {
-        // App is starting up, wait for it to start
+        // Addon is starting up, wait for it to start
         this._scheduleDataUpdate();
       }
     }
@@ -838,24 +857,28 @@ class SupervisorAppInfo extends LitElement {
 
   private _showMoreInfo(ev): void {
     const id = ev.currentTarget.id as AddonCapability;
-    showAlertDialog(this, {
-      title: this.hass.localize(
-        `ui.panel.config.apps.dashboard.capability.${id}.title`
-      ),
-      text: this.hass.localize(
-        `ui.panel.config.apps.dashboard.capability.${id}.description`
-      ),
+    showHassioMarkdownDialog(this, {
+      title: this.supervisor.localize(`addon.dashboard.capability.${id}.title`),
+      content:
+        id === "stage"
+          ? this.supervisor.localize(
+              `addon.dashboard.capability.${id}.description`,
+              {
+                icon_stable: `<ha-svg-icon path="${STAGE_ICON.stable}"></ha-svg-icon>`,
+                icon_experimental: `<ha-svg-icon path="${STAGE_ICON.experimental}"></ha-svg-icon>`,
+                icon_deprecated: `<ha-svg-icon path="${STAGE_ICON.deprecated}"></ha-svg-icon>`,
+              }
+            )
+          : this.supervisor.localize(
+              `addon.dashboard.capability.${id}.description`
+            ),
     });
   }
 
-  private _showSystemManagedInfo() {
-    showAlertDialog(this, {
-      title: this.hass.localize(
-        "ui.panel.config.apps.dashboard.system_managed.title"
-      ),
-      text: this.hass.localize(
-        "ui.panel.config.apps.dashboard.system_managed.description"
-      ),
+  private _showSystemManagedDialog() {
+    showSystemManagedDialog(this, {
+      addon: this.addon as HassioAddonDetails,
+      supervisor: this.supervisor,
     });
   }
 
@@ -879,7 +902,7 @@ class SupervisorAppInfo extends LitElement {
   }
 
   private _openIngress(): void {
-    navigate(`/app/${this.addon.slug}`);
+    navigate(`/hassio/ingress/${this.addon.slug}`);
   }
 
   private get _computeShowIngressUI(): boolean {
@@ -913,12 +936,9 @@ class SupervisorAppInfo extends LitElement {
       };
       fireEvent(this, "hass-api-called", eventdata);
     } catch (err: any) {
-      this._error = this.hass.localize(
-        "ui.panel.config.apps.dashboard.failed_to_save",
-        {
-          error: extractApiErrorMessage(err),
-        }
-      );
+      this._error = this.supervisor.localize("addon.failed_to_save", {
+        error: extractApiErrorMessage(err),
+      });
     }
   }
 
@@ -936,12 +956,9 @@ class SupervisorAppInfo extends LitElement {
       };
       fireEvent(this, "hass-api-called", eventdata);
     } catch (err: any) {
-      this._error = this.hass.localize(
-        "ui.panel.config.apps.dashboard.failed_to_save",
-        {
-          error: extractApiErrorMessage(err),
-        }
-      );
+      this._error = this.supervisor.localize("addon.failed_to_save", {
+        error: extractApiErrorMessage(err),
+      });
     }
   }
 
@@ -959,12 +976,9 @@ class SupervisorAppInfo extends LitElement {
       };
       fireEvent(this, "hass-api-called", eventdata);
     } catch (err: any) {
-      this._error = this.hass.localize(
-        "ui.panel.config.apps.dashboard.failed_to_save",
-        {
-          error: extractApiErrorMessage(err),
-        }
-      );
+      this._error = this.supervisor.localize("addon.failed_to_save", {
+        error: extractApiErrorMessage(err),
+      });
     }
   }
 
@@ -982,12 +996,9 @@ class SupervisorAppInfo extends LitElement {
       };
       fireEvent(this, "hass-api-called", eventdata);
     } catch (err: any) {
-      this._error = this.hass.localize(
-        "ui.panel.config.apps.dashboard.failed_to_save",
-        {
-          error: extractApiErrorMessage(err),
-        }
-      );
+      this._error = this.supervisor.localize("addon.failed_to_save", {
+        error: extractApiErrorMessage(err),
+      });
     }
   }
 
@@ -1005,12 +1016,9 @@ class SupervisorAppInfo extends LitElement {
       };
       fireEvent(this, "hass-api-called", eventdata);
     } catch (err: any) {
-      this._error = this.hass.localize(
-        "ui.panel.config.apps.dashboard.failed_to_save",
-        {
-          error: extractApiErrorMessage(err),
-        }
-      );
+      this._error = this.supervisor.localize("addon.failed_to_save", {
+        error: extractApiErrorMessage(err),
+      });
     }
   }
 
@@ -1021,19 +1029,14 @@ class SupervisorAppInfo extends LitElement {
         this.addon.slug
       );
 
-      showAlertDialog(this, {
-        title: this.hass.localize("ui.panel.config.apps.dashboard.changelog"),
-        text: html`<ha-markdown
-          .content=${extractChangelog(
-            this.addon as HassioAddonDetails,
-            content
-          )}
-        ></ha-markdown>`,
+      showHassioMarkdownDialog(this, {
+        title: this.supervisor.localize("addon.dashboard.changelog"),
+        content: extractChangelog(this.addon as HassioAddonDetails, content),
       });
     } catch (err: any) {
       showAlertDialog(this, {
-        title: this.hass.localize(
-          "ui.panel.config.apps.dashboard.action_error.get_changelog"
+        title: this.supervisor.localize(
+          "addon.dashboard.action_error.get_changelog"
         ),
         text: extractApiErrorMessage(err),
       });
@@ -1063,9 +1066,7 @@ class SupervisorAppInfo extends LitElement {
       fireEvent(this, "hass-api-called", eventdata);
     } catch (err: any) {
       showAlertDialog(this, {
-        title: this.hass.localize(
-          "ui.panel.config.apps.dashboard.action_error.install"
-        ),
+        title: this.supervisor.localize("addon.dashboard.action_error.install"),
         text: extractApiErrorMessage(err),
       });
     }
@@ -1090,9 +1091,7 @@ class SupervisorAppInfo extends LitElement {
       fireEvent(this, "hass-api-called", eventdata);
     } catch (err: any) {
       showAlertDialog(this, {
-        title: this.hass.localize(
-          "ui.panel.config.apps.dashboard.action_error.stop"
-        ),
+        title: this.supervisor.localize("addon.dashboard.action_error.stop"),
         text: extractApiErrorMessage(err),
       });
     }
@@ -1100,10 +1099,6 @@ class SupervisorAppInfo extends LitElement {
   }
 
   private async _restartClicked(ev: CustomEvent): Promise<void> {
-    if (this._isSystemManaged(this.addon) && !this.controlEnabled) {
-      return;
-    }
-
     const button = ev.currentTarget as any;
     button.progress = true;
 
@@ -1112,14 +1107,12 @@ class SupervisorAppInfo extends LitElement {
       const eventdata = {
         success: true,
         response: undefined,
-        path: "restart",
+        path: "stop",
       };
       fireEvent(this, "hass-api-called", eventdata);
     } catch (err: any) {
       showAlertDialog(this, {
-        title: this.hass.localize(
-          "ui.panel.config.apps.dashboard.action_error.restart"
-        ),
+        title: this.supervisor.localize("addon.dashboard.action_error.restart"),
         text: extractApiErrorMessage(err),
       });
     }
@@ -1134,9 +1127,7 @@ class SupervisorAppInfo extends LitElement {
       await rebuildLocalAddon(this.hass, this.addon.slug);
     } catch (err: any) {
       showAlertDialog(this, {
-        title: this.hass.localize(
-          "ui.panel.config.apps.dashboard.action_error.rebuild"
-        ),
+        title: this.supervisor.localize("addon.dashboard.action_error.rebuild"),
         text: extractApiErrorMessage(err),
       });
     }
@@ -1153,15 +1144,15 @@ class SupervisorAppInfo extends LitElement {
       );
       if (!validate.valid) {
         await showConfirmationDialog(this, {
-          title: this.hass.localize(
-            "ui.panel.config.apps.dashboard.action_error.start_invalid_config"
+          title: this.supervisor.localize(
+            "addon.dashboard.action_error.start_invalid_config"
           ),
           text: validate.message.split(" Got ")[0],
           confirm: () => this._openConfiguration(),
-          confirmText: this.hass.localize(
-            "ui.panel.config.apps.dashboard.action_error.go_to_config"
+          confirmText: this.supervisor.localize(
+            "addon.dashboard.action_error.go_to_config"
           ),
-          dismissText: this.hass.localize("ui.common.cancel"),
+          dismissText: this.supervisor.localize("common.cancel"),
         });
         button.actionError();
         button.progress = false;
@@ -1171,9 +1162,7 @@ class SupervisorAppInfo extends LitElement {
       button.actionError();
       button.progress = false;
       showAlertDialog(this, {
-        title: this.hass.localize(
-          "ui.panel.config.apps.dashboard.action_error.validate_config"
-        ),
+        title: "Failed to validate addon configuration",
         text: extractApiErrorMessage(err),
       });
       return;
@@ -1192,9 +1181,7 @@ class SupervisorAppInfo extends LitElement {
       button.actionError();
       button.progress = false;
       showAlertDialog(this, {
-        title: this.hass.localize(
-          "ui.panel.config.apps.dashboard.action_error.start"
-        ),
+        title: this.supervisor.localize("addon.dashboard.action_error.start"),
         text: extractApiErrorMessage(err),
       });
       return;
@@ -1204,7 +1191,7 @@ class SupervisorAppInfo extends LitElement {
   }
 
   private _openConfiguration(): void {
-    navigate(`/config/app/${this.addon.slug}/config`);
+    navigate(`/hassio/addon/${this.addon.slug}/config`);
   }
 
   private async _uninstallClicked(ev: CustomEvent): Promise<void> {
@@ -1220,18 +1207,13 @@ class SupervisorAppInfo extends LitElement {
     };
 
     const confirmed = await showConfirmationDialog(this, {
-      title: this.hass.localize(
-        "ui.panel.config.apps.dashboard.uninstall_dialog.title",
-        {
-          name: this.addon.name,
-        }
-      ),
+      title: this.supervisor.localize("dialog.uninstall_addon.title", {
+        name: this.addon.name,
+      }),
       text: html`
         <ha-formfield
           .label=${html`<p>
-            ${this.hass.localize(
-              "ui.panel.config.apps.dashboard.uninstall_dialog.remove_data"
-            )}
+            ${this.supervisor.localize("dialog.uninstall_addon.remove_data")}
           </p>`}
         >
           <ha-switch
@@ -1241,10 +1223,8 @@ class SupervisorAppInfo extends LitElement {
           ></ha-switch>
         </ha-formfield>
       `,
-      confirmText: this.hass.localize(
-        "ui.panel.config.apps.dashboard.uninstall_dialog.uninstall"
-      ),
-      dismissText: this.hass.localize("ui.common.cancel"),
+      confirmText: this.supervisor.localize("dialog.uninstall_addon.uninstall"),
+      dismissText: this.supervisor.localize("common.cancel"),
       destructive: true,
     });
 
@@ -1265,8 +1245,8 @@ class SupervisorAppInfo extends LitElement {
       button.actionSuccess();
     } catch (err: any) {
       showAlertDialog(this, {
-        title: this.hass.localize(
-          "ui.panel.config.apps.dashboard.action_error.uninstall"
+        title: this.supervisor.localize(
+          "addon.dashboard.action_error.uninstall"
         ),
         text: extractApiErrorMessage(err),
       });
@@ -1283,6 +1263,7 @@ class SupervisorAppInfo extends LitElement {
   static get styles(): CSSResultGroup {
     return [
       haStyle,
+      hassioStyle,
       css`
         :host {
           display: block;
@@ -1312,8 +1293,8 @@ class SupervisorAppInfo extends LitElement {
           color: var(--secondary-text-color);
         }
         .addon-header {
-          padding-left: var(--ha-space-2);
-          padding-inline-start: var(--ha-space-2);
+          padding-left: 8px;
+          padding-inline-start: 8px;
           padding-inline-end: initial;
           font-size: var(--ha-font-size-2xl);
           color: var(--ha-card-header-color, var(--primary-text-color));
@@ -1403,11 +1384,6 @@ class SupervisorAppInfo extends LitElement {
         }
         ha-markdown {
           padding: 16px;
-          --markdown-image-background-color: transparent;
-          --markdown-image-border-radius: 0;
-          --markdown-image-min-height: auto;
-          --markdown-image-text-indent: 0;
-          --markdown-image-transition: none;
         }
         ha-settings-row {
           padding: 0;
@@ -1449,7 +1425,7 @@ class SupervisorAppInfo extends LitElement {
           text-decoration: none;
         }
 
-        supervisor-app-update-available-card {
+        update-available-card {
           padding-bottom: 16px;
         }
 
@@ -1467,6 +1443,6 @@ class SupervisorAppInfo extends LitElement {
 }
 declare global {
   interface HTMLElementTagNameMap {
-    "supervisor-app-info": SupervisorAppInfo;
+    "hassio-addon-info": HassioAddonInfo;
   }
 }

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

@@ -1,16 +1,16 @@
 import type { TemplateResult } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
-import { fireEvent } from "../../../../../common/dom/fire_event";
-import "../../../../../components/ha-alert";
-import "../../../../../components/ha-button";
-import type { HomeAssistant } from "../../../../../types";
+import { fireEvent } from "../../../../src/common/dom/fire_event";
+import "../../../../src/components/ha-alert";
+import "../../../../src/components/ha-button";
+import type { Supervisor } from "../../../../src/data/supervisor/supervisor";
 
-@customElement("supervisor-app-system-managed")
-class SupervisorAppSystemManaged extends LitElement {
+@customElement("hassio-addon-system-managed")
+class HassioAddonSystemManaged extends LitElement {
   @property({ type: Boolean }) public narrow = false;
 
-  @property({ attribute: false }) public hass!: HomeAssistant;
+  @property({ attribute: false }) public supervisor!: Supervisor;
 
   @property({ type: Boolean, attribute: "hide-button" }) public hideButton =
     false;
@@ -19,20 +19,14 @@ class SupervisorAppSystemManaged extends LitElement {
     return html`
       <ha-alert
         alert-type="warning"
-        .title=${this.hass.localize(
-          "ui.panel.config.apps.dashboard.system_managed.title"
-        )}
+        .title=${this.supervisor.localize("addon.system_managed.title")}
         .narrow=${this.narrow}
       >
-        ${this.hass.localize(
-          "ui.panel.config.apps.dashboard.system_managed.description"
-        )}
+        ${this.supervisor.localize("addon.system_managed.description")}
         ${!this.hideButton
           ? html`
               <ha-button slot="action" @click=${this._takeControl}>
-                ${this.hass.localize(
-                  "ui.panel.config.apps.dashboard.system_managed.take_control"
-                )}
+                ${this.supervisor.localize("addon.system_managed.take_control")}
               </ha-button>
             `
           : nothing}
@@ -56,7 +50,7 @@ class SupervisorAppSystemManaged extends LitElement {
 }
 declare global {
   interface HTMLElementTagNameMap {
-    "supervisor-app-system-managed": SupervisorAppSystemManaged;
+    "hassio-addon-system-managed": HassioAddonSystemManaged;
   }
 
   interface HASSDomEvents {

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

@@ -6,19 +6,22 @@ import {
   type TemplateResult,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import "../../../../../components/ha-spinner";
-import type { HassioAddonDetails } from "../../../../../data/hassio/addon";
-import { haStyle } from "../../../../../resources/styles";
-import type { HomeAssistant } from "../../../../../types";
-import { supervisorAppsStyle } from "../../resources/supervisor-apps-style";
-import "../../../logs/error-log-card";
-import "../../../../../components/search-input";
-import { extractSearchParam } from "../../../../../common/url/search-params";
+import "../../../../src/components/ha-spinner";
+import type { HassioAddonDetails } 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 { hassioStyle } from "../../resources/hassio-style";
+import "../../../../src/panels/config/logs/error-log-card";
+import "../../../../src/components/search-input";
+import { extractSearchParam } from "../../../../src/common/url/search-params";
 
-@customElement("supervisor-app-log-tab")
-class SupervisorAppLogDashboard extends LitElement {
+@customElement("hassio-addon-log-tab")
+class HassioAddonLogDashboard extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property({ attribute: false }) public supervisor!: Supervisor;
+
   @property({ attribute: false }) public addon?: HassioAddonDetails;
 
   @state() private _filter = extractSearchParam("filter") || "";
@@ -33,12 +36,13 @@ class SupervisorAppLogDashboard extends LitElement {
           @value-changed=${this._filterChanged}
           .hass=${this.hass}
           .filter=${this._filter}
-          .label=${this.hass.localize("ui.panel.config.logs.search")}
+          .label=${this.supervisor.localize("ui.panel.config.logs.search")}
         ></search-input>
       </div>
       <div class="content">
         <error-log-card
           .hass=${this.hass}
+          .localizeFunc=${this.supervisor.localize}
           .header=${this.addon.name}
           .provider=${this.addon.slug}
           .filter=${this._filter}
@@ -55,11 +59,11 @@ class SupervisorAppLogDashboard extends LitElement {
   static get styles(): CSSResultGroup {
     return [
       haStyle,
-      supervisorAppsStyle,
+      hassioStyle,
       css`
         .content {
           margin: auto;
-          padding: var(--ha-space-2);
+          padding: 8px;
         }
         .search {
           position: sticky;
@@ -83,6 +87,6 @@ class SupervisorAppLogDashboard extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "supervisor-app-log-tab": SupervisorAppLogDashboard;
+    "hassio-addon-log-tab": HassioAddonLogDashboard;
   }
 }

hassio/src/backups/hassio-backups.ts

@@ -0,0 +1,425 @@
+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-card-content.ts

@@ -2,11 +2,11 @@ import { mdiHelpCircle } from "@mdi/js";
 import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import "../../../../components/ha-svg-icon";
-import type { HomeAssistant } from "../../../../types";
+import "../../../src/components/ha-svg-icon";
+import type { HomeAssistant } from "../../../src/types";
 
-@customElement("supervisor-apps-card-content")
-class SupervisorAppsCardContent extends LitElement {
+@customElement("hassio-card-content")
+class HassioCardContent extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   // eslint-disable-next-line lit/no-native-attributes
@@ -70,9 +70,9 @@ class SupervisorAppsCardContent extends LitElement {
     }
 
     ha-svg-icon {
-      margin-right: var(--ha-space-6);
-      margin-left: var(--ha-space-2);
-      margin-top: var(--ha-space-3);
+      margin-right: 24px;
+      margin-left: 8px;
+      margin-top: 12px;
       float: left;
       color: var(--secondary-text-color);
     }
@@ -106,8 +106,8 @@ class SupervisorAppsCardContent extends LitElement {
     .icon_image img {
       max-height: 40px;
       max-width: 40px;
-      margin-top: var(--ha-space-1);
-      margin-right: var(--ha-space-4);
+      margin-top: 4px;
+      margin-right: 16px;
       float: left;
     }
     .icon_image.stopped,
@@ -119,8 +119,8 @@ class SupervisorAppsCardContent extends LitElement {
       background-color: var(--warning-color);
       width: 12px;
       height: 12px;
-      top: var(--ha-space-2);
-      right: var(--ha-space-2);
+      top: 8px;
+      right: 8px;
       border-radius: var(--ha-border-radius-circle);
     }
     .topbar {
@@ -146,6 +146,6 @@ class SupervisorAppsCardContent extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "supervisor-apps-card-content": SupervisorAppsCardContent;
+    "hassio-card-content": HassioCardContent;
   }
 }

hassio/src/components/hassio-filter-addons.ts

@@ -1,6 +1,6 @@
 import type { IFuseOptions } from "fuse.js";
 import Fuse from "fuse.js";
-import type { StoreAddon } from "../../../../data/supervisor/store";
+import type { StoreAddon } from "../../../src/data/supervisor/store";
 
 export function filterAndSort(addons: StoreAddon[], filter: string) {
   const options: IFuseOptions<StoreAddon> = {

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

@@ -0,0 +1,89 @@
+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

@@ -0,0 +1,460 @@
+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

@@ -0,0 +1,60 @@
+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/components/supervisor-metric.ts

@@ -2,12 +2,12 @@ import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
-import "../../../../../components/ha-bar";
-import "../../../../../components/ha-settings-row";
-import { roundWithOneDecimal } from "../../../../../util/calculate";
+import "../../../src/components/ha-bar";
+import "../../../src/components/ha-settings-row";
+import { roundWithOneDecimal } from "../../../src/util/calculate";
 
-@customElement("supervisor-app-metric")
-class SupervisorAppMetric extends LitElement {
+@customElement("supervisor-metric")
+class SupervisorMetric extends LitElement {
   @property({ type: Number }) public value!: number;
 
   @property({ type: String }) public description!: string;
@@ -70,6 +70,6 @@ class SupervisorAppMetric extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "supervisor-app-metric": SupervisorAppMetric;
+    "supervisor-metric": SupervisorMetric;
   }
 }

hassio/src/dashboard/hassio-addons.ts

@@ -0,0 +1,164 @@
+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

@@ -0,0 +1,150 @@
+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

@@ -0,0 +1,158 @@
+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

@@ -0,0 +1,155 @@
+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

@@ -0,0 +1,113 @@
+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

@@ -0,0 +1,339 @@
+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

@@ -0,0 +1,158 @@
+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

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,184 @@
+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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,199 @@
+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

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,70 @@
+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

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