feat: Pass category color to TaskMetaInfo for enhanced styling

Author: nannany

ui/src/components/task/EndTimeField.tsx

@@ -113,7 +113,9 @@ export const EndTimeField = ({
         }
       }}
     >
-      <span style={{ color: isDisabled ? "#9ca3af" : categoryColor }}>終了: </span>
+      <span style={{ color: isDisabled ? "#9ca3af" : categoryColor }}>
+        終了:{" "}
+      </span>
       <span style={{ color: isDisabled ? "#9ca3af" : categoryColor }}>
         {formatDateTime(fieldValue) || `(クリックして設定)`}
       </span>

ui/src/components/task/SortableTask.tsx

@@ -126,7 +126,9 @@ const SortableTask = ({
   };
 
   // カテゴリの色を取得
-  const selectedCategory = categories.find((cat) => cat.id === task.category_id);
+  const selectedCategory = categories.find(
+    (cat) => cat.id === task.category_id,
+  );
   const categoryColor = selectedCategory?.color || "#6b7280";
 
   const taskEditProps = {
@@ -156,10 +158,7 @@ const SortableTask = ({
     >
       <div className="flex items-center gap-4">
         <div className="cursor-grab active:cursor-grabbing">
-          <GripVertical 
-            className="h-4 w-4" 
-            style={{ color: categoryColor }}
-          />
+          <GripVertical className="h-4 w-4" style={{ color: categoryColor }} />
         </div>
 
         <TaskTimerButton
@@ -172,7 +171,10 @@ const SortableTask = ({
           <TaskTitleField {...taskEditProps} categoryColor={categoryColor} />
 
           <div className="flex gap-3 text-sm text-muted-foreground">
-            <TaskEstimatedTimeField {...taskEditProps} categoryColor={categoryColor} />
+            <TaskEstimatedTimeField
+              {...taskEditProps}
+              categoryColor={categoryColor}
+            />
 
             <StartTimeField
               {...taskEditProps}

ui/src/components/task/TaskEstimatedTimeField.tsx

@@ -121,7 +121,7 @@ export const TaskEstimatedTimeField = ({
         )
       }
     >
-      <span style={{ color: categoryColor }}>見積もり:{" "}</span>
+      <span style={{ color: categoryColor }}>見積もり: </span>
       <span style={{ color: categoryColor }}>
         {formatEstimatedTime(task.estimated_minute) || "0分 (クリックして設定)"}
       </span>

ui/src/components/task/TaskMetaInfo.tsx

@@ -5,7 +5,10 @@ interface TaskMetaInfoProps {
   categoryColor?: string;
 }
 
-export const TaskMetaInfo = ({ task, categoryColor = "#6b7280" }: TaskMetaInfoProps) => {
+export const TaskMetaInfo = ({
+  task,
+  categoryColor = "#6b7280",
+}: TaskMetaInfoProps) => {
   // 所要時間を計算（分単位）
   const calculateDuration = (
     start: string | null,
@@ -32,7 +35,7 @@ export const TaskMetaInfo = ({ task, categoryColor = "#6b7280" }: TaskMetaInfoPr
 
   return (
     <p className="text-sm p-1">
-      <span style={{ color: categoryColor }}>所要時間:{" "}</span>
+      <span style={{ color: categoryColor }}>所要時間: </span>
       <span style={{ color: categoryColor }}>
         {formatDuration(calculateDuration(task.start_time, task.end_time))}
       </span>

ui/src/components/task/TaskTimerButton.tsx

@@ -20,10 +20,10 @@ export const TaskTimerButton = ({
         variant="outline"
         onClick={() => onTaskTimer(task.id, "start")}
         className="h-8 w-8 hover:bg-opacity-10"
-        style={{ 
+        style={{
           color: categoryColor,
           borderColor: categoryColor,
-          backgroundColor: `${categoryColor}10`
+          backgroundColor: `${categoryColor}10`,
         }}
       >
         <Play className="h-4 w-4" />
@@ -38,10 +38,10 @@ export const TaskTimerButton = ({
         variant="outline"
         onClick={() => onTaskTimer(task.id, "stop")}
         className="h-8 w-8 hover:bg-opacity-10"
-        style={{ 
+        style={{
           color: categoryColor,
           borderColor: categoryColor,
-          backgroundColor: `${categoryColor}10`
+          backgroundColor: `${categoryColor}10`,
         }}
       >
         <Square className="h-4 w-4" />
@@ -54,10 +54,10 @@ export const TaskTimerButton = ({
       size="icon"
       variant="outline"
       className="h-8 w-8"
-      style={{ 
+      style={{
         color: categoryColor,
         borderColor: categoryColor,
-        backgroundColor: `${categoryColor}20`
+        backgroundColor: `${categoryColor}20`,
       }}
       disabled
     >