refactor: environment setup (#2898)

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

packages/component/src/components/app-sidebar/app-updater-button/index.jotai.ts

@@ -1,4 +1,4 @@
-import { env } from '@affine/env/config';
+import { isBrowser } from '@affine/env/constant';
 import { atomWithObservable, atomWithStorage } from 'jotai/utils';
 import { Observable } from 'rxjs';
 
@@ -22,7 +22,7 @@ function rpcToObservable<
   return new Observable<T>(subscriber => {
     subscriber.next(initialValue);
     onSubscribe?.();
-    if (typeof window === 'undefined' || !env.isDesktop || !event) {
+    if (!isBrowser || !environment.isDesktop || !event) {
       subscriber.complete();
       return;
     }

packages/component/src/components/app-sidebar/app-updater-button/index.tsx

@@ -1,5 +1,4 @@
-import { config } from '@affine/env/config';
-import { Unreachable } from '@affine/env/constant';
+import { isBrowser, Unreachable } from '@affine/env/constant';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { CloseIcon, NewIcon, ResetIcon } from '@blocksuite/icons';
 import clsx from 'clsx';
@@ -20,7 +19,7 @@ interface AddPageButtonProps {
 }
 
 const currentVersionAtom = atom(async () => {
-  if (typeof window === 'undefined') {
+  if (!isBrowser) {
     return null;
   }
   const currentVersion = await window.apis?.updater.currentVersion();
@@ -28,7 +27,7 @@ const currentVersionAtom = atom(async () => {
 });
 
 const currentChangelogUnreadAtom = atom(async get => {
-  if (typeof window === 'undefined') {
+  if (!isBrowser) {
     return false;
   }
   const mapping = get(changelogCheckedAtom);
@@ -79,7 +78,7 @@ export function AppUpdaterButton({ className, style }: AddPageButtonProps) {
         );
       }
     } else if (currentChangelogUnread) {
-      window.open(config.changelogUrl, '_blank');
+      window.open(runtimeConfig.changelogUrl, '_blank');
       onDismissCurrentChangelog();
     } else {
       throw new Unreachable();

packages/component/src/components/app-sidebar/index.tsx

@@ -1,4 +1,3 @@
-import { env } from '@affine/env';
 import { Skeleton } from '@mui/material';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import clsx from 'clsx';
@@ -84,7 +83,7 @@ export function AppSidebar(props: AppSidebarProps): ReactElement {
   // disable animation to avoid UI flash
   const enableAnimation = useEnableAnimation();
 
-  const isMacosDesktop = env.isDesktop && env.isMacOs;
+  const isMacosDesktop = environment.isDesktop && environment.isMacOs;
   if (initialRender) {
     // avoid the UI flash
     return <div />;
@@ -97,7 +96,7 @@ export function AppSidebar(props: AppSidebarProps): ReactElement {
           [navWidthVar]: `${appSidebarWidth}px`,
         })}
         className={clsx(navWrapperStyle, {
-          'has-background': env.isDesktop && props.hasBackground,
+          'has-background': environment.isDesktop && props.hasBackground,
         })}
         data-open={open}
         data-is-macos-electron={isMacosDesktop}

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

@@ -1,19 +1,19 @@
-import { env } from '@affine/env/config';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { SearchIcon } from '@blocksuite/icons';
 import clsx from 'clsx';
+import type { HTMLAttributes } from 'react';
 
 import { Spotlight } from '../spolight';
 import * as styles from './index.css';
 
-interface QuickSearchInputProps extends React.HTMLAttributes<HTMLDivElement> {
+interface QuickSearchInputProps extends HTMLAttributes<HTMLDivElement> {
   onClick?: () => void;
 }
 
 // Although it is called an input, it is actually a button.
 export function QuickSearchInput({ onClick, ...props }: QuickSearchInputProps) {
   const t = useAFFiNEI18N();
-  const isMac = env.isBrowser && env.isMacOs;
+  const isMac = environment.isBrowser && environment.isMacOs;
 
   return (
     <div

packages/component/src/components/app-sidebar/sidebar-header/index.tsx

@@ -1,4 +1,3 @@
-import { env } from '@affine/env/config';
 import { ArrowLeftSmallIcon, ArrowRightSmallIcon } from '@blocksuite/icons';
 import { useAtomValue } from 'jotai';
 
@@ -20,9 +19,9 @@ export const SidebarHeader = (props: SidebarHeaderProps) => {
   const open = useAtomValue(appSidebarOpenAtom);
   return (
     <div className={navHeaderStyle} data-open={open}>
-      {env.isDesktop && (
+      {environment.isDesktop && (
         <>
-          {env.isMacOs && <div style={{ flex: 1 }} />}
+          {environment.isMacOs && <div style={{ flex: 1 }} />}
           <IconButton
             size="middle"
             data-testid="app-sidebar-arrow-button-back"
@@ -50,7 +49,7 @@ export const SidebarHeader = (props: SidebarHeaderProps) => {
             <ArrowRightSmallIcon />
           </IconButton>
 
-          {!env.isMacOs && <div style={{ flex: 1 }} />}
+          {!environment.isMacOs && <div style={{ flex: 1 }} />}
         </>
       )}
       {open && <SidebarSwitch />}