Feedback

src/App.vue

@@ -116,11 +116,40 @@
     <FeedbackModal :is-open="isFeedbackModalOpen" @close="closeFeedbackModal" />
     <SpritesheetSplitter :is-open="isSpritesheetSplitterOpen" :image-url="spritesheetImageUrl" :image-file="spritesheetImageFile" @close="closeSpritesheetSplitter" @split="handleSplitSpritesheet" />
     <GifFpsModal :is-open="isGifFpsModalOpen" @close="closeGifFpsModal" @confirm="downloadAsGif" :default-fps="10" />
+
+    <!-- One-time feedback popup -->
+    <div v-if="showFeedbackPopup" class="fixed inset-0 backdrop-blur-sm flex items-center justify-center z-50">
+      <div class="bg-white dark:bg-gray-800 rounded-xl p-6 max-w-md mx-4 shadow-xl border border-gray-600">
+        <div class="text-center">
+          <div class="text-4xl mb-4">💬</div>
+          <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">
+            Help us improve!
+          </h3>
+          <p class="text-gray-600 dark:text-gray-300 mb-6">
+            We'd love to hear your thoughts about the spritesheet generator. Would you like to share your feedback?
+          </p>
+          <div class="flex gap-3 justify-center">
+            <button
+              @click="handleFeedbackPopupResponse(false)"
+              class="px-4 py-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors"
+            >
+              Maybe later
+            </button>
+            <button
+              @click="handleFeedbackPopupResponse(true)"
+              class="px-6 py-2 bg-blue-500 hover:bg-blue-600 text-white font-medium rounded-lg transition-colors"
+            >
+              Share feedback
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-  import { ref, watch, onUnmounted } from 'vue';
+  import { ref, watch, onMounted, onUnmounted } from 'vue';
   import FileUploader from './components/FileUploader.vue';
   import SpriteCanvas from './components/SpriteCanvas.vue';
   import Modal from './components/utilities/Modal.vue';
@@ -169,6 +198,7 @@
   const jsonFileInput = ref<HTMLInputElement | null>(null);
   const spritesheetImageUrl = ref('');
   const spritesheetImageFile = ref<File | null>(null);
+  const showFeedbackPopup = ref(false);
 
   const handleSpritesUpload = (files: File[]) => {
     // Check if any of the files is a JSON file
@@ -663,6 +693,27 @@
     gif.render();
   };
 
+  // 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');
+
+    if (showModal) {
+      openFeedbackModal();
+    }
+  };
+
   // Revoke blob URLs on unmount to avoid memory leaks
   onUnmounted(() => {
     sprites.value.forEach(s => {