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/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',

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

@@ -1,3 +1,4 @@
+export * from './pagination';
 export { SettingHeader } from './setting-header';
 export { SettingRow } from './setting-row';
 export * from './workspace-detail-skeleton';

packages/frontend/component/src/components/setting-components/pagination.css.ts

@@ -0,0 +1,50 @@
+import { cssVar } from '@toeverything/theme';
+import { cssVarV2 } from '@toeverything/theme/v2';
+import { globalStyle, style } from '@vanilla-extract/css';
+
+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 pagination = style({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  gap: '6px',
+  marginTop: 5,
+});

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

@@ -3,7 +3,7 @@ import clsx from 'clsx';
 import { useCallback, useMemo } from 'react';
 import ReactPaginate from 'react-paginate';
 
-import * as styles from './styles.css';
+import * as styles from './pagination.css';
 export interface PaginationProps {
   totalCount: number;
   pageNum?: number;