Investigate more native-feeling header bar/toolbar/window controls

[cassidyjames]

Right now I just bold a full-size header bar on top of the window. This makes it look GNOME-y at a glance, but I don't love having the stacked toolbars and ideally could combine them... somehow.

Constraints:

• Has to work trivially with different versions of Home Assistant/lovelace plugins (I can't test every version and realistically keep up with any DOM changes across versions and plugins)
• Should still look/feel at home on GNOME (that's my primary target)
• I'm using WebKitGTK and am not interested in using something else (it would just end be a different app at that point)

[cassidyjames]

Maybe I can (optionally) add an overlaid headerbar or something, if that would work? Like a transparent widget you could drag on and that would include the window controls, using injected CSS to move the in-page UI out of the way if needed.

Note, -webkit-app-region: drag is not supported in WebKitGTK afaict.

[properlypurple]

One more thing you can add, is a 'sidebar collapse' icon in the headerbar, to collapse/expand the HA sidebar. (Something similar to libadwaita apps like Tuba etc in the top-left corner)

[cassidyjames]

@properlypurple I'm not sure that will be reliably triggerable from the native side, as the sidebar is entirely within the web view provided by the Home Assistant server. I could try to inject some JavaScript or something, but it seems error-prone…