From 24e709e0384727d981c3f8b09af0f83b8cfb4937 Mon Sep 17 00:00:00 2001
From: nmemmert <67961292+nmemmert@users.noreply.github.com>
Date: Mon, 27 Jul 2026 12:48:51 -0400
Subject: [PATCH] Make list/deck group sections collapsible with prominent
 headers
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Group headers now use a solid tan background, bold uppercase text, and a
▼/▶ arrow indicator so collapsible sections are visually obvious.
Uses native <details>/<summary> elements; ungrouped items show inline
when no named groups exist.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 public/admin.js   |  6 ++++--
 public/styles.css | 25 +++++++++++++++++++------
 2 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/public/admin.js b/public/admin.js
index f7a7c14..3847080 100644
--- a/public/admin.js
+++ b/public/admin.js
@@ -1324,10 +1324,12 @@ function renderGroupSections(groups, renderItem) {
   const ungrouped = groups[''] || [];
   let html = '';
   for (const g of named) {
-    html += `<div class="list-group"><div class="list-group-header">${esc(g)}</div>${groups[g].map(renderItem).join('')}</div>`;
+    html += `<details class="list-group" open><summary class="list-group-header">${esc(g)}</summary>${groups[g].map(renderItem).join('')}</details>`;
   }
   if (ungrouped.length) {
-    html += `<div class="list-group">${named.length ? '<div class="list-group-header">Ungrouped</div>' : ''}${ungrouped.map(renderItem).join('')}</div>`;
+    html += named.length
+      ? `<details class="list-group" open><summary class="list-group-header">Ungrouped</summary>${ungrouped.map(renderItem).join('')}</details>`
+      : ungrouped.map(renderItem).join('');
   }
   return html || '<p class="hint">None yet.</p>';
 }
diff --git a/public/styles.css b/public/styles.css
index 6ad7c58..3490b8c 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -355,14 +355,27 @@ table.results tr:nth-child(even) td { background: #faf7ee; }
 .archived-badge { background: #e8e2d0; color: var(--muted); font-size: 0.75rem; padding: 0.2rem 0.5rem; border-radius: 999px; }
 
 /* ---------- list/deck groups ---------- */
-.list-group { margin-bottom: 0.75rem; }
+.list-group { margin-bottom: 1rem; }
 .list-group-header {
-  font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
-  letter-spacing: 0.06em; color: var(--muted);
-  padding: 0.5rem 0.25rem 0.2rem;
-  border-bottom: 1.5px solid #e8e2d0;
-  margin-bottom: 0.25rem;
+  display: flex; align-items: center; gap: 0.5rem;
+  font-size: 0.85rem; font-weight: 700; text-transform: uppercase;
+  letter-spacing: 0.07em; color: #5a5240;
+  background: #e8e2d0;
+  padding: 0.55rem 0.9rem;
+  border-radius: 8px;
+  margin-bottom: 0.4rem;
+  cursor: pointer; user-select: none; list-style: none;
+  transition: background 0.15s;
 }
+.list-group-header:hover { background: #ddd7c6; }
+.list-group-header::-webkit-details-marker { display: none; }
+.list-group-header::before {
+  content: '▼';
+  font-size: 0.75rem;
+  transition: transform 0.2s;
+  flex-shrink: 0;
+}
+.list-group:not([open]) .list-group-header::before { transform: rotate(-90deg); }
 
 /* ---------- roster chips ---------- */
 #cd-roster { display: flex; flex-wrap: wrap; gap: 0.5rem; }