Clean

src/App.vue

@@ -149,18 +149,7 @@
   import { useExport } from './composables/useExport';
   import type { SpriteFile } from './types/sprites';
 
-  const {
+  const { sprites, columns, updateSpritePosition, updateSpriteCell, removeSprite, replaceSprite, addSprite, addSpriteWithResize, processImageFiles, alignSprites } = useSprites();
-    sprites,
-    columns,
-    updateSpritePosition,
-    updateSpriteCell,
-    removeSprite,
-    replaceSprite,
-    addSprite,
-    addSpriteWithResize,
-    processImageFiles,
-    alignSprites,
-  } = useSprites();
 
   const { downloadSpritesheet, exportSpritesheetJSON, importSpritesheetJSON, downloadAsGif, downloadAsZip } = useExport(sprites, columns);
   const isPreviewModalOpen = ref(false);
@@ -174,7 +163,6 @@
   const showFeedbackPopup = ref(false);
 
   const handleSpritesUpload = async (files: File[]) => {
-    // Check if any of the files is a JSON file
     const jsonFile = files.find(file => file.type === 'application/json' || file.name.endsWith('.json'));
 
     if (jsonFile) {
@@ -187,37 +175,28 @@
       return;
     }
 
-    // Check if it's a single image file that might be a spritesheet
     if (files.length === 1 && files[0].type.startsWith('image/')) {
       const file = files[0];
       const url = URL.createObjectURL(file);
 
-      // Load the image to check its dimensions
       const img = new Image();
       img.onload = () => {
-        // Ask the user if they want to split the spritesheet
         if (confirm('This looks like it might be a spritesheet. Would you like to split it into individual sprites?')) {
-          // Open the spritesheet splitter
           spritesheetImageUrl.value = url;
           spritesheetImageFile.value = file;
           isSpritesheetSplitterOpen.value = true;
           return;
         }
 
-        // If the user doesn't want to split or it's not large enough, process as a single sprite
         processImageFiles([file]);
       };
       img.src = url;
       return;
     }
 
-    // Process multiple image files normally
     processImageFiles(files);
   };
 
-  // sprite position and export/import/dl handled by composables
-
-  // Preview modal control
   const openPreviewModal = () => {
     if (sprites.value.length === 0) {
       alert('Please upload or import sprites to preview an animation.');
@@ -230,7 +209,6 @@
     isPreviewModalOpen.value = false;
   };
 
-  // Help modal control
   const openHelpModal = () => {
     isHelpModalOpen.value = true;
   };
@@ -239,7 +217,6 @@
     isHelpModalOpen.value = false;
   };
 
-  // Feedback modal control
   const openFeedbackModal = () => {
     isFeedbackModalOpen.value = true;
   };
@@ -248,10 +225,8 @@
     isFeedbackModalOpen.value = false;
   };
 
-  // Spritesheet splitter modal control
   const closeSpritesheetSplitter = () => {
     isSpritesheetSplitterOpen.value = false;
-    // Clean up the URL object to prevent memory leaks
     if (spritesheetImageUrl.value) {
       URL.revokeObjectURL(spritesheetImageUrl.value);
       spritesheetImageUrl.value = '';
@@ -259,7 +234,6 @@
     spritesheetImageFile.value = null;
   };
 
-  // GIF FPS modal control
   const openGifFpsModal = () => {
     if (sprites.value.length === 0) {
       alert('Please upload or import sprites before generating a GIF.');
@@ -272,20 +246,14 @@
     isGifFpsModalOpen.value = false;
   };
 
-  // Handle the split spritesheet result
   const handleSplitSpritesheet = (spriteFiles: SpriteFile[]) => {
-    // For now ignore bounding box offsets; add all files as new sprites
     processImageFiles(spriteFiles.map(s => s.file));
   };
 
-  // export handled by composable
-
-  // Open file dialog for JSON import
   const openJSONImportDialog = () => {
     jsonFileInput.value?.click();
   };
 
-  // Handle JSON file selection
   const handleJSONFileChange = async (event: Event) => {
     const input = event.target as HTMLInputElement;
     if (input.files && input.files.length > 0) {
@@ -296,39 +264,19 @@
         console.error('Error importing JSON:', error);
         alert('Failed to import JSON file. Please check the file format.');
       }
-      // Reset input value so uploading the same file again will trigger the event
       if (jsonFileInput.value) jsonFileInput.value.value = '';
     }
   };
 
-  // import handled by composable (used in handleSpritesUpload/handleJSONFileChange)
-
-  // alignment handled by composable (exposed as alignSprites)
-
-  // cell update handled by composable (exposed as updateSpriteCell)
-
-  // remove handled by composable
-
-  // replace handled by composable
-
-  // add handled by composable
-
-  // add with resize handled by composable
-
-  // GIF handled by composable
-
-  // Check for one-time feedback popup on mount
   onMounted(() => {
     const hasShownFeedbackPopup = localStorage.getItem('hasShownFeedbackPopup');
     if (!hasShownFeedbackPopup) {
-      // Show popup after a short delay to let the page load
       setTimeout(() => {
         showFeedbackPopup.value = true;
       }, 3000);
     }
   });
 
-  // Handle feedback popup response
   const handleFeedbackPopupResponse = (showModal: boolean) => {
     showFeedbackPopup.value = false;
     localStorage.setItem('hasShownFeedbackPopup', 'true');
@@ -337,8 +285,4 @@
       openFeedbackModal();
     }
   };
-
-  // unmount cleanup is handled inside useSprites
-
-  // ZIP handled by composable
 </script>

src/components/utilities/Modal.vue

@@ -34,7 +34,7 @@
       <!-- Resize handle -->
       <div v-if="!isFullScreen && !isMobile" class="absolute bottom-0 right-0 w-8 h-8 cursor-se-resize" @mousedown="startResize" @touchstart="startResize">
         <svg class="w-8 h-8 text-gray-400 dark:text-gray-500" viewBox="0 0 24 24" fill="currentColor">
-          <path d="M22 22H20V20H22V22ZM22 18H20V16H22V18ZM18 22H16V20H18V22ZM22 14H20V12H22V14ZM18 18H16V16H18V18ZM14 22H12V20H14V22Z"/>
+          <path d="M22 22H20V20H22V22ZM22 18H20V16H22V18ZM18 22H16V20H18V22ZM22 14H20V12H22V14ZM18 18H16V16H18V18ZM14 22H12V20H14V22Z" />
         </svg>
       </div>
     </div>