Direct flow for creating new splats

app/models/splat.rb

@@ -5,5 +5,5 @@ class Splat < ApplicationRecord
   enum :color, %w[
     #AF2E1B #CC6324 #3B4B59 #BFA07A #ED8008 #ED3F1C #BF1B1B #736B1E #D07B53
     #736356 #AD1D1D #BF7C2A #C09C6F #698F9C #7C956B #5D618F #3B3633 #67695E
-  ].index_by(&:itself), suffix: true, default: :dodgerblue
+  ].index_by(&:itself), suffix: true, default: "#698F9C"
 end

app/views/splats/index.html.erb

@@ -18,18 +18,10 @@
       <% end %>
     </h1>
 
-    <div class="flex-item-justify-end" data-controller="dialog">
-      <%= tag.button class: "btn flex-item-justify-end", popovertarget: "new-splat-panel" do %>
-        <%= image_tag "add.svg", aria: { hidden: true }, size: 24 %>
-        <span class="for-screen-reader">Create a new splat</span>
-      <% end %>
-
-      <dialog class="panel" id="new-splat-panel" data-dialog-target="dialog" popover>
-        <div class="flex pad">
-          <%= turbo_frame_tag :new_splat, src: new_splat_path, target: "_top" %>
-        </div>
-      </dialog>
-    </div>
+    <%= link_to new_splat_path, class: "btn flex-item-justify-end" do %>
+      <%= image_tag "add.svg", aria: { hidden: true }, size: 24 %>
+      <span class="for-screen-reader">Create a new splat</span>
+    <% end %>
   </nav>
 <% end %>
 

app/views/splats/new.html.erb

@@ -1,3 +1,15 @@
-<%= turbo_frame_tag :new_splat do %>
-  <%= render "splats/form", splat: @splat %>
-<% end %>
+<div class="splat__perma flex justify-center center">
+  <div class="splat" style="view-transition-name: splat-<%= @splat.id -%>; --splat-color: <%= @splat.color %>; <%= splat_size(@splat) %> <%= splat_rotation(@splat) %>">
+    <%= form_with model: @splat, class: "flex flex-column gap full-width" do | form | %>
+      <h1 class="splat__title">
+        <%= form.text_area :title, class: "input full-width borderless", required: true, placeholder: "Name it…", rows: 4, autofocus: true %>
+      </h1>
+
+      <%= form.button class: "btn btn--reversed center" do %>
+        <%= image_tag "check.svg", aria: { hidden: "true" }, size: 24%>
+        <span class="for-screen-reader">Save</span>
+      <% end %>
+    <% end %>
+    <svg class="splat__svg" viewBox="0 0 990 990" xmlns="http://www.w3.org/2000/svg"><path d="m0 0h990v990h-990z" fill="none" stroke="none" /><path d="m391.65 879.47c-110.52-15.95-212.21-91.86-255.92-191.23-66.78-143.65-41.62-347.61 48.08-481.17 368.33-516.3 1252.97 520.2 451.03 660.78-44.07 8.84-88.98 13.49-133.01 15.68-36.69 2-73.37 1.91-109.99-4.03z"/></svg>
+  </div>
+</div>