[web] Colour picker for tags (#12255)

* Base for color picker

* React color picker and updated modals

* Add tag color picker to mobile dashboard

* Update existing tests and fix disable save button condition

* CSS adaptations for desktop modal streched into mobile display

* Update TagsController tests

* Add aria-hidden label on color pickers

* Fix linting

* Fix project list test

* Select random color when creating tag

* Cleanup leftovers in project list context

* Test cleanup

* Pre-select custom color and store local color while picking

* Add type to preset colors

* Add css fix to override disabled button opacity

* Skip redundant check

* Fix linting

* Add back btn-secondary on manage tag modal after rebase

GitOrigin-RevId: a4cf24e85cc0ca01466f4bf9c77482be8360e68e

services/web/app/src/models/Tag.js

@@ -1,6 +1,8 @@
 const mongoose = require('../infrastructure/Mongoose')
 const { Schema } = mongoose
 
+const COLOR_REGEX = /^#[a-fA-F0-9]{6}$/
+
 // Note that for legacy reasons, user_id and project_ids are plain strings,
 // not ObjectIds.
 
@@ -8,6 +10,15 @@ const TagSchema = new Schema(
   {
     user_id: { type: String, required: true },
     name: { type: String, required: true },
+    color: {
+      type: String,
+      validate: {
+        validator: function (v) {
+          return !v || COLOR_REGEX.test(v)
+        },
+        message: 'Provided color code is invalid.',
+      },
+    },
     project_ids: [String],
   },
   { minimize: false }