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"
       />
-      <div className={styles.listContainer}>{innerElement}</div>
+      {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,42 +290,44 @@ export const BlobManagementPanel = () => {
           {`${t['com.affine.settings.workspace.storage.unused-blobs']()} (${unusedBlobs.length})`}
         </div>
       )}
-      <div className={styles.blobManagementContainer}>
+      {isEmpty ? (
-        {isLoading ? (
+        <Empty />
-          <div className={styles.loadingContainer}>
+      ) : (
-            <Loading size={32} />
+        <div className={styles.blobManagementContainer}>
-          </div>
+          {isLoading ? (
-        ) : unusedBlobs.length === 0 ? (
+            <div className={styles.loadingContainer}>
-          <Empty />
+              <Loading size={32} />
-        ) : (
-          <>
-            <div className={styles.blobPreviewGrid} ref={blobPreviewGridRef}>
-              {unusedBlobsPage.map(blob => {
-                const selected = selectedBlobs.includes(blob);
-                return (
-                  <BlobCard
-                    key={blob.key}
-                    blobRecord={blob}
-                    onClick={e => handleBlobClick(blob, e)}
-                    selected={selected}
-                  />
-                );
-              })}
             </div>
-            {unusedBlobs.length > PAGE_SIZE && (
+          ) : (
-              <Pagination
+            <>
-                pageNum={pageNum}
+              <div className={styles.blobPreviewGrid} ref={blobPreviewGridRef}>
-                totalCount={unusedBlobs.length}
+                {unusedBlobsPage.map(blob => {
-                countPerPage={PAGE_SIZE}
+                  const selected = selectedBlobs.includes(blob);
-                onPageChange={(_, pageNum) => {
+                  return (
-                  setPageNum(pageNum);
+                    <BlobCard
-                  setSkip(pageNum * PAGE_SIZE);
+                      key={blob.key}
-                }}
+                      blobRecord={blob}
-              />
+                      onClick={e => handleBlobClick(blob, e)}
-            )}
+                      selected={selected}
-          </>
+                    />
-        )}
+                  );
-      </div>
+                })}
+              </div>
+              {unusedBlobs.length > PAGE_SIZE && (
+                <Pagination
+                  pageNum={pageNum}
+                  totalCount={unusedBlobs.length}
+                  countPerPage={PAGE_SIZE}
+                  onPageChange={(_, pageNum) => {
+                    setPageNum(pageNum);
+                    setSkip(pageNum * PAGE_SIZE);
+                  }}
+                />
+              )}
+            </>
+          )}
+        </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({