fix(env): is mobile flag (#8005)

only 'mobile' entry has isMobile = true flag

packages/frontend/component/src/components/affine-other-page-layout/layout.tsx

@@ -20,7 +20,7 @@ export const AffineOtherPageLayout = ({
 
   return (
     <div className={styles.root}>
-      {environment.isDesktop ? null : (
+      {environment.isElectron ? null : (
         <div className={styles.topNav}>
           <a href="/" rel="noreferrer" className={styles.affineLogo}>
             <Logo1Icon width={24} height={24} />

packages/frontend/component/src/components/auth-components/onboarding-page.tsx

@@ -119,8 +119,8 @@ export const OnboardingPage = ({
     () => questions?.[questionIdx],
     [questionIdx, questions]
   );
-  const isMacosDesktop = environment.isDesktop && environment.isMacOs;
-  const isWindowsDesktop = environment.isDesktop && environment.isWindows;
+  const isMacosDesktop = environment.isElectron && environment.isMacOs;
+  const isWindowsDesktop = environment.isElectron && environment.isWindows;
 
   if (!questions) {
     return null;

packages/frontend/component/src/components/theme-provider/index.tsx

@@ -10,7 +10,7 @@ const DesktopThemeSync = memo(function DesktopThemeSync() {
   const lastThemeRef = useRef(theme);
   const onceRef = useRef(false);
   if (lastThemeRef.current !== theme || !onceRef.current) {
-    if (environment.isDesktop && theme) {
+    if (environment.isElectron && theme) {
       apis?.ui
         .handleThemeChange(theme as 'dark' | 'light' | 'system')
         .catch(err => {

packages/frontend/component/src/ui/menu/index.ts

@@ -1,5 +1,4 @@
 export * from './menu.types';
-import { isMobile } from '../../utils/env';
 import { DesktopMenuItem } from './desktop/item';
 import { DesktopMenu } from './desktop/root';
 import { DesktopMenuSeparator } from './desktop/separator';
@@ -10,10 +9,12 @@ import { MobileMenu } from './mobile/root';
 import { MobileMenuSeparator } from './mobile/separator';
 import { MobileMenuSub } from './mobile/sub';
 
-const MenuItem = isMobile() ? MobileMenuItem : DesktopMenuItem;
-const MenuSeparator = isMobile() ? MobileMenuSeparator : DesktopMenuSeparator;
-const MenuSub = isMobile() ? MobileMenuSub : DesktopMenuSub;
-const Menu = isMobile() ? MobileMenu : DesktopMenu;
+const MenuItem = environment.isMobileEdition ? MobileMenuItem : DesktopMenuItem;
+const MenuSeparator = environment.isMobileEdition
+  ? MobileMenuSeparator
+  : DesktopMenuSeparator;
+const MenuSub = environment.isMobileEdition ? MobileMenuSub : DesktopMenuSub;
+const Menu = environment.isMobileEdition ? MobileMenu : DesktopMenu;
 
 export {
   DesktopMenu,

packages/frontend/component/src/ui/menu/use-menu-item.tsx

@@ -1,7 +1,6 @@
 import { DoneIcon } from '@blocksuite/icons/rc';
 import clsx from 'clsx';
 
-import { isMobile } from '../../utils/env';
 import type { MenuItemProps } from './menu.types';
 import { mobileMenuItem } from './mobile/styles.css';
 import * as styles from './styles.css';
@@ -27,7 +26,7 @@ export const useMenuItem = <T extends MenuItemProps>({
       checked,
       selected,
       block,
-      [mobileMenuItem]: isMobile(),
+      [mobileMenuItem]: environment.isMobileEdition,
     },
     propsClassName
   );

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

@@ -12,7 +12,6 @@ import clsx from 'clsx';
 import type { CSSProperties, MouseEvent } from 'react';
 import { forwardRef, useCallback, useEffect, useState } from 'react';
 
-import { isMobile } from '../../utils/env';
 import type { IconButtonProps } from '../button';
 import { IconButton } from '../button';
 import * as styles from './styles.css';
@@ -151,9 +150,7 @@ export const ModalInner = forwardRef<HTMLDivElement, ModalProps>(
       children,
       contentWrapperClassName,
       contentWrapperStyle,
-      animation = environment.isBrowser && environment.isMobile
-        ? 'slideBottom'
-        : 'fadeScaleTop',
+      animation = environment.isMobileEdition ? 'slideBottom' : 'fadeScaleTop',
       fullScreen,
       ...otherProps
     } = props;
@@ -225,7 +222,7 @@ export const ModalInner = forwardRef<HTMLDivElement, ModalProps>(
               `anim-${animation}`,
               styles.modalOverlay,
               overlayClassName,
-              { mobile: isMobile() }
+              { mobile: environment.isMobileEdition }
             )}
             style={{
               ...overlayStyle,

packages/frontend/component/src/utils/env.ts

@@ -1,3 +0,0 @@
-export const isMobile = () => {
-  return environment.isBrowser && environment.isMobile;
-};