diff --git a/packages/frontend/core/src/desktop/dialogs/setting/general-setting/backup/index.tsx b/packages/frontend/core/src/desktop/dialogs/setting/general-setting/backup/index.tsx index 8f7fb474bb..9934ad1014 100644 --- a/packages/frontend/core/src/desktop/dialogs/setting/general-setting/backup/index.tsx +++ b/packages/frontend/core/src/desktop/dialogs/setting/general-setting/backup/index.tsx @@ -214,8 +214,8 @@ export const BackupSettingPanel = () => { /> ); } - if (backupWorkspaces?.items.length === 0 || !backupWorkspaces) { - return ; + if (!backupWorkspaces) { + return null; } return ( <> @@ -242,6 +242,9 @@ export const BackupSettingPanel = () => { ); }, [isLoading, backupWorkspaces, pageNum]); + const isEmpty = + (backupWorkspaces?.items.length === 0 || !backupWorkspaces) && !isLoading; + return ( <> { subtitle={t['com.affine.settings.workspace.backup.subtitle']()} data-testid="backup-title" /> -
{innerElement}
+ {isEmpty ? ( + + ) : ( +
{innerElement}
+ )} ); }; diff --git a/packages/frontend/core/src/desktop/dialogs/setting/general-setting/backup/styles.css.ts b/packages/frontend/core/src/desktop/dialogs/setting/general-setting/backup/styles.css.ts index 37035afe39..87283b726a 100644 --- a/packages/frontend/core/src/desktop/dialogs/setting/general-setting/backup/styles.css.ts +++ b/packages/frontend/core/src/desktop/dialogs/setting/general-setting/backup/styles.css.ts @@ -62,7 +62,12 @@ export const listItemRightLabel = style({ }); export const empty = style({ - padding: '8px 16px', + paddingTop: '64px', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + color: cssVarV2('text/secondary'), + fontSize: cssVar('fontSm'), }); export const pagination = style({ diff --git a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/storage/blob-management.tsx b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/storage/blob-management.tsx index c96e67a2f7..4f0f63a18b 100644 --- a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/storage/blob-management.tsx +++ b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/storage/blob-management.tsx @@ -261,6 +261,8 @@ export const BlobManagementPanel = () => { return; }, [unusedBlobs]); + const isEmpty = (unusedBlobs.length === 0 || !unusedBlobs) && !isLoading; + return ( <> {selectedBlobs.length > 0 ? ( @@ -288,42 +290,44 @@ export const BlobManagementPanel = () => { {`${t['com.affine.settings.workspace.storage.unused-blobs']()} (${unusedBlobs.length})`} )} -
- {isLoading ? ( -
- -
- ) : unusedBlobs.length === 0 ? ( - - ) : ( - <> -
- {unusedBlobsPage.map(blob => { - const selected = selectedBlobs.includes(blob); - return ( - handleBlobClick(blob, e)} - selected={selected} - /> - ); - })} + {isEmpty ? ( + + ) : ( +
+ {isLoading ? ( +
+
- {unusedBlobs.length > PAGE_SIZE && ( - { - setPageNum(pageNum); - setSkip(pageNum * PAGE_SIZE); - }} - /> - )} - - )} -
+ ) : ( + <> +
+ {unusedBlobsPage.map(blob => { + const selected = selectedBlobs.includes(blob); + return ( + handleBlobClick(blob, e)} + selected={selected} + /> + ); + })} +
+ {unusedBlobs.length > PAGE_SIZE && ( + { + setPageNum(pageNum); + setSkip(pageNum * PAGE_SIZE); + }} + /> + )} + + )} +
+ )} ); }; diff --git a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/storage/style.css.ts b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/storage/style.css.ts index aff8fef9ca..10aff8c8da 100644 --- a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/storage/style.css.ts +++ b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/storage/style.css.ts @@ -88,7 +88,12 @@ export const loadingContainer = style({ }); export const empty = style({ - padding: '8px 16px', + paddingTop: '64px', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + color: cssVarV2('text/secondary'), + fontSize: cssVar('fontSm'), }); export const blobPreviewContainer = style({