Make scenario name inline-editable and restyle details card (#30)

Replace the scenario-name field with an inline, click-to-edit heading
backed by a Turbo Frame and a new Scenarios::NamesController (show/edit/
update). Restyle the scenario details into a card matching the allocation
panels, with the Total giving amount input and Save button on one row.

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

Author: kcdragon

app/controllers/scenarios/names_controller.rb

@@ -0,0 +1,27 @@
+class Scenarios::NamesController < ApplicationController
+  before_action :set_scenario
+
+  def show
+  end
+
+  def edit
+  end
+
+  def update
+    if @scenario.update(name_params)
+      render :show
+    else
+      render :edit, status: :unprocessable_entity
+    end
+  end
+
+  private
+
+  def set_scenario
+    @scenario = Current.user.scenarios.where(organization: Current.organization).find(params[:scenario_id])
+  end
+
+  def name_params
+    params.require(:scenario).permit(:name)
+  end
+end

app/views/scenarios/names/_form.html.erb

@@ -0,0 +1,20 @@
+<%= turbo_frame_tag dom_id(scenario, :name), class: "mt-6 block" do %>
+  <%= form_with model: scenario, url: scenario_name_path(scenario), method: :patch, class: "flex items-center gap-2" do |form| %>
+    <%= form.text_field :name, required: true, autofocus: true,
+          class: "w-full max-w-md rounded-md border border-line bg-surface-soft px-3 py-1.5 font-serif text-3xl font-medium tracking-tight text-ink shadow-sm focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/10" %>
+
+    <button type="submit" aria-label="Save name"
+            class="inline-flex h-9 w-9 items-center justify-center rounded-md bg-accent text-white transition hover:bg-[#444] cursor-pointer">
+      <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
+      </svg>
+    </button>
+
+    <%= link_to scenario_name_path(scenario), aria: { label: "Cancel" },
+          class: "inline-flex h-9 w-9 items-center justify-center rounded-md border border-line bg-surface text-ink-soft transition hover:bg-canvas cursor-pointer" do %>
+      <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+      </svg>
+    <% end %>
+  <% end %>
+<% end %>

app/views/scenarios/names/_name.html.erb

@@ -0,0 +1,10 @@
+<%= turbo_frame_tag dom_id(scenario, :name), class: "mt-6 block" do %>
+  <%= link_to edit_scenario_name_path(scenario), class: "group inline-flex items-center gap-2" do %>
+    <h1 class="font-serif font-medium text-3xl tracking-tight text-ink"><%= scenario.name %></h1>
+    <span class="text-ink-faint opacity-0 transition group-hover:opacity-100" aria-hidden="true">
+      <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931z" />
+      </svg>
+    </span>
+  <% end %>
+<% end %>

app/views/scenarios/names/edit.html.erb

@@ -0,0 +1 @@
+<%= render "scenarios/names/form", scenario: @scenario %>

app/views/scenarios/names/show.html.erb

@@ -0,0 +1 @@
+<%= render "scenarios/names/name", scenario: @scenario %>

app/views/scenarios/show.html.erb

@@ -2,28 +2,20 @@
   <%= link_to "← Back to explore options", scenarios_path,
         class: "inline-block rounded-md border border-line bg-surface px-3 py-1.5 text-sm text-ink-soft hover:bg-canvas transition" %>
 
-  <h1 class="mt-6 font-serif font-medium text-3xl tracking-tight text-ink"><%= @scenario.name %></h1>
+  <%= render "scenarios/names/name", scenario: @scenario %>
 
   <%= form_with model: @scenario, class: "contents" do |form| %>
-    <div class="mt-6 flex items-center gap-4">
-      <%= form.label :name, class: "w-40 text-ink-soft" %>
-      <%= form.text_field :name, required: true,
-            class: "max-w-md w-full block rounded-md border border-line bg-surface px-3 py-2 shadow-sm focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/10" %>
-    </div>
-
-    <div class="mt-4 flex items-center gap-4">
-      <%= form.label :total_giving_amount, "Total giving amount", class: "w-40 text-ink-soft" %>
-      <div class="relative max-w-md w-full">
-        <span class="absolute left-3 top-1/2 -translate-y-1/2 text-ink-faint">$</span>
-        <%= form.number_field :total_giving_amount, step: "1", min: 0, placeholder: "0",
-              class: "block w-full rounded-md border border-line bg-surface pl-7 pr-3 py-2 shadow-sm focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/10" %>
+    <div class="mt-6 rounded-2xl border border-line bg-surface p-6 shadow-sm">
+      <div class="flex items-center gap-4">
+        <%= form.label :total_giving_amount, "Total giving amount", class: "w-40 text-ink-soft" %>
+        <div class="relative max-w-md w-full">
+          <span class="absolute left-3 top-1/2 -translate-y-1/2 text-ink-faint">$</span>
+          <%= form.number_field :total_giving_amount, step: "1", min: 0, placeholder: "0",
+                class: "block w-full rounded-md border border-line bg-surface-soft pl-7 pr-3 py-2 shadow-sm focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/10" %>
+        </div>
+        <%= form.submit "Save", class: "rounded-md px-3.5 py-2 bg-accent hover:bg-[#444] text-white text-sm font-medium cursor-pointer transition" %>
       </div>
     </div>
-
-    <div class="mt-4 flex items-center gap-4">
-      <span class="w-40"></span>
-      <%= form.submit "Save", class: "rounded-md px-3.5 py-2 bg-accent hover:bg-[#444] text-white text-sm font-medium cursor-pointer transition" %>
-    </div>
   <% end %>
 
   <div class="mt-8 grid gap-6 lg:grid-cols-2">

config/routes.rb

@@ -7,6 +7,7 @@
   resource :session
 
   resources :scenarios do
+    resource :name, only: %i[ show edit update ], module: :scenarios
     resources :allocations, only: %i[ create update destroy ]
   end
 

test/controllers/scenarios/names_controller_test.rb

@@ -0,0 +1,38 @@
+require "test_helper"
+
+class Scenarios::NamesControllerTest < ActionDispatch::IntegrationTest
+  setup do
+    host! "arlington.localhost"
+    sign_in_as users(:one)
+    @scenario = scenarios(:one_arlington)
+  end
+
+  test "show renders the inline name frame" do
+    get scenario_name_url(@scenario)
+    assert_response :success
+    assert_select "turbo-frame##{dom_id(@scenario, :name)}"
+  end
+
+  test "edit renders the inline name form" do
+    get edit_scenario_name_url(@scenario)
+    assert_response :success
+    assert_select "turbo-frame##{dom_id(@scenario, :name)} form input[name=?]", "scenario[name]"
+  end
+
+  test "update changes the name" do
+    patch scenario_name_url(@scenario), params: { scenario: { name: "Renamed scenario" } }
+    assert_response :success
+    assert_equal "Renamed scenario", @scenario.reload.name
+  end
+
+  test "update re-renders the form when name is blank" do
+    patch scenario_name_url(@scenario), params: { scenario: { name: "" } }
+    assert_response :unprocessable_entity
+    assert_select "form input[name=?]", "scenario[name]"
+  end
+
+  test "cannot edit a scenario owned by another user or org" do
+    get edit_scenario_name_url(scenarios(:two_boston))
+    assert_response :not_found
+  end
+end