fix(editor): incorrect position of toolbar in android (#12614)

### Before
Extra padding between toolbaar and keyboard
![CleanShot 2025-05-28 at 18 56 02](https://github.com/user-attachments/assets/9c865f7c-3acf-41b6-9436-d8d2d4c89c83)

### After
![CleanShot 2025-05-28 at 18 55 19](https://github.com/user-attachments/assets/0a4aeb01-32af-4420-b204-feca3981641b)

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

- **Bug Fixes**
  - Improved accuracy of keyboard height calculations by properly accounting for the navigation bar height on Android devices.

- **Refactor**
  - Standardized naming conventions for navigation bar height methods and unit conversion utilities to enhance consistency across the app.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

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

@@ -19,7 +19,8 @@ import app.affine.pro.plugin.NbStorePlugin
 import app.affine.pro.service.GraphQLService
 import app.affine.pro.service.SSEService
 import app.affine.pro.service.WebService
-import app.affine.pro.utils.dp
+import app.affine.pro.utils.px2dp
+import app.affine.pro.utils.dp2px
 import com.getcapacitor.BridgeActivity
 import com.google.android.material.floatingactionbutton.FloatingActionButton
 import dagger.hilt.android.AndroidEntryPoint
@@ -55,11 +56,11 @@ class MainActivity : BridgeActivity(), AIButtonPlugin.Callback, AffineThemePlugi
     private val fab: FloatingActionButton by lazy {
         FloatingActionButton(this).apply {
             visibility = View.GONE
-            layoutParams = CoordinatorLayout.LayoutParams(dp(52), dp(52)).apply {
+            layoutParams = CoordinatorLayout.LayoutParams(dp2px(52), dp2px(52)).apply {
                 gravity = Gravity.END or Gravity.BOTTOM
-                updateMargins(0, 0, dp(24), dp(86))
+                updateMargins(0, 0, dp2px(24), dp2px(86))
             }
-            customSize = dp(52)
+            customSize = dp2px(52)
             setImageResource(R.drawable.ic_ai)
             setOnClickListener(this@MainActivity)
             val parent = bridge.webView.parent as CoordinatorLayout
@@ -67,12 +68,12 @@ class MainActivity : BridgeActivity(), AIButtonPlugin.Callback, AffineThemePlugi
         }
     }
 
-    private var naviHeight = 0
+    private var navHeight = 0
 
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         ViewCompat.setOnApplyWindowInsetsListener(window.decorView) { v, insets ->
-            naviHeight = insets.getInsets(WindowInsetsCompat.Type.navigationBars()).bottom
+            navHeight = px2dp(insets.getInsets(WindowInsetsCompat.Type.navigationBars()).bottom)
             ViewCompat.onApplyWindowInsets(v, insets)
         }
     }
@@ -109,8 +110,8 @@ class MainActivity : BridgeActivity(), AIButtonPlugin.Callback, AffineThemePlugi
         }
     }
 
-    override fun getSystemNaviBarHeight(): Int {
+    override fun getSystemNavBarHeight(): Int {
-        return naviHeight
+        return navHeight
     }
 
     override fun onClick(v: View) {

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

@@ -12,7 +12,7 @@ class AffineThemePlugin : Plugin() {
 
     interface Callback {
         fun onThemeChanged(darkMode: Boolean)
-        fun getSystemNaviBarHeight(): Int
+        fun getSystemNavBarHeight(): Int
     }
 
     @PluginMethod
@@ -24,8 +24,8 @@ class AffineThemePlugin : Plugin() {
     }
 
     @PluginMethod
-    fun getSystemNaviBarHeight(call: PluginCall) {
+    fun getSystemNavBarHeight(call: PluginCall) {
-        val height = (bridge.activity as? Callback)?.getSystemNaviBarHeight() ?: 0
+        val height = (bridge.activity as? Callback)?.getSystemNavBarHeight() ?: 0
         call.resolve(JSObject().put("height", height))
     }
 }

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

@@ -3,8 +3,12 @@ package app.affine.pro.utils
 import android.content.Context
 import android.util.TypedValue
 
-fun Context.dp(dp: Int) = TypedValue.applyDimension(
+fun Context.dp2px(dp: Int) = TypedValue.applyDimension(
     TypedValue.COMPLEX_UNIT_DIP,
     dp.toFloat(),
     resources.displayMetrics
-).toInt()
+).toInt()
+
+fun Context.px2dp(px: Int): Int {
+    return (px / resources.displayMetrics.density).toInt()
+}

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

@@ -116,10 +116,14 @@ framework.impl(VirtualKeyboardProvider, {
 
     Promise.all([
       Keyboard.addListener('keyboardWillShow', info => {
-        callback({
+        (async () => {
-          visible: true,
+          const navBarHeight = (await AffineTheme.getSystemNavBarHeight())
-          height: info.keyboardHeight,
+            .height;
-        });
+          callback({
+            visible: true,
+            height: info.keyboardHeight - navBarHeight,
+          });
+        })().catch(console.error);
       }),
       Keyboard.addListener('keyboardWillHide', () => {
         callback({

packages/frontend/apps/android/src/plugins/affine-theme/definitions.ts

@@ -1,4 +1,4 @@
 export interface AffineThemePlugin {
   onThemeChanged(options: { darkMode: boolean }): Promise<void>;
-  getSystemNaviBarHeight(): Promise<{ height: number }>;
+  getSystemNavBarHeight(): Promise<{ height: number }>;
 }