feat(frontend): replace inline icons with lucide components

app/utils/fileIcons.js

@@ -1,74 +1,85 @@
+import IconFile from '~icons/lucide/file'
+import IconFileType from '~icons/lucide/file-type'
+import IconFileText from '~icons/lucide/file-text'
+import IconFileSpreadsheet from '~icons/lucide/file-spreadsheet'
+import IconPresentation from '~icons/lucide/presentation'
+import IconImage from '~icons/lucide/image'
+import IconArchive from '~icons/lucide/archive'
+import IconFileAudio2 from '~icons/lucide/file-audio-2'
+import IconFileVideo2 from '~icons/lucide/file-video-2'
+import IconFileCode from '~icons/lucide/file-code'
+
 const iconMap = [
   {
     label: 'PDF',
     exts: ['pdf'],
-    icon: '📕',
+    component: IconFileType,
     colorClass: 'text-red-500'
   },
   {
     label: 'Word',
     exts: ['doc', 'docx'],
-    icon: '📝',
+    component: IconFileText,
     colorClass: 'text-blue-500'
   },
   {
     label: 'Excel',
     exts: ['xls', 'xlsx', 'csv'],
-    icon: '📊',
+    component: IconFileSpreadsheet,
     colorClass: 'text-green-500'
   },
   {
     label: 'PowerPoint',
     exts: ['ppt', 'pptx'],
-    icon: '📈',
+    component: IconPresentation,
     colorClass: 'text-orange-500'
   },
   {
     label: 'Image',
     exts: ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'svg', 'webp', 'heic'],
-    icon: '🖼️',
+    component: IconImage,
     colorClass: 'text-purple-500'
   },
   {
     label: 'Archive',
     exts: ['zip', 'rar', '7z', 'tar', 'gz'],
-    icon: '🗜️',
+    component: IconArchive,
     colorClass: 'text-amber-500'
   },
   {
     label: 'Audio',
     exts: ['mp3', 'wav', 'ogg', 'flac', 'aac'],
-    icon: '🎵',
+    component: IconFileAudio2,
     colorClass: 'text-pink-500'
   },
   {
     label: 'Vidéo',
     exts: ['mp4', 'mov', 'avi', 'mkv', 'webm'],
-    icon: '🎬',
+    component: IconFileVideo2,
     colorClass: 'text-indigo-500'
   },
   {
     label: 'Texte',
     exts: ['txt', 'md', 'rtf'],
-    icon: '📄',
+    component: IconFileText,
     colorClass: 'text-gray-500'
   },
   {
     label: 'Code',
     exts: ['json', 'xml', 'yml', 'yaml', 'js', 'ts', 'py', 'java', 'cs'],
-    icon: '💻',
+    component: IconFileCode,
     colorClass: 'text-sky-500'
   }
 ]
 
 const mimeGroups = [
-  { prefix: 'image/', icon: '🖼️', colorClass: 'text-purple-500' },
-  { prefix: 'video/', icon: '🎬', colorClass: 'text-indigo-500' },
-  { prefix: 'audio/', icon: '🎵', colorClass: 'text-pink-500' },
-  { prefix: 'text/', icon: '📄', colorClass: 'text-gray-500' },
-  { prefix: 'application/pdf', icon: '📕', colorClass: 'text-red-500' },
-  { prefix: 'application/zip', icon: '🗜️', colorClass: 'text-amber-500' },
-  { prefix: 'application/x-', icon: '🗜️', colorClass: 'text-amber-500' }
+  { prefix: 'image/', component: IconImage, colorClass: 'text-purple-500', label: 'Image' },
+  { prefix: 'video/', component: IconFileVideo2, colorClass: 'text-indigo-500', label: 'Vidéo' },
+  { prefix: 'audio/', component: IconFileAudio2, colorClass: 'text-pink-500', label: 'Audio' },
+  { prefix: 'text/', component: IconFileText, colorClass: 'text-gray-500', label: 'Texte' },
+  { prefix: 'application/pdf', component: IconFileType, colorClass: 'text-red-500', label: 'PDF' },
+  { prefix: 'application/zip', component: IconArchive, colorClass: 'text-amber-500', label: 'Archive' },
+  { prefix: 'application/x-', component: IconArchive, colorClass: 'text-amber-500', label: 'Archive' }
 ]
 
 export const getFileIcon = ({ name = '', mime = '' } = {}) => {
@@ -78,7 +89,7 @@ export const getFileIcon = ({ name = '', mime = '' } = {}) => {
     const match = iconMap.find(entry => entry.exts.includes(extension))
     if (match) {
       return {
-        icon: match.icon,
+        component: match.component,
         colorClass: match.colorClass,
         label: match.label
       }
@@ -89,15 +100,15 @@ export const getFileIcon = ({ name = '', mime = '' } = {}) => {
     const match = mimeGroups.find(entry => mime.startsWith(entry.prefix))
     if (match) {
       return {
-        icon: match.icon,
+        component: match.component,
         colorClass: match.colorClass,
-        label: mime
+        label: match.label || mime
       }
     }
   }
 
   return {
-    icon: '📁',
+    component: IconFile,
     colorClass: 'text-primary',
     label: 'Document'
   }