From 1384fae5e480c29138b0f63f7593316fee146c95 Mon Sep 17 00:00:00 2001
From: archeious <jeff@unbiasedgeek.com>
Date: Fri, 17 Apr 2026 17:46:39 -0600
Subject: [PATCH] fix(ui): condense add-entry to a compact disclosure trigger

Every section used to end with a wide horizontal add form (name
input, amount input, button, notes input spanning the row). It took
up more horizontal real estate than the entries themselves. Now the
form is wrapped in a <details class="add-entry"> whose summary is a
small tracked-caps link ("+ add fixed amount bills"). Click to
reveal the same form below; HTMX submission still resets and hides
on success.

Same treatment on the budget page sections and the month page
sections.

Refs #19

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/quartermaster/static/app.css              | 34 +++++++++++++++++++
 .../templates/partials/month_section.html     | 27 ++++++++-------
 .../templates/partials/section.html           | 27 ++++++++-------
 3 files changed, 64 insertions(+), 24 deletions(-)

diff --git a/src/quartermaster/static/app.css b/src/quartermaster/static/app.css
index a3cbf68..328bbfe 100644
--- a/src/quartermaster/static/app.css
+++ b/src/quartermaster/static/app.css
@@ -421,6 +421,40 @@ tr.add-row td {
   display: block;
 }
 
+/* Add-entry disclosure: collapsed trigger, expanded form */
+details.add-entry { margin: 0; }
+details.add-entry > summary {
+  list-style: none;
+  cursor: pointer;
+  user-select: none;
+  display: inline-block;
+  padding: 0.1rem 0.25rem;
+}
+details.add-entry > summary::-webkit-details-marker { display: none; }
+details.add-entry .add-trigger {
+  font-family: var(--sans);
+  font-size: 0.78rem;
+  font-weight: 500;
+  color: var(--muted);
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  border-bottom: 1px dashed transparent;
+  padding-bottom: 1px;
+  transition: color 0.12s ease, border-color 0.12s ease;
+}
+details.add-entry > summary:hover .add-trigger {
+  color: var(--ink);
+  border-bottom-color: var(--rule);
+}
+details.add-entry[open] > summary .add-trigger {
+  color: var(--ink);
+  border-bottom-color: var(--ink);
+}
+details.add-entry > .add-form,
+details.add-entry > .month-add-form {
+  margin-top: 0.45rem;
+}
+
 .entry-name {
   font-family: var(--sans);
   font-weight: 500;
diff --git a/src/quartermaster/templates/partials/month_section.html b/src/quartermaster/templates/partials/month_section.html
index 757ab49..4f1b3f0 100644
--- a/src/quartermaster/templates/partials/month_section.html
+++ b/src/quartermaster/templates/partials/month_section.html
@@ -203,18 +203,21 @@
     {% endfor %}
     {% if editable %}
       <div class="add-row">
-        <form
-          class="add-form month-add-form"
-          hx-post="/month/{{ month.year_month }}/sections/{{ section.section.value }}/entries"
-          hx-target="#section-{{ section.section.value }}"
-          hx-swap="outerHTML"
-          hx-on::after-request="if(event.detail.successful) this.reset()"
-        >
-          <input type="text" name="name" placeholder="Name" required>
-          <input type="number" name="planned" step="0.01" min="0" placeholder="Planned" required>
-          <button type="submit">Add</button>
-          <input class="notes-input add-notes" type="text" name="notes" placeholder="notes (optional)">
-        </form>
+        <details class="add-entry">
+          <summary><span class="add-trigger">+ add {{ section.label|lower }}</span></summary>
+          <form
+            class="add-form month-add-form"
+            hx-post="/month/{{ month.year_month }}/sections/{{ section.section.value }}/entries"
+            hx-target="#section-{{ section.section.value }}"
+            hx-swap="outerHTML"
+            hx-on::after-request="if(event.detail.successful) this.reset()"
+          >
+            <input type="text" name="name" placeholder="Name" required>
+            <input type="number" name="planned" step="0.01" min="0" placeholder="Planned" required>
+            <button type="submit">Add</button>
+            <input class="notes-input add-notes" type="text" name="notes" placeholder="notes (optional)">
+          </form>
+        </details>
       </div>
     {% endif %}
   </div>
diff --git a/src/quartermaster/templates/partials/section.html b/src/quartermaster/templates/partials/section.html
index f39fda4..1b45f7d 100644
--- a/src/quartermaster/templates/partials/section.html
+++ b/src/quartermaster/templates/partials/section.html
@@ -44,18 +44,21 @@
       {% endfor %}
       <tr class="add-row">
         <td colspan="4">
-          <form
-            class="add-form"
-            hx-post="/sections/{{ section.section.value }}/entries"
-            hx-target="#section-{{ section.section.value }}"
-            hx-swap="outerHTML"
-            hx-on::after-request="if(event.detail.successful) this.reset()"
-          >
-            <input type="text" name="name" placeholder="Name" required>
-            <input type="number" name="amount" step="0.01" min="0" placeholder="0.00" required>
-            <button type="submit">Add</button>
-            <input class="notes-input add-notes" type="text" name="notes" placeholder="notes (optional)">
-          </form>
+          <details class="add-entry">
+            <summary><span class="add-trigger">+ add {{ section.label|lower }}</span></summary>
+            <form
+              class="add-form"
+              hx-post="/sections/{{ section.section.value }}/entries"
+              hx-target="#section-{{ section.section.value }}"
+              hx-swap="outerHTML"
+              hx-on::after-request="if(event.detail.successful) this.reset()"
+            >
+              <input type="text" name="name" placeholder="Name" required>
+              <input type="number" name="amount" step="0.01" min="0" placeholder="0.00" required>
+              <button type="submit">Add</button>
+              <input class="notes-input add-notes" type="text" name="notes" placeholder="notes (optional)">
+            </form>
+          </details>
         </td>
       </tr>
     </tbody>