From 8b2a01d4cf3922e296daf2b821319a00179a53b8 Mon Sep 17 00:00:00 2001
From: fundon <fundon@pindash.io>
Date: Tue, 29 Apr 2025 11:41:24 +0000
Subject: [PATCH] fix(editor): revert bg color of attachments when loading or
 error states (#12061)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Closes: [BS-3379](https://linear.app/affine-design/issue/BS-3379/恢复在-loading-或错误时-attachments-的背景色)

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **Style**
  - Updated the background color of attachment cards in loading and error states for a more consistent appearance.
- **Bug Fixes**
  - Improved the handling and display of loading and uploading states for attachment cards to better reflect their current status.
- **Chores**
  - Added new workspace dependencies and project references to enhance synchronization capabilities across related modules.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 blocksuite/affine/blocks/attachment/package.json       |  1 +
 .../affine/blocks/attachment/src/attachment-block.ts   | 10 ++++++----
 blocksuite/affine/blocks/attachment/src/styles.ts      |  5 +++++
 blocksuite/affine/blocks/attachment/tsconfig.json      |  3 ++-
 tools/utils/src/workspace.gen.ts                       |  1 +
 yarn.lock                                              |  1 +
 6 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/blocksuite/affine/blocks/attachment/package.json b/blocksuite/affine/blocks/attachment/package.json
index ebefe8098d..07d2ad1d09 100644
--- a/blocksuite/affine/blocks/attachment/package.json
+++ b/blocksuite/affine/blocks/attachment/package.json
@@ -21,6 +21,7 @@
     "@blocksuite/icons": "^2.2.12",
     "@blocksuite/std": "workspace:*",
     "@blocksuite/store": "workspace:*",
+    "@blocksuite/sync": "workspace:*",
     "@floating-ui/dom": "^1.6.13",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
diff --git a/blocksuite/affine/blocks/attachment/src/attachment-block.ts b/blocksuite/affine/blocks/attachment/src/attachment-block.ts
index 951144a732..adba0a6d96 100644
--- a/blocksuite/affine/blocks/attachment/src/attachment-block.ts
+++ b/blocksuite/affine/blocks/attachment/src/attachment-block.ts
@@ -35,7 +35,9 @@ import { when } from 'lit/directives/when.js';
 import { AttachmentEmbedProvider } from './embed';
 import { styles } from './styles';
 import { downloadAttachmentBlob, refreshData } from './utils';
+
 type State = 'loading' | 'uploading' | 'warning' | 'oversize' | 'none';
+
 @Peekable({
   enableOn: ({ model }: AttachmentBlockComponent) => {
     return !model.doc.readonly && model.props.type.endsWith('pdf');
@@ -102,7 +104,7 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
   }
 
   determineState = (
-    loading: boolean,
+    downloading: boolean,
     uploading: boolean,
     overSize: boolean,
     error: boolean
@@ -110,7 +112,7 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
     if (overSize) return 'oversize';
     if (error) return 'warning';
     if (uploading) return 'uploading';
-    if (loading) return 'loading';
+    if (downloading) return 'loading';
     return 'none';
   };
 
@@ -306,8 +308,8 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
     } = blobState;
     const warning = !overSize && Boolean(errorMessage);
     const error = overSize || warning;
-    const loading = !error && downloading;
-    const state = this.determineState(loading, uploading, overSize, error);
+    const state = this.determineState(downloading, uploading, overSize, error);
+    const loading = state === 'loading' || state === 'uploading';
 
     const classInfo = {
       'affine-attachment-card': true,
diff --git a/blocksuite/affine/blocks/attachment/src/styles.ts b/blocksuite/affine/blocks/attachment/src/styles.ts
index 6ec0bb32ab..626dc571b4 100644
--- a/blocksuite/affine/blocks/attachment/src/styles.ts
+++ b/blocksuite/affine/blocks/attachment/src/styles.ts
@@ -117,6 +117,11 @@ export const styles = css`
     }
   }
 
+  .affine-attachment-card.loading,
+  .affine-attachment-card.error {
+    background: ${unsafeCSSVarV2('layer/background/secondary')};
+  }
+
   .affine-attachment-card.cubeThick {
     flex-direction: column-reverse;
 
diff --git a/blocksuite/affine/blocks/attachment/tsconfig.json b/blocksuite/affine/blocks/attachment/tsconfig.json
index c555016157..26feddf392 100644
--- a/blocksuite/affine/blocks/attachment/tsconfig.json
+++ b/blocksuite/affine/blocks/attachment/tsconfig.json
@@ -16,6 +16,7 @@
     { "path": "../../widgets/slash-menu" },
     { "path": "../../../framework/global" },
     { "path": "../../../framework/std" },
-    { "path": "../../../framework/store" }
+    { "path": "../../../framework/store" },
+    { "path": "../../../framework/sync" }
   ]
 }
diff --git a/tools/utils/src/workspace.gen.ts b/tools/utils/src/workspace.gen.ts
index d505de76e5..88d69114ae 100644
--- a/tools/utils/src/workspace.gen.ts
+++ b/tools/utils/src/workspace.gen.ts
@@ -84,6 +84,7 @@ export const PackageList = [
       'blocksuite/framework/global',
       'blocksuite/framework/std',
       'blocksuite/framework/store',
+      'blocksuite/framework/sync',
     ],
   },
   {
diff --git a/yarn.lock b/yarn.lock
index 91349d1d4d..6869ecc468 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2417,6 +2417,7 @@ __metadata:
     "@blocksuite/icons": "npm:^2.2.12"
     "@blocksuite/std": "workspace:*"
     "@blocksuite/store": "workspace:*"
+    "@blocksuite/sync": "workspace:*"
     "@floating-ui/dom": "npm:^1.6.13"
     "@lit/context": "npm:^1.1.2"
     "@preact/signals-core": "npm:^1.8.0"