feat: Add file color coding in file manager

- Files: blue (text-blue-400)
- Folders: red (text-red-400)
- Symlinks: green (text-green-400)
- Add toggle in User Profile settings
- Store preference in localStorage
- Support i18n (en, zh)
- Can be disabled via settings
- Matches dark theme color scheme

src/ui/desktop/apps/file-manager/FileManagerGrid.tsx

@@ -96,15 +96,33 @@ interface FileManagerGridProps {
   onNewFolder?: () => void;
 }
 
-const getFileIcon = (file: FileItem, viewMode: "grid" | "list" = "grid") => {
-  const iconClass = viewMode === "grid" ? "w-8 h-8" : "w-6 h-6";
+const getFileTypeColor = (file: FileItem): string => {
+  const colorEnabled = localStorage.getItem("fileColorCoding") !== "false";
+  if (!colorEnabled) {
+    return "text-muted-foreground";
+  }
 
   if (file.type === "directory") {
-    return <Folder className={`${iconClass} text-muted-foreground`} />;
+    return "text-red-400";
   }
 
   if (file.type === "link") {
-    return <FileSymlink className={`${iconClass} text-muted-foreground`} />;
+    return "text-green-400";
+  }
+
+  return "text-blue-400";
+};
+
+const getFileIcon = (file: FileItem, viewMode: "grid" | "list" = "grid") => {
+  const iconClass = viewMode === "grid" ? "w-8 h-8" : "w-6 h-6";
+  const colorClass = getFileTypeColor(file);
+
+  if (file.type === "directory") {
+    return <Folder className={`${iconClass} ${colorClass}`} />;
+  }
+
+  if (file.type === "link") {
+    return <FileSymlink className={`${iconClass} ${colorClass}`} />;
   }
 
   const ext = file.name.split(".").pop()?.toLowerCase();
@@ -113,30 +131,30 @@ const getFileIcon = (file: FileItem, viewMode: "grid" | "list" = "grid") => {
     case "txt":
     case "md":
     case "readme":
-      return <FileText className={`${iconClass} text-muted-foreground`} />;
+      return <FileText className={`${iconClass} ${colorClass}`} />;
     case "png":
     case "jpg":
     case "jpeg":
     case "gif":
     case "bmp":
     case "svg":
-      return <FileImage className={`${iconClass} text-muted-foreground`} />;
+      return <FileImage className={`${iconClass} ${colorClass}`} />;
     case "mp4":
     case "avi":
     case "mkv":
     case "mov":
-      return <FileVideo className={`${iconClass} text-muted-foreground`} />;
+      return <FileVideo className={`${iconClass} ${colorClass}`} />;
     case "mp3":
     case "wav":
     case "flac":
     case "ogg":
-      return <FileAudio className={`${iconClass} text-muted-foreground`} />;
+      return <FileAudio className={`${iconClass} ${colorClass}`} />;
     case "zip":
     case "tar":
     case "gz":
     case "rar":
     case "7z":
-      return <Archive className={`${iconClass} text-muted-foreground`} />;
+      return <Archive className={`${iconClass} ${colorClass}`} />;
     case "js":
     case "ts":
     case "jsx":
@@ -150,7 +168,7 @@ const getFileIcon = (file: FileItem, viewMode: "grid" | "list" = "grid") => {
     case "rb":
     case "go":
     case "rs":
-      return <Code className={`${iconClass} text-muted-foreground`} />;
+      return <Code className={`${iconClass} ${colorClass}`} />;
     case "json":
     case "xml":
     case "yaml":
@@ -159,9 +177,9 @@ const getFileIcon = (file: FileItem, viewMode: "grid" | "list" = "grid") => {
     case "ini":
     case "conf":
     case "config":
-      return <Settings className={`${iconClass} text-muted-foreground`} />;
+      return <Settings className={`${iconClass} ${colorClass}`} />;
     default:
-      return <File className={`${iconClass} text-muted-foreground`} />;
+      return <File className={`${iconClass} ${colorClass}`} />;
   }
 };