@hienlh/ppm 0.11.9 → 0.11.10

package/src/web/components/explorer/file-tree.tsx

@@ -7,6 +7,12 @@ import {
   FileJson,
   FileText,
   FileType,
+  FileImage,
+  FileVideo,
+  FileAudio,
+  FileSpreadsheet,
+  FileArchive,
+  Database,
   ChevronRight,
   ChevronDown,
   Download,
@@ -40,27 +46,56 @@ function isExternalFileDrag(e: React.DragEvent): boolean {
 /** Synthetic root node for creating files/folders at project root */
 const ROOT_NODE: FileNode = { name: "", path: "", type: "directory" };
 
-const FILE_ICON_MAP: Record<string, React.ComponentType<{ className?: string }>> = {
-  ts: FileCode,
-  tsx: FileCode,
-  js: FileCode,
-  jsx: FileCode,
-  py: FileCode,
-  rs: FileCode,
-  go: FileCode,
-  json: FileJson,
-  md: FileText,
-  txt: FileText,
-  yaml: FileType,
-  yml: FileType,
-  html: FileCode,
-  css: FileCode,
-  scss: FileCode,
+type FileIconInfo = { icon: React.ComponentType<{ className?: string }>; color?: string };
+
+const FILE_ICON_MAP: Record<string, FileIconInfo> = {
+  // Code
+  ts: { icon: FileCode, color: "text-blue-400" }, tsx: { icon: FileCode, color: "text-blue-400" },
+  js: { icon: FileCode, color: "text-yellow-400" }, jsx: { icon: FileCode, color: "text-yellow-400" },
+  py: { icon: FileCode, color: "text-green-400" }, rs: { icon: FileCode, color: "text-orange-400" },
+  go: { icon: FileCode, color: "text-cyan-400" }, c: { icon: FileCode, color: "text-blue-300" },
+  cpp: { icon: FileCode, color: "text-blue-300" }, java: { icon: FileCode, color: "text-red-400" },
+  rb: { icon: FileCode, color: "text-red-400" }, php: { icon: FileCode, color: "text-purple-400" },
+  swift: { icon: FileCode, color: "text-orange-400" }, kt: { icon: FileCode, color: "text-purple-400" },
+  dart: { icon: FileCode, color: "text-cyan-400" }, sh: { icon: FileCode, color: "text-green-300" },
+  html: { icon: FileCode, color: "text-orange-400" }, css: { icon: FileCode, color: "text-blue-400" },
+  scss: { icon: FileCode, color: "text-pink-400" },
+  // Data
+  json: { icon: FileJson, color: "text-yellow-400" },
+  yaml: { icon: FileType, color: "text-orange-300" }, yml: { icon: FileType, color: "text-orange-300" },
+  toml: { icon: FileType, color: "text-orange-300" }, ini: { icon: FileType, color: "text-orange-300" },
+  env: { icon: FileType, color: "text-yellow-300" },
+  csv: { icon: FileSpreadsheet, color: "text-green-400" },
+  xls: { icon: FileSpreadsheet, color: "text-green-400" }, xlsx: { icon: FileSpreadsheet, color: "text-green-400" },
+  // Text/Docs
+  md: { icon: FileText, color: "text-text-secondary" }, txt: { icon: FileText, color: "text-text-secondary" },
+  log: { icon: FileText, color: "text-text-subtle" }, pdf: { icon: FileText, color: "text-red-400" },
+  // Images
+  png: { icon: FileImage, color: "text-green-400" }, jpg: { icon: FileImage, color: "text-green-400" },
+  jpeg: { icon: FileImage, color: "text-green-400" }, gif: { icon: FileImage, color: "text-green-400" },
+  svg: { icon: FileImage, color: "text-yellow-400" }, webp: { icon: FileImage, color: "text-green-400" },
+  ico: { icon: FileImage, color: "text-green-400" }, bmp: { icon: FileImage, color: "text-green-400" },
+  // Video
+  mp4: { icon: FileVideo, color: "text-purple-400" }, webm: { icon: FileVideo, color: "text-purple-400" },
+  mov: { icon: FileVideo, color: "text-purple-400" }, avi: { icon: FileVideo, color: "text-purple-400" },
+  mkv: { icon: FileVideo, color: "text-purple-400" },
+  // Audio
+  mp3: { icon: FileAudio, color: "text-pink-400" }, wav: { icon: FileAudio, color: "text-pink-400" },
+  ogg: { icon: FileAudio, color: "text-pink-400" }, flac: { icon: FileAudio, color: "text-pink-400" },
+  // Database
+  db: { icon: Database, color: "text-amber-400" }, sqlite: { icon: Database, color: "text-amber-400" },
+  sqlite3: { icon: Database, color: "text-amber-400" }, sql: { icon: Database, color: "text-amber-400" },
+  // Archives
+  zip: { icon: FileArchive, color: "text-amber-300" }, tar: { icon: FileArchive, color: "text-amber-300" },
+  gz: { icon: FileArchive, color: "text-amber-300" }, rar: { icon: FileArchive, color: "text-amber-300" },
+  "7z": { icon: FileArchive, color: "text-amber-300" },
 };
 
-function getFileIcon(name: string): React.ComponentType<{ className?: string }> {
+const DEFAULT_FILE_ICON: FileIconInfo = { icon: File };
+
+function getFileIcon(name: string): FileIconInfo {
   const ext = name.split(".").pop()?.toLowerCase() ?? "";
-  return FILE_ICON_MAP[ext] ?? File;
+  return FILE_ICON_MAP[ext] ?? DEFAULT_FILE_ICON;
 }
 
 interface TreeNodeProps {
@@ -141,10 +176,8 @@ const TreeNode = memo(function TreeNode({ node, depth, projectName, onAction, on
     }
   }
 
-  const Icon = isDir
-    ? isExpanded
-      ? FolderOpen
-      : Folder
+  const { icon: FileIcon, color: fileIconColor } = isDir
+    ? { icon: isExpanded ? FolderOpen : Folder, color: "text-primary" }
     : getFileIcon(node.name);
 
   const sortedChildren = node.children
@@ -186,10 +219,10 @@ const TreeNode = memo(function TreeNode({ node, depth, projectName, onAction, on
             ) : (
               <span className="w-3.5 shrink-0" />
             )}
-            <Icon
+            <FileIcon
               className={cn(
                 "size-4 shrink-0",
-                isDir ? "text-primary" : "text-text-secondary",
+                fileIconColor ?? "text-text-secondary",
               )}
             />
             <span className="truncate">{node.name}</span>