chore: strict eslint check (#1084)

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 {
-  LogoIcon,
-  DocIcon,
-  TwitterIcon,
-  GithubIcon,
-  DiscordIcon,
-  TelegramIcon,
-  RedditIcon,
-  LinkIcon,
-} from './Icons';
+import { useTranslation } from '@affine/i18n';
+
+import bg from '@/components/contact-modal/bg.png';
+
 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 {
-  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 { useTranslation } from '@affine/i18n';
+import React, { cloneElement, useEffect, useState } from 'react';
+
 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 { 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';
+import { shouldShowWarning, useWarningMessage } from './utils';
 
 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, styled, Tooltip, IconButton } from '@affine/component';
-import { useTranslation } from '@affine/i18n';
-import { useModal } from '@/store/globalModal';
-import { useCallback, useEffect, useState } from 'react';
+import { displayFlex, IconButton, styled, Tooltip } from '@affine/component';
 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 { StyledButtonWrapper, StyledTitle } from './styles';
+import { Modal, ModalCloseButton, ModalWrapper } from '@affine/component';
 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 { PaperIcon, EdgelessIcon } from '@blocksuite/icons';
+import { useRouter } from 'next/router';
 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 { StyleWorkspaceInfo, StyleWorkspaceTitle, StyledCard } from './styles';
-import { useTranslation } from '@affine/i18n';
+import { WorkspaceUnitAvatar } from '@/components/workspace-avatar';
 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 { useState } from 'react';
-import { CreateWorkspaceModal } from '../create-workspace';
-
+import { Modal, ModalCloseButton, ModalWrapper } from '@affine/component';
 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 { WorkspaceLeave } from './leave';
+import { MuiFade } from '@affine/component';
+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();