style: restrict type import (#1589)

apps/web/src/components/__debug__/client/Editor.tsx

@@ -1,7 +1,9 @@
 'use client';
-import { EditorContainer } from '@blocksuite/editor';
-import { assertEquals, assertExists, Generator, Page } from '@blocksuite/store';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import type { EditorContainer } from '@blocksuite/editor';
+import type { Page } from '@blocksuite/store';
+import { assertEquals, assertExists, Generator } from '@blocksuite/store';
+import type React from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 
 import { createEmptyBlockSuiteWorkspace } from '../../../utils';
 import { BlockSuiteEditor } from '../../blocksuite/block-suite-editor';

apps/web/src/components/__tests__/ProviderComposer.spec.tsx

@@ -2,7 +2,8 @@
  * @vitest-environment happy-dom
  */
 import { render } from '@testing-library/react';
-import React, { createContext, useContext } from 'react';
+import type React from 'react';
+import { createContext, useContext } from 'react';
 import { expect, test } from 'vitest';
 
 import { ProviderComposer } from '../provider-composer';

apps/web/src/components/__tests__/WorkSpaceSliderBar.spec.tsx

@@ -7,7 +7,8 @@ import { assertExists } from '@blocksuite/store';
 import { render, renderHook } from '@testing-library/react';
 import { createStore, getDefaultStore, Provider } from 'jotai';
 import { useRouter } from 'next/router';
-import React, { useCallback } from 'react';
+import type React from 'react';
+import { useCallback } from 'react';
 import { beforeEach, describe, expect, test, vi } from 'vitest';
 
 import { workspacesAtom } from '../../atoms';

apps/web/src/components/affine/affine-error-eoundary.tsx

@@ -1,8 +1,10 @@
 import { RequestError } from '@affine/datacenter';
-import { NextRouter } from 'next/router';
-import React, { Component, ErrorInfo } from 'react';
+import type { NextRouter } from 'next/router';
+import type { ErrorInfo } from 'react';
+import type React from 'react';
+import { Component } from 'react';
 
-import { BlockSuiteWorkspace } from '../../shared';
+import type { BlockSuiteWorkspace } from '../../shared';
 
 export type AffineErrorBoundaryProps = React.PropsWithChildren<{
   router: NextRouter;

apps/web/src/components/affine/enable-affine-cloud-modal/index.tsx

@@ -1,7 +1,7 @@
 import { IconButton, Modal, ModalWrapper } from '@affine/component';
 import { useTranslation } from '@affine/i18n';
 import { CloseIcon } from '@blocksuite/icons';
-import React from 'react';
+import type React from 'react';
 
 import { useCurrentUser } from '../../../hooks/current/use-current-user';
 import { Content, ContentTitle, Header, StyleButton, StyleTips } from './style';

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

@@ -1,7 +1,7 @@
 import { IconButton, Modal, ModalWrapper } from '@affine/component';
 import { useTranslation } from '@affine/i18n';
 import { CloseIcon } from '@blocksuite/icons';
-import React from 'react';
+import type React from 'react';
 
 import { useCurrentUser } from '../../../hooks/current/use-current-user';
 import { Content, ContentTitle, Header, StyleButton, StyleTips } from './style';

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

@@ -1,23 +1,17 @@
 import { useTranslation } from '@affine/i18n';
-import React, {
-  MouseEvent,
-  Suspense,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-} from 'react';
+import type { MouseEvent } from 'react';
+import type React from 'react';
+import { Suspense, useCallback, useEffect, useMemo, useRef } from 'react';
 import { preload } from 'swr';
 
 import { useIsWorkspaceOwner } from '../../../hooks/affine/use-is-workspace-owner';
 import { fetcher, QueryKey } from '../../../plugins/affine/fetcher';
-import {
+import type {
   AffineOfficialWorkspace,
   FlavourToWorkspace,
-  RemWorkspaceFlavour,
   SettingPanel,
-  settingPanel,
 } from '../../../shared';
+import { RemWorkspaceFlavour, settingPanel } from '../../../shared';
 import { CollaborationPanel } from './panel/collaboration';
 import { ExportPanel } from './panel/export';
 import { GeneralPanel } from './panel/general';

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

@@ -13,17 +13,15 @@ import {
   EmailIcon,
   MoreVerticalIcon,
 } from '@blocksuite/icons';
-import React, { useCallback, useState } from 'react';
+import type React from 'react';
+import { useCallback, useState } from 'react';
 
 import { useMembers } from '../../../../../hooks/affine/use-members';
-import {
-  AffineWorkspace,
-  LocalWorkspace,
-  RemWorkspaceFlavour,
-} from '../../../../../shared';
+import type { AffineWorkspace, LocalWorkspace } from '../../../../../shared';
+import { RemWorkspaceFlavour } from '../../../../../shared';
 import { Unreachable } from '../../../affine-error-eoundary';
 import { TransformWorkspaceToAffineModal } from '../../../transform-workspace-to-affine-modal';
-import { PanelProps } from '../../index';
+import type { PanelProps } from '../../index';
 import { InviteMemberModal } from './invite-member-modal';
 import {
   StyledMemberAvatar,

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

@@ -5,7 +5,8 @@ import { Input } from '@affine/component';
 import { MuiAvatar } from '@affine/component';
 import { useTranslation } from '@affine/i18n';
 import { EmailIcon } from '@blocksuite/icons';
-import React, { Suspense, useCallback, useState } from 'react';
+import type React from 'react';
+import { Suspense, useCallback, useState } from 'react';
 
 import { useMembers } from '../../../../../../hooks/affine/use-members';
 import { useUsersByEmail } from '../../../../../../hooks/affine/use-users-by-email';

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

@@ -3,10 +3,8 @@ import { Trans, useTranslation } from '@affine/i18n';
 import { useCallback, useState } from 'react';
 
 import { useBlockSuiteWorkspaceName } from '../../../../../../hooks/use-blocksuite-workspace-name';
-import {
-  AffineOfficialWorkspace,
-  RemWorkspaceFlavour,
-} from '../../../../../../shared';
+import type { AffineOfficialWorkspace } from '../../../../../../shared';
+import { RemWorkspaceFlavour } from '../../../../../../shared';
 import {
   StyledButtonContent,
   StyledInputContent,

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

@@ -1,6 +1,7 @@
 import { Button, FlexWrapper, MuiFade } from '@affine/component';
 import { useTranslation } from '@affine/i18n';
-import React, { useState } from 'react';
+import type React from 'react';
+import { useState } from 'react';
 
 import { useIsWorkspaceOwner } from '../../../../../hooks/affine/use-is-workspace-owner';
 import { useBlockSuiteWorkspaceAvatarUrl } from '../../../../../hooks/use-blocksuite-workspace-avatar-url';
@@ -13,7 +14,7 @@ import {
   LocalWorkspaceIcon,
 } from '../../../../pure/icons';
 import { WorkspaceAvatar } from '../../../../pure/workspace-avatar';
-import { PanelProps } from '../../index';
+import type { PanelProps } from '../../index';
 import { StyledRow, StyledSettingKey } from '../../style';
 import { WorkspaceDeleteModal } from './delete';
 import { CameraIcon } from './icons';

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

@@ -8,18 +8,19 @@ import {
 } from '@affine/component';
 import { useTranslation } from '@affine/i18n';
 import { Box } from '@mui/material';
-import React, { useCallback, useEffect, useState } from 'react';
+import type React from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
 import { useToggleWorkspacePublish } from '../../../../../hooks/affine/use-toggle-workspace-publish';
-import {
+import type {
   AffineOfficialWorkspace,
   AffineWorkspace,
   LocalWorkspace,
-  RemWorkspaceFlavour,
 } from '../../../../../shared';
+import { RemWorkspaceFlavour } from '../../../../../shared';
 import { Unreachable } from '../../../affine-error-eoundary';
 import { EnableAffineCloudModal } from '../../../enable-affine-cloud-modal';
-import { WorkspaceSettingDetailProps } from '../../index';
+import type { WorkspaceSettingDetailProps } from '../../index';
 
 export type PublishPanelProps = WorkspaceSettingDetailProps & {
   workspace: AffineOfficialWorkspace;

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

@@ -1,13 +1,13 @@
 import { Content, FlexWrapper, styled } from '@affine/component';
 import { Trans, useTranslation } from '@affine/i18n';
-import React from 'react';
+import type React from 'react';
 
 import { useCurrentUser } from '../../../../../hooks/current/use-current-user';
 import { useBlockSuiteWorkspaceAvatarUrl } from '../../../../../hooks/use-blocksuite-workspace-avatar-url';
 import { useBlockSuiteWorkspaceName } from '../../../../../hooks/use-blocksuite-workspace-name';
 import { RemWorkspaceFlavour } from '../../../../../shared';
 import { WorkspaceAvatar } from '../../../../pure/footer';
-import { PanelProps } from '../../index';
+import type { PanelProps } from '../../index';
 
 export const StyledWorkspaceName = styled('span')(({ theme }) => {
   return {

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

@@ -1,6 +1,6 @@
-import React from 'react';
+import type React from 'react';
 
-import { BlockSuiteWorkspace } from '../../../shared';
+import type { BlockSuiteWorkspace } from '../../../shared';
 import PageList from './page-list';
 
 export type BlockSuitePageListProps = {

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

@@ -1,5 +1,6 @@
-import { TableCell, TableCellProps } from '@affine/component';
-import { PageMeta } from '@blocksuite/store';
+import type { TableCellProps } from '@affine/component';
+import { TableCell } from '@affine/component';
+import type { PageMeta } from '@blocksuite/store';
 import dayjs from 'dayjs';
 import localizedFormat from 'dayjs/plugin/localizedFormat';
 import React from 'react';

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

@@ -17,8 +17,9 @@ import {
   OpenInNewIcon,
   ResetIcon,
 } from '@blocksuite/icons';
-import { PageMeta } from '@blocksuite/store';
-import React, { useState } from 'react';
+import type { PageMeta } from '@blocksuite/store';
+import type React from 'react';
+import { useState } from 'react';
 
 export type OperationCellProps = {
   pageMeta: PageMeta;

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

@@ -13,19 +13,20 @@ import {
   FavoriteIcon,
   PageIcon,
 } from '@blocksuite/icons';
-import { PageMeta } from '@blocksuite/store';
+import type { PageMeta } from '@blocksuite/store';
 import {
   useMediaQuery,
   useTheme as useMuiTheme,
   useTheme,
 } from '@mui/material';
-import React, { useMemo } from 'react';
+import type React from 'react';
+import { useMemo } from 'react';
 
 import {
   usePageMeta,
   usePageMetaHelper,
 } from '../../../../hooks/use-page-meta';
-import { BlockSuiteWorkspace } from '../../../../shared';
+import type { BlockSuiteWorkspace } from '../../../../shared';
 import DateCell from './DateCell';
 import Empty from './Empty';
 import { OperationCell, TrashOperationCell } from './OperationCell';

apps/web/src/components/blocksuite/header/editor-mode-switch/CustomLottie.tsx

@@ -1,5 +1,6 @@
 import lottie from 'lottie-web';
-import { FC, useEffect, useRef } from 'react';
+import type { FC } from 'react';
+import { useEffect, useRef } from 'react';
 
 type CustomLottieProps = {
   options: {

apps/web/src/components/blocksuite/header/editor-mode-switch/index.tsx

@@ -1,12 +1,12 @@
 import { toast } from '@affine/component';
 import { assertExists } from '@blocksuite/store';
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 
 import {
   usePageMeta,
   usePageMetaHelper,
 } from '../../../../hooks/use-page-meta';
-import { BlockSuiteWorkspace } from '../../../../shared';
+import type { BlockSuiteWorkspace } from '../../../../shared';
 import { StyledEditorModeSwitch } from './style';
 import { EdgelessSwitchItem, PageSwitchItem } from './switch-items';
 

apps/web/src/components/blocksuite/header/editor-mode-switch/switch-items.tsx

@@ -1,4 +1,6 @@
-import React, { cloneElement, HTMLAttributes, useState } from 'react';
+import type { HTMLAttributes } from 'react';
+import type React from 'react';
+import { cloneElement, useState } from 'react';
 
 import Lottie from './CustomLottie';
 import { StyledSwitchItem } from './style';

apps/web/src/components/blocksuite/header/header-right-items/SyncUser.tsx

@@ -11,11 +11,11 @@ import React, { useEffect, useState } from 'react';
 
 import { useCurrentWorkspace } from '../../../../hooks/current/use-current-workspace';
 import { useTransformWorkspace } from '../../../../hooks/use-transform-workspace';
-import {
+import type {
   AffineOfficialWorkspace,
   LocalWorkspace,
-  RemWorkspaceFlavour,
 } from '../../../../shared';
+import { RemWorkspaceFlavour } from '../../../../shared';
 import { apis } from '../../../../shared/apis';
 import { TransformWorkspaceToAffineModal } from '../../../affine/transform-workspace-to-affine-modal';
 

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

@@ -1,13 +1,8 @@
 import { useTranslation } from '@affine/i18n';
 import { CloseIcon } from '@blocksuite/icons';
-import React, {
-  forwardRef,
-  HTMLAttributes,
-  PropsWithChildren,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react';
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+import type React from 'react';
+import { forwardRef, useEffect, useMemo, useState } from 'react';
 
 import { useSidebarStatus } from '../../../hooks/affine/use-sidebar-status';
 import { SidebarSwitch } from '../../affine/sidebar-switch';

apps/web/src/components/blocksuite/header/index.tsx

@@ -1,15 +1,17 @@
-import { PopperProps, QuickSearchTips } from '@affine/component';
+import type { PopperProps } from '@affine/component';
+import { QuickSearchTips } from '@affine/component';
 import { getEnvironment } from '@affine/env';
 import { ArrowDownSmallIcon } from '@blocksuite/icons';
 import { assertExists } from '@blocksuite/store';
 import { useAtomValue, useSetAtom } from 'jotai';
-import { forwardRef, HTMLAttributes, useCallback, useRef } from 'react';
+import type { HTMLAttributes } from 'react';
+import { forwardRef, useCallback, useRef } from 'react';
 
 import { currentEditorAtom, openQuickSearchModalAtom } from '../../../atoms';
 import { useOpenTips } from '../../../hooks/affine/use-is-first-load';
 import { usePageMeta } from '../../../hooks/use-page-meta';
 import { useElementResizeEffect } from '../../../hooks/use-workspaces';
-import { BlockSuiteWorkspace } from '../../../shared';
+import type { BlockSuiteWorkspace } from '../../../shared';
 import { PageNotFoundError } from '../../affine/affine-error-eoundary';
 import { QuickSearchButton } from '../../pure/quick-search-button';
 import { EditorModeSwitch } from './editor-mode-switch';

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

@@ -1,6 +1,7 @@
 import { getEnvironment } from '@affine/env';
 import { Trans, useTranslation } from '@affine/i18n';
-import React, { useEffect, useState } from 'react';
+import type React from 'react';
+import { useEffect, useState } from 'react';
 
 const minimumChromeVersion = 102;
 

apps/web/src/components/page-detail-editor.tsx

@@ -1,14 +1,16 @@
 import type { EditorContainer } from '@blocksuite/editor';
-import { assertExists, Page } from '@blocksuite/store';
+import type { Page } from '@blocksuite/store';
+import { assertExists } from '@blocksuite/store';
 import { useSetAtom } from 'jotai';
 import dynamic from 'next/dynamic';
 import Head from 'next/head';
-import React, { useCallback } from 'react';
+import type React from 'react';
+import { useCallback } from 'react';
 
 import { currentEditorAtom } from '../atoms';
 import { useBlockSuiteWorkspacePageTitle } from '../hooks/use-blocksuite-workspace-page-title';
 import { usePageMeta } from '../hooks/use-page-meta';
-import { BlockSuiteWorkspace } from '../shared';
+import type { BlockSuiteWorkspace } from '../shared';
 import { PageNotFoundError } from './affine/affine-error-eoundary';
 import { BlockSuiteEditorHeader } from './blocksuite/header';
 

apps/web/src/components/provider-composer.tsx

@@ -1,4 +1,5 @@
-import { cloneElement, FC, PropsWithChildren, ReactNode } from 'react';
+import type { FC, PropsWithChildren, ReactNode } from 'react';
+import { cloneElement } from 'react';
 
 export const ProviderComposer: FC<
   PropsWithChildren<{

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

@@ -3,8 +3,8 @@ import { Modal, ModalCloseButton, ModalWrapper } from '@affine/component';
 import { Button } from '@affine/component';
 import { Input } from '@affine/component';
 import { useTranslation } from '@affine/i18n';
+import type { KeyboardEvent } from 'react';
 import { useCallback, useRef, useState } from 'react';
-import { KeyboardEvent } from 'react';
 
 interface ModalProps {
   open: boolean;

apps/web/src/components/pure/file-upload/index.tsx

@@ -1,7 +1,9 @@
 import { Button } from '@affine/component';
 import { styled } from '@affine/component';
 import { useTranslation } from '@affine/i18n';
-import React, { ChangeEvent, useRef } from 'react';
+import type { ChangeEvent } from 'react';
+import type React from 'react';
+import { useRef } from 'react';
 
 export type UploadProps = React.PropsWithChildren<{
   uploadType?: string;

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

@@ -1,10 +1,11 @@
 import { FlexWrapper } from '@affine/component';
 import { IconButton } from '@affine/component';
 import { Tooltip } from '@affine/component';
-import { AccessTokenMessage } from '@affine/datacenter';
+import type { AccessTokenMessage } from '@affine/datacenter';
 import { useTranslation } from '@affine/i18n';
 import { CloudWorkspaceIcon, SignOutIcon } from '@blocksuite/icons';
-import React, { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
+import type React from 'react';
 
 import { stringToColour } from '../../../utils';
 import { StyledFooter, StyledSignInButton, StyleUserInfo } from './styles';

apps/web/src/components/pure/message-center/index.tsx

@@ -1,7 +1,8 @@
 import { toast } from '@affine/component';
-import { MessageCode } from '@affine/datacenter';
+import type { MessageCode } from '@affine/datacenter';
 import { messages } from '@affine/datacenter';
-import React, { useEffect } from 'react';
+import type React from 'react';
+import { useEffect } from 'react';
 
 declare global {
   interface DocumentEventMap {

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

@@ -1,4 +1,5 @@
-import { IconButton, IconButtonProps } from '@affine/component';
+import type { IconButtonProps } from '@affine/component';
+import { IconButton } from '@affine/component';
 import { styled } from '@affine/component';
 import { ArrowDownSmallIcon } from '@blocksuite/icons';
 

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

@@ -3,12 +3,12 @@ import type { PageBlockModel } from '@blocksuite/blocks';
 import { PlusIcon } from '@blocksuite/icons';
 import { assertEquals, nanoid } from '@blocksuite/store';
 import { Command } from 'cmdk';
-import { NextRouter } from 'next/router';
-import React from 'react';
+import type { NextRouter } from 'next/router';
+import type React from 'react';
 
 import { useBlockSuiteWorkspaceHelper } from '../../../hooks/use-blocksuite-workspace-helper';
 import { useRouterHelper } from '../../../hooks/use-router-helper';
-import { BlockSuiteWorkspace } from '../../../shared';
+import type { BlockSuiteWorkspace } from '../../../shared';
 import { StyledModalFooterContent } from './style';
 
 export type FooterProps = {

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

@@ -2,10 +2,11 @@ import { useTranslation } from '@affine/i18n';
 import { EdgelessIcon, PageIcon } from '@blocksuite/icons';
 import { Command } from 'cmdk';
 import { useRouter } from 'next/router';
-import React, { useEffect, useMemo, useState } from 'react';
+import type React from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 import { usePageMeta } from '../../../hooks/use-page-meta';
-import { BlockSuiteWorkspace } from '../../../shared';
+import type { BlockSuiteWorkspace } from '../../../shared';
 import { NoResultSVG } from './NoResultSVG';
 import { StyledListItem, StyledNotFound } from './style';
 

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

@@ -3,14 +3,16 @@ import { useTranslation } from '@affine/i18n';
 import { EdgelessIcon, PageIcon } from '@blocksuite/icons';
 import { assertExists } from '@blocksuite/store';
 import { Command } from 'cmdk';
-import { NextRouter } from 'next/router';
-import React, { Dispatch, SetStateAction, useEffect } from 'react';
+import type { NextRouter } from 'next/router';
+import type { Dispatch, SetStateAction } from 'react';
+import type React from 'react';
+import { useEffect } from 'react';
 
 import { useRecentlyViewed } from '../../../hooks/affine/use-recent-views';
 import { useBlockSuiteWorkspaceHelper } from '../../../hooks/use-blocksuite-workspace-helper';
 import { usePageMeta } from '../../../hooks/use-page-meta';
 import { useRouterHelper } from '../../../hooks/use-router-helper';
-import { BlockSuiteWorkspace } from '../../../shared';
+import type { BlockSuiteWorkspace } from '../../../shared';
 import { useSwitchToConfig } from './config';
 import { NoResultSVG } from './NoResultSVG';
 import { StyledListItem, StyledNotFound } from './style';

apps/web/src/components/pure/quick-search-modal/config.ts

@@ -5,7 +5,8 @@ import {
   FolderIcon,
   SettingsIcon,
 } from '@blocksuite/icons';
-import { FC, SVGProps, useMemo } from 'react';
+import type { FC, SVGProps } from 'react';
+import { useMemo } from 'react';
 
 import { pathGenerator } from '../../../shared';
 export const useSwitchToConfig = (

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

@@ -2,8 +2,9 @@ import { Modal, ModalWrapper } from '@affine/component';
 import { getEnvironment } from '@affine/env';
 import { useTranslation } from '@affine/i18n';
 import { Command } from 'cmdk';
-import { NextRouter } from 'next/router';
-import React, {
+import type { NextRouter } from 'next/router';
+import type React from 'react';
+import {
   useCallback,
   useEffect,
   useMemo,
@@ -12,7 +13,7 @@ import React, {
   useTransition,
 } from 'react';
 
-import { BlockSuiteWorkspace } from '../../../shared';
+import type { BlockSuiteWorkspace } from '../../../shared';
 import { Footer } from './Footer';
 import { PublishedResults } from './PublishedResults';
 import { Results } from './Results';

apps/web/src/components/pure/workspace-avatar/index.tsx

@@ -2,7 +2,7 @@ import { UNTITLED_WORKSPACE_NAME } from '@affine/env';
 import React from 'react';
 
 import { useBlockSuiteWorkspaceAvatarUrl } from '../../../hooks/use-blocksuite-workspace-avatar-url';
-import { BlockSuiteWorkspace, RemWorkspace } from '../../../shared';
+import type { BlockSuiteWorkspace, RemWorkspace } from '../../../shared';
 import { stringToColour } from '../../../utils';
 
 interface AvatarProps {

apps/web/src/components/pure/workspace-card/index.tsx

@@ -1,10 +1,12 @@
 import { PermissionType } from '@affine/datacenter';
 import { useTranslation } from '@affine/i18n';
 import { SettingsIcon } from '@blocksuite/icons';
-import React, { useCallback } from 'react';
+import type React from 'react';
+import { useCallback } from 'react';
 
 import { useBlockSuiteWorkspaceName } from '../../../hooks/use-blocksuite-workspace-name';
-import { RemWorkspace, RemWorkspaceFlavour } from '../../../shared';
+import type { RemWorkspace } from '../../../shared';
+import { RemWorkspaceFlavour } from '../../../shared';
 import {
   CloudWorkspaceIcon,
   JoinedWorkspaceIcon,

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

@@ -4,11 +4,11 @@ import {
   ModalWrapper,
   Tooltip,
 } from '@affine/component';
-import { AccessTokenMessage } from '@affine/datacenter';
+import type { AccessTokenMessage } from '@affine/datacenter';
 import { useTranslation } from '@affine/i18n';
 import { HelpIcon, PlusIcon } from '@blocksuite/icons';
 
-import { RemWorkspace } from '../../../shared';
+import type { RemWorkspace } from '../../../shared';
 import { Footer } from '../footer';
 import { WorkspaceCard } from '../workspace-card';
 import { LanguageMenu } from './language-menu';

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

@@ -2,7 +2,8 @@ import { Button, Menu, MenuItem, styled } from '@affine/component';
 import { LOCALES } from '@affine/i18n';
 import { useTranslation } from '@affine/i18n';
 import { ArrowDownSmallIcon } from '@blocksuite/icons';
-import React, { useCallback } from 'react';
+import type React from 'react';
+import { useCallback } from 'react';
 
 const LanguageMenuContent: React.FC = () => {
   const { i18n } = useTranslation();

apps/web/src/components/pure/workspace-slider-bar/WorkspaceSelector/WorkspaceSelector.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
+import type React from 'react';
 
 import { useBlockSuiteWorkspaceName } from '../../../../hooks/use-blocksuite-workspace-name';
-import { RemWorkspace } from '../../../../shared';
+import type { RemWorkspace } from '../../../../shared';
 import { WorkspaceAvatar } from '../../workspace-avatar';
 import { SelectorWrapper, WorkspaceName } from './styles';
 

apps/web/src/components/pure/workspace-slider-bar/index.tsx

@@ -10,14 +10,15 @@ import {
   SearchIcon,
   SettingsIcon,
 } from '@blocksuite/icons';
-import { PageMeta } from '@blocksuite/store';
+import type { PageMeta } from '@blocksuite/store';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import React, { useCallback, useMemo, useState } from 'react';
+import type React from 'react';
+import { useCallback, useMemo, useState } from 'react';
 
 import { useSidebarStatus } from '../../../hooks/affine/use-sidebar-status';
 import { usePageMeta } from '../../../hooks/use-page-meta';
-import { RemWorkspace } from '../../../shared';
+import type { RemWorkspace } from '../../../shared';
 import { SidebarSwitch } from '../../affine/sidebar-switch';
 import {
   StyledLink,

apps/web/src/components/pure/workspace-title/index.tsx

@@ -1,5 +1,6 @@
 import { useSetAtom } from 'jotai';
-import React, { ReactNode } from 'react';
+import type { ReactNode } from 'react';
+import type React from 'react';
 
 import { openQuickSearchModalAtom } from '../../../atoms';
 import Header from '../../blocksuite/header/header';