Add webui_ha_aware property to allow add-ons to control sidebar toggle

[Copilot]

Architecture issue home-assistant/architecture#1294

Plan: Add webui_ha_aware property for sidebar toggle support

• Add webui_ha_aware?: boolean; property to HassioAddonDetails interface in src/data/hassio/addon.ts
• Update hassio/src/ingress-view/hassio-ingress-view.ts to conditionally render header based on webui_ha_aware
• Add message listener to iframe to handle sidebar toggle from webui when webui_ha_aware is true
• Test the changes by running linters
• Move narrow and dockedSidebar checks into webui_ha_aware conditional per review feedback

Implementation Summary

Changes Made

1. Added webui_ha_aware property to HassioAddonDetails (src/data/hassio/addon.ts)

• Added optional boolean property webui_ha_aware?: boolean; to the interface

2. Updated Hassio Ingress View (hassio/src/ingress-view/hassio-ingress-view.ts)

• Added a message event listener that listens for {type: "toggle-sidebar"} messages from the iframe
• Consolidated conditional logic: when webui_ha_aware is true, OR narrow mode, OR sidebar is always hidden, only the iframe is displayed (no header)
• When none of these conditions are met, the header with menu toggle is shown
• The message listener calls _toggleMenu() when it receives the toggle-sidebar message

How It Works

When an add-on sets webui_ha_aware: true in its configuration:

1. The frontend will render only the iframe without the header/menu toggle
2. The add-on's web UI can control the sidebar by posting messages:

   window.parent.postMessage({ type: "toggle-sidebar" }, "*");

3. This allows add-ons to provide their own navigation that integrates with Home Assistant's sidebar

Testing

• Linted with ESLint, Prettier, and lit-analyzer - all passing (existing unrelated errors in gallery files)
• TypeScript type checking passes for the changes
• No existing tests for ingress view component, so no tests added per minimal modification guidelines

Original prompt

Add a new property to HassioAddonDetails in src/data/hassio/addon.ts to indicate that the add-on web UI is able to toggle the sidebar. Call it webui_ha_aware and make it a boolean.

When this is set to true, in hassio/src/ingress-view/hassio-ingress-view.ts inside the render() method, don't render the header but just the iframe. Then add a listener to the ifframe to allow it to call this._toggleMenu().

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[piitaya]

@balloob What's the status of the PR? Is it still valid?