From 11662c0ea8ba0e20947b016c8d7c2f6d2b8251a8 Mon Sep 17 00:00:00 2001
From: Giorgio Gilestro <giorgio@gilest.ro>
Date: Wed, 27 May 2026 15:27:44 +0200
Subject: [PATCH] portfolio-edit: add a quiet how-to hint inside the composer
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A small italic muted line beneath the form explaining the controls:
"Type a symbol, then quantity and cost — or use the calendar to fill
cost from a buy date — then [+] to add. [×] next to an existing row
removes it."

Only renders while the composer itself is visible (i.e. in edit mode),
so it doesn't clutter the dashboard at rest.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 app/static/css/cassandra.css | 20 ++++++++++++++++++++
 app/templates/dashboard.html |  5 +++++
 2 files changed, 25 insertions(+)

diff --git a/app/static/css/cassandra.css b/app/static/css/cassandra.css
index 8f3c3c8..b4b6f6b 100644
--- a/app/static/css/cassandra.css
+++ b/app/static/css/cassandra.css
@@ -2524,3 +2524,23 @@ a.btn-secondary:hover { color: var(--accent); border-color: var(--accent); }
   color: var(--warning);
 }
 .pf-add-warning:empty { display: none; }
+
+/* Quietly explains the controls. Shown only when the form is visible,
+ * which is to say only in edit mode. */
+.pf-add__hint {
+  margin: 6px 0 0;
+  font-size: 11px;
+  color: var(--dim);
+  line-height: 1.5;
+  font-style: italic;
+}
+.pf-add__hint kbd {
+  font-family: inherit;
+  font-style: normal;
+  font-size: 11px;
+  padding: 0 4px;
+  border: 1px solid var(--border);
+  border-radius: 2px;
+  color: var(--muted);
+  background: color-mix(in srgb, var(--accent) 4%, transparent);
+}
diff --git a/app/templates/dashboard.html b/app/templates/dashboard.html
index cb31752..fda7358 100644
--- a/app/templates/dashboard.html
+++ b/app/templates/dashboard.html
@@ -91,6 +91,11 @@
         <span id="pf-add-date-status" class="pf-add-status"></span>
         <span id="pf-add-warning" class="pf-add-warning" hidden></span>
       </div>
+      <p class="pf-add__hint">
+        Type a symbol, then quantity and cost &mdash; or use the calendar
+        to fill cost from a buy date &mdash; then <kbd>+</kbd> to add.
+        <kbd>&times;</kbd> next to an existing row removes it.
+      </p>
     </div>
     <div id="pf-mount">
       <div class="empty">loading…</div>