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");

public/index.html

@@ -397,47 +397,25 @@
     <div class="drawer-body">
       <!-- TAB 1: DETAILS, NOTES, CHECKLIST, PROS/CONS, RATINGS -->
       <div id="drawer-tab-details" class="drawer-tab-panel active">
-        <div class="field-group">
-          <label for="drawer-pitch-input">Elevator Pitch (One-sentence essence)</label>
-          <input type="text" id="drawer-pitch-input" class="text-input" placeholder="What makes this idea compelling in one sentence?" />
-        </div>
+        <!-- Main Spark Cover Thumbnail & Elevator Pitch Hero -->
+        <div class="spark-main-hero">
+          <div id="drawer-main-thumb-box" class="spark-main-thumb-box"></div>
+          <div class="spark-main-pitch-col">
+            <div class="field-group">
+              <label for="drawer-pitch-input">Elevator Pitch (One-sentence essence)</label>
+              <input type="text" id="drawer-pitch-input" class="text-input" placeholder="What makes this idea compelling in one sentence?" />
+            </div>
 
-        <!-- Prioritization Sliders -->
-        <div class="ratings-card">
-          <div class="rating-control">
-            <label for="slider-excitement">🔥 Excitement: <strong id="val-excitement">3</strong>/5</label>
-            <input type="range" id="slider-excitement" min="1" max="5" step="1" value="3" />
+            <!-- Markdown Notes -->
+            <div class="field-group">
+              <div class="field-header-row">
+                <label for="drawer-notes-input">Specs, Brainstorm & Markdown Notes</label>
+                <button type="button" id="btn-toggle-md-preview" class="btn btn-ghost btn-xs">👁️ Toggle Preview</button>
+              </div>
+              <textarea id="drawer-notes-input" rows="6" class="textarea-input" placeholder="Write specs, architecture notes, concept details, or markdown lists..."></textarea>
+              <div id="drawer-notes-preview" class="markdown-preview hidden"></div>
+            </div>
           </div>
-          <div class="rating-control">
-            <label for="slider-impact">🎯 Impact: <strong id="val-impact">3</strong>/5</label>
-            <input type="range" id="slider-impact" min="1" max="5" step="1" value="3" />
-          </div>
-          <div class="rating-control">
-            <label for="slider-ease">⚡ Ease / Feasibility: <strong id="val-ease">3</strong>/5</label>
-            <input type="range" id="slider-ease" min="1" max="5" step="1" value="3" />
-          </div>
-        </div>
-
-        <!-- Tags -->
-        <div class="field-group">
-          <label>Tags</label>
-          <div class="tags-editor">
-            <div id="drawer-tags-list" class="tags-list"></div>
-            <form id="drawer-add-tag-form" class="inline-add-form">
-              <input type="text" id="drawer-new-tag-input" class="text-input input-sm" placeholder="Add #tag..." />
-              <button type="submit" class="btn btn-ghost btn-sm">+ Add</button>
-            </form>
-          </div>
-        </div>
-
-        <!-- Markdown Notes -->
-        <div class="field-group">
-          <div class="field-header-row">
-            <label for="drawer-notes-input">Specs, Brainstorm & Markdown Notes</label>
-            <button type="button" id="btn-toggle-md-preview" class="btn btn-ghost btn-xs">👁️ Toggle Preview</button>
-          </div>
-          <textarea id="drawer-notes-input" rows="6" class="textarea-input" placeholder="Write specs, fabric/ink colors, architecture notes, or markdown lists..."></textarea>
-          <div id="drawer-notes-preview" class="markdown-preview hidden"></div>
         </div>
 
         <!-- Action Checklist -->
@@ -473,17 +451,6 @@
           </div>
         </div>
 
-        <!-- Reference Links -->
-        <div class="field-group">
-          <label>🔗 Reference Links & Inspiration</label>
-          <div id="drawer-links-list" class="links-list"></div>
-          <form id="drawer-add-link-form" class="inline-add-form">
-            <input type="text" id="drawer-link-title" class="text-input input-sm" placeholder="Label (e.g. Blank Shirt Spec)" />
-            <input type="url" id="drawer-link-url" class="text-input input-sm" placeholder="https://..." />
-            <button type="submit" class="btn btn-ghost btn-sm">+ Add Link</button>
-          </form>
-        </div>
-
         <!-- External Attachments: Clipped Notes, Screenshots & Reference Images -->
         <div class="field-group">
           <div class="field-header-row">
@@ -510,7 +477,7 @@
             </div>
 
             <div class="form-row-2">
-              <input type="text" id="drawer-attach-title" class="text-input input-sm" placeholder="Title / Caption (e.g. Vintage Ski Patch Ref)" />
+              <input type="text" id="drawer-attach-title" class="text-input input-sm" placeholder="Title / Caption (e.g. Concept Sketch Ref)" />
               <input type="url" id="drawer-attach-url" class="text-input input-sm" placeholder="External Image URL or Source Link (https://...)" />
             </div>
             <textarea id="drawer-attach-text" rows="2" class="textarea-input" placeholder="Paste external note, quote, spec snippet, or commentary..."></textarea>
@@ -533,6 +500,48 @@
 
           <div id="drawer-attachments-list" class="attachments-grid"></div>
         </div>
+
+        <!-- Reference Links -->
+        <div class="field-group">
+          <label>🔗 Reference Links & Inspiration</label>
+          <div id="drawer-links-list" class="links-list"></div>
+          <form id="drawer-add-link-form" class="inline-add-form">
+            <input type="text" id="drawer-link-title" class="text-input input-sm" placeholder="Label (e.g. Spec Doc)" />
+            <input type="url" id="drawer-link-url" class="text-input input-sm" placeholder="https://..." />
+            <button type="submit" class="btn btn-ghost btn-sm">+ Add Link</button>
+          </form>
+        </div>
+
+        <!-- Tags (Moved down the page) -->
+        <div class="field-group">
+          <label>Tags</label>
+          <div class="tags-editor">
+            <div id="drawer-tags-list" class="tags-list"></div>
+            <form id="drawer-add-tag-form" class="inline-add-form">
+              <input type="text" id="drawer-new-tag-input" class="text-input input-sm" placeholder="Add #tag..." />
+              <button type="submit" class="btn btn-ghost btn-sm">+ Add</button>
+            </form>
+          </div>
+        </div>
+
+        <!-- Prioritization Sliders (Moved down the page) -->
+        <div class="field-group">
+          <label>Prioritization Ratings</label>
+          <div class="ratings-card">
+            <div class="rating-control">
+              <label for="slider-excitement">🔥 Excitement: <strong id="val-excitement">3</strong>/5</label>
+              <input type="range" id="slider-excitement" min="1" max="5" step="1" value="3" />
+            </div>
+            <div class="rating-control">
+              <label for="slider-impact">🎯 Impact: <strong id="val-impact">3</strong>/5</label>
+              <input type="range" id="slider-impact" min="1" max="5" step="1" value="3" />
+            </div>
+            <div class="rating-control">
+              <label for="slider-ease">⚡ Ease / Feasibility: <strong id="val-ease">3</strong>/5</label>
+              <input type="range" id="slider-ease" min="1" max="5" step="1" value="3" />
+            </div>
+          </div>
+        </div>
       </div>
 
       <!-- TAB 2: IMAGE MOCKUP STUDIO -->

public/styles.css

@@ -995,6 +995,89 @@ body {
   gap: 1.15rem;
 }
 
+.spark-main-hero {
+  display: grid;
+  grid-template-columns: 240px 1fr;
+  gap: 1.15rem;
+  align-items: start;
+}
+
+@media (max-width: 720px) {
+  .spark-main-hero {
+    grid-template-columns: 1fr;
+  }
+}
+
+.spark-main-pitch-col {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  min-width: 0;
+}
+
+.spark-main-thumb-card {
+  background: var(--bg-elevated);
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius-md);
+  padding: 0.6rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.spark-main-thumb-empty {
+  min-height: 210px;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  border-style: dashed;
+}
+
+.spark-thumb-placeholder-icon {
+  font-size: 2rem;
+  opacity: 0.7;
+}
+
+.spark-main-thumb-img {
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  object-fit: cover;
+  border-radius: var(--radius-sm);
+  background: #10131b;
+  cursor: zoom-in;
+  border: 1px solid var(--border-color);
+}
+
+.spark-main-thumb-strip {
+  display: flex;
+  gap: 0.35rem;
+  overflow-x: auto;
+  padding-bottom: 0.15rem;
+}
+
+.spark-mini-thumb {
+  width: 38px;
+  height: 38px;
+  object-fit: cover;
+  border-radius: 4px;
+  border: 2px solid transparent;
+  cursor: pointer;
+  opacity: 0.7;
+  transition: opacity 0.15s ease, border-color 0.15s ease;
+}
+
+.spark-mini-thumb:hover,
+.spark-mini-thumb.active {
+  opacity: 1;
+  border-color: var(--accent-primary);
+}
+
+.spark-main-thumb-actions {
+  display: flex;
+  gap: 0.35rem;
+  justify-content: space-between;
+}
+
 .field-group {
   display: flex;
   flex-direction: column;