chore(ios): rename keyboard css var (#11595)

packages/frontend/core/src/mobile/modules/virtual-keyboard/services/virtual-keyboard.ts

@@ -1,6 +1,5 @@
 import { LiveData, Service } from '@toeverything/infra';
 import { setElementVars } from '@vanilla-extract/dynamic';
-import { distinctUntilChanged, scan } from 'rxjs';
 
 import { globalVars } from '../../../styles/variables.css';
 import type { VirtualKeyboardProvider } from '../providers/virtual-keyboard';
@@ -9,6 +8,8 @@ export class VirtualKeyboardService extends Service {
   readonly visible$ = new LiveData(false);
   readonly height$ = new LiveData(0);
 
+  staticHeight = 0;
+
   constructor(
     private readonly virtualKeyboardProvider: VirtualKeyboardProvider
   ) {
@@ -21,22 +22,18 @@ export class VirtualKeyboardService extends Service {
       this.virtualKeyboardProvider.onChange(info => {
         this.visible$.next(info.visible);
         this.height$.next(info.height);
+
+        setElementVars(document.body, {
+          [globalVars.appKeyboardHeight]: `${this.height$.value}px`,
+        });
+
+        if (info.visible && this.staticHeight !== info.height) {
+          this.staticHeight = info.height;
+          setElementVars(document.body, {
+            [globalVars.appKeyboardStaticHeight]: `${this.staticHeight}px`,
+          });
+        }
       })
     );
-
-    // record the static keyboard height to css var
-    const subscription = this.height$
-      .pipe(
-        scan((lastHeight, currentHeight) =>
-          this.visible$.value ? currentHeight : lastHeight
-        ),
-        distinctUntilChanged()
-      )
-      .subscribe(height => {
-        setElementVars(document.body, {
-          [globalVars.appKeyboardHeight]: `${height}px`,
-        });
-      });
-    this.disposables.push(() => subscription.unsubscribe());
   }
 }

packages/frontend/core/src/mobile/styles/mobile.css.ts

@@ -21,7 +21,7 @@ globalStyle('body:has(>#app-tabs):not(:has(affine-keyboard-toolbar))', {
   paddingBottom: globalVars.appTabSafeArea,
 });
 globalStyle('body:has(affine-keyboard-toolbar)', {
-  paddingBottom: `calc(${globalVars.appKeyboardHeight} + 46px)`,
+  paddingBottom: `calc(${globalVars.appKeyboardStaticHeight} + 46px)`,
 });
 globalStyle('body:has(>#app-tabs) affine-keyboard-tool-panel', {
   paddingBottom: `calc(${globalVars.appTabSafeArea} + 8px)`,

packages/frontend/core/src/mobile/styles/variables.css.ts

@@ -1,7 +1,15 @@
 import { createVar } from '@vanilla-extract/css';
 
 export const globalVars = {
+  /**
+   * The height of the keyboard, it will update when the keyboard is open or closed
+   */
   appKeyboardHeight: createVar('appKeyboardHeight'),
+  /**
+   * The height of the keyboard, it will not update when the keyboard is open or closed
+   * for dynamic height, use appKeyboardHeight instead
+   */
+  appKeyboardStaticHeight: createVar('appKeyboardStaticHeight'),
   appTabHeight: createVar('appTabHeight'),
   appTabSafeArea: createVar('appTabSafeArea'),
 };