Another round of design on the stage picker UI

app/assets/stylesheets/filters.css

@@ -27,32 +27,19 @@
 }
 
 .filter__menu {
-  margin: 0 auto;
-  min-inline-size: 0;
-
-  li {
+  a {
+    border-radius: 0.5em;
+    color: var(--color-ink);
     display: block;
-    margin: 0;
-    max-inline-size: 100%;
-    min-inline-size: 0;
-    padding: 0;
-    text-align: start;
+    overflow: hidden;
+    padding: 0.3em 0.7em;
+    text-decoration: none;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 
-
-    a {
-      border-radius: 0.5em;
-      color: var(--color-ink);
-      display: block;
-      overflow: hidden;
-      padding: 0.3em 0.7em;
-      text-decoration: none;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-
-      @media (hover: hover) {
-        &:hover {
-          background-color: var(--color-selected);
-        }
+    @media (hover: hover) {
+      &:hover {
+        background-color: var(--color-selected);
       }
     }
   }

app/assets/stylesheets/utilities.css

@@ -187,6 +187,22 @@
   }
 }
 
+/* Lists */
+:where(.list-style-none) {
+  margin: 0 auto;
+  min-inline-size: 0;
+  padding: 0;
+
+  li {
+    display: block;
+    margin: 0;
+    max-inline-size: 100%;
+    min-inline-size: 0;
+    padding: 0;
+    text-align: start;
+  }
+}
+
 /* Separators */
 .separator {
   border-block: 0;

app/assets/stylesheets/workflows.css

@@ -0,0 +1,30 @@
+.workflow-stage {
+  --btn-border-radius: 0.5em;
+  --hover-size: 0;
+
+  gap: 0.7ch;
+
+  &:before {
+    content: "";
+    display: inline-flex;
+    inline-size: 1em;
+    block-size: 1em;
+    border-radius: 50%;
+    border: 2px solid var(--color-ink);
+    flex-shrink: 0;
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: color(from var(--bubble-color) srgb r g b / 0.15);
+    }
+  }
+}
+
+.workflow-stage--current {
+  color: var(--bubble-color);
+
+  &:before {
+    background-color: var(--bubble-color);
+  }
+}

app/helpers/workflows_helper.rb

@@ -5,7 +5,8 @@ module WorkflowsHelper
 
   def button_to_set_stage(bubble, stage)
     button_to stage.name, bucket_bubble_stagings_path(bubble.bucket, bubble, stage_id: stage),
-      method: :post, class: [ "btn btn--small", { "fill-selected": stage == bubble.stage } ],
+      method: :post, class: [ "btn full-width justify-start borderless workflow-stage", { "workflow-stage--current": stage == bubble.stage } ],
+      form_class: "flex align-center gap-half",
       data: { turbo_frame: "_top" }
   end
 end

app/views/bubbles/stage_pickers/new.html.erb

@@ -1,25 +1,31 @@
 <%= turbo_frame_tag dom_id(@bubble, :stage_picker) do %>
   <% if @selected_workflow %>
-    <article class="border txt-large" style="position: absolute; top: 5rem; right: 1rem;" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
-      <button class="btn btn--plain filter__button" data-action="click->dialog#toggle" data-dialog-modal-value="true">
-        <%= @selected_workflow.name %>
-      </button>
+    <aside style="position: absolute; top: 10rem; right: 3rem; --bubble-color: <%= @bubble.color %>"
+        data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
+      <div class="flex flex-column">
+        <button class="btn center" data-action="click->dialog#toggle" data-dialog-modal-value="true">
+          <%= image_tag "bolt.svg", aria: { hidden: true }, size: 24 %>
+          <span class="for-screen-reader">Choose a workflow</span>
+        </button>
+        <strong class="txt-large center"><%= @selected_workflow.name %></strong>
+        <hr class="separator--horizontal full-width" hidden />
+      </div>
 
       <dialog class="filter__popup panel fill-white shadow" data-dialog-target="dialog">
-        <menu class="filter__menu unpad margin-none">
+        <menu class="filter__menu list-style-none unpad margin-none">
           <% @workflows.each do |workflow| %>
             <li><%= link_to_stage_picker @bubble, workflow %></li>
           <% end %>
         </menu>
       </dialog>
 
-      <div class="border-top flex flex-column pad gap">
-        <menu class="filter__menu unpad margin-none">
+      <div class="workflow border pad border-radius margin-block-start-half">
+        <div class="flex flex-column gap-half">
           <% @selected_workflow.stages.each do |stage| %>
-            <li><%= button_to_set_stage @bubble, stage %></li>
+            <%= button_to_set_stage @bubble, stage %>
           <% end %>
-        </menu>
+        </div>
       </div>
-    </article>
+    </aside>
   <% end %>
 <% end %>