feat(ui): Implement workflow tags UI (#658)

frontend/package.json

@@ -61,6 +61,7 @@
     "next-themes": "^0.2.1",
     "posthog-js": "^1.146.0",
     "react": "^18.3.1",
+    "react-colorful": "^5.6.1",
     "react-confetti-explosion": "^2.1.2",
     "react-day-picker": "8.10.0",
     "react-dom": "^18.3.1",

frontend/src/components/color-picker.tsx

@@ -0,0 +1,41 @@
+import React, { useState } from "react"
+import { HexColorPicker } from "react-colorful"
+
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
+
+export const ColorPicker = ({
+  value = "#aabbcc",
+  onChange,
+  showInput = false,
+}: {
+  value: string
+  onChange: (color: string) => void
+  showInput?: boolean
+}) => {
+  const [isOpen, setIsOpen] = useState(false)
+
+  return (
+    <div className="flex items-center gap-2">
+      <Popover open={isOpen} onOpenChange={setIsOpen}>
+        <PopoverTrigger asChild>
+          <button
+            className="size-6 rounded border border-gray-200 shadow-sm"
+            style={{ backgroundColor: value }}
+            aria-label="Pick a color"
+          />
+        </PopoverTrigger>
+        <PopoverContent className="w-auto">
+          <HexColorPicker
+            color={value}
+            onChange={(color: string) => onChange?.(color)}
+          />
+        </PopoverContent>
+      </Popover>
+      {showInput && <div className="text-sm text-gray-600">{value}</div>}
+    </div>
+  )
+}