Only show T-Shirt Compositor and garment controls when product is a T-Shirt

public/app.js

@@ -780,13 +780,81 @@ function renderTriageStage() {
   });
 }
 
-// --- SLIDE-OVER RICH WORKBENCH & NANO BANANA STUDIO ---
+// --- SLIDE-OVER RICH WORKBENCH & IMAGE MOCKUP STUDIO ---
+function detectDefaultProductTemplate(idea) {
+  if (!idea) return "app-ui";
+  const textBlob = [
+    idea.title || "",
+    idea.elevator_pitch || "",
+    ...(idea.tags || [])
+  ].join(" ");
+
+  if (/\b(left[- ]chest|pocket\s+tee|pocket\s+emblem)\b/i.test(textBlob)) {
+    return "tshirt-left-chest";
+  }
+  if (/\b(t-?shirt|tee\b|shirt|apparel|crewneck|garment|hoodie|merch|wearable)\b/i.test(textBlob)) {
+    return "tshirt-front";
+  }
+  const latestMockupTemplate = idea.mockups?.[0]?.template;
+  if (latestMockupTemplate === "tshirt-front" || latestMockupTemplate === "tshirt-left-chest") {
+    return latestMockupTemplate;
+  }
+  if (/\b(sticker|decal|patch|badge)\b/i.test(textBlob) || latestMockupTemplate === "sticker") {
+    return "sticker";
+  }
+  if (/\b(poster|print|wall\s*art|framed)\b/i.test(textBlob) || latestMockupTemplate === "poster") {
+    return "poster";
+  }
+  if (idea.category === "creative") {
+    return "isolated-graphic";
+  }
+  return "app-ui";
+}
+
+function isCurrentProductTShirt() {
+  const templateSel = document.getElementById("nb-template-select");
+  const templateVal = templateSel ? templateSel.value : detectDefaultProductTemplate(state.activeIdea);
+  return templateVal === "tshirt-front" || templateVal === "tshirt-left-chest";
+}
+
+function syncTShirtGeneratorVisibility() {
+  const isTShirt = isCurrentProductTShirt();
+  const tshirtCard = document.getElementById("tshirt-compositor-card");
+  const garmentColorGroup = document.getElementById("nb-garment-color-group");
+
+  if (tshirtCard) {
+    tshirtCard.classList.toggle("hidden", !isTShirt);
+  }
+  if (garmentColorGroup) {
+    garmentColorGroup.classList.toggle("hidden", !isTShirt);
+  }
+
+  if (isTShirt) {
+    const surfaceSel = document.getElementById("comp-surface-select");
+    if (surfaceSel) surfaceSel.value = "tshirt";
+    const templateVal = document.getElementById("nb-template-select")?.value;
+    const placementSel = document.getElementById("comp-placement-select");
+    if (placementSel && templateVal === "tshirt-left-chest") {
+      placementSel.value = "left-chest";
+    } else if (placementSel && templateVal === "tshirt-front" && placementSel.value === "left-chest") {
+      placementSel.value = "center-chest";
+    }
+    renderCompositorCanvas();
+  }
+}
+
 async function openIdeaDrawer(id, initialTab = "details") {
   const data = await apiFetch(`/api/ideas/${id}`);
   state.activeIdeaId = id;
   state.activeIdea = data.idea;
   state.nbEditParentMockup = null;
 
+  const templateSel = document.getElementById("nb-template-select");
+  if (templateSel) {
+    templateSel.value = detectDefaultProductTemplate(state.activeIdea);
+  }
+  syncTShirtGeneratorVisibility();
+
   document.getElementById("drawer-backdrop").classList.remove("hidden");
   document.getElementById("idea-drawer").classList.remove("hidden");
 
@@ -796,13 +864,15 @@ async function openIdeaDrawer(id, initialTab = "details") {
   // Pre-populate compositor text from idea title
   const topInput = document.getElementById("comp-top-text");
   const bottomInput = document.getElementById("comp-bottom-text");
-  if (topInput && !topInput.value) {
+  if (topInput) {
     topInput.value = state.activeIdea.title.slice(0, 26).toUpperCase();
   }
-  if (bottomInput && !bottomInput.value) {
+  if (bottomInput) {
     bottomInput.value = state.activeIdea.tags[0] ? `#${state.activeIdea.tags[0].toUpperCase()}` : "SPARKVAULT STUDIO";
   }
-  renderCompositorCanvas();
+  if (isCurrentProductTShirt()) {
+    renderCompositorCanvas();
+  }
 
   if (initialTab === "whack" && !state.drawerWhackCard) {
     await drawCardForActiveIdea();
@@ -854,9 +924,13 @@ async function requestNameSuggestionsForActiveIdea() {
               <button type="button" class="btn btn-primary btn-xs btn-use-suggested-title" data-name="${escapeHtml(s.name)}" data-tagline="${escapeHtml(s.tagline || "")}">
                 ✓ Use Title
               </button>
-              <button type="button" class="btn btn-ghost btn-xs btn-use-suggested-tee" data-name="${escapeHtml(s.name)}" data-tagline="${escapeHtml(s.tagline || "")}">
-                👕 Send to Tee Canvas
-              </button>
+              ${
+                isCurrentProductTShirt()
+                  ? `<button type="button" class="btn btn-ghost btn-xs btn-use-suggested-tee" data-name="${escapeHtml(s.name)}" data-tagline="${escapeHtml(s.tagline || "")}">
+                      👕 Send to Tee Canvas
+                    </button>`
+                  : ""
+              }
             </div>
           </div>
         `
@@ -1064,9 +1138,13 @@ function renderDrawerAttachments(idea) {
                   <button type="button" class="btn btn-primary btn-xs btn-att-to-mockup" data-att-id="${escapeHtml(att.id)}">
                     🎨 Send to Mockup Studio
                   </button>
-                  <button type="button" class="btn btn-ghost btn-xs btn-att-to-canvas" data-att-url="${escapeHtml(att.imageUrl)}">
-                    👕 Tee Canvas
-                  </button>
+                  ${
+                    isCurrentProductTShirt()
+                      ? `<button type="button" class="btn btn-ghost btn-xs btn-att-to-canvas" data-att-url="${escapeHtml(att.imageUrl)}">
+                          👕 Tee Canvas
+                        </button>`
+                      : ""
+                  }
                   ${
                     !isCover
                       ? `<button type="button" class="btn btn-ghost btn-xs btn-att-cover" data-att-id="${escapeHtml(att.id)}">⭐ Cover</button>`
@@ -1177,7 +1255,7 @@ function renderDrawerMockupGallery(idea) {
   if (!container) return;
 
   if (!idea.mockups || idea.mockups.length === 0) {
-    container.innerHTML = `<p class="muted-label">No mockups saved for this idea yet. Generate one in the Image Mockup Studio or save a layout from the T-Shirt Compositor!</p>`;
+    container.innerHTML = `<p class="muted-label">No mockups saved for this idea yet. Generate one in the Image Mockup Studio!</p>`;
     return;
   }
 
@@ -1196,9 +1274,13 @@ function renderDrawerMockupGallery(idea) {
             <button type="button" class="btn btn-primary btn-xs btn-mk-refine" data-mk-id="${escapeHtml(m.id)}">
               ✨ Refine Mockup
             </button>
-            <button type="button" class="btn btn-ghost btn-xs btn-mk-load-canvas" data-mk-url="${escapeHtml(m.imageUrl)}">
-              👕 Place on Tee Canvas
-            </button>
+            ${
+              isCurrentProductTShirt()
+                ? `<button type="button" class="btn btn-ghost btn-xs btn-mk-load-canvas" data-mk-url="${escapeHtml(m.imageUrl)}">
+                    👕 Place on Tee Canvas
+                  </button>`
+                : ""
+            }
             ${
               !isCover
                 ? `<button type="button" class="btn btn-ghost btn-xs btn-mk-set-cover" data-mk-id="${escapeHtml(m.id)}">⭐ Set Cover</button>`
@@ -2109,6 +2191,14 @@ function bindGlobalEvents() {
     document.getElementById("nb-edit-instruction-input").value = "";
   });
 
+  document.getElementById("nb-template-select")?.addEventListener("change", () => {
+    syncTShirtGeneratorVisibility();
+    if (state.activeIdea) {
+      renderDrawerMockupGallery(state.activeIdea);
+      renderDrawerAttachments(state.activeIdea);
+    }
+  });
+
   document.getElementById("nb-generator-select")?.addEventListener("change", async (e) => {
     const chosenModel = e.target.value;
     state.settings.nanoBananaModel = chosenModel;