feat: added auto scroll on image generation

Author: bhupeshpr25

package.json

@@ -1,7 +1,7 @@
 {
   "name": "memegen",
   "private": true,
-  "version": "2.1.0",
+  "version": "2.2.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/manifest.json

@@ -2,7 +2,7 @@
   "{{chrome}}.manifest_version": 3,
   "{{firefox}}.manifest_version": 2,
   "name": "memegen",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "meme generator extension",
   "icons": {
     "16": "memegen.webp",

src/pages/Template.svelte

@@ -22,6 +22,8 @@
   let generatingMeme = false;
   let imageLoaded = false;
 
+  let buttonContainer: HTMLDivElement | null = null;
+
   // Initialize caption inputs based on template's box count
   onMount(() => {
     captionInputs = Array.from(
@@ -44,8 +46,13 @@
     // Update generated meme state
     if (generatedMeme) {
       generatedMemeUrl = generatedMeme.url;
-    }
 
+      // Scroll to the generated meme
+      window.scrollTo({
+        top: document.body.scrollHeight,
+        behavior: "smooth",
+      });
+    }
     generatingMeme = false;
   }
 
@@ -104,18 +111,23 @@
 
     <!-- Loading and displaying generated meme -->
     {#if generatingMeme}
-      <p class="my-4 text-gray-200">Generating meme...</p>
+      <p class="my-4 text-gray-200">generating meme...</p>
     {:else if generatedMemeUrl}
       <div class="my-4">
         <img
           src={generatedMemeUrl}
           alt="Generated Meme"
           on:load={() => {
             imageLoaded = true;
+
+            //scroll to generated image
+            requestAnimationFrame(() => {
+              window.scrollTo(0, document.body.scrollHeight);
+            });
           }}
         />
         {#if imageLoaded}
-          <div class="mt-4 flex">
+          <div class="mt-4 flex" bind:this={buttonContainer}>
             <button
               type="button"
               class="mx-auto rounded-md w-16 bg-teal-600 p-2 text-sm font-medium text-white transition hover:bg-teal-700 focus:outline-none focus:ring"

src/popup.css

@@ -8,6 +8,7 @@ body {
   height: 500px;
   padding: 0;
   margin: 0;
+  scroll-behavior: smooth;
 }
 
 body {