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

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%',

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} />
+        <div className={styles.dragPreview}>
-        <RawDocTitle id={props.docId} />
+          <RawDocIcon id={props.docId} className={styles.dragPreviewIcon} />
+          <RawDocTitle id={props.docId} />
+        </div>
       </CustomDragPreview>
     </>
   );