+
{children}
)
-}
\ No newline at end of file
+}
diff --git a/src/frontend/src/features/ui/components/label-badge/index.tsx b/src/frontend/src/features/ui/components/label-badge/index.tsx
new file mode 100644
index 00000000..f95818f9
--- /dev/null
+++ b/src/frontend/src/features/ui/components/label-badge/index.tsx
@@ -0,0 +1,17 @@
+import { Badge } from "@/features/ui/components/badge"
+import { ColorHelper } from "@/features/utils/color-helper"
+import { ThreadLabel } from "@/features/api/gen"
+
+type LabelBadgeProps = {
+ label: ThreadLabel
+}
+
+export const LabelBadge = ({ label }: LabelBadgeProps) => {
+ const badgeColor = ColorHelper.getContrastColor(label.color!);
+
+ return (
+
+ {label.display_name}
+
+ )
+}
diff --git a/src/frontend/src/features/utils/color-helper/index.test.ts b/src/frontend/src/features/utils/color-helper/index.test.ts
new file mode 100644
index 00000000..bbacb46a
--- /dev/null
+++ b/src/frontend/src/features/utils/color-helper/index.test.ts
@@ -0,0 +1,75 @@
+import { ColorHelper } from './index';
+
+describe('ColorHelper', () => {
+ describe('getContrastColor', () => {
+ describe('with default options', () => {
+ it('should return dark color for light backgrounds', () => {
+ expect(ColorHelper.getContrastColor('#FFFFFF')).toBe('#000000');
+ expect(ColorHelper.getContrastColor('#F0F0F0')).toBe('#000000');
+ expect(ColorHelper.getContrastColor('#E0E0E0')).toBe('#000000');
+ expect(ColorHelper.getContrastColor('#D0D0D0')).toBe('#000000');
+ });
+
+ it('should return light color for dark backgrounds', () => {
+ expect(ColorHelper.getContrastColor('#000000')).toBe('#FFFFFF');
+ expect(ColorHelper.getContrastColor('#1A1A1A')).toBe('#FFFFFF');
+ expect(ColorHelper.getContrastColor('#2D2D2D')).toBe('#FFFFFF');
+ expect(ColorHelper.getContrastColor('#404040')).toBe('#FFFFFF');
+ });
+
+ it('should handle colors with # prefix', () => {
+ expect(ColorHelper.getContrastColor('#FFFFFF')).toBe('#000000');
+ expect(ColorHelper.getContrastColor('#000000')).toBe('#FFFFFF');
+ });
+
+ it('should handle colors without # prefix', () => {
+ expect(ColorHelper.getContrastColor('FFFFFF')).toBe('#000000');
+ expect(ColorHelper.getContrastColor('000000')).toBe('#FFFFFF');
+ });
+ });
+
+ describe('with custom options', () => {
+ it('should use custom light and dark colors', () => {
+ const options = { lightColor: '#00FF00', darkColor: '#FF0000' };
+
+ expect(ColorHelper.getContrastColor('#FFFFFF', options)).toBe('#FF0000');
+ expect(ColorHelper.getContrastColor('#000000', options)).toBe('#00FF00');
+ });
+
+ it('should use custom light color only', () => {
+ const options = { lightColor: '#00FF00' };
+
+ expect(ColorHelper.getContrastColor('#FFFFFF', options)).toBe('#000000'); // default dark
+ expect(ColorHelper.getContrastColor('#000000', options)).toBe('#00FF00'); // custom light
+ });
+
+ it('should use custom dark color only', () => {
+ const options = { darkColor: '#FF0000' };
+
+ expect(ColorHelper.getContrastColor('#FFFFFF', options)).toBe('#FF0000'); // custom dark
+ expect(ColorHelper.getContrastColor('#000000', options)).toBe('#FFFFFF'); // default light
+ });
+ });
+
+ describe('edge cases', () => {
+ it('should handle gray colors around the threshold', () => {
+ // Colors with luminance close to 0.5
+ expect(ColorHelper.getContrastColor('#808080')).toBe('#000000');
+ expect(ColorHelper.getContrastColor('#7F7F7F')).toBe('#FFFFFF');
+ expect(ColorHelper.getContrastColor('#818181')).toBe('#000000');
+ });
+
+ it('should handle pure colors', () => {
+ expect(ColorHelper.getContrastColor('#FF0000')).toBe('#FFFFFF');
+ expect(ColorHelper.getContrastColor('#00FF00')).toBe('#000000');
+ expect(ColorHelper.getContrastColor('#0000FF')).toBe('#FFFFFF');
+ });
+
+ it('should handle mixed colors', () => {
+ expect(ColorHelper.getContrastColor('#FF8000')).toBe('#000000');
+ expect(ColorHelper.getContrastColor('#8000FF')).toBe('#FFFFFF');
+ expect(ColorHelper.getContrastColor('#00FFFF')).toBe('#000000');
+ });
+ });
+ });
+});
diff --git a/src/frontend/src/features/utils/color-helper/index.tsx b/src/frontend/src/features/utils/color-helper/index.tsx
new file mode 100644
index 00000000..8dfe236d
--- /dev/null
+++ b/src/frontend/src/features/utils/color-helper/index.tsx
@@ -0,0 +1,32 @@
+type ContractColorOptions = {
+ lightColor?: string;
+ darkColor?: string;
+}
+
+/**
+ * Helper class about colors
+ */
+export class ColorHelper {
+ /**
+ * Act like the contrast-color css function
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/contrast-color
+ * According the luminance of the provided color, it will pick the best color between lightColor and darkColor
+ * As options, you can provide the lightColor and darkColor to use (can be any valid css color)
+ *
+ * TODO: Use CSS properties for light and dark colors to be support theme switch
+ */
+ static getContrastColor(hexColor: string, { lightColor = "#FFFFFF", darkColor = "#000000" }: ContractColorOptions = {}) {
+ // Remove the # if present
+ const hex = hexColor.slice(1);
+
+ // Convert to RGB
+ const r = parseInt(hex.substring(0, 2), 16);
+ const g = parseInt(hex.substring(2, 4), 16);
+ const b = parseInt(hex.substring(4, 6), 16);
+
+ // Calculate relative luminance
+ const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+
+ return luminance > 0.5 ? darkColor : lightColor
+ }
+}