Improve color goal display with swatches

ui.js

@@ -97,8 +97,28 @@
       }
     };
 
-    const setGoal = ({ label, progress }) => {
-      if (goalLabelEl) goalLabelEl.textContent = label || "—";
+    const setGoal = ({ label, progress, colors }) => {
+      if (goalLabelEl) {
+        goalLabelEl.innerHTML = "";
+        if (Array.isArray(colors) && colors.length > 0) {
+          colors.forEach((color) => {
+            const swatch = document.createElement("span");
+            swatch.style.background = color;
+            swatch.style.display = "inline-block";
+            swatch.style.width = "14px";
+            swatch.style.height = "14px";
+            swatch.style.borderRadius = "50%";
+            swatch.style.border = "1px solid rgba(255,255,255,0.2)";
+            swatch.style.marginRight = "6px";
+            goalLabelEl.appendChild(swatch);
+          });
+          const text = document.createElement("span");
+          text.textContent = label || "";
+          goalLabelEl.appendChild(text);
+        } else {
+          goalLabelEl.textContent = label || "—";
+        }
+      }
       if (goalProgressEl)
         goalProgressEl.style.width = `${Math.max(
           0,