Add thumbnail image card to main Spark page and move sliders and tags to bottom

public/app.js

@@ -1085,6 +1085,9 @@ function renderDrawerContent() {
     });
   });
 
+  // Main Spark Thumbnail on Details Tab
+  renderDrawerMainThumbnail(idea);
+
   // Mockup Gallery
   renderDrawerMockupGallery(idea);
 
@@ -1095,6 +1098,88 @@ function renderDrawerContent() {
   renderDrawerWhackHistory(idea);
 }
 
+function renderDrawerMainThumbnail(idea) {
+  const box = document.getElementById("drawer-main-thumb-box");
+  if (!box || !idea) return;
+
+  const coverUrl = idea.cover_mockup_url || idea.mockups?.[0]?.imageUrl || "";
+  const mockups = idea.mockups || [];
+
+  if (coverUrl) {
+    box.innerHTML = `
+      <div class="spark-main-thumb-card">
+        <img
+          src="${escapeHtml(coverUrl)}"
+          alt="${escapeHtml(idea.title)}"
+          class="spark-main-thumb-img"
+          id="spark-main-cover-img"
+          title="Click to view full-size mockup"
+        />
+        ${
+          mockups.length > 1
+            ? `<div class="spark-main-thumb-strip">
+                ${mockups
+                  .slice(0, 5)
+                  .map(
+                    (m) => `
+                  <img
+                    src="${escapeHtml(m.imageUrl)}"
+                    alt="${escapeHtml(m.title)}"
+                    class="spark-mini-thumb ${m.imageUrl === coverUrl ? "active" : ""}"
+                    data-mk-id="${escapeHtml(m.id)}"
+                    data-mk-url="${escapeHtml(m.imageUrl)}"
+                    title="${escapeHtml(m.title)} (Click to set as cover)"
+                  />
+                `
+                  )
+                  .join("")}
+              </div>`
+            : ""
+        }
+        <div class="spark-main-thumb-actions">
+          <button type="button" class="btn btn-secondary btn-xs" id="btn-main-open-studio">
+            🖼️ Mockup Studio (${mockups.length})
+          </button>
+          <button type="button" class="btn btn-ghost btn-xs" id="btn-main-zoom-cover">
+            🔍 Zoom
+          </button>
+        </div>
+      </div>
+    `;
+
+    box.querySelector("#spark-main-cover-img")?.addEventListener("click", () => {
+      openImageLightbox(coverUrl, idea.title);
+    });
+    box.querySelector("#btn-main-zoom-cover")?.addEventListener("click", () => {
+      openImageLightbox(coverUrl, idea.title);
+    });
+    box.querySelector("#btn-main-open-studio")?.addEventListener("click", () => {
+      switchDrawerTab("mockup");
+    });
+    box.querySelectorAll(".spark-mini-thumb").forEach((thumb) => {
+      thumb.addEventListener("click", async () => {
+        await apiFetch(`/api/ideas/${idea.id}/mockups/${thumb.dataset.mkId}/cover`, {
+          method: "PATCH"
+        });
+        await loadIdeas();
+      });
+    });
+  } else {
+    box.innerHTML = `
+      <div class="spark-main-thumb-card spark-main-thumb-empty">
+        <div class="spark-thumb-placeholder-icon">🖼️</div>
+        <span class="muted-label">No mockup image yet</span>
+        <button type="button" class="btn btn-secondary btn-xs" id="btn-main-generate-first-mockup">
+          ✨ Create in Mockup Studio
+        </button>
+      </div>
+    `;
+    box.querySelector("#btn-main-generate-first-mockup")?.addEventListener("click", () => {
+      switchDrawerTab("mockup");
+    });
+  }
+}
+
 function renderDrawerAttachments(idea) {
   const countEl = document.getElementById("drawer-attachments-count");
   const listEl = document.getElementById("drawer-attachments-list");