fix(core): settings storage empty styles (#10313)

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) {
+    if (!backupWorkspaces) {
-      return <Empty />;
+      return null;
     }
     return (
       <>
@@ -242,6 +242,9 @@ export const BackupSettingPanel = () => {
     );
   }, [isLoading, backupWorkspaces, pageNum]);
 
+  const isEmpty =
+    (backupWorkspaces?.items.length === 0 || !backupWorkspaces) && !isLoading;
+
   return (
     <>
       <SettingHeader
@@ -249,7 +252,11 @@ export const BackupSettingPanel = () => {
         subtitle={t['com.affine.settings.workspace.backup.subtitle']()}
         data-testid="backup-title"
       />
+      {isEmpty ? (
+        <Empty />
+      ) : (
         <div className={styles.listContainer}>{innerElement}</div>
+      )}
     </>
   );
 };

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({

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,13 +290,14 @@ export const BlobManagementPanel = () => {
           {`${t['com.affine.settings.workspace.storage.unused-blobs']()} (${unusedBlobs.length})`}
         </div>
       )}
+      {isEmpty ? (
+        <Empty />
+      ) : (
         <div className={styles.blobManagementContainer}>
           {isLoading ? (
             <div className={styles.loadingContainer}>
               <Loading size={32} />
             </div>
-        ) : unusedBlobs.length === 0 ? (
-          <Empty />
           ) : (
             <>
               <div className={styles.blobPreviewGrid} ref={blobPreviewGridRef}>
@@ -324,6 +327,7 @@ export const BlobManagementPanel = () => {
             </>
           )}
         </div>
+      )}
     </>
   );
 };

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({