Merge pull request #58 from nannany/copilot/add-color-coded-tasks

完了タスクと未完了タスクを視覚的に区別

Author: nannany

ui/src/components/task/SortableTask.tsx

@@ -113,7 +113,9 @@ const SortableTask = ({ task }: SortableTaskProps) => {
         ...style,
         borderLeft: `4px solid ${categoryColor}`,
       }}
-      className="flex items-center justify-between rounded-md border p-4 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+      className={`flex items-center justify-between rounded-md border p-4 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 ${
+        isCompleted ? "bg-gray-50 opacity-70" : ""
+      }`}
       onKeyDown={handleTaskKeyDown}
       data-task-id={task.id}
       {...attributes}
@@ -127,7 +129,11 @@ const SortableTask = ({ task }: SortableTaskProps) => {
         <TaskTimerButton task={task} categoryColor={categoryColor} />
 
         <div className="flex-grow">
-          <TaskTitleField task={task} categoryColor={categoryColor} />
+          <TaskTitleField
+            task={task}
+            categoryColor={categoryColor}
+            isCompleted={isCompleted}
+          />
 
           <div className="flex gap-3 text-sm text-muted-foreground">
             <TaskEstimatedTimeField task={task} categoryColor={categoryColor} />

ui/src/components/task/TaskTitleField.tsx

@@ -5,11 +5,13 @@ import { useTaskContext } from "@/contexts/TaskContext";
 interface TaskTitleFieldProps {
   task: Task;
   categoryColor?: string;
+  isCompleted?: boolean;
 }
 
 export const TaskTitleField = ({
   task,
   categoryColor = "#374151",
+  isCompleted = false,
 }: TaskTitleFieldProps) => {
   // TaskContextから必要な値を取得
   const { taskEdit } = useTaskContext();
@@ -39,8 +41,10 @@ export const TaskTitleField = ({
 
   return (
     <p
-      className="font-medium mb-2 cursor-pointer hover:bg-gray-50 p-1 rounded"
-      style={{ color: categoryColor }}
+      className={`font-medium mb-2 cursor-pointer hover:bg-gray-50 p-1 rounded ${
+        isCompleted ? "line-through text-gray-500" : ""
+      }`}
+      style={{ color: isCompleted ? undefined : categoryColor }}
       onClick={() => handleEditStart(task.id, "title", task.title)}
     >
       {task.title}