feat(task-management): enhance task timer synchronization and color handling

- Updated `CustomColordLabel` and `CustomNumberLabel` components to improve color handling by removing the alpha channel logic and implementing a dynamic text color based on background luminance.
- Enhanced task management slice to preserve timer state when fetching tasks, ensuring active timers are maintained across updates.
- Modified socket handlers to synchronize timer state between task slices, improving consistency in task time tracking.
- Refactored `useTaskTimer` hook to streamline local and Redux state synchronization for timer management.

worklenz-frontend/src/components/CustomColordLabel.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { Tooltip } from 'antd';
 import { Label } from '@/types/task-management.types';
 import { ITaskLabel } from '@/types/tasks/taskLabel.types';
-import { ALPHA_CHANNEL } from '@/shared/constants';
 
 interface CustomColordLabelProps {
   label: Label | ITaskLabel;
@@ -15,11 +14,26 @@ const CustomColordLabel = React.forwardRef<HTMLSpanElement, CustomColordLabelPro
       label.name && label.name.length > 10 ? `${label.name.substring(0, 10)}...` : label.name;
 
     // Handle different color property names for different types
-    const baseColor = (label as Label).color || (label as ITaskLabel).color_code || '#6b7280'; // Default to gray-500 if no color
+    const backgroundColor = (label as Label).color || (label as ITaskLabel).color_code || '#6b7280'; // Default to gray-500 if no color
     
-    // Add alpha channel to the base color
-    const backgroundColor = baseColor + ALPHA_CHANNEL;
-    const textColor = baseColor;
+    // Function to determine if we should use white or black text based on background color
+    const getTextColor = (bgColor: string): string => {
+      // Remove # if present
+      const color = bgColor.replace('#', '');
+      
+      // Convert to RGB
+      const r = parseInt(color.substr(0, 2), 16);
+      const g = parseInt(color.substr(2, 2), 16);
+      const b = parseInt(color.substr(4, 2), 16);
+      
+      // Calculate luminance
+      const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+      
+      // Return white for dark backgrounds, black for light backgrounds
+      return luminance > 0.5 ? '#000000' : '#ffffff';
+    };
+
+    const textColor = getTextColor(backgroundColor);
 
     return (
       <Tooltip title={label.name}>
@@ -29,7 +43,7 @@ const CustomColordLabel = React.forwardRef<HTMLSpanElement, CustomColordLabelPro
           style={{ 
             backgroundColor,
             color: textColor,
-            border: `1px solid ${baseColor}`,
+            border: `1px solid ${backgroundColor}`,
           }}
         >
           <span className="truncate">{truncatedName}</span>

worklenz-frontend/src/components/CustomNumberLabel.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Tooltip } from 'antd';
-import { NumbersColorMap, ALPHA_CHANNEL } from '@/shared/constants';
+import { NumbersColorMap } from '@/shared/constants';
 
 interface CustomNumberLabelProps {
   labelList: string[];
@@ -12,24 +12,17 @@ interface CustomNumberLabelProps {
 const CustomNumberLabel = React.forwardRef<HTMLSpanElement, CustomNumberLabelProps>(
   ({ labelList, namesString, isDarkMode = false, color }, ref) => {
     // Use provided color, or fall back to NumbersColorMap based on first digit
-    const baseColor = color || (() => {
+    const backgroundColor = color || (() => {
       const firstDigit = namesString.match(/\d/)?.[0] || '0';
       return NumbersColorMap[firstDigit] || NumbersColorMap['0'];
     })();
-
-    // Add alpha channel to the base color
-    const backgroundColor = baseColor + ALPHA_CHANNEL;
     
     return (
       <Tooltip title={labelList.join(', ')}>
         <span
           ref={ref}
           className="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium cursor-help"
-          style={{ 
-            backgroundColor,
-            color: baseColor,
-            border: `1px solid ${baseColor}`,
-          }}
+          style={{ backgroundColor, color: 'white' }}
         >
           {namesString}
         </span>