feat(goals/new): standalone page render when not in a Turbo frame

Direct nav to /goals/new used to render the index page with an empty
modal frame because the entire template was wrapped in DS::Dialog.
The URL was effectively un-shareable.

Branch on turbo_frame_request? — Turbo Frame requests still render
the DS::Dialog wrapper (the existing in-modal flow on the index page
keeps working). Non-frame requests render a standalone page-level
header (h1 + subtitle + icon) followed by the form_stepper partial.
Same Stimulus controller, same data-goal-stepper-modal-subtitle
selector, so the stepper's subtitle update path works identically.

Controller sets @breadcrumbs so the standalone variant gets the
Home > Goals > New goal trail.

Verified both paths via Playwright: direct GET renders standalone
form with h1 "New goal" + no dialog; click-from-index opens the
DS::Dialog with the stepper inside.
This commit is contained in:
Guillem Arias
2026-05-11 20:43:41 +02:00
parent 3fa762289a
commit 628e1f89bb
2 changed files with 34 additions and 14 deletions

View File

@@ -45,6 +45,11 @@ class GoalsController < ApplicationController
currency: Current.family.primary_currency_code
)
@linkable_accounts = linkable_accounts_for_new
@breadcrumbs = [
[ t("breadcrumbs.home"), root_path ],
[ t("goals.index.title"), goals_path ],
[ t("goals.new.heading"), nil ]
]
end
def create

View File

@@ -1,19 +1,34 @@
<%= render DS::Dialog.new(width: "lg") do |dialog| %>
<% dialog.with_header(custom_header: true) do %>
<div class="flex items-start justify-between gap-3">
<div class="flex items-start gap-3">
<%= render DS::FilledIcon.new(variant: :container, icon: "target", size: "md", rounded: true) %>
<div>
<h2 class="text-base font-medium text-primary"><%= t(".heading") %></h2>
<p class="text-sm text-secondary mt-0.5" data-goal-stepper-modal-subtitle>
<%= t(".step1_subtitle") %>
</p>
<% if turbo_frame_request? %>
<%= render DS::Dialog.new(width: "lg") do |dialog| %>
<% dialog.with_header(custom_header: true) do %>
<div class="flex items-start justify-between gap-3">
<div class="flex items-start gap-3">
<%= render DS::FilledIcon.new(variant: :container, icon: "target", size: "md", rounded: true) %>
<div>
<h2 class="text-base font-medium text-primary"><%= t(".heading") %></h2>
<p class="text-sm text-secondary mt-0.5" data-goal-stepper-modal-subtitle>
<%= t(".step1_subtitle") %>
</p>
</div>
</div>
<%= render DS::Button.new(variant: "icon", icon: "x", title: t("common.close"), aria_label: t("common.close"), data: { action: "DS--dialog#close" }) %>
</div>
<%= render DS::Button.new(variant: "icon", icon: "x", title: t("common.close"), aria_label: t("common.close"), data: { action: "DS--dialog#close" }) %>
</div>
<% end %>
<% dialog.with_body do %>
<%= render "form_stepper", goal: @goal, linkable_accounts: @linkable_accounts %>
<% end %>
<% end %>
<% dialog.with_body do %>
<% else %>
<div class="max-w-2xl mx-auto py-8 px-4">
<header class="mb-6 flex items-start gap-3">
<%= render DS::FilledIcon.new(variant: :container, icon: "target", size: "md", rounded: true) %>
<div>
<h1 class="text-xl font-medium text-primary"><%= t(".heading") %></h1>
<p class="text-sm text-secondary mt-0.5" data-goal-stepper-modal-subtitle>
<%= t(".step1_subtitle") %>
</p>
</div>
</header>
<%= render "form_stepper", goal: @goal, linkable_accounts: @linkable_accounts %>
<% end %>
</div>
<% end %>