setShowImport(false)}>
e.stopPropagation()}>
-
Import Tasks
+
{t("importModalTitle")}
-
+
-
+
- TickTick: Settings → Export → Export as CSV or iCalendar
+ {t("tickTickExportHint")}
- {importResult &&
{importResult}
}
+ {importResult && (
+
+ {importResult}
+
+ )}
-
+
diff --git a/src/components/tasks/TaskDetail.tsx b/src/components/tasks/TaskDetail.tsx
index 89d7ea7..103c026 100644
--- a/src/components/tasks/TaskDetail.tsx
+++ b/src/components/tasks/TaskDetail.tsx
@@ -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
| null>(null);
const currentTaskId = useRef(task.id);
const noteRef = useRef(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) => {
- // 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) => {
+ 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) => {
+ 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) => {
- 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"}
/>
- {saving ? "Saving…" : "Auto-saved"}
+ {saving ? t("saving") : t("autoSaved")}
-