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

only 'mobile' entry has isMobile = true flag

.eslintrc.js

@@ -34,8 +34,8 @@ const createPattern = packageName => [
   {
     group: ['@affine/env/constant'],
     message:
-      'Do not import from @affine/env/constant. Use `environment.isDesktop` instead',
+      'Do not import from @affine/env/constant. Use `environment.isElectron` instead',
-    importNames: ['isDesktop'],
+    importNames: ['isElectron'],
   },
 ];
 

packages/common/env/src/constant.ts

@@ -2,19 +2,16 @@
 import type { DocCollection } from '@blocksuite/store';
 
 declare global {
-  interface Window {
+  // eslint-disable-next-line no-var
-    __appInfo: {
+  var __appInfo: {
-      electron: boolean;
+    electron: boolean;
-      schema: string;
+    schema: string;
-      windowName: string;
+    windowName: string;
-    };
+  };
-  }
 }
 
 //#region runtime variables
-export const isBrowser = typeof window !== 'undefined';
+export const isElectron = !!globalThis.__appInfo?.electron;
-export const isServer = !isBrowser && typeof navigator === 'undefined';
-export const isDesktop = isBrowser && !!window.__appInfo?.electron;
 //#endregion
 export const DEFAULT_WORKSPACE_NAME = 'Demo Workspace';
 export const UNTITLED_WORKSPACE_NAME = 'Untitled';

packages/common/env/src/global.ts

@@ -2,7 +2,7 @@
 import { assertEquals } from '@blocksuite/global/utils';
 import { z } from 'zod';
 
-import { isDesktop, isServer } from './constant.js';
+import { isElectron } from './constant.js';
 import { UaHelper } from './ua-helper.js';
 
 export const runtimeFlagsSchema = z.object({
@@ -10,6 +10,7 @@ export const runtimeFlagsSchema = z.object({
   serverUrlPrefix: z.string(),
   appVersion: z.string(),
   editorVersion: z.string(),
+  distribution: z.enum(['browser', 'desktop', 'admin', 'mobile']),
   appBuildType: z.union([
     z.literal('stable'),
     z.literal('beta'),
@@ -35,18 +36,19 @@ export const runtimeFlagsSchema = z.object({
 
 export type RuntimeConfig = z.infer<typeof runtimeFlagsSchema>;
 
-type BrowserBase = {
+export type Environment = {
-  /**
-   * @example https://app.affine.pro
-   * @example http://localhost:3000
-   */
-  origin: string;
-  isDesktop: boolean;
-  isBrowser: true;
-  isServer: false;
   isDebug: boolean;
 
-  // browser special properties
+  // Edition
+  isDesktopEdition: boolean;
+  isMobileEdition: boolean;
+
+  // Platform/Entry
+  isElectron: boolean;
+  isDesktopWeb: boolean;
+  isMobileWeb: boolean;
+
+  // Device
   isLinux: boolean;
   isMacOs: boolean;
   isIOS: boolean;
@@ -55,37 +57,9 @@ type BrowserBase = {
   isFireFox: boolean;
   isMobile: boolean;
   isChrome: boolean;
+  chromeVersion?: number;
 };
 
-type NonChromeBrowser = BrowserBase & {
-  isChrome: false;
-};
-
-type ChromeBrowser = BrowserBase & {
-  isSafari: false;
-  isFireFox: false;
-  isChrome: true;
-  chromeVersion: number;
-};
-
-type Browser = NonChromeBrowser | ChromeBrowser;
-
-type Server = {
-  isDesktop: false;
-  isBrowser: false;
-  isServer: true;
-  isDebug: boolean;
-};
-
-interface Desktop extends ChromeBrowser {
-  isDesktop: true;
-  isBrowser: true;
-  isServer: false;
-  isDebug: boolean;
-}
-
-export type Environment = Browser | Server | Desktop;
-
 function setupRuntimeConfig() {
   if (!process.env.RUNTIME_CONFIG) {
     return;
@@ -106,31 +80,43 @@ export function setupGlobal() {
 
   let environment: Environment;
   const isDebug = process.env.NODE_ENV === 'development';
-  if (isServer) {
+
+  if (!globalThis.navigator) {
     environment = {
-      isDesktop: false,
+      isDesktopEdition: false,
-      isBrowser: false,
+      isMobileEdition: false,
-      isServer: true,
+      isElectron: false,
+      isDesktopWeb: false,
+      isMobileWeb: false,
+      isMobile: false,
       isDebug,
-    } satisfies Server;
+      isLinux: false,
+      isMacOs: false,
+      isSafari: false,
+      isWindows: false,
+      isFireFox: false,
+      isChrome: false,
+      isIOS: false,
+    };
   } else {
-    const uaHelper = new UaHelper(navigator);
+    const uaHelper = new UaHelper(globalThis.navigator);
 
     environment = {
-      origin: window.location.origin,
+      isDesktopEdition: runtimeConfig.distribution !== 'mobile',
-      isDesktop,
+      isMobileEdition: runtimeConfig.distribution === 'mobile',
-      isBrowser: true,
+      isDesktopWeb: runtimeConfig.distribution === 'browser',
-      isServer: false,
+      isMobileWeb: runtimeConfig.distribution === 'mobile',
+      isElectron,
       isDebug,
+      isMobile: uaHelper.isMobile,
       isLinux: uaHelper.isLinux,
       isMacOs: uaHelper.isMacOs,
       isSafari: uaHelper.isSafari,
       isWindows: uaHelper.isWindows,
       isFireFox: uaHelper.isFireFox,
-      isMobile: uaHelper.isMobile,
       isChrome: uaHelper.isChrome,
       isIOS: uaHelper.isIOS,
-    } as Browser;
+    };
     // Chrome on iOS is still Safari
     if (environment.isChrome && !environment.isIOS) {
       assertEquals(environment.isSafari, false);
@@ -141,9 +127,10 @@ export function setupGlobal() {
         isFireFox: false,
         isChrome: true,
         chromeVersion: uaHelper.getChromeVersion(),
-      } satisfies ChromeBrowser;
+      };
     }
   }
+
   globalThis.environment = environment;
 
   globalThis.$AFFINE_SETUP = true;

packages/common/infra/src/atom/settings.ts

@@ -44,7 +44,7 @@ export const dateFormatOptions: DateFormats[] = [
 ];
 
 const appSettingBaseAtom = atomWithStorage<AppSetting>('affine-settings', {
-  clientBorder: environment.isDesktop && !environment.isWindows,
+  clientBorder: environment.isElectron && !environment.isWindows,
   windowFrameStyle: 'frameless',
   dateFormat: dateFormatOptions[0],
   startWeekOnMonday: false,
@@ -61,7 +61,7 @@ type SetStateAction<Value> = Value | ((prev: Value) => Value);
 const appSettingEffect = atomEffect(get => {
   const settings = get(appSettingBaseAtom);
   // some values in settings should be synced into electron side
-  if (environment.isDesktop) {
+  if (environment.isElectron) {
     logger.debug('sync settings to electron', settings);
     // this api type in @affine/electron-api, but it is circular dependency this package, use any here
     (window as any).apis?.updater

packages/common/infra/src/modules/feature-flag/constant.ts

@@ -1,7 +1,7 @@
 import type { FlagInfo } from './types';
 
 const isNotStableBuild = runtimeConfig.appBuildType !== 'stable';
-const isDesktopEnvironment = environment.isDesktop;
+const isDesktopEnvironment = environment.isElectron;
 const isCanaryBuild = runtimeConfig.appBuildType === 'canary';
 
 export const AFFINE_FLAGS = {

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 isMacosDesktop = environment.isElectron && environment.isMacOs;
-  const isWindowsDesktop = environment.isDesktop && environment.isWindows;
+  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 MenuItem = environment.isMobileEdition ? MobileMenuItem : DesktopMenuItem;
-const MenuSeparator = isMobile() ? MobileMenuSeparator : DesktopMenuSeparator;
+const MenuSeparator = environment.isMobileEdition
-const MenuSub = isMobile() ? MobileMenuSub : DesktopMenuSub;
+  ? MobileMenuSeparator
-const Menu = isMobile() ? MobileMenu : DesktopMenu;
+  : 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
+      animation = environment.isMobileEdition ? 'slideBottom' : 'fadeScaleTop',
-        ? '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;
-};

packages/frontend/core/src/commands/affine-creation.tsx

@@ -23,7 +23,7 @@ export function registerAffineCreationCommands({
       category: 'affine:creation',
       label: t['com.affine.cmdk.affine.new-page'](),
       icon: <PlusIcon />,
-      keyBinding: environment.isDesktop
+      keyBinding: environment.isElectron
         ? {
             binding: '$mod+N',
             skipRegister: true,
@@ -73,7 +73,7 @@ export function registerAffineCreationCommands({
       icon: <ImportIcon />,
       label: t['com.affine.cmdk.affine.import-workspace'](),
       preconditionStrategy: () => {
-        return environment.isDesktop;
+        return environment.isElectron;
       },
       run() {
         track.$.cmdk.workspace.createWorkspace({

packages/frontend/core/src/commands/affine-settings.tsx

@@ -183,7 +183,7 @@ export function registerAffineSettingsCommands({
         `,
       category: 'affine:settings',
       icon: <SettingsIcon />,
-      preconditionStrategy: () => environment.isDesktop,
+      preconditionStrategy: () => environment.isElectron,
       run() {
         track.$.cmdk.settings.changeAppSetting({
           key: 'clientBorder',
@@ -231,7 +231,7 @@ export function registerAffineSettingsCommands({
         ]()}`,
       category: 'affine:settings',
       icon: <SettingsIcon />,
-      preconditionStrategy: () => environment.isDesktop,
+      preconditionStrategy: () => environment.isElectron,
       run() {
         track.$.cmdk.settings.changeAppSetting({
           key: 'enableNoisyBackground',
@@ -257,7 +257,7 @@ export function registerAffineSettingsCommands({
         ]()}`,
       category: 'affine:settings',
       icon: <SettingsIcon />,
-      preconditionStrategy: () => environment.isDesktop && environment.isMacOs,
+      preconditionStrategy: () => environment.isElectron && environment.isMacOs,
       run() {
         track.$.cmdk.settings.changeAppSetting({
           key: 'enableBlurBackground',

packages/frontend/core/src/components/affine/app-container.tsx

@@ -16,7 +16,7 @@ export const AppContainer = (props: WorkspaceRootProps) => {
       useNoisyBackground={appSettings.enableNoisyBackground}
       useBlurBackground={
         appSettings.enableBlurBackground &&
-        environment.isDesktop &&
+        environment.isElectron &&
         environment.isMacOs
       }
       {...props}

packages/frontend/core/src/components/affine/auth/oauth.tsx

@@ -57,7 +57,7 @@ function OAuthProvider({ provider }: { provider: OAuthProviderType }) {
     try {
       setIsConnecting(true);
       const url = await authService.oauthPreflight(provider);
-      if (environment.isDesktop) {
+      if (environment.isElectron) {
         await apis?.ui.openExternal(url);
       } else {
         popupWindow(url);

packages/frontend/core/src/components/affine/auth/send-email.tsx

@@ -122,7 +122,7 @@ const useSendEmail = (emailType: AuthPanelProps<'sendEmail'>['emailType']) => {
         return trigger({
           email,
           callbackUrl: `/auth/${callbackUrl}?isClient=${
-            environment.isDesktop ? 'true' : 'false'
+            environment.isElectron ? 'true' : 'false'
           }`,
         });
       },

packages/frontend/core/src/components/affine/auth/use-captcha.tsx

@@ -14,7 +14,7 @@ type Challenge = {
 };
 
 const challengeFetcher = async (url: string) => {
-  if (!environment.isDesktop) {
+  if (!environment.isElectron) {
     return undefined;
   }
 
@@ -31,7 +31,7 @@ const challengeFetcher = async (url: string) => {
 };
 
 const generateChallengeResponse = async (challenge: string) => {
-  if (!environment.isDesktop) {
+  if (!environment.isElectron) {
     return undefined;
   }
 
@@ -56,7 +56,7 @@ export const Captcha = () => {
     return null;
   }
 
-  if (environment.isDesktop) {
+  if (environment.isElectron) {
     if (response) {
       return <div className={style.captchaWrapper}>Making Challenge</div>;
     } else {
@@ -87,7 +87,7 @@ export const useCaptcha = (): [string | undefined, string?] => {
   useEffect(() => {
     if (
       hasCaptchaFeature &&
-      environment.isDesktop &&
+      environment.isElectron &&
       challenge?.challenge &&
       prevChallenge.current !== challenge.challenge
     ) {
@@ -104,7 +104,7 @@ export const useCaptcha = (): [string | undefined, string?] => {
     return ['XXXX.DUMMY.TOKEN.XXXX'];
   }
 
-  if (environment.isDesktop) {
+  if (environment.isElectron) {
     if (response) {
       return [response, challenge?.challenge];
     } else {

packages/frontend/core/src/components/affine/onboarding/onboarding.tsx

@@ -43,7 +43,7 @@ export const Onboarding = ({ onOpenApp }: OnboardingProps) => {
   return (
     <div
       className={styles.onboarding}
-      data-is-desktop={environment.isDesktop}
+      data-is-desktop={environment.isElectron}
       data-is-window={!!status.activeId || !!status.unfoldingId}
     >
       <div className={styles.offsetOrigin}>

packages/frontend/core/src/components/affine/setting-modal/general-setting/about/index.tsx

@@ -72,7 +72,7 @@ export const AboutAffine = () => {
           name={t['com.affine.aboutAFFiNE.version.editor.title']()}
           desc={runtimeConfig.editorVersion}
         />
-        {environment.isDesktop ? (
+        {environment.isElectron ? (
           <>
             <UpdateCheckSection />
             <SettingRow

packages/frontend/core/src/components/affine/setting-modal/general-setting/appearance/index.tsx

@@ -85,7 +85,7 @@ export const AppearanceSettings = () => {
             <LanguageMenu />
           </div>
         </SettingRow>
-        {environment.isDesktop ? (
+        {environment.isElectron ? (
           <SettingRow
             name={t['com.affine.appearanceSettings.clientBorder.title']()}
             desc={t['com.affine.appearanceSettings.clientBorder.description']()}
@@ -97,7 +97,7 @@ export const AppearanceSettings = () => {
             />
           </SettingRow>
         ) : null}
-        {runtimeConfig.enableNewSettingUnstableApi && environment.isDesktop ? (
+        {runtimeConfig.enableNewSettingUnstableApi && environment.isElectron ? (
           <SettingRow
             name={t['com.affine.appearanceSettings.windowFrame.title']()}
             desc={t['com.affine.appearanceSettings.windowFrame.description']()}
@@ -141,7 +141,7 @@ export const AppearanceSettings = () => {
         </SettingWrapper>
       ) : null}
 
-      {environment.isDesktop ? (
+      {environment.isElectron ? (
         <SettingWrapper
           title={t['com.affine.appearanceSettings.sidebar.title']()}
         >

packages/frontend/core/src/components/affine/setting-modal/general-setting/appearance/theme-editor-setting.tsx

@@ -13,7 +13,7 @@ export const ThemeEditorSetting = () => {
   const modified = useLiveData(themeEditor.modified$);
 
   const open = useCallback(() => {
-    if (environment.isDesktop) {
+    if (environment.isElectron) {
       apis?.ui.openThemeEditor().catch(console.error);
     } else {
       popupWindow('/theme-editor');

packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/general.tsx

@@ -85,7 +85,7 @@ const FontFamilySettings = () => {
 
   const radioItems = useMemo(() => {
     const items = getBaseFontStyleOptions(t);
-    if (!environment.isDesktop) return items;
+    if (!environment.isElectron) return items;
 
     // resolve custom fonts
     const customOption = fontStyleOptions.find(opt => opt.key === 'Custom');
@@ -274,7 +274,7 @@ const CustomFontFamilySettings = () => {
     },
     [editorSettingService.editorSetting]
   );
-  if (settings.fontFamily !== 'Custom' || !environment.isDesktop) {
+  if (settings.fontFamily !== 'Custom' || !environment.isElectron) {
     return null;
   }
   return (

packages/frontend/core/src/components/affine/setting-modal/workspace-setting/new-workspace-setting-detail/index.tsx

@@ -67,7 +67,7 @@ export const WorkspaceSettingDetail = ({
         <EnableCloudPanel />
         <MembersPanel />
       </SettingWrapper>
-      {environment.isDesktop && (
+      {environment.isElectron && (
         <SettingWrapper title={t['Storage and Export']()}>
           <ExportPanel
             workspace={workspace}

packages/frontend/core/src/components/affine/share-page-modal/share-menu/share-page.tsx

@@ -151,7 +151,7 @@ export const AFFiNESharePage = (props: ShareMenuProps) => {
     }
   }, [shareInfoService, t]);
 
-  const isMac = environment.isBrowser && environment.isMacOs;
+  const isMac = environment.isMacOs;
 
   const { onClickCopyLink } = useSharingUrl({
     workspaceId,

packages/frontend/core/src/components/affine/subscription-landing/notify.tsx

@@ -49,7 +49,7 @@ const SubscriptionChangedNotifyFooter = ({
   );
 };
 
-const isDesktop = environment.isDesktop;
+const isDesktop = environment.isElectron;
 export const useUpgradeNotify = () => {
   const t = useI18n();
   const prevNotifyIdRef = useRef<string | number | null>(null);

packages/frontend/core/src/components/app-sidebar/index.jotai.ts

@@ -2,7 +2,7 @@ import { atom } from 'jotai';
 import { atomWithStorage } from 'jotai/utils';
 
 export const APP_SIDEBAR_OPEN = 'app-sidebar-open';
-export const isMobile = window.innerWidth < 768 && !environment.isDesktop;
+export const isMobile = window.innerWidth < 768 && !environment.isElectron;
 
 export const appSidebarOpenAtom = atomWithStorage(APP_SIDEBAR_OPEN, !isMobile);
 export const appSidebarFloatingAtom = atom(isMobile);

packages/frontend/core/src/components/app-sidebar/index.tsx

@@ -49,7 +49,7 @@ export function AppSidebar({
 
   useEffect(() => {
     // do not float app sidebar on desktop
-    if (environment.isDesktop) {
+    if (environment.isElectron) {
       return;
     }
 
@@ -79,8 +79,8 @@ export function AppSidebar({
     };
   }, [open, setFloating, setOpen, width]);
 
-  const hasRightBorder = !environment.isDesktop && !clientBorder;
+  const hasRightBorder = !environment.isElectron && !clientBorder;
-  const isMacosDesktop = environment.isDesktop && environment.isMacOs;
+  const isMacosDesktop = environment.isElectron && environment.isMacOs;
   return (
     <>
       <ResizePanel
@@ -105,7 +105,7 @@ export function AppSidebar({
         data-client-border={clientBorder}
       >
         <nav className={navStyle} data-testid="app-sidebar">
-          {!environment.isDesktop && <SidebarHeader />}
+          {!environment.isElectron && <SidebarHeader />}
           <div className={navBodyStyle} data-testid="sliderBar-inner">
             {children}
           </div>

packages/frontend/core/src/components/app-sidebar/quick-search-input/index.tsx

@@ -13,7 +13,7 @@ interface QuickSearchInputProps extends HTMLAttributes<HTMLDivElement> {
 // Although it is called an input, it is actually a button.
 export function QuickSearchInput({ onClick, ...props }: QuickSearchInputProps) {
   const t = useI18n();
-  const isMac = environment.isBrowser && environment.isMacOs;
+  const isMac = environment.isMacOs;
 
   return (
     <div

packages/frontend/core/src/components/blocksuite/block-suite-header/menu/index.tsx

@@ -206,7 +206,7 @@ export const PageHeaderMenuButton = ({
     setEditing(!isEditing);
   }, [isEditing, page.id, page.readonly, setDocReadonly]);
 
-  const isMobile = environment.isBrowser && environment.isMobile;
+  const isMobile = environment.isMobileEdition;
   const mobileEditMenuItem = (
     <MenuItem
       prefixIcon={isEditing ? <SaveIcon /> : <EditIcon />}
@@ -293,7 +293,7 @@ export const PageHeaderMenuButton = ({
         {t['com.affine.workbench.tab.page-menu-open']()}
       </MenuItem>
 
-      {environment.isDesktop && (
+      {environment.isElectron && (
         <MenuItem
           prefixIcon={<SplitViewIcon />}
           data-testid="editor-option-menu-open-in-split-new"

packages/frontend/core/src/components/page-list/operation-cell.tsx

@@ -182,7 +182,7 @@ export const PageOperationCell = ({
         {t['com.affine.workbench.tab.page-menu-open']()}
       </MenuItem>
 
-      {environment.isDesktop && enableSplitView ? (
+      {environment.isElectron && enableSplitView ? (
         <MenuItem onClick={onOpenInSplitView} prefixIcon={<SplitViewIcon />}>
           {t['com.affine.workbench.split-view.page-menu-open']()}
         </MenuItem>

packages/frontend/core/src/components/page-list/view/collection-operations.tsx

@@ -156,7 +156,7 @@ export const CollectionOperations = ({
         name: t['com.affine.workbench.tab.page-menu-open'](),
         click: openCollectionNewTab,
       },
-      ...(enableMultiView && environment.isDesktop
+      ...(enableMultiView && environment.isElectron
         ? [
             {
               icon: <SplitViewIcon />,

packages/frontend/core/src/components/pure/help-island/index.tsx

@@ -29,7 +29,7 @@ const DEFAULT_SHOW_LIST: IslandItemNames[] = [
 const DESKTOP_SHOW_LIST: IslandItemNames[] = [...DEFAULT_SHOW_LIST];
 type IslandItemNames = 'whatNew' | 'contact' | 'shortcuts';
 
-const showList = environment.isDesktop ? DESKTOP_SHOW_LIST : DEFAULT_SHOW_LIST;
+const showList = environment.isElectron ? DESKTOP_SHOW_LIST : DEFAULT_SHOW_LIST;
 
 export const HelpIsland = () => {
   const { globalContextService } = useServices({

packages/frontend/core/src/components/root-app-sidebar/index.tsx

@@ -112,7 +112,7 @@ export const RootAppSidebar = (): ReactElement => {
   );
 
   useEffect(() => {
-    if (environment.isDesktop) {
+    if (environment.isElectron) {
       return events?.applicationMenu.onNewPageAction(() => {
         apis?.ui
           .isActiveTab()
@@ -206,7 +206,7 @@ export const RootAppSidebar = (): ReactElement => {
         </div>
       </SidebarScrollableContainer>
       <SidebarContainer>
-        {environment.isDesktop ? <UpdaterButton /> : <AppDownloadButton />}
+        {environment.isElectron ? <UpdaterButton /> : <AppDownloadButton />}
       </SidebarContainer>
     </AppSidebar>
   );

packages/frontend/core/src/components/top-tip.tsx

@@ -12,19 +12,15 @@ import { AuthService } from '../modules/cloud';
 const minimumChromeVersion = 106;
 
 const shouldShowWarning = (() => {
-  if (environment.isDesktop) {
+  if (environment.isElectron) {
     // even though desktop has compatibility issues,
     //  we don't want to show the warning
     return false;
   }
-  if (!environment.isBrowser) {
-    // disable in SSR
-    return false;
-  }
   if (environment.isMobile) {
     return true;
   }
-  if (environment.isChrome) {
+  if (environment.isChrome && environment.chromeVersion) {
     return environment.chromeVersion < minimumChromeVersion;
   }
   return false;
@@ -32,14 +28,14 @@ const shouldShowWarning = (() => {
 
 const OSWarningMessage = () => {
   const t = useI18n();
-  const notChrome = environment.isBrowser && !environment.isChrome;
+  const notChrome = !environment.isChrome;
   const notGoodVersion =
-    environment.isBrowser &&
     environment.isChrome &&
+    environment.chromeVersion &&
     environment.chromeVersion < minimumChromeVersion;
 
   // TODO(@L-Sun): remove this message when mobile version is able to edit.
-  if ('isMobile' in environment && environment.isMobile) {
+  if (environment.isMobile) {
     return <span>{t['com.affine.top-tip.mobile']()}</span>;
   }
 
@@ -80,7 +76,7 @@ export const TopTip = ({
 
   if (
     showLocalDemoTips &&
-    !environment.isDesktop &&
+    !environment.isElectron &&
     workspace.flavour === WorkspaceFlavour.LOCAL
   ) {
     return (

packages/frontend/core/src/components/workspace-selector/user-with-workspace-list/add-workspace/index.tsx

@@ -15,7 +15,7 @@ export const AddWorkspace = ({
 
   return (
     <div>
-      {environment.isDesktop ? (
+      {environment.isElectron ? (
         <MenuItem
           block={true}
           prefixIcon={<ImportIcon />}

packages/frontend/core/src/components/workspace-selector/workspace-card/index.tsx

@@ -60,7 +60,7 @@ const UnSyncWorkspaceStatus = () => {
 const LocalWorkspaceStatus = () => {
   return (
     <>
-      {!environment.isDesktop ? (
+      {!environment.isElectron ? (
         <InformationFillDuotoneIcon style={{ color: cssVar('errorColor') }} />
       ) : (
         <LocalWorkspaceIcon />
@@ -98,7 +98,7 @@ const useSyncEngineSyncProgress = (meta: WorkspaceMetadata) => {
   let content;
   // TODO(@eyhn): add i18n
   if (workspace.flavour === WorkspaceFlavour.LOCAL) {
-    if (!environment.isDesktop) {
+    if (!environment.isElectron) {
       content = 'This is a local demo workspace.';
     } else {
       content = 'Saved locally';

packages/frontend/core/src/components/workspace/index.tsx

@@ -26,8 +26,8 @@ export const AppContainer = ({
   children,
   ...rest
 }: WorkspaceRootProps) => {
-  const noisyBackground = useNoisyBackground && environment.isDesktop;
+  const noisyBackground = useNoisyBackground && environment.isElectron;
-  const blurBackground = environment.isDesktop && useBlurBackground;
+  const blurBackground = environment.isElectron && useBlurBackground;
   return (
     <div
       {...rest}
@@ -57,7 +57,7 @@ export const MainContainer = forwardRef<
     <div
       {...props}
       className={clsx(mainContainerStyle, className)}
-      data-is-desktop={environment.isDesktop}
+      data-is-desktop={environment.isElectron}
       data-transparent={false}
       data-client-border={appSettings.clientBorder}
       data-side-bar-open={appSideBarOpen}

packages/frontend/core/src/hooks/affine/use-register-find-in-page-commands.ts

@@ -18,7 +18,7 @@ export function useRegisterFindInPageCommands() {
   }, [findInPage]);
 
   useEffect(() => {
-    if (!environment.isDesktop) {
+    if (!environment.isElectron) {
       return;
     }
     const unsubs: Array<() => void> = [];

packages/frontend/core/src/hooks/affine/use-shortcuts.ts

@@ -284,7 +284,7 @@ export const useMarkdownShortcuts = (): ShortcutsInfo => {
 
   const macMarkdownShortcuts = useMacMarkdownShortcuts();
   const winMarkdownShortcuts = useWinMarkdownShortcuts();
-  const isMac = environment.isBrowser && environment.isMacOs;
+  const isMac = environment.isMacOs;
   return {
     title: t['com.affine.shortcutsTitle.markdownSyntax'](),
     shortcuts: isMac ? macMarkdownShortcuts : winMarkdownShortcuts,
@@ -296,7 +296,7 @@ export const usePageShortcuts = (): ShortcutsInfo => {
 
   const macPageShortcuts = useMacPageKeyboardShortcuts();
   const winPageShortcuts = useWinPageKeyboardShortcuts();
-  const isMac = environment.isBrowser && environment.isMacOs;
+  const isMac = environment.isMacOs;
   return {
     title: t['com.affine.shortcutsTitle.page'](),
     shortcuts: isMac ? macPageShortcuts : winPageShortcuts,
@@ -308,7 +308,7 @@ export const useEdgelessShortcuts = (): ShortcutsInfo => {
 
   const macEdgelessShortcuts = useMacEdgelessKeyboardShortcuts();
   const winEdgelessShortcuts = useWinEdgelessKeyboardShortcuts();
-  const isMac = environment.isBrowser && environment.isMacOs;
+  const isMac = environment.isMacOs;
   return {
     title: t['com.affine.shortcutsTitle.edgeless'](),
     shortcuts: isMac ? macEdgelessShortcuts : winEdgelessShortcuts,
@@ -320,7 +320,7 @@ export const useGeneralShortcuts = (): ShortcutsInfo => {
 
   const macGeneralShortcuts = useMacGeneralKeyboardShortcuts();
   const winGeneralShortcuts = useWinGeneralKeyboardShortcuts();
-  const isMac = environment.isBrowser && environment.isMacOs;
+  const isMac = environment.isMacOs;
   return {
     title: t['com.affine.shortcutsTitle.general'](),
     shortcuts: isMac ? macGeneralShortcuts : winGeneralShortcuts,

packages/frontend/core/src/hooks/use-app-config-storage.ts

@@ -35,7 +35,7 @@ export const appConfigProxy = new AppConfigProxy();
 
 setupGlobal();
 
-const storage = environment.isDesktop
+const storage = environment.isElectron
   ? new AppConfigStorage({
       config: defaultAppConfig,
       get: () => appConfigProxy.get(),

packages/frontend/core/src/hooks/use-app-updater.ts

@@ -1,6 +1,5 @@
 import type { UpdateMeta } from '@affine/electron-api';
 import { apis, events } from '@affine/electron-api';
-import { isBrowser } from '@affine/env/constant';
 import { appSettingAtom } from '@toeverything/infra';
 import { atom, useAtom, useAtomValue } from 'jotai';
 import { atomWithObservable, atomWithStorage } from 'jotai/utils';
@@ -30,7 +29,7 @@ function rpcToObservable<
   return new Observable<T | null>(subscriber => {
     subscriber.next(initialValue);
     onSubscribe?.();
-    if (!isBrowser || !environment.isDesktop || !event) {
+    if (!environment.isElectron || !event) {
       subscriber.complete();
       return;
     }
@@ -76,18 +75,12 @@ export const changelogCheckedAtom = atomWithStorage<Record<string, boolean>>(
 export const checkingForUpdatesAtom = atom(false);
 
 export const currentVersionAtom = atom(async () => {
-  if (!isBrowser) {
-    return null;
-  }
   const currentVersion = await apis?.updater.currentVersion();
   return currentVersion;
 });
 
 const currentChangelogUnreadAtom = atom(
   async get => {
-    if (!isBrowser) {
-      return false;
-    }
     const mapping = get(changelogCheckedAtom);
     const currentVersion = await get(currentVersionAtom);
     if (currentVersion) {

packages/frontend/core/src/hooks/use-global-state.ts

@@ -3,7 +3,7 @@ import { useEffect } from 'react';
 
 export function useDocumentTitle(newTitle?: string | null) {
   useEffect(() => {
-    if (environment.isDesktop || !newTitle) {
+    if (environment.isElectron || !newTitle) {
       return noop;
     }
 

packages/frontend/core/src/layouts/workspace-layout.tsx

@@ -223,7 +223,9 @@ const WorkspaceLayoutUIContainer = ({ children }: PropsWithChildren) => {
   );
 
   const resizing = useAtomValue(appSidebarResizingAtom);
-  const LayoutComponent = environment.isDesktop ? DesktopLayout : BrowserLayout;
+  const LayoutComponent = environment.isElectron
+    ? DesktopLayout
+    : BrowserLayout;
 
   return (
     <AppContainer data-current-path={currentPath} resizing={resizing}>

packages/frontend/core/src/mixpanel/mixpanel.ts

@@ -36,7 +36,7 @@ function createMixpanel() {
         environment: runtimeConfig.appBuildType,
         editorVersion: runtimeConfig.editorVersion,
         isSelfHosted: Boolean(runtimeConfig.isSelfHosted),
-        isDesktop: environment.isDesktop,
+        isDesktop: environment.isElectron,
       });
     },
     reset() {

packages/frontend/core/src/modules/app-tabs-header/views/app-tabs-header.tsx

@@ -304,7 +304,7 @@ export const AppTabsHeader = ({
   const sidebarWidth = useAtomValue(appSidebarWidthAtom);
   const sidebarOpen = useAtomValue(appSidebarOpenAtom);
   const sidebarResizing = useAtomValue(appSidebarResizingAtom);
-  const isMacosDesktop = environment.isDesktop && environment.isMacOs;
+  const isMacosDesktop = environment.isElectron && environment.isMacOs;
   const fullScreen = useIsFullScreen();
 
   const tabsHeaderService = useService(AppTabsHeaderService);
@@ -413,7 +413,7 @@ export const AppTabsHeader = ({
       className={clsx(styles.root, className)}
       style={style}
       data-mode={mode}
-      data-is-windows={environment.isDesktop && environment.isWindows}
+      data-is-windows={environment.isElectron && environment.isWindows}
     >
       <div
         style={{
@@ -474,7 +474,7 @@ export const AppTabsHeader = ({
       <IconButton size="24" onClick={onToggleRightSidebar}>
         <RightSidebarIcon />
       </IconButton>
-      {environment.isDesktop && environment.isWindows ? (
+      {environment.isElectron && environment.isWindows ? (
         <WindowsAppControls />
       ) : null}
     </div>

packages/frontend/core/src/modules/cloud/services/auth.ts

@@ -88,7 +88,7 @@ export class AuthService extends Service {
         email,
         // we call it [callbackUrl] instead of [redirect_uri]
         // to make it clear the url is used to finish the sign-in process instead of redirect after signed-in
-        callbackUrl: `/magic-link?client=${environment.isDesktop ? appInfo?.schema : 'web'}`,
+        callbackUrl: `/magic-link?client=${environment.isElectron ? appInfo?.schema : 'web'}`,
       }),
       headers: {
         'content-type': 'application/json',
@@ -131,7 +131,7 @@ export class AuthService extends Service {
       'state',
       JSON.stringify({
         state: oauthUrl.searchParams.get('state'),
-        client: environment.isDesktop ? appInfo?.schema : 'web',
+        client: environment.isElectron ? appInfo?.schema : 'web',
       })
     );
     url = oauthUrl.toString();

packages/frontend/core/src/modules/cloud/services/fetch.ts

@@ -5,7 +5,7 @@ import { fromPromise, Service } from '@toeverything/infra';
 import { BackendError, NetworkError } from '../error';
 
 export function getAffineCloudBaseUrl(): string {
-  if (environment.isDesktop) {
+  if (environment.isElectron) {
     return runtimeConfig.serverUrlPrefix;
   }
   const { protocol, hostname, port } = window.location;

packages/frontend/core/src/modules/cloud/stores/subscription.ts

@@ -28,7 +28,7 @@ const getDefaultSubscriptionSuccessCallbackLink = (
     plan === SubscriptionPlan.AI ? '/ai-upgrade-success' : '/upgrade-success';
   const urlString = getAffineCloudBaseUrl() + path;
   const url = new URL(urlString);
-  if (environment.isDesktop && appInfo) {
+  if (environment.isElectron && appInfo) {
     url.searchParams.set('schema', appInfo.schema);
   }
   return url.toString();

packages/frontend/core/src/modules/explorer/views/nodes/collection/operations.tsx

@@ -183,7 +183,7 @@ export const useExplorerCollectionNodeOperations = (
           </MenuItem>
         ),
       },
-      ...(environment.isDesktop && enableMultiView
+      ...(environment.isElectron && enableMultiView
         ? [
             {
               index: 99,

packages/frontend/core/src/modules/explorer/views/nodes/doc/operations.tsx

@@ -181,7 +181,7 @@ export const useExplorerDocNodeOperations = (
           </MenuItem>
         ),
       },
-      ...(enableMultiView && environment.isDesktop
+      ...(enableMultiView && environment.isElectron
         ? [
             {
               index: 100,

packages/frontend/core/src/modules/explorer/views/nodes/tag/operations.tsx

@@ -119,7 +119,7 @@ export const useExplorerTagNodeOperations = (
           </MenuItem>
         ),
       },
-      ...(enableMultiView && environment.isDesktop
+      ...(enableMultiView && environment.isElectron
         ? [
             {
               index: 100,

packages/frontend/core/src/modules/navigation/entities/navigator.ts

@@ -40,7 +40,7 @@ export class Navigator extends Entity {
   );
 
   back() {
-    if (!environment.isDesktop) {
+    if (!environment.isElectron) {
       window.history.back();
     } else {
       this.history$.value.back();
@@ -48,7 +48,7 @@ export class Navigator extends Entity {
   }
 
   forward() {
-    if (!environment.isDesktop) {
+    if (!environment.isElectron) {
       window.history.forward();
     } else {
       this.history$.value.forward();

packages/frontend/core/src/modules/navigation/view/navigation-buttons.tsx

@@ -44,7 +44,7 @@ export const NavigationButtons = () => {
     };
   }, [navigator]);
 
-  if (!environment.isDesktop) {
+  if (!environment.isElectron) {
     return null;
   }
 

packages/frontend/core/src/modules/peek-view/view/peek-view-controls.tsx

@@ -125,7 +125,7 @@ export const DocPeekViewControls = ({
           peekView.close('none');
         },
       },
-      environment.isDesktop && {
+      environment.isElectron && {
         icon: <SplitViewIcon />,
         nameKey: 'split-view',
         name: t['com.affine.peek-view-controls.open-doc-in-split-view'](),

packages/frontend/core/src/modules/quicksearch/views/cmdk.tsx

@@ -283,7 +283,7 @@ export const CMDKGroup = ({
 };
 
 const CMDKKeyBinding = ({ keyBinding }: { keyBinding: string }) => {
-  const isMacOS = environment.isBrowser && environment.isMacOs;
+  const isMacOS = environment.isMacOs;
   const fragments = useMemo(() => {
     return keyBinding.split('+').map(fragment => {
       if (fragment === '$mod') {

packages/frontend/core/src/modules/workbench/services/desktop-state-synchronizer.ts

@@ -13,7 +13,7 @@ export class DesktopStateSynchronizer extends Service {
   }
 
   startSync = () => {
-    if (!environment.isDesktop) {
+    if (!environment.isElectron) {
       return;
     }
 

packages/frontend/core/src/modules/workbench/view/route-container.tsx

@@ -54,7 +54,7 @@ export const RouteContainer = () => {
   return (
     <div className={styles.root}>
       <div className={styles.header}>
-        {viewPosition.isFirst && !environment.isDesktop && (
+        {viewPosition.isFirst && !environment.isElectron && (
           <SidebarSwitch
             show={!leftSidebarOpen}
             className={styles.leftSidebarButton}
@@ -64,7 +64,7 @@ export const RouteContainer = () => {
           viewId={view.id}
           className={styles.viewHeaderContainer}
         />
-        {viewPosition.isLast && !environment.isDesktop && (
+        {viewPosition.isLast && !environment.isElectron && (
           <ToggleButton
             show={!sidebarOpen}
             className={styles.rightSidebarButton}

packages/frontend/core/src/modules/workbench/view/sidebar/sidebar-container.tsx

@@ -38,7 +38,7 @@ export const SidebarContainer = ({
             viewId={view.id}
             className={clsx(
               styles.sidebarBodyTarget,
-              !environment.isDesktop && styles.borderTop
+              !environment.isElectron && styles.borderTop
             )}
           />
         ))

packages/frontend/core/src/modules/workbench/view/sidebar/sidebar-header.tsx

@@ -44,7 +44,7 @@ export const Header = ({ floating, children, onToggle }: HeaderProps) => {
   return (
     <Container className={styles.header} floating={floating}>
       {children}
-      {!environment.isDesktop && (
+      {!environment.isElectron && (
         <>
           <div className={styles.spacer} />
           <ToggleButton onToggle={onToggle} />

packages/frontend/core/src/modules/workbench/view/workbench-link.tsx

@@ -40,7 +40,7 @@ export const WorkbenchLink = forwardRef<HTMLAnchorElement, WorkbenchLinkProps>(
         }
         const at = (() => {
           if (isNewTabTrigger(event)) {
-            return event.altKey && enableMultiView && environment.isDesktop
+            return event.altKey && enableMultiView && environment.isElectron
               ? 'tail'
               : 'new-tab';
           }

packages/frontend/core/src/modules/workbench/view/workbench-root.tsx

@@ -22,7 +22,7 @@ import { ViewIslandRegistryProvider } from './view-islands';
 import { ViewRoot } from './view-root';
 import * as styles from './workbench-root.css';
 
-const useAdapter = environment.isDesktop
+const useAdapter = environment.isElectron
   ? useBindWorkbenchToDesktopRouter
   : useBindWorkbenchToBrowserRouter;
 

packages/frontend/core/src/modules/workspace-engine/impls/local.ts

@@ -47,7 +47,7 @@ export class LocalWorkspaceFlavourProvider
       JSON.stringify(allWorkspaceIDs.filter(x => x !== id))
     );
 
-    if (apis && environment.isDesktop) {
+    if (apis && environment.isElectron) {
       await apis.workspace.delete(id);
     }
 

packages/frontend/core/src/pages/auth/sign-in.tsx

@@ -20,7 +20,7 @@ export const SignIn = () => {
   const isLoggedIn = status === 'authenticated' && !isRevalidating;
 
   useEffect(() => {
-    if (environment.isDesktop && appInfo?.windowName === 'hidden-window') {
+    if (environment.isElectron && appInfo?.windowName === 'hidden-window') {
       return;
     }
 

packages/frontend/core/src/pages/onboarding.tsx

@@ -11,7 +11,7 @@ import {
 import { RouteLogic, useNavigateHelper } from '../hooks/use-navigate-helper';
 
 export const loader = () => {
-  if (!environment.isDesktop && !appConfigStorage.get('onBoarding')) {
+  if (!environment.isElectron && !appConfigStorage.get('onBoarding')) {
     // onboarding is off, redirect to index
     return redirect('/');
   }
@@ -24,7 +24,7 @@ export const Component = () => {
   const [, setOnboarding] = useAppConfigStorage('onBoarding');
 
   const openApp = useCallback(() => {
-    if (environment.isDesktop) {
+    if (environment.isElectron) {
       assertExists(apis);
       apis.ui.handleOpenMainApp().catch(err => {
         console.log('failed to open main app', err);

packages/frontend/core/src/pages/workspace/detail-page/detail-page.tsx

@@ -258,7 +258,7 @@ const DetailPageImpl = memo(function DetailPageImpl() {
   );
 
   const [refCallback, hasScrollTop] = useHasScrollTop();
-  const dynamicTopBorder = environment.isDesktop;
+  const dynamicTopBorder = environment.isElectron;
 
   const openOutlinePanel = useCallback(() => {
     workbench.openSidebar();

packages/frontend/core/src/pages/workspace/detail-page/use-header-responsive.ts

@@ -23,7 +23,7 @@ export const useDetailPageHeaderResponsive = (availableWidth: number) => {
     viewPosition.isLast &&
     !rightSidebarOpen &&
     !(hidePresent && hideShare) &&
-    !environment.isDesktop;
+    !environment.isElectron;
 
   return {
     hideShare,

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

@@ -99,7 +99,7 @@ export const Component = (): ReactElement => {
   if (workspaceNotFound) {
     if (
       detailDocRoute /*  */ &&
-      !environment.isDesktop /* only browser has share page */
+      !environment.isElectron /* only browser has share page */
     ) {
       return (
         <SharePage

packages/frontend/core/src/pages/workspace/page-list-empty.tsx

@@ -26,7 +26,7 @@ export const EmptyPageList = ({
           icon={<PlusIcon />}
         />
       );
-      if (environment.isDesktop) {
+      if (environment.isElectron) {
         const shortcut = environment.isMacOs ? '⌘ + N' : 'Ctrl + N';
         return (
           <Trans i18nKey="emptyAllPagesClient">

packages/frontend/core/src/providers/modal-provider.tsx

@@ -63,7 +63,7 @@ export const Setting = () => {
   );
 
   useEffect(() => {
-    if (environment.isDesktop) {
+    if (environment.isElectron) {
       return events?.applicationMenu.openAboutPageInSettingModal(() =>
         setOpenSettingModalAtom({
           activeTab: 'about',
@@ -123,7 +123,7 @@ export function CurrentWorkspaceModals() {
       )}
       <AiLoginRequiredModal />
       <PeekViewManagerModal />
-      {environment.isDesktop && <FindInPageModal />}
+      {environment.isElectron && <FindInPageModal />}
       <MoveToTrash.ConfirmModal
         open={trashConfirmOpen}
         onConfirm={handleOnConfirm}

packages/frontend/core/src/utils/create-emotion-cache.ts

@@ -1,15 +1,10 @@
-import { isBrowser } from '@affine/env/constant';
 import createCache from '@emotion/cache';
 
 export default function createEmotionCache() {
-  let insertionPoint;
+  const emotionInsertionPoint = document.querySelector<HTMLMetaElement>(
-
+    'meta[name="emotion-insertion-point"]'
-  if (isBrowser) {
+  );
-    const emotionInsertionPoint = document.querySelector<HTMLMetaElement>(
+  const insertionPoint = emotionInsertionPoint ?? undefined;
-      'meta[name="emotion-insertion-point"]'
-    );
-    insertionPoint = emotionInsertionPoint ?? undefined;
-  }
 
   return createCache({ key: 'affine', insertionPoint });
 }

packages/frontend/electron/renderer/app.tsx

@@ -42,7 +42,7 @@ const desktopWhiteList = [
   '/magic-link',
 ];
 if (
-  !environment.isDesktop &&
+  !environment.isElectron &&
   environment.isDebug &&
   desktopWhiteList.every(path => !location.pathname.startsWith(path))
 ) {

packages/frontend/electron/renderer/shell/shell.tsx

@@ -6,7 +6,7 @@ import * as styles from './shell.css';
 export function ShellRoot() {
   const { appSettings } = useAppSettingHelper();
   const translucent =
-    environment.isDesktop &&
+    environment.isElectron &&
     environment.isMacOs &&
     appSettings.enableBlurBackground;
   return (

packages/frontend/graphql/src/index.ts

@@ -10,7 +10,7 @@ import { gqlFetcherFactory } from './fetcher';
 setupGlobal();
 
 export function getBaseUrl(): string {
-  if (environment.isDesktop) {
+  if (environment.isElectron) {
     return runtimeConfig.serverUrlPrefix;
   }
   if (typeof window === 'undefined') {

packages/frontend/mobile/src/app.tsx

@@ -29,7 +29,7 @@ import { RouterProvider } from 'react-router-dom';
 import { configureMobileModules } from './modules';
 import { router } from './router';
 
-if (!environment.isBrowser && environment.isDebug) {
+if (environment.isElectron && environment.isDebug) {
   document.body.innerHTML = `<h1 style="color:red;font-size:5rem;text-align:center;">Don't run web entry in electron.</h1>`;
   throw new Error('Wrong distribution');
 }

packages/frontend/web/src/app.tsx

@@ -31,7 +31,7 @@ import type { PropsWithChildren, ReactElement } from 'react';
 import { lazy, Suspense } from 'react';
 import { RouterProvider } from 'react-router-dom';
 
-if (!environment.isBrowser && environment.isDebug) {
+if (environment.isElectron && environment.isDebug) {
   document.body.innerHTML = `<h1 style="color:red;font-size:5rem;text-align:center;">Don't run web entry in electron.</h1>`;
   throw new Error('Wrong distribution');
 }

packages/frontend/web/src/index.tsx

@@ -6,7 +6,6 @@ import '@affine/core/bootstrap/preload';
 
 import { performanceLogger } from '@affine/core/shared';
 import { appInfo } from '@affine/electron-api';
-import { isDesktop } from '@affine/env/constant';
 import {
   init,
   reactRouterV6BrowserTracingIntegration,
@@ -28,7 +27,7 @@ function main() {
   performanceMainLogger.info('start');
 
   // skip bootstrap setup for desktop onboarding
-  if (isDesktop && appInfo?.windowName === 'onboarding') {
+  if (environment.isElectron && appInfo?.windowName === 'onboarding') {
     performanceMainLogger.info('skip setup');
   } else {
     performanceMainLogger.info('setup start');

tools/cli/src/webpack/runtime-config.ts

@@ -7,6 +7,7 @@ export function getRuntimeConfig(buildFlags: BuildFlags): RuntimeConfig {
   const buildPreset: Record<BuildFlags['channel'], RuntimeConfig> = {
     get stable() {
       return {
+        distribution: buildFlags.distribution,
         appBuildType: 'stable' as const,
         serverUrlPrefix: 'https://app.affine.pro',
         appVersion: packageJson.version,