Fix: Full N-depth recursive subtask tree rendering in main list, universal custom context menu on all subtask levels, and bidirectional realtime sync
This commit is contained in:
Wonhee Han
@@ -8,24 +8,21 @@
|
||||
|
||||
사용자의 핵심 요구사항:
|
||||
1. **TickTick 스타일 To-Do 리스트 독립 웹앱**:
|
||||
- 체크리스트는 **메인 - 하위(Sub-task)** 계층 구조를 갖춤.
|
||||
- **적응형(Adaptive) 와이드 메모장**: 우측 패널의 대부분을 메모장이 차지하며, 작성한 마크다운이 실제 웹 문서처럼 미려한 GUI 형태로 렌더링(Preview & Live Checkbox)되어야 함.
|
||||
- 체크리스트는 **메인 - 하위(Sub-task)** 2단계 계층 구조를 갖추며, 양쪽 패널 간 1:1 실시간 동기화.
|
||||
- **적응형(Adaptive) 와이드 메모장**: 우측 패널의 대부분을 메모장이 차지하며, 작성한 마크다운이 실제 웹 문서처럼 미려한 GUI 형태로 렌더링(Preview & Interactive Checkbox) 지원.
|
||||
- **인라인 즉시 수정 UX**: 상단 프로젝트 제목 및 태스크 제목을 더블클릭/클릭으로 즉시 수정 가능.
|
||||
2. **셀프호스팅 & 프라이버시 중심 멀티유저**:
|
||||
- SNS 형태가 아닌 개인별 프라이버시가 완벽히 보장되는 독립 멀티유저 플랫폼.
|
||||
- Docker 배포 지원 (PostgreSQL 포함).
|
||||
- Docker 배포 지원 (PostgreSQL 16 포함, Dockerfile & docker-compose.yml 완비).
|
||||
3. **외부 플랫폼 연동 & Import**:
|
||||
- TickTick 등 외부 플랫폼에서 내보내기한 CSV 및 ICS(iCalendar) 파일 Import 지원.
|
||||
- TickTick 등 외부 플랫폼에서 내보내기한 CSV 및 ICS(iCalendar) 파일 Import 지원 (하단 프로필 메뉴 내 배치).
|
||||
- Galaxy(Android) 폰 연동: DAVx⁵ 앱을 통한 CalDAV/CardDAV (`/api/dav`) 동기화 지원.
|
||||
4. **PWA (Progressive Web App)**:
|
||||
- 모바일/데스크톱 설치 가능 및 오프라인 캐싱 지원.
|
||||
5. **디자인 시스템**:
|
||||
- TickTick 급의 심플함 + OneUI / Material You / Vercel 스타일의 직관적이고 미려한 UI.
|
||||
- 3-Panel 반응형 레이아웃 (사이드바 - 태스크 목록 - 와이드 상세 메모 패널).
|
||||
6. **추가 요구사항 (Phase 2 & Phase 3)**:
|
||||
- **다국어 (i18n)**: 영어(기본) → 한국어 → 일본어 순서 지원 (커스텀 팝오버 UI 탑재).
|
||||
- **테마 모드**: 시스템(System) / 라이트(Light) / 다크(Dark) 3-Way 토글.
|
||||
- **DB 없는 데모/미리보기 모드**: 로컬 환경에서 DB 구동 없이도 UI/UX 및 모든 기능을 즉시 시연 및 확인할 수 있는 Demo 모드 (`/demo`, LocalStorage 연동).
|
||||
- **인프라**: Nginx Proxy Manager (NPM)로 역방향 프록시할 예정이므로 자체 SSL/Nginx 없이 포트 3000 컨테이너로 동작.
|
||||
5. **디자인 시스템 & 반응형 웹앱 UX**:
|
||||
- TickTick / OneUI / Vercel 디자인 언어.
|
||||
- **네이티브 웹앱 느낌의 커스텀 우클릭 컨텍스트 메뉴(ContextMenu)** 지원.
|
||||
- 부드러운 사이드바 애니메이션 및 화면 테마/언어 컨트롤 잘림 방지.
|
||||
|
||||
---
|
||||
|
||||
@@ -40,14 +37,15 @@ src/
|
||||
│ └── api/ (auth, lists, tasks, import, dav)
|
||||
├── components/
|
||||
│ ├── layout/
|
||||
│ │ ├── AppShell.tsx ← 3-Panel 메인 컨테이너
|
||||
│ │ └── Sidebar.tsx ← 프로젝트 목록, 언어 셀렉터, 테마 토글, 유저 메뉴
|
||||
│ │ ├── AppShell.tsx ← 3-Panel 메인 컨테이너 (실시간 하위 태스크 & 인라인 동기화)
|
||||
│ │ └── Sidebar.tsx ← 프로젝트 목록, 언어 셀렉터, 테마 토글, 유저 프로필 팝오버(Import 내장)
|
||||
│ ├── tasks/
|
||||
│ │ ├── TaskList.tsx ← 중앙 체크리스트 (하위 태스크 아코디언, 빠른 추가)
|
||||
│ │ ├── TaskDetail.tsx ← 우측 상세 패널 (컴팩트 메타바 + 와이드 메모장 + 하단 하위할일)
|
||||
│ │ ├── TaskList.tsx ← 중앙 체크리스트 (인라인 제목 수정, 하위 태스크 추가, 우클릭 메뉴)
|
||||
│ │ ├── TaskDetail.tsx ← 우측 상세 패널 (TickTick 스타일 메타바 + 와이드 메모장 + 하단 하위할일)
|
||||
│ │ └── MarkdownNoteEditor.tsx ← 👁️ Preview / ✏️ Edit 탭, 마크다운 툴바, 인터랙티브 체크박스
|
||||
│ └── ui/
|
||||
│ └── LanguageSelector.tsx ← OneUI/Vercel 스타일 커스텀 글래스모피즘 언어 팝오버
|
||||
│ ├── LanguageSelector.tsx ← OneUI/Vercel 스타일 커스텀 글래스모피즘 언어 팝오버
|
||||
│ └── ContextMenu.tsx ← 네이티브 웹앱 커스텀 우클릭 컨텍스트 메뉴
|
||||
└── lib/
|
||||
├── i18n/ (en, ko, ja 사전 및 useI18n 훅)
|
||||
├── mockData.ts ← Demo 모드용 LocalStorage Store
|
||||
@@ -58,14 +56,16 @@ src/
|
||||
|
||||
## 3. 롤백 포인트 (Checkpoints)
|
||||
|
||||
- **`checkpoint-v1.0`** (`backup-v1.0`): 기본 Next.js 16 + Prisma + NextAuth + CardDAV 기반 구조.
|
||||
- **`checkpoint-v2.0`**: i18n(EN/KO/JA), 3-Way Theme(System/Light/Dark), Demo Mode 탑재.
|
||||
- **`checkpoint-v2.1`**: **(현재 최신)** 리치 마크다운 GUI 렌더러(MarkdownNoteEditor), 적응형 와이드 메모장 레이아웃, 커스텀 LanguageSelector 팝오버 적용.
|
||||
- **`checkpoint-v1.0`**: 기본 Full-Stack 기반 시점
|
||||
- **`checkpoint-v2.0`**: i18n(EN/KO/JA), 3-Way Theme(System/Light/Dark), Demo Mode 탑재
|
||||
- **`checkpoint-v2.1`**: 리치 마크다운 GUI 렌더러(MarkdownNoteEditor), 적응형 와이드 메모장
|
||||
- **`checkpoint-v2.2`**: 하위 태스크 실시간 동기화 & 인라인 즉시 수정 UX
|
||||
- **`checkpoint-v3.0`**: **(현재 최신)** 부드러운 사이드바 애니메이션, 테마 버튼 잘림 완벽 해결, Import 기능 프로필 메뉴 이동, 커스텀 웹앱 우클릭 컨텍스트 메뉴, TickTick 스타일 우측 상세 탭 완비
|
||||
|
||||
---
|
||||
|
||||
## 4. 향후 작업 가이드 (For Next Agents)
|
||||
## 4. 개발 규칙 및 주의사항
|
||||
|
||||
1. **메모장 우선 원칙**: 메모장은 항상 상세 패널의 메인 공간(`flex: 1`)을 차지하도록 유지할 것.
|
||||
2. **마크다운 상호작용**: Preview 모드에서 `- [ ]` 체크박스 클릭 시 원본 텍스트의 체크 상태가 토글되는 기능을 유지할 것.
|
||||
3. **i18n & 테마 무결성**: 새로운 텍스트는 `src/lib/i18n`의 en, ko, ja 사전에 모두 추가할 것.
|
||||
1. **메모장 우선 원칙**: 우측 상세 탭에서 메모장은 항상 메인 영역(`flex: 1`)을 차지하도록 유지할 것.
|
||||
2. **웹앱 인터랙션**: 브라우저 기본 컨텍스트 메뉴 대신 `ContextMenu.tsx`를 통해 앱스러운 UX를 유지할 것.
|
||||
3. **i18n 무결성**: 텍스트 추가 시 `src/lib/i18n`의 en, ko, ja 사전에 모두 추가할 것.
|
||||
@@ -3,7 +3,16 @@ import { useState, useCallback, useEffect } from "react";
|
||||
import { Sidebar } from "./Sidebar";
|
||||
import { TaskList, Task, List, User } from "../tasks/TaskList";
|
||||
import { TaskDetail } from "../tasks/TaskDetail";
|
||||
import { getDemoStore, saveDemoStore, MockList, MockTask } from "@/lib/mockData";
|
||||
import {
|
||||
getDemoStore,
|
||||
saveDemoStore,
|
||||
MockList,
|
||||
MockTask,
|
||||
updateTaskInTree,
|
||||
deleteTaskInTree,
|
||||
addTaskToTree,
|
||||
findTaskInTree,
|
||||
} from "@/lib/mockData";
|
||||
|
||||
interface AppShellProps {
|
||||
user: User;
|
||||
@@ -47,22 +56,9 @@ export function AppShell({ user, isDemo = false }: AppShellProps) {
|
||||
setSelectedTask(task);
|
||||
}, []);
|
||||
|
||||
// Update a task and sync with main list and selected panel
|
||||
// Update a task in full tree (supports unlimited N-depth nesting)
|
||||
const handleTaskUpdate = useCallback((updated: Task) => {
|
||||
setTasks((prev) =>
|
||||
prev.map((t) => {
|
||||
if (t.id === updated.id) {
|
||||
return { ...updated, children: updated.children || t.children || [] };
|
||||
}
|
||||
// If a sub-task was updated directly, update parent's children
|
||||
if (t.children && t.children.some((c) => c.id === updated.id)) {
|
||||
const newChildren = t.children.map((c) => (c.id === updated.id ? updated : c));
|
||||
return { ...t, children: newChildren };
|
||||
}
|
||||
return t;
|
||||
})
|
||||
);
|
||||
|
||||
setTasks((prev) => updateTaskInTree(prev as MockTask[], updated as MockTask) as Task[]);
|
||||
setSelectedTask((prev) => {
|
||||
if (prev && prev.id === updated.id) {
|
||||
return { ...updated, children: updated.children || prev.children || [] };
|
||||
@@ -105,7 +101,7 @@ export function AppShell({ user, isDemo = false }: AppShellProps) {
|
||||
}
|
||||
};
|
||||
|
||||
// Demo Handlers
|
||||
// Demo Handlers with Full N-Depth Recursive Tree Support
|
||||
const handleDemoCreateList = (name: string, color: string) => {
|
||||
const newList: MockList = {
|
||||
id: "demo-list-" + Date.now(),
|
||||
@@ -150,79 +146,41 @@ export function AppShell({ user, isDemo = false }: AppShellProps) {
|
||||
tags: [],
|
||||
};
|
||||
const store = getDemoStore();
|
||||
const newTasks = addTaskToTree(store.tasks, parentId, newTask as MockTask);
|
||||
saveDemoStore(store.lists, newTasks);
|
||||
|
||||
if (parentId) {
|
||||
// Add as subtask to parent
|
||||
const newTasks = store.tasks.map((t) => {
|
||||
if (t.id === parentId) {
|
||||
const currentChildren = t.children || [];
|
||||
return { ...t, children: [...currentChildren, newTask as MockTask] };
|
||||
}
|
||||
return t;
|
||||
});
|
||||
saveDemoStore(store.lists, newTasks);
|
||||
setTasks((prev) =>
|
||||
prev.map((t) => (t.id === parentId ? { ...t, children: [...(t.children || []), newTask] } : t))
|
||||
setTasks((prev) => addTaskToTree(prev as MockTask[], parentId, newTask as MockTask) as Task[]);
|
||||
|
||||
// If currently selected task is the parent, update its children in the detail panel immediately
|
||||
if (selectedTask && selectedTask.id === parentId) {
|
||||
setSelectedTask((prev) =>
|
||||
prev ? { ...prev, children: [...(prev.children || []), newTask] } : prev
|
||||
);
|
||||
if (selectedTask && selectedTask.id === parentId) {
|
||||
setSelectedTask((prev) => (prev ? { ...prev, children: [...(prev.children || []), newTask] } : prev));
|
||||
}
|
||||
} else {
|
||||
// Top-level task
|
||||
const newTasks = [...store.tasks, newTask as MockTask];
|
||||
saveDemoStore(store.lists, newTasks);
|
||||
setTasks((prev) => [...prev, newTask]);
|
||||
}
|
||||
refresh();
|
||||
};
|
||||
|
||||
const handleDemoToggleTask = (id: string, completed: boolean) => {
|
||||
const store = getDemoStore();
|
||||
const newTasks = store.tasks.map((t) => {
|
||||
if (t.id === id) {
|
||||
return { ...t, completed, completedAt: completed ? new Date().toISOString() : null };
|
||||
}
|
||||
if (t.children && t.children.some((c) => c.id === id)) {
|
||||
const newChildren = t.children.map((c) =>
|
||||
c.id === id ? { ...c, completed, completedAt: completed ? new Date().toISOString() : null } : c
|
||||
);
|
||||
return { ...t, children: newChildren };
|
||||
}
|
||||
return t;
|
||||
});
|
||||
saveDemoStore(store.lists, newTasks);
|
||||
const target = findTaskInTree(store.tasks, id);
|
||||
if (target) {
|
||||
const updated = {
|
||||
...target,
|
||||
completed,
|
||||
completedAt: completed ? new Date().toISOString() : null,
|
||||
};
|
||||
const newTasks = updateTaskInTree(store.tasks, updated);
|
||||
saveDemoStore(store.lists, newTasks);
|
||||
setTasks((prev) =>
|
||||
(updateTaskInTree(prev as MockTask[], updated) as Task[]).filter((t) => showCompleted || !t.completed)
|
||||
);
|
||||
|
||||
setTasks((prev) =>
|
||||
prev
|
||||
.map((t) => {
|
||||
if (t.id === id) {
|
||||
return { ...t, completed, completedAt: completed ? new Date().toISOString() : null };
|
||||
}
|
||||
if (t.children && t.children.some((c) => c.id === id)) {
|
||||
const newChildren = t.children.map((c) =>
|
||||
c.id === id ? { ...c, completed, completedAt: completed ? new Date().toISOString() : null } : c
|
||||
);
|
||||
return { ...t, children: newChildren };
|
||||
}
|
||||
return t;
|
||||
})
|
||||
.filter((t) => showCompleted || !t.completed)
|
||||
);
|
||||
|
||||
if (selectedTask) {
|
||||
if (selectedTask.id === id) {
|
||||
setSelectedTask((prev) => (prev ? { ...prev, completed, completedAt: completed ? new Date().toISOString() : null } : prev));
|
||||
} else if (selectedTask.children && selectedTask.children.some((c) => c.id === id)) {
|
||||
setSelectedTask((prev) =>
|
||||
prev
|
||||
? {
|
||||
...prev,
|
||||
children: prev.children.map((c) =>
|
||||
c.id === id ? { ...c, completed, completedAt: completed ? new Date().toISOString() : null } : c
|
||||
),
|
||||
}
|
||||
: prev
|
||||
);
|
||||
// Keep selectedTask 100% in sync with the tree
|
||||
if (selectedTask) {
|
||||
const latestSelected = findTaskInTree(newTasks, selectedTask.id);
|
||||
if (latestSelected) {
|
||||
setSelectedTask(latestSelected as Task);
|
||||
}
|
||||
}
|
||||
}
|
||||
refresh();
|
||||
@@ -230,32 +188,18 @@ export function AppShell({ user, isDemo = false }: AppShellProps) {
|
||||
|
||||
const handleDemoUpdateTask = (updated: Task) => {
|
||||
const store = getDemoStore();
|
||||
const newTasks = store.tasks.map((t) => (t.id === updated.id ? (updated as MockTask) : t));
|
||||
const newTasks = updateTaskInTree(store.tasks, updated as MockTask);
|
||||
saveDemoStore(store.lists, newTasks);
|
||||
handleTaskUpdate(updated);
|
||||
};
|
||||
|
||||
const handleDemoDeleteTask = (id: string) => {
|
||||
const store = getDemoStore();
|
||||
// Remove if main task or remove from parent children
|
||||
const newTasks = store.tasks
|
||||
.filter((t) => t.id !== id)
|
||||
.map((t) => {
|
||||
if (t.children && t.children.some((c) => c.id === id)) {
|
||||
return { ...t, children: t.children.filter((c) => c.id !== id) };
|
||||
}
|
||||
return t;
|
||||
});
|
||||
const newTasks = deleteTaskInTree(store.tasks, id);
|
||||
saveDemoStore(store.lists, newTasks);
|
||||
setTasks((prev) =>
|
||||
prev
|
||||
.filter((t) => t.id !== id)
|
||||
.map((t) => (t.children ? { ...t, children: t.children.filter((c) => c.id !== id) } : t))
|
||||
);
|
||||
setTasks((prev) => deleteTaskInTree(prev as MockTask[], id) as Task[]);
|
||||
if (selectedTask?.id === id) {
|
||||
setSelectedTask(null);
|
||||
} else if (selectedTask?.children?.some((c) => c.id === id)) {
|
||||
setSelectedTask((prev) => (prev ? { ...prev, children: prev.children.filter((c) => c.id !== id) } : prev));
|
||||
}
|
||||
refresh();
|
||||
};
|
||||
@@ -267,25 +211,12 @@ export function AppShell({ user, isDemo = false }: AppShellProps) {
|
||||
|
||||
if (isDemo) {
|
||||
const store = getDemoStore();
|
||||
const newTasks = store.tasks.map((t) => {
|
||||
if (t.id === taskId) return { ...t, title: trimmed };
|
||||
if (t.children && t.children.some((c) => c.id === taskId)) {
|
||||
return { ...t, children: t.children.map((c) => (c.id === taskId ? { ...c, title: trimmed } : c)) };
|
||||
}
|
||||
return t;
|
||||
});
|
||||
saveDemoStore(store.lists, newTasks);
|
||||
setTasks((prev) =>
|
||||
prev.map((t) => {
|
||||
if (t.id === taskId) return { ...t, title: trimmed };
|
||||
if (t.children && t.children.some((c) => c.id === taskId)) {
|
||||
return { ...t, children: t.children.map((c) => (c.id === taskId ? { ...c, title: trimmed } : c)) };
|
||||
}
|
||||
return t;
|
||||
})
|
||||
);
|
||||
if (selectedTask?.id === taskId) {
|
||||
setSelectedTask((prev) => (prev ? { ...prev, title: trimmed } : prev));
|
||||
const target = findTaskInTree(store.tasks, taskId);
|
||||
if (target) {
|
||||
const updated = { ...target, title: trimmed };
|
||||
const newTasks = updateTaskInTree(store.tasks, updated);
|
||||
saveDemoStore(store.lists, newTasks);
|
||||
handleTaskUpdate(updated as Task);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
+111
-162
@@ -1,4 +1,4 @@
|
||||
"use client";
|
||||
"use client";
|
||||
import React, { useState, useEffect, useRef, useCallback } from "react";
|
||||
import { useI18n } from "@/lib/i18n";
|
||||
import { ContextMenu, MenuItem } from "@/components/ui/ContextMenu";
|
||||
@@ -17,7 +17,7 @@ export interface Task {
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
children: Task[];
|
||||
tags: { tag: { id: string; name: string; color: string } }[];
|
||||
tags?: { tag: { id: string; name: string; color: string } }[];
|
||||
}
|
||||
|
||||
export interface List { id: string; name: string; color: string; icon: string }
|
||||
@@ -32,17 +32,19 @@ function isOverdue(d: string | null) {
|
||||
|
||||
interface TaskItemProps {
|
||||
task: Task;
|
||||
depth?: number;
|
||||
isSelected: boolean;
|
||||
onSelect: (t: Task) => void;
|
||||
onToggle: (id: string, completed: boolean) => void;
|
||||
onUpdateTitle: (id: string, title: string) => void;
|
||||
onAddSubtask: (title: string, parentId: string) => void;
|
||||
onContextMenu: (x: number, y: number, task: Task) => void;
|
||||
onDeleteTask?: (id: string) => void;
|
||||
}
|
||||
|
||||
function TaskItem({
|
||||
// Recursive Task Tree Item (Supports 1st, 2nd, 3rd, N-level sub-tasks seamlessly)
|
||||
function RecursiveTaskItem({
|
||||
task,
|
||||
depth = 0,
|
||||
isSelected,
|
||||
onSelect,
|
||||
onToggle,
|
||||
@@ -62,6 +64,7 @@ function TaskItem({
|
||||
const subInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const completedChildren = task.children?.filter((c) => c.completed).length || 0;
|
||||
const totalChildren = task.children?.length || 0;
|
||||
|
||||
useEffect(() => {
|
||||
setTempTitle(task.title);
|
||||
@@ -115,17 +118,50 @@ function TaskItem({
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ position: "relative" }}>
|
||||
<div style={{ paddingLeft: depth > 0 ? 24 : 0, position: "relative" }}>
|
||||
<div
|
||||
className={`task-item${task.completed ? " completed" : ""}${isSelected ? " selected" : ""}`}
|
||||
onClick={() => onSelect(task)}
|
||||
onContextMenu={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
onContextMenu(e.clientX, e.clientY, task);
|
||||
}}
|
||||
id={`task-${task.id}`}
|
||||
style={{ group: "item" } as React.CSSProperties}
|
||||
style={{
|
||||
borderLeft: depth > 0 ? "2px solid var(--border)" : "none",
|
||||
marginLeft: depth > 0 ? 8 : 0,
|
||||
}}
|
||||
>
|
||||
{/* Toggle Expand Arrow if has children */}
|
||||
{totalChildren > 0 ? (
|
||||
<button
|
||||
type="button"
|
||||
className="icon-btn"
|
||||
style={{ width: 18, height: 18, flexShrink: 0, padding: 0, opacity: 0.6 }}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setExpanded((p) => !p);
|
||||
}}
|
||||
title="Expand/Collapse"
|
||||
>
|
||||
<svg
|
||||
width="10"
|
||||
height="10"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2.5"
|
||||
style={{ transform: expanded ? "rotate(90deg)" : "rotate(0deg)", transition: "transform 0.15s" }}
|
||||
>
|
||||
<polyline points="9 18 15 12 9 6" />
|
||||
</svg>
|
||||
</button>
|
||||
) : depth > 0 ? (
|
||||
<span style={{ width: 12, flexShrink: 0 }} />
|
||||
) : null}
|
||||
|
||||
{/* Check button */}
|
||||
<button
|
||||
className={`task-check-btn${task.completed ? " checked" : ""}`}
|
||||
onClick={(e) => {
|
||||
@@ -134,8 +170,10 @@ function TaskItem({
|
||||
}}
|
||||
aria-label={task.completed ? "Mark incomplete" : "Mark complete"}
|
||||
type="button"
|
||||
style={{ width: depth > 0 ? 17 : 19, height: depth > 0 ? 17 : 19, flexShrink: 0 }}
|
||||
/>
|
||||
|
||||
{/* Title and Meta */}
|
||||
<div className="task-body">
|
||||
{editingTitle ? (
|
||||
<input
|
||||
@@ -152,7 +190,7 @@ function TaskItem({
|
||||
}
|
||||
}}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
style={{ padding: "2px 6px", fontSize: 14, fontWeight: 500, height: 26, width: "100%" }}
|
||||
style={{ padding: "2px 6px", fontSize: depth > 0 ? 13 : 14, fontWeight: 500, height: 26, width: "100%" }}
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
@@ -162,7 +200,7 @@ function TaskItem({
|
||||
setEditingTitle(true);
|
||||
}}
|
||||
title="Double click to edit"
|
||||
style={{ cursor: "text" }}
|
||||
style={{ fontSize: depth > 0 ? 13 : 14, fontWeight: depth === 0 ? 600 : 500 }}
|
||||
>
|
||||
{task.title}
|
||||
</div>
|
||||
@@ -184,32 +222,20 @@ function TaskItem({
|
||||
{formatDate(task.dueDate)}
|
||||
</span>
|
||||
)}
|
||||
{task.children && task.children.length > 0 && (
|
||||
{totalChildren > 0 && (
|
||||
<span
|
||||
className="task-sub-count"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setExpanded((p) => !p);
|
||||
}}
|
||||
title="Toggle subtasks"
|
||||
style={{ cursor: "pointer" }}
|
||||
>
|
||||
<svg
|
||||
width="10"
|
||||
height="10"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
style={{ transform: expanded ? "rotate(90deg)" : "rotate(0deg)", transition: "transform 0.15s" }}
|
||||
>
|
||||
<polyline points="9 18 15 12 9 6" />
|
||||
</svg>
|
||||
{completedChildren}/{task.children.length}
|
||||
{completedChildren}/{totalChildren}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{/* Quick Add Subtask Button */}
|
||||
{/* Quick Inline Add Subtask button */}
|
||||
<button
|
||||
className="badge badge-neutral"
|
||||
style={{ cursor: "pointer", fontSize: 10, padding: "1px 6px", border: "1px solid var(--border)", background: "transparent" }}
|
||||
@@ -225,7 +251,7 @@ function TaskItem({
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{task.note && !task.completed && (
|
||||
{task.note && !task.completed && depth === 0 && (
|
||||
<div className="task-note-preview">{task.note.replace(/[#*`]/g, "").slice(0, 80)}</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -233,7 +259,7 @@ function TaskItem({
|
||||
{/* Quick Edit icon on hover */}
|
||||
<button
|
||||
className="icon-btn"
|
||||
style={{ width: 22, height: 22, opacity: 0.4, flexShrink: 0 }}
|
||||
style={{ width: 22, height: 22, opacity: 0.35, flexShrink: 0 }}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setEditingTitle(true);
|
||||
@@ -247,125 +273,51 @@ function TaskItem({
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Sub-tasks List */}
|
||||
{((task.children && task.children.length > 0) || addingSubtask) && expanded && (
|
||||
<div className="subtask-list" style={{ paddingLeft: 38 }}>
|
||||
{task.children?.map((child) => (
|
||||
<SubTaskItem
|
||||
{/* Recursive Children (N-Depth Sub-tasks) */}
|
||||
{totalChildren > 0 && expanded && (
|
||||
<div className="subtask-recursive-tree">
|
||||
{task.children.map((child) => (
|
||||
<RecursiveTaskItem
|
||||
key={child.id}
|
||||
child={child}
|
||||
onToggle={onToggle}
|
||||
task={child}
|
||||
depth={depth + 1}
|
||||
isSelected={isSelected}
|
||||
onSelect={onSelect}
|
||||
onToggle={onToggle}
|
||||
onUpdateTitle={onUpdateTitle}
|
||||
onAddSubtask={onAddSubtask}
|
||||
onContextMenu={onContextMenu}
|
||||
/>
|
||||
))}
|
||||
|
||||
{/* Inline Add Subtask input */}
|
||||
{addingSubtask && (
|
||||
<form onSubmit={handleCreateSubtask} style={{ display: "flex", gap: 6, padding: "4px 0" }}>
|
||||
<span style={{ color: "var(--accent)", fontSize: 14, lineHeight: "24px" }}>↳</span>
|
||||
<input
|
||||
ref={subInputRef}
|
||||
className="form-input"
|
||||
placeholder={t("addSubtaskPlaceholder")}
|
||||
value={subtaskInput}
|
||||
onChange={(e) => setSubtaskInput(e.target.value)}
|
||||
onBlur={() => {
|
||||
if (!subtaskInput.trim()) setAddingSubtask(false);
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Escape") setAddingSubtask(false);
|
||||
}}
|
||||
style={{ height: 26, fontSize: 12.5, padding: "2px 8px", flex: 1 }}
|
||||
/>
|
||||
<button className="btn btn-primary btn-sm" type="submit" style={{ padding: "2px 8px", fontSize: 11 }}>
|
||||
{t("add")}
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Sub-task Item with Inline Rename
|
||||
function SubTaskItem({
|
||||
child,
|
||||
onToggle,
|
||||
onSelect,
|
||||
onUpdateTitle,
|
||||
}: {
|
||||
child: Task;
|
||||
onToggle: (id: string, completed: boolean) => void;
|
||||
onSelect: (t: Task) => void;
|
||||
onUpdateTitle: (id: string, title: string) => void;
|
||||
}) {
|
||||
const [editing, setEditing] = useState(false);
|
||||
const [temp, setTemp] = useState(child.title);
|
||||
const ref = useRef<HTMLInputElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (editing) {
|
||||
ref.current?.focus();
|
||||
ref.current?.select();
|
||||
}
|
||||
}, [editing]);
|
||||
|
||||
const handleSave = () => {
|
||||
const trimmed = temp.trim();
|
||||
if (trimmed && trimmed !== child.title) {
|
||||
onUpdateTitle(child.id, trimmed);
|
||||
} else {
|
||||
setTemp(child.title);
|
||||
}
|
||||
setEditing(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`subtask-item${child.completed ? " completed" : ""}`}
|
||||
onClick={() => onSelect(child)}
|
||||
id={`subtask-${child.id}`}
|
||||
>
|
||||
<button
|
||||
className={`subtask-check-btn${child.completed ? " checked" : ""}`}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onToggle(child.id, !child.completed);
|
||||
}}
|
||||
aria-label={child.completed ? "Mark incomplete" : "Mark complete"}
|
||||
type="button"
|
||||
/>
|
||||
{editing ? (
|
||||
<input
|
||||
ref={ref}
|
||||
className="form-input"
|
||||
value={temp}
|
||||
onChange={(e) => setTemp(e.target.value)}
|
||||
onBlur={handleSave}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") handleSave();
|
||||
if (e.key === "Escape") {
|
||||
setTemp(child.title);
|
||||
setEditing(false);
|
||||
}
|
||||
}}
|
||||
{/* Inline Add Subtask form for this node */}
|
||||
{addingSubtask && (
|
||||
<form
|
||||
onSubmit={handleCreateSubtask}
|
||||
style={{ display: "flex", gap: 6, padding: "4px 0 4px 32px" }}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
style={{ padding: "1px 6px", fontSize: 12.5, height: 22, flex: 1 }}
|
||||
/>
|
||||
) : (
|
||||
<span
|
||||
className="subtask-title"
|
||||
onDoubleClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setEditing(true);
|
||||
}}
|
||||
title="Double click to edit"
|
||||
style={{ cursor: "text" }}
|
||||
>
|
||||
{child.title}
|
||||
</span>
|
||||
<span style={{ color: "var(--accent)", fontSize: 13, lineHeight: "26px" }}>↳</span>
|
||||
<input
|
||||
ref={subInputRef}
|
||||
className="form-input"
|
||||
placeholder={t("addSubtaskPlaceholder")}
|
||||
value={subtaskInput}
|
||||
onChange={(e) => setSubtaskInput(e.target.value)}
|
||||
onBlur={() => {
|
||||
if (!subtaskInput.trim()) setAddingSubtask(false);
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Escape") setAddingSubtask(false);
|
||||
}}
|
||||
style={{ height: 26, fontSize: 12.5, padding: "2px 8px", flex: 1 }}
|
||||
/>
|
||||
<button className="btn btn-primary btn-sm" type="submit" style={{ padding: "2px 8px", fontSize: 11 }}>
|
||||
{t("add")}
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
@@ -469,27 +421,12 @@ export function TaskList({
|
||||
body: JSON.stringify({ completed }),
|
||||
});
|
||||
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
||||
const updated = await res.json();
|
||||
setTasks((prev) =>
|
||||
prev
|
||||
.map((t) => {
|
||||
if (t.id === id) return { ...t, completed, completedAt: updated.completedAt };
|
||||
if (t.children && t.children.some((c) => c.id === id)) {
|
||||
return {
|
||||
...t,
|
||||
children: t.children.map((c) => (c.id === id ? { ...c, completed } : c)),
|
||||
};
|
||||
}
|
||||
return t;
|
||||
})
|
||||
.filter((t) => showCompleted || !t.completed)
|
||||
);
|
||||
onRefresh();
|
||||
} catch (err) {
|
||||
console.error("[TaskList] handleToggle failed", err);
|
||||
}
|
||||
},
|
||||
[isDemo, onDemoToggleTask, showCompleted, onRefresh, setTasks]
|
||||
[isDemo, onDemoToggleTask, onRefresh]
|
||||
);
|
||||
|
||||
const handleAddTask = async (e: React.FormEvent) => {
|
||||
@@ -533,10 +470,6 @@ export function TaskList({
|
||||
body: JSON.stringify({ title, listId, parentId }),
|
||||
});
|
||||
if (res.ok) {
|
||||
const sub = await res.json();
|
||||
setTasks((prev) =>
|
||||
prev.map((t) => (t.id === parentId ? { ...t, children: [...(t.children || []), sub] } : t))
|
||||
);
|
||||
onRefresh();
|
||||
}
|
||||
} catch (err) {
|
||||
@@ -565,6 +498,7 @@ export function TaskList({
|
||||
);
|
||||
}
|
||||
|
||||
// Filter top-level vs completed
|
||||
const incompleteTasks = tasks.filter((t) => !t.completed);
|
||||
const completedTasks = tasks.filter((t) => t.completed);
|
||||
|
||||
@@ -572,7 +506,7 @@ export function TaskList({
|
||||
<div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
|
||||
{/* Header */}
|
||||
<div className="main-header">
|
||||
<button className="icon-btn mobile-only" id="menu-btn" onClick={onMenuOpen} aria-label="Menu">
|
||||
<button className="icon-btn mobile-only" id="menu-btn" onClick={onMenuOpen} aria-label="Menu" type="button">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="21" y2="18" />
|
||||
</svg>
|
||||
@@ -629,6 +563,7 @@ export function TaskList({
|
||||
className="btn btn-ghost btn-sm"
|
||||
onClick={onToggleCompleted}
|
||||
title={showCompleted ? t("hideDone") : t("showDone")}
|
||||
type="button"
|
||||
>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<polyline points="20 6 9 17 4 12" />
|
||||
@@ -638,8 +573,16 @@ export function TaskList({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Task list */}
|
||||
<div className="task-list-container">
|
||||
{/* Task list container with background context menu handler */}
|
||||
<div
|
||||
className="task-list-container"
|
||||
onContextMenu={(e) => {
|
||||
// If clicked directly on empty container area, prevent native browser menu
|
||||
if (e.target === e.currentTarget) {
|
||||
e.preventDefault();
|
||||
}
|
||||
}}
|
||||
>
|
||||
{loading && (
|
||||
<div style={{ padding: "20px", textAlign: "center", color: "var(--text-tertiary)" }}>{t("loading")}</div>
|
||||
)}
|
||||
@@ -651,10 +594,13 @@ export function TaskList({
|
||||
<p>{t("noTasksYet")}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Incomplete Tasks Recursive Tree */}
|
||||
{incompleteTasks.map((task) => (
|
||||
<TaskItem
|
||||
<RecursiveTaskItem
|
||||
key={task.id}
|
||||
task={task}
|
||||
depth={0}
|
||||
isSelected={selectedTaskId === task.id}
|
||||
onSelect={onTaskSelect}
|
||||
onToggle={handleToggle}
|
||||
@@ -663,11 +609,13 @@ export function TaskList({
|
||||
onContextMenu={(x, y, tItem) => setContextMenu({ x, y, task: tItem })}
|
||||
/>
|
||||
))}
|
||||
|
||||
{/* Completed Tasks Recursive Tree */}
|
||||
{showCompleted && completedTasks.length > 0 && (
|
||||
<div>
|
||||
<div
|
||||
style={{
|
||||
padding: "12px 20px 4px",
|
||||
padding: "16px 20px 6px",
|
||||
fontSize: 11,
|
||||
fontWeight: 600,
|
||||
color: "var(--text-tertiary)",
|
||||
@@ -678,9 +626,10 @@ export function TaskList({
|
||||
{t("completedSection")} ({completedTasks.length})
|
||||
</div>
|
||||
{completedTasks.map((task) => (
|
||||
<TaskItem
|
||||
<RecursiveTaskItem
|
||||
key={task.id}
|
||||
task={task}
|
||||
depth={0}
|
||||
isSelected={selectedTaskId === task.id}
|
||||
onSelect={onTaskSelect}
|
||||
onToggle={handleToggle}
|
||||
@@ -693,7 +642,7 @@ export function TaskList({
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Context Menu on Task */}
|
||||
{/* Full-featured Context Menu on ANY Task at ANY Depth */}
|
||||
{contextMenu && (
|
||||
<ContextMenu
|
||||
x={contextMenu.x}
|
||||
@@ -737,7 +686,7 @@ export function TaskList({
|
||||
|
||||
{/* Add task bar */}
|
||||
<div className="add-task-bar">
|
||||
<button className="task-check-btn" style={{ opacity: 0.4, flexShrink: 0 }} aria-hidden="true" />
|
||||
<button className="task-check-btn" style={{ opacity: 0.4, flexShrink: 0 }} aria-hidden="true" type="button" />
|
||||
<form onSubmit={handleAddTask} style={{ flex: 1, display: "flex", gap: 8 }}>
|
||||
<input
|
||||
ref={inputRef}
|
||||
|
||||
+72
-20
@@ -20,7 +20,7 @@ export interface MockTask {
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
children: MockTask[];
|
||||
tags: { tag: { id: string; name: string; color: string } }[];
|
||||
tags?: { tag: { id: string; name: string; color: string } }[];
|
||||
}
|
||||
|
||||
const STORAGE_KEY_LISTS = "checkflow_demo_lists";
|
||||
@@ -52,7 +52,7 @@ export const INITIAL_DEMO_TASKS: MockTask[] = [
|
||||
listId: "list-1",
|
||||
parentId: "task-1",
|
||||
title: "Configure .env environment variables",
|
||||
note: null,
|
||||
note: "Database URL, NextAuth secret, and port settings",
|
||||
completed: true,
|
||||
completedAt: new Date().toISOString(),
|
||||
dueDate: null,
|
||||
@@ -60,7 +60,24 @@ export const INITIAL_DEMO_TASKS: MockTask[] = [
|
||||
sortOrder: 0,
|
||||
createdAt: new Date().toISOString(),
|
||||
updatedAt: new Date().toISOString(),
|
||||
children: [],
|
||||
children: [
|
||||
{
|
||||
id: "sub-1-1-1",
|
||||
listId: "list-1",
|
||||
parentId: "sub-1-1",
|
||||
title: "Database connection string verification",
|
||||
note: null,
|
||||
completed: false,
|
||||
completedAt: null,
|
||||
dueDate: null,
|
||||
priority: 2,
|
||||
sortOrder: 0,
|
||||
createdAt: new Date().toISOString(),
|
||||
updatedAt: new Date().toISOString(),
|
||||
children: [],
|
||||
tags: [],
|
||||
},
|
||||
],
|
||||
tags: [],
|
||||
},
|
||||
{
|
||||
@@ -87,7 +104,7 @@ export const INITIAL_DEMO_TASKS: MockTask[] = [
|
||||
listId: "list-1",
|
||||
parentId: null,
|
||||
title: "Import existing tasks from TickTick",
|
||||
note: "1. Export CSV/ICS in TickTick Settings\n2. Click 'Import Tasks' in CheckFlow Sidebar\n3. Select target project",
|
||||
note: "1. Export CSV/ICS in TickTick Settings\n2. Click user profile at bottom-left\n3. Select 'Import Tasks'",
|
||||
completed: false,
|
||||
completedAt: null,
|
||||
dueDate: null,
|
||||
@@ -98,22 +115,6 @@ export const INITIAL_DEMO_TASKS: MockTask[] = [
|
||||
children: [],
|
||||
tags: [],
|
||||
},
|
||||
{
|
||||
id: "task-3",
|
||||
listId: "list-2",
|
||||
parentId: null,
|
||||
title: "Install CheckFlow PWA on mobile home screen",
|
||||
note: "Open in Chrome/Samsung Internet -> Menu -> **Install app** or **Add to Home Screen**",
|
||||
completed: true,
|
||||
completedAt: new Date().toISOString(),
|
||||
dueDate: new Date().toISOString(),
|
||||
priority: 1,
|
||||
sortOrder: 0,
|
||||
createdAt: new Date().toISOString(),
|
||||
updatedAt: new Date().toISOString(),
|
||||
children: [],
|
||||
tags: [],
|
||||
},
|
||||
];
|
||||
|
||||
export function getDemoStore() {
|
||||
@@ -148,3 +149,54 @@ export function saveDemoStore(lists: MockList[], tasks: MockTask[]) {
|
||||
console.error("Failed to save demo storage", e);
|
||||
}
|
||||
}
|
||||
|
||||
// Recursive tree helpers for N-depth sub-tasks
|
||||
export function updateTaskInTree(tree: MockTask[], updated: MockTask): MockTask[] {
|
||||
return tree.map((node) => {
|
||||
if (node.id === updated.id) {
|
||||
return { ...updated, children: updated.children || node.children || [] };
|
||||
}
|
||||
if (node.children && node.children.length > 0) {
|
||||
return { ...node, children: updateTaskInTree(node.children, updated) };
|
||||
}
|
||||
return node;
|
||||
});
|
||||
}
|
||||
|
||||
export function deleteTaskInTree(tree: MockTask[], idToDelete: string): MockTask[] {
|
||||
return tree
|
||||
.filter((node) => node.id !== idToDelete)
|
||||
.map((node) => {
|
||||
if (node.children && node.children.length > 0) {
|
||||
return { ...node, children: deleteTaskInTree(node.children, idToDelete) };
|
||||
}
|
||||
return node;
|
||||
});
|
||||
}
|
||||
|
||||
export function addTaskToTree(tree: MockTask[], parentId: string | null, newTask: MockTask): MockTask[] {
|
||||
if (!parentId) {
|
||||
return [...tree, newTask];
|
||||
}
|
||||
return tree.map((node) => {
|
||||
if (node.id === parentId) {
|
||||
const currentChildren = node.children || [];
|
||||
return { ...node, children: [...currentChildren, newTask] };
|
||||
}
|
||||
if (node.children && node.children.length > 0) {
|
||||
return { ...node, children: addTaskToTree(node.children, parentId, newTask) };
|
||||
}
|
||||
return node;
|
||||
});
|
||||
}
|
||||
|
||||
export function findTaskInTree(tree: MockTask[], id: string): MockTask | null {
|
||||
for (const node of tree) {
|
||||
if (node.id === id) return node;
|
||||
if (node.children && node.children.length > 0) {
|
||||
const found = findTaskInTree(node.children, id);
|
||||
if (found) return found;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
Reference in New Issue
Block a user