Workflow display styling

app/assets/stylesheets/tasks.css

@@ -28,4 +28,10 @@
 .task-show-info {
     display: flex;
     flex-flow: row nowrap;
+    align-items: center;
+    gap: 0.5em;
+
+    > * {
+        margin: 0;
+    }
 }

app/assets/stylesheets/workflows.css

@@ -0,0 +1,26 @@
+.workflow {
+    --bg-color: #D1D5DB; /* Pico zinc 150 */
+    --text-color: oklch(from var(--bg-color) calc(0.55 * l) calc(0.55 * c) h);
+
+    border-radius: 1em;
+    background-color: var(--bg-color);
+    color: var(--text-color);
+
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: center;
+    min-width: 2em;
+    padding: 0.1em 0.5em;
+    gap: 0.5em;
+    text-align: center;
+
+    > img {
+        max-width: unset;
+        width: 1lh;
+        opacity: 0.6;
+    }
+
+    &.red {
+        --bg-color: #F06048; /* Pico red 400 */
+    }
+}

app/helpers/workflows_helper.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+
+module WorkflowsHelper
+  def workflow_display(workflow, **)
+    render Workflows::DisplayViewModel.new(workflow, **)
+  end
+end

app/view_models/tasks/statuses/selector_view_model.rb

@@ -18,7 +18,7 @@ module Tasks
           partial: 'tasks/status_selector',
           locals: { task: @task, id: dom_id, with_form: @with_form,
                     workflow_task_statuses:,
-                    task_status_badge: ->(status) { task_status_badge(status, view_context) }}
+                    task_status_badge: ->(status) { task_status_badge(status, view_context) } }
         )
       end
 

app/view_models/workflows/display_view_model.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module Workflows
+  class DisplayViewModel
+    DEFAULT_ICON = 'task_line'
+    ICONS = {
+      warning: 'warning_line'
+    }.freeze
+
+    def initialize(workflow, full: false)
+      @workflow = workflow
+      @full = full
+    end
+
+    def icon
+      icon = ICONS.fetch(@workflow.icon.to_sym, DEFAULT_ICON)
+
+      "mingcute/#{icon}.svg"
+    end
+
+    def render_in(view_context)
+      view_context.render(
+        partial: 'workflows/display',
+        locals: @workflow.attributes.symbolize_keys.merge(icon:, full: @full)
+      )
+    end
+  end
+end

app/views/tasks/_table_row.html.slim

@@ -1,11 +1,6 @@
 - cache task do
   tr id="task_#{task.id}"
-    td
-      / TODO: extract into a presenter (and especially add color)
-      - wf_icon = 'task_line'
-      - if task.workflow.icon == 'warning'
-        - wf_icon = 'warning_line'
-      = image_tag("mingcute/#{wf_icon}.svg", title: task.workflow.name)
+    td= workflow_display task.workflow
     td= link_to task.full_number, task_path(task)
     td
       = task_status_selector task, with_form: true

app/views/tasks/show.html.slim

@@ -3,6 +3,7 @@ div
 h1= @task.title
 
 section.task-show-info
+  = workflow_display @task.workflow, full: true
   = task_status_selector @task, with_form: true
   = turbo_stream_from @task, :status, :with_form
 

app/views/workflows/_display.html.slim

@@ -0,0 +1,4 @@
+div.workflow class=color title=name
+  = image_tag(icon)
+  - if full
+    span= name