collapse all design-page panels by default — page lands clean, click to expand each section

c7ca41e360bc702eab24e830c3067fc0822180b6 · 2026-05-25 00:12:11 -0700 · steve
Files touched

M server.js
Diff

commit c7ca41e360bc702eab24e830c3067fc0822180b6
Author: steve <steve@designerwallcoverings.com>
Date:   Mon May 25 00:12:11 2026 -0700

    collapse all design-page panels by default — page lands clean, click to expand each section
---
 server.js | 41 +++++++++++++++++++++++++++++++++--------
 1 file changed, 33 insertions(+), 8 deletions(-)

diff --git a/server.js b/server.js
index 4560cb0..4bee96d 100644
--- a/server.js
+++ b/server.js
@@ -9563,10 +9563,12 @@ ${htmlHeader('/designs')}
 
         <!-- ── COLOR STORY — palette dots + Sherwin-Williams + Dunn-Edwards rows
              Drag any dot onto a pattern editor color slot to recolor it. -->
+        <details class="collapse-pane">
+          <summary>Color story <span class="cp-sub">palette dots + Sherwin-Williams + Dunn-Edwards</span></summary>
+          <div class="collapse-body">
         <section id="color-story" data-design-id="${design.id}" data-palette="${(design.dominant_hex || '').replace(/"/g,'&quot;')}"
-                 style="margin:18px 0 6px;padding:14px 16px;background:var(--card-bg,#f4f0e8);border:1px solid var(--line,#d8d0c0);border-radius:8px;">
+                 style="margin:0;padding:0;background:transparent;border:0;">
           <div style="display:flex;align-items:center;gap:12px;margin-bottom:10px;">
-            <strong style="font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint,#7a6e5a)">Color story</strong>
             <span style="font-size:10.5px;color:var(--ink-faint,#7a6e5a);letter-spacing:.04em;">drag any dot onto a pattern color slot to recolor it</span>
           </div>
           <div id="cs-dots" class="cs-row" data-vendor="raw"
@@ -9576,6 +9578,8 @@ ${htmlHeader('/designs')}
           <div id="cs-de" class="cs-row" data-vendor="de"
                style="display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:6px;min-height:24px;"></div>
         </section>
+          </div>
+        </details>
         <style>
           .cs-dot { display:inline-flex; align-items:center; gap:6px; cursor:grab; user-select:none; }
           .cs-dot[draggable=true]:active { cursor:grabbing; }
@@ -11081,6 +11085,9 @@ ${htmlHeader('/designs')}
           return `<div class="paint-stripe-cell" style="background:${p.hex};flex:0 0 ${w}%" title="${p.hex} · ${p.pct || ''}%"></div>`;
         }).join('');
         return `
+      <details class="collapse-pane">
+        <summary>Full palette <span class="cp-sub">${pal.length} colors · paint chips + coverage stripe</span></summary>
+        <div class="collapse-body">
       <div class="full-palette">
         <div class="palette-header">
           <span class="palette-label">Palette · ${pal.length} colors · click a chip to copy hex</span>
@@ -11089,6 +11096,8 @@ ${htmlHeader('/designs')}
         <div class="paint-stripe" title="Paint stripe — colors at their actual coverage in the design">${stripe}</div>
         <div class="paint-stripe-caption">Paint stripe — each color at its actual coverage in the design</div>
       </div>
+        </div>
+      </details>
       <style>
         .full-palette { margin:14px 0 4px; }
         .palette-header { margin-bottom:8px; }
@@ -11440,7 +11449,10 @@ ${htmlHeader('/designs')}
       </div>
 
       <!-- Trade / professional functions row -->
-      <div class="pro-tools" role="group" aria-label="Trade tools" style="display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 4px;padding-top:14px;border-top:1px dashed var(--line,#ddd)">
+      <details class="collapse-pane">
+        <summary>Trade tools <span class="cp-sub">tear sheet, email, compare, save, sample basket</span></summary>
+        <div class="collapse-body">
+      <div class="pro-tools" role="group" aria-label="Trade tools" style="display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 4px">
         <a href="/design/${design.id}/tearsheet" target="_blank" rel="noopener noreferrer" class="btn-outline" style="font:12px var(--sans);padding:7px 14px;text-decoration:none;display:inline-flex;align-items:center;gap:6px" title="Open print-ready tear sheet (1-page PDF)">
           <span aria-hidden="true">⎙</span> Tear Sheet (PDF)
         </a>
@@ -11466,6 +11478,8 @@ ${htmlHeader('/designs')}
           View Basket (<span id="cta-basket-count">0</span>)
         </a>
       </div>
+        </div>
+      </details>
       <script>
       (function(){
         var addBtn = document.getElementById('cta-add-compare');
@@ -11734,6 +11748,8 @@ ${htmlHeader('/designs')}
           <div id="iso-grid-pt-detail" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px"></div>
         </div>
       </div>
+        </div>
+      </details>
       <script>
       (function(){
         var ID = ${design.id};
@@ -11820,8 +11836,10 @@ ${htmlHeader('/designs')}
       </script>
 
       <!-- Admin: rate this design (RLHF-lite for the generator) -->
-      <div id="rate-block" style="margin-top:28px;padding:18px;border:1px solid var(--line);border-radius:10px;background:rgba(0,0,0,.02)">
-        <h3 style="font-family:var(--serif);font-weight:300;font-size:18px;margin:0 0 4px">Rate this design</h3>
+      <details class="collapse-pane">
+        <summary>Rate this design <span class="cp-sub">admin · color/style/composition · feeds next retry</span></summary>
+        <div class="collapse-body">
+      <div id="rate-block">
         <p style="font-size:11px;color:var(--ink-faint);margin:0 0 14px;letter-spacing:.04em">Admin-only · color · style · composition · 1-10 · feeds the next retry</p>
         <div class="rate-rows" style="display:grid;grid-template-columns:120px 1fr 36px;gap:10px;align-items:center;font-size:13px">
           <label for="r-color">Color</label>
@@ -11851,6 +11869,8 @@ ${htmlHeader('/designs')}
           <div id="rate-history-list" style="margin-top:8px;font-size:12px;color:var(--ink-soft)">Loading…</div>
         </details>
       </div>
+        </div>
+      </details>
       <script>
       (function(){
         var id = ${design.id};
@@ -11897,7 +11917,10 @@ ${htmlHeader('/designs')}
 
       ${roomCtx.length ? `
       <!-- Room mockup with context toggle (residential / commercial / hospitality) -->
-      <div class="room-toggle" style="margin:22px 0 4px">
+      <details class="collapse-pane">
+        <summary>See in a room <span class="cp-sub">residential / commercial / hospitality</span></summary>
+        <div class="collapse-body">
+      <div class="room-toggle" style="margin:8px 0 4px">
         <div class="room-pills" role="tablist" style="display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap">
           ${roomCtx.map((c, i) => `
             <button type="button" role="tab"
@@ -11943,12 +11966,14 @@ ${htmlHeader('/designs')}
         })();
         </script>
       </div>
+        </div>
+      </details>
       ` : ''}
 
       <!-- Tools — accordion-grouped, 3-tier risk colorization -->
       <div class="tool-group" style="margin-top:18px;">
-        <!-- Visualize (open by default for both admin + customer — "See in a Room" is a public feature) -->
-        <details class="admin-accordion" open>
+        <!-- Visualize (default collapsed — was previously auto-open which made the page busy) -->
+        <details class="admin-accordion">
           <summary>Visualize <span class="acc-badge">see this design rendered in a room</span></summary>
           <div class="acc-body" style="display:flex;flex-wrap:wrap;gap:10px;align-items:center">
             <button type="button" class="btn-outline" id="btn-room" data-id="${design.id}">See in a Room</button>
← 091fbfa Unified /api/bg-textures — title-keyword classification + de · back to Wallco Ai · feat(design page): 2-col admin toolbox + edges-agent button 85c30fb →