Add colors to stages

app/controllers/workflows/stages_controller.rb

@@ -31,6 +31,6 @@ class Workflows::StagesController < ApplicationController
     end
 
     def stage_params
-      params.expect workflow_stage: [ :name ]
+      params.require(:workflow_stage).permit(:name, :color)
     end
 end

app/helpers/workflows_helper.rb

@@ -9,4 +9,8 @@ module WorkflowsHelper
       end
     end
   end
+
+  def stage_color(stage)
+    stage.color.presence || "#2c6da8"
+  end
 end

app/views/workflows/stages/_color.html.erb

@@ -0,0 +1,27 @@
+<div class="position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close">
+  <button class="btn btn--reversed txt-x-small" data-action="dialog#open:stop" style="--btn-background: <%= stage_color(stage) %>">
+    <%= icon_tag "art" %>
+    <span class="for-screen-reader">Change color</span>
+  </button>
+
+  <dialog class="color-picker panel fill-white shadow gap-half" data-dialog-target="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
+    <%= form_with model: stage, url: workflow_stage_path(stage.workflow, stage), class: "flex gap-half", data: { controller: "form", action: "change->form#submit" } do |form| %>
+      <% Colorable::COLORS.each do |color| %>
+        <span class="color-picker__color">
+          <label class="btn btn--circle" style="--btn-background: <%= color %>" title="<%= color %>">
+            <%= form.radio_button :color, color %>
+            <%= icon_tag "check", class: "checked" %>
+            <span class="for-screen-reader"><%= color %></span>
+          </label>
+        </span>
+      <% end %>
+    <% end %>
+
+    <form method="dialog">
+      <button class="btn txt-small" title="Close (esc)">
+        <%= icon_tag "remove" %>
+        <span class="for-screen-reader">Close</span>
+      </button>
+    </form>
+  </dialog>
+</div>

app/views/workflows/stages/_stage.html.erb

@@ -1,7 +1,9 @@
-<div class="flex gap-half align-center justify-space-between">
+<div class="flex gap-half align-center">
+  <%= render "workflows/stages/color", stage: stage %>
+
   <%= turbo_frame_tag stage do %>
     <%= link_to edit_workflow_stage_path(stage.workflow, stage) do %>
       <strong class="txt-nowrap overflow-ellipsis"><%= stage.name %></strong>
     <% end %>
   <% end %>
-</div>
+</div>