[FEAT] Improved UI

src/components/SpritePreview.vue

@@ -13,6 +13,7 @@
           <div
             ref="previewContainerRef"
             class="relative touch-manipulation inline-block"
+            :class="{ 'ring-2 ring-blue-500 ring-offset-2': isDragOver }"
             :style="{
               transform: `scale(${zoom})`,
               transformOrigin: 'top left',
@@ -24,6 +25,9 @@
               backgroundPosition: settingsStore.backgroundColor === 'transparent' ? '0 0, 0 10px, 10px -10px, -10px 0px' : '0 0',
               border: `1px solid ${settingsStore.darkMode ? '#4b5563' : '#e5e7eb'}`,
             }"
+            @dragover.prevent="onDragOver"
+            @dragleave="onDragLeave"
+            @drop.prevent="onDrop"
           >
             <!-- Background sprites (dimmed for comparison) -->
             <template v-if="showAllSprites">
@@ -81,6 +85,14 @@
               <i class="fas fa-minus"></i>
             </button>
           </div>
+
+          <!-- Drop zone overlay -->
+          <div v-if="isDragOver" class="absolute inset-0 bg-blue-500/20 flex items-center justify-center pointer-events-none z-10 rounded-lg">
+            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg px-4 py-3 flex items-center gap-2 border border-blue-300 dark:border-blue-600">
+              <i class="fas fa-plus-circle text-blue-500"></i>
+              <span class="text-sm font-medium text-gray-700 dark:text-gray-200">Drop to add sprite at frame {{ currentFrameIndex + 1 }}</span>
+            </div>
+          </div>
         </div>
       </div>
 
@@ -247,6 +259,7 @@
   const emit = defineEmits<{
     (e: 'updateSprite', id: string, x: number, y: number): void;
     (e: 'updateSpriteInLayer', layerId: string, spriteId: string, x: number, y: number): void;
+    (e: 'dropSprite', layerId: string, frameIndex: number, files: File[]): void;
   }>();
 
   const previewContainerRef = ref<HTMLDivElement | null>(null);
@@ -283,6 +296,28 @@
   const isDraggable = ref(false);
   const repositionAllLayers = ref(false);
   const showAllSprites = ref(false);
+  const isDragOver = ref(false);
+
+  // Drag and drop for new sprites
+  const onDragOver = () => {
+    isDragOver.value = true;
+  };
+
+  const onDragLeave = () => {
+    isDragOver.value = false;
+  };
+
+  const onDrop = (event: DragEvent) => {
+    isDragOver.value = false;
+
+    if (!event.dataTransfer?.files.length) return;
+
+    const files = Array.from(event.dataTransfer.files).filter(file => file.type.startsWith('image/'));
+
+    if (files.length === 0) return;
+
+    emit('dropSprite', props.activeLayerId, currentFrameIndex.value, files);
+  };
 
   const compositeFrames = computed<Sprite[]>(() => {
     // Show frames from the active layer for the thumbnail list