fix(android): edge to edge compatibility for capacitor7 (#10191)

packages/frontend/apps/android/App/app/capacitor.build.gradle

@@ -12,6 +12,7 @@ dependencies {
     implementation project(':capacitor-app')
     implementation project(':capacitor-keyboard')
     implementation project(':capacitor-status-bar')
+    implementation project(':capawesome-capacitor-android-edge-to-edge-support')
     implementation project(':capgo-inappbrowser')
 
 }

packages/frontend/apps/android/App/app/src/main/java/app/affine/pro/MainActivity.kt

@@ -3,26 +3,24 @@ package app.affine.pro
 import android.os.Build
 import android.os.Bundle
 import androidx.annotation.RequiresApi
-import com.capacitorjs.plugins.keyboard.KeyboardPlugin
-import com.capacitorjs.plugins.statusbar.StatusBarPlugin
 import com.getcapacitor.BridgeActivity
 import com.getcapacitor.plugin.CapacitorCookies
 import com.getcapacitor.plugin.CapacitorHttp
-import ee.forgr.capacitor_inappbrowser.InAppBrowserPlugin
 
 
 class MainActivity : BridgeActivity() {
-    @RequiresApi(Build.VERSION_CODES.R)
+
-    override fun onCreate(savedInstanceState: Bundle?) {
+    init {
-        super.onCreate(savedInstanceState)
         registerPlugins(
             listOf(
                 CapacitorHttp::class.java,
                 CapacitorCookies::class.java,
-                InAppBrowserPlugin::class.java,
-                KeyboardPlugin::class.java,
-                StatusBarPlugin::class.java,
             )
         )
     }
+
+    @RequiresApi(Build.VERSION_CODES.R)
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+    }
 }

packages/frontend/apps/android/App/capacitor.settings.gradle

@@ -11,5 +11,8 @@ project(':capacitor-keyboard').projectDir = new File('../../../../../node_module
 include ':capacitor-status-bar'
 project(':capacitor-status-bar').projectDir = new File('../../../../../node_modules/@capacitor/status-bar/android')
 
+include ':capawesome-capacitor-android-edge-to-edge-support'
+project(':capawesome-capacitor-android-edge-to-edge-support').projectDir = new File('../../../../../node_modules/@capawesome/capacitor-android-edge-to-edge-support/android')
+
 include ':capgo-inappbrowser'
 project(':capgo-inappbrowser').projectDir = new File('../../../../../node_modules/@capgo/inappbrowser/android')

packages/frontend/apps/android/package.json

@@ -19,6 +19,7 @@
     "@capacitor/core": "^7.0.0",
     "@capacitor/keyboard": "^7.0.0",
     "@capacitor/status-bar": "^7.0.0",
+    "@capawesome/capacitor-android-edge-to-edge-support": "^7.0.0",
     "@capgo/inappbrowser": "^7.1.0",
     "@sentry/react": "^8.44.0",
     "@toeverything/infra": "workspace:*",

packages/frontend/apps/android/src/app.tsx

@@ -19,6 +19,7 @@ import { StoreManagerClient } from '@affine/nbstore/worker/client';
 import { App as CapacitorApp } from '@capacitor/app';
 import { Keyboard } from '@capacitor/keyboard';
 import { StatusBar, Style } from '@capacitor/status-bar';
+import { EdgeToEdge } from '@capawesome/capacitor-android-edge-to-edge-support';
 import { InAppBrowser } from '@capgo/inappbrowser';
 import { Framework, FrameworkRoot, getCurrentStore } from '@toeverything/infra';
 import { OpClient } from '@toeverything/infra/op';
@@ -129,7 +130,7 @@ CapacitorApp.addListener('appUrlOpen', ({ url }) => {
   console.error(e);
 });
 
-const StatusBarProvider = () => {
+const EdgeToEdgeCompatibilityProvider = () => {
   const { resolvedTheme } = useTheme();
 
   useEffect(() => {
@@ -140,9 +141,10 @@ const StatusBarProvider = () => {
           : resolvedTheme === 'light'
             ? Style.Light
             : Style.Default,
-    }).catch(e => {
+    }).catch(console.error);
-      console.error(`Failed to set status bar style: ${e}`);
+    EdgeToEdge.setBackgroundColor({
-    });
+      color: resolvedTheme === 'dark' ? '#000000' : '#F5F5F5',
+    }).catch(console.error);
   }, [resolvedTheme]);
 
   return null;
@@ -154,7 +156,7 @@ export function App() {
       <FrameworkRoot framework={frameworkProvider}>
         <I18nProvider>
           <AffineContext store={getCurrentStore()}>
-            <StatusBarProvider />
+            <EdgeToEdgeCompatibilityProvider />
             <RouterProvider
               fallbackElement={<AppFallback />}
               router={router}

yarn.lock

@@ -232,6 +232,7 @@ __metadata:
     "@capacitor/core": "npm:^7.0.0"
     "@capacitor/keyboard": "npm:^7.0.0"
     "@capacitor/status-bar": "npm:^7.0.0"
+    "@capawesome/capacitor-android-edge-to-edge-support": "npm:^7.0.0"
     "@capgo/inappbrowser": "npm:^7.1.0"
     "@sentry/react": "npm:^8.44.0"
     "@toeverything/infra": "workspace:*"
@@ -4289,6 +4290,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@capawesome/capacitor-android-edge-to-edge-support@npm:^7.0.0":
+  version: 7.0.0
+  resolution: "@capawesome/capacitor-android-edge-to-edge-support@npm:7.0.0"
+  peerDependencies:
+    "@capacitor/core": ">=7.0.0"
+  checksum: 10/52bd41ac71dc4b0939ff5d0454b048bc2f62938cfd22216f22cc10328f3b0107418bf9dd76e9aa6b6ee3ff1b8cabe8c49ec440ad66a28f7a5fadfd037597d17d
+  languageName: node
+  linkType: hard
+
 "@capgo/inappbrowser@npm:^7.1.0":
   version: 7.1.6
   resolution: "@capgo/inappbrowser@npm:7.1.6"