(back|front)end: add Project#color

twenty-backend/lib/twenty-backend/migration/3_add_color_to_projects.rb

@@ -0,0 +1,10 @@
+class AddColorToProjects < ActiveRecord::Migration[7.1]
+  def up
+    default = Twenty::ColorableMixin.random_color
+    add_column :projects, :color, :string, null: false, default:
+  end
+
+  def down
+    drop_column :projects, :color
+  end
+end

twenty-backend/lib/twenty-backend/model.rb

@@ -1,6 +1,7 @@
 # frozen_string_literal: true
 
 class Twenty::Model < ActiveRecord::Base
+  require_relative "model/mixin/colorable_mixin"
   require_relative "model/project"
   require_relative "model/task"
 end

twenty-backend/lib/twenty-backend/model/mixin/colorable_mixin.rb

@@ -0,0 +1,24 @@
+module Twenty::ColorableMixin
+  extend self
+
+  COLORS =  [
+    '#222222', '#333333', '#444444', '#555555', '#666666',
+    '#777777', '#888888', '#999999', '#AAAAAA', '#BBBBBB',
+    '#CCCCCC', '#DDDDDD', '#990000', '#009900', '#000099',
+    '#990099', '#009999', '#999900', '#990099', '#999999'
+  ]
+
+  def self.included(klass)
+    klass.before_validation :set_random_color, on: :create
+  end
+
+  def random_color
+    COLORS.sample
+  end
+
+  private
+
+  def set_random_color
+    self.color = random_color
+  end
+end

twenty-backend/lib/twenty-backend/model/project.rb

@@ -1,6 +1,7 @@
 # frozen_string_literal: true
 
 class Twenty::Project < Twenty::Model
+  include Twenty::ColorableMixin
   self.table_name = "projects"
 
   ##
@@ -13,7 +14,7 @@ class Twenty::Project < Twenty::Model
   has_many :tasks, class_name: "Twenty::Task"
 
   def to_json(options = {})
-    {id:, name:, path:}.to_json(options)
+    {id:, name:, path:, color:}.to_json(options)
   end
 
   ##

twenty-frontend/src/css/_lists.scss

@@ -21,7 +21,8 @@ ul.collection {
 ul.collection li.item {
   display: flex;
   flex-wrap: wrap;
-  padding-bottom: 5px;
+  height: 85px;
+
   a {
     display: flex;
     flex-direction: column;
@@ -33,9 +34,24 @@ ul.collection li.item {
       padding-bottom: 5px;
       font-size: smaller;
     }
+
     .subtitle {
       font-size: small;
       color: $secondary-color;
+      .tag {
+        padding: 2.5px;
+        color: $primary-color;
+        border: 1px solid $secondary-color;
+        border-radius: 5px;
+        font-size: small;
+        font-weight: bold;
+      }
+    }
+
+    .break {
+      display: flex;
+      height: 10px;
+      width: 100%;
     }
   }
   ul.actions {

twenty-frontend/src/js/components/Tasks.tsx

@@ -71,8 +71,14 @@ export function Tasks() {
                     <a className="w-85" href={editHref}>
                       <span className="title">{task.title}</span>
                       <span className="subtitle">
-                        {datetime.toFormat("dd LLL, yyyy")} at{" "}
-                        {datetime.toFormat("HH:mm")}
+                        <span className="datetime">
+                          {datetime.toFormat("dd LLL, yyyy")} at{" "}
+                          {datetime.toFormat("HH:mm")}
+                        </span>
+                        <span className="break"></span>
+                        <span style={{backgroundColor: task.project.color}} className="tag">
+                          {task.project.name}
+                        </span>
                       </span>
                     </a>
                     <ul className="actions">

twenty-frontend/src/js/types/schema.ts

@@ -7,6 +7,7 @@ export type Project = {
   id: number;
   name: string;
   path: string;
+  color: string;
 };
 
 export type Task = {
@@ -14,7 +15,7 @@ export type Task = {
   title: string;
   content: string;
   status: TASK_STATUS;
+  project: Project;
   created_at: string;
   updated_at: string;
-  project_id: number;
 };