Feature suggestion: add window controls overlay

[OrenShalev]

If unfamiliar, this is what lets PWAs customize the window's top bar, which by default shows only static page title and favicon besides the OS controls. If unfamiliar with this feature, here's a good article on web.dev.

IMHO, it would be great to mention and demo it. Key aspects, if you ask me:

• Desktop only.
• It's just HTML, CSS and JS. Conjure whatever styles and behavior you want.
• It's part of the page, the rest of the page and this interact as usual.

I went over closed issues and ran a few searches, it seems like this was not brought up before but sorry if I missed it.

Thanks for building this PWA! 🙌

[DannyMoerkerke]

I'm familiar with this feature but haven't come up with a nice demo idea yet. But I guess it's about time to add a demo for this too.

[OrenShalev]

What I see often, both in demos and in real apps, is a search bar. Simple and narrow to fit the space, and interactive.

It also fits well at the top of a web page, so you can show how it's in window controls when possible, otherwise at the top of the "normal" page. You could throw in a toggle to control it. Functionally it of course doesn't have to work, enough to show a message "You searched X" to demo functionality.

A simpler example might be the "back" button you have in the app bar: it could be in the window controls, and then you might save space by removing the app bar.