refactor: environment setup (#2898)

Co-authored-by: Simon He <57086651+Simon-He95@users.noreply.github.com>

apps/web/src/components/affine/create-workspace-modal/index.tsx

@@ -8,7 +8,6 @@ import {
   Tooltip,
 } from '@affine/component';
 import { DebugLogger } from '@affine/debug';
-import { config } from '@affine/env';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { HelpIcon } from '@blocksuite/icons';
 import { useSetAtom } from 'jotai';
@@ -291,7 +290,7 @@ export const CreateWorkspaceModal = ({
       });
     } else if (mode === 'new') {
       setStep(
-        environment.isDesktop && config.enableSQLiteProvider
+        environment.isDesktop && runtimeConfig.enableSQLiteProvider
           ? 'set-db-location'
           : 'name-workspace'
       );
@@ -306,7 +305,7 @@ export const CreateWorkspaceModal = ({
   const onConfirmEnableCloudSyncing = useCallback(
     (enableCloudSyncing: boolean) => {
       (async function () {
-        if (!config.enableLegacyCloud && enableCloudSyncing) {
+        if (!runtimeConfig.enableLegacyCloud && enableCloudSyncing) {
           setOpenDisableCloudAlertModal(true);
         } else {
           let id = addedId;
@@ -346,7 +345,7 @@ export const CreateWorkspaceModal = ({
   const onConfirmName = useCallback(
     (name: string) => {
       setWorkspaceName(name);
-      if (environment.isDesktop && config.enableSQLiteProvider) {
+      if (environment.isDesktop && runtimeConfig.enableSQLiteProvider) {
         setStep('set-syncing-mode');
       } else {
         // this will be the last step for web for now

apps/web/src/components/affine/setting-modal/general-setting/about/index.tsx

@@ -1,6 +1,6 @@
 import { Switch } from '@affine/component';
 import { relatedLinks } from '@affine/component/contact-modal';
-import { env } from '@affine/env';
+import { isDesktop } from '@affine/env/constant';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { ArrowRightSmallIcon, OpenInNewIcon } from '@blocksuite/icons';
 import { useCallback } from 'react';
@@ -24,7 +24,7 @@ export const AboutAffine = () => {
   return (
     <>
       <SettingHeader title={t['About AFFiNE']()} subtitle={t['None yet']()} />
-      {IS_EXHIBITION && env.isDesktop ? (
+      {IS_EXHIBITION && isDesktop ? (
         <Wrapper title={t['Version']()}>
           <SettingRow
             name={t['Check for updates']()}

apps/web/src/components/affine/setting-modal/general-setting/appearance/index.tsx

@@ -1,5 +1,5 @@
 import { RadioButton, RadioButtonGroup, Switch } from '@affine/component';
-import { env } from '@affine/env';
+import { isDesktop } from '@affine/env/constant';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { useTheme } from 'next-themes';
 import { useCallback } from 'react';
@@ -71,7 +71,7 @@ export const AppearanceSettings = () => {
             <LanguageMenu />
           </div>
         </SettingRow>
-        {IS_EXHIBITION && env.isDesktop ? (
+        {IS_EXHIBITION && isDesktop ? (
           <SettingRow
             name={t['Client Border Style']()}
             desc={t['Customize the appearance of the client.']()}
@@ -92,7 +92,7 @@ export const AppearanceSettings = () => {
             onChange={checked => changeSwitch('fullWidthLayout', checked)}
           />
         </SettingRow>
-        {IS_EXHIBITION && env.isDesktop ? (
+        {IS_EXHIBITION && isDesktop ? (
           <SettingRow
             name={t['Window frame style']()}
             desc={t['Customize appearance of Windows Client.']()}
@@ -137,7 +137,7 @@ export const AppearanceSettings = () => {
         </Wrapper>
       ) : null}
 
-      {env.isDesktop ? (
+      {isDesktop ? (
         <Wrapper title={t['Sidebar']()}>
           <SettingRow
             name={t['Disable the noise background on the sidebar']()}

apps/web/src/components/affine/workspace-setting-detail/panel/collaboration/index.tsx

@@ -1,5 +1,4 @@
 import { Button, IconButton, Menu, MenuItem, Wrapper } from '@affine/component';
-import { config } from '@affine/env';
 import { Unreachable } from '@affine/env/constant';
 import type {
   AffineLegacyCloudWorkspace,
@@ -186,7 +185,7 @@ const LocalCollaborationPanel: React.FC<
       >
         {t['Enable AFFiNE Cloud']()}
       </Button>
-      {config.enableLegacyCloud ? (
+      {runtimeConfig.enableLegacyCloud ? (
         <TransformWorkspaceToAffineModal
           open={open}
           onClose={() => {

apps/web/src/components/affine/workspace-setting-detail/panel/export/index.tsx

@@ -1,5 +1,4 @@
 import { Button, toast, Wrapper } from '@affine/component';
-import { config } from '@affine/env';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { rootCurrentWorkspaceIdAtom } from '@affine/workspace/atom';
 import { useAtomValue } from 'jotai';
@@ -13,7 +12,9 @@ export const ExportPanel = () => {
       <Button
         type="light"
         shape="circle"
-        disabled={!environment.isDesktop || !id || !config.enableSQLiteProvider}
+        disabled={
+          !environment.isDesktop || !id || !runtimeConfig.enableSQLiteProvider
+        }
         data-testid="export-affine-backup"
         onClick={async () => {
           if (id) {

apps/web/src/components/affine/workspace-setting-detail/panel/general/index.tsx

@@ -1,6 +1,5 @@
 import { Button, toast } from '@affine/component';
 import { WorkspaceAvatar } from '@affine/component/workspace-avatar';
-import { config } from '@affine/env';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import {
   ArrowRightSmallIcon,
@@ -31,7 +30,7 @@ const useShowOpenDBFile = (workspaceId: string) => {
       window.apis &&
       window.events &&
       environment.isDesktop &&
-      config.enableSQLiteProvider
+      runtimeConfig.enableSQLiteProvider
     ) {
       window.apis.workspace
         .getMeta(workspaceId)
@@ -143,7 +142,7 @@ export const GeneralPanel: React.FC<PanelProps> = ({
           </Button>
         </div>
       </div>
-      {environment.isDesktop && config.enableSQLiteProvider ? (
+      {environment.isDesktop && runtimeConfig.enableSQLiteProvider ? (
         <DesktopClientOnly workspaceId={workspace.id} />
       ) : null}
       <div className={style.row}>
@@ -209,7 +208,7 @@ function DesktopClientOnly({ workspaceId }: { workspaceId: string }) {
   const t = useAFFiNEI18N();
   const showOpenFolder = useShowOpenDBFile(workspaceId);
   const onRevealDBFile = useCallback(() => {
-    if (environment.isDesktop && config.enableSQLiteProvider) {
+    if (environment.isDesktop && runtimeConfig.enableSQLiteProvider) {
       window.apis?.dialog.revealDBFile(workspaceId).catch(err => {
         console.error(err);
       });

apps/web/src/components/affine/workspace-setting-detail/panel/publish/index.tsx

@@ -5,8 +5,7 @@ import {
   Input,
   Wrapper,
 } from '@affine/component';
-import { config } from '@affine/env';
-import { Unreachable } from '@affine/env/constant';
+import { isBrowser, Unreachable } from '@affine/env/constant';
 import type {
   AffineLegacyCloudWorkspace,
   LocalWorkspace,
@@ -38,9 +37,7 @@ const PublishPanelAffine: React.FC<PublishPanelAffineProps> = ({
   const [origin, setOrigin] = useState('');
   useEffect(() => {
     setOrigin(
-      typeof window !== 'undefined' && window.location.origin
-        ? window.location.origin
-        : ''
+      isBrowser && window.location.origin ? window.location.origin : ''
     );
   }, []);
   const shareUrl = origin + '/public-workspace/' + workspace.id;
@@ -137,7 +134,7 @@ const PublishPanelLocal: React.FC<PublishPanelLocalProps> = ({
       >
         {t['Enable AFFiNE Cloud']()}
       </Button>
-      {config.enableLegacyCloud ? (
+      {runtimeConfig.enableLegacyCloud ? (
         <EnableAffineCloudModal
           open={open}
           onClose={() => {

apps/web/src/components/blocksuite/block-suite-page-list/index.tsx

@@ -5,7 +5,6 @@ import {
   PageList,
   PageListTrashView,
 } from '@affine/component/page-list';
-import { env } from '@affine/env';
 import type { View } from '@affine/env/filter';
 import { Trans } from '@affine/i18n';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
@@ -56,8 +55,8 @@ const PageListEmpty = (props: {
           New Page
         </button>
       );
-      if (env.isDesktop) {
-        const shortcut = env.isMacOs ? '⌘ + N' : 'Ctrl + N';
+      if (environment.isDesktop) {
+        const shortcut = environment.isMacOs ? '⌘ + N' : 'Ctrl + N';
         return (
           <Trans i18nKey="emptyAllPagesClient">
             Click on the <CreateNewPageButton /> button Or press

apps/web/src/components/blocksuite/workspace-header/download-tips.tsx

@@ -1,5 +1,5 @@
 import { DownloadTips } from '@affine/component/affine-banner';
-import { env } from '@affine/env';
+import { isDesktop } from '@affine/env/constant';
 import { useAtom } from 'jotai';
 import { useCallback } from 'react';
 
@@ -13,7 +13,7 @@ export const DownloadClientTip = () => {
     setShowDownloadClientTips(false);
   }, [setShowDownloadClientTips]);
 
-  if (!showDownloadClientTips || env.isDesktop) {
+  if (!showDownloadClientTips || isDesktop) {
     return <></>;
   }
   return <DownloadTips onClose={onCloseDownloadClient} />;

apps/web/src/components/blocksuite/workspace-header/header-right-items/share-menu.tsx

@@ -1,5 +1,4 @@
 import { ShareMenu } from '@affine/component/share-menu';
-import { config } from '@affine/env';
 import { Unreachable } from '@affine/env/constant';
 import type {
   AffineLegacyCloudWorkspace,
@@ -110,7 +109,7 @@ const LocalHeaderShareMenu: React.FC<BaseHeaderProps> = props => {
 };
 
 export const HeaderShareMenu: React.FC<BaseHeaderProps> = props => {
-  if (!config.enableLegacyCloud) {
+  if (!runtimeConfig.enableLegacyCloud) {
     return null;
   }
   if (props.workspace.flavour === WorkspaceFlavour.AFFINE) {

apps/web/src/components/blocksuite/workspace-header/header-right-items/sync-user.tsx

@@ -1,5 +1,4 @@
 import { displayFlex, IconButton, styled, Tooltip } from '@affine/component';
-import { config } from '@affine/env';
 import type { LocalWorkspace } from '@affine/env/workspace';
 import { WorkspaceFlavour } from '@affine/env/workspace';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
@@ -82,7 +81,7 @@ export const SyncUser = () => {
   const t = useAFFiNEI18N();
   const transformWorkspace = useTransformWorkspace();
 
-  if (!config.enableLegacyCloud) {
+  if (!runtimeConfig.enableLegacyCloud) {
     return null;
   }
 

apps/web/src/components/blocksuite/workspace-header/header.tsx

@@ -4,6 +4,7 @@ import {
   appSidebarOpenAtom,
 } from '@affine/component/app-sidebar';
 import { SidebarSwitch } from '@affine/component/app-sidebar/sidebar-header';
+import { isBrowser, isDesktop } from '@affine/env/constant';
 import { WorkspaceFlavour } from '@affine/env/workspace';
 import { CloseIcon, MinusIcon, RoundedRectangleIcon } from '@blocksuite/icons';
 import type { Page } from '@blocksuite/store';
@@ -148,7 +149,7 @@ const HeaderRightItems: Record<HeaderRightItemName, HeaderItem> = {
       );
     },
     availableWhen: () => {
-      return environment.isDesktop && environment.isWindows;
+      return isDesktop && isBrowser;
     },
   },
 };

apps/web/src/components/blocksuite/workspace-header/utils.tsx

@@ -1,4 +1,4 @@
-import { env } from '@affine/env';
+import { isDesktop } from '@affine/env/constant';
 import { Trans } from '@affine/i18n';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import type React from 'react';
@@ -7,18 +7,18 @@ import { useEffect, useState } from 'react';
 const minimumChromeVersion = 102;
 
 export const shouldShowWarning = () => {
-  if (env.isDesktop) {
+  if (isDesktop) {
     // even though desktop have compatibility issues, we don't want to show the warning
     return false;
   }
-  if (!env.isBrowser) {
+  if (!environment.isBrowser) {
     // disable in SSR
     return false;
   }
-  if (env.isChrome) {
-    return env.chromeVersion < minimumChromeVersion;
+  if (environment.isChrome) {
+    return environment.chromeVersion < minimumChromeVersion;
   } else {
-    return !env.isMobile;
+    return !environment.isMobile;
   }
 };
 
@@ -27,9 +27,11 @@ export const OSWarningMessage: React.FC = () => {
   const [notChrome, setNotChrome] = useState(false);
   const [notGoodVersion, setNotGoodVersion] = useState(false);
   useEffect(() => {
-    setNotChrome(env.isBrowser && !env.isChrome);
+    setNotChrome(environment.isBrowser && !environment.isChrome);
     setNotGoodVersion(
-      env.isBrowser && env.isChrome && env.chromeVersion < minimumChromeVersion
+      environment.isBrowser &&
+        environment.isChrome &&
+        environment.chromeVersion < minimumChromeVersion
     );
   }, []);
 

apps/web/src/components/pure/footer/index.tsx

@@ -1,7 +1,6 @@
 import { FlexWrapper } from '@affine/component';
 import { IconButton } from '@affine/component';
 import { Tooltip } from '@affine/component';
-import { config } from '@affine/env';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import type { AccessTokenMessage } from '@affine/workspace/affine/login';
 import { CloudWorkspaceIcon, SignOutIcon } from '@blocksuite/icons';
@@ -62,7 +61,7 @@ export const Footer: React.FC<FooterProps> = ({ user, onLogin, onLogout }) => {
             </div>
           }
           onClick={async () => {
-            if (!config.enableLegacyCloud) {
+            if (!runtimeConfig.enableLegacyCloud) {
               setOpen(true);
             } else {
               onLogin();

apps/web/src/components/pure/help-island/index.tsx

@@ -1,5 +1,4 @@
 import { MuiFade, Tooltip } from '@affine/component';
-import { config, env } from '@affine/env';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { CloseIcon, NewIcon, UserGuideIcon } from '@blocksuite/icons';
 import { useAtom } from 'jotai';
@@ -28,7 +27,7 @@ const DEFAULT_SHOW_LIST: IslandItemNames[] = [
 const DESKTOP_SHOW_LIST: IslandItemNames[] = [...DEFAULT_SHOW_LIST, 'guide'];
 export type IslandItemNames = 'whatNew' | 'contact' | 'shortcuts' | 'guide';
 export const HelpIsland = ({
-  showList = env.isDesktop ? DESKTOP_SHOW_LIST : DEFAULT_SHOW_LIST,
+  showList = environment.isDesktop ? DESKTOP_SHOW_LIST : DEFAULT_SHOW_LIST,
 }: {
   showList?: IslandItemNames[];
 }) => {
@@ -73,7 +72,7 @@ export const HelpIsland = ({
               <StyledIconWrapper
                 data-testid="right-bottom-change-log-icon"
                 onClick={() => {
-                  window.open(config.changelogUrl, '_blank');
+                  window.open(runtimeConfig.changelogUrl, '_blank');
                 }}
               >
                 <NewIcon />

apps/web/src/components/pure/quick-search-modal/index.tsx

@@ -1,5 +1,4 @@
 import { Modal, ModalWrapper } from '@affine/component';
-import { env } from '@affine/env';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { Command } from 'cmdk';
 import type { NextRouter } from 'next/router';
@@ -26,10 +25,6 @@ import {
   StyledShortcut,
 } from './style';
 
-const isMac = () => {
-  return env.isBrowser && env.isMacOs;
-};
-
 export type QuickSearchModalProps = {
   blockSuiteWorkspace: BlockSuiteWorkspace;
   open: boolean;
@@ -149,7 +144,11 @@ export const QuickSearchModal: React.FC<QuickSearchModalProps> = ({
                   : t['Quick search placeholder']()
               }
             />
-            <StyledShortcut>{isMac() ? '⌘ + K' : 'Ctrl + K'}</StyledShortcut>
+            <StyledShortcut>
+              {environment.isBrowser && environment.isMacOs
+                ? '⌘ + K'
+                : 'Ctrl + K'}
+            </StyledShortcut>
           </StyledModalHeader>
           <StyledModalDivider
             style={{ display: isPublicAndNoQuery() ? 'none' : '' }}

apps/web/src/components/pure/quick-search-modal/results.tsx

@@ -1,4 +1,4 @@
-import { UNTITLED_WORKSPACE_NAME } from '@affine/env';
+import { UNTITLED_WORKSPACE_NAME } from '@affine/env/constant';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { EdgelessIcon, PageIcon } from '@blocksuite/icons';
 import { assertExists } from '@blocksuite/store';

apps/web/src/components/pure/workspace-list-modal/index.tsx

@@ -8,7 +8,6 @@ import {
 } from '@affine/component';
 import { ScrollableContainer } from '@affine/component';
 import { WorkspaceList } from '@affine/component/workspace-list';
-import { config } from '@affine/env/config';
 import type {
   AffineLegacyCloudWorkspace,
   LocalWorkspace,
@@ -66,7 +65,7 @@ const CreateWorkspaceCard = ({
   const t = useAFFiNEI18N();
   const anchorEL = useRef<HTMLDivElement>(null);
 
-  if (config.enableSQLiteProvider && environment.isDesktop) {
+  if (runtimeConfig.enableSQLiteProvider && environment.isDesktop) {
     return (
       <Menu
         placement="auto"

apps/web/src/components/root-app-sidebar/index.tsx

@@ -10,7 +10,7 @@ import {
   SidebarContainer,
   SidebarScrollableContainer,
 } from '@affine/component/app-sidebar';
-import { config } from '@affine/env';
+import { isDesktop } from '@affine/env/constant';
 import { WorkspaceFlavour } from '@affine/env/workspace';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import {
@@ -105,14 +105,14 @@ export const RootAppSidebar = ({
 
   // Listen to the "New Page" action from the menu
   useEffect(() => {
-    if (environment.isDesktop) {
+    if (isDesktop) {
       return window.events?.applicationMenu.onNewPageAction(onClickNewPage);
     }
   }, [onClickNewPage]);
 
   const [sidebarOpen, setSidebarOpen] = useAtom(appSidebarOpenAtom);
   useEffect(() => {
-    if (environment.isDesktop && typeof sidebarOpen === 'boolean') {
+    if (isDesktop && typeof sidebarOpen === 'boolean') {
       window.apis?.ui.handleSidebarVisibilityChange(sidebarOpen).catch(err => {
         console.error(err);
       });
@@ -177,7 +177,7 @@ export const RootAppSidebar = ({
           >
             <span data-testid="settings">{t['Settings']()}</span>
           </RouteMenuLinkItem>
-          {config.enableNewSettingModal ? (
+          {runtimeConfig.enableNewSettingModal ? (
             <MenuItem icon={<SettingsIcon />} onClick={onOpenSettingModal}>
               <span data-testid="new-settings">
                 {t['Settings']()}
@@ -203,7 +203,7 @@ export const RootAppSidebar = ({
           {blockSuiteWorkspace && (
             <FavoriteList currentWorkspace={currentWorkspace} />
           )}
-          {config.enableLegacyCloud &&
+          {runtimeConfig.enableLegacyCloud &&
             (currentWorkspace?.flavour === WorkspaceFlavour.AFFINE &&
             currentWorkspace.public ? (
               <RouteMenuLinkItem
@@ -235,7 +235,7 @@ export const RootAppSidebar = ({
           </RouteMenuLinkItem>
         </SidebarScrollableContainer>
         <SidebarContainer>
-          {environment.isDesktop && <AppUpdaterButton />}
+          {isDesktop && <AppUpdaterButton />}
           <div />
           <AddPageButton onClick={onClickNewPage} />
         </SidebarContainer>

apps/web/src/components/workspace-header.tsx

@@ -5,7 +5,6 @@ import {
   useAllPageSetting,
   ViewList,
 } from '@affine/component/page-list';
-import { config } from '@affine/env';
 import type { WorkspaceHeaderProps } from '@affine/env/workspace';
 import { WorkspaceFlavour, WorkspaceSubPath } from '@affine/env/workspace';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
@@ -40,7 +39,7 @@ export function WorkspaceHeader({
               }}
             />
           </div>
-          {config.enableAllPageFilter && (
+          {runtimeConfig.enableAllPageFilter && (
             <div>
               {setting.currentView.id !== NIL ||
               (setting.currentView.id === NIL &&