From c04b306bfdddf720daee5eda8d7b5f110e4dc3c8 Mon Sep 17 00:00:00 2001
From: Guillem Arias <accounts@gariasf.com>
Date: Mon, 11 May 2026 14:56:29 +0200
Subject: [PATCH] feat(savings_goals/new): drop required asterisks, hide
 currency, collapse notes, clean footer
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

P1 of modal refactor — visual fidelity baseline against the Claude
Design reference and refactoring-ui rules.

Drop required: true on name + target_amount (suppresses both the red `*`
indicator and the browser-default HTML5 validation tooltip). Client-side
validation moves into the Stimulus stepper in a follow-up commit.

Pass hide_currency: true on the money_field so single-currency families
don't see a redundant inline currency dropdown.

Wrap the Notes textarea in a <details> disclosure ("Add notes (optional)"
summary) so step 1 isn't padded with rarely-used fields.

Drop the footer top border-subdued divider so the action row floats
against the dialog's existing padding boundary.

Drop the view-layer SavingsGoal::COLORS.sample fallback on hidden color
field — the controller already seeds @savings_goal.color.
---
 .../savings_goals/_form_stepper.html.erb      | 29 ++++++++++++-------
 config/locales/views/savings_goals/en.yml     |  2 ++
 2 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/app/views/savings_goals/_form_stepper.html.erb b/app/views/savings_goals/_form_stepper.html.erb
index 03c2348ec..1f29bfae6 100644
--- a/app/views/savings_goals/_form_stepper.html.erb
+++ b/app/views/savings_goals/_form_stepper.html.erb
@@ -33,17 +33,18 @@
           </span>
           <%= f.text_field :name,
                            placeholder: t("savings_goals.form_stepper.step1.fields.name_placeholder"),
-                           required: true,
                            autofocus: true,
-                           label: "",
-                           class: "flex-1" %>
+                           label: false,
+                           class: "flex-1",
+                           data: { savings_goal_stepper_target: "nameInput", action: "input->savings-goal-stepper#nameChanged" } %>
         </div>
       </div>
 
       <div class="grid grid-cols-2 gap-3">
         <%= f.money_field :target_amount,
                           label: t("savings_goals.form_stepper.step1.fields.target_amount"),
-                          required: true %>
+                          hide_currency: true,
+                          amount_data: { savings_goal_stepper_target: "amountInput" } %>
         <%= f.date_field :target_date,
                          label: t("savings_goals.form_stepper.step1.fields.target_date") %>
       </div>
@@ -81,12 +82,20 @@
         </div>
       </div>
 
-      <%= f.text_area :notes,
-                      label: t("savings_goals.form_stepper.step1.fields.notes"),
-                      rows: 2 %>
+      <details class="border border-subdued rounded-lg group">
+        <summary class="flex items-center justify-between gap-3 px-4 py-3 cursor-pointer list-none text-sm font-medium text-primary">
+          <span><%= t("savings_goals.form_stepper.step1.fields.notes_summary") %></span>
+          <%= icon("chevron-down", size: "sm", class: "group-open:rotate-180 transition-transform") %>
+        </summary>
+        <div class="px-4 pb-4">
+          <%= f.text_area :notes,
+                          label: "",
+                          rows: 2,
+                          placeholder: t("savings_goals.form_stepper.step1.fields.notes_placeholder") %>
+        </div>
+      </details>
 
-      <%# Hidden color (random) %>
-      <%= f.hidden_field :color, value: savings_goal.color || SavingsGoal::COLORS.sample %>
+      <%= f.hidden_field :color %>
     </section>
 
     <section data-savings-goal-stepper-target="step2Panel" class="space-y-5 hidden">
@@ -150,7 +159,7 @@
       </details>
     </section>
 
-    <div class="flex items-center justify-between pt-2 border-t border-subdued -mx-1 px-1">
+    <div class="flex items-center justify-between pt-2">
       <button type="button"
               class="text-sm font-medium text-secondary hover:text-primary px-2 py-2"
               data-savings-goal-stepper-target="footerLeftButton"
diff --git a/config/locales/views/savings_goals/en.yml b/config/locales/views/savings_goals/en.yml
index 497667815..13eacd129 100644
--- a/config/locales/views/savings_goals/en.yml
+++ b/config/locales/views/savings_goals/en.yml
@@ -196,6 +196,8 @@ en:
           target_date: Target date
           color: Color
           notes: Notes (optional)
+          notes_summary: Add notes (optional)
+          notes_placeholder: A reminder for future you…
           funding_accounts: Funding accounts
         subtypes:
           checking: Checking