refactor: migrate environment to BUILD_CONFIG (#8206)

2026-02-12 04:18:54 +00:00 · 2024-09-13 07:58:20 +00:00
parent 561f96bb71
commit a387e4ac07
90 changed files with 297 additions and 260 deletions
--- a/packages/frontend/core/src/commands/affine-creation.tsx
+++ b/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({
--- a/packages/frontend/core/src/commands/affine-settings.tsx
+++ b/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',
--- a/packages/frontend/core/src/components/affine/app-container.tsx
+++ b/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={
-        appSettings.enableBlurBackground &&
-        environment.isElectron &&
-        environment.isMacOs
-      }
+      useBlurBackground={appSettings.enableBlurBackground}
      {...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>
+  );
+};
--- a/packages/frontend/core/src/components/affine/auth/oauth.tsx
+++ b/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}`;
    }

--- a/packages/frontend/core/src/components/affine/auth/send-email.tsx
+++ b/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'
          }`,
        });
      },
--- a/packages/frontend/core/src/components/affine/auth/use-captcha.tsx
+++ b/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 {
--- a/packages/frontend/core/src/components/affine/empty/action-button.tsx
+++ b/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}
--- a/packages/frontend/core/src/components/affine/empty/collection-detail.tsx
+++ b/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}
    />
--- a/packages/frontend/core/src/components/affine/empty/docs.tsx
+++ b/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) => {
--- a/packages/frontend/core/src/components/affine/onboarding/onboarding.tsx
+++ b/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}>
--- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/about/index.tsx
+++ b/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
--- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/appearance/index.tsx
+++ b/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']()}
        >
--- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/appearance/theme-editor-setting.tsx
+++ b/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');
--- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/general.tsx
+++ b/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 (
--- a/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/new-workspace-setting-detail/index.tsx
+++ b/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}
--- a/packages/frontend/core/src/components/affine/share-page-modal/share-menu/share-page.tsx
+++ b/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>
--- a/packages/frontend/core/src/components/affine/subscription-landing/notify.tsx
+++ b/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']()
              }
--- a/packages/frontend/core/src/components/app-sidebar/index.jotai.ts
+++ b/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);
--- a/packages/frontend/core/src/components/app-sidebar/index.tsx
+++ b/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 isMacosDesktop = environment.isElectron && environment.isMacOs;
+  const hasRightBorder = !BUILD_CONFIG.isElectron && !clientBorder;
+  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
        />
      ) : (
-        <>
-          <Skeleton variant="rectangular" width={32} height={32} />
-          <Skeleton variant="rectangular" width={150} height={32} flex={1} />
-          <Skeleton variant="circular" width={25} height={25} />
-        </>
+        <FallbackHeaderSkeleton />
      )}
    </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 />
--- a/packages/frontend/core/src/components/app-sidebar/quick-search-input/index.tsx
+++ b/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>
--- a/packages/frontend/core/src/components/blocksuite/block-suite-header/menu/index.tsx
+++ b/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>
-
-      {environment.isElectron && (
+      {BUILD_CONFIG.isElectron && (
        <MenuItem
          prefixIcon={<SplitViewIcon />}
          data-testid="editor-option-menu-open-in-split-new"
--- a/packages/frontend/core/src/components/page-list/operation-cell.tsx
+++ b/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>
-
-      {environment.isElectron && enableSplitView ? (
+      {BUILD_CONFIG.isElectron && enableSplitView ? (
        <MenuItem onClick={onOpenInSplitView} prefixIcon={<SplitViewIcon />}>
          {t['com.affine.workbench.split-view.page-menu-open']()}
        </MenuItem>
--- a/packages/frontend/core/src/components/page-list/view/collection-operations.tsx
+++ b/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 />,
--- a/packages/frontend/core/src/components/pure/help-island/index.tsx
+++ b/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({
--- a/packages/frontend/core/src/components/root-app-sidebar/index.tsx
+++ b/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>
  );
--- a/packages/frontend/core/src/components/top-tip.tsx
+++ b/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 (
--- a/packages/frontend/core/src/components/workspace-selector/user-with-workspace-list/add-workspace/index.tsx
+++ b/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 />}
--- a/packages/frontend/core/src/components/workspace-selector/workspace-card/index.tsx
+++ b/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';
--- a/packages/frontend/core/src/components/workspace/index.tsx
+++ b/packages/frontend/core/src/components/workspace/index.tsx
@@ -28,8 +28,9 @@ export const AppContainer = ({
  className,
  ...rest
 }: WorkspaceRootProps) => {
-  const noisyBackground = useNoisyBackground && environment.isElectron;
-  const blurBackground = environment.isElectron && useBlurBackground;
+  const noisyBackground = BUILD_CONFIG.isElectron && useNoisyBackground;
+  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}
--- a/packages/frontend/core/src/hooks/affine/use-register-find-in-page-commands.ts
+++ b/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> = [];
--- a/packages/frontend/core/src/hooks/affine/use-shortcuts.ts
+++ b/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,
  };
 };
--- a/packages/frontend/core/src/hooks/use-app-config-storage.ts
+++ b/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 = environment.isElectron
+const storage = BUILD_CONFIG.isElectron
  ? new AppConfigStorage({
      config: defaultAppConfig,
      get: () => appConfigProxy.get(),
--- a/packages/frontend/core/src/hooks/use-app-updater.ts
+++ b/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;
    }
--- a/packages/frontend/core/src/hooks/use-global-state.ts
+++ b/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;
    }

--- a/packages/frontend/core/src/layouts/workspace-layout.tsx
+++ b/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}>
--- a/packages/frontend/core/src/mixpanel/mixpanel.ts
+++ b/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),
-        isDesktop: environment.isElectron,
+        isSelfHosted: BUILD_CONFIG.isSelfHosted,
+        isDesktop: BUILD_CONFIG.isElectron,
      });
    },
    reset() {
--- a/packages/frontend/core/src/modules/app-tabs-header/views/app-tabs-header.tsx
+++ b/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>
  );
 };
--- a/packages/frontend/core/src/modules/cloud/services/auth.ts
+++ b/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',
--- a/packages/frontend/core/src/modules/cloud/services/fetch.ts
+++ b/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;
--- a/packages/frontend/core/src/modules/cloud/stores/subscription.ts
+++ b/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();
--- a/packages/frontend/core/src/modules/explorer/views/nodes/collection/operations.tsx
+++ b/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,
--- a/packages/frontend/core/src/modules/explorer/views/nodes/doc/operations.tsx
+++ b/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,
--- a/packages/frontend/core/src/modules/explorer/views/nodes/tag/operations.tsx
+++ b/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,
--- a/packages/frontend/core/src/modules/navigation/entities/navigator.ts
+++ b/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();
--- a/packages/frontend/core/src/modules/navigation/view/navigation-buttons.tsx
+++ b/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
--- a/packages/frontend/core/src/modules/peek-view/view/peek-view-controls.tsx
+++ b/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'](),
--- a/packages/frontend/core/src/modules/workbench/services/desktop-state-synchronizer.ts
+++ b/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;
    }

--- a/packages/frontend/core/src/modules/workbench/view/route-container.tsx
+++ b/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}
--- a/packages/frontend/core/src/modules/workbench/view/sidebar/sidebar-container.tsx
+++ b/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
            )}
          />
        ))
--- a/packages/frontend/core/src/modules/workbench/view/sidebar/sidebar-header.tsx
+++ b/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} />
--- a/packages/frontend/core/src/modules/workbench/view/workbench-link.tsx
+++ b/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';
          }
--- a/packages/frontend/core/src/modules/workbench/view/workbench-root.tsx
+++ b/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;

--- a/packages/frontend/core/src/modules/workspace-engine/impls/local.ts
+++ b/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);
    }

--- a/packages/frontend/core/src/pages/auth/common.ts
+++ b/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'] : []),
 ]);
--- a/packages/frontend/core/src/pages/auth/sign-in.tsx
+++ b/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) {
--- a/packages/frontend/core/src/pages/onboarding.tsx
+++ b/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);
--- a/packages/frontend/core/src/pages/workspace/detail-page/detail-page.tsx
+++ b/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. */}
--- a/packages/frontend/core/src/pages/workspace/detail-page/use-header-responsive.ts
+++ b/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) &&
-    !environment.isElectron;
+    !(hidePresent && hideShare);

  return {
    hideShare,
--- a/packages/frontend/core/src/pages/workspace/index.tsx
+++ b/packages/frontend/core/src/pages/workspace/index.tsx
@@ -99,8 +99,8 @@ export const Component = (): ReactElement => {

  if (workspaceNotFound) {
    if (
-      detailDocRoute /*  */ &&
-      !environment.isElectron /* only browser has share page */
+      !BUILD_CONFIG.isElectron /* only browser has share page */ &&
+      detailDocRoute
    ) {
      return (
        <SharePage
--- a/packages/frontend/core/src/providers/modal-provider.tsx
+++ b/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}