fix(mobile): scroll optimization (#8362)

close AF-1421, AF-1418, AF-1423, AF-1358

packages/frontend/component/src/hooks/use-theme-color-meta.ts

@@ -25,9 +25,13 @@ export const useThemeColorMeta = (color: string) => {
     const meta = getMeta();
     const old = meta.content;
     meta.content = color;
+    // also modify document background (for over scroll bounce effect)
+    const oldBg = document.documentElement.style.backgroundColor;
+    document.documentElement.style.backgroundColor = color;
 
     return () => {
       meta.content = old;
+      document.documentElement.style.backgroundColor = oldBg;
     };
   }, [color]);
 };

packages/frontend/component/src/ui/button/button.tsx

@@ -161,7 +161,9 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
           data-disabled={disabled || undefined}
           data-size={size}
           data-variant={variant}
-          data-no-hover={withoutHover || undefined}
+          data-no-hover={
+            withoutHover || BUILD_CONFIG.isMobileEdition || undefined
+          }
           data-mobile={BUILD_CONFIG.isMobileEdition}
           onClick={handleClick}
         >

packages/frontend/core/src/components/hooks/use-navigate-helper.ts

@@ -96,8 +96,8 @@ export function useNavigateHelper() {
   );
 
   const openPage = useCallback(
-    (workspaceId: string, pageId: string) => {
+    (workspaceId: string, pageId: string, logic?: RouteLogic) => {
-      return jumpToPage(workspaceId, pageId);
+      return jumpToPage(workspaceId, pageId, logic);
     },
     [jumpToPage]
   );

packages/frontend/core/src/desktop/pages/index.tsx

@@ -15,7 +15,10 @@ import {
 import { type LoaderFunction, useSearchParams } from 'react-router-dom';
 
 import { AppFallback } from '../../components/affine/app-container';
-import { useNavigateHelper } from '../../components/hooks/use-navigate-helper';
+import {
+  RouteLogic,
+  useNavigateHelper,
+} from '../../components/hooks/use-navigate-helper';
 import { WorkspaceNavigator } from '../../components/workspace-selector';
 import { AuthService } from '../../modules/cloud';
 import {
@@ -102,7 +105,7 @@ export const Component = ({
       const lastId = localStorage.getItem('last_workspace_id');
 
       const openWorkspace = list.find(w => w.id === lastId) ?? list[0];
-      openPage(openWorkspace.id, defaultIndexRoute);
+      openPage(openWorkspace.id, defaultIndexRoute, RouteLogic.REPLACE);
     }
   }, [
     createCloudWorkspace,

packages/frontend/core/src/mobile/components/page-header/index.tsx

@@ -65,41 +65,50 @@ export const PageHeader = forwardRef<HTMLDivElement, PageHeaderProps>(
     }, [backAction]);
 
     return (
-      <SafeArea
+      <>
-        top
+        <SafeArea
-        ref={ref}
+          top
-        className={clsx(styles.root, className)}
+          ref={ref}
-        data-testid="mobile-page-header"
+          className={clsx(styles.root, className)}
-        {...attrs}
+          data-testid="mobile-page-header"
-      >
+          {...attrs}
-        <header className={styles.inner}>
+        >
-          <section
+          <header className={styles.inner}>
-            className={clsx(styles.prefix, prefixClassName)}
+            <section
-            style={prefixStyle}
+              className={clsx(styles.prefix, prefixClassName)}
-          >
+              style={prefixStyle}
-            {back ? (
+            >
-              <IconButton
+              {back ? (
-                size={24}
+                <IconButton
-                style={{ padding: 10 }}
+                  size={24}
-                onClick={handleRouteBack}
+                  style={{ padding: 10 }}
-                icon={<ArrowLeftSmallIcon />}
+                  onClick={handleRouteBack}
-              />
+                  icon={<ArrowLeftSmallIcon />}
-            ) : null}
+                />
-            {prefix}
+              ) : null}
-          </section>
+              {prefix}
+            </section>
 
-          <section className={clsx(styles.content, { center: centerContent })}>
+            <section
-            {children}
+              className={clsx(styles.content, { center: centerContent })}
-          </section>
+            >
+              {children}
+            </section>
 
-          <section
+            <section
-            className={clsx(styles.suffix, suffixClassName)}
+              className={clsx(styles.suffix, suffixClassName)}
-            style={suffixStyle}
+              style={suffixStyle}
-          >
+            >
-            {suffix}
+              {suffix}
-          </section>
+            </section>
-        </header>
+          </header>
-      </SafeArea>
+        </SafeArea>
+
+        {/* Spacer */}
+        <SafeArea top>
+          <div className={styles.headerSpacer} />
+        </SafeArea>
+      </>
     );
   }
 );

packages/frontend/core/src/mobile/components/page-header/styles.css.ts

@@ -3,13 +3,16 @@ import { style } from '@vanilla-extract/css';
 
 export const root = style({
   width: '100%',
-  position: 'sticky',
+  position: 'fixed',
   top: 0,
   zIndex: 1,
   backgroundColor: cssVarV2('layer/background/secondary'),
 });
+export const headerSpacer = style({
+  height: 44,
+});
 export const inner = style({
-  minHeight: 44,
+  height: 44,
   padding: '0 6px',
   display: 'flex',
   alignItems: 'center',

packages/frontend/core/src/mobile/components/workspace-selector/menu.css.ts

@@ -3,7 +3,8 @@ import { cssVarV2 } from '@toeverything/theme/v2';
 import { style } from '@vanilla-extract/css';
 
 export const root = style({
-  maxHeight: 'calc(100dvh - 100px)',
+  maxHeight:
+    'calc(100dvh - 100px - env(safe-area-inset-bottom) - env(safe-area-inset-top))',
   display: 'flex',
   flexDirection: 'column',
 });

packages/frontend/core/src/mobile/components/workspace-selector/menu.tsx

@@ -116,7 +116,9 @@ export const SelectorMenu = ({ onClose }: { onClose?: () => void }) => {
           title="Cloud Sync"
           list={cloudWorkspaces}
         />
-        <div className={styles.divider} />
+        {cloudWorkspaces.length && localWorkspaces.length ? (
+          <div className={styles.divider} />
+        ) : null}
         <WorkspaceList
           onClose={onClose}
           title="Local Storage"

packages/frontend/core/src/mobile/pages/workspace/detail/mobile-detail-page.css.ts

@@ -11,7 +11,7 @@ export const root = style({
 
 export const header = style({
   background: cssVarV2('layer/background/primary'),
-  position: 'sticky',
+  position: 'fixed',
   top: 0,
   zIndex: 1,
 });

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

@@ -14,11 +14,13 @@ globalStyle(':root', {
 globalStyle('body', {
   height: 'auto',
   minHeight: '100dvh',
+  overflowY: 'unset',
 });
 globalStyle('body:has(#app-tabs)', {
   paddingBottom: globalVars.appTabHeight,
 });
 globalStyle('html', {
+  height: '100dvh',
   overflowY: 'auto',
   background: cssVarV2('layer/background/secondary'),
 });