feat: enhance document management UI

app/components/DocumentUpload.vue

@@ -34,9 +34,12 @@
 
       <ul v-if="selectedFiles.length" class="mt-4 w-full space-y-2 text-left">
         <li v-for="file in selectedFiles" :key="file.name" class="flex items-center justify-between text-sm">
-          <div class="flex flex-col">
-            <span class="font-medium">{{ file.name }}</span>
-            <span class="text-xs text-gray-500">{{ formatSize(file.size) }} • {{ file.type || 'Type inconnu' }}</span>
+          <div class="flex items-center gap-3">
+            <span class="text-xl" :class="getIcon(file).colorClass">{{ getIcon(file).icon }}</span>
+            <div class="flex flex-col">
+              <span class="font-medium">{{ file.name }}</span>
+              <span class="text-xs text-gray-500">{{ formatSize(file.size) }} • {{ file.type || 'Type inconnu' }}</span>
+            </div>
           </div>
           <button type="button" class="btn btn-ghost btn-xs" @click="removeFile(file)">
             Retirer
@@ -49,6 +52,8 @@
 
 <script setup>
 import { ref, computed, watch } from 'vue'
+import { useToast } from '~/composables/useToast'
+import { getFileIcon } from '~/utils/fileIcons'
 
 const props = defineProps({
   title: {
@@ -71,6 +76,10 @@ const props = defineProps({
     type: Array,
     default: () => [],
   },
+  maxFileSizeMb: {
+    type: Number,
+    default: 100,
+  },
 })
 
 const emit = defineEmits(['update:modelValue', 'files-added'])
@@ -78,6 +87,7 @@ const emit = defineEmits(['update:modelValue', 'files-added'])
 const dragActive = ref(false)
 const fileInput = ref(null)
 const internalFiles = ref([])
+const { showError } = useToast()
 
 const selectedFiles = computed(() => internalFiles.value)
 
@@ -103,11 +113,21 @@ const emitFiles = (files) => {
 
 const handleFiles = (fileList) => {
   const files = Array.from(fileList)
+  const maxBytes = props.maxFileSizeMb * 1024 * 1024
   if (!props.multiple) {
+    const validFile = files[0]
+    if (validFile && validFile.size > maxBytes) {
+      showError(`Le fichier "${validFile.name}" dépasse la limite de ${props.maxFileSizeMb} Mo`)
+      return
+    }
     emitFiles(files.slice(0, 1))
   } else {
     const merged = [...internalFiles.value]
     files.forEach((file) => {
+      if (file.size > maxBytes) {
+        showError(`Le fichier "${file.name}" dépasse la limite de ${props.maxFileSizeMb} Mo`)
+        return
+      }
       if (!merged.some(existing => existing.name === file.name && existing.size === file.size)) {
         merged.push(file)
       }
@@ -148,4 +168,8 @@ const formatSize = (size) => {
   const formatted = size / Math.pow(1024, index)
   return `${formatted.toFixed(1)} ${units[index]}`
 }
+
+const getIcon = (file) => {
+  return getFileIcon({ name: file.name, mime: file.type })
+}
 </script>