Edge Sidepanel UI

One of my primary goals for my primary Home Assistant dashboard was to make it most usable and friendly as a sidepanel "app" in Microsoft Edge. Since I use it as my primary browser currently, I've been enjoying having quick access to these webapps including my Home Assistant instance. These are mobile-like webapps and since I use them most frequently from my home office, having some quick controls at my fingertips was necessary.

The first page is the controls for each room in my apartment, with the controls for lights embeded in each card, along with some quick automations and controls for the Google Home speakers in the rooms that have one. Additionally, along the top there are chips with some quick details like the weather and temperature, along with some frequently used automations. These chips appear on all three dashboard tabs.

When a speaker is playing music, an additional contextual card will appear above all the primary room cards on the main page to provide quick access instead of needing to drill into the specific room.

The second page provides more in-depth details about home related details along with finer control over the thermostat. This page serves primarily as a way for me to study the "beating heart" of my home to see how the weather has affected the livibility of my apartment along with my electrical and gas usage.

Finally, the last page is a simple two-card dashboard for controlling AdGuard. I am a big proponant of removing ads from my life whenever possible, and also eliminating tracking cookies. This page gives me a quick control over the main switch to turn off/on the DNS ad filter, as well as a way to see how many queries have been blocked.

Mobile