[FEAT] Enhanced UI

src/components/SpritePreview.vue

@@ -1,8 +1,6 @@
 <template>
   <div class="spritesheet-preview w-full">
-    <!-- Main Layout: Canvas Left, Controls Right -->
     <div class="flex flex-col lg:flex-row gap-4">
-      <!-- Canvas Area (Left/Main) -->
       <div class="flex-1 min-w-0">
         <div class="relative bg-gray-50 dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg overflow-auto min-h-[300px] sm:min-h-[520px] shadow-sm hover:shadow-md transition-shadow duration-200">
           <canvas
@@ -32,10 +30,8 @@
         </div>
       </div>
 
-      <!-- Controls Sidebar (Right) -->
       <div class="lg:w-80 xl:w-96 flex-shrink-0">
         <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4 space-y-4">
-          <!-- Playback Controls -->
           <div class="space-y-3">
             <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wide">Playback</h3>
             <div class="flex items-center gap-2">
@@ -214,14 +210,20 @@
   const showAllSprites = ref(false);
 
   const compositeFrames = computed<Sprite[]>(() => {
-    const v = getVisibleLayers();
-    const len = maxFrames();
-    const arr: Sprite[] = [];
-    for (let i = 0; i < len; i++) {
-      const s = v.find(l => l.sprites[i])?.sprites[i];
-      if (s) arr.push(s);
+    // Show frames from the active layer for the thumbnail list
+    const activeLayer = props.layers.find(l => l.id === props.activeLayerId);
+    if (!activeLayer) {
+      // Fallback to first visible layer if no active layer
+      const v = getVisibleLayers();
+      const len = maxFrames();
+      const arr: Sprite[] = [];
+      for (let i = 0; i < len; i++) {
+        const s = v.find(l => l.sprites[i])?.sprites[i];
+        if (s) arr.push(s);
+      }
+      return arr;
     }
-    return arr;
+    return activeLayer.sprites;
   });
 
   const currentFrameSprite = computed<Sprite | null>(() => {
@@ -283,6 +285,7 @@
     const frameIndex = currentFrameIndex.value;
 
     if (showAllSprites.value) {
+      // When comparing sprites, show all frames from all visible layers (dimmed)
       const len = maxFrames();
       for (let i = 0; i < len; i++) {
         if (i === frameIndex || hiddenFrames.value.includes(i)) continue;
@@ -294,6 +297,7 @@
       }
     }
 
+    // Always draw current frame from all visible layers
     visibleLayers.forEach(layer => {
       const sprite = layer.sprites[frameIndex];
       if (!sprite) return;
@@ -421,6 +425,7 @@
 
   // Watchers
   watch(() => props.layers, drawPreviewCanvas, { deep: true });
+  watch(() => props.activeLayerId, drawPreviewCanvas);
   watch(currentFrameIndex, drawPreviewCanvas);
   watch(zoom, drawPreviewCanvas);
   watch(isDraggable, drawPreviewCanvas);