From d23230df68be800a2046e4afd83a281dba7445a8 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 26 Jul 2025 09:49:32 +0300
Subject: [PATCH] feat(promoted_attributes): support removing color

---
 .../src/translations/en/translation.json      |  3 ++-
 .../ribbon_widgets/promoted_attributes.ts     | 24 ++++++++++++++++++-
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json
index 13f9258e0..7fd0bc700 100644
--- a/apps/client/src/translations/en/translation.json
+++ b/apps/client/src/translations/en/translation.json
@@ -841,7 +841,8 @@
     "unknown_label_type": "Unknown label type '{{type}}'",
     "unknown_attribute_type": "Unknown attribute type '{{type}}'",
     "add_new_attribute": "Add new attribute",
-    "remove_this_attribute": "Remove this attribute"
+    "remove_this_attribute": "Remove this attribute",
+    "remove_color": "Remove the color label"
   },
   "script_executor": {
     "query": "Query",
diff --git a/apps/client/src/widgets/ribbon_widgets/promoted_attributes.ts b/apps/client/src/widgets/ribbon_widgets/promoted_attributes.ts
index 5f21cb6e5..e843edb58 100644
--- a/apps/client/src/widgets/ribbon_widgets/promoted_attributes.ts
+++ b/apps/client/src/widgets/ribbon_widgets/promoted_attributes.ts
@@ -272,7 +272,29 @@ export default class PromotedAttributesWidget extends NoteContextAwareWidget {
 
                 $input.after($openButton);
             } else if (definition.labelType === "color") {
-                $input.prop("type", "color");
+                $input.prop("type", "hidden");
+                const setValue = (color: string, event: JQuery.TriggeredEvent<HTMLElement, undefined, HTMLElement, HTMLElement>) => {
+                    $input.val(color);
+
+                    event.target = $input[0]; // Set the event target to the main input
+                    this.promotedAttributeChanged(event);
+                };
+
+                // We insert a separate input since the color input does not support empty value.
+                // This is a workaround to allow clearing the color input.
+                const $colorInput = $("<input>")
+                    .prop("type", "color")
+                    .prop("value", valueAttr.value ?? "#000000")
+                    .addClass("form-control promoted-attribute-input")
+                    .on("change", e => setValue((e.target as HTMLInputElement).value, e));
+                $input.after($colorInput);
+
+                const $clearButton = $("<span>")
+                    .addClass("input-group-text bx bxs-tag-x")
+                    .prop("title", t("promoted_attributes.remove_color"))
+                    .on("click", e => setValue("", e));
+
+                $colorInput.after($clearButton);
             } else {
                 ws.logError(t("promoted_attributes.unknown_label_type", { type: definition.labelType }));
             }