fix(editor): revert bg color of attachments when loading or error states (#12061)

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

@@ -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",

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,

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;
 

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" }
   ]
 }

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',
     ],
   },
   {

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"