feat: enhance document management UI

app/pages/documents.vue

@@ -70,8 +70,15 @@
             <tbody>
               <tr v-for="document in filteredDocuments" :key="document.id" class="text-sm">
                 <td>
-                  <div class="font-semibold">{{ document.name }}</div>
-                  <div class="text-xs text-gray-500">{{ document.filename }}</div>
+                  <div class="flex items-center gap-3">
+                    <span class="text-xl" :class="documentIcon(document).colorClass">
+                      {{ documentIcon(document).icon }}
+                    </span>
+                    <div>
+                      <div class="font-semibold">{{ document.name }}</div>
+                      <div class="text-xs text-gray-500">{{ document.filename }}</div>
+                    </div>
+                  </div>
                 </td>
                 <td>{{ document.mimeType || 'Inconnu' }}</td>
                 <td>{{ formatSize(document.size) }}</td>
@@ -104,6 +111,7 @@
 <script setup>
 import { ref, computed, onMounted } from 'vue'
 import { useDocuments } from '~/composables/useDocuments'
+import { getFileIcon } from '~/utils/fileIcons'
 
 const { documents, loading, loadDocuments } = useDocuments()
 
@@ -155,6 +163,8 @@ const formatSize = (size) => {
   return `${formatted.toFixed(1)} ${units[index]}`
 }
 
+const documentIcon = (doc) => getFileIcon({ name: doc.filename || doc.name, mime: doc.mimeType })
+
 const formatDate = (date) => {
   if (!date) return '—'
   return new Intl.DateTimeFormat('fr-FR', {