images that have been removed/added in candidate or that are identical are now collapsed in <detail> containers

michaelchadwick · michaelchadwick · commit bcc3d7932d88 · 2026-01-26T16:19:04.000-08:00
diff --git a/templates/report.html b/templates/report.html
@@ -10,19 +10,24 @@
       gap: 1rem;
       margin: 1rem 0;
     }
-    
     .diff-images img {
       max-width: 30vw;
       height: auto;
     }
+    details {
+      margin-bottom: 1em;
+    }
+    summary {
+      cursor: pointer;
+      font-size: 1.17em;
+      font-weight: bold;
+    }
   </style>
 </head>
 <body>
   <main>
   <h1>Visual Diff Report</h1>
-  
   <p><strong>Status:</strong> <span aria-hidden="true">{{statusEmoji}}</span> {{statusText}}</p>
-  
   <h2>Summary</h2>
   <ul>
     <li><strong>Total Images:</strong> {{totalImages}}</li>
@@ -32,7 +37,7 @@ <h2>Summary</h2>
     <li><strong>Identical:</strong> {{identicalCount}}</li>
   </ul>
 
-{{#if withDifferences.length}}
+  {{#if withDifferences.length}}
   <h2>Images with Differences ({{withDifferences.length}})</h2>
   {{#each withDifferences}}
   <div>
@@ -49,36 +54,42 @@ <h3>{{name}}</h3>
     </div>
   </div>
   {{/each}}
-{{/if}}
+  {{/if}}
 
-{{#if hasRemovedOrAdded}}
+  {{#if hasRemovedOrAdded}}
   <h2>Missing or New Files</h2>
-  {{#if baselineOnly.length}}
-    <h3>Removed from Candidate ({{baselineOnly.length}})</h3>
-    <ul>
-      {{#each baselineOnly}}
-      <li>{{name}}</li>
-      {{/each}}
-    </ul>
+    {{#if baselineOnly.length}}
+    <details>
+      <summary>Removed from Candidate ({{baselineOnly.length}})</summary>
+      <ul>
+        {{#each baselineOnly}}
+        <li>{{name}}</li>
+        {{/each}}
+      </ul>
+    </details>
+    {{/if}}
+    {{#if candidateOnly.length}}
+    <details>
+      <summary>Added in Candidate ({{candidateOnly.length}})</summary>
+      <ul>
+        {{#each candidateOnly}}
+        <li>{{name}}</li>
+        {{/each}}
+      </ul>
+    </details>
+    {{/if}}
   {{/if}}
-  {{#if candidateOnly.length}}
-    <h3>Added in Candidate ({{candidateOnly.length}})</h3>
+
+  {{#if withoutDifferences.length}}
+  <details>
+    <summary>Identical Images ({{withoutDifferences.length}})</summary>
     <ul>
-      {{#each candidateOnly}}
+      {{#each withoutDifferences}}
       <li>{{name}}</li>
       {{/each}}
     </ul>
+  </details>
   {{/if}}
-{{/if}}
-
-{{#if withoutDifferences.length}}
-  <h2>Identical Images ({{withoutDifferences.length}})</h2>
-  <ul>
-    {{#each withoutDifferences}}
-    <li>{{name}}</li>
-    {{/each}}
-  </ul>
-{{/if}}
 
   <hr>
   <p><em>Generated by visual-differ</em></p>
