refactor: migrate environment to BUILD_CONFIG (#8206)

.eslintrc.js

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

packages/common/env/src/constant.ts

@@ -10,9 +10,6 @@ declare global {
   };
 }
 
-//#region runtime variables
-export const isElectron = !!globalThis.__appInfo?.electron;
-//#endregion
 export const DEFAULT_WORKSPACE_NAME = 'Demo Workspace';
 export const UNTITLED_WORKSPACE_NAME = 'Untitled';
 

packages/common/env/src/global.ts

@@ -1,51 +1,47 @@
 /// <reference types="@blocksuite/global" />
-import { assertEquals } from '@blocksuite/global/utils';
-import { z } from 'zod';
 
-import { isElectron } from './constant.js';
 import { UaHelper } from './ua-helper.js';
 
-export const BUILD_CONFIG_SCHEMA = z.object({
+export type BUILD_CONFIG_TYPE = {
-  // this is for the electron app
+  debug: boolean;
-  serverUrlPrefix: z.string(),
+  distribution: 'web' | 'desktop' | 'admin' | 'mobile';
-  appVersion: z.string(),
+  /**
-  editorVersion: z.string(),
+   * 'web' | 'desktop' | 'admin'
-  distribution: z.enum(['web', 'desktop', 'admin', 'mobile']),
+   */
-  appBuildType: z.union([
-    z.literal('stable'),
-    z.literal('beta'),
-    z.literal('internal'),
-    z.literal('canary'),
-  ]),
-  isSelfHosted: z.boolean().optional(),
-  githubUrl: z.string(),
-  changelogUrl: z.string(),
-  downloadUrl: z.string(),
-  // see: tools/workers
-  imageProxyUrl: z.string(),
-  linkPreviewUrl: z.string(),
-  allowLocalWorkspace: z.boolean(),
-  enablePreloading: z.boolean(),
-  enableNewSettingUnstableApi: z.boolean(),
-  enableExperimentalFeature: z.boolean(),
-  enableThemeEditor: z.boolean(),
-});
-
-export type BUILD_CONFIG_TYPE = z.infer<typeof BUILD_CONFIG_SCHEMA>;
-
-export type Environment = {
-  isDebug: boolean;
-
-  // Edition
   isDesktopEdition: boolean;
+  /**
+   * 'mobile'
+   */
   isMobileEdition: boolean;
 
-  // Platform/Entry
   isElectron: boolean;
-  isDesktopWeb: boolean;
+  isWeb: boolean;
   isMobileWeb: boolean;
-  isStandalone?: boolean;
 
+  // this is for the electron app
+  serverUrlPrefix: string;
+  appVersion: string;
+  editorVersion: string;
+  appBuildType: 'stable' | 'beta' | 'internal' | 'canary';
+
+  githubUrl: string;
+  changelogUrl: string;
+  downloadUrl: string;
+  // see: tools/workers
+  imageProxyUrl: string;
+  linkPreviewUrl: string;
+
+  allowLocalWorkspace: boolean;
+  enablePreloading: boolean;
+  enableNewSettingUnstableApi: boolean;
+  enableExperimentalFeature: boolean;
+  enableThemeEditor: boolean;
+
+  // TODO(@forehalo): remove
+  isSelfHosted: boolean;
+};
+
+export type Environment = {
   // Device
   isLinux: boolean;
   isMacOs: boolean;
@@ -55,6 +51,8 @@ export type Environment = {
   isFireFox: boolean;
   isMobile: boolean;
   isChrome: boolean;
+  isPwa: boolean;
+
   chromeVersion?: number;
 };
 
@@ -64,17 +62,9 @@ export function setupGlobal() {
   }
 
   let environment: Environment;
-  const isDebug = process.env.NODE_ENV === 'development';
 
   if (!globalThis.navigator) {
     environment = {
-      isDesktopEdition: false,
-      isMobileEdition: false,
-      isElectron: false,
-      isDesktopWeb: false,
-      isMobileWeb: false,
-      isMobile: false,
-      isDebug,
       isLinux: false,
       isMacOs: false,
       isSafari: false,
@@ -82,17 +72,13 @@ export function setupGlobal() {
       isFireFox: false,
       isChrome: false,
       isIOS: false,
+      isPwa: false,
+      isMobile: false,
     };
   } else {
     const uaHelper = new UaHelper(globalThis.navigator);
 
     environment = {
-      isDesktopEdition: BUILD_CONFIG.distribution !== 'mobile',
-      isMobileEdition: BUILD_CONFIG.distribution === 'mobile',
-      isDesktopWeb: BUILD_CONFIG.distribution === 'web',
-      isMobileWeb: BUILD_CONFIG.distribution === 'mobile',
-      isElectron,
-      isDebug,
       isMobile: uaHelper.isMobile,
       isLinux: uaHelper.isLinux,
       isMacOs: uaHelper.isMacOs,
@@ -101,12 +87,10 @@ export function setupGlobal() {
       isFireFox: uaHelper.isFireFox,
       isChrome: uaHelper.isChrome,
       isIOS: uaHelper.isIOS,
-      isStandalone: uaHelper.isStandalone,
+      isPwa: uaHelper.isStandalone,
     };
     // Chrome on iOS is still Safari
     if (environment.isChrome && !environment.isIOS) {
-      assertEquals(environment.isSafari, false);
-      assertEquals(environment.isFireFox, false);
       environment = {
         ...environment,
         isSafari: false,

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

@@ -44,7 +44,7 @@ export const dateFormatOptions: DateFormats[] = [
 ];
 
 const appSettingBaseAtom = atomWithStorage<AppSetting>('affine-settings', {
-  clientBorder: environment.isElectron && !environment.isWindows,
+  clientBorder: BUILD_CONFIG.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.isElectron) {
+  if (BUILD_CONFIG.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/livedata/effect/index.ts

@@ -75,7 +75,7 @@ export function effect<T, A, B, C, D, E, F>(
 export function effect(...args: any[]) {
   const subject$ = new Subject<any>();
 
-  const effectLocation = environment.isDebug
+  const effectLocation = BUILD_CONFIG.debug
     ? `(${new Error().stack?.split('\n')[2].trim()})`
     : '';
 

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

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

packages/frontend/apps/electron/renderer/app.tsx

@@ -43,8 +43,8 @@ const desktopWhiteList = [
   '/magic-link',
 ];
 if (
-  !environment.isElectron &&
+  !BUILD_CONFIG.isElectron &&
-  environment.isDebug &&
+  BUILD_CONFIG.debug &&
   desktopWhiteList.every(path => !location.pathname.startsWith(path))
 ) {
   document.body.innerHTML = `<h1 style="color:red;font-size:5rem;text-align:center;">Don't run electron entry in browser.</h1>`;

packages/frontend/apps/electron/renderer/index.tsx

@@ -39,7 +39,7 @@ function main() {
     performanceMainLogger.info('skip setup');
   } else {
     performanceMainLogger.info('setup start');
-    if (window.SENTRY_RELEASE || environment.isDebug) {
+    if (BUILD_CONFIG.debug || window.SENTRY_RELEASE) {
       // https://docs.sentry.io/platforms/javascript/guides/electron/
       init({
         dsn: process.env.SENTRY_DSN,

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

@@ -1,4 +1,4 @@
-import { AppFallback } from '@affine/core/components/affine/app-container';
+import { ShellAppFallback } from '@affine/core/components/affine/app-container';
 import { useAppSettingHelper } from '@affine/core/hooks/affine/use-app-setting-helper';
 import { AppTabsHeader } from '@affine/core/modules/app-tabs-header';
 import { SplitViewFallback } from '@affine/core/modules/workbench/view/split-view/split-view';
@@ -8,15 +8,15 @@ import * as styles from './shell.css';
 export function ShellRoot() {
   const { appSettings } = useAppSettingHelper();
   const translucent =
-    environment.isElectron &&
+    BUILD_CONFIG.isElectron &&
     environment.isMacOs &&
     appSettings.enableBlurBackground;
   return (
     <div className={styles.root} data-translucent={translucent}>
       <AppTabsHeader mode="shell" className={styles.appTabsHeader} />
-      <AppFallback className={styles.fallbackRoot}>
+      <ShellAppFallback className={styles.fallbackRoot}>
         <SplitViewFallback className={styles.splitViewFallback} />
-      </AppFallback>
+      </ShellAppFallback>
     </div>
   );
 }

packages/frontend/apps/electron/scripts/common.ts

@@ -2,7 +2,7 @@ import { resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
 
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
-import { getRuntimeConfig } from '@affine/cli/src/webpack/runtime-config';
+import { getBuildConfig } from '@affine/cli/src/webpack/runtime-config';
 import { sentryEsbuildPlugin } from '@sentry/esbuild-plugin';
 import type { BuildOptions, Plugin } from 'esbuild';
 
@@ -20,8 +20,8 @@ export const config = (): BuildOptions => {
 
   define['REPLACE_ME_BUILD_ENV'] = `"${process.env.BUILD_TYPE ?? 'stable'}"`;
 
-  define['runtimeConfig'] = JSON.stringify(
+  define['BUILD_CONFIG'] = JSON.stringify(
-    getRuntimeConfig({
+    getBuildConfig({
       channel: (process.env.BUILD_TYPE as any) ?? 'canary',
       distribution: 'desktop',
       mode:

packages/frontend/apps/electron/src/main/windows-manager/main-window.ts

@@ -254,10 +254,10 @@ export async function openUrlInHiddenWindow(urlObj: URL) {
       preload: join(__dirname, './preload.js'),
       additionalArguments: await getWindowAdditionalArguments(),
     },
-    show: environment.isDebug,
+    show: BUILD_CONFIG.debug,
   });
 
-  if (environment.isDebug) {
+  if (BUILD_CONFIG.debug) {
     win.webContents.openDevTools({
       mode: 'detach',
     });

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

@@ -29,11 +29,6 @@ import { RouterProvider } from 'react-router-dom';
 import { configureMobileModules } from './modules';
 import { router } from './router';
 
-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');
-}
-
 const future = {
   v7_startTransition: true,
 } as const;

packages/frontend/apps/mobile/src/index.tsx

@@ -20,7 +20,7 @@ import { App } from './app';
 const performanceMainLogger = performanceLogger.namespace('main');
 function main() {
   performanceMainLogger.info('setup start');
-  if (window.SENTRY_RELEASE || environment.isDebug) {
+  if (BUILD_CONFIG.debug || window.SENTRY_RELEASE) {
     // https://docs.sentry.io/platforms/javascript/guides/react/#configure
     init({
       dsn: process.env.SENTRY_DSN,

packages/frontend/apps/mobile/src/pages/workspace/index.tsx

@@ -125,8 +125,8 @@ export const Component = () => {
 
   if (workspaceNotFound) {
     if (
-      detailDocRoute /*  */ &&
+      BUILD_CONFIG.isDesktopEdition /* only browser has share page */ &&
-      environment.isDesktopEdition /* only browser has share page */
+      detailDocRoute
     ) {
       return <div>TODO: share page</div>;
     }

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

@@ -31,11 +31,6 @@ import {
 import { Suspense } from 'react';
 import { RouterProvider } from 'react-router-dom';
 
-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');
-}
-
 const performanceI18nLogger = performanceLogger.namespace('i18n');
 const cache = createEmotionCache();
 

packages/frontend/apps/web/src/index.tsx

@@ -23,11 +23,11 @@ function main() {
   performanceMainLogger.info('start');
 
   // skip bootstrap setup for desktop onboarding
-  if (environment.isElectron && appInfo?.windowName === 'onboarding') {
+  if (BUILD_CONFIG.isElectron && appInfo?.windowName === 'onboarding') {
     performanceMainLogger.info('skip setup');
   } else {
     performanceMainLogger.info('setup start');
-    if (window.SENTRY_RELEASE || environment.isDebug) {
+    if (BUILD_CONFIG.debug || window.SENTRY_RELEASE) {
       // https://docs.sentry.io/platforms/javascript/guides/react/#configure
       init({
         dsn: process.env.SENTRY_DSN,

packages/frontend/component/.storybook/main.ts

@@ -3,7 +3,7 @@ import { StorybookConfig } from '@storybook/react-vite';
 import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
 import swc from 'unplugin-swc';
 import { mergeConfig } from 'vite';
-import { getRuntimeConfig } from '@affine/cli/src/webpack/runtime-config';
+import { getBuildConfig } from '@affine/cli/src/webpack/runtime-config';
 
 export default {
   stories: ['../src/ui/**/*.@(mdx|stories.@(js|jsx|ts|tsx))'],
@@ -54,13 +54,12 @@ export default {
       ],
       define: {
         'process.env.CAPTCHA_SITE_KEY': `"${process.env.CAPTCHA_SITE_KEY}"`,
-        runtimeConfig: getRuntimeConfig({
+        runtimeConfig: getBuildConfig({
           distribution: 'web',
           mode: 'development',
           channel: 'canary',
           static: false,
           coverage: false,
-          static: false,
         }),
       },
     });

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

@@ -20,7 +20,7 @@ export const AffineOtherPageLayout = ({
 
   return (
     <div className={styles.root}>
-      {environment.isElectron ? (
+      {BUILD_CONFIG.isElectron ? (
         <div className={styles.draggableHeader} />
       ) : (
         <div className={styles.topNav}>

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

@@ -119,8 +119,8 @@ export const OnboardingPage = ({
     () => questions?.[questionIdx],
     [questionIdx, questions]
   );
-  const isMacosDesktop = environment.isElectron && environment.isMacOs;
+  const isMacosDesktop = BUILD_CONFIG.isElectron && environment.isMacOs;
-  const isWindowsDesktop = environment.isElectron && environment.isWindows;
+  const isWindowsDesktop = BUILD_CONFIG.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.isElectron && theme) {
+    if (BUILD_CONFIG.isElectron && theme) {
       apis?.ui
         .handleThemeChange(theme as 'dark' | 'light' | 'system')
         .catch(err => {

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

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

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

@@ -9,12 +9,14 @@ import { MobileMenu } from './mobile/root';
 import { MobileMenuSeparator } from './mobile/separator';
 import { MobileMenuSub } from './mobile/sub';
 
-const MenuItem = environment.isMobileEdition ? MobileMenuItem : DesktopMenuItem;
+const MenuItem = BUILD_CONFIG.isMobileEdition
-const MenuSeparator = environment.isMobileEdition
+  ? MobileMenuItem
+  : DesktopMenuItem;
+const MenuSeparator = BUILD_CONFIG.isMobileEdition
   ? MobileMenuSeparator
   : DesktopMenuSeparator;
-const MenuSub = environment.isMobileEdition ? MobileMenuSub : DesktopMenuSub;
+const MenuSub = BUILD_CONFIG.isMobileEdition ? MobileMenuSub : DesktopMenuSub;
-const Menu = environment.isMobileEdition ? MobileMenu : DesktopMenu;
+const Menu = BUILD_CONFIG.isMobileEdition ? MobileMenu : DesktopMenu;
 
 export {
   DesktopMenu,

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

@@ -26,7 +26,7 @@ export const useMenuItem = <T extends MenuItemProps>({
       checked,
       selected,
       block,
-      [mobileMenuItem]: environment.isMobileEdition,
+      [mobileMenuItem]: BUILD_CONFIG.isMobileEdition,
     },
     propsClassName
   );

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

@@ -149,7 +149,7 @@ export const ModalInner = forwardRef<HTMLDivElement, ModalProps>(
       children,
       contentWrapperClassName,
       contentWrapperStyle,
-      animation = environment.isMobileEdition ? 'slideBottom' : 'fadeScaleTop',
+      animation = BUILD_CONFIG.isMobileEdition ? 'slideBottom' : 'fadeScaleTop',
       fullScreen,
       ...otherProps
     } = props;
@@ -208,7 +208,7 @@ export const ModalInner = forwardRef<HTMLDivElement, ModalProps>(
               `anim-${animation}`,
               styles.modalOverlay,
               overlayClassName,
-              { mobile: environment.isMobileEdition }
+              { mobile: BUILD_CONFIG.isMobileEdition }
             )}
             style={{
               ...overlayStyle,
@@ -216,7 +216,7 @@ export const ModalInner = forwardRef<HTMLDivElement, ModalProps>(
             {...otherOverlayOptions}
           >
             <SafeArea
-              bottom={environment.isMobileEdition}
+              bottom={BUILD_CONFIG.isMobileEdition}
               bottomOffset={12}
               data-full-screen={fullScreen}
               data-modal={modal}

packages/frontend/component/src/ui/safe-area/index.tsx

@@ -30,7 +30,7 @@ export const SafeArea = forwardRef<HTMLDivElement, SafeAreaProps>(
       <div
         ref={ref}
         className={clsx(safeArea, className)}
-        data-standalone={environment.isStandalone ? '' : undefined}
+        data-standalone={environment.isPwa ? '' : undefined}
         data-bottom={bottom ? '' : undefined}
         data-top={top ? '' : undefined}
         style={{

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.isElectron
+      keyBinding: BUILD_CONFIG.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.isElectron;
+        return BUILD_CONFIG.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.isElectron,
+      preconditionStrategy: () => BUILD_CONFIG.isElectron,
       run() {
         track.$.cmdk.settings.changeAppSetting({
           key: 'clientBorder',
@@ -231,7 +231,7 @@ export function registerAffineSettingsCommands({
         ]()}`,
       category: 'affine:settings',
       icon: <SettingsIcon />,
-      preconditionStrategy: () => environment.isElectron,
+      preconditionStrategy: () => BUILD_CONFIG.isElectron,
       run() {
         track.$.cmdk.settings.changeAppSetting({
           key: 'enableNoisyBackground',
@@ -257,7 +257,8 @@ export function registerAffineSettingsCommands({
         ]()}`,
       category: 'affine:settings',
       icon: <SettingsIcon />,
-      preconditionStrategy: () => environment.isElectron && environment.isMacOs,
+      preconditionStrategy: () =>
+        BUILD_CONFIG.isElectron && environment.isMacOs,
       run() {
         track.$.cmdk.settings.changeAppSetting({
           key: 'enableBlurBackground',

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

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import type { PropsWithChildren, ReactElement } from 'react';
 
 import { useAppSettingHelper } from '../../hooks/affine/use-app-setting-helper';
-import { AppSidebarFallback } from '../app-sidebar';
+import { AppSidebarFallback, ShellAppSidebarFallback } from '../app-sidebar';
 import type { WorkspaceRootProps } from '../workspace';
 import {
   AppContainer as AppContainerWithoutSettings,
@@ -16,11 +16,7 @@ export const AppContainer = (props: WorkspaceRootProps) => {
   return (
     <AppContainerWithoutSettings
       useNoisyBackground={appSettings.enableNoisyBackground}
-      useBlurBackground={
+      useBlurBackground={appSettings.enableBlurBackground}
-        appSettings.enableBlurBackground &&
-        environment.isElectron &&
-        environment.isMacOs
-      }
       {...props}
     />
   );
@@ -36,7 +32,7 @@ export const AppFallback = ({
     <AppContainer
       className={clsx(
         className,
-        environment.isElectron && styles.electronFallback
+        BUILD_CONFIG.isElectron && styles.electronFallback
       )}
     >
       <AppSidebarFallback />
@@ -44,3 +40,17 @@ export const AppFallback = ({
     </AppContainer>
   );
 };
+
+export const ShellAppFallback = ({
+  className,
+  children,
+}: PropsWithChildren<{
+  className?: string;
+}>): ReactElement => {
+  return (
+    <AppContainer className={className}>
+      <ShellAppSidebarFallback />
+      <MainContainerFallback>{children}</MainContainerFallback>
+    </AppContainer>
+  );
+};

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

@@ -50,10 +50,10 @@ function OAuthProvider({ provider }: { provider: OAuthProviderType }) {
 
   const onClick = useCallback(() => {
     let oauthUrl =
-      (environment.isElectron ? BUILD_CONFIG.serverUrlPrefix : '') +
+      (BUILD_CONFIG.isElectron ? BUILD_CONFIG.serverUrlPrefix : '') +
       `/oauth/login?provider=${provider}`;
 
-    if (environment.isElectron) {
+    if (BUILD_CONFIG.isElectron) {
       oauthUrl += `&client=${appInfo?.schema}`;
     }
 

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.isElectron ? 'true' : 'false'
+            BUILD_CONFIG.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.isElectron) {
+  if (!BUILD_CONFIG.isElectron) {
     return undefined;
   }
 
@@ -31,7 +31,7 @@ const challengeFetcher = async (url: string) => {
 };
 
 const generateChallengeResponse = async (challenge: string) => {
-  if (!environment.isElectron) {
+  if (!BUILD_CONFIG.isElectron) {
     return undefined;
   }
 
@@ -56,7 +56,7 @@ export const Captcha = () => {
     return null;
   }
 
-  if (environment.isElectron) {
+  if (BUILD_CONFIG.isElectron) {
     if (response) {
       return <div className={style.captchaWrapper}>Making Challenge</div>;
     } else {
@@ -86,8 +86,8 @@ export const useCaptcha = (): [string | undefined, string?] => {
 
   useEffect(() => {
     if (
+      BUILD_CONFIG.isElectron &&
       hasCaptchaFeature &&
-      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.isElectron) {
+  if (BUILD_CONFIG.isElectron) {
     if (response) {
       return [response, challenge?.challenge];
     } else {

packages/frontend/core/src/components/affine/empty/action-button.tsx

@@ -17,11 +17,11 @@ export const ActionButton = ({
     <Button
       size="large"
       className={clsx(
-        environment.isMobileEdition ? mobileActionButton : actionButton,
+        BUILD_CONFIG.isMobileEdition ? mobileActionButton : actionButton,
         className
       )}
       contentClassName={clsx(
-        environment.isMobileEdition ? mobileActionContent : actionContent,
+        BUILD_CONFIG.isMobileEdition ? mobileActionContent : actionContent,
         contentClassName
       )}
       {...props}

packages/frontend/core/src/components/affine/empty/collection-detail.tsx

@@ -30,7 +30,9 @@ export const EmptyCollectionDetail = ({
       title={t['com.affine.empty.collection-detail.title']()}
       description={t['com.affine.empty.collection-detail.description']()}
       action={
-        environment.isMobileEdition ? null : <Actions collection={collection} />
+        BUILD_CONFIG.isMobileEdition ? null : (
+          <Actions collection={collection} />
+        )
       }
       {...props}
     />

packages/frontend/core/src/components/affine/empty/docs.tsx

@@ -31,7 +31,7 @@ export const EmptyDocs = ({
   const pageHelper = usePageHelper(currentWorkspace.docCollection);
   const tag = useLiveData(tagService.tagList.tagByTagId$(tagId));
 
-  const showActionButton = type !== 'trash'; // && !environment.isMobileEdition;
+  const showActionButton = type !== 'trash'; // && !BUILD_CONFIG.isMobileEdition;
 
   const onCreate = useCallback(
     (e: MouseEvent) => {

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.isElectron}
+      data-is-desktop={BUILD_CONFIG.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={BUILD_CONFIG.editorVersion}
         />
-        {environment.isElectron ? (
+        {BUILD_CONFIG.isElectron ? (
           <>
             <UpdateCheckSection />
             <SettingRow

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

@@ -86,7 +86,7 @@ export const AppearanceSettings = () => {
             <LanguageMenu />
           </div>
         </SettingRow>
-        {environment.isElectron ? (
+        {BUILD_CONFIG.isElectron ? (
           <SettingRow
             name={t['com.affine.appearanceSettings.clientBorder.title']()}
             desc={t['com.affine.appearanceSettings.clientBorder.description']()}
@@ -98,7 +98,7 @@ export const AppearanceSettings = () => {
             />
           </SettingRow>
         ) : null}
-        {BUILD_CONFIG.enableNewSettingUnstableApi && environment.isElectron ? (
+        {BUILD_CONFIG.enableNewSettingUnstableApi && BUILD_CONFIG.isElectron ? (
           <SettingRow
             name={t['com.affine.appearanceSettings.windowFrame.title']()}
             desc={t['com.affine.appearanceSettings.windowFrame.description']()}
@@ -144,7 +144,7 @@ export const AppearanceSettings = () => {
         </SettingWrapper>
       ) : null}
 
-      {environment.isElectron ? (
+      {BUILD_CONFIG.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.isElectron) {
+    if (BUILD_CONFIG.isElectron) {
       apis?.ui.openThemeEditor().catch(console.error);
     } else {
       popupWindow('/theme-editor');

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

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

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

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

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

@@ -156,8 +156,6 @@ export const AFFiNESharePage = (props: ShareMenuProps) => {
     }
   }, [shareInfoService, t]);
 
-  const isMac = environment.isMacOs;
-
   const { blockIds, elementIds } = useMemo(
     () => getSelectedNodes(editorContainer?.host || null, currentMode),
     [editorContainer, currentMode]
@@ -270,9 +268,9 @@ export const AFFiNESharePage = (props: ShareMenuProps) => {
           <span className={styles.copyLinkLabelStyle}>
             {t['com.affine.share-menu.copy']()}
           </span>
-          {!environment.isMobile && (
+          {BUILD_CONFIG.isDesktopEdition && (
             <span className={styles.copyLinkShortcutStyle}>
-              {isMac ? '⌘ + ⌥ + C' : 'Ctrl + Shift + C'}
+              {environment.isMacOs ? '⌘ + ⌥ + C' : 'Ctrl + Shift + C'}
             </span>
           )}
         </Button>

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

@@ -49,7 +49,6 @@ const SubscriptionChangedNotifyFooter = ({
   );
 };
 
-const isDesktop = environment.isElectron;
 export const useUpgradeNotify = () => {
   const t = useI18n();
   const prevNotifyIdRef = useRef<string | number | null>(null);
@@ -71,7 +70,7 @@ export const useUpgradeNotify = () => {
             <SubscriptionChangedNotifyFooter
               to={link}
               okText={
-                isDesktop
+                BUILD_CONFIG.isElectron
                   ? t['com.affine.payment.upgrade-success-notify.ok-client']()
                   : t['com.affine.payment.upgrade-success-notify.ok-web']()
               }
@@ -112,7 +111,7 @@ export const useDowngradeNotify = () => {
             <SubscriptionChangedNotifyFooter
               to={link}
               okText={
-                isDesktop
+                BUILD_CONFIG.isElectron
                   ? t['com.affine.payment.downgraded-notify.ok-client']()
                   : t['com.affine.payment.downgraded-notify.ok-web']()
               }

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.isElectron;
+export const isMobile = !BUILD_CONFIG.isElectron && window.innerWidth < 768;
 
 export const appSidebarOpenAtom = atomWithStorage(APP_SIDEBAR_OPEN, !isMobile);
 export const appSidebarFloatingAtom = atom(isMobile);

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

@@ -47,7 +47,7 @@ export function AppSidebar({ children }: PropsWithChildren) {
 
   useEffect(() => {
     // do not float app sidebar on desktop
-    if (environment.isElectron) {
+    if (BUILD_CONFIG.isElectron) {
       return;
     }
 
@@ -77,8 +77,9 @@ export function AppSidebar({ children }: PropsWithChildren) {
     };
   }, [open, setFloating, setOpen, width]);
 
-  const hasRightBorder = !environment.isElectron && !clientBorder;
+  const hasRightBorder = !BUILD_CONFIG.isElectron && !clientBorder;
-  const isMacosDesktop = environment.isElectron && environment.isMacOs;
+  const isMacosDesktop = BUILD_CONFIG.isElectron && environment.isMacOs;
+
   return (
     <>
       <ResizePanel
@@ -103,7 +104,7 @@ export function AppSidebar({ children }: PropsWithChildren) {
         data-client-border={clientBorder}
       >
         <nav className={navStyle} data-testid="app-sidebar">
-          {!environment.isElectron && <SidebarHeader />}
+          {!BUILD_CONFIG.isElectron && <SidebarHeader />}
           <div className={navBodyStyle} data-testid="sliderBar-inner">
             {children}
           </div>
@@ -120,7 +121,15 @@ export function AppSidebar({ children }: PropsWithChildren) {
   );
 }
 
-const FallbackHeader = () => {
+export function FallbackHeader() {
+  return (
+    <div className={styles.fallbackHeader}>
+      <FallbackHeaderSkeleton />
+    </div>
+  );
+}
+
+export function FallbackHeaderWithWorkspaceNavigator() {
   // if navigate is not defined, it is rendered outside of router
   // WorkspaceNavigator requires navigate context
   // todo: refactor
@@ -136,15 +145,21 @@ const FallbackHeader = () => {
           showEnableCloudButton
         />
       ) : (
-        <>
+        <FallbackHeaderSkeleton />
-          <Skeleton variant="rectangular" width={32} height={32} />
-          <Skeleton variant="rectangular" width={150} height={32} flex={1} />
-          <Skeleton variant="circular" width={25} height={25} />
-        </>
       )}
     </div>
   );
-};
+}
+
+export function FallbackHeaderSkeleton() {
+  return (
+    <>
+      <Skeleton variant="rectangular" width={32} height={32} />
+      <Skeleton variant="rectangular" width={150} height={32} flex={1} />
+      <Skeleton variant="circular" width={25} height={25} />
+    </>
+  );
+}
 
 const randomWidth = () => {
   return Math.floor(Math.random() * 200) + 100;
@@ -195,17 +210,44 @@ export const AppSidebarFallback = (): ReactElement | null => {
   const width = useAtomValue(appSidebarWidthAtom);
   const { appSettings } = useAppSettingHelper();
   const clientBorder = appSettings.clientBorder;
-  const hasRightBorder = !environment.isElectron && !clientBorder;
 
   return (
     <div
       style={{ width }}
       className={navWrapperStyle}
-      data-has-border={hasRightBorder}
+      data-has-border={!BUILD_CONFIG.isElectron && !clientBorder}
       data-open="true"
     >
       <nav className={navStyle}>
-        {!environment.isElectron ? <div className={navHeaderStyle} /> : null}
+        {!BUILD_CONFIG.isElectron ? <div className={navHeaderStyle} /> : null}
+        <div className={navBodyStyle}>
+          <div className={styles.fallback}>
+            <FallbackHeaderWithWorkspaceNavigator />
+            <FallbackBody />
+          </div>
+        </div>
+      </nav>
+    </div>
+  );
+};
+
+/**
+ * NOTE(@forehalo): this is a copy of [AppSidebarFallback] without [WorkspaceNavigator] which will introduce a lot useless dependencies for shell(tab bar)
+ */
+export const ShellAppSidebarFallback = () => {
+  const width = useAtomValue(appSidebarWidthAtom);
+  const { appSettings } = useAppSettingHelper();
+  const clientBorder = appSettings.clientBorder;
+
+  return (
+    <div
+      style={{ width }}
+      className={navWrapperStyle}
+      data-has-border={!BUILD_CONFIG.isElectron && !clientBorder}
+      data-open="true"
+    >
+      <nav className={navStyle}>
+        {!BUILD_CONFIG.isElectron ? <div className={navHeaderStyle} /> : null}
         <div className={navBodyStyle}>
           <div className={styles.fallback}>
             <FallbackHeader />

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

@@ -13,7 +13,6 @@ 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.isMacOs;
 
   return (
     <div
@@ -27,7 +26,7 @@ export function QuickSearchInput({ onClick, ...props }: QuickSearchInputProps) {
       </span>
       <div className={styles.spacer} />
       <div className={styles.shortcutHint}>
-        {isMac ? ' ⌘ + K' : ' Ctrl + K'}
+        {environment.isMacOs ? ' ⌘ + K' : ' Ctrl + K'}
       </div>
       <Spotlight />
     </div>

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

@@ -292,8 +292,7 @@ export const PageHeaderMenuButton = ({
       >
         {t['com.affine.workbench.tab.page-menu-open']()}
       </MenuItem>
-
+      {BUILD_CONFIG.isElectron && (
-      {environment.isElectron && (
         <MenuItem
           prefixIcon={<SplitViewIcon />}
           data-testid="editor-option-menu-open-in-split-new"

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

@@ -176,12 +176,10 @@ export const PageOperationCell = ({
       <MenuItem onClick={onOpenInfoModal} prefixIcon={<InformationIcon />}>
         {t['com.affine.page-properties.page-info.view']()}
       </MenuItem>
-
       <MenuItem onClick={onOpenInNewTab} prefixIcon={<OpenInNewIcon />}>
         {t['com.affine.workbench.tab.page-menu-open']()}
       </MenuItem>
-
+      {BUILD_CONFIG.isElectron && 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

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

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

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

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

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

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

@@ -12,12 +12,12 @@ import { AuthService } from '../modules/cloud';
 const minimumChromeVersion = 106;
 
 const shouldShowWarning = (() => {
-  if (environment.isElectron) {
+  if (BUILD_CONFIG.isElectron) {
     // even though desktop has compatibility issues,
     //  we don't want to show the warning
     return false;
   }
-  if (environment.isMobile) {
+  if (BUILD_CONFIG.isMobileEdition) {
     return true;
   }
   if (environment.isChrome && environment.chromeVersion) {
@@ -75,8 +75,8 @@ export const TopTip = ({
   }, [setAuthModal]);
 
   if (
+    !BUILD_CONFIG.isElectron &&
     showLocalDemoTips &&
-    !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.isElectron ? (
+      {BUILD_CONFIG.isElectron && (
         <MenuItem
           block={true}
           prefixIcon={<ImportIcon />}
@@ -27,7 +27,7 @@ export const AddWorkspace = ({
             {t['com.affine.workspace.local.import']()}
           </div>
         </MenuItem>
-      ) : null}
+      )}
       <MenuItem
         block={true}
         prefixIcon={<PlusIcon />}

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

@@ -60,7 +60,7 @@ const UnSyncWorkspaceStatus = () => {
 const LocalWorkspaceStatus = () => {
   return (
     <>
-      {!environment.isElectron ? (
+      {!BUILD_CONFIG.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.isElectron) {
+    if (!BUILD_CONFIG.isElectron) {
       content = 'This is a local demo workspace.';
     } else {
       content = 'Saved locally';

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

@@ -28,8 +28,9 @@ export const AppContainer = ({
   className,
   ...rest
 }: WorkspaceRootProps) => {
-  const noisyBackground = useNoisyBackground && environment.isElectron;
+  const noisyBackground = BUILD_CONFIG.isElectron && useNoisyBackground;
-  const blurBackground = environment.isElectron && useBlurBackground;
+  const blurBackground =
+    BUILD_CONFIG.isElectron && environment.isMacOs && useBlurBackground;
   return (
     <div
       {...rest}
@@ -59,7 +60,7 @@ export const MainContainer = forwardRef<
     <div
       {...props}
       className={clsx(mainContainerStyle, className)}
-      data-is-desktop={environment.isElectron}
+      data-is-desktop={BUILD_CONFIG.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.isElectron) {
+    if (!BUILD_CONFIG.isElectron) {
       return;
     }
     const unsubs: Array<() => void> = [];

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

@@ -279,50 +279,56 @@ export const useWinMarkdownShortcuts = (): ShortcutMap => {
   );
 };
 
+const shortcutsMap = environment.isMacOs
+  ? {
+      useMarkdownShortcuts: useMacMarkdownShortcuts,
+      usePageShortcuts: useMacPageKeyboardShortcuts,
+      useEdgelessShortcuts: useMacEdgelessKeyboardShortcuts,
+      useGeneralShortcuts: useMacGeneralKeyboardShortcuts,
+    }
+  : {
+      useMarkdownShortcuts: useWinMarkdownShortcuts,
+      usePageShortcuts: useWinPageKeyboardShortcuts,
+      useEdgelessShortcuts: useWinEdgelessKeyboardShortcuts,
+      useGeneralShortcuts: useWinGeneralKeyboardShortcuts,
+    };
+
 export const useMarkdownShortcuts = (): ShortcutsInfo => {
   const t = useI18n();
+  const shortcuts = shortcutsMap.useMarkdownShortcuts();
 
-  const macMarkdownShortcuts = useMacMarkdownShortcuts();
-  const winMarkdownShortcuts = useWinMarkdownShortcuts();
-  const isMac = environment.isMacOs;
   return {
     title: t['com.affine.shortcutsTitle.markdownSyntax'](),
-    shortcuts: isMac ? macMarkdownShortcuts : winMarkdownShortcuts,
+    shortcuts,
   };
 };
 
 export const usePageShortcuts = (): ShortcutsInfo => {
   const t = useI18n();
+  const shortcuts = shortcutsMap.usePageShortcuts();
 
-  const macPageShortcuts = useMacPageKeyboardShortcuts();
-  const winPageShortcuts = useWinPageKeyboardShortcuts();
-  const isMac = environment.isMacOs;
   return {
     title: t['com.affine.shortcutsTitle.page'](),
-    shortcuts: isMac ? macPageShortcuts : winPageShortcuts,
+    shortcuts,
   };
 };
 
 export const useEdgelessShortcuts = (): ShortcutsInfo => {
   const t = useI18n();
+  const shortcuts = shortcutsMap.useEdgelessShortcuts();
 
-  const macEdgelessShortcuts = useMacEdgelessKeyboardShortcuts();
-  const winEdgelessShortcuts = useWinEdgelessKeyboardShortcuts();
-  const isMac = environment.isMacOs;
   return {
     title: t['com.affine.shortcutsTitle.edgeless'](),
-    shortcuts: isMac ? macEdgelessShortcuts : winEdgelessShortcuts,
+    shortcuts,
   };
 };
 
 export const useGeneralShortcuts = (): ShortcutsInfo => {
   const t = useI18n();
+  const shortcuts = shortcutsMap.useGeneralShortcuts();
 
-  const macGeneralShortcuts = useMacGeneralKeyboardShortcuts();
-  const winGeneralShortcuts = useWinGeneralKeyboardShortcuts();
-  const isMac = environment.isMacOs;
   return {
     title: t['com.affine.shortcutsTitle.general'](),
-    shortcuts: isMac ? macGeneralShortcuts : winGeneralShortcuts,
+    shortcuts,
   };
 };

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

@@ -1,5 +1,4 @@
 import { apis } from '@affine/electron-api';
-import { setupGlobal } from '@affine/env/global';
 import { assertExists } from '@blocksuite/global/utils';
 import type { AppConfigSchema } from '@toeverything/infra';
 import { AppConfigStorage, defaultAppConfig } from '@toeverything/infra';
@@ -33,9 +32,7 @@ class AppConfigProxy {
 }
 export const appConfigProxy = new AppConfigProxy();
 
-setupGlobal();
+const storage = BUILD_CONFIG.isElectron
-
-const storage = environment.isElectron
   ? new AppConfigStorage({
       config: defaultAppConfig,
       get: () => appConfigProxy.get(),

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

@@ -29,7 +29,7 @@ function rpcToObservable<
   return new Observable<T | null>(subscriber => {
     subscriber.next(initialValue);
     onSubscribe?.();
-    if (!environment.isElectron || !event) {
+    if (!BUILD_CONFIG.isElectron || !event) {
       subscriber.complete();
       return;
     }

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.isElectron || !newTitle) {
+    if (BUILD_CONFIG.isElectron || !newTitle) {
       return noop;
     }
 

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

@@ -211,6 +211,8 @@ const BrowserLayout = ({ children }: PropsWithChildren) => {
   );
 };
 
+const LayoutComponent = BUILD_CONFIG.isElectron ? DesktopLayout : BrowserLayout;
+
 /**
  * Wraps the workspace layout main router view
  */
@@ -223,9 +225,6 @@ const WorkspaceLayoutUIContainer = ({ children }: PropsWithChildren) => {
   );
 
   const resizing = useAtomValue(appSidebarResizingAtom);
-  const LayoutComponent = environment.isElectron
-    ? DesktopLayout
-    : BrowserLayout;
 
   return (
     <AppContainer data-current-path={currentPath} resizing={resizing}>

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

@@ -35,8 +35,8 @@ function createMixpanel() {
         appVersion: BUILD_CONFIG.appVersion,
         environment: BUILD_CONFIG.appBuildType,
         editorVersion: BUILD_CONFIG.editorVersion,
-        isSelfHosted: Boolean(BUILD_CONFIG.isSelfHosted),
+        isSelfHosted: BUILD_CONFIG.isSelfHosted,
-        isDesktop: environment.isElectron,
+        isDesktop: BUILD_CONFIG.isElectron,
       });
     },
     reset() {

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

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

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

@@ -91,7 +91,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.isElectron ? appInfo?.schema : 'web'}`,
+          callbackUrl: `/magic-link?client=${BUILD_CONFIG.isElectron ? appInfo?.schema : 'web'}`,
         }),
         headers: {
           'content-type': 'application/json',

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.isElectron) {
+  if (BUILD_CONFIG.isElectron) {
     return BUILD_CONFIG.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.isElectron && appInfo) {
+  if (BUILD_CONFIG.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.isElectron && enableMultiView
+      ...(BUILD_CONFIG.isElectron && enableMultiView
         ? [
             {
               index: 99,

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

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

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

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

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

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

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

@@ -10,6 +10,14 @@ import * as styles from './navigation-buttons.css';
 const tooltipSideBottom = { side: 'bottom' as const };
 
 export const NavigationButtons = () => {
+  if (!BUILD_CONFIG.isElectron) {
+    return null;
+  }
+
+  return <ElectronNavigationButtons />;
+};
+
+const ElectronNavigationButtons = () => {
   const t = useI18n();
 
   const navigator = useService(NavigatorService).navigator;
@@ -44,10 +52,6 @@ export const NavigationButtons = () => {
     };
   }, [navigator]);
 
-  if (!environment.isElectron) {
-    return null;
-  }
-
   return (
     <div className={styles.container}>
       <IconButton

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

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

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

@@ -13,7 +13,7 @@ export class DesktopStateSynchronizer extends Service {
   }
 
   startSync = () => {
-    if (!environment.isElectron) {
+    if (!BUILD_CONFIG.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.isElectron && (
+        {!BUILD_CONFIG.isElectron && viewPosition.isFirst && (
           <SidebarSwitch
             show={!leftSidebarOpen}
             className={styles.leftSidebarButton}
@@ -64,7 +64,7 @@ export const RouteContainer = () => {
           viewId={view.id}
           className={styles.viewHeaderContainer}
         />
-        {viewPosition.isLast && !environment.isElectron && (
+        {!BUILD_CONFIG.isElectron && viewPosition.isLast && (
           <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.isElectron && styles.borderTop
+              !BUILD_CONFIG.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.isElectron && (
+      {!BUILD_CONFIG.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.isElectron
+            return BUILD_CONFIG.isElectron && event.altKey && enableMultiView
               ? '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.isElectron
+const useAdapter = BUILD_CONFIG.isElectron
   ? useBindWorkbenchToDesktopRouter
   : useBindWorkbenchToBrowserRouter;
 

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

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

packages/frontend/core/src/pages/auth/common.ts

@@ -5,5 +5,5 @@ export const supportedClient = z.enum([
   'affine',
   'affine-canary',
   'affine-beta',
-  ...(environment.isDebug ? ['affine-dev'] : []),
+  ...(BUILD_CONFIG.debug ? ['affine-dev'] : []),
 ]);

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

@@ -1,7 +1,6 @@
 import { AffineOtherPageLayout } from '@affine/component/affine-other-page-layout';
 import { SignInPageContainer } from '@affine/component/auth-components';
 import { AuthService } from '@affine/core/modules/cloud';
-import { appInfo } from '@affine/electron-api';
 import { useLiveData, useService } from '@toeverything/infra';
 import { useEffect } from 'react';
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
@@ -20,10 +19,6 @@ export const SignIn = () => {
   const isLoggedIn = status === 'authenticated' && !isRevalidating;
 
   useEffect(() => {
-    if (environment.isElectron && appInfo?.windowName === 'hidden-window') {
-      return;
-    }
-
     if (isLoggedIn) {
       const redirectUri = searchParams.get('redirect_uri');
       if (redirectUri) {

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.isElectron && !appConfigStorage.get('onBoarding')) {
+  if (!BUILD_CONFIG.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.isElectron) {
+    if (BUILD_CONFIG.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

@@ -204,7 +204,6 @@ const DetailPageImpl = memo(function DetailPageImpl() {
   );
 
   const [refCallback, hasScrollTop] = useHasScrollTop();
-  const dynamicTopBorder = environment.isElectron;
 
   const openOutlinePanel = useCallback(() => {
     workbench.openSidebar();
@@ -219,7 +218,7 @@ const DetailPageImpl = memo(function DetailPageImpl() {
       <ViewBody>
         <div
           className={styles.mainContainer}
-          data-dynamic-top-border={dynamicTopBorder}
+          data-dynamic-top-border={BUILD_CONFIG.isElectron}
           data-has-scroll-top={hasScrollTop}
         >
           {/* Add a key to force rerender when page changed, to avoid error boundary persisting. */}

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

@@ -20,10 +20,10 @@ export const useDetailPageHeaderResponsive = (availableWidth: number) => {
   const hideToday = availableWidth < 300;
 
   const showDivider =
+    !BUILD_CONFIG.isElectron &&
     viewPosition.isLast &&
     !rightSidebarOpen &&
-    !(hidePresent && hideShare) &&
+    !(hidePresent && hideShare);
-    !environment.isElectron;
 
   return {
     hideShare,

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

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

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

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

packages/frontend/graphql/src/index.ts

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

scripts/setup/global.ts

@@ -1,7 +1,7 @@
-import { getRuntimeConfig } from '@affine/cli/src/webpack/runtime-config';
+import { getBuildConfig } from '@affine/cli/src/webpack/runtime-config';
 import { setupGlobal } from '@affine/env/global';
 
-globalThis.BUILD_CONFIG = getRuntimeConfig({
+globalThis.BUILD_CONFIG = getBuildConfig({
   distribution: 'web',
   mode: 'development',
   channel: 'canary',

tools/@types/env/__all.d.ts

@@ -1,3 +1,5 @@
+import '@affine/env/constant';
+
 import type { BUILD_CONFIG_TYPE, Environment } from '@affine/env/global';
 
 declare global {

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

@@ -3,11 +3,23 @@ import type { BUILD_CONFIG_TYPE } from '@affine/env/global';
 import packageJson from '../../package.json' assert { type: 'json' };
 import type { BuildFlags } from '../config';
 
-export function getRuntimeConfig(buildFlags: BuildFlags): BUILD_CONFIG_TYPE {
+export function getBuildConfig(buildFlags: BuildFlags): BUILD_CONFIG_TYPE {
   const buildPreset: Record<BuildFlags['channel'], BUILD_CONFIG_TYPE> = {
     get stable() {
       return {
+        debug: buildFlags.mode === 'development',
         distribution: buildFlags.distribution,
+        isDesktopEdition: (
+          ['web', 'desktop', 'admin'] as BuildFlags['distribution'][]
+        ).includes(buildFlags.distribution),
+        isMobileEdition: (['mobile'] as BuildFlags['distribution'][]).includes(
+          buildFlags.distribution
+        ),
+        isElectron: buildFlags.distribution === 'desktop',
+        isWeb: buildFlags.distribution === 'web',
+        isMobileWeb: buildFlags.distribution === 'mobile',
+
+        isSelfHosted: process.env.SELF_HOSTED === 'true',
         appBuildType: 'stable' as const,
         serverUrlPrefix: 'https://app.affine.pro',
         appVersion: packageJson.version,
@@ -87,7 +99,6 @@ export function getRuntimeConfig(buildFlags: BuildFlags): BUILD_CONFIG_TYPE {
   }
 
   return {
-    isSelfHosted: process.env.SELF_HOSTED === 'true',
     ...currentBuildPreset,
     // environment preset will overwrite current build preset
     // this environment variable is for debug proposes only

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

@@ -9,7 +9,7 @@ import webpack from 'webpack';
 import { merge } from 'webpack-merge';
 
 import { createConfiguration, rootPath, workspaceRoot } from './config.js';
-import { getRuntimeConfig } from './runtime-config.js';
+import { getBuildConfig } from './runtime-config.js';
 
 const DESCRIPTION = `There can be more than Notion and Miro. AFFiNE is a next-gen knowledge base that brings planning, sorting and creating all together.`;
 
@@ -31,8 +31,8 @@ const gitShortHash = once(() => {
 
 export function createWebpackConfig(cwd: string, flags: BuildFlags) {
   console.log('build flags', flags);
-  const runtimeConfig = getRuntimeConfig(flags);
+  const runtimeConfig = getBuildConfig(flags);
-  console.log('runtime config', runtimeConfig);
+  console.log('BUILD_CONFIG', runtimeConfig);
   const config = createConfiguration(cwd, flags, runtimeConfig);
   const entry =
     typeof flags.entry === 'string' || !flags.entry