style: enable import-x/no-duplicates (#6279)

packages/frontend/component/src/components/auth-components/auth-input.tsx

@@ -1,6 +1,7 @@
 import clsx from 'clsx';
 
-import { Input, type InputProps } from '../../ui/input';
+import type { InputProps } from '../../ui/input';
+import { Input } from '../../ui/input';
 import * as styles from './share.css';
 export type AuthInputProps = InputProps & {
   label?: string;

packages/frontend/component/src/components/auth-components/auth-page-container.tsx

@@ -1,10 +1,5 @@
-import {
-  type FC,
-  type PropsWithChildren,
-  type ReactNode,
-  useEffect,
-  useState,
-} from 'react';
+import type { FC, PropsWithChildren, ReactNode } from 'react';
+import { useEffect, useState } from 'react';
 
 import { Empty } from '../../ui/empty';
 import { AffineOtherPageLayout } from '../affine-other-page-layout';

packages/frontend/component/src/components/auth-components/back-button.tsx

@@ -1,8 +1,9 @@
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { ArrowLeftSmallIcon } from '@blocksuite/icons';
-import { type FC } from 'react';
+import type { FC } from 'react';
 
-import { Button, type ButtonProps } from '../../ui/button';
+import type { ButtonProps } from '../../ui/button';
+import { Button } from '../../ui/button';
 
 export const BackButton: FC<ButtonProps> = props => {
   const t = useAFFiNEI18N();

packages/frontend/component/src/components/auth-components/count-down-render.tsx

@@ -1,4 +1,5 @@
-import { forwardRef, type HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
+import { forwardRef } from 'react';
 
 const formatTime = (time: number): string => {
   const minutes = Math.floor(time / 60);

packages/frontend/component/src/components/auth-components/onboarding-page.tsx

@@ -3,8 +3,9 @@ import { fetchWithTraceReport } from '@affine/graphql';
 import { ArrowRightSmallIcon } from '@blocksuite/icons';
 import clsx from 'clsx';
 import { useEffect, useMemo, useState } from 'react';
+import type { Location } from 'react-router-dom';
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
-import { type Location, useLocation, useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import useSWR from 'swr';
 
 import { Button } from '../../ui/button';

packages/frontend/component/src/components/auth-components/password-input/index.tsx

@@ -1,9 +1,10 @@
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { passwordStrength } from 'check-password-strength';
-import { type FC, useEffect } from 'react';
-import { useCallback, useState } from 'react';
+import type { FC } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
-import { Input, type InputProps } from '../../../ui/input';
+import type { InputProps } from '../../../ui/input';
+import { Input } from '../../../ui/input';
 import * as styles from '../share.css';
 import { ErrorIcon } from './error';
 import { SuccessIcon } from './success';

packages/frontend/component/src/components/auth-components/password-input/tag.tsx

@@ -1,5 +1,6 @@
 import clsx from 'clsx';
-import { type FC, useMemo } from 'react';
+import type { FC } from 'react';
+import { useMemo } from 'react';
 
 import type { Status } from './index';
 import { tag } from './style.css';

packages/frontend/component/src/components/auth-components/set-password.tsx

@@ -1,5 +1,6 @@
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
-import { type FC, useCallback, useRef, useState } from 'react';
+import type { FC } from 'react';
+import { useCallback, useRef, useState } from 'react';
 
 import { Button } from '../../ui/button';
 import { Wrapper } from '../../ui/layout';

packages/frontend/component/src/components/card/block-card/index.tsx

@@ -1,4 +1,5 @@
-import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
+import type { HTMLAttributes, ReactNode } from 'react';
+import { forwardRef } from 'react';
 
 import * as styles from './styles.css';
 

packages/frontend/component/src/components/disable-public-link/index.tsx

@@ -1,6 +1,7 @@
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 
-import { ConfirmModal, type ConfirmModalProps } from '../../ui/modal';
+import type { ConfirmModalProps } from '../../ui/modal';
+import { ConfirmModal } from '../../ui/modal';
 
 export const PublicLinkDisableModal = (props: ConfirmModalProps) => {
   const t = useAFFiNEI18N();

packages/frontend/component/src/components/global-loading/index.tsx

@@ -1,5 +1,6 @@
 import { useAtomValue } from 'jotai';
-import { type ReactNode, useEffect, useState } from 'react';
+import type { ReactNode } from 'react';
+import { useEffect, useState } from 'react';
 
 import { Loading } from '../../ui/loading';
 import * as styles from './index.css';

packages/frontend/component/src/components/member-components/accept-invite-page.tsx

@@ -1,5 +1,5 @@
 import { AuthPageContainer } from '@affine/component/auth-components';
-import { type GetInviteInfoQuery } from '@affine/graphql';
+import type { GetInviteInfoQuery } from '@affine/graphql';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 
 import { Avatar } from '../../ui/avatar';

packages/frontend/component/src/theme/theme.css.ts

@@ -1,5 +1,8 @@
-import { cssVar } from '@toeverything/theme';
-import { darkCssVariables, lightCssVariables } from '@toeverything/theme';
+import {
+  cssVar,
+  darkCssVariables,
+  lightCssVariables,
+} from '@toeverything/theme';
 import { globalStyle } from '@vanilla-extract/css';
 globalStyle('body', {
   color: cssVar('textPrimaryColor'),

packages/frontend/component/src/ui/avatar/avatar.stories.tsx

@@ -1,7 +1,8 @@
 import { CameraIcon } from '@blocksuite/icons';
 import type { Meta, StoryFn } from '@storybook/react';
 
-import { Avatar, type AvatarProps } from './avatar';
+import type { AvatarProps } from './avatar';
+import { Avatar } from './avatar';
 
 export default {
   title: 'UI/Avatar',

packages/frontend/component/src/ui/avatar/avatar.tsx

@@ -1,19 +1,27 @@
 import { CloseIcon } from '@blocksuite/icons';
+import type {
+  AvatarFallbackProps,
+  AvatarImageProps,
+  AvatarProps as RadixAvatarProps,
+} from '@radix-ui/react-avatar';
 import {
-  type AvatarFallbackProps,
-  type AvatarImageProps,
-  type AvatarProps as RadixAvatarProps,
   Fallback as AvatarFallback,
   Image as AvatarImage,
   Root as AvatarRoot,
 } from '@radix-ui/react-avatar';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import clsx from 'clsx';
-import type { CSSProperties, HTMLAttributes, MouseEvent } from 'react';
-import { forwardRef, type ReactElement, useMemo, useState } from 'react';
+import type {
+  CSSProperties,
+  HTMLAttributes,
+  MouseEvent,
+  ReactElement,
+} from 'react';
+import { forwardRef, useMemo, useState } from 'react';
 
 import { IconButton } from '../button';
-import { Tooltip, type TooltipProps } from '../tooltip';
+import type { TooltipProps } from '../tooltip';
+import { Tooltip } from '../tooltip';
 import { ColorfulFallback } from './colorful-fallback';
 import * as style from './style.css';
 import { sizeVar } from './style.css';

packages/frontend/component/src/ui/button/button.stories.tsx

@@ -1,7 +1,8 @@
 import { InformationIcon } from '@blocksuite/icons';
 import type { Meta, StoryFn } from '@storybook/react';
 
-import { Button, type ButtonProps } from './button';
+import type { ButtonProps } from './button';
+import { Button } from './button';
 export default {
   title: 'UI/Button',
   component: Button,

packages/frontend/component/src/ui/button/button.tsx

@@ -1,12 +1,11 @@
 import clsx from 'clsx';
-import {
-  type FC,
-  forwardRef,
-  type HTMLAttributes,
-  type PropsWithChildren,
-  type ReactElement,
-  useMemo,
+import type {
+  FC,
+  HTMLAttributes,
+  PropsWithChildren,
+  ReactElement,
 } from 'react';
+import { forwardRef, useMemo } from 'react';
 
 import { Loading } from '../loading';
 import { button, buttonIcon } from './button.css';

packages/frontend/component/src/ui/button/dropdown-button.tsx

@@ -1,9 +1,6 @@
 import { ArrowDownSmallIcon } from '@blocksuite/icons';
-import {
-  type ButtonHTMLAttributes,
-  forwardRef,
-  type MouseEventHandler,
-} from 'react';
+import type { ButtonHTMLAttributes, MouseEventHandler } from 'react';
+import { forwardRef } from 'react';
 
 import * as styles from './styles.css';
 

packages/frontend/component/src/ui/button/icon-button.stories.tsx

@@ -1,7 +1,8 @@
 import { InformationIcon } from '@blocksuite/icons';
 import type { Meta, StoryFn } from '@storybook/react';
 
-import { IconButton, type IconButtonProps } from './icon-button';
+import type { IconButtonProps } from './icon-button';
+import { IconButton } from './icon-button';
 export default {
   title: 'UI/IconButton',
   component: IconButton,

packages/frontend/component/src/ui/button/icon-button.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
-import type { HTMLAttributes, PropsWithChildren } from 'react';
-import { forwardRef, type ReactElement } from 'react';
+import type { HTMLAttributes, PropsWithChildren, ReactElement } from 'react';
+import { forwardRef } from 'react';
 
 import { Loading } from '../loading';
 import type { ButtonType } from './button';

packages/frontend/component/src/ui/button/radio.tsx

@@ -4,7 +4,8 @@ import type {
 } from '@radix-ui/react-radio-group';
 import * as RadioGroup from '@radix-ui/react-radio-group';
 import clsx from 'clsx';
-import { type CSSProperties, forwardRef } from 'react';
+import type { CSSProperties } from 'react';
+import { forwardRef } from 'react';
 
 import * as styles from './styles.css';
 

packages/frontend/component/src/ui/checkbox/checkbox.tsx

@@ -1,6 +1,7 @@
 // components/checkbox.tsx
 import clsx from 'clsx';
-import { type HTMLAttributes, useCallback, useEffect, useRef } from 'react';
+import type { HTMLAttributes } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 
 import * as icons from './icons';
 import * as styles from './index.css';

packages/frontend/component/src/ui/date-picker/calendar/calendar.tsx

@@ -6,8 +6,8 @@ import * as styles from './calendar.css';
 import { DATE_MAX, DATE_MIN } from './constants';
 import { DayPicker } from './day-picker';
 import { MonthPicker } from './month-picker';
-import type { SelectMode } from './types';
-import { type DatePickerProps, defaultDatePickerProps } from './types';
+import type { DatePickerProps, SelectMode } from './types';
+import { defaultDatePickerProps } from './types';
 import { YearPicker } from './year-picker';
 
 export type { DatePickerProps } from './types';

packages/frontend/component/src/ui/date-picker/calendar/items.tsx

@@ -1,13 +1,8 @@
 import { ArrowLeftSmallIcon, ArrowRightSmallIcon } from '@blocksuite/icons';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import clsx from 'clsx';
-import {
-  forwardRef,
-  type HTMLAttributes,
-  memo,
-  type PropsWithChildren,
-  type ReactNode,
-} from 'react';
+import type { HTMLAttributes, PropsWithChildren, ReactNode } from 'react';
+import { forwardRef, memo } from 'react';
 
 import { IconButton } from '../../button';
 import * as styles from './calendar.css';

packages/frontend/component/src/ui/date-picker/week-date-picker.tsx

@@ -1,9 +1,8 @@
 import { ArrowLeftSmallIcon, ArrowRightSmallIcon } from '@blocksuite/icons';
 import clsx from 'clsx';
 import dayjs from 'dayjs';
+import type { ForwardedRef, HTMLAttributes } from 'react';
 import {
-  type ForwardedRef,
-  type HTMLAttributes,
   memo,
   useCallback,
   useEffect,

packages/frontend/component/src/ui/divider/divider.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryFn } from '@storybook/react';
 
-import { Divider, type DividerProps } from './index';
+import type { DividerProps } from './index';
+import { Divider } from './index';
 
 export default {
   title: 'UI/Divider',

packages/frontend/component/src/ui/editable/inline-edit.stories.tsx

@@ -3,7 +3,8 @@ import { useCallback, useRef, useState } from 'react';
 
 import { Button } from '../button';
 import { ResizePanel } from '../resize-panel/resize-panel';
-import { InlineEdit, type InlineEditHandle } from './inline-edit';
+import type { InlineEditHandle } from './inline-edit';
+import { InlineEdit } from './inline-edit';
 
 export default {
   title: 'UI/Editable/Inline Edit',

packages/frontend/component/src/ui/empty/empty.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryFn } from '@storybook/react';
 
-import { Empty, type EmptyContentProps } from './index';
+import type { EmptyContentProps } from './index';
+import { Empty } from './index';
 
 export default {
   title: 'UI/Empty',

packages/frontend/component/src/ui/input/input.stories.tsx

@@ -1,7 +1,8 @@
 import { InformationIcon } from '@blocksuite/icons';
 import type { Meta, StoryFn } from '@storybook/react';
 
-import { Input, type InputProps } from './index';
+import type { InputProps } from './index';
+import { Input } from './index';
 
 export default {
   title: 'UI/Input',

packages/frontend/component/src/ui/loading/loading.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryFn } from '@storybook/react';
 
-import { Loading, type LoadingProps } from './loading';
+import type { LoadingProps } from './loading';
+import { Loading } from './loading';
 
 export default {
   title: 'UI/Loading',

packages/frontend/component/src/ui/lottie/collections-icon.stories.tsx

@@ -1,9 +1,7 @@
 import type { Meta, StoryFn } from '@storybook/react';
 
-import {
-  AnimatedCollectionsIcon,
-  type CollectionsIconProps,
-} from './collections-icon';
+import type { CollectionsIconProps } from './collections-icon';
+import { AnimatedCollectionsIcon } from './collections-icon';
 
 export default {
   title: 'UI/Lottie/Collection Icons',

packages/frontend/component/src/ui/lottie/collections-icon.tsx

@@ -1,5 +1,6 @@
 import clsx from 'clsx';
-import Lottie, { type LottieRef } from 'lottie-react';
+import type { LottieRef } from 'lottie-react';
+import Lottie from 'lottie-react';
 import { useEffect, useRef } from 'react';
 
 import animationData from './collections-icon.json';

packages/frontend/component/src/ui/lottie/delete-icon.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryFn } from '@storybook/react';
 
-import { AnimatedDeleteIcon, type DeleteIconProps } from './delete-icon';
+import type { DeleteIconProps } from './delete-icon';
+import { AnimatedDeleteIcon } from './delete-icon';
 
 export default {
   title: 'UI/Lottie/Delete Icon',

packages/frontend/component/src/ui/lottie/delete-icon.tsx

@@ -1,5 +1,6 @@
 import clsx from 'clsx';
-import Lottie, { type LottieRef } from 'lottie-react';
+import type { LottieRef } from 'lottie-react';
+import Lottie from 'lottie-react';
 import { useEffect, useRef } from 'react';
 
 import animationData from './delete-icon.json';

packages/frontend/component/src/ui/menu/menu-icon.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
-import type { PropsWithChildren, ReactNode } from 'react';
-import { forwardRef, type HTMLAttributes, useMemo } from 'react';
+import type { HTMLAttributes, PropsWithChildren, ReactNode } from 'react';
+import { forwardRef, useMemo } from 'react';
 
 import { menuItemIcon } from './styles.css';
 

packages/frontend/component/src/ui/menu/menu-trigger.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryFn } from '@storybook/react';
 
-import { MenuTrigger, type MenuTriggerProps } from './index';
+import type { MenuTriggerProps } from './index';
+import { MenuTrigger } from './index';
 
 export default {
   title: 'UI/MenuTrigger',

packages/frontend/component/src/ui/menu/menu-trigger.tsx

@@ -1,13 +1,13 @@
 import { ArrowDownSmallIcon } from '@blocksuite/icons';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import clsx from 'clsx';
-import type { PropsWithChildren } from 'react';
-import {
-  type CSSProperties,
-  forwardRef,
-  type HTMLAttributes,
-  type ReactNode,
+import type {
+  CSSProperties,
+  HTMLAttributes,
+  PropsWithChildren,
+  ReactNode,
 } from 'react';
+import { forwardRef } from 'react';
 
 import { MenuIcon } from './menu-icon';
 import * as styles from './styles.css';

packages/frontend/component/src/ui/menu/menu.stories.tsx

@@ -1,15 +1,15 @@
 import { InformationIcon } from '@blocksuite/icons';
 import type { Meta, StoryFn } from '@storybook/react';
-import { type ReactNode, useCallback, useState } from 'react';
+import type { ReactNode } from 'react';
+import { useCallback, useState } from 'react';
 
 import { Button } from '../button';
 import { Tooltip } from '../tooltip';
+import type { MenuItemProps, MenuProps } from './index';
 import {
   Menu,
   MenuIcon,
   MenuItem,
-  type MenuItemProps,
-  type MenuProps,
   MenuSeparator,
   MenuSub,
   MenuTrigger,

packages/frontend/component/src/ui/menu/use-menu-item.tsx

@@ -2,7 +2,7 @@ import { DoneIcon } from '@blocksuite/icons';
 import clsx from 'clsx';
 import { useMemo } from 'react';
 
-import { type MenuItemProps } from './menu.types';
+import type { MenuItemProps } from './menu.types';
 import { MenuIcon } from './menu-icon';
 import * as styles from './styles.css';
 

packages/frontend/component/src/ui/modal/confirm-modal.tsx

@@ -3,7 +3,8 @@ import clsx from 'clsx';
 
 import type { ButtonProps } from '../button';
 import { Button } from '../button';
-import { Modal, type ModalProps } from './modal';
+import type { ModalProps } from './modal';
+import { Modal } from './modal';
 import * as styles from './styles.css';
 
 export interface ConfirmModalProps extends ModalProps {

packages/frontend/component/src/ui/modal/modal.stories.tsx

@@ -2,10 +2,14 @@ import type { Meta, StoryFn } from '@storybook/react';
 import { useCallback, useState } from 'react';
 
 import { Button } from '../button';
-import { Input, type InputProps } from '../input';
-import { ConfirmModal, type ConfirmModalProps } from './confirm-modal';
-import { Modal, type ModalProps } from './modal';
-import { OverlayModal, type OverlayModalProps } from './overlay-modal';
+import type { InputProps } from '../input';
+import { Input } from '../input';
+import type { ConfirmModalProps } from './confirm-modal';
+import { ConfirmModal } from './confirm-modal';
+import type { ModalProps } from './modal';
+import { Modal } from './modal';
+import type { OverlayModalProps } from './overlay-modal';
+import { OverlayModal } from './overlay-modal';
 
 export default {
   title: 'UI/Modal',

packages/frontend/component/src/ui/modal/modal.tsx

@@ -8,9 +8,11 @@ import type {
 import * as Dialog from '@radix-ui/react-dialog';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import clsx from 'clsx';
-import { type CSSProperties, forwardRef } from 'react';
+import type { CSSProperties } from 'react';
+import { forwardRef } from 'react';
 
-import { IconButton, type IconButtonProps } from '../button';
+import type { IconButtonProps } from '../button';
+import { IconButton } from '../button';
 import * as styles from './styles.css';
 
 export interface ModalProps extends DialogProps {

packages/frontend/component/src/ui/modal/overlay-modal.tsx

@@ -3,8 +3,10 @@ import { cssVar } from '@toeverything/theme';
 import { memo, useCallback } from 'react';
 import { Link } from 'react-router-dom';
 
-import { Button, type ButtonProps } from '../button';
-import { Modal, type ModalProps } from './modal';
+import type { ButtonProps } from '../button';
+import { Button } from '../button';
+import type { ModalProps } from './modal';
+import { Modal } from './modal';
 import * as styles from './overlay-modal.css';
 
 const defaultContentOptions: ModalProps['contentOptions'] = {

packages/frontend/component/src/ui/popover/popover.tsx

@@ -5,7 +5,8 @@ import type {
 } from '@radix-ui/react-popover';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import clsx from 'clsx';
-import { type ReactNode, useMemo } from 'react';
+import type { ReactNode } from 'react';
+import { useMemo } from 'react';
 
 import * as styles from './styles.css';
 

packages/frontend/component/src/ui/resize-panel/resize-panel.tsx

@@ -1,10 +1,6 @@
 import clsx from 'clsx';
-import {
-  type HTMLAttributes,
-  type PropsWithChildren,
-  useEffect,
-  useRef,
-} from 'react';
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+import { useEffect, useRef } from 'react';
 
 import * as styles from './styles.css';
 

packages/frontend/component/src/ui/scrollbar/scrollable.tsx

@@ -1,6 +1,7 @@
 import * as ScrollArea from '@radix-ui/react-scroll-area';
 import clsx from 'clsx';
-import { forwardRef, type RefAttributes } from 'react';
+import type { RefAttributes } from 'react';
+import { forwardRef } from 'react';
 
 import * as styles from './index.css';
 

packages/frontend/component/src/ui/scrollbar/scrollbar.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryFn } from '@storybook/react';
 
-import { ScrollableContainer, type ScrollableContainerProps } from './index';
+import type { ScrollableContainerProps } from './index';
+import { ScrollableContainer } from './index';
 
 export default {
   title: 'UI/Scrollbar',

packages/frontend/component/src/ui/scrollbar/scrollbar.tsx

@@ -1,6 +1,7 @@
 import * as ScrollArea from '@radix-ui/react-scroll-area';
 import clsx from 'clsx';
-import { type PropsWithChildren, useRef } from 'react';
+import type { PropsWithChildren } from 'react';
+import { useRef } from 'react';
 
 import * as styles from './index.css';
 import { useHasScrollTop } from './use-has-scroll-top';

packages/frontend/component/src/ui/scrollbar/use-has-scroll-top.tsx

@@ -1,4 +1,5 @@
-import { type RefObject, useEffect, useState } from 'react';
+import type { RefObject } from 'react';
+import { useEffect, useState } from 'react';
 
 export function useHasScrollTop(ref: RefObject<HTMLElement> | null) {
   const [hasScrollTop, setHasScrollTop] = useState(false);

packages/frontend/component/src/ui/skeleton/skeleton.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryFn } from '@storybook/react';
 
-import { Skeleton, type SkeletonProps } from './index';
+import type { SkeletonProps } from './index';
+import { Skeleton } from './index';
 
 export default {
   title: 'UI/Skeleton',

packages/frontend/component/src/ui/switch/switch.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryFn } from '@storybook/react';
 
-import { Switch, type SwitchProps } from './index';
+import type { SwitchProps } from './index';
+import { Switch } from './index';
 
 export default {
   title: 'UI/Switch',

packages/frontend/component/src/ui/switch/switch.tsx

@@ -1,11 +1,7 @@
 // components/switch.tsx
 import clsx from 'clsx';
-import {
-  type HTMLAttributes,
-  type ReactNode,
-  useCallback,
-  useState,
-} from 'react';
+import type { HTMLAttributes, ReactNode } from 'react';
+import { useCallback, useState } from 'react';
 
 import * as styles from './index.css';
 

packages/frontend/component/src/ui/tooltip/tooltip.stories.tsx

@@ -1,7 +1,8 @@
 import type { Meta, StoryFn } from '@storybook/react';
 
 import { Button } from '../button';
-import Tooltip, { type TooltipProps } from './index';
+import type { TooltipProps } from './index';
+import Tooltip from './index';
 
 export default {
   title: 'UI/Tooltip',

packages/frontend/core/src/bootstrap/edgeless-template.ts

@@ -1,7 +1,5 @@
 import { builtInTemplates } from '@affine/templates/edgeless';
-import {
-  EdgelessTemplatePanel,
-  type TemplateManager,
-} from '@blocksuite/blocks';
+import type { TemplateManager } from '@blocksuite/blocks';
+import { EdgelessTemplatePanel } from '@blocksuite/blocks';
 
 EdgelessTemplatePanel.templates.extend(builtInTemplates as TemplateManager);

packages/frontend/core/src/commands/affine-settings.tsx

@@ -1,12 +1,12 @@
 import type { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { SettingsIcon } from '@blocksuite/icons';
 import type { AffineEditorContainer } from '@blocksuite/presets';
-import { appSettingAtom } from '@toeverything/infra';
 import {
+  appSettingAtom,
   PreconditionStrategy,
   registerAffineCommand,
 } from '@toeverything/infra';
-import { type createStore } from 'jotai';
+import type { createStore } from 'jotai';
 import type { useTheme } from 'next-themes';
 
 import { openQuickSearchModalAtom } from '../atoms';

packages/frontend/core/src/components/affine/affine-error-boundary/affine-error-fallback.tsx

@@ -4,10 +4,8 @@ import type { FC } from 'react';
 import { useMemo } from 'react';
 
 import * as styles from './affine-error-fallback.css';
-import {
-  ERROR_REFLECT_KEY,
-  type FallbackProps,
-} from './error-basic/fallback-creator';
+import type { FallbackProps } from './error-basic/fallback-creator';
+import { ERROR_REFLECT_KEY } from './error-basic/fallback-creator';
 import { DumpInfo } from './error-basic/info-logger';
 import { AnyErrorFallback } from './error-fallbacks/any-error-fallback';
 import { NoPageRootFallback } from './error-fallbacks/no-page-root-fallback';

packages/frontend/core/src/components/affine/affine-error-boundary/error-basic/error-detail.tsx

@@ -3,12 +3,8 @@ import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
 import { Trans } from '@affine/i18n';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { useTheme } from 'next-themes';
-import {
-  type FC,
-  type PropsWithChildren,
-  type ReactNode,
-  useState,
-} from 'react';
+import type { FC, PropsWithChildren, ReactNode } from 'react';
+import { useState } from 'react';
 
 import imageUrlFor404 from '../error-assets/404-status.assets.svg';
 import imageUrlForDark500 from '../error-assets/dark-500-status.assets.svg';

packages/frontend/core/src/components/affine/affine-error-boundary/error-basic/info-logger.tsx

@@ -1,6 +1,8 @@
-import { WorkspaceListService } from '@toeverything/infra';
-import { useService } from '@toeverything/infra';
-import { useLiveData } from '@toeverything/infra';
+import {
+  useLiveData,
+  useService,
+  WorkspaceListService,
+} from '@toeverything/infra';
 import { useEffect } from 'react';
 import { useLocation, useParams } from 'react-router-dom';
 

packages/frontend/core/src/components/affine/affine-error-boundary/error-fallbacks/any-error-fallback.tsx

@@ -1,5 +1,6 @@
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
-import { type FC, useCallback } from 'react';
+import type { FC } from 'react';
+import { useCallback } from 'react';
 
 import { ErrorDetail } from '../error-basic/error-detail';
 import type { FallbackProps } from '../error-basic/fallback-creator';

packages/frontend/core/src/components/affine/affine-error-boundary/index.tsx

@@ -3,7 +3,7 @@ import type { FC, PropsWithChildren } from 'react';
 import { useCallback } from 'react';
 
 import { AffineErrorFallback } from './affine-error-fallback';
-import { type FallbackProps } from './error-basic/fallback-creator';
+import type { FallbackProps } from './error-basic/fallback-creator';
 
 export { type FallbackProps } from './error-basic/fallback-creator';
 

packages/frontend/core/src/components/affine/app-container.tsx

@@ -1,8 +1,6 @@
 import { useAppSettingHelper } from '../../hooks/affine/use-app-setting-helper';
-import {
-  AppContainer as AppContainerWithoutSettings,
-  type WorkspaceRootProps,
-} from '../workspace';
+import type { WorkspaceRootProps } from '../workspace';
+import { AppContainer as AppContainerWithoutSettings } from '../workspace';
 
 export const AppContainer = (props: WorkspaceRootProps) => {
   const { appSettings } = useAppSettingHelper();

packages/frontend/core/src/components/affine/auth/after-sign-up-send-email.tsx

@@ -8,7 +8,8 @@ import { Button } from '@affine/component/ui/button';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
 import { Trans } from '@affine/i18n';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
-import { type FC, useCallback } from 'react';
+import type { FC } from 'react';
+import { useCallback } from 'react';
 
 import { useCurrentLoginStatus } from '../../../hooks/affine/use-current-login-status';
 import type { AuthPanelProps } from './index';

packages/frontend/core/src/components/affine/auth/index.tsx

@@ -1,8 +1,7 @@
-import {
-  AuthModal as AuthModalBase,
-  type AuthModalProps as AuthModalBaseProps,
-} from '@affine/component/auth-components';
-import { type FC, useCallback, useMemo } from 'react';
+import type { AuthModalProps as AuthModalBaseProps } from '@affine/component/auth-components';
+import { AuthModal as AuthModalBase } from '@affine/component/auth-components';
+import type { FC } from 'react';
+import { useCallback, useMemo } from 'react';
 
 import { AfterSignInSendEmail } from './after-sign-in-send-email';
 import { AfterSignUpSendEmail } from './after-sign-up-send-email';

packages/frontend/core/src/components/affine/auth/no-access.tsx

@@ -5,7 +5,8 @@ import {
 } from '@affine/component/auth-components';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { NewIcon } from '@blocksuite/icons';
-import { type FC, useCallback } from 'react';
+import type { FC } from 'react';
+import { useCallback } from 'react';
 
 import { useCurrentLoginStatus } from '../../../hooks/affine/use-current-login-status';
 import type { AuthPanelProps } from './index';

packages/frontend/core/src/components/affine/auth/oauth.tsx

@@ -5,7 +5,8 @@ import {
 } from '@affine/core/hooks/affine/use-server-config';
 import { OAuthProviderType } from '@affine/graphql';
 import { GithubIcon, GoogleDuotoneIcon } from '@blocksuite/icons';
-import { type ReactElement, useCallback, useState } from 'react';
+import type { ReactElement } from 'react';
+import { useCallback, useState } from 'react';
 
 import { useAuth } from './use-auth';
 

packages/frontend/core/src/components/affine/auth/sign-in.tsx

@@ -5,16 +5,13 @@ import {
 } from '@affine/component/auth-components';
 import { Button } from '@affine/component/ui/button';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
-import {
-  findGraphQLError,
-  type GetUserQuery,
-  getUserQuery,
-} from '@affine/graphql';
+import type { GetUserQuery } from '@affine/graphql';
+import { findGraphQLError, getUserQuery } from '@affine/graphql';
 import { Trans } from '@affine/i18n';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { ArrowDownBigIcon } from '@blocksuite/icons';
-import { type FC, useState } from 'react';
-import { useCallback } from 'react';
+import type { FC } from 'react';
+import { useCallback, useState } from 'react';
 
 import { useCurrentLoginStatus } from '../../../hooks/affine/use-current-login-status';
 import { useMutation } from '../../../hooks/use-mutation';

packages/frontend/core/src/components/affine/awareness/index.tsx

@@ -1,5 +1,4 @@
-import { useService } from '@toeverything/infra';
-import { useLiveData } from '@toeverything/infra';
+import { useLiveData, useService } from '@toeverything/infra';
 import { Suspense, useEffect } from 'react';
 
 import { useCurrentLoginStatus } from '../../../hooks/affine/use-current-login-status';

packages/frontend/core/src/components/affine/create-workspace-modal/index.tsx

@@ -1,9 +1,6 @@
 import { Avatar, Input, Switch, toast } from '@affine/component';
-import {
-  ConfirmModal,
-  type ConfirmModalProps,
-  Modal,
-} from '@affine/component/ui/modal';
+import type { ConfirmModalProps } from '@affine/component/ui/modal';
+import { ConfirmModal, Modal } from '@affine/component/ui/modal';
 import { authAtom, openDisableCloudAlertModalAtom } from '@affine/core/atoms';
 import { useCurrentLoginStatus } from '@affine/core/hooks/affine/use-current-login-status';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
@@ -12,13 +9,15 @@ import { apis } from '@affine/electron-api';
 import { WorkspaceFlavour } from '@affine/env/workspace';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { _addLocalWorkspace } from '@affine/workspace-impl';
-import { WorkspaceManager } from '@toeverything/infra';
-import { buildShowcaseWorkspace, initEmptyPage } from '@toeverything/infra';
-import { useService } from '@toeverything/infra';
+import {
+  buildShowcaseWorkspace,
+  initEmptyPage,
+  useService,
+  WorkspaceManager,
+} from '@toeverything/infra';
 import { useSetAtom } from 'jotai';
 import type { KeyboardEvent } from 'react';
-import { useLayoutEffect } from 'react';
-import { useCallback, useState } from 'react';
+import { useCallback, useLayoutEffect, useState } from 'react';
 
 import { CloudSvg } from '../share-page-modal/cloud-svg';
 import * as styles from './index.css';

packages/frontend/core/src/components/affine/enable-affine-cloud-modal/index.tsx

@@ -1,7 +1,5 @@
-import {
-  ConfirmModal,
-  type ConfirmModalProps,
-} from '@affine/component/ui/modal';
+import type { ConfirmModalProps } from '@affine/component/ui/modal';
+import { ConfirmModal } from '@affine/component/ui/modal';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { useSetAtom } from 'jotai';
 import { useCallback } from 'react';

packages/frontend/core/src/components/affine/language-menu/index.tsx

@@ -1,5 +1,6 @@
 import { Menu, MenuItem, MenuTrigger } from '@affine/component/ui/menu';
-import { memo, type ReactElement } from 'react';
+import type { ReactElement } from 'react';
+import { memo } from 'react';
 
 import { useLanguageHelper } from '../../../hooks/affine/use-language-helper';
 

packages/frontend/core/src/components/affine/onboarding/curve-paper/segments.tsx

@@ -1,4 +1,4 @@
-import { type ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
 import { Segment } from './segment';
 

packages/frontend/core/src/components/affine/onboarding/onboarding.tsx

@@ -1,4 +1,5 @@
-import { type CSSProperties, useCallback, useState } from 'react';
+import type { CSSProperties } from 'react';
+import { useCallback, useState } from 'react';
 
 import { AnimateInTooltip } from './animate-in-tooltip';
 import { articles } from './articles';

packages/frontend/core/src/components/affine/onboarding/paper-steps.tsx

@@ -3,8 +3,12 @@ import { useCallback, useEffect, useState } from 'react';
 import { AnimateIn } from './steps/animate-in';
 import { EdgelessSwitch } from './steps/edgeless-switch';
 import { Unfolding } from './steps/unfolding';
-import type { ArticleId, OnboardingStatus, OnboardingStep } from './types';
-import { type ArticleOption } from './types';
+import type {
+  ArticleId,
+  ArticleOption,
+  OnboardingStatus,
+  OnboardingStep,
+} from './types';
 
 interface PaperStepsProps {
   show?: boolean;

packages/frontend/core/src/components/affine/onboarding/steps/animate-in.tsx

@@ -1,7 +1,8 @@
 import anime from 'animejs';
 import { useEffect } from 'react';
 
-import { Paper, type PaperProps } from '../curve-paper/paper';
+import type { PaperProps } from '../curve-paper/paper';
+import { Paper } from '../curve-paper/paper';
 import * as paperStyles from '../curve-paper/paper.css';
 import type { ArticleOption } from '../types';
 import * as styles from './animate-in.css';

packages/frontend/core/src/components/affine/onboarding/steps/edgeless-switch.tsx

@@ -1,13 +1,8 @@
 import { Button } from '@affine/component';
 import clsx from 'clsx';
 import { debounce } from 'lodash-es';
-import {
-  type CSSProperties,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
+import type { CSSProperties } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 
 import Logo from '../assets/logo';
 import { OnboardingBlock } from '../switch-widgets/block';

packages/frontend/core/src/components/affine/onboarding/switch-widgets/block.tsx

@@ -1,6 +1,6 @@
 import type { CSSProperties } from 'react';
 
-import { type EdgelessSwitchMode, type OnboardingBlockOption } from '../types';
+import type { EdgelessSwitchMode, OnboardingBlockOption } from '../types';
 import { onboardingBlock } from './style.css';
 
 interface OnboardingBlockProps extends OnboardingBlockOption {

packages/frontend/core/src/components/affine/onboarding/switch-widgets/toolbar.tsx

@@ -1,4 +1,5 @@
-import { type CSSProperties, memo } from 'react';
+import type { CSSProperties } from 'react';
+import { memo } from 'react';
 
 import { toolbar, toolbarPop } from './style.css';
 

packages/frontend/core/src/components/affine/page-history-modal/data.ts

@@ -2,9 +2,9 @@ import { useDocMetaHelper } from '@affine/core/hooks/use-block-suite-page-meta';
 import { useDocCollectionPage } from '@affine/core/hooks/use-block-suite-workspace-page';
 import { timestampToLocalDate } from '@affine/core/utils';
 import { DebugLogger } from '@affine/debug';
+import type { ListHistoryQuery } from '@affine/graphql';
 import {
   fetchWithTraceReport,
-  type ListHistoryQuery,
   listHistoryQuery,
   recoverDocMutation,
 } from '@affine/graphql';

packages/frontend/core/src/components/affine/page-history-modal/history-modal.tsx

@@ -10,16 +10,15 @@ import { useWorkspaceQuota } from '@affine/core/hooks/use-workspace-quota';
 import { Trans } from '@affine/i18n';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { CloseIcon, ToggleCollapseIcon } from '@blocksuite/icons';
-import type { Doc as BlockSuiteDoc } from '@blocksuite/store';
-import { type DocCollection } from '@blocksuite/store';
+import type { Doc as BlockSuiteDoc, DocCollection } from '@blocksuite/store';
 import * as Collapsible from '@radix-ui/react-collapsible';
 import type { DialogContentProps } from '@radix-ui/react-dialog';
-import { Doc, type PageMode, Workspace } from '@toeverything/infra';
-import { useService } from '@toeverything/infra';
+import type { PageMode } from '@toeverything/infra';
+import { Doc, useService, Workspace } from '@toeverything/infra';
 import { atom, useAtom, useSetAtom } from 'jotai';
+import type { PropsWithChildren } from 'react';
 import {
   Fragment,
-  type PropsWithChildren,
   Suspense,
   useCallback,
   useLayoutEffect,

packages/frontend/core/src/components/affine/page-properties/icons-selector.tsx

@@ -3,7 +3,8 @@ import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { chunk } from 'lodash-es';
 import { useEffect, useRef } from 'react';
 
-import { iconNames, nameToIcon, type PagePropertyIcon } from './icons-mapping';
+import type { PagePropertyIcon } from './icons-mapping';
+import { iconNames, nameToIcon } from './icons-mapping';
 import * as styles from './icons-selector.css';
 
 const iconsPerRow = 6;

packages/frontend/core/src/components/affine/page-properties/menu-items.tsx

@@ -1,26 +1,21 @@
+import type { MenuItemProps } from '@affine/component';
 import {
   Input,
   MenuIcon,
   MenuItem,
-  type MenuItemProps,
   MenuSeparator,
   Scrollable,
 } from '@affine/component';
 import type { PageInfoCustomPropertyMeta } from '@affine/core/modules/workspace/properties/schema';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
-import {
-  cloneElement,
-  isValidElement,
-  type KeyboardEventHandler,
-  type MouseEventHandler,
-  useCallback,
-} from 'react';
+import type { KeyboardEventHandler, MouseEventHandler } from 'react';
+import { cloneElement, isValidElement, useCallback } from 'react';
 
+import type { PagePropertyIcon } from './icons-mapping';
 import {
   getDefaultIconName,
   getSafeIconName,
   nameToIcon,
-  type PagePropertyIcon,
 } from './icons-mapping';
 import { IconsSelectorButton } from './icons-selector';
 import * as styles from './styles.css';

packages/frontend/core/src/components/affine/page-properties/property-row-value-renderer.tsx

@@ -10,13 +10,8 @@ import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { assertExists } from '@blocksuite/global/utils';
 import { Doc, useService, Workspace } from '@toeverything/infra';
 import { noop } from 'lodash-es';
-import {
-  type ChangeEventHandler,
-  useCallback,
-  useContext,
-  useEffect,
-  useState,
-} from 'react';
+import type { ChangeEventHandler } from 'react';
+import { useCallback, useContext, useEffect, useState } from 'react';
 
 import { managerContext } from './common';
 import * as styles from './styles.css';

packages/frontend/core/src/components/affine/page-properties/table.tsx

@@ -1,10 +1,10 @@
+import type { MenuProps } from '@affine/component';
 import {
   Button,
   IconButton,
   Menu,
   MenuIcon,
   MenuItem,
-  type MenuProps,
   Tooltip,
 } from '@affine/component';
 import { useCurrentWorkspacePropertiesAdapter } from '@affine/core/hooks/use-affine-adapter';
@@ -28,10 +28,9 @@ import {
   ViewIcon,
 } from '@blocksuite/icons';
 import type { Doc } from '@blocksuite/store';
+import type { DragEndEvent, DraggableAttributes } from '@dnd-kit/core';
 import {
   DndContext,
-  type DragEndEvent,
-  type DraggableAttributes,
   PointerSensor,
   useSensor,
   useSensors,
@@ -46,11 +45,13 @@ import clsx from 'clsx';
 import { use } from 'foxact/use';
 import { atom, useAtomValue, useSetAtom } from 'jotai';
 import type React from 'react';
+import type {
+  CSSProperties,
+  MouseEvent,
+  MouseEventHandler,
+  PropsWithChildren,
+} from 'react';
 import {
-  type CSSProperties,
-  type MouseEvent,
-  type MouseEventHandler,
-  type PropsWithChildren,
   Suspense,
   useCallback,
   useContext,
@@ -62,14 +63,11 @@ import {
 import { AffinePageReference } from '../reference-link';
 import { managerContext } from './common';
 import { ConfirmDeletePropertyModal } from './confirm-delete-property-modal';
-import {
-  getDefaultIconName,
-  nameToIcon,
-  type PagePropertyIcon,
-} from './icons-mapping';
+import type { PagePropertyIcon } from './icons-mapping';
+import { getDefaultIconName, nameToIcon } from './icons-mapping';
+import type { MenuItemOption } from './menu-items';
 import {
   EditPropertyNameMenuItem,
-  type MenuItemOption,
   PropertyTypeMenuItem,
   renderMenuItemOptions,
 } from './menu-items';

packages/frontend/core/src/components/affine/page-properties/tags-inline-editor.tsx

@@ -1,30 +1,19 @@
-import {
-  IconButton,
-  Input,
-  Menu,
-  type MenuProps,
-  Scrollable,
-} from '@affine/component';
+import type { MenuProps } from '@affine/component';
+import { IconButton, Input, Menu, Scrollable } from '@affine/component';
 import { useNavigateHelper } from '@affine/core/hooks/use-navigate-helper';
 import { DeleteTagConfirmModal, TagService } from '@affine/core/modules/tag';
 import { WorkspaceLegacyProperties } from '@affine/core/modules/workspace';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { DeleteIcon, MoreHorizontalIcon, TagsIcon } from '@blocksuite/icons';
-import { useLiveData } from '@toeverything/infra';
-import { useService } from '@toeverything/infra';
+import { useLiveData, useService } from '@toeverything/infra';
 import clsx from 'clsx';
-import {
-  type HTMLAttributes,
-  type PropsWithChildren,
-  useCallback,
-  useMemo,
-  useReducer,
-  useState,
-} from 'react';
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+import { useCallback, useMemo, useReducer, useState } from 'react';
 
 import { TagItem, TempTagItem } from '../../page-list';
 import { tagColors } from './common';
-import { type MenuItemOption, renderMenuItemOptions } from './menu-items';
+import type { MenuItemOption } from './menu-items';
+import { renderMenuItemOptions } from './menu-items';
 import * as styles from './tags-inline-editor.css';
 
 interface TagsEditorProps {

packages/frontend/core/src/components/affine/reference-link/index.tsx

@@ -4,7 +4,7 @@ import { WorkbenchLink } from '@affine/core/modules/workbench';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { LinkedPageIcon, TodayIcon } from '@blocksuite/icons';
 import type { DocCollection } from '@blocksuite/store';
-import { type PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
 
 import * as styles from './styles.css';
 

packages/frontend/core/src/components/affine/setting-modal/account-setting/index.tsx

@@ -20,14 +20,8 @@ import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { ArrowRightSmallIcon, CameraIcon } from '@blocksuite/icons';
 import bytes from 'bytes';
 import { useSetAtom } from 'jotai';
-import {
-  type FC,
-  type MouseEvent,
-  Suspense,
-  useCallback,
-  useMemo,
-  useState,
-} from 'react';
+import type { FC, MouseEvent } from 'react';
+import { Suspense, useCallback, useMemo, useState } from 'react';
 
 import {
   authAtom,

packages/frontend/core/src/components/affine/setting-modal/general-setting/about/index.tsx

@@ -1,7 +1,9 @@
 import { Switch } from '@affine/component';
-import { SettingHeader } from '@affine/component/setting-components';
-import { SettingRow } from '@affine/component/setting-components';
-import { SettingWrapper } from '@affine/component/setting-components';
+import {
+  SettingHeader,
+  SettingRow,
+  SettingWrapper,
+} from '@affine/component/setting-components';
 import { useAppUpdater } from '@affine/core/hooks/use-app-updater';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { ArrowRightSmallIcon, OpenInNewIcon } from '@blocksuite/icons';

packages/frontend/core/src/components/affine/setting-modal/general-setting/appearance/date-format-setting.tsx

@@ -1,5 +1,6 @@
 import { Menu, MenuItem, MenuTrigger } from '@affine/component/ui/menu';
-import { dateFormatOptions, type DateFormats } from '@toeverything/infra';
+import type { DateFormats } from '@toeverything/infra';
+import { dateFormatOptions } from '@toeverything/infra';
 import dayjs from 'dayjs';
 import { useCallback } from 'react';
 

packages/frontend/core/src/components/affine/setting-modal/general-setting/appearance/index.tsx

@@ -1,13 +1,12 @@
 import { RadioButton, RadioButtonGroup, Switch } from '@affine/component';
-import { SettingHeader } from '@affine/component/setting-components';
-import { SettingRow } from '@affine/component/setting-components';
-import { SettingWrapper } from '@affine/component/setting-components';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import {
-  type AppSetting,
-  fontStyleOptions,
-  windowFrameStyleOptions,
-} from '@toeverything/infra';
+  SettingHeader,
+  SettingRow,
+  SettingWrapper,
+} from '@affine/component/setting-components';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import type { AppSetting } from '@toeverything/infra';
+import { fontStyleOptions, windowFrameStyleOptions } from '@toeverything/infra';
 import { useTheme } from 'next-themes';
 import { useCallback } from 'react';
 

packages/frontend/core/src/components/affine/setting-modal/general-setting/billing/index.tsx

@@ -8,10 +8,10 @@ import {
 import { Button, IconButton } from '@affine/component/ui/button';
 import { Loading } from '@affine/component/ui/loading';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
+import type { InvoicesQuery } from '@affine/graphql';
 import {
   createCustomerPortalMutation,
   getInvoicesCountQuery,
-  type InvoicesQuery,
   invoicesQuery,
   InvoiceStatus,
   pricesQuery,
@@ -29,10 +29,8 @@ import { openSettingModalAtom } from '../../../../../atoms';
 import { useCurrentLoginStatus } from '../../../../../hooks/affine/use-current-login-status';
 import { useMutation } from '../../../../../hooks/use-mutation';
 import { useQuery } from '../../../../../hooks/use-query';
-import {
-  type SubscriptionMutator,
-  useUserSubscription,
-} from '../../../../../hooks/use-subscription';
+import type { SubscriptionMutator } from '../../../../../hooks/use-subscription';
+import { useUserSubscription } from '../../../../../hooks/use-subscription';
 import { SWRErrorBoundary } from '../../../../pure/swr-error-bundary';
 import { CancelAction, ResumeAction } from '../plans/actions';
 import * as styles from './style.css';

packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/index.tsx

@@ -16,7 +16,8 @@ import { useCurrentLoginStatus } from '../../../../../hooks/affine/use-current-l
 import { useQuery } from '../../../../../hooks/use-query';
 import { useUserSubscription } from '../../../../../hooks/use-subscription';
 import { PlanLayout } from './layout';
-import { type FixedPrice, getPlanDetail, PlanCard } from './plan-card';
+import type { FixedPrice } from './plan-card';
+import { getPlanDetail, PlanCard } from './plan-card';
 import { PlansSkeleton } from './skeleton';
 import * as styles from './style.css';
 

packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/modals.tsx

@@ -1,12 +1,10 @@
 import { Button } from '@affine/component/ui/button';
-import {
-  ConfirmModal,
-  type ConfirmModalProps,
-  Modal,
-} from '@affine/component/ui/modal';
+import type { ConfirmModalProps } from '@affine/component/ui/modal';
+import { ConfirmModal, Modal } from '@affine/component/ui/modal';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { DialogTrigger } from '@radix-ui/react-dialog';
-import { type ReactNode, useEffect, useRef } from 'react';
+import type { ReactNode } from 'react';
+import { useEffect, useRef } from 'react';
 
 import * as styles from './style.css';
 

packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/plan-card.tsx

@@ -15,17 +15,10 @@ import {
 import { Trans } from '@affine/i18n';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { DoneIcon } from '@blocksuite/icons';
-import { useSetAtom } from 'jotai';
-import { useAtom } from 'jotai';
+import { useAtom, useSetAtom } from 'jotai';
 import { nanoid } from 'nanoid';
-import {
-  type PropsWithChildren,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import type { PropsWithChildren } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { openPaymentDisableAtom } from '../../../../../atoms';
 import { authAtom } from '../../../../../atoms/index';

packages/frontend/core/src/components/affine/setting-modal/general-setting/shortcuts/index.tsx

@@ -1,9 +1,11 @@
-import { SettingHeader } from '@affine/component/setting-components';
-import { SettingWrapper } from '@affine/component/setting-components';
+import {
+  SettingHeader,
+  SettingWrapper,
+} from '@affine/component/setting-components';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 
+import type { ShortcutsInfo } from '../../../../../hooks/affine/use-shortcuts';
 import {
-  type ShortcutsInfo,
   useEdgelessShortcuts,
   useGeneralShortcuts,
   useMarkdownShortcuts,

packages/frontend/core/src/components/affine/setting-modal/index.tsx

@@ -1,6 +1,7 @@
 import { Loading } from '@affine/component';
 import { WorkspaceDetailSkeleton } from '@affine/component/setting-components';
-import { Modal, type ModalProps } from '@affine/component/ui/modal';
+import type { ModalProps } from '@affine/component/ui/modal';
+import { Modal } from '@affine/component/ui/modal';
 import {
   openIssueFeedbackModalAtom,
   openStarAFFiNEModalAtom,
@@ -17,12 +18,8 @@ import { AccountSetting } from './account-setting';
 import { GeneralSetting } from './general-setting';
 import { SettingSidebar } from './setting-sidebar';
 import * as style from './style.css';
-import {
-  type ActiveTab,
-  type GeneralSettingKey,
-  GeneralSettingKeys,
-  type WorkspaceSubTab,
-} from './types';
+import type { ActiveTab, GeneralSettingKey, WorkspaceSubTab } from './types';
+import { GeneralSettingKeys } from './types';
 import { WorkspaceSetting } from './workspace-setting';
 
 export interface SettingProps extends ModalProps {

packages/frontend/core/src/components/affine/setting-modal/setting-sidebar/index.tsx

@@ -11,16 +11,17 @@ import { useWorkspaceInfo } from '@affine/core/hooks/use-workspace-info';
 import { UNTITLED_WORKSPACE_NAME } from '@affine/env/constant';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { Logo1Icon } from '@blocksuite/icons';
+import type { WorkspaceMetadata } from '@toeverything/infra';
 import {
+  useLiveData,
+  useService,
   Workspace,
   WorkspaceManager,
-  type WorkspaceMetadata,
 } from '@toeverything/infra';
-import { useService } from '@toeverything/infra';
-import { useLiveData } from '@toeverything/infra';
 import clsx from 'clsx';
 import { useAtom } from 'jotai/react';
-import { type ReactElement, Suspense, useCallback, useMemo } from 'react';
+import type { ReactElement } from 'react';
+import { Suspense, useCallback, useMemo } from 'react';
 
 import { authAtom } from '../../../../atoms';
 import { useCurrentLoginStatus } from '../../../../hooks/affine/use-current-login-status';

packages/frontend/core/src/components/affine/setting-modal/workspace-setting/new-workspace-setting-detail/delete-leave-workspace/delete/index.tsx

@@ -1,8 +1,6 @@
 import { Input } from '@affine/component';
-import {
-  ConfirmModal,
-  type ConfirmModalProps,
-} from '@affine/component/ui/modal';
+import type { ConfirmModalProps } from '@affine/component/ui/modal';
+import { ConfirmModal } from '@affine/component/ui/modal';
 import { useWorkspaceInfo } from '@affine/core/hooks/use-workspace-info';
 import { UNTITLED_WORKSPACE_NAME } from '@affine/env/constant';
 import { WorkspaceFlavour } from '@affine/env/workspace';

packages/frontend/core/src/components/affine/setting-modal/workspace-setting/new-workspace-setting-detail/delete-leave-workspace/index.tsx

@@ -4,9 +4,12 @@ import { ConfirmModal } from '@affine/component/ui/modal';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { ArrowRightSmallIcon } from '@blocksuite/icons';
-import { Workspace, WorkspaceManager } from '@toeverything/infra';
-import { useService } from '@toeverything/infra';
-import { useLiveData } from '@toeverything/infra';
+import {
+  useLiveData,
+  useService,
+  Workspace,
+  WorkspaceManager,
+} from '@toeverything/infra';
 import { useSetAtom } from 'jotai';
 import { useCallback, useState } from 'react';
 

packages/frontend/core/src/components/affine/setting-modal/workspace-setting/new-workspace-setting-detail/enable-cloud.tsx

@@ -5,8 +5,8 @@ import { useWorkspaceInfo } from '@affine/core/hooks/use-workspace-info';
 import { UNTITLED_WORKSPACE_NAME } from '@affine/env/constant';
 import { WorkspaceFlavour } from '@affine/env/workspace';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
-import { type Workspace, WorkspaceManager } from '@toeverything/infra';
-import { useService } from '@toeverything/infra';
+import type { Workspace } from '@toeverything/infra';
+import { useService, WorkspaceManager } from '@toeverything/infra';
 import { useSetAtom } from 'jotai';
 import { useState } from 'react';
 

packages/frontend/core/src/components/affine/setting-modal/workspace-setting/new-workspace-setting-detail/members.tsx

@@ -1,11 +1,11 @@
-import {
-  InviteModal,
-  type InviteModalProps,
-  MemberLimitModal,
+import type {
+  InviteModalProps,
+  PaginationProps,
 } from '@affine/component/member-components';
 import {
+  InviteModal,
+  MemberLimitModal,
   Pagination,
-  type PaginationProps,
 } from '@affine/component/member-components';
 import { pushNotificationAtom } from '@affine/component/notification-center';
 import { SettingRow } from '@affine/component/setting-components';
@@ -20,7 +20,8 @@ import type { CheckedUser } from '@affine/core/hooks/affine/use-current-user';
 import { useCurrentUser } from '@affine/core/hooks/affine/use-current-user';
 import { useInviteMember } from '@affine/core/hooks/affine/use-invite-member';
 import { useMemberCount } from '@affine/core/hooks/affine/use-member-count';
-import { type Member, useMembers } from '@affine/core/hooks/affine/use-members';
+import type { Member } from '@affine/core/hooks/affine/use-members';
+import { useMembers } from '@affine/core/hooks/affine/use-members';
 import { useRevokeMemberPermission } from '@affine/core/hooks/affine/use-revoke-member-permission';
 import { useWorkspaceQuota } from '@affine/core/hooks/use-quota';
 import { useUserSubscription } from '@affine/core/hooks/use-subscription';