Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

Conversation

Copilot
Copy link
Contributor

@Copilot Copilot AI commented Oct 13, 2025

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.

…ar toggle support

Co-authored-by: balloob <1444314+balloob@users.noreply.github.com>
@Copilot Copilot AI changed the title [WIP] Add webui_ha_aware property to HassioAddonDetails Add webui_ha_aware property to allow add-ons to control sidebar toggle Oct 13, 2025
Copilot finished work on behalf of balloob October 13, 2025 13:29
@Copilot Copilot AI requested a review from balloob October 13, 2025 13:29
hassio/src/ingress-view/hassio-ingress-view.ts Outdated Show resolved Hide resolved
Co-authored-by: balloob <1444314+balloob@users.noreply.github.com>
@Copilot Copilot AI requested a review from balloob October 13, 2025 14:23
Copilot finished work on behalf of balloob October 13, 2025 14:23
@github-actions github-actions bot added the Supervisor Related to the supervisor panel label Oct 16, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Supervisor Related to the supervisor panel

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

Morty Proxy This is a proxified and sanitized view of the page, visit original site.