refactor(core): remove all MUI related components and utilities (#4941)

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

@@ -1,4 +1,3 @@
-import { Skeleton } from '@mui/material';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import clsx from 'clsx';
 import { useAtom, useAtomValue } from 'jotai';
@@ -6,6 +5,7 @@ import { debounce } from 'lodash-es';
 import type { PropsWithChildren, ReactElement } from 'react';
 import { useEffect, useRef, useState } from 'react';
 
+import { Skeleton } from '../../ui/skeleton';
 import { fallbackHeaderStyle, fallbackStyle } from './fallback.css';
 import {
   floatingMaxWidth,

packages/frontend/component/src/components/block-suite-editor/index.tsx

@@ -1,7 +1,6 @@
 import { EditorContainer } from '@blocksuite/editor';
 import { assertExists } from '@blocksuite/global/utils';
 import type { Page } from '@blocksuite/store';
-import { Skeleton } from '@mui/material';
 import clsx from 'clsx';
 import { use } from 'foxact/use';
 import type { CSSProperties, ReactElement } from 'react';
@@ -17,6 +16,7 @@ import {
 import type { FallbackProps } from 'react-error-boundary';
 import { ErrorBoundary } from 'react-error-boundary';
 
+import { Skeleton } from '../../ui/skeleton';
 import {
   blockSuiteEditorHeaderStyle,
   blockSuiteEditorStyle,

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

@@ -2,7 +2,6 @@ import { WorkspaceFlavour } from '@affine/env/workspace';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import type { RootWorkspaceMetadata } from '@affine/workspace/atom';
 import { CollaborationIcon, SettingsIcon } from '@blocksuite/icons';
-import { Skeleton } from '@mui/material';
 import { Avatar } from '@toeverything/components/avatar';
 import { Divider } from '@toeverything/components/divider';
 import { Tooltip } from '@toeverything/components/tooltip';
@@ -12,6 +11,7 @@ import { getBlockSuiteWorkspaceAtom } from '@toeverything/infra/__internal__/wor
 import { useAtomValue } from 'jotai/react';
 import { useCallback } from 'react';
 
+import { Skeleton } from '../../../ui/skeleton';
 import {
   StyledCard,
   StyledIconContainer,

packages/frontend/component/src/components/list-skeleton.tsx

@@ -1,13 +0,0 @@
-import { Skeleton } from '@mui/material';
-import { memo } from 'react';
-
-export const ListSkeleton = memo(function ListItemSkeleton() {
-  return (
-    <>
-      <Skeleton animation="wave" height={40} />
-      <Skeleton animation="wave" height={40} />
-      <Skeleton animation="wave" height={40} />
-      <Skeleton animation="wave" height={40} />
-    </>
-  );
-});

packages/frontend/component/src/components/page-list/utils.tsx

@@ -1,4 +1,3 @@
-import { useMediaQuery, useTheme } from '@mui/material';
 import clsx from 'clsx';
 import {
   type BaseSyntheticEvent,
@@ -8,12 +7,6 @@ import {
 
 import * as styles from './page-list.css';
 
-export const useIsSmallDevices = () => {
-  const theme = useTheme();
-  const isSmallDevices = useMediaQuery(theme.breakpoints.down(900));
-  return isSmallDevices;
-};
-
 export function isToday(date: Date): boolean {
   const today = new Date();
   return (

packages/frontend/component/src/components/setting-components/workspace-detail-skeleton.tsx

@@ -1,5 +1,4 @@
-import { Skeleton } from '@mui/material';
-
+import { Skeleton } from '../../ui/skeleton';
 import { SettingHeader } from './setting-header';
 import { SettingRow } from './setting-row';
 import { SettingWrapper } from './wrapper';

packages/frontend/component/src/components/setting-components/workspace-list-skeleton.tsx

@@ -1,12 +1,11 @@
-import { Skeleton } from '@mui/material';
-
 import { FlexWrapper } from '../../ui/layout';
+import { Skeleton } from '../../ui/skeleton';
 
 export const WorkspaceListItemSkeleton = () => {
   return (
     <FlexWrapper
       alignItems="center"
-      style={{ padding: '0 8px', height: 30, marginBottom: 4 }}
+      style={{ padding: '0 24px', height: 30, marginBottom: 4 }}
     >
       <Skeleton
         variant="circular"
@@ -14,7 +13,12 @@ export const WorkspaceListItemSkeleton = () => {
         height={14}
         style={{ marginRight: 10 }}
       />
-      <Skeleton variant="rectangular" height={16} style={{ flexGrow: 1 }} />
+      <Skeleton
+        variant="rectangular"
+        height={16}
+        width={0}
+        style={{ flexGrow: 1 }}
+      />
     </FlexWrapper>
   );
 };

packages/frontend/component/src/components/workspace/index.css.ts

@@ -2,8 +2,6 @@ import { lightCssVariables } from '@toeverything/theme';
 import type { ComplexStyleRule } from '@vanilla-extract/css';
 import { globalStyle, style } from '@vanilla-extract/css';
 
-import { breakpoints } from '../../styles/mui-theme';
-
 export const appStyle = style({
   width: '100%',
   position: 'relative',
@@ -134,10 +132,10 @@ export const toolStyle = style({
   flexDirection: 'column',
   gap: '12px',
   '@media': {
-    [breakpoints.down('md', true)]: {
+    'screen and (max-width: 960px)': {
       right: 'calc((100vw - 640px) * 3 / 19 + 14px)',
     },
-    [breakpoints.down('sm', true)]: {
+    'screen and (max-width: 640px)': {
       right: '5px',
       bottom: '5px',
     },
@@ -149,10 +147,10 @@ export const toolStyle = style({
     '&[data-in-trash-page="true"]': {
       bottom: '70px',
       '@media': {
-        [breakpoints.down('md', true)]: {
+        'screen and (max-width: 960px)': {
           bottom: '80px',
         },
-        [breakpoints.down('sm', true)]: {
+        'screen and (max-width: 640px)': {
           bottom: '85px',
         },
         print: {