Merge pull request #61 from nannany/copilot/add-copy-checklist-to-clipboard

feat: add markdown checkbox clipboard export for tasks

Author: nannany

ui/src/lib/formatTasksAsMarkdown.test.ts

@@ -0,0 +1,84 @@
+import { describe, it, expect } from "vitest";
+import { formatTasksAsMarkdown } from "./formatTasksAsMarkdown";
+import { Task } from "@/types/task";
+
+describe("formatTasksAsMarkdown", () => {
+  const mockTask1: Task = {
+    id: "1",
+    user_id: "user1",
+    title: "未完了タスク1",
+    description: "",
+    estimated_minute: 30,
+    task_order: 1,
+    start_time: null,
+    end_time: null,
+    category_id: null,
+    created_at: "2024-01-01T00:00:00Z",
+    task_date: "2024-01-01",
+  };
+
+  const mockTask2: Task = {
+    id: "2",
+    user_id: "user1",
+    title: "完了タスク",
+    description: "",
+    estimated_minute: 20,
+    task_order: 2,
+    start_time: "2024-01-01T10:00:00Z",
+    end_time: "2024-01-01T10:30:00Z",
+    category_id: null,
+    created_at: "2024-01-01T00:00:00Z",
+    task_date: "2024-01-01",
+  };
+
+  const mockTask3: Task = {
+    id: "3",
+    user_id: "user1",
+    title: "未完了タスク2",
+    description: "",
+    estimated_minute: 15,
+    task_order: 3,
+    start_time: null,
+    end_time: null,
+    category_id: null,
+    created_at: "2024-01-01T00:00:00Z",
+    task_date: "2024-01-01",
+  };
+
+  it("should format tasks as markdown checkboxes", () => {
+    const result = formatTasksAsMarkdown([mockTask1, mockTask2, mockTask3]);
+    const expected = `- [ ] 未完了タスク1
+- [x] 完了タスク
+- [ ] 未完了タスク2`;
+    expect(result).toBe(expected);
+  });
+
+  it("should return empty string for empty task list", () => {
+    const result = formatTasksAsMarkdown([]);
+    expect(result).toBe("");
+  });
+
+  it("should mark tasks with end_time as completed", () => {
+    const result = formatTasksAsMarkdown([mockTask2]);
+    expect(result).toBe("- [x] 完了タスク");
+  });
+
+  it("should mark tasks without end_time as incomplete", () => {
+    const result = formatTasksAsMarkdown([mockTask1]);
+    expect(result).toBe("- [ ] 未完了タスク1");
+  });
+
+  it("should handle single task", () => {
+    const result = formatTasksAsMarkdown([mockTask1]);
+    expect(result).toBe("- [ ] 未完了タスク1");
+  });
+
+  it("should handle tasks with special characters in title", () => {
+    const specialTask: Task = {
+      ...mockTask1,
+      title: "タスク [重要] & 必須",
+    };
+    const result = formatTasksAsMarkdown([specialTask]);
+    expect(result).toBe("- [ ] タスク [重要] & 必須");
+  });
+});

ui/src/lib/formatTasksAsMarkdown.ts

@@ -0,0 +1,19 @@
+import { Task } from "@/types/task";
+
+/**
+ * Format tasks as Markdown checkboxes
+ * Completed tasks (with end_time) are marked as [x], others as [ ]
+ */
+export function formatTasksAsMarkdown(tasks: Task[]): string {
+  if (tasks.length === 0) {
+    return "";
+  }
+
+  return tasks
+    .map((task) => {
+      const isCompleted = task.end_time !== null;
+      const checkbox = isCompleted ? "[x]" : "[ ]";
+      return `- ${checkbox} ${task.title}`;
+    })
+    .join("\n");
+}

ui/src/pages/TaskList/TaskList.tsx

@@ -9,7 +9,7 @@ import React, {
 } from "react";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Calendar } from "lucide-react";
+import { Calendar, Clipboard } from "lucide-react";
 import { createClient } from "@/lib/supabase/client";
 import { useSupabaseUser } from "@/lib/supabase/hooks/useSupabaseUser";
 import { Input } from "@/components/ui/input";
@@ -44,6 +44,7 @@ import { useTaskActions } from "@/hooks/useTaskActions";
 import { CurrentTaskFooter } from "@/components/CurrentTaskFooter";
 import { TaskContextType } from "@/contexts/TaskContext";
 import { TaskProvider } from "@/contexts/TaskProvider";
+import { formatTasksAsMarkdown } from "@/lib/formatTasksAsMarkdown";
 
 const supabase = createClient();
 
@@ -293,6 +294,50 @@ const TaskList = () => {
     });
   };
 
+  // クリップボードにマークダウン形式でコピー
+  const handleCopyToClipboard = async () => {
+    if (tasks.length === 0) {
+      toast({
+        title: "コピー失敗",
+        description: "コピーするタスクがありません",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    const markdown = formatTasksAsMarkdown(tasks);
+
+    try {
+      // navigator.clipboardが利用可能かチェック
+      if (navigator.clipboard && navigator.clipboard.writeText) {
+        await navigator.clipboard.writeText(markdown);
+      } else {
+        // フォールバック: 古いブラウザ向け
+        const textArea = document.createElement("textarea");
+        textArea.value = markdown;
+        textArea.style.position = "fixed";
+        textArea.style.left = "-999999px";
+        textArea.style.top = "-999999px";
+        document.body.appendChild(textArea);
+        textArea.focus();
+        textArea.select();
+        document.execCommand("copy");
+        textArea.remove();
+      }
+      toast({
+        title: "コピー完了",
+        description: "タスクをマークダウン形式でコピーしました",
+      });
+    } catch (error) {
+      console.error("Failed to copy to clipboard:", error);
+      toast({
+        title: "コピー失敗",
+        description: "クリップボードへのコピーに失敗しました",
+        variant: "destructive",
+      });
+    }
+  };
+
   // クイックタスク追加
   const handleAddTask = async () => {
     if (!newTaskTitle.trim()) {
@@ -499,14 +544,21 @@ const TaskList = () => {
     <TaskProvider value={taskContextValue}>
       <div className="space-y-6 pb-20">
         <div className="flex items-center justify-between">
-          <div>
+          <div className="flex items-center gap-2">
+            <Button
+              onClick={handleCopyToClipboard}
+              variant="outline"
+              size="sm"
+              className="flex items-center gap-1"
+              aria-label="タスクをマークダウン形式でクリップボードにコピー"
+              title="タスク一覧をマークダウンチェックボックス形式でコピーします"
+            >
+              <Clipboard className="h-4 w-4" />
+              マークダウンでコピー
+            </Button>
             {totalEstimatedMinutes > 0 && (
-              <p className="text-sm text-muted-foreground mt-1">
-                {totalEstimatedMinutes > 0 && (
-                  <span className="ml-2">
-                    完了予定: {calculateEndTime(totalEstimatedMinutes)}
-                  </span>
-                )}
+              <p className="text-sm text-muted-foreground">
+                完了予定: {calculateEndTime(totalEstimatedMinutes)}
               </p>
             )}
           </div>