Merge branch 'main' into fix/chart-tooltip-design

app/javascript/controllers/budget_filter_controller.js

@@ -32,11 +32,13 @@ export default class extends Controller {
 
     this.tabTargets.forEach((tab) => {
       const isActive = tab.dataset.budgetFilterFilterParam === filter;
-      tab.classList.toggle("bg-white", isActive);
-      tab.classList.toggle("theme-dark:bg-gray-700", isActive);
-      tab.classList.toggle("text-primary", isActive);
-      tab.classList.toggle("shadow-sm", isActive);
-      tab.classList.toggle("text-secondary", !isActive);
+      // Selected styling is encapsulated in the DS::SegmentedControl active
+      // class; the base `.segmented-control__segment` already carries the
+      // inactive (text-secondary) state.
+      tab.classList.toggle("segmented-control__segment--active", isActive);
+      // Keep assistive tech in sync with the visual selection (these are
+      // button segments, so aria-pressed).
+      tab.setAttribute("aria-pressed", String(isActive));
     });
   }
 

app/javascript/controllers/goal_form_controller.js

@@ -18,6 +18,7 @@ export default class extends Controller {
     "accountsError",
     "linkedAccountCheckbox",
     "suggested",
+    "submitButton",
   ];
 
   static INVALID_INPUT_CLASSES = ["ring-2", "ring-destructive", "border-destructive"];
@@ -26,6 +27,11 @@ export default class extends Controller {
     currency: { type: String, default: "USD" },
     suggestedWithDate: { type: String, default: "Save {monthly}/mo across {accounts} to hit it on time." },
     suggestedNoDate: { type: String, default: "Set a target date to project a finish line." },
+    // Only the create form must pick an account. On edit the checkboxes are
+    // populated from visible accounts only, so a goal backed by a now-hidden
+    // account renders none — and the controller preserves existing links when
+    // account_ids is omitted. Requiring a checkbox there would wedge the form.
+    requireAccount: { type: Boolean, default: true },
   };
 
   connect() {
@@ -35,12 +41,16 @@ export default class extends Controller {
       this._defaultAvatarHTML = this.avatarPreviewTarget.innerHTML;
     }
     this.updateSuggested();
+    // Edit form arrives pre-filled (valid) so this clears immediately; new
+    // form arrives empty so the submit starts visually disabled.
+    this.refreshSubmitState();
   }
 
   nameChanged() {
     if (this.hasNameInputTarget) {
       this.clearFieldError(this.nameInputTarget, this.hasNameErrorTarget ? this.nameErrorTarget : null);
     }
+    this.refreshSubmitState();
     if (!this.hasAvatarPreviewTarget || !this.hasNameInputTarget) return;
 
     // If the user has explicitly picked an icon, leave it alone. Name
@@ -62,6 +72,7 @@ export default class extends Controller {
     if (this.hasAmountInputTarget) {
       this.clearFieldError(this.amountInputTarget, this.hasAmountErrorTarget ? this.amountErrorTarget : null);
     }
+    this.refreshSubmitState();
   }
 
   linkedAccountChanged() {
@@ -69,6 +80,64 @@ export default class extends Controller {
     if (this.linkedAccountCheckboxTargets.some((cb) => cb.checked) && this.hasAccountsErrorTarget) {
       this.accountsErrorTarget.classList.add("hidden");
     }
+    this.refreshSubmitState();
+  }
+
+  // Required to create a goal: a name, a positive target amount, and at least
+  // one funding account. Mirrors the server-side Goal validations (name
+  // presence, target_amount > 0, must_have_at_least_one_linked_account) so the
+  // button only enables when a submit would actually succeed.
+  isValid() {
+    const name = this.hasNameInputTarget ? this.nameInputTarget.value.trim() : "";
+    const amount = this.hasAmountInputTarget ? Number.parseFloat(this.amountInputTarget.value) : Number.NaN;
+    const accountOk = !this.requireAccountValue || this.linkedAccountCheckboxTargets.some((cb) => cb.checked);
+    return name.length > 0 && Number.isFinite(amount) && amount > 0 && accountOk;
+  }
+
+  // `aria-disabled` instead of the `disabled` attribute: a truly disabled
+  // default submit also blocks Enter-key implicit submission, so an invalid
+  // form would be a dead button with every inline error still hidden. With
+  // aria-disabled the button keeps its not-allowed affordance (styled via the
+  // DS `aria-disabled:` variants) while clicks and Enter still reach
+  // validateOnSubmit, which surfaces the errors and moves focus.
+  refreshSubmitState() {
+    if (this.hasSubmitButtonTarget) {
+      this.submitButtonTarget.setAttribute("aria-disabled", String(!this.isValid()));
+    }
+  }
+
+  // The real gate for the submit: covers the funding-accounts group (a
+  // checkbox group can't carry native `required`) and everything the
+  // aria-disabled affordance merely hints at. Surfaces the inline errors and
+  // focuses the first offending field instead of a silent no-op.
+  validateOnSubmit(event) {
+    if (this.isValid()) return;
+
+    event.preventDefault();
+
+    const nameEmpty = !(this.hasNameInputTarget && this.nameInputTarget.value.trim().length > 0);
+    const amount = this.hasAmountInputTarget ? Number.parseFloat(this.amountInputTarget.value) : Number.NaN;
+    const amountInvalid = !(Number.isFinite(amount) && amount > 0);
+    const noAccount = this.requireAccountValue && !this.linkedAccountCheckboxTargets.some((cb) => cb.checked);
+
+    if (nameEmpty) {
+      this.showFieldError(this.nameInputTarget, this.hasNameErrorTarget ? this.nameErrorTarget : null);
+    }
+    if (amountInvalid) {
+      this.showFieldError(this.amountInputTarget, this.hasAmountErrorTarget ? this.amountErrorTarget : null);
+    }
+    if (noAccount && this.hasAccountsErrorTarget) {
+      this.accountsErrorTarget.classList.remove("hidden");
+    }
+
+    const firstInvalid = nameEmpty
+      ? this.nameInputTarget
+      : amountInvalid
+        ? this.amountInputTarget
+        : noAccount
+          ? this.linkedAccountCheckboxTargets[0]
+          : null;
+    firstInvalid?.focus();
   }
 
   // Hook for any input that influences the suggested-pace hint

app/javascript/controllers/sync_toast_controller.js

@@ -2,32 +2,114 @@ import { Controller } from "@hotwired/stimulus";
 
 // Connects to data-controller="sync-toast"
 //
-// Shown when a background sync completes and the family's data changes.
-// - If the user is not interacting with a form, auto-reloads after a short delay.
-// - If the user is mid-form, the toast stays visible so they can choose when to refresh.
+// Shown when a background sync completes and the family's data has changed.
+// - Idle              → morph-refreshes the page after a short delay.
+// - Mid-form          → stays put; the user refreshes when ready.
+// - A modal <dialog> is open → the toast is deferred (it would otherwise sit
+//   dimmed-but-clickable behind the dialog's top-layer backdrop, and a refresh
+//   would close the dialog and discard its in-progress input). It is revealed
+//   once the dialog closes — the first moment a refresh is actually safe.
 export default class extends Controller {
   static values = {
     autoRefreshDelay: { type: Number, default: 2000 },
   };
 
   connect() {
-    if (!this.#userIsInteracting()) {
-      this._timer = setTimeout(() => this.refresh(), this.autoRefreshDelayValue);
+    if (this.#dialogOpen()) {
+      this.#deferUntilDialogCloses();
+      return;
     }
+    this.#arm();
   }
 
   disconnect() {
     clearTimeout(this._timer);
+    this.#removeDeferredDialogListener();
   }
 
+  // Turbo 8 morph refresh (the app sets `turbo_refreshes_with method: :morph,
+  // scroll: :preserve`) instead of window.location.reload(): no white flash,
+  // scroll position and `data-turbo-permanent` elements (the AI chat panel)
+  // are preserved.
   refresh() {
     clearTimeout(this._timer);
-    window.location.reload();
+    Turbo.visit(window.location.href, { action: "replace" });
+  }
+
+  #arm() {
+    if (this.#userIsInteracting()) return; // mid-form: wait for a manual refresh
+    // Re-check at fire time, not just arm time: the post-dialog reveal often
+    // lands on a form the dialog was sitting on, and the user resumes typing
+    // inside this window (a morph would wipe their non-turbo-permanent
+    // input). A dialog opened during the window is the same hazard — the
+    // refresh would close it. Either way, bail and leave the toast visible
+    // for a manual refresh, matching the mid-form behavior.
+    this._timer = setTimeout(() => {
+      if (this.#userIsInteracting() || this.#dialogOpen()) return;
+      this.refresh();
+    }, this.autoRefreshDelayValue);
+  }
+
+  #deferUntilDialogCloses() {
+    this.element.style.display = "none";
+    const dialog = document.querySelector("dialog[open]");
+    if (!dialog) {
+      this.#reveal();
+      return;
+    }
+    // Keep refs so disconnect() can detach this listener. Otherwise a toast
+    // replaced by a newer broadcast while the dialog is still open stays
+    // subscribed, and its now-detached controller fires #reveal()/#arm() on
+    // close — a spurious auto-refresh from a stale toast.
+    //
+    // Known edge: if this dialog leaves the DOM without firing `close` (e.g.
+    // a morph removes it), the toast stays hidden until the next broadcast
+    // replaces it. Acceptable: the next sync re-delivers the toast.
+    this._deferredDialog = dialog;
+    this._dialogCloseHandler = () => this.#onDialogClose();
+    dialog.addEventListener("close", this._dialogCloseHandler, { once: true });
+  }
+
+  #onDialogClose() {
+    // The `once` listener has already fired and detached itself.
+    this._deferredDialog = null;
+    this._dialogCloseHandler = null;
+    // Another dialog may still be open (stacked modals) — keep deferring until
+    // every dialog has closed.
+    if (this.#dialogOpen()) {
+      this.#deferUntilDialogCloses();
+      return;
+    }
+    this.#reveal();
+  }
+
+  #removeDeferredDialogListener() {
+    if (this._deferredDialog && this._dialogCloseHandler) {
+      this._deferredDialog.removeEventListener(
+        "close",
+        this._dialogCloseHandler,
+      );
+    }
+    this._deferredDialog = null;
+    this._dialogCloseHandler = null;
+  }
+
+  #reveal() {
+    this.element.style.display = "";
+    this.#arm();
+  }
+
+  #dialogOpen() {
+    return !!document.querySelector("dialog[open]");
   }
 
   #userIsInteracting() {
     const el = document.activeElement;
-    if (!el || el === document.body || el === document.documentElement) return false;
-    return el.isContentEditable || el.closest("form, dialog, [role='dialog']") !== null;
+    if (!el || el === document.body || el === document.documentElement)
+      return false;
+    return (
+      el.isContentEditable ||
+      el.closest("form, dialog, [role='dialog']") !== null
+    );
   }
 }