chore: strict eslint check (#1084)

.eslintignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+.next

.eslintrc.js

@@ -0,0 +1,64 @@
+module.exports = {
+  root: true,
+  settings: {
+    react: {
+      version: '18',
+    },
+    next: {
+      rootDir: 'apps/web',
+    },
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:@typescript-eslint/recommended',
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaFeatures: {
+      globalReturn: false,
+      impliedStrict: true,
+      jsx: true,
+    },
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+  },
+  plugins: [
+    'react',
+    '@typescript-eslint',
+    'simple-import-sort',
+    'import',
+    'unused-imports',
+  ],
+  rules: {
+    'no-undef': 'off',
+    'no-empty': 'off',
+    'no-func-assign': 'off',
+    'no-cond-assign': 'off',
+    'react/react-in-jsx-scope': 'off',
+    '@typescript-eslint/no-non-null-assertion': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/no-empty-function': 'off',
+    '@typescript-eslint/no-unused-vars': 'off',
+    'simple-import-sort/imports': 'error',
+    'simple-import-sort/exports': 'error',
+    '@typescript-eslint/ban-ts-comment': 0,
+    '@typescript-eslint/no-restricted-imports': [
+      'error',
+      {
+        patterns: [
+          {
+            group: ['**/dist'],
+            message: "Don't import from dist",
+            allowTypeImports: false,
+          },
+          {
+            group: ['**/src'],
+            message: "Don't import from src",
+            allowTypeImports: false,
+          },
+        ],
+      },
+    ],
+  },
+};

apps/desktop/package.json

@@ -36,31 +36,9 @@
     "@types/node": "^18.11.17",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
-    "@typescript-eslint/eslint-plugin": "5.47.0",
-    "@typescript-eslint/parser": "5.47.0",
     "concurrently": "^7.6.0",
     "cross-env": "^7.0.3",
     "esbuild": "^0.16.10",
-    "eslint": "8.30.0",
-    "eslint-config-prettier": "8.5.0",
-    "eslint-config-standard": "^17.0.0",
-    "eslint-config-standard-with-typescript": "24.0.0",
-    "eslint-import-resolver-alias": "1.1.2",
-    "eslint-import-resolver-typescript": "3.5.2",
-    "eslint-plugin-autofix": "1.1.0",
-    "eslint-plugin-html": "7.1.0",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-n": "^15.6.0",
-    "eslint-plugin-node": "11.1.0",
-    "eslint-plugin-prettier": "4.2.1",
-    "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-react": "7.31.11",
-    "eslint-plugin-react-hooks": "4.6.0",
-    "eslint-plugin-security": "1.5.0",
-    "eslint-plugin-security-node": "1.1.1",
-    "eslint-plugin-typescript-sort-keys": "2.1.0",
-    "eslint-plugin-unicorn": "45.0.2",
-    "eslint-plugin-unused-imports": "2.0.0",
     "prettier": "2.8.1",
     "rimraf": "^3.0.2",
     "typescript": "^4.9.4",

apps/desktop/src/preload/components/enable-workspace-modal/index.tsx

@@ -1,12 +1,14 @@
 import { Modal, ModalWrapper } from '@affine/component';
 import { IconButton } from '@affine/component';
-import { useTranslation } from '@affine/i18n';
-import { useCallback, useState } from 'react';
-import router from 'next/router';
 import { toast } from '@affine/component';
+import { useTranslation } from '@affine/i18n';
 import { CloseIcon } from '@blocksuite/icons';
+import router from 'next/router';
+import { useCallback, useState } from 'react';
+
 import { useGlobalState } from '@/store/app';
-import { Header, Content, ContentTitle, StyleTips, StyleButton } from './style';
+
+import { Content, ContentTitle, Header, StyleButton, StyleTips } from './style';
 
 interface EnableWorkspaceModalProps {
   open: boolean;

apps/desktop/src/preload/components/icons/index.tsx

@@ -1,8 +1,8 @@
 import {
-  JoinedWorkspaceIcon as DefaultJoinedWorkspaceIcon,
-  LocalWorkspaceIcon as DefaultLocalWorkspaceIcon,
   CloudWorkspaceIcon as DefaultCloudWorkspaceIcon,
+  JoinedWorkspaceIcon as DefaultJoinedWorkspaceIcon,
   LocalDataIcon as DefaultLocalDataIcon,
+  LocalWorkspaceIcon as DefaultLocalWorkspaceIcon,
   PublishIcon as DefaultPublishIcon,
 } from '@blocksuite/icons';
 

apps/web/.eslintrc

@@ -0,0 +1,4 @@
+{
+  "root": false,
+  "extends": "next/core-web-vitals"
+}

apps/web/package.json

@@ -47,10 +47,7 @@
     "@types/react-dom": "18.0.6",
     "@types/wicg-file-system-access": "^2020.9.5",
     "chalk": "^4.1.2",
-    "eslint": "8.22.0",
     "eslint-config-next": "12.3.1",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-prettier": "^4.2.1",
     "raw-loader": "^4.0.2",
     "typescript": "^4.9.5"
   },

apps/web/scripts/__tests__/printer.spec.ts

@@ -1,5 +1,7 @@
-import { test, expect } from '@playwright/test';
+import { expect, test } from '@playwright/test';
+
 import { printer } from './../printer';
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 const chalk = require('chalk');
 test.describe('printer', () => {
   test('test debug', () => {

apps/web/scripts/gitInfo.js

@@ -1,6 +1,7 @@
 // @ts-check
 
 // import { execSync } from 'child_process'
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 const { execSync } = require('child_process');
 
 const hasGit = () => {

apps/web/scripts/printer.js

@@ -1,3 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 const chalk = require('chalk');
 const printer = {
   debug: msg => {

apps/web/src/components/404/index.tsx

@@ -1,7 +1,8 @@
-import { NotFoundTitle, PageContainer } from './styles';
-import { useTranslation } from '@affine/i18n';
 import { Button } from '@affine/component';
+import { useTranslation } from '@affine/i18n';
 import { useRouter } from 'next/router';
+
+import { NotFoundTitle, PageContainer } from './styles';
 export const NotfoundPage = () => {
   const { t } = useTranslation();
   const router = useRouter();

apps/web/src/components/contact-modal/index.tsx

@@ -1,29 +1,31 @@
 import { Modal, ModalCloseButton, ModalWrapper } from '@affine/component';
-import {
+import { useTranslation } from '@affine/i18n';
-  LogoIcon,
+
-  DocIcon,
+import bg from '@/components/contact-modal/bg.png';
-  TwitterIcon,
+
-  GithubIcon,
-  DiscordIcon,
-  TelegramIcon,
-  RedditIcon,
-  LinkIcon,
-} from './Icons';
 import logo from './affine-text-logo.png';
+import {
+  DiscordIcon,
+  DocIcon,
+  GithubIcon,
+  LinkIcon,
+  LogoIcon,
+  RedditIcon,
+  TelegramIcon,
+  TwitterIcon,
+} from './Icons';
 import {
   StyledBigLink,
-  StyledSmallLink,
-  StyledSubTitle,
-  StyledLeftContainer,
-  StyledRightContainer,
   StyledContent,
+  StyledLeftContainer,
   StyledLogo,
+  StyledModalFooter,
   StyledModalHeader,
   StyledModalHeaderLeft,
-  StyledModalFooter,
+  StyledRightContainer,
+  StyledSmallLink,
+  StyledSubTitle,
 } from './style';
-import bg from '@/components/contact-modal/bg.png';
-import { useTranslation } from '@affine/i18n';
 const linkList = [
   {
     icon: <GithubIcon />,

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

@@ -1,13 +1,14 @@
 import { styled } from '@affine/component';
-import { Modal, ModalWrapper, ModalCloseButton } from '@affine/component';
+import { Modal, ModalCloseButton, ModalWrapper } from '@affine/component';
 import { Button } from '@affine/component';
-import { useRef, useState } from 'react';
 import { Input } from '@affine/component';
-import { KeyboardEvent } from 'react';
-import { useTranslation } from '@affine/i18n';
-import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
-import { useRouter } from 'next/router';
 import { toast } from '@affine/component';
+import { useTranslation } from '@affine/i18n';
+import { useRouter } from 'next/router';
+import { useRef, useState } from 'react';
+import { KeyboardEvent } from 'react';
+
+import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
 
 interface ModalProps {
   open: boolean;

apps/web/src/components/delete-workspace/index.tsx

@@ -1,5 +1,5 @@
 import { styled } from '@affine/component';
-import { Modal, ModalWrapper, ModalCloseButton } from '@affine/component';
+import { Modal, ModalCloseButton, ModalWrapper } from '@affine/component';
 import { Button } from '@affine/component';
 import { Input } from '@affine/component';
 import { useState } from 'react';

apps/web/src/components/edgeless-toolbar/index.tsx

@@ -1,26 +1,28 @@
-import { useState, useEffect } from 'react';
-import {
-  StyledEdgelessToolbar,
-  StyledToolbarWrapper,
-  StyledToolbarItem,
-} from './style';
-import {
-  SelectIcon,
-  TextIcon,
-  ShapeIcon,
-  PenIcon,
-  StickerIcon,
-  ConnectorIcon,
-  UndoIcon,
-  RedoIcon,
-} from './Icons';
 import { MuiSlide } from '@affine/component';
 import { Tooltip } from '@affine/component';
+import { useTranslation } from '@affine/i18n';
+import { useEffect, useState } from 'react';
+
 import useCurrentPageMeta from '@/hooks/use-current-page-meta';
 import useHistoryUpdated from '@/hooks/use-history-update';
-import { useTranslation } from '@affine/i18n';
 import { useGlobalState } from '@/store/app';
 
+import {
+  ConnectorIcon,
+  PenIcon,
+  RedoIcon,
+  SelectIcon,
+  ShapeIcon,
+  StickerIcon,
+  TextIcon,
+  UndoIcon,
+} from './Icons';
+import {
+  StyledEdgelessToolbar,
+  StyledToolbarItem,
+  StyledToolbarWrapper,
+} from './style';
+
 const useToolbarList1 = () => {
   const { t } = useTranslation();
   return [

apps/web/src/components/edgeless-toolbar/style.ts

@@ -1,4 +1,4 @@
-import { styled, displayFlex } from '@affine/component';
+import { displayFlex, styled } from '@affine/component';
 
 export const StyledEdgelessToolbar = styled.div(({ theme }) => ({
   height: '320px',

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

@@ -1,21 +1,23 @@
-import React, { useState, useEffect, cloneElement } from 'react';
+import { useTranslation } from '@affine/i18n';
-import {
+import React, { cloneElement, useEffect, useState } from 'react';
-  StyledAnimateRadioContainer,
+
-  StyledMiddleLine,
-  StyledRadioItem,
-  StyledLabel,
-  StyledIcon,
-} from './style';
-import type {
-  RadioItemStatus,
-  AnimateRadioProps,
-  AnimateRadioItemProps,
-} from './type';
-import { useTheme } from '@/providers/ThemeProvider';
-import { EdgelessIcon, PaperIcon } from './Icons';
 import useCurrentPageMeta from '@/hooks/use-current-page-meta';
 import { usePageHelper } from '@/hooks/use-page-helper';
-import { useTranslation } from '@affine/i18n';
+import { useTheme } from '@/providers/ThemeProvider';
+
+import { EdgelessIcon, PaperIcon } from './Icons';
+import {
+  StyledAnimateRadioContainer,
+  StyledIcon,
+  StyledLabel,
+  StyledMiddleLine,
+  StyledRadioItem,
+} from './style';
+import type {
+  AnimateRadioItemProps,
+  AnimateRadioProps,
+  RadioItemStatus,
+} from './type';
 const PaperItem = ({ active }: { active?: boolean }) => {
   const {
     theme: {

apps/web/src/components/editor-mode-switch/style.ts

@@ -2,6 +2,7 @@ import { displayFlex, keyframes, styled } from '@affine/component';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 import spring, { toString } from 'css-spring';
+
 import type { ItemStatus } from './type';
 
 const ANIMATE_DURATION = 500;

apps/web/src/components/editor/index.tsx

@@ -1,8 +1,9 @@
-import { useEffect, useRef } from 'react';
-import type { Page, Workspace } from '@blocksuite/store';
 import '@blocksuite/blocks';
-import { EditorContainer } from '@blocksuite/editor';
+
 import { styled } from '@affine/component';
+import { EditorContainer } from '@blocksuite/editor';
+import type { Page, Workspace } from '@blocksuite/store';
+import { useEffect, useRef } from 'react';
 
 const StyledEditorContainer = styled('div')(() => {
   return {

apps/web/src/components/enable-workspace-modal/index.tsx

@@ -3,9 +3,11 @@ import { useTranslation } from '@affine/i18n';
 import { CloseIcon } from '@blocksuite/icons';
 import { useRouter } from 'next/router';
 import { useCallback, useState } from 'react';
-import { Content, ContentTitle, Header, StyleButton, StyleTips } from './style';
+
 import { useGlobalState } from '@/store/app';
 
+import { Content, ContentTitle, Header, StyleButton, StyleTips } from './style';
+
 interface EnableWorkspaceModalProps {
   open: boolean;
   onClose: () => void;

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

@@ -1,7 +1,7 @@
 import { Button } from '@affine/component';
-import { FC, useRef, ChangeEvent, ReactElement } from 'react';
 import { styled } from '@affine/component';
 import { useTranslation } from '@affine/i18n';
+import { ChangeEvent, FC, ReactElement, useRef } from 'react';
 interface Props {
   uploadType?: string;
   children?: ReactElement;

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

@@ -1,17 +1,19 @@
+import { Content } from '@affine/component';
 import React, { useEffect, useState } from 'react';
+
+import EditorModeSwitch from '@/components/editor-mode-switch';
+import useCurrentPageMeta from '@/hooks/use-current-page-meta';
+import usePropsUpdated from '@/hooks/use-props-updated';
+import { useGlobalState } from '@/store/app';
+
+import Header from './Header';
+import QuickSearchButton from './QuickSearchButton';
 import {
   StyledSearchArrowWrapper,
   StyledSwitchWrapper,
   StyledTitle,
   StyledTitleWrapper,
 } from './styles';
-import { Content } from '@affine/component';
-import EditorModeSwitch from '@/components/editor-mode-switch';
-import QuickSearchButton from './QuickSearchButton';
-import Header from './Header';
-import usePropsUpdated from '@/hooks/use-props-updated';
-import useCurrentPageMeta from '@/hooks/use-current-page-meta';
-import { useGlobalState } from '@/store/app';
 
 export const EditorHeader = () => {
   const [title, setTitle] = useState('');

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

@@ -1,17 +1,18 @@
+import { CloseIcon } from '@blocksuite/icons';
 import React, { PropsWithChildren, ReactNode, useState } from 'react';
+
+import EditorOptionMenu from './header-right-items/EditorOptionMenu';
+import SyncUser from './header-right-items/SyncUser';
+import ThemeModeSwitch from './header-right-items/theme-mode-switch';
+import TrashButtonGroup from './header-right-items/TrashButtonGroup';
 import {
-  StyledHeader,
-  StyledHeaderRightSide,
-  StyledHeaderContainer,
   StyledBrowserWarning,
   StyledCloseButton,
+  StyledHeader,
+  StyledHeaderContainer,
+  StyledHeaderRightSide,
 } from './styles';
-import { CloseIcon } from '@blocksuite/icons';
+import { shouldShowWarning, useWarningMessage } from './utils';
-import { useWarningMessage, shouldShowWarning } from './utils';
-import EditorOptionMenu from './header-right-items/EditorOptionMenu';
-import TrashButtonGroup from './header-right-items/TrashButtonGroup';
-import ThemeModeSwitch from './header-right-items/theme-mode-switch';
-import SyncUser from './header-right-items/SyncUser';
 
 const BrowserWarning = ({
   show,

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

@@ -1,4 +1,5 @@
 import { PropsWithChildren, ReactNode } from 'react';
+
 import Header from './Header';
 import QuickSearchButton from './QuickSearchButton';
 import { StyledPageListTittleWrapper } from './styles';

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

@@ -1,8 +1,9 @@
-import React from 'react';
 import { IconButton, IconButtonProps } from '@affine/component';
-import { ArrowDownIcon } from '@blocksuite/icons';
-import { useModal } from '@/store/globalModal';
 import { styled } from '@affine/component';
+import { ArrowDownIcon } from '@blocksuite/icons';
+import React from 'react';
+
+import { useModal } from '@/store/globalModal';
 
 const StyledIconButtonWithAnimate = styled(IconButton)(({ theme }) => {
   return {

apps/web/src/components/header/header-right-items/EditorOptionMenu.tsx

@@ -1,5 +1,7 @@
 import { Menu, MenuItem } from '@affine/component';
 import { IconButton } from '@affine/component';
+import { toast } from '@affine/component';
+import { useTranslation } from '@affine/i18n';
 import {
   EdgelessIcon,
   ExportIcon,
@@ -11,11 +13,10 @@ import {
   PaperIcon,
   TrashIcon,
 } from '@blocksuite/icons';
+
+import useCurrentPageMeta from '@/hooks/use-current-page-meta';
 import { usePageHelper } from '@/hooks/use-page-helper';
 import { useConfirm } from '@/providers/ConfirmProvider';
-import useCurrentPageMeta from '@/hooks/use-current-page-meta';
-import { toast } from '@affine/component';
-import { useTranslation } from '@affine/i18n';
 import { useGlobalState } from '@/store/app';
 const PopoverContent = () => {
   const editor = useGlobalState(store => store.editor);

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

@@ -1,10 +1,11 @@
-import { LocalWorkspaceIcon, CloudWorkspaceIcon } from '@blocksuite/icons';
+import { displayFlex, IconButton, styled, Tooltip } from '@affine/component';
-import { displayFlex, styled, Tooltip, IconButton } from '@affine/component';
-import { useTranslation } from '@affine/i18n';
-import { useModal } from '@/store/globalModal';
-import { useCallback, useEffect, useState } from 'react';
 import { WorkspaceUnit } from '@affine/datacenter';
+import { useTranslation } from '@affine/i18n';
+import { CloudWorkspaceIcon, LocalWorkspaceIcon } from '@blocksuite/icons';
+import { useCallback, useEffect, useState } from 'react';
+
 import { useGlobalState } from '@/store/app';
+import { useModal } from '@/store/globalModal';
 
 const NoNetWorkIcon = () => {
   return (

apps/web/src/components/header/header-right-items/TrashButtonGroup.tsx

@@ -1,11 +1,12 @@
 import { Button } from '@affine/component';
+import { useTranslation } from '@affine/i18n';
+import { useRouter } from 'next/router';
+import { useCallback } from 'react';
+
+import useCurrentPageMeta from '@/hooks/use-current-page-meta';
 import { usePageHelper } from '@/hooks/use-page-helper';
 import { useConfirm } from '@/providers/ConfirmProvider';
-import { useRouter } from 'next/router';
-import useCurrentPageMeta from '@/hooks/use-current-page-meta';
-import { useTranslation } from '@affine/i18n';
 import { useGlobalState } from '@/store/app';
-import { useCallback } from 'react';
 
 export const TrashButtonGroup = () => {
   const { permanentlyDeletePage } = usePageHelper();

apps/web/src/components/header/header-right-items/theme-mode-switch/Icons.tsx

@@ -1,4 +1,4 @@
-import type { DOMAttributes, CSSProperties } from 'react';
+import type { CSSProperties, DOMAttributes } from 'react';
 type IconProps = {
   style?: CSSProperties;
 } & DOMAttributes<SVGElement>;

apps/web/src/components/header/header-right-items/theme-mode-switch/index.tsx

@@ -1,7 +1,9 @@
 import { useState } from 'react';
+
 import { useTheme } from '@/providers/ThemeProvider';
+
 import { MoonIcon, SunIcon } from './Icons';
-import { StyledThemeModeSwitch, StyledSwitchItem } from './style';
+import { StyledSwitchItem, StyledThemeModeSwitch } from './style';
 export const ThemeModeSwitch = () => {
   const { mode, changeMode } = useTheme();
   const [isHover, setIsHover] = useState(false);

apps/web/src/components/header/header-right-items/theme-mode-switch/style.ts

@@ -1,8 +1,8 @@
 import { displayFlex, keyframes, styled } from '@affine/component';
-import { CSSProperties } from 'react';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 import spring, { toString } from 'css-spring';
+import { CSSProperties } from 'react';
 
 const ANIMATE_DURATION = 400;
 

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

@@ -1,3 +1,3 @@
-export * from './Header';
 export * from './EditorHeader';
+export * from './Header';
 export * from './PageListHeader';

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

@@ -1,5 +1,6 @@
-import getIsMobile from '@/utils/get-is-mobile';
 import { Trans, useTranslation } from '@affine/i18n';
+
+import getIsMobile from '@/utils/get-is-mobile';
 // Inspire by https://stackoverflow.com/a/4900484/8415727
 const getChromeVersion = () => {
   const raw = navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./);

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

@@ -1,18 +1,19 @@
-import { useState, useEffect } from 'react';
+import { Tooltip } from '@affine/component';
+import { MuiFade } from '@affine/component';
+import { useTranslation } from '@affine/i18n';
+import { CloseIcon } from '@blocksuite/icons';
+import { useEffect, useState } from 'react';
+
+import { useGlobalState } from '@/store/app';
+import { useModal } from '@/store/globalModal';
+
+import { ContactIcon, HelpIcon, KeyboardIcon } from './Icons';
 import {
-  StyledIsland,
-  StyledIconWrapper,
   StyledAnimateWrapper,
+  StyledIconWrapper,
+  StyledIsland,
   StyledTriggerWrapper,
 } from './style';
-import { ContactIcon, HelpIcon, KeyboardIcon } from './Icons';
-import { Tooltip } from '@affine/component';
-
-import { useTranslation } from '@affine/i18n';
-import { useModal } from '@/store/globalModal';
-import { MuiFade } from '@affine/component';
-import { useGlobalState } from '@/store/app';
-import { CloseIcon } from '@blocksuite/icons';
 export type IslandItemNames = 'contact' | 'shortcuts';
 export const HelpIsland = ({
   showList = ['contact', 'shortcuts'],

apps/web/src/components/icons/index.tsx

@@ -1,8 +1,8 @@
 import {
-  JoinedWorkspaceIcon as DefaultJoinedWorkspaceIcon,
-  LocalWorkspaceIcon as DefaultLocalWorkspaceIcon,
   CloudWorkspaceIcon as DefaultCloudWorkspaceIcon,
+  JoinedWorkspaceIcon as DefaultJoinedWorkspaceIcon,
   LocalDataIcon as DefaultLocalDataIcon,
+  LocalWorkspaceIcon as DefaultLocalWorkspaceIcon,
   PublishIcon as DefaultPublishIcon,
 } from '@blocksuite/icons';
 

apps/web/src/components/import/index.tsx

@@ -1,12 +1,14 @@
-import { Modal, ModalWrapper, ModalCloseButton } from '@affine/component';
+import { Modal, ModalCloseButton, ModalWrapper } from '@affine/component';
-import { StyledButtonWrapper, StyledTitle } from './styles';
 import { Button } from '@affine/component';
 import { Content, FlexWrapper } from '@affine/component';
+import { useTranslation } from '@affine/i18n';
+import { useCallback, useEffect, useState } from 'react';
+
 import Loading from '@/components/loading';
 import { usePageHelper } from '@/hooks/use-page-helper';
-import { useCallback, useEffect, useState } from 'react';
-import { useTranslation } from '@affine/i18n';
 import { useGlobalState } from '@/store/app';
+
+import { StyledButtonWrapper, StyledTitle } from './styles';
 // import { Tooltip } from '@affine/component';
 type ImportModalProps = {
   open: boolean;

apps/web/src/components/loading/Loading.tsx

@@ -1,7 +1,7 @@
 import {
-  StyledLoadingWrapper,
   StyledLoading,
   StyledLoadingItem,
+  StyledLoadingWrapper,
 } from './styled';
 
 export const Loading = ({ size = 40 }: { size?: number }) => {

apps/web/src/components/loading/PageLoading.tsx

@@ -1,7 +1,8 @@
 import { styled } from '@affine/component';
-import Loading from './Loading';
 import { useTranslation } from '@affine/i18n';
 
+import Loading from './Loading';
+
 // Used for the full page loading
 const StyledLoadingContainer = styled('div')(() => {
   return {

apps/web/src/components/login-modal/index.tsx

@@ -1,9 +1,11 @@
 import { positionAbsolute, styled } from '@affine/component';
-import { Modal, ModalWrapper, ModalCloseButton } from '@affine/component';
+import { Modal, ModalCloseButton, ModalWrapper } from '@affine/component';
 import { Button } from '@affine/component';
 import { useTranslation } from '@affine/i18n';
-import { GoogleIcon } from './GoogleIcon';
+
 import { useGlobalState } from '@/store/app';
+
+import { GoogleIcon } from './GoogleIcon';
 interface LoginModalProps {
   open: boolean;
   onClose: () => void;

apps/web/src/components/logout-modal/index.tsx

@@ -1,10 +1,12 @@
 import { styled } from '@affine/component';
-import { Modal, ModalWrapper, ModalCloseButton } from '@affine/component';
+import { Modal, ModalCloseButton, ModalWrapper } from '@affine/component';
 import { Button } from '@affine/component';
-import { Check, UnCheck } from './icon';
-import { useState } from 'react';
 import { useTranslation } from '@affine/i18n';
+import { useState } from 'react';
+
 import { useAppState } from '@/providers/app-state-provider';
+
+import { Check, UnCheck } from './icon';
 interface LoginModalProps {
   open: boolean;
   onClose: (wait: boolean) => void;

apps/web/src/components/mobile-modal/index.tsx

@@ -1,9 +1,11 @@
-import React, { useState } from 'react';
 import { Modal, ModalCloseButton, ModalWrapper } from '@affine/component';
-import getIsMobile from '@/utils/get-is-mobile';
-import { StyledButton, StyledContent, StyledTitle } from './styles';
-import bg from './bg.png';
 import { useTranslation } from '@affine/i18n';
+import React, { useState } from 'react';
+
+import getIsMobile from '@/utils/get-is-mobile';
+
+import bg from './bg.png';
+import { StyledButton, StyledContent, StyledTitle } from './styles';
 export const MobileModal = () => {
   const [showModal, setShowModal] = useState(getIsMobile());
   const { t } = useTranslation();

apps/web/src/components/page-list/DateCell.tsx

@@ -1,9 +1,10 @@
-import localizedFormat from 'dayjs/plugin/localizedFormat';
-import dayjs from 'dayjs';
-import { PageMeta } from '@/providers/app-state-provider';
 import { TableCell } from '@affine/component';
+import dayjs from 'dayjs';
+import localizedFormat from 'dayjs/plugin/localizedFormat';
 import React from 'react';
 
+import { PageMeta } from '@/providers/app-state-provider';
+
 dayjs.extend(localizedFormat);
 
 export const DateCell = ({

apps/web/src/components/page-list/Empty.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
 import { Empty } from '@affine/component';
 import { useTranslation } from '@affine/i18n';
+import React from 'react';
 export const PageListEmpty = (props: { listType?: string }) => {
   const { listType } = props;
   const { t } = useTranslation();

apps/web/src/components/page-list/OperationCell.tsx

@@ -1,25 +1,25 @@
-import { useConfirm } from '@/providers/ConfirmProvider';
-import { PageMeta } from '@/providers/app-state-provider';
 import {
+  FlexWrapper,
+  IconButton,
   Menu,
   MenuItem,
   Tooltip,
-  FlexWrapper,
-  IconButton,
 } from '@affine/component';
-
+import { toast } from '@affine/component';
+import { useTranslation } from '@affine/i18n';
 import {
-  MoreVerticalIcon,
-  RestoreIcon,
-  FavouritesIcon,
-  FavouritedIcon,
-  OpenInNewIcon,
   DeleteForeverIcon,
+  FavouritedIcon,
+  FavouritesIcon,
+  MoreVerticalIcon,
+  OpenInNewIcon,
+  RestoreIcon,
   TrashIcon,
 } from '@blocksuite/icons';
-import { toast } from '@affine/component';
+
 import { usePageHelper } from '@/hooks/use-page-helper';
-import { useTranslation } from '@affine/i18n';
+import { PageMeta } from '@/providers/app-state-provider';
+import { useConfirm } from '@/providers/ConfirmProvider';
 
 export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
   const { id, favorite } = pageMeta;

apps/web/src/components/page-list/index.tsx

@@ -1,16 +1,3 @@
-import { PageMeta } from '@/providers/app-state-provider';
-import {
-  FavouritedIcon,
-  FavouritesIcon,
-  PaperIcon,
-  EdgelessIcon,
-} from '@blocksuite/icons';
-import {
-  StyledTableContainer,
-  StyledTableRow,
-  StyledTitleLink,
-  StyledTitleWrapper,
-} from './styles';
 import {
   Table,
   TableBody,
@@ -18,19 +5,34 @@ import {
   TableHead,
   TableRow,
 } from '@affine/component';
-import { OperationCell, TrashOperationCell } from './OperationCell';
-import Empty from './Empty';
 import { Content } from '@affine/component';
-import React, { useCallback } from 'react';
-import DateCell from '@/components/page-list/DateCell';
 import { IconButton } from '@affine/component';
 import { Tooltip } from '@affine/component';
-import { useRouter } from 'next/router';
 import { toast } from '@affine/component';
-import { usePageHelper } from '@/hooks/use-page-helper';
-import { useTheme } from '@/providers/ThemeProvider';
 import { useTranslation } from '@affine/i18n';
+import {
+  EdgelessIcon,
+  FavouritedIcon,
+  FavouritesIcon,
+  PaperIcon,
+} from '@blocksuite/icons';
+import { useRouter } from 'next/router';
+import React, { useCallback } from 'react';
+
+import DateCell from '@/components/page-list/DateCell';
+import { usePageHelper } from '@/hooks/use-page-helper';
+import { PageMeta } from '@/providers/app-state-provider';
+import { useTheme } from '@/providers/ThemeProvider';
 import { useGlobalState } from '@/store/app';
+
+import Empty from './Empty';
+import { OperationCell, TrashOperationCell } from './OperationCell';
+import {
+  StyledTableContainer,
+  StyledTableRow,
+  StyledTitleLink,
+  StyledTitleWrapper,
+} from './styles';
 const FavoriteTag = ({
   pageMeta: { favorite, id },
 }: {

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

@@ -1,9 +1,11 @@
-import React from 'react';
-import { PlusIcon } from '@blocksuite/icons';
-import { StyledModalFooterContent } from './style';
-import { Command } from 'cmdk';
-import { usePageHelper } from '@/hooks/use-page-helper';
 import { useTranslation } from '@affine/i18n';
+import { PlusIcon } from '@blocksuite/icons';
+import { Command } from 'cmdk';
+import React from 'react';
+
+import { usePageHelper } from '@/hooks/use-page-helper';
+
+import { StyledModalFooterContent } from './style';
 export const Footer = (props: { query: string; onClose: () => void }) => {
   const { openPage, createPage } = usePageHelper();
   const { t } = useTranslation();

apps/web/src/components/quick-search/Input.tsx

@@ -1,3 +1,6 @@
+import { useTranslation } from '@affine/i18n';
+import { SearchIcon } from '@blocksuite/icons';
+import { Command } from 'cmdk';
 import React, {
   Dispatch,
   SetStateAction,
@@ -5,10 +8,8 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { SearchIcon } from '@blocksuite/icons';
+
 import { StyledInputContent, StyledLabel } from './style';
-import { Command } from 'cmdk';
-import { useTranslation } from '@affine/i18n';
 export const Input = (props: {
   open: boolean;
   query: string;

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

@@ -1,15 +1,17 @@
-import { Command } from 'cmdk';
-import { StyledListItem, StyledNotFound } from './style';
-import { PaperIcon, EdgelessIcon } from '@blocksuite/icons';
-import { Dispatch, SetStateAction, useEffect, useState } from 'react';
-import { PageMeta } from '@/providers/app-state-provider';
-import { useRouter } from 'next/router';
-import { NoResultSVG } from './NoResultSVG';
 import { useTranslation } from '@affine/i18n';
-import usePageHelper from '@/hooks/use-page-helper';
+import { EdgelessIcon, PaperIcon } from '@blocksuite/icons';
 import { Workspace } from '@blocksuite/store';
+import { Command } from 'cmdk';
+import { useRouter } from 'next/router';
+import { Dispatch, SetStateAction, useEffect, useState } from 'react';
+
+import usePageHelper from '@/hooks/use-page-helper';
+import { PageMeta } from '@/providers/app-state-provider';
 import { useGlobalState } from '@/store/app';
 
+import { NoResultSVG } from './NoResultSVG';
+import { StyledListItem, StyledNotFound } from './style';
+
 export const PublishedResults = (props: {
   query: string;
   loading: boolean;

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

@@ -1,6 +1,7 @@
+import { useTranslation } from '@affine/i18n';
+import { EdgelessIcon, PaperIcon } from '@blocksuite/icons';
 import { Command } from 'cmdk';
-import { StyledListItem, StyledNotFound } from './style';
+import { useRouter } from 'next/router';
-import { PaperIcon, EdgelessIcon } from '@blocksuite/icons';
 import {
   Dispatch,
   SetStateAction,
@@ -8,12 +9,13 @@ import {
   useEffect,
   useState,
 } from 'react';
-import { useRouter } from 'next/router';
+
-import { useSwitchToConfig } from './config';
-import { NoResultSVG } from './NoResultSVG';
-import { useTranslation } from '@affine/i18n';
 import usePageHelper from '@/hooks/use-page-helper';
 import { useGlobalState } from '@/store/app';
+
+import { useSwitchToConfig } from './config';
+import { NoResultSVG } from './NoResultSVG';
+import { StyledListItem, StyledNotFound } from './style';
 export const Results = (props: {
   query: string;
   loading: boolean;

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

@@ -1,11 +1,11 @@
-import { FC, SVGProps } from 'react';
+import { useTranslation } from '@affine/i18n';
 import {
   AllPagesIcon,
   FavouritesIcon,
-  TrashIcon,
   SettingsIcon,
+  TrashIcon,
 } from '@blocksuite/icons';
-import { useTranslation } from '@affine/i18n';
+import { FC, SVGProps } from 'react';
 
 export const useSwitchToConfig = (
   currentWorkspaceId?: string

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

@@ -1,20 +1,22 @@
 import { Modal, ModalWrapper } from '@affine/component';
-import {
-  StyledContent,
-  StyledModalHeader,
-  StyledModalFooter,
-  StyledModalDivider,
-  StyledShortcut,
-} from './style';
-import { Input } from './Input';
-import { Results } from './Results';
-import { Footer } from './Footer';
 import { Command } from 'cmdk';
+import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
+
 import { useModal } from '@/store/globalModal';
 import { getUaHelper } from '@/utils';
-import { useRouter } from 'next/router';
+
+import { Footer } from './Footer';
+import { Input } from './Input';
 import { PublishedResults } from './PublishedResults';
+import { Results } from './Results';
+import {
+  StyledContent,
+  StyledModalDivider,
+  StyledModalFooter,
+  StyledModalHeader,
+  StyledShortcut,
+} from './style';
 type TransitionsModalProps = {
   open: boolean;
   onClose: () => void;

apps/web/src/components/shortcuts-modal/index.tsx

@@ -1,4 +1,19 @@
+import {
+  ModalCloseButton,
+  MuiClickAwayListener,
+  MuiSlide,
+} from '@affine/component';
+import { useTranslation } from '@affine/i18n';
 import { createPortal } from 'react-dom';
+
+import {
+  useMacKeyboardShortcuts,
+  useMacMarkdownShortcuts,
+  useWindowsKeyboardShortcuts,
+  useWinMarkdownShortcuts,
+} from '@/components/shortcuts-modal/config';
+import { getUaHelper } from '@/utils';
+
 import { KeyboardIcon } from './Icons';
 import {
   StyledListItem,
@@ -7,19 +22,6 @@ import {
   StyledSubTitle,
   StyledTitle,
 } from './style';
-import {
-  useMacKeyboardShortcuts,
-  useMacMarkdownShortcuts,
-  useWindowsKeyboardShortcuts,
-  useWinMarkdownShortcuts,
-} from '@/components/shortcuts-modal/config';
-import {
-  MuiSlide,
-  MuiClickAwayListener,
-  ModalCloseButton,
-} from '@affine/component';
-import { getUaHelper } from '@/utils';
-import { useTranslation } from '@affine/i18n';
 type ModalProps = {
   open: boolean;
   onClose: () => void;

apps/web/src/components/simple-counter/index.ts

@@ -1,4 +1,4 @@
-import { LitElement, css, html } from 'lit';
+import { css, html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import * as React from 'react';
 

apps/web/src/components/workspace-avatar/WorkspaceUnitAvatar.tsx

@@ -1,5 +1,6 @@
-import { useState, useEffect } from 'react';
 import type { WorkspaceUnit } from '@affine/datacenter';
+import { useEffect, useState } from 'react';
+
 import { WorkspaceAvatar as Avatar } from './Avatar';
 
 const useAvatar = (workspaceUnit: WorkspaceUnit | null) => {

apps/web/src/components/workspace-layout/index.tsx

@@ -1,10 +1,12 @@
+import { useRouter } from 'next/router';
+import { PropsWithChildren } from 'react';
+
 import HelpIsland from '@/components/help-island';
 import { WorkSpaceSliderBar } from '@/components/workspace-slider-bar';
-import { useRouter } from 'next/router';
-import { StyledPage, StyledToolWrapper, StyledWrapper } from './styles';
-import { PropsWithChildren } from 'react';
 import useEnsureWorkspace from '@/hooks/use-ensure-workspace';
+
 import { PageLoading } from '../loading';
+import { StyledPage, StyledToolWrapper, StyledWrapper } from './styles';
 
 export const WorkspaceDefender = ({ children }: PropsWithChildren) => {
   const { workspaceLoaded } = useEnsureWorkspace();

apps/web/src/components/workspace-modal/Footer.tsx

@@ -1,11 +1,13 @@
-import { CloudWorkspaceIcon, SignOutIcon } from '@blocksuite/icons';
 import { FlexWrapper } from '@affine/component';
-import { WorkspaceAvatar } from '@/components/workspace-avatar';
 import { IconButton } from '@affine/component';
-import { StyledFooter, StyleUserInfo, StyledSignInButton } from './styles';
-import { useTranslation } from '@affine/i18n';
 import { Tooltip } from '@affine/component';
+import { useTranslation } from '@affine/i18n';
+import { CloudWorkspaceIcon, SignOutIcon } from '@blocksuite/icons';
+
+import { WorkspaceAvatar } from '@/components/workspace-avatar';
 import { useGlobalState } from '@/store/app';
+
+import { StyledFooter, StyledSignInButton, StyleUserInfo } from './styles';
 export const Footer = ({
   onLogin,
   onLogout,

apps/web/src/components/workspace-modal/SelectLanguageMenu.tsx

@@ -1,9 +1,9 @@
-import { LOCALES } from '@affine/i18n';
 import { styled } from '@affine/component';
-import { useTranslation } from '@affine/i18n';
-import { ArrowDownIcon } from '@blocksuite/icons';
 import { Button } from '@affine/component';
 import { Menu, MenuItem } from '@affine/component';
+import { LOCALES } from '@affine/i18n';
+import { useTranslation } from '@affine/i18n';
+import { ArrowDownIcon } from '@blocksuite/icons';
 
 const LanguageMenuContent = () => {
   const { i18n } = useTranslation();

apps/web/src/components/workspace-modal/WorkspaceCard.tsx

@@ -1,16 +1,18 @@
-import { WorkspaceUnitAvatar } from '@/components/workspace-avatar';
+import { WorkspaceUnit } from '@affine/datacenter';
+import { useTranslation } from '@affine/i18n';
+import { useCallback } from 'react';
+
 import {
-  JoinedWorkspaceIcon,
-  LocalWorkspaceIcon,
   CloudWorkspaceIcon,
+  JoinedWorkspaceIcon,
   LocalDataIcon,
+  LocalWorkspaceIcon,
   PublishIcon,
 } from '@/components/icons';
-import { WorkspaceUnit } from '@affine/datacenter';
+import { WorkspaceUnitAvatar } from '@/components/workspace-avatar';
-import { StyleWorkspaceInfo, StyleWorkspaceTitle, StyledCard } from './styles';
-import { useTranslation } from '@affine/i18n';
 import { useGlobalState } from '@/store/app';
-import { useCallback } from 'react';
+
+import { StyledCard, StyleWorkspaceInfo, StyleWorkspaceTitle } from './styles';
 
 const WorkspaceType = ({ workspaceData }: { workspaceData: WorkspaceUnit }) => {
   const user = useGlobalState(store => store.user);

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

@@ -1,33 +1,31 @@
-import { Modal, ModalWrapper, ModalCloseButton } from '@affine/component';
+import { Modal, ModalCloseButton, ModalWrapper } from '@affine/component';
-import { useState } from 'react';
-import { CreateWorkspaceModal } from '../create-workspace';
-
 import { Tooltip } from '@affine/component';
-
-import { PlusIcon, HelpIcon } from '@blocksuite/icons';
-
-import { useRouter } from 'next/router';
 import { useTranslation } from '@affine/i18n';
-import { LanguageMenu } from './SelectLanguageMenu';
+import { HelpIcon, PlusIcon } from '@blocksuite/icons';
+import { useRouter } from 'next/router';
+import { useState } from 'react';
 
+import { useGlobalState } from '@/store/app';
+
+import { CreateWorkspaceModal } from '../create-workspace';
 import { LoginModal } from '../login-modal';
 import { LogoutModal } from '../logout-modal';
+import { Footer } from './Footer';
+import { LanguageMenu } from './SelectLanguageMenu';
 import {
   StyledCard,
-  StyledSplitLine,
-  StyleWorkspaceInfo,
-  StyleWorkspaceTitle,
-  StyledModalHeaderLeft,
-  StyledModalTitle,
   StyledHelperContainer,
   StyledModalContent,
-  StyledOperationWrapper,
-  StyleWorkspaceAdd,
   StyledModalHeader,
+  StyledModalHeaderLeft,
+  StyledModalTitle,
+  StyledOperationWrapper,
+  StyledSplitLine,
+  StyleWorkspaceAdd,
+  StyleWorkspaceInfo,
+  StyleWorkspaceTitle,
 } from './styles';
 import { WorkspaceCard } from './WorkspaceCard';
-import { Footer } from './Footer';
-import { useGlobalState } from '@/store/app';
 interface WorkspaceModalProps {
   open: boolean;
   onClose: () => void;

apps/web/src/components/workspace-setting/ExportPage.tsx

@@ -1,7 +1,7 @@
-import { WorkspaceUnit } from '@affine/datacenter';
-import { useTranslation } from '@affine/i18n';
 import { Wrapper } from '@affine/component';
 import { Button } from '@affine/component';
+import { WorkspaceUnit } from '@affine/datacenter';
+import { useTranslation } from '@affine/i18n';
 export const ExportPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
   const { t } = useTranslation();
   console.log(workspace);

apps/web/src/components/workspace-setting/PublishPage.tsx

@@ -1,11 +1,12 @@
-import { useState } from 'react';
 import { Button } from '@affine/component';
 import { Input } from '@affine/component';
 import { toast } from '@affine/component';
+import { Content, FlexWrapper, Wrapper } from '@affine/component';
 import { WorkspaceUnit } from '@affine/datacenter';
-import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
 import { useTranslation } from '@affine/i18n';
-import { Wrapper, Content, FlexWrapper } from '@affine/component';
+import { useState } from 'react';
+
+import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
 import { useModal } from '@/store/globalModal';
 export const PublishPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
   const shareUrl = window.location.host + '/public-workspace/' + workspace.id;

apps/web/src/components/workspace-setting/SyncPage.tsx

@@ -1,10 +1,12 @@
-import { StyledWorkspaceName } from './style';
+import { Button, Content, FlexWrapper, Wrapper } from '@affine/component';
 import { WorkspaceUnit } from '@affine/datacenter';
-import { useTranslation, Trans } from '@affine/i18n';
+import { Trans, useTranslation } from '@affine/i18n';
+
 import { WorkspaceUnitAvatar } from '@/components/workspace-avatar';
-import { FlexWrapper, Content, Wrapper, Button } from '@affine/component';
-import { useModal } from '@/store/globalModal';
 import { useGlobalState } from '@/store/app';
+import { useModal } from '@/store/globalModal';
+
+import { StyledWorkspaceName } from './style';
 
 // // FIXME: Temporary solution, since the @blocksuite/icons is broken
 // const ActiveIcon = () => {

apps/web/src/components/workspace-setting/general/General.tsx

@@ -1,30 +1,31 @@
-import {
-  StyledInput,
-  StyledWorkspaceInfo,
-  StyledAvatar,
-  StyledEditButton,
-} from './style';
-import { StyledSettingKey, StyledRow } from '../style';
 import { FlexWrapper, MuiAvatar } from '@affine/component';
-
-import { useCallback, useState } from 'react';
 import { Button } from '@affine/component';
-import { WorkspaceDelete } from './delete';
+import { MuiFade } from '@affine/component';
-import { WorkspaceLeave } from './leave';
+import { WorkspaceUnit } from '@affine/datacenter';
+import { useTranslation } from '@affine/i18n';
+import { EmailIcon } from '@blocksuite/icons';
+import { useCallback, useState } from 'react';
+
+import { Upload } from '@/components/file-upload';
 import {
-  JoinedWorkspaceIcon,
   CloudWorkspaceIcon,
+  JoinedWorkspaceIcon,
   LocalWorkspaceIcon,
 } from '@/components/icons';
 import { WorkspaceUnitAvatar } from '@/components/workspace-avatar';
-import { WorkspaceUnit } from '@affine/datacenter';
 import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
-import { useTranslation } from '@affine/i18n';
-import { CameraIcon } from './icons';
-import { Upload } from '@/components/file-upload';
-import { MuiFade } from '@affine/component';
 import { useGlobalState } from '@/store/app';
-import { EmailIcon } from '@blocksuite/icons';
+
+import { StyledRow, StyledSettingKey } from '../style';
+import { WorkspaceDelete } from './delete';
+import { CameraIcon } from './icons';
+import { WorkspaceLeave } from './leave';
+import {
+  StyledAvatar,
+  StyledEditButton,
+  StyledInput,
+  StyledWorkspaceInfo,
+} from './style';
 export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
   const [showDelete, setShowDelete] = useState<boolean>(false);
   const [showLeave, setShowLeave] = useState<boolean>(false);

apps/web/src/components/workspace-setting/general/delete/Delete.tsx

@@ -1,22 +1,23 @@
-import { useRouter } from 'next/router';
 import { Modal } from '@affine/component';
 import { Input } from '@affine/component';
-import {
-  StyledModalHeader,
-  StyledTextContent,
-  StyledModalWrapper,
-  StyledInputContent,
-  StyledButtonContent,
-  StyledWorkspaceName,
-} from './style';
-import { useState } from 'react';
 import { ModalCloseButton } from '@affine/component';
 import { Button } from '@affine/component';
-
 import { WorkspaceUnit } from '@affine/datacenter';
 import { Trans, useTranslation } from '@affine/i18n';
+import { useRouter } from 'next/router';
+import { useState } from 'react';
+
 import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
 
+import {
+  StyledButtonContent,
+  StyledInputContent,
+  StyledModalHeader,
+  StyledModalWrapper,
+  StyledTextContent,
+  StyledWorkspaceName,
+} from './style';
+
 interface WorkspaceDeleteProps {
   open: boolean;
   onClose: () => void;

apps/web/src/components/workspace-setting/general/leave/Leave.tsx

@@ -1,14 +1,16 @@
 import { Modal } from '@affine/component';
-import {
-  StyledModalHeader,
-  StyledTextContent,
-  StyledModalWrapper,
-  StyledButtonContent,
-} from './style';
 import { ModalCloseButton } from '@affine/component';
 import { Button } from '@affine/component';
 import { useTranslation } from '@affine/i18n';
+
 import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
+
+import {
+  StyledButtonContent,
+  StyledModalHeader,
+  StyledModalWrapper,
+  StyledTextContent,
+} from './style';
 // import { getDataCenter } from '@affine/datacenter';
 // import { useAppState } from '@/providers/app-state-provider';
 

apps/web/src/components/workspace-setting/index.ts

@@ -1,5 +1,5 @@
-export * from './general';
 export * from './ExportPage';
+export * from './general';
 export * from './member';
-export * from './SyncPage';
 export * from './PublishPage';
+export * from './SyncPage';

apps/web/src/components/workspace-setting/member/InviteMemberModal.tsx

@@ -1,13 +1,14 @@
-import { EmailIcon } from '@blocksuite/icons';
 import { styled } from '@affine/component';
-import { Modal, ModalWrapper, ModalCloseButton } from '@affine/component';
+import { Modal, ModalCloseButton, ModalWrapper } from '@affine/component';
 import { Button } from '@affine/component';
 import { Input } from '@affine/component';
-import { useState } from 'react';
 import { MuiAvatar } from '@affine/component';
-import useMembers from '@/hooks/use-members';
 import { User } from '@affine/datacenter';
 import { useTranslation } from '@affine/i18n';
+import { EmailIcon } from '@blocksuite/icons';
+import { useState } from 'react';
+
+import useMembers from '@/hooks/use-members';
 interface LoginModalProps {
   open: boolean;
   onClose: () => void;

apps/web/src/components/workspace-setting/member/MembersPage.tsx

@@ -1,6 +1,23 @@
+import { Wrapper } from '@affine/component';
+import { Button, IconButton } from '@affine/component';
+import { Menu, MenuItem } from '@affine/component';
+import { Empty } from '@affine/component';
+import { toast } from '@affine/component';
+import { FlexWrapper } from '@affine/component';
+import { WorkspaceUnit } from '@affine/datacenter';
+import { useTranslation } from '@affine/i18n';
+import { EmailIcon, MoreVerticalIcon, TrashIcon } from '@blocksuite/icons';
+import { useState } from 'react';
+
+import Loading from '@/components/loading';
+import useMembers from '@/hooks/use-members';
+import { useModal } from '@/store/globalModal';
+
+import { InviteMemberModal } from './InviteMemberModal';
 import {
   StyledMemberAvatar,
   StyledMemberButtonContainer,
+  StyledMemberContainer,
   StyledMemberEmail,
   StyledMemberInfo,
   StyledMemberListContainer,
@@ -10,22 +27,7 @@ import {
   StyledMemberRoleContainer,
   StyledMemberTitleContainer,
   StyledMoreVerticalButton,
-  StyledMemberContainer,
 } from './style';
-import { Wrapper } from '@affine/component';
-import { MoreVerticalIcon, EmailIcon, TrashIcon } from '@blocksuite/icons';
-import { useState } from 'react';
-import { Button, IconButton } from '@affine/component';
-import { InviteMemberModal } from './InviteMemberModal';
-import { Menu, MenuItem } from '@affine/component';
-import { Empty } from '@affine/component';
-import { WorkspaceUnit } from '@affine/datacenter';
-import { toast } from '@affine/component';
-import useMembers from '@/hooks/use-members';
-import Loading from '@/components/loading';
-import { FlexWrapper } from '@affine/component';
-import { useTranslation } from '@affine/i18n';
-import { useModal } from '@/store/globalModal';
 
 export const MembersPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
   const [isInviteModalShow, setIsInviteModalShow] = useState(false);

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

@@ -1,6 +1,7 @@
-import type { ReactNode } from 'react';
 import { styled } from '@affine/component';
-import { WorkspaceItemWrapper, WorkspaceItemContent } from './styles';
+import type { ReactNode } from 'react';
+
+import { WorkspaceItemContent, WorkspaceItemWrapper } from './styles';
 
 interface ListItemProps {
   name: string;

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

@@ -1,9 +1,11 @@
-import { useModal } from '@/store/globalModal';
 import { styled } from '@affine/component';
+
+import { useModal } from '@/store/globalModal';
+
 import { AffineIcon } from '../../icons/Icons';
 import {
-  WorkspaceItemAvatar,
   LoginItemWrapper,
+  WorkspaceItemAvatar,
   WorkspaceItemContent,
 } from './styles';
 

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

@@ -1,9 +1,11 @@
-import { WorkspaceName, SelectorWrapper } from './styles';
 import { useCallback, useState } from 'react';
-import { WorkspaceModal } from '@/components/workspace-modal';
+
 import { WorkspaceUnitAvatar } from '@/components/workspace-avatar';
+import { WorkspaceModal } from '@/components/workspace-modal';
 import { useGlobalState } from '@/store/app';
 
+import { SelectorWrapper, WorkspaceName } from './styles';
+
 export const WorkspaceSelector = () => {
   const [workspaceListShow, setWorkspaceListShow] = useState(false);
   const currentWorkspace = useGlobalState(

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

@@ -1,5 +1,26 @@
-import React, { useCallback, useState } from 'react';
+import { MuiCollapse } from '@affine/component';
+import { Tooltip } from '@affine/component';
+import { IconButton } from '@affine/component';
+import { useTranslation } from '@affine/i18n';
+import {
+  AllPagesIcon,
+  ArrowDownIcon,
+  FavouritesIcon,
+  PlusIcon,
+  SearchIcon,
+  SettingsIcon,
+  TrashIcon,
+} from '@blocksuite/icons';
+import Link from 'next/link';
 import { useRouter } from 'next/router';
+import React, { useCallback, useState } from 'react';
+
+import useLocalStorage from '@/hooks/use-local-storage';
+import { usePageHelper } from '@/hooks/use-page-helper';
+import { useGlobalState } from '@/store/app';
+import { useModal } from '@/store/globalModal';
+
+import { Arrow } from './icons';
 import {
   StyledArrowButton,
   StyledLink,
@@ -9,26 +30,7 @@ import {
   StyledSliderBarWrapper,
   StyledSubListItem,
 } from './style';
-import { Arrow } from './icons';
-import {
-  ArrowDownIcon,
-  SearchIcon,
-  AllPagesIcon,
-  FavouritesIcon,
-  TrashIcon,
-  PlusIcon,
-  SettingsIcon,
-} from '@blocksuite/icons';
-import Link from 'next/link';
-import { MuiCollapse } from '@affine/component';
-import { Tooltip } from '@affine/component';
-import { useModal } from '@/store/globalModal';
-import { IconButton } from '@affine/component';
-import useLocalStorage from '@/hooks/use-local-storage';
-import { usePageHelper } from '@/hooks/use-page-helper';
-import { useTranslation } from '@affine/i18n';
 import { WorkspaceSelector } from './WorkspaceSelector/WorkspaceSelector';
-import { useGlobalState } from '@/store/app';
 
 const FavoriteList = ({ showList }: { showList: boolean }) => {
   const { openPage } = usePageHelper();

apps/web/src/hooks/use-change-page-meta.ts

@@ -1,4 +1,5 @@
 import { useCallback } from 'react';
+
 import { PageMeta } from '@/providers/app-state-provider';
 import { useGlobalState } from '@/store/app';
 

apps/web/src/hooks/use-current-page-meta.ts

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useState } from 'react';
+
 import { PageMeta } from '@/providers/app-state-provider';
 import { useGlobalState } from '@/store/app';
 

apps/web/src/hooks/use-ensure-workspace.ts

@@ -1,7 +1,8 @@
+import { assertEquals } from '@blocksuite/global/utils';
 import { useRouter } from 'next/router';
 import { useCallback, useEffect, useState } from 'react';
+
 import { useGlobalState } from '@/store/app';
-import { assertEquals } from '@blocksuite/global/utils';
 
 // todo: refactor with suspense mode
 // It is a fully effective hook

apps/web/src/hooks/use-history-update.ts

@@ -1,5 +1,6 @@
 import { Page } from '@blocksuite/store';
 import { useEffect, useRef } from 'react';
+
 import { useGlobalState } from '@/store/app';
 
 export type EventCallBack<T> = (callback: (props: T) => void) => void;

apps/web/src/hooks/use-members.ts

@@ -1,5 +1,6 @@
-import { useCallback, useEffect, useState } from 'react';
 import { Member } from '@affine/datacenter';
+import { useCallback, useEffect, useState } from 'react';
+
 import { useGlobalState } from '@/store/app';
 export const useMembers = () => {
   const dataCenter = useGlobalState(store => store.dataCenter);

apps/web/src/hooks/use-page-helper.ts

@@ -1,13 +1,15 @@
-import { uuidv4, Workspace } from '@blocksuite/store';
-import { QueryContent } from '@blocksuite/store/dist/workspace/search';
-import { PageMeta } from '@/providers/app-state-provider';
-import { EditorContainer } from '@blocksuite/editor';
-import { useChangePageMeta } from '@/hooks/use-change-page-meta';
-import { useRouter } from 'next/router';
 import { WorkspaceUnit } from '@affine/datacenter';
-import { useGlobalState } from '@/store/app';
+import { EditorContainer } from '@blocksuite/editor';
+import { uuidv4, Workspace } from '@blocksuite/store';
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
+import type { QueryContent } from '@blocksuite/store/dist/workspace/search';
+import { useRouter } from 'next/router';
 import { useCallback } from 'react';
 
+import { useChangePageMeta } from '@/hooks/use-change-page-meta';
+import { PageMeta } from '@/providers/app-state-provider';
+import { useGlobalState } from '@/store/app';
+
 export type EditorHandlers = {
   createPage: (params?: {
     pageId?: string;

apps/web/src/hooks/use-props-updated.ts

@@ -1,5 +1,6 @@
-import { useEffect, useRef } from 'react';
 import { EditorContainer } from '@blocksuite/editor';
+import { useEffect, useRef } from 'react';
+
 import { useGlobalState } from '@/store/app';
 export type EventCallBack<T> = (callback: (props: T) => void) => void;
 

apps/web/src/hooks/use-workspace-helper.ts

@@ -1,7 +1,8 @@
 import { WorkspaceUnit } from '@affine/datacenter';
-import { useGlobalState } from '@/store/app';
 import { useCallback } from 'react';
 
+import { useGlobalState } from '@/store/app';
+
 export const useWorkspaceHelper = () => {
   const dataCenter = useGlobalState(store => store.dataCenter);
   const currentWorkspace = useGlobalState(

apps/web/src/pages/404.tsx

@@ -1,6 +1,7 @@
-import NotfoundPage from '@/components/404';
 import Head from 'next/head';
 
+import NotfoundPage from '@/components/404';
+
 export default function Custom404() {
   return (
     <>

apps/web/src/pages/_app.tsx

@@ -1,30 +1,31 @@
-import type { AppProps } from 'next/app';
-import dynamic from 'next/dynamic';
 import '../../public/globals.css';
 import '../../public/variable.css';
 import './temporary.css';
-import { Logger } from '@toeverything/pathfinder-logger';
 import '@fontsource/space-mono';
 import '@fontsource/poppins';
 import '../utils/print-build-info';
-import ProviderComposer from '@/components/provider-composer';
+import '@affine/i18n';
-import type { PropsWithChildren, ReactElement, ReactNode } from 'react';
+
+import { useTranslation } from '@affine/i18n';
+import { Logger } from '@toeverything/pathfinder-logger';
 import type { NextPage } from 'next';
+import type { AppProps } from 'next/app';
+import dynamic from 'next/dynamic';
+import Head from 'next/head';
+// import AppStateProvider2 from '@/providers/app-state-provider2/provider';
+import { useRouter } from 'next/router';
+import type { PropsWithChildren, ReactElement, ReactNode } from 'react';
+import { Suspense, useEffect } from 'react';
+import React from 'react';
+
+import { PageLoading } from '@/components/loading';
+import { MessageCenterHandler } from '@/components/message-center-handler';
+import ProviderComposer from '@/components/provider-composer';
 import { AppStateProvider } from '@/providers/app-state-provider';
 import ConfirmProvider from '@/providers/ConfirmProvider';
-import { ModalProvider } from '@/store/globalModal';
-// import AppStateProvider2 from '@/providers/app-state-provider2/provider';
-
-import { useRouter } from 'next/router';
-import { Suspense, useEffect } from 'react';
-import { PageLoading } from '@/components/loading';
-import Head from 'next/head';
-import '@affine/i18n';
-import { useTranslation } from '@affine/i18n';
-import React from 'react';
 import { GlobalAppProvider } from '@/store/app';
 import { DataCenterPreloader } from '@/store/app/datacenter';
-import { MessageCenterHandler } from '@/components/message-center-handler';
+import { ModalProvider } from '@/store/globalModal';
 
 const ThemeProvider = dynamic(() => import('@/providers/ThemeProvider'), {
   ssr: false,

apps/web/src/pages/_document.tsx

@@ -1,12 +1,11 @@
-import createEmotionServer from '@emotion/server/create-instance';
 import { cache } from '@emotion/css';
-
+import createEmotionServer from '@emotion/server/create-instance';
 import Document, {
-  Html,
+  DocumentContext,
   Head,
+  Html,
   Main,
   NextScript,
-  DocumentContext,
 } from 'next/document';
 import * as React from 'react';
 

apps/web/src/pages/invite/[invite_code].tsx

@@ -1,9 +1,10 @@
-import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
 import { styled } from '@affine/component';
 import { Empty } from '@affine/component';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
+
 import { PageLoading } from '@/components/loading';
+import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
 
 // const User = ({ name, avatar }: { name: string; avatar?: string }) => {
 //   return (

apps/web/src/pages/public-workspace/[workspaceId]/[pageId].tsx

@@ -1,17 +1,19 @@
-import { ReactElement, useEffect, useMemo } from 'react';
-import type { NextPageWithLayout } from '../..//_app';
 import { displayFlex, styled } from '@affine/component';
-import dynamic from 'next/dynamic';
-import { useRouter } from 'next/router';
-import { PageLoading } from '@/components/loading';
 import { Breadcrumbs } from '@affine/component';
 import { IconButton } from '@affine/component';
-import NextLink from 'next/link';
-import { PaperIcon, SearchIcon } from '@blocksuite/icons';
-import { WorkspaceUnitAvatar } from '@/components/workspace-avatar';
-import { useModal } from '@/store/globalModal';
-import { useLoadPublicWorkspace } from '@/hooks/use-load-public-workspace';
 import { useTranslation } from '@affine/i18n';
+import { PaperIcon, SearchIcon } from '@blocksuite/icons';
+import dynamic from 'next/dynamic';
+import NextLink from 'next/link';
+import { useRouter } from 'next/router';
+import { ReactElement, useEffect, useMemo } from 'react';
+
+import { PageLoading } from '@/components/loading';
+import { WorkspaceUnitAvatar } from '@/components/workspace-avatar';
+import { useLoadPublicWorkspace } from '@/hooks/use-load-public-workspace';
+import { useModal } from '@/store/globalModal';
+
+import type { NextPageWithLayout } from '../..//_app';
 
 const DynamicBlocksuite = dynamic(() => import('@/components/editor'), {
   ssr: false,

apps/web/src/pages/public-workspace/[workspaceId]/index.tsx

@@ -1,19 +1,21 @@
+import { Breadcrumbs } from '@affine/component';
+import { SearchIcon } from '@blocksuite/icons';
+import { useRouter } from 'next/router';
+import { ReactElement, useEffect, useMemo } from 'react';
+
+import { PageLoading } from '@/components/loading';
 import { PageList } from '@/components/page-list';
 import { WorkspaceUnitAvatar } from '@/components/workspace-avatar';
 import { useLoadPublicWorkspace } from '@/hooks/use-load-public-workspace';
 import { PageMeta } from '@/providers/app-state-provider';
 import { useModal } from '@/store/globalModal';
-import { Breadcrumbs } from '@affine/component';
+
-import { SearchIcon } from '@blocksuite/icons';
-import { useRouter } from 'next/router';
-import { ReactElement, useMemo, useEffect } from 'react';
 import {
   NavContainer,
   PageContainer,
   SearchButton,
   StyledBreadcrumbs,
 } from './[pageId]';
-import { PageLoading } from '@/components/loading';
 
 const All = () => {
   const router = useRouter();

apps/web/src/pages/workspace/[workspaceId]/[pageId].tsx

@@ -1,3 +1,8 @@
+import { useTranslation } from '@affine/i18n';
+import { assertEquals } from '@blocksuite/store';
+import dynamic from 'next/dynamic';
+import Head from 'next/head';
+import { useRouter } from 'next/router';
 import {
   PropsWithChildren,
   ReactElement,
@@ -5,18 +10,15 @@ import {
   useEffect,
   useState,
 } from 'react';
+
 import { EditorHeader } from '@/components/header';
 import MobileModal from '@/components/mobile-modal';
-import type { NextPageWithLayout } from '../..//_app';
 import WorkspaceLayout from '@/components/workspace-layout';
-import { useRouter } from 'next/router';
 import { usePageHelper } from '@/hooks/use-page-helper';
-import dynamic from 'next/dynamic';
-import Head from 'next/head';
-import { useTranslation } from '@affine/i18n';
 import { useGlobalState, useGlobalStateApi } from '@/store/app';
 import exampleMarkdown from '@/templates/Welcome-to-AFFiNE-Alpha-Downhills.md';
-import { assertEquals } from '@blocksuite/store';
+
+import type { NextPageWithLayout } from '../..//_app';
 
 const DynamicBlocksuite = dynamic(() => import('@/components/editor'), {
   ssr: false,

apps/web/src/pages/workspace/[workspaceId]/all.tsx

@@ -1,10 +1,11 @@
-import { PageList } from '@/components/page-list';
-import { AllPagesIcon } from '@blocksuite/icons';
-import { PageListHeader } from '@/components/header';
-import { ReactElement, useCallback } from 'react';
-import WorkspaceLayout from '@/components/workspace-layout';
 import { useTranslation } from '@affine/i18n';
+import { AllPagesIcon } from '@blocksuite/icons';
 import Head from 'next/head';
+import { ReactElement, useCallback } from 'react';
+
+import { PageListHeader } from '@/components/header';
+import { PageList } from '@/components/page-list';
+import WorkspaceLayout from '@/components/workspace-layout';
 import { useGlobalState } from '@/store/app';
 
 const All = () => {

apps/web/src/pages/workspace/[workspaceId]/favorite.tsx

@@ -1,10 +1,11 @@
+import { useTranslation } from '@affine/i18n';
+import { FavouritesIcon } from '@blocksuite/icons';
+import Head from 'next/head';
+import { ReactElement } from 'react';
+
 import { PageListHeader } from '@/components/header';
 import { PageList } from '@/components/page-list';
-import { FavouritesIcon } from '@blocksuite/icons';
-import { ReactElement } from 'react';
 import WorkspaceLayout from '@/components/workspace-layout';
-import { useTranslation } from '@affine/i18n';
-import Head from 'next/head';
 import { useGlobalState } from '@/store/app';
 
 export const Favorite = () => {

apps/web/src/pages/workspace/[workspaceId]/index.tsx

@@ -1,7 +1,8 @@
-import { useCallback, useEffect } from 'react';
 import { useRouter } from 'next/router';
-import useEnsureWorkspace from '@/hooks/use-ensure-workspace';
+import { useCallback, useEffect } from 'react';
+
 import { PageLoading } from '@/components/loading';
+import useEnsureWorkspace from '@/hooks/use-ensure-workspace';
 import usePageHelper from '@/hooks/use-page-helper';
 import { useGlobalState } from '@/store/app';
 

apps/web/src/pages/workspace/[workspaceId]/setting.tsx

@@ -1,31 +1,32 @@
+import { styled } from '@affine/component';
+import { WorkspaceUnit } from '@affine/datacenter';
+import { useTranslation } from '@affine/i18n';
+import { SettingsIcon } from '@blocksuite/icons';
+import Head from 'next/head';
+import {
+  CSSProperties,
+  ReactElement,
+  ReactNode,
+  startTransition,
+  useCallback,
+  useEffect,
+  useState,
+} from 'react';
+
+import { PageListHeader } from '@/components/header';
+import WorkspaceLayout from '@/components/workspace-layout';
+import {
+  ExportPage,
+  GeneralPage,
+  MembersPage,
+  PublishPage,
+  SyncPage,
+} from '@/components/workspace-setting';
 import {
   StyledSettingContainer,
   StyledSettingContent,
   WorkspaceSettingTagItem,
 } from '@/components/workspace-setting/style';
-import {
-  ReactElement,
-  ReactNode,
-  useState,
-  CSSProperties,
-  useEffect,
-  startTransition,
-  useCallback,
-} from 'react';
-import {
-  GeneralPage,
-  MembersPage,
-  PublishPage,
-  ExportPage,
-  SyncPage,
-} from '@/components/workspace-setting';
-import { SettingsIcon } from '@blocksuite/icons';
-import WorkspaceLayout from '@/components/workspace-layout';
-import { WorkspaceUnit } from '@affine/datacenter';
-import { useTranslation } from '@affine/i18n';
-import { PageListHeader } from '@/components/header';
-import Head from 'next/head';
-import { styled } from '@affine/component';
 import { useGlobalState } from '@/store/app';
 
 const useTabMap = () => {

apps/web/src/pages/workspace/[workspaceId]/trash.tsx

@@ -1,10 +1,11 @@
+import { useTranslation } from '@affine/i18n';
+import { TrashIcon } from '@blocksuite/icons';
+import Head from 'next/head';
+import { ReactElement, useCallback } from 'react';
+
 import { PageListHeader } from '@/components/header';
 import { PageList } from '@/components/page-list';
-import { TrashIcon } from '@blocksuite/icons';
-import { ReactElement, useCallback } from 'react';
 import WorkspaceLayout from '@/components/workspace-layout';
-import { useTranslation } from '@affine/i18n';
-import Head from 'next/head';
 import { useGlobalState } from '@/store/app';
 
 export const Trash = () => {

apps/web/src/pages/workspace/index.tsx

@@ -1,7 +1,8 @@
-import { useCallback, useEffect } from 'react';
 import { useRouter } from 'next/router';
-import useEnsureWorkspace from '@/hooks/use-ensure-workspace';
+import { useCallback, useEffect } from 'react';
+
 import { PageLoading } from '@/components/loading';
+import useEnsureWorkspace from '@/hooks/use-ensure-workspace';
 import { useGlobalState } from '@/store/app';
 
 export const WorkspaceIndex = () => {

apps/web/src/providers/ConfirmProvider.tsx

@@ -1,6 +1,6 @@
-import { createContext, useContext, useMemo } from 'react';
-import type { PropsWithChildren } from 'react';
 import { Confirm, ConfirmProps } from '@affine/component';
+import type { PropsWithChildren } from 'react';
+import { createContext, useContext, useMemo } from 'react';
 import { createStore, useStore } from 'zustand';
 import { combine, subscribeWithSelector } from 'zustand/middleware';
 import { UseBoundStore } from 'zustand/react';

apps/web/src/providers/ThemeProvider.tsx

@@ -1,10 +1,3 @@
-import { createContext, useContext, useEffect, useState } from 'react';
-import { Global, css } from '@emotion/react';
-import {
-  ThemeProvider as MuiThemeProvider,
-  createTheme as MuiCreateTheme,
-} from '@mui/material/styles';
-import type { PropsWithChildren } from 'react';
 import {
   Theme,
   ThemeMode,
@@ -12,12 +5,20 @@ import {
   ThemeProviderValue,
 } from '@affine/component';
 import {
-  getLightTheme,
   getDarkTheme,
+  getLightTheme,
   globalThemeVariables,
   ThemeProvider as ComponentThemeProvider,
 } from '@affine/component';
-import { SystemThemeHelper, localStorageThemeHelper } from '@affine/component';
+import { localStorageThemeHelper, SystemThemeHelper } from '@affine/component';
+import { css, Global } from '@emotion/react';
+import {
+  createTheme as MuiCreateTheme,
+  ThemeProvider as MuiThemeProvider,
+} from '@mui/material/styles';
+import type { PropsWithChildren } from 'react';
+import { createContext, useContext, useEffect, useState } from 'react';
+
 import useCurrentPageMeta from '@/hooks/use-current-page-meta';
 
 export const ThemeContext = createContext<ThemeProviderValue>({

apps/web/src/providers/app-state-provider/Provider.tsx

@@ -1,9 +1,11 @@
-import { createContext, useContext, useEffect, useState } from 'react';
-import type { PropsWithChildren } from 'react';
-import { AppStateContext } from './interface';
 import type { Disposable } from '@blocksuite/global/utils';
+import type { PropsWithChildren } from 'react';
+import { createContext, useContext, useEffect, useState } from 'react';
+
 import { useGlobalState } from '@/store/app';
 
+import { AppStateContext } from './interface';
+
 type AppStateContextProps = PropsWithChildren<Record<string, unknown>>;
 
 export const AppState = createContext<AppStateContext>({} as AppStateContext);

apps/web/src/providers/app-state-provider/index.ts

@@ -1,2 +1,2 @@
-export * from './Provider';
 export * from './interface';
+export * from './Provider';

apps/web/src/providers/app-state-provider/interface.ts

@@ -1,5 +1,4 @@
 import type { EditorContainer } from '@blocksuite/editor';
-
 import type {
   Page as StorePage,
   PageMeta as StorePageMeta,

apps/web/src/store/app/blocksuite/index.ts

@@ -1,6 +1,7 @@
-import { Page, Workspace } from '@blocksuite/store';
-import { EditorContainer } from '@blocksuite/editor';
 import { BlockHub } from '@blocksuite/blocks';
+import { EditorContainer } from '@blocksuite/editor';
+import { Page, Workspace } from '@blocksuite/store';
+
 import { GlobalActionsCreator } from '@/store/app';
 
 export interface BlockSuiteState {

apps/web/src/store/app/datacenter/index.tsx

@@ -1,14 +1,15 @@
+import type { DataCenter } from '@affine/datacenter';
+import { getDataCenter, WorkspaceUnit } from '@affine/datacenter';
+import { DisposableGroup } from '@blocksuite/global/utils';
+import React, { useCallback, useEffect } from 'react';
+
+import { PageMeta } from '@/providers/app-state-provider';
+import { createDefaultWorkspace } from '@/providers/app-state-provider/utils';
 import {
   GlobalActionsCreator,
   useGlobalState,
   useGlobalStateApi,
 } from '@/store/app';
-import type { DataCenter } from '@affine/datacenter';
-import { PageMeta } from '@/providers/app-state-provider';
-import { getDataCenter, WorkspaceUnit } from '@affine/datacenter';
-import { createDefaultWorkspace } from '@/providers/app-state-provider/utils';
-import React, { useCallback, useEffect } from 'react';
-import { DisposableGroup } from '@blocksuite/global/utils';
 
 export type DataCenterState = {
   readonly dataCenter: DataCenter;