From f9fb633cba57fdf1f24b96dbc4033bddee179b40 Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Wed, 9 Apr 2025 15:45:08 -0500
Subject: [PATCH] Add colors to stages

---
 .../workflows/stages_controller.rb            |  2 +-
 app/helpers/workflows_helper.rb               |  4 +++
 app/views/workflows/stages/_color.html.erb    | 27 +++++++++++++++++++
 app/views/workflows/stages/_stage.html.erb    |  6 +++--
 4 files changed, 36 insertions(+), 3 deletions(-)
 create mode 100644 app/views/workflows/stages/_color.html.erb

diff --git a/app/controllers/workflows/stages_controller.rb b/app/controllers/workflows/stages_controller.rb
index c85016dcc..f6422f9d6 100644
--- a/app/controllers/workflows/stages_controller.rb
+++ b/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
diff --git a/app/helpers/workflows_helper.rb b/app/helpers/workflows_helper.rb
index 32fd5e68a..f54da0757 100644
--- a/app/helpers/workflows_helper.rb
+++ b/app/helpers/workflows_helper.rb
@@ -9,4 +9,8 @@ module WorkflowsHelper
       end
     end
   end
+
+  def stage_color(stage)
+    stage.color.presence || "#2c6da8"
+  end
 end
diff --git a/app/views/workflows/stages/_color.html.erb b/app/views/workflows/stages/_color.html.erb
new file mode 100644
index 000000000..fc0b65b6e
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/app/views/workflows/stages/_stage.html.erb b/app/views/workflows/stages/_stage.html.erb
index 21cf0cf0b..9d68de0b3 100644
--- a/app/views/workflows/stages/_stage.html.erb
+++ b/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>
\ No newline at end of file