From b5b911b5d2371047a3fcc8065eb9af88989ba5a7 Mon Sep 17 00:00:00 2001
From: CatsJuice <wp1298554944@hotmail.com>
Date: Tue, 27 May 2025 06:29:13 +0000
Subject: [PATCH] feat(core): doc explorer list item drag preview (#12553)

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

## Summary by CodeRabbit

- **Style**
  - Improved the appearance of drag preview elements in the document list, including updated layout, spacing, background, and icon size for a more polished visual experience when dragging items.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../explorer/docs-view/doc-list-item.css.ts        | 14 ++++++++++++++
 .../explorer/docs-view/doc-list-item.tsx           |  6 ++++--
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/core/src/components/explorer/docs-view/doc-list-item.css.ts b/packages/frontend/core/src/components/explorer/docs-view/doc-list-item.css.ts
index b2914a210..4846edd81 100644
--- a/packages/frontend/core/src/components/explorer/docs-view/doc-list-item.css.ts
+++ b/packages/frontend/core/src/components/explorer/docs-view/doc-list-item.css.ts
@@ -6,6 +6,20 @@ export const root = style({
   height: '100%',
 });
 
+export const dragPreview = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: 8,
+  padding: '8px 16px 8px 12px',
+  background: cssVarV2.layer.background.primary,
+  borderRadius: 4,
+  border: `1px solid ${cssVarV2.layer.insideBorder.border}`,
+  fontSize: 14,
+});
+export const dragPreviewIcon = style({
+  fontSize: 24,
+});
+
 export const listViewRoot = style({
   padding: '0px 4px',
   width: '100%',
diff --git a/packages/frontend/core/src/components/explorer/docs-view/doc-list-item.tsx b/packages/frontend/core/src/components/explorer/docs-view/doc-list-item.tsx
index d405fbb74..cc03bdd53 100644
--- a/packages/frontend/core/src/components/explorer/docs-view/doc-list-item.tsx
+++ b/packages/frontend/core/src/components/explorer/docs-view/doc-list-item.tsx
@@ -181,8 +181,10 @@ export const DocListItem = ({ ...props }: DocListItemProps) => {
         )}
       </WorkbenchLink>
       <CustomDragPreview>
-        <RawDocIcon id={props.docId} />
-        <RawDocTitle id={props.docId} />
+        <div className={styles.dragPreview}>
+          <RawDocIcon id={props.docId} className={styles.dragPreviewIcon} />
+          <RawDocTitle id={props.docId} />
+        </div>
       </CustomDragPreview>
     </>
   );