fix(core): some storage setting enhancements (#9877)

fix AF-2157, AF-2155, AF-2156
1. add shift selection for grid blob card
2. various style issues
3. unused blobs list will also wait for workspace syncing

packages/frontend/component/src/components/member-components/index.tsx

@@ -2,4 +2,3 @@ export * from './accept-invite-page';
 export * from './invite-modal';
 export * from './invite-team-modal';
 export * from './member-limit-modal';
-export * from './pagination';

packages/frontend/component/src/components/member-components/pagination.tsx

@@ -1,52 +0,0 @@
-import { ArrowLeftSmallIcon, ArrowRightSmallIcon } from '@blocksuite/icons/rc';
-import clsx from 'clsx';
-import { useCallback, useMemo } from 'react';
-import ReactPaginate from 'react-paginate';
-
-import * as styles from './styles.css';
-export interface PaginationProps {
-  totalCount: number;
-  pageNum?: number;
-  countPerPage: number;
-  onPageChange: (skip: number, pageNum: number) => void;
-}
-
-export const Pagination = ({
-  totalCount,
-  countPerPage,
-  pageNum,
-  onPageChange,
-}: PaginationProps) => {
-  const handlePageClick = useCallback(
-    (e: { selected: number }) => {
-      const newOffset = (e.selected * countPerPage) % totalCount;
-      onPageChange(newOffset, e.selected);
-    },
-    [countPerPage, onPageChange, totalCount]
-  );
-
-  const pageCount = useMemo(
-    () => Math.ceil(totalCount / countPerPage),
-    [countPerPage, totalCount]
-  );
-
-  return (
-    <ReactPaginate
-      onPageChange={handlePageClick}
-      pageRangeDisplayed={3}
-      marginPagesDisplayed={2}
-      pageCount={pageCount}
-      forcePage={pageNum}
-      previousLabel={<ArrowLeftSmallIcon />}
-      nextLabel={<ArrowRightSmallIcon />}
-      pageClassName={styles.pageItem}
-      previousClassName={clsx(styles.pageItem, 'label')}
-      nextClassName={clsx(styles.pageItem, 'label')}
-      breakLabel="..."
-      breakClassName={styles.pageItem}
-      containerClassName={styles.pagination}
-      activeClassName="active"
-      renderOnZeroPageCount={null}
-    />
-  );
-};

packages/frontend/component/src/components/member-components/styles.css.ts

@@ -1,6 +1,6 @@
 import { cssVar } from '@toeverything/theme';
 import { cssVarV2 } from '@toeverything/theme/v2';
-import { globalStyle, style } from '@vanilla-extract/css';
+import { style } from '@vanilla-extract/css';
 
 export const inviteModalTitle = style({
   fontWeight: '600',
@@ -35,52 +35,6 @@ export const userWrapper = style({
   gap: '4px',
 });
 
-export const pagination = style({
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  gap: '6px',
-  marginTop: 5,
-});
-
-export const pageItem = style({
-  display: 'inline-flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  width: '20px',
-  height: '20px',
-  fontSize: cssVar('fontXs'),
-  color: cssVarV2('text/primary'),
-  borderRadius: '4px',
-
-  selectors: {
-    '&:hover': {
-      background: cssVarV2('layer/background/hoverOverlay'),
-    },
-    '&.active': {
-      color: cssVarV2('text/emphasis'),
-      cursor: 'default',
-      pointerEvents: 'none',
-    },
-    '&.label': {
-      color: cssVarV2('icon/primary'),
-      fontSize: '16px',
-    },
-    '&.disabled': {
-      opacity: '.4',
-      cursor: 'default',
-      color: cssVarV2('text/disable'),
-      pointerEvents: 'none',
-    },
-  },
-});
-globalStyle(`${pageItem} a`, {
-  width: '100%',
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-});
-
 export const modalContent = style({
   display: 'flex',
   flexDirection: 'column',