From 5c2b5baec2d1268249b6070d306c29986d2ac082 Mon Sep 17 00:00:00 2001
From: nmemmert <67961292+nmemmert@users.noreply.github.com>
Date: Mon, 27 Jul 2026 13:19:10 -0400
Subject: [PATCH] Fix toggle button styling and collapse groups by default

Toggle buttons now match the rest of the admin UI (same font, padding,
border-radius). Both start secondary/gray; the active one turns blue.
List and deck group sections are collapsed by default instead of open.

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

diff --git a/public/admin.html b/public/admin.html
index df4db3b..7c554cf 100644
--- a/public/admin.html
+++ b/public/admin.html
@@ -306,7 +306,7 @@
           </div>
           <div class="panel-col">
             <div class="toggle-btns">
-              <button type="button" id="list-new-btn">+ New list</button>
+              <button type="button" id="list-new-btn" class="secondary">+ New list</button>
               <button type="button" id="list-bulk-btn" class="secondary">⬆ Bulk import</button>
             </div>
             <div id="list-editor-section" hidden>
@@ -351,7 +351,7 @@
           </div>
           <div class="panel-col">
             <div class="toggle-btns">
-              <button type="button" id="deck-new-btn">+ New deck</button>
+              <button type="button" id="deck-new-btn" class="secondary">+ New deck</button>
               <button type="button" id="deck-bulk-btn" class="secondary">⬆ Bulk import</button>
             </div>
             <div id="deck-editor-section" hidden>
diff --git a/public/admin.js b/public/admin.js
index 5bde470..013f5eb 100644
--- a/public/admin.js
+++ b/public/admin.js
@@ -1324,11 +1324,11 @@ function renderGroupSections(groups, renderItem) {
   const ungrouped = groups[''] || [];
   let html = '';
   for (const g of named) {
-    html += `<details class="list-group" open><summary class="list-group-header">${esc(g)}</summary>${groups[g].map(renderItem).join('')}</details>`;
+    html += `<details class="list-group"><summary class="list-group-header">${esc(g)}</summary>${groups[g].map(renderItem).join('')}</details>`;
   }
   if (ungrouped.length) {
     html += named.length
-      ? `<details class="list-group" open><summary class="list-group-header">Ungrouped</summary>${ungrouped.map(renderItem).join('')}</details>`
+      ? `<details class="list-group"><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 72d5599..bf56a20 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -198,7 +198,7 @@ body {
   font-size: 1.5rem; text-align: center; width: 180px; padding: 0.5rem;
   border: 2px solid var(--accent); border-radius: 10px; margin-right: 0.5rem;
 }
-#pin-form button, .inline-form button, #list-form button, .row-actions button {
+#pin-form button, .inline-form button, #list-form button, .row-actions button, .toggle-btns button {
   font-size: 1rem; font-family: inherit; font-weight: 700;
   background: var(--accent); color: #fff; border: none;
   border-radius: 10px; padding: 0.6rem 1.2rem; cursor: pointer;
@@ -340,7 +340,7 @@ table.results tr:nth-child(even) td { background: #faf7ee; }
 
 /* ---------- toggle button rows (new/bulk import) ---------- */
 .toggle-btns { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
-.toggle-btns button.active { background: var(--accent); color: #fff; }
+.toggle-btns button.active { background: var(--accent) !important; color: #fff !important; }
 .section-form-title { font-size: 1rem; font-weight: 700; margin: 0 0 0; color: var(--ink); }
 
 /* 2-column layout for wide screens */