[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":12,"_34":12,"_35":12,"_36":37},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","6824536593ec819190daac4cb4647561","versionInt","title","Eisenhower Matrix Todo","type","code/react","content","import React, { useState, useEffect } from \"react\";\nimport {\n Card,\n CardHeader,\n CardTitle,\n CardContent,\n} from \"@/components/ui/card\";\nimport { Input } from \"@/components/ui/input\";\nimport { Button } from \"@/components/ui/button\";\nimport { Plus, Check, Copy, ThumbsUp, Trash2 } from \"lucide-react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\n\n// Quadrant definitions + star rating\nconst QUADRANTS = {\n 1: { label: \"重要 × 緊急\", color: \"border-red-500\", stars: 5 },\n 2: { label: \"重要 × 非緊急\", color: \"border-green-500\", stars: 4 },\n 3: { label: \"緊急 × 非重要\", color: \"border-yellow-500\", stars: 2 },\n 4: { label: \"非重要 × 非緊急\", color: \"border-gray-500\", stars: 1 },\n};\n\nconst TASKS_KEY = \"em_tasks\";\nconst DONE_KEY = \"em_done_tasks\";\nconst MEMO_KEY = \"em_memo\";\n\nexport default function EisenhowerMatrixTodo() {\n const [tasks, setTasks] = useState([]);\n const [done, setDone] = useState([]);\n const [memo, setMemo] = useState(\"\");\n const [addingTo, setAddingTo] = useState(null);\n const [newTaskText, setNewTaskText] = useState(\"\");\n const [editingId, setEditingId] = useState(null);\n const [editingText, setEditingText] = useState(\"\");\n const [showDone, setShowDone] = useState(false);\n const [copiedQ, setCopiedQ] = useState(null);\n\n // load\n useEffect(() => {\n setTasks(JSON.parse(localStorage.getItem(TASKS_KEY) || \"[]\"));\n setDone(JSON.parse(localStorage.getItem(DONE_KEY) || \"[]\"));\n setMemo(localStorage.getItem(MEMO_KEY) || \"\");\n }, []);\n\n // persist\n useEffect(() => { localStorage.setItem(TASKS_KEY, JSON.stringify(tasks)); }, [tasks]);\n useEffect(() => { localStorage.setItem(DONE_KEY, JSON.stringify(done)); }, [done]);\n useEffect(() => { localStorage.setItem(MEMO_KEY, memo); }, [memo]);\n\n const starString = (q) => \"★\".repeat(QUADRANTS[q].stars) + \"☆\".repeat(5 - QUADRANTS[q].stars);\n\n // task ops\n const addTask = (q) => {\n if (!newTaskText.trim()) return;\n setTasks([...tasks, { id: Date.now(), text: newTaskText.trim(), quadrant: q }]);\n setNewTaskText(\"\");\n setAddingTo(null);\n };\n const updateTaskText = (id, text) => setTasks(tasks.map((t) => (t.id === id ? { ...t, text } : t)));\n const updateQuadrant = (id, q) => setTasks(tasks.map((t) => (t.id === id ? { ...t, quadrant: q } : t)));\n const completeTask = (id) => {\n const target = tasks.find((t) => t.id === id);\n if (!target) return;\n setDone([{ ...target, completedAt: Date.now() }, ...done]);\n setTasks(tasks.filter((t) => t.id !== id));\n };\n\n // done ops\n const deleteDone = (id) => setDone(done.filter((d) => d.id !== id));\n const clearAllDone = () => setDone([]);\n\n // copy\n const fallbackCopy = (text) => {\n const ta = document.createElement(\"textarea\");\n ta.value = text;\n ta.style.position = \"fixed\";\n ta.style.opacity = \"0\";\n document.body.appendChild(ta);\n ta.select();\n document.execCommand(\"copy\");\n document.body.removeChild(ta);\n };\n const copyQuadrantTasks = (qNum) => {\n const list = tasks.filter((t) => t.quadrant === qNum);\n if (!list.length) return;\n const text = `今日の積み上げQ${qNum}\\n` + list.map((t) => `・${t.text}`).join(\"\\n\");\n if (navigator.clipboard && window.isSecureContext) {\n navigator.clipboard.writeText(text).catch(() => fallbackCopy(text));\n } else fallbackCopy(text);\n setCopiedQ(qNum);\n setTimeout(() => setCopiedQ(null), 1500);\n };\n\n return (\n

\n {/* Matrix */}\n

\n {Object.entries(QUADRANTS).map(([key, q]) => {\n const qNum = Number(key);\n const list = tasks.filter((t) => t.quadrant === qNum);\n return (\n \n \n \n {q.label}\n {starString(qNum)}\n \n

\n \n \n

\n \n \n {addingTo === qNum && (\n

\n setNewTaskText(e.target.value)} onKeyDown={(e) => { if (e.key === \"Enter\") addTask(qNum); if (e.key === \"Escape\") setAddingTo(null); }} className=\"flex-1 text-sm\" />\n \n

\n )}\n {list.length === 0 && addingTo !== qNum &&

タスクなし

}\n \n {list.map((t) => (\n \n {editingId === t.id ? (\n setEditingText(e.target.value)} onKeyDown={(e) => { if (e.key === \"Enter\") { updateTaskText(t.id, editingText); setEditingId(null); } if (e.key === \"Escape\") setEditingId(null); }} onBlur={() => { updateTaskText(t.id, editingText); setEditingId(null); }} className=\"flex-1 text-sm\" />\n ) : (\n { setEditingId(t.id); setEditingText(t.text); }}>{t.text}\n )}\n

\n \n \n

\n \n ))}\n \n \n \n );\n })}\n

\n\n {/* Completed list */}\n

\n \n {done.length > 0 && (\n \n )}\n

\n \n {showDone && (\n \n {done.length === 0 &&

完了タスクはありません

}\n {done.map((d) => (\n

\n {d.text}\n

\n {starString(d.quadrant)}\n \n

\n ))}\n \n )}\n \n

\n\n {/* Memo area */}\n

\n メモ\n