feat: System Bars Plugin

[theproducer]

No description provided.

[pauldemarco]

This looks great, what more is needed before merge?

[pauldemarco]

I am noticing that currently, without this plugin, the safe area and the status bar are working great on iOS -- it even changes the status bar text depending on light or dark mode when I toggle dark on the root: document.documentElement.classList.toggle('dark')

I am noticing this PR includes some styling on the status bar. Is there any way to have Android act like the iOS and have it "just work"?

I also want to make sure this won't break what we have working fine on iOS.

[tafelnl]

I am noticing this PR includes some styling on the status bar. Is there any way to have Android act like the iOS and have it "just work"?

I also want to make sure this won't break what we have working fine on iOS.

I am not sure if you have a correct understanding of this "inject css variables" thing. It doesn't inject env css variables, as that isn't possible. It detects the safe area insets in a best effort and injects them as custom var css variables. That means that you will have to change code to make it work on both iOS and Android. That's exactly one of the reasons I'm advocating for a native approach

[tafelnl]

I'd like to add that as of November 1st (actually earlier, but Google granted an extension to developers that depend on older SDKs) no one will be able to publish a release to the play store if they're not supporting edge-to-edge. So I think this should be given the utmost priority by the Capacitor team

[pauldemarco]

I am noticing this PR includes some styling on the status bar. Is there any way to have Android act like the iOS and have it "just work"?
I also want to make sure this won't break what we have working fine on iOS.

I am not sure if you have a correct understanding of this "inject css variables" thing. It doesn't inject env css variables, as that isn't possible. It detects the safe area insets in a best effort and injects them as custom var css variables. That means that you will have to change code to make it work on both iOS and Android. That's exactly one of the reasons I'm advocating for a native approach

I just discovered all of this was only a problem with an Android Medium emulator. I just tried the Pixel 9 emulator and safe area is working great without any plugins.

[theproducer]

Hello everyone! Stay tuned, I'm on the verge of getting this past the finish line, The plan is to make some final changes and wrap this up this week.

[theproducer]

I am noticing this PR includes some styling on the status bar. Is there any way to have Android act like the iOS and have it "just work"?

By "just work", you're expecting just the default status bar, without the fullscreen / transparent status bar style, correct?

[tafelnl]

I'm curious which approach you've chosen to go with. I'm still advocating for going the native route. To demonstrate how that would work I made a simple demo proof of concept. Mind you that I've created this in like 5 minutes, so it's still not perfect, but you will get the main idea.

Demo: https://github.com/tafelnl/capacitor-demo
The magic happens in this file: https://github.com/tafelnl/capacitor-demo/blob/main/android/app/src/main/java/com/example/demo/EdgeToEdgePlugin.kt

I also commented some todos which I haven't done because it's a proof of concept.