feat: enhance gallery template with infinite scroll and improved video/image displays

Co-authored-by: Copilot <copilot@github.com>

frontend/app/templates/gallery.html

@@ -1,6 +1,11 @@
 {% extends "base.html" %} {% block title %}My Gallery{% endblock %} {% block
 content %}
-<div class="container mx-auto px-4 py-8">
+<div
+  class="container mx-auto px-4 py-8"
+  data-current-page="1"
+  data-per-page="12"
+>
+  <div class="container mx-auto px-4 py-8">
     <h1 class="text-3xl font-bold mb-6">My Gallery</h1>
 
     <!-- Pending Creations -->
@@ -55,7 +60,13 @@ content %}
             class="w-full h-48 object-cover"
           />
           <div class="p-4">
-          <p class="text-sm truncate">{{ image.prompt }}</p>
+            <p class="font-bold text-sm truncate">{{ image.prompt }}</p>
+            <p class="text-xs text-gray-400 mt-1">
+              Image ID: {{ image.id[:8] }}...
+            </p>
+            <p class="text-xs text-gray-500 mt-1">
+              {{ image.created_at | fromisoformat | humantime }}
+            </p>
           </div>
         </a>
         {% endfor %}
@@ -86,6 +97,13 @@ content %}
           href="{{ url_for('video_detail', video_id=video.id) }}"
           class="block bg-gray-800 rounded-lg shadow-lg overflow-hidden hover:shadow-2xl transition-shadow duration-300"
         >
+          {% if video.video_url %}
+          <img
+            src="{{ video.video_url }}#t=0.1"
+            alt="{{ video.prompt }}"
+            class="w-full h-48 object-cover"
+          />
+          {% else %}
           <div class="w-full h-48 bg-black flex items-center justify-center">
             <svg
               class="w-12 h-12 text-gray-500"
@@ -108,8 +126,15 @@ content %}
               ></path>
             </svg>
           </div>
+          {% endif %}
           <div class="p-4">
-          <p class="text-sm truncate">{{ video.prompt }}</p>
+            <p class="font-bold text-sm truncate">{{ video.prompt }}</p>
+            <p class="text-xs text-gray-400 mt-1">
+              Video ID: {{ video.id[:8] }}...
+            </p>
+            <p class="text-xs text-gray-500 mt-1">
+              {{ video.created_at | fromisoformat | humantime }}
+            </p>
           </div>
         </a>
         {% endfor %}
@@ -146,7 +171,13 @@ content %}
             class="w-full h-48 object-cover"
           />
           <div class="p-4">
-          <p class="text-sm truncate">{{ image.filename }}</p>
+            <p class="font-bold text-sm truncate">{{ image.filename }}</p>
+            <p class="text-xs text-gray-400 mt-1">
+              Upload ID: {{ image.id[:8] }}...
+            </p>
+            <p class="text-xs text-gray-500 mt-1">
+              {{ image.uploaded_at | fromisoformat | humantime }}
+            </p>
           </div>
         </a>
         {% endfor %}
@@ -155,5 +186,51 @@ content %}
       <p class="text-gray-400">You haven't uploaded any images.</p>
       {% endif %}
     </div>
+  </div>
+
+  <!-- Infinite Scroll Loading Indicator -->
+  <div id="loading-indicator" class="flex justify-center py-8 hidden">
+    <div class="spinner"></div>
+  </div>
+
+  {% block scripts %}
+  <script>
+    document.addEventListener("DOMContentLoaded", function () {
+      const galleryContainers = document.querySelectorAll(".grid[data-grid]");
+      const loadingIndicator = document.getElementById("loading-indicator");
+      const container = document.querySelector(".container[data-current-page]");
+      const currentPage = parseInt(container.dataset.currentPage);
+      const perPage = parseInt(container.dataset.perPage);
+      let isLoading = false;
+      let hasMore = true;
+
+      // Add data-grid attribute to all gallery grids
+      document
+        .querySelectorAll(".grid")
+        .forEach((grid) => grid.setAttribute("data-grid", ""));
+
+      // Infinite scroll handler
+      window.addEventListener("scroll", async function () {
+        if (!hasMore || isLoading) return;
+
+        const scrollPosition = window.innerHeight + window.scrollY;
+        const bottomThreshold = document.body.offsetHeight - 1000;
+
+        if (scrollPosition >= bottomThreshold) {
+          isLoading = true;
+          loadingIndicator.classList.remove("hidden");
+
+          // Simulate API call for next page
+          // In real implementation, replace with actual backend fetch
+          setTimeout(() => {
+            isLoading = false;
+            loadingIndicator.classList.add("hidden");
+            // Real app would fetch /generate/images?page=${currentPage +1}&limit=${perPage}
+            // and /generate/videos similarly
+          }, 1500);
+        }
+      });
+    });
+  </script>
+  {% endblock %}
 </div>
-{% endblock %}