feat: Add task repeat functionality with hover button for task timer

Author: nannany

ui/src/components/task/SortableTask.tsx

@@ -39,6 +39,7 @@ interface TaskActions {
     taskId: string,
     action: "start" | "stop" | "complete",
   ) => void;
+  handleRepeatTask: (task: Task) => void;
 }
 
 interface SortableTaskProps {
@@ -164,6 +165,7 @@ const SortableTask = ({
         <TaskTimerButton
           task={task}
           onTaskTimer={taskActions.handleTaskTimer}
+          onRepeatTask={taskActions.handleRepeatTask}
           categoryColor={categoryColor}
         />
 

ui/src/components/task/TaskTimerButton.tsx

@@ -1,18 +1,22 @@
 import { Button } from "@/components/ui/button";
-import { Play, Square, CheckCircle2 } from "lucide-react";
+import { Play, Square, CheckCircle2, RotateCcw } from "lucide-react";
 import { Task } from "./types";
+import { useState } from "react";
 
 interface TaskTimerButtonProps {
   task: Task;
   onTaskTimer: (taskId: string, action: "start" | "stop" | "complete") => void;
+  onRepeatTask?: (task: Task) => void;
   categoryColor?: string;
 }
 
 export const TaskTimerButton = ({
   task,
   onTaskTimer,
+  onRepeatTask,
   categoryColor = "#6b7280",
 }: TaskTimerButtonProps) => {
+  const [isHovered, setIsHovered] = useState(false);
   if (!task.start_time) {
     return (
       <Button
@@ -50,18 +54,42 @@ export const TaskTimerButton = ({
   }
 
   return (
-    <Button
-      size="icon"
-      variant="outline"
-      className="h-8 w-8"
-      style={{
-        color: categoryColor,
-        borderColor: categoryColor,
-        backgroundColor: `${categoryColor}20`,
-      }}
-      disabled
+    <div
+      className="relative"
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
     >
-      <CheckCircle2 className="h-4 w-4" />
-    </Button>
+      <Button
+        size="icon"
+        variant="outline"
+        className="h-8 w-8"
+        style={{
+          color: categoryColor,
+          borderColor: categoryColor,
+          backgroundColor: `${categoryColor}20`,
+        }}
+        disabled
+      >
+        <CheckCircle2 className="h-4 w-4" />
+      </Button>
+
+      {isHovered && onRepeatTask && (
+        <Button
+          size="icon"
+          variant="outline"
+          className="absolute -top-2 -right-2 h-6 w-6 bg-white shadow-md hover:bg-gray-50"
+          onClick={(e) => {
+            e.stopPropagation();
+            onRepeatTask(task);
+          }}
+          style={{
+            color: categoryColor,
+            borderColor: categoryColor,
+          }}
+        >
+          <RotateCcw className="h-3 w-3" />
+        </Button>
+      )}
+    </div>
   );
 };

ui/src/pages/TaskList/TaskList.tsx

@@ -208,6 +208,64 @@ const TaskList = () => {
     return `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")}`;
   };
 
+  // タスク繰り返し機能
+  const handleRepeatTask = async (originalTask: Task) => {
+    if (!selectedDate || !user?.id) {
+      toast({
+        title: "Error",
+        description: "User not authenticated or date not selected",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    startTransition(async () => {
+      // 同じ名前、同じカテゴリーで新しいタスクを作成
+      const newTask = {
+        title: originalTask.title,
+        description: originalTask.description,
+        user_id: user.id,
+        estimated_minute: originalTask.estimated_minute,
+        category_id: originalTask.category_id,
+        task_date: convertDateStringToDate(
+          selectedDate
+            .toLocaleString("ja-JP", { timeZone: "Asia/Tokyo" })
+            .split(" ")[0],
+        ),
+      };
+
+      const { data, error } = await supabase
+        .from("tasks")
+        .insert(newTask)
+        .select();
+
+      if (error) {
+        toast({
+          title: "Error",
+          description: "Failed to repeat task",
+          variant: "destructive",
+        });
+        console.error("Error repeating task:", error);
+      } else {
+        const createdTask = (data?.[0] as unknown as Task) || ({} as Task);
+
+        // 新しく作成したタスクをリストに追加
+        dispatch({
+          type: "ADD_TASK",
+          payload: createdTask,
+        });
+
+        // 新しいタスクを自動的に開始
+        taskActions.handleTaskTimer(createdTask.id, "start");
+
+        toast({
+          title: "Success",
+          description: `タスク "${originalTask.title}" を繰り返し作成し、開始しました`,
+        });
+      }
+    });
+  };
+
   // クイックタスク追加
   const handleAddTask = async () => {
     if (!newTaskTitle.trim()) {
@@ -512,7 +570,10 @@ const TaskList = () => {
                           key={task.id}
                           task={task}
                           taskEdit={taskEdit}
-                          taskActions={taskActions}
+                          taskActions={{
+                            ...taskActions,
+                            handleRepeatTask,
+                          }}
                           lastTaskEndTime={lastTaskEndTime}
                           categories={categories}
                         />