Ajout de drag'n drop là ou c'est possible ; ajout de l'import des ennemis depuis foundryVTT

web/src/app/shared/file-drop.directive.ts

@@ -0,0 +1,55 @@
+import { Directive, EventEmitter, HostBinding, HostListener, Input, Output } from '@angular/core';
+
+/**
+ * Directive de drag & drop de fichiers réutilisable.
+ *
+ * Pose la classe `.drag-over` sur l'élément hôte pendant le survol (à styler côté
+ * composant) et émet les fichiers déposés.
+ *
+ * Usage :
+ *   <div appFileDrop (filesDropped)="onDrop($event)">…</div>
+ *   <div appFileDrop [multiple]="true" (filesDropped)="onDrop($event)">…</div>
+ */
+@Directive({
+  selector: '[appFileDrop]',
+  standalone: true
+})
+export class FileDropDirective {
+  /** Autoriser plusieurs fichiers (sinon seul le premier est émis). */
+  @Input() multiple = false;
+
+  /** Désactive le drop (ex: pendant un upload en cours). */
+  @Input() dropDisabled = false;
+
+  @Output() filesDropped = new EventEmitter<File[]>();
+
+  @HostBinding('class.drag-over') isOver = false;
+
+  @HostListener('dragover', ['$event'])
+  onDragOver(event: DragEvent): void {
+    if (this.dropDisabled) return;
+    event.preventDefault();
+    event.stopPropagation();
+    if (event.dataTransfer) event.dataTransfer.dropEffect = 'copy';
+    this.isOver = true;
+  }
+
+  @HostListener('dragleave', ['$event'])
+  onDragLeave(event: DragEvent): void {
+    event.preventDefault();
+    event.stopPropagation();
+    this.isOver = false;
+  }
+
+  @HostListener('drop', ['$event'])
+  onDrop(event: DragEvent): void {
+    event.preventDefault();
+    event.stopPropagation();
+    this.isOver = false;
+    if (this.dropDisabled) return;
+    const list = event.dataTransfer?.files;
+    if (!list || list.length === 0) return;
+    const files = Array.from(list);
+    this.filesDropped.emit(this.multiple ? files : [files[0]]);
+  }
+}

web/src/app/shared/image-uploader/image-uploader.component.html

@@ -1,6 +1,12 @@
 <!-- Mode compact : bouton "+ ajouter" carre, utilise dans les galeries. -->
 @if (compact) {
-  <label class="upload-compact" [class.loading]="uploading" [title]="errorMessage || ('imageUploader.addImage' | translate)">
+  <label class="upload-compact"
+    [class.loading]="uploading"
+    [class.drag-over]="dragOver"
+    (dragover)="onDragOver($event)"
+    (dragleave)="onDragLeave()"
+    (drop)="onDrop($event)"
+    [title]="errorMessage || ('imageUploader.addImage' | translate)">
     @if (!uploading) {
       <lucide-icon [img]="Upload" [size]="18"></lucide-icon>
       <span>{{ 'common.add' | translate }}</span>

web/src/app/shared/image-uploader/image-uploader.component.scss

@@ -51,6 +51,7 @@
   transition: background 0.15s, border-color 0.15s, color 0.15s;
 
   &:hover { border-color: #6c63ff; color: #a5b4fc; background: #1f1f3a; }
+  &.drag-over { border-color: #6c63ff; background: #1f1f3a; color: white; }
   &.loading { cursor: progress; opacity: 0.7; }
 }