Apply accordion to Samples xx and Class dropdown remove 2001-2051

Author: DavidQ

samples/index.css

@@ -62,3 +62,49 @@
   align-items: center;
   gap: 4px;
 }
+
+body.hub-page-samples .samples-phase-accordion {
+  margin: 0 0 12px;
+  border: 1px solid var(--line, rgba(221, 214, 254, 0.26));
+  border-radius: 12px;
+  background: linear-gradient(180deg, var(--panel, rgba(76, 29, 149, 0.88)) 0%, var(--panel2, rgba(49, 17, 102, 0.94)) 100%);
+  overflow: hidden;
+  border-bottom: 1px solid var(--line, rgba(221, 214, 254, 0.26));
+  box-shadow: var(--theme-shadow);
+}
+
+body.hub-page-samples .samples-phase-accordion > .is-collapsible__summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 12px 14px;
+  font-size: 1.35rem;
+  background: rgba(43, 16, 91, 0.78);
+  position: static;
+  top: auto;
+  left: auto;
+  z-index: auto;
+  color: var(--text, #f7f4ff);
+}
+
+body.hub-page-samples .samples-phase-accordion > .is-collapsible__summary::before {
+  font-size: calc(2em + 3px);
+  margin-right: 6px;
+  color: var(--text, #f7f4ff);
+}
+
+body.hub-page-samples .samples-phase-accordion[open] > .is-collapsible__summary {
+  position: static;
+}
+
+.samples-phase-accordion__count {
+  color: var(--muted, #e9ddff);
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.samples-phase-accordion__content {
+  padding: 12px;
+  background: transparent;
+}

samples/index.html

@@ -66,12 +66,9 @@ <h2>Filter Samples</h2>
       </div>
       <p id="samples-phase-filter-status" aria-live="polite"></p>
     </section>
-
     <section class="content-section">
-      <h2>All Phases and Samples</h2>
       <div id="samples-phase-list"></div>
     </section>
-
     <div class="footer-note">
       Open sample pages through a local web server for stable module and asset loading.
     </div>

samples/index.render.js

@@ -54,6 +54,14 @@ function buildClassTokens(classValues, engineClassesUsed) {
   const classEntries = asArray(classValues).length > 0 ? asArray(classValues) : asArray(engineClassesUsed);
   const deduped = [...new Set(classEntries.map((entry) => normalize(entry)).filter(Boolean))];
   return deduped
+    .filter((entry) => {
+      const phase20SampleMatch = entry.match(/^samples\/phase-20\/(\d{4})$/i);
+      if (!phase20SampleMatch) {
+        return true;
+      }
+      const sampleNumber = Number(phase20SampleMatch[1]);
+      return !Number.isInteger(sampleNumber) || sampleNumber < 2001 || sampleNumber > 2051;
+    })
     .map((entry) => {
       const name = entry.split("/").at(-1) || entry;
       return { value: entry, label: name };
@@ -240,16 +248,30 @@ function renderPinnedList(container, rows) {
 function renderPhaseSections(container, phaseGroups) {
   container.innerHTML = "";
   for (const phaseGroup of phaseGroups) {
-    const section = document.createElement("section");
-    section.className = "content-section";
+    const section = document.createElement("details");
+    section.className = "is-collapsible samples-phase-accordion";
     section.dataset.phase = phaseGroup.phase;
-    section.innerHTML = `<h2>${escapeHtml(phaseGroup.title)}</h2><p>${escapeHtml(phaseGroup.description)}</p>`;
+    section.open = true;
+
+    const summary = document.createElement("summary");
+    summary.className = "is-collapsible__summary";
+    summary.innerHTML = `
+      <span class="samples-phase-accordion__title">${escapeHtml(phaseGroup.title)}</span>
+      <span class="samples-phase-accordion__count">${phaseGroup.samples.length} sample${phaseGroup.samples.length === 1 ? "" : "s"}</span>
+    `;
+
+    const content = document.createElement("div");
+    content.className = "is-collapsible__content samples-phase-accordion__content";
+    content.innerHTML = `<p>${escapeHtml(phaseGroup.description)}</p>`;
+
     const grid = document.createElement("div");
     grid.className = "card-grid";
     for (const sample of phaseGroup.samples) {
       grid.appendChild(buildSampleCard(sample));
     }
-    section.appendChild(grid);
+    content.appendChild(grid);
+    section.appendChild(summary);
+    section.appendChild(content);
     container.appendChild(section);
   }
 }