Feature: Add i18n (en/ko/ja), 3-way theme (system/light/dark), and local demo preview mode
This commit is contained in:
+282
-147
@@ -1,28 +1,31 @@
|
||||
"use client";
|
||||
import { useState, useEffect, useCallback, useRef } from "react";
|
||||
|
||||
interface Task {
|
||||
id: string; listId: string; parentId: string | null; title: string; note: string | null;
|
||||
completed: boolean; completedAt: string | null; dueDate: string | null; priority: number;
|
||||
sortOrder: number; createdAt: string; updatedAt: string;
|
||||
children: Task[]; tags: { tag: { id: string; name: string; color: string } }[];
|
||||
}
|
||||
|
||||
const PRIORITY_MAP = [
|
||||
{ label: "None", color: "var(--text-tertiary)", icon: "" },
|
||||
{ label: "Low", color: "var(--priority-low)", icon: "▼" },
|
||||
{ label: "Medium", color: "var(--priority-medium)", icon: "▶" },
|
||||
{ label: "High", color: "var(--priority-high)", icon: "▲" },
|
||||
];
|
||||
"use client";
|
||||
import React, { useState, useEffect, useCallback, useRef } from "react";
|
||||
import { useI18n } from "@/lib/i18n";
|
||||
import { Task } from "./TaskList";
|
||||
|
||||
interface Props {
|
||||
task: Task; listId: string;
|
||||
task: Task;
|
||||
listId: string;
|
||||
onClose: () => void;
|
||||
onUpdate: (t: Task) => void;
|
||||
onDelete: () => void;
|
||||
isDemo?: boolean;
|
||||
onDemoUpdateTask?: (updated: Task) => void;
|
||||
onDemoDeleteTask?: (id: string) => void;
|
||||
}
|
||||
|
||||
export function TaskDetail({ task, listId, onClose, onUpdate, onDelete }: Props) {
|
||||
export function TaskDetail({
|
||||
task,
|
||||
listId,
|
||||
onClose,
|
||||
onUpdate,
|
||||
onDelete,
|
||||
isDemo = false,
|
||||
onDemoUpdateTask,
|
||||
onDemoDeleteTask,
|
||||
}: Props) {
|
||||
const { t, lang } = useI18n();
|
||||
|
||||
const [title, setTitle] = useState(task.title);
|
||||
const [note, setNote] = useState(task.note || "");
|
||||
const [dueDate, setDueDate] = useState(task.dueDate ? task.dueDate.split("T")[0] : "");
|
||||
@@ -31,12 +34,18 @@ export function TaskDetail({ task, listId, onClose, onUpdate, onDelete }: Props)
|
||||
const [subtasks, setSubtasks] = useState(task.children || []);
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
// Store timer + current task id in refs to prevent stale saves across task switches
|
||||
const saveTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
const currentTaskId = useRef(task.id);
|
||||
const noteRef = useRef<HTMLTextAreaElement>(null);
|
||||
|
||||
// Sync state when switching to a different task — clear any pending timer first
|
||||
const priorityMap = [
|
||||
{ label: t("priorityNone"), color: "var(--text-tertiary)", icon: "" },
|
||||
{ label: t("priorityLow"), color: "var(--priority-low)", icon: "▼" },
|
||||
{ label: t("priorityMedium"), color: "var(--priority-medium)", icon: "▶" },
|
||||
{ label: t("priorityHigh"), color: "var(--priority-high)", icon: "▲" },
|
||||
];
|
||||
|
||||
// Sync state when switching task
|
||||
useEffect(() => {
|
||||
if (saveTimer.current) {
|
||||
clearTimeout(saveTimer.current);
|
||||
@@ -48,100 +57,172 @@ export function TaskDetail({ task, listId, onClose, onUpdate, onDelete }: Props)
|
||||
setDueDate(task.dueDate ? task.dueDate.split("T")[0] : "");
|
||||
setPriority(task.priority);
|
||||
setSubtasks(task.children || []);
|
||||
}, [task.id]);
|
||||
}, [task.id, task.title, task.note, task.dueDate, task.priority, task.children]);
|
||||
|
||||
// Cleanup timer on unmount
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (saveTimer.current) clearTimeout(saveTimer.current);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const save = useCallback(async (taskId: string, data: Record<string, unknown>) => {
|
||||
// Guard: don't save if task has changed since debounce was scheduled
|
||||
if (taskId !== currentTaskId.current) return;
|
||||
setSaving(true);
|
||||
try {
|
||||
const res = await fetch(`/api/tasks/${taskId}`, {
|
||||
method: "PATCH",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(data),
|
||||
const save = useCallback(
|
||||
async (taskId: string, data: Record<string, unknown>) => {
|
||||
if (taskId !== currentTaskId.current) return;
|
||||
setSaving(true);
|
||||
|
||||
if (isDemo) {
|
||||
const updatedTask: Task = {
|
||||
...task,
|
||||
...data,
|
||||
children: subtasks,
|
||||
updatedAt: new Date().toISOString(),
|
||||
} as Task;
|
||||
if (onDemoUpdateTask) onDemoUpdateTask(updatedTask);
|
||||
onUpdate(updatedTask);
|
||||
setSaving(false);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await fetch(`/api/tasks/${taskId}`, {
|
||||
method: "PATCH",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
if (res.ok) {
|
||||
const updated = await res.json();
|
||||
if (taskId === currentTaskId.current) {
|
||||
onUpdate({ ...updated, children: subtasks });
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("[TaskDetail] save failed", err);
|
||||
} finally {
|
||||
if (taskId === currentTaskId.current) setSaving(false);
|
||||
}
|
||||
},
|
||||
[isDemo, onDemoUpdateTask, onUpdate, subtasks, task]
|
||||
);
|
||||
|
||||
const debounceSave = useCallback(
|
||||
(overrides: Record<string, unknown>) => {
|
||||
if (saveTimer.current) clearTimeout(saveTimer.current);
|
||||
const taskId = currentTaskId.current;
|
||||
saveTimer.current = setTimeout(() => save(taskId, overrides), 600);
|
||||
},
|
||||
[save]
|
||||
);
|
||||
|
||||
// Insert markdown at cursor position
|
||||
const insertAtCursor = useCallback(
|
||||
(before: string, after = "", placeholder = "") => {
|
||||
const ta = noteRef.current;
|
||||
if (!ta) {
|
||||
setNote((n) => {
|
||||
const v = n + before + placeholder + after;
|
||||
debounceSave({ note: v });
|
||||
return v;
|
||||
});
|
||||
return;
|
||||
}
|
||||
const start = ta.selectionStart ?? ta.value.length;
|
||||
const end = ta.selectionEnd ?? ta.value.length;
|
||||
const selected = ta.value.slice(start, end) || placeholder;
|
||||
const newVal = ta.value.slice(0, start) + before + selected + after + ta.value.slice(end);
|
||||
setNote(newVal);
|
||||
debounceSave({ note: newVal });
|
||||
requestAnimationFrame(() => {
|
||||
ta.focus();
|
||||
ta.selectionStart = start + before.length;
|
||||
ta.selectionEnd = start + before.length + selected.length;
|
||||
});
|
||||
if (res.ok) {
|
||||
const updated = await res.json();
|
||||
// Only update if we're still on the same task
|
||||
if (taskId === currentTaskId.current) {
|
||||
},
|
||||
[debounceSave]
|
||||
);
|
||||
|
||||
const handleToggleCompleted = useCallback(
|
||||
async (newCompleted: boolean) => {
|
||||
if (isDemo) {
|
||||
const updatedTask: Task = {
|
||||
...task,
|
||||
completed: newCompleted,
|
||||
completedAt: newCompleted ? new Date().toISOString() : null,
|
||||
children: subtasks,
|
||||
};
|
||||
if (onDemoUpdateTask) onDemoUpdateTask(updatedTask);
|
||||
onUpdate(updatedTask);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await fetch(`/api/tasks/${task.id}`, {
|
||||
method: "PATCH",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ completed: newCompleted }),
|
||||
});
|
||||
if (res.ok) {
|
||||
const updated = await res.json();
|
||||
onUpdate({ ...updated, children: subtasks });
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("[TaskDetail] toggle failed", err);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("[TaskDetail] save failed", err);
|
||||
} finally {
|
||||
if (taskId === currentTaskId.current) setSaving(false);
|
||||
}
|
||||
}, [onUpdate, subtasks]);
|
||||
|
||||
const debounceSave = useCallback((overrides: Record<string, unknown>) => {
|
||||
if (saveTimer.current) clearTimeout(saveTimer.current);
|
||||
const taskId = currentTaskId.current;
|
||||
saveTimer.current = setTimeout(() => save(taskId, overrides), 800);
|
||||
}, [save]);
|
||||
|
||||
// Insert text at cursor position in the note textarea
|
||||
const insertAtCursor = useCallback((before: string, after = "", placeholder = "") => {
|
||||
const ta = noteRef.current;
|
||||
if (!ta) {
|
||||
setNote((n) => { const v = n + before + placeholder + after; debounceSave({ note: v }); return v; });
|
||||
return;
|
||||
}
|
||||
const start = ta.selectionStart ?? ta.value.length;
|
||||
const end = ta.selectionEnd ?? ta.value.length;
|
||||
const selected = ta.value.slice(start, end) || placeholder;
|
||||
const newVal = ta.value.slice(0, start) + before + selected + after + ta.value.slice(end);
|
||||
setNote(newVal);
|
||||
debounceSave({ note: newVal });
|
||||
// Restore cursor after React re-render
|
||||
requestAnimationFrame(() => {
|
||||
ta.focus();
|
||||
ta.selectionStart = start + before.length;
|
||||
ta.selectionEnd = start + before.length + selected.length;
|
||||
});
|
||||
}, [debounceSave]);
|
||||
|
||||
const handleToggleCompleted = useCallback(async (newCompleted: boolean) => {
|
||||
try {
|
||||
const res = await fetch(`/api/tasks/${task.id}`, {
|
||||
method: "PATCH",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ completed: newCompleted }),
|
||||
});
|
||||
if (res.ok) {
|
||||
const updated = await res.json();
|
||||
onUpdate({ ...updated, children: subtasks });
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("[TaskDetail] toggle failed", err);
|
||||
}
|
||||
}, [task.id, subtasks, onUpdate]);
|
||||
},
|
||||
[isDemo, onDemoUpdateTask, task, subtasks, onUpdate]
|
||||
);
|
||||
|
||||
const handleDelete = useCallback(async () => {
|
||||
if (!confirm("Delete this task?")) return;
|
||||
if (!confirm(t("deleteTaskConfirm"))) return;
|
||||
|
||||
if (isDemo) {
|
||||
if (onDemoDeleteTask) onDemoDeleteTask(task.id);
|
||||
onDelete();
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await fetch(`/api/tasks/${task.id}`, { method: "DELETE" });
|
||||
onDelete();
|
||||
} catch (err) {
|
||||
console.error("[TaskDetail] delete failed", err);
|
||||
}
|
||||
}, [task.id, onDelete]);
|
||||
}, [t, isDemo, onDemoDeleteTask, task.id, onDelete]);
|
||||
|
||||
const addSubtask = useCallback(async () => {
|
||||
const t = newSubtitle.trim();
|
||||
if (!t) return;
|
||||
const tTitle = newSubtitle.trim();
|
||||
if (!tTitle) return;
|
||||
|
||||
if (isDemo) {
|
||||
const newSub: Task = {
|
||||
id: "demo-sub-" + Date.now(),
|
||||
listId,
|
||||
parentId: task.id,
|
||||
title: tTitle,
|
||||
note: null,
|
||||
completed: false,
|
||||
completedAt: null,
|
||||
dueDate: null,
|
||||
priority: 0,
|
||||
sortOrder: subtasks.length,
|
||||
createdAt: new Date().toISOString(),
|
||||
updatedAt: new Date().toISOString(),
|
||||
children: [],
|
||||
tags: [],
|
||||
};
|
||||
const nextSubs = [...subtasks, newSub];
|
||||
setSubtasks(nextSubs);
|
||||
setNewSubtitle("");
|
||||
const updatedParent = { ...task, children: nextSubs };
|
||||
if (onDemoUpdateTask) onDemoUpdateTask(updatedParent);
|
||||
onUpdate(updatedParent);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await fetch("/api/tasks", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ title: t, listId, parentId: task.id }),
|
||||
body: JSON.stringify({ title: tTitle, listId, parentId: task.id }),
|
||||
});
|
||||
if (res.ok) {
|
||||
const sub = await res.json();
|
||||
@@ -155,40 +236,70 @@ export function TaskDetail({ task, listId, onClose, onUpdate, onDelete }: Props)
|
||||
} catch (err) {
|
||||
console.error("[TaskDetail] addSubtask failed", err);
|
||||
}
|
||||
}, [newSubtitle, listId, task, onUpdate]);
|
||||
}, [newSubtitle, isDemo, listId, task, subtasks, onDemoUpdateTask, onUpdate]);
|
||||
|
||||
const toggleSubtask = useCallback(async (sub: Task) => {
|
||||
try {
|
||||
const res = await fetch(`/api/tasks/${sub.id}`, {
|
||||
method: "PATCH",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ completed: !sub.completed }),
|
||||
});
|
||||
if (res.ok) {
|
||||
const updated = await res.json();
|
||||
const toggleSubtask = useCallback(
|
||||
async (sub: Task) => {
|
||||
const newCompleted = !sub.completed;
|
||||
|
||||
if (isDemo) {
|
||||
const nextSubs = subtasks.map((s) =>
|
||||
s.id === sub.id
|
||||
? { ...s, completed: newCompleted, completedAt: newCompleted ? new Date().toISOString() : null }
|
||||
: s
|
||||
);
|
||||
setSubtasks(nextSubs);
|
||||
const updatedParent = { ...task, children: nextSubs };
|
||||
if (onDemoUpdateTask) onDemoUpdateTask(updatedParent);
|
||||
onUpdate(updatedParent);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await fetch(`/api/tasks/${sub.id}`, {
|
||||
method: "PATCH",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ completed: newCompleted }),
|
||||
});
|
||||
if (res.ok) {
|
||||
const updated = await res.json();
|
||||
setSubtasks((prev) => {
|
||||
const next = prev.map((s) => (s.id === sub.id ? updated : s));
|
||||
onUpdate({ ...task, children: next });
|
||||
return next;
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("[TaskDetail] toggleSubtask failed", err);
|
||||
}
|
||||
},
|
||||
[isDemo, subtasks, task, onDemoUpdateTask, onUpdate]
|
||||
);
|
||||
|
||||
const deleteSubtask = useCallback(
|
||||
async (id: string) => {
|
||||
if (isDemo) {
|
||||
const nextSubs = subtasks.filter((s) => s.id !== id);
|
||||
setSubtasks(nextSubs);
|
||||
const updatedParent = { ...task, children: nextSubs };
|
||||
if (onDemoUpdateTask) onDemoUpdateTask(updatedParent);
|
||||
onUpdate(updatedParent);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await fetch(`/api/tasks/${id}`, { method: "DELETE" });
|
||||
setSubtasks((prev) => {
|
||||
const next = prev.map((s) => (s.id === sub.id ? updated : s));
|
||||
const next = prev.filter((s) => s.id !== id);
|
||||
onUpdate({ ...task, children: next });
|
||||
return next;
|
||||
});
|
||||
} catch (err) {
|
||||
console.error("[TaskDetail] deleteSubtask failed", err);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("[TaskDetail] toggleSubtask failed", err);
|
||||
}
|
||||
}, [task, onUpdate]);
|
||||
|
||||
const deleteSubtask = useCallback(async (id: string) => {
|
||||
try {
|
||||
await fetch(`/api/tasks/${id}`, { method: "DELETE" });
|
||||
setSubtasks((prev) => {
|
||||
const next = prev.filter((s) => s.id !== id);
|
||||
onUpdate({ ...task, children: next });
|
||||
return next;
|
||||
});
|
||||
} catch (err) {
|
||||
console.error("[TaskDetail] deleteSubtask failed", err);
|
||||
}
|
||||
}, [task, onUpdate]);
|
||||
},
|
||||
[isDemo, subtasks, task, onDemoUpdateTask, onUpdate]
|
||||
);
|
||||
|
||||
const completedCount = subtasks.filter((s) => s.completed).length;
|
||||
const progressPct = subtasks.length > 0 ? Math.round((completedCount / subtasks.length) * 100) : 0;
|
||||
@@ -204,13 +315,17 @@ export function TaskDetail({ task, listId, onClose, onUpdate, onDelete }: Props)
|
||||
aria-label={task.completed ? "Mark incomplete" : "Mark complete"}
|
||||
/>
|
||||
<span style={{ flex: 1, fontSize: 12, color: "var(--text-tertiary)", fontWeight: 500 }}>
|
||||
{saving ? "Saving…" : "Auto-saved"}
|
||||
{saving ? t("saving") : t("autoSaved")}
|
||||
</span>
|
||||
<button className="btn btn-ghost btn-sm btn-danger" id="delete-task-btn" onClick={handleDelete} title="Delete task">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14H6L5 6"/><path d="M10 11v6M14 11v6"/><path d="M9 6V4h6v2"/></svg>
|
||||
<button className="btn btn-ghost btn-sm btn-danger" id="delete-task-btn" onClick={handleDelete} title={t("deleteTaskConfirm")}>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<polyline points="3 6 5 6 21 6" /><path d="M19 6l-1 14H6L5 6" /><path d="M10 11v6M14 11v6" /><path d="M9 6V4h6v2" />
|
||||
</svg>
|
||||
</button>
|
||||
<button className="detail-close-btn" id="detail-close-btn" onClick={onClose} title="Close">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
||||
<button className="detail-close-btn" id="detail-close-btn" onClick={onClose} title={t("cancel")}>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -225,7 +340,7 @@ export function TaskDetail({ task, listId, onClose, onUpdate, onDelete }: Props)
|
||||
setTitle(e.target.value);
|
||||
debounceSave({ title: e.target.value });
|
||||
}}
|
||||
placeholder="Task title"
|
||||
placeholder={t("taskTitlePlaceholder")}
|
||||
rows={2}
|
||||
style={{
|
||||
textDecoration: task.completed ? "line-through" : "none",
|
||||
@@ -235,15 +350,18 @@ export function TaskDetail({ task, listId, onClose, onUpdate, onDelete }: Props)
|
||||
|
||||
{/* Priority */}
|
||||
<div className="detail-section">
|
||||
<div className="detail-section-label">Priority</div>
|
||||
<div className="detail-section-label">{t("priority")}</div>
|
||||
<div className="priority-selector">
|
||||
{PRIORITY_MAP.map((p, i) => (
|
||||
{priorityMap.map((p, i) => (
|
||||
<button
|
||||
key={i}
|
||||
id={`priority-${i}`}
|
||||
className={`priority-btn${priority === i ? ` active-${p.label.toLowerCase()}` : ""}`}
|
||||
className={`priority-btn${priority === i ? ` active-${["none", "low", "medium", "high"][i]}` : ""}`}
|
||||
style={{ color: priority === i ? p.color : undefined }}
|
||||
onClick={() => { setPriority(i); debounceSave({ priority: i }); }}
|
||||
onClick={() => {
|
||||
setPriority(i);
|
||||
debounceSave({ priority: i });
|
||||
}}
|
||||
>
|
||||
{p.icon && <span style={{ color: p.color }}>{p.icon}</span>}
|
||||
{p.label}
|
||||
@@ -254,7 +372,7 @@ export function TaskDetail({ task, listId, onClose, onUpdate, onDelete }: Props)
|
||||
|
||||
{/* Due date */}
|
||||
<div className="detail-section">
|
||||
<div className="detail-section-label">Due Date</div>
|
||||
<div className="detail-section-label">{t("dueDate")}</div>
|
||||
<div style={{ display: "flex", gap: 8, alignItems: "center" }}>
|
||||
<input
|
||||
id="due-date-input"
|
||||
@@ -270,32 +388,35 @@ export function TaskDetail({ task, listId, onClose, onUpdate, onDelete }: Props)
|
||||
{dueDate && (
|
||||
<button
|
||||
className="btn btn-ghost btn-sm"
|
||||
onClick={() => { setDueDate(""); debounceSave({ dueDate: null }); }}
|
||||
onClick={() => {
|
||||
setDueDate("");
|
||||
debounceSave({ dueDate: null });
|
||||
}}
|
||||
>
|
||||
Clear
|
||||
{t("clear")}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Note / Memo */}
|
||||
{/* Notes — wide memo area */}
|
||||
<div className="detail-section" style={{ flex: 1 }}>
|
||||
<div className="detail-section-label">Notes</div>
|
||||
<div className="detail-section-label">{t("notes")}</div>
|
||||
<div className="note-editor-wrap">
|
||||
<div className="note-editor-toolbar">
|
||||
<button className="note-toolbar-btn" title="Bold (Ctrl+B)" onClick={() => insertAtCursor("**", "**", "bold")}>B</button>
|
||||
<button className="note-toolbar-btn" title="Italic (Ctrl+I)" style={{ fontStyle: "italic" }} onClick={() => insertAtCursor("*", "*", "italic")}>I</button>
|
||||
<button className="note-toolbar-btn" title="Heading" onClick={() => insertAtCursor("## ", "", "Heading")}>H</button>
|
||||
<button className="note-toolbar-btn" title="Bullet list" onClick={() => insertAtCursor("\n- ", "", "item")}>•</button>
|
||||
<button className="note-toolbar-btn" title="Numbered list" onClick={() => insertAtCursor("\n1. ", "", "item")}>1.</button>
|
||||
<button className="note-toolbar-btn" title="Checkbox" onClick={() => insertAtCursor("\n- [ ] ", "", "task")}>☐</button>
|
||||
<button className="note-toolbar-btn" title="Code" style={{ fontFamily: "monospace", fontSize: 11 }} onClick={() => insertAtCursor("`", "`", "code")}>{"`"}</button>
|
||||
<button className="note-toolbar-btn" title={t("bold")} onClick={() => insertAtCursor("**", "**", "bold")}>B</button>
|
||||
<button className="note-toolbar-btn" title={t("italic")} style={{ fontStyle: "italic" }} onClick={() => insertAtCursor("*", "*", "italic")}>I</button>
|
||||
<button className="note-toolbar-btn" title={t("heading")} onClick={() => insertAtCursor("## ", "", "Heading")}>H</button>
|
||||
<button className="note-toolbar-btn" title={t("bulletList")} onClick={() => insertAtCursor("\n- ", "", "item")}>•</button>
|
||||
<button className="note-toolbar-btn" title={t("numberedList")} onClick={() => insertAtCursor("\n1. ", "", "item")}>1.</button>
|
||||
<button className="note-toolbar-btn" title={t("checkbox")} onClick={() => insertAtCursor("\n- [ ] ", "", "task")}>☐</button>
|
||||
<button className="note-toolbar-btn" title={t("code")} style={{ fontFamily: "monospace", fontSize: 11 }} onClick={() => insertAtCursor("`", "`", "code")}>{"`"}</button>
|
||||
</div>
|
||||
<textarea
|
||||
ref={noteRef}
|
||||
id="note-textarea"
|
||||
className="note-textarea"
|
||||
placeholder={"Add notes, details, or anything you need to remember…\n\nMarkdown: **bold**, *italic*, # heading, - list, - [ ] checkbox"}
|
||||
placeholder={t("notesPlaceholder")}
|
||||
value={note}
|
||||
onChange={(e) => {
|
||||
setNote(e.target.value);
|
||||
@@ -308,9 +429,11 @@ export function TaskDetail({ task, listId, onClose, onUpdate, onDelete }: Props)
|
||||
{/* Sub-tasks */}
|
||||
<div className="detail-section">
|
||||
<div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 8 }}>
|
||||
<div className="detail-section-label">Sub-tasks</div>
|
||||
<div className="detail-section-label">{t("subtasks")}</div>
|
||||
{subtasks.length > 0 && (
|
||||
<span style={{ fontSize: 11, color: "var(--text-tertiary)" }}>{completedCount}/{subtasks.length}</span>
|
||||
<span style={{ fontSize: 11, color: "var(--text-tertiary)" }}>
|
||||
{completedCount}/{subtasks.length}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -339,7 +462,9 @@ export function TaskDetail({ task, listId, onClose, onUpdate, onDelete }: Props)
|
||||
onClick={() => deleteSubtask(sub.id)}
|
||||
aria-label="Delete subtask"
|
||||
>
|
||||
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
||||
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
@@ -347,16 +472,21 @@ export function TaskDetail({ task, listId, onClose, onUpdate, onDelete }: Props)
|
||||
<span style={{ fontSize: 16, lineHeight: 1, color: "var(--accent)" }}>+</span>
|
||||
<input
|
||||
id="add-subtask-input"
|
||||
placeholder="Add sub-task…"
|
||||
placeholder={t("addSubtaskPlaceholder")}
|
||||
style={{ flex: 1, background: "none", fontSize: 13, color: "var(--text-primary)" }}
|
||||
value={newSubtitle}
|
||||
onChange={(e) => setNewSubtitle(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") { e.preventDefault(); addSubtask(); }
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
addSubtask();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{newSubtitle.trim() && (
|
||||
<button className="btn btn-primary btn-sm" id="add-subtask-btn" onClick={addSubtask}>Add</button>
|
||||
<button className="btn btn-primary btn-sm" id="add-subtask-btn" onClick={addSubtask}>
|
||||
{t("add")}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
@@ -364,7 +494,12 @@ export function TaskDetail({ task, listId, onClose, onUpdate, onDelete }: Props)
|
||||
|
||||
{/* Metadata */}
|
||||
<div style={{ fontSize: 11, color: "var(--text-tertiary)", paddingTop: 8, borderTop: "1px solid var(--border)" }}>
|
||||
Created {new Date(task.createdAt).toLocaleDateString("ko-KR", { year: "numeric", month: "short", day: "numeric" })}
|
||||
{t("created")}{" "}
|
||||
{new Date(task.createdAt).toLocaleDateString(lang === "ko" ? "ko-KR" : lang === "ja" ? "ja-JP" : "en-US", {
|
||||
year: "numeric",
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
Reference in New Issue
Block a user