feat: optimize file tree node decoration, support codicon

packages/file-tree-next/src/browser/file-tree-node.module.less

@@ -102,6 +102,11 @@
   text-align: center;
   font-size: 12px;
   padding-right: 0;
+  line-height: 1;
+  display: inline-flex;
+  justify-items: center;
+  align-items: center;
+  flex-direction: column;
 }
 
 .file_tree_node_segment {

packages/file-tree-next/src/browser/file-tree-node.tsx

@@ -12,8 +12,9 @@ import {
   NewPromptHandle,
 } from '@opensumi/ide-components';
 import { Loading } from '@opensumi/ide-components';
-import { getIcon, URI, path } from '@opensumi/ide-core-browser';
+import { getIcon, URI, path, transformLabelWithCodicon } from '@opensumi/ide-core-browser';
 import { LabelService } from '@opensumi/ide-core-browser/lib/services';
+import { IIconService } from '@opensumi/ide-theme/lib/common/index';
 
 import { Directory, File } from '../common/file-tree-node.define';
 
@@ -28,6 +29,7 @@ export interface IFileTreeNodeProps {
   defaultLeftPadding?: number;
   leftPadding?: number;
   decorationService: FileTreeDecorationService;
+  iconService: IIconService;
   labelService: LabelService;
   decorations?: ClasslistComposite;
   dndService: DragAndDropService;
@@ -76,6 +78,7 @@ export const FileTreeNode: React.FC<FileTreeNodeRenderedProps> = ({
   hasFileIcons,
   hidesExplorerArrows,
   hasPrompt,
+  iconService,
 }: FileTreeNodeRenderedProps) => {
   const [activeIndex, setActiveIndex] = React.useState<number>(-1);
   const isRenamePrompt = itemType === TreeNodeType.RenamePrompt;
@@ -375,7 +378,17 @@ export const FileTreeNode: React.FC<FileTreeNodeRenderedProps> = ({
     if (!decoration) {
       return null;
     }
-    return <div className={styles.file_tree_node_status}>{decoration.badge.slice()}</div>;
+    return (
+      <div className={styles.file_tree_node_status}>
+        {transformLabelWithCodicon(
+          decoration.badge.slice(),
+          {
+            color: 'inherit',
+          },
+          iconService.fromString.bind(iconService),
+        )}
+      </div>
+    );
   };
 
   const renderTwice = (item) => {

packages/file-tree-next/src/browser/file-tree.tsx

@@ -30,6 +30,7 @@ import {
 } from '@opensumi/ide-core-browser';
 import { Progress } from '@opensumi/ide-core-browser/lib/progress/progress-bar';
 import { WelcomeView } from '@opensumi/ide-main-layout/lib/browser/welcome.view';
+import { IIconService } from '@opensumi/ide-theme/lib/common/index';
 
 import { FILE_EXPLORER_WELCOME_ID, IFileTreeService } from '../common';
 import { Directory, File } from '../common/file-tree-node.define';
@@ -419,6 +420,8 @@ const FileTreeView = memo(
     onTwistierClick,
   }: FileTreeViewProps) => {
     const filetreeService = useInjectable<FileTreeService>(IFileTreeService);
+    const iconService = useInjectable<IIconService>(IIconService);
+
     const { decorationService, labelService, locationToCurrentFile } = filetreeService;
     const fileTreeModelService = useInjectable<FileTreeModelService>(FileTreeModelService);
 
@@ -433,6 +436,7 @@ const FileTreeView = memo(
           template={(props as any).template}
           decorationService={decorationService}
           labelService={labelService}
+          iconService={iconService}
           dndService={fileTreeModelService.dndService}
           decorations={fileTreeModelService.decorations.getDecorations(props.item as any)}
           onClick={onItemClick}