Task status badge and index

app/assets/stylesheets/application.css

@@ -35,7 +35,17 @@ site-sidebar {
 }
 
 :root {
-    --error-color: rgb(155, 35, 24); /* Pico color red 650 */
+    --error-color: #861D13; /* Pico red 700 */
+    --error-bg: #F8DCD6; /* Pico red 100 */
+    /* For jade, light on dark looks better */
+    --success-color: #70FCBA;  /* Pico jade 100 */
+    --success-bg: #015234; /* Pico jade 700 */
+    --backlog-color: #424751; /* Pico zinc 700 */
+    --backlog-bg: #E0E3E7; /* Pico zinc 100 */ 
+    --analysis-color: #5B4200; /* Pico amber 700 */
+    --analysis-bg: #FDDEA6; /* Pico amber 100 */
+    --info-color: #014C75; /* Pico azure 700 */
+    --info-bg: #D1E5FB; /* Pico azure 100 */
 }
 
 form {
@@ -54,3 +64,14 @@ form {
         }
     }
 }
+
+.badge {
+    font-size: 0.875em;
+    padding: 0.25em 0.5em;
+    border: 1px solid var(--border-color, currentColor);
+    color: var(--color, currentColor);
+    background-color: var(--background-color, transparent);
+    border-radius: 1em / 0.5em;
+    font-weight: 500;
+    text-transform: uppercase;
+}

app/assets/stylesheets/tasks.css

@@ -0,0 +1,19 @@
+.task-status {
+    --color: var(--backlog-color);
+    --background-color: var(--backlog-bg);
+
+    &.analysis {
+        --color: var(--analysis-color);
+        --background-color: var(--analysis-bg);
+    }
+
+    &.development {
+        --color: var(--info-color);
+        --background-color: var(--info-bg);
+    }
+
+    &.fulfillment {
+        --color: var(--success-color);
+        --background-color: var(--success-bg);
+    }
+}

app/controllers/tasks_controller.rb

@@ -11,7 +11,7 @@ class TasksController < ApplicationController
                Task.all
              end
 
-    @tasks = @tasks.includes(:project)
+    @tasks = @tasks.includes(:project, :status)
   end
 
   def show; end

app/helpers/tasks_helper.rb

@@ -8,4 +8,11 @@ module TasksHelper
 
     'Tasks'
   end
+
+  # @param status [TaskStatus]
+  def task_status_badge(status)
+    # TODO: extract into a component probably
+
+    content_tag(:span, status.name, class: ['badge', 'task-status', status.category.dasherize])
+  end
 end

app/views/layouts/application.html.erb

@@ -17,8 +17,8 @@
     <link rel="icon" href="/icon.svg" type="image/svg+xml">
     <link rel="apple-touch-icon" href="/icon.png">
 
-    <%# Includes all stylesheet files in app/assets/stylesheets %>
     <%= stylesheet_link_tag 'pico.jade.min.css', "data-turbo-track": "reload" %>
+    <%# Includes all stylesheet files in app/assets/stylesheets %>
     <%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
     <%= javascript_importmap_tags %>
   </head>

app/views/tasks/index.html.slim

@@ -11,6 +11,7 @@ h1= tasks_index_title
         - cache task do
           tr
             td= link_to task.full_number, task_path(task)
+            td= task_status_badge task.status
             td= task.title
             td
               = link_to 'Edit', edit_task_path(task)