From d2d2034515455ead5b3d9cb55de634c74cf75baf Mon Sep 17 00:00:00 2001
From: Wonhee Han <47270724+neruhan01@users.noreply.github.com>
Date: Thu, 20 Aug 2026 14:56:19 +0900
Subject: [PATCH] Fix: Context menu delete integration with recursive tree,
 added Created and Edited timestamps in detail panel footer

---
 src/components/layout/AppShell.tsx  |  4 ++++
 src/components/tasks/TaskDetail.tsx | 33 ++++++++++++++++++++---------
 src/components/tasks/TaskList.tsx   | 10 +++++----
 src/lib/i18n/index.tsx              |  5 ++++-
 4 files changed, 37 insertions(+), 15 deletions(-)

diff --git a/src/components/layout/AppShell.tsx b/src/components/layout/AppShell.tsx
index 51c74e0..d7f7bbe 100644
--- a/src/components/layout/AppShell.tsx
+++ b/src/components/layout/AppShell.tsx
@@ -279,6 +279,10 @@ export function AppShell({ user, isDemo = false }: AppShellProps) {
           onDemoToggleTask={handleDemoToggleTask}
           onUpdateTaskTitle={handleUpdateTaskTitle}
           onUpdateListName={handleUpdateListName}
+          onDeleteTask={isDemo ? handleDemoDeleteTask : async (id: string) => {
+            await fetch(`/api/tasks/${id}`, { method: "DELETE" });
+            refresh();
+          }}
         />
       </div>
 
diff --git a/src/components/tasks/TaskDetail.tsx b/src/components/tasks/TaskDetail.tsx
index 828436f..3a9d5c6 100644
--- a/src/components/tasks/TaskDetail.tsx
+++ b/src/components/tasks/TaskDetail.tsx
@@ -490,21 +490,34 @@ export function TaskDetail({
           )}
         </div>
 
-        {/* Footer Info: Project Badge & Timestamp */}
-        <div style={{ fontSize: 11, color: "var(--text-tertiary)", display: "flex", justifyContent: "space-between", alignItems: "center", borderTop: "1px solid var(--border)", paddingTop: 8 }}>
+        {/* Footer Info: Project Badge, Created & Edited Timestamps */}
+        <div style={{ fontSize: 11, color: "var(--text-tertiary)", display: "flex", justifyContent: "space-between", alignItems: "center", borderTop: "1px solid var(--border)", paddingTop: 8, flexWrap: "wrap", gap: 6 }}>
           {listName && (
             <span className="tick-meta-chip" style={{ fontSize: 11, padding: "2px 8px" }}>
               📁 {listName}
             </span>
           )}
-          <span>
-            {t("created")}:{" "}
-            {new Date(task.createdAt).toLocaleDateString(lang === "ko" ? "ko-KR" : lang === "ja" ? "ja-JP" : "en-US", {
-              year: "numeric",
-              month: "short",
-              day: "numeric",
-            })}
-          </span>
+          <div style={{ display: "flex", alignItems: "center", gap: 12, marginLeft: "auto", flexWrap: "wrap" }}>
+            <span>
+              {t("created")}:{" "}
+              {new Date(task.createdAt).toLocaleDateString(lang === "ko" ? "ko-KR" : lang === "ja" ? "ja-JP" : "en-US", {
+                year: "numeric",
+                month: "short",
+                day: "numeric",
+              })}
+            </span>
+            {task.updatedAt && (
+              <span>
+                {t("edited")}:{" "}
+                {new Date(task.updatedAt).toLocaleTimeString(lang === "ko" ? "ko-KR" : lang === "ja" ? "ja-JP" : "en-US", {
+                  month: "short",
+                  day: "numeric",
+                  hour: "2-digit",
+                  minute: "2-digit",
+                })}
+              </span>
+            )}
+          </div>
         </div>
       </div>
     </aside>
diff --git a/src/components/tasks/TaskList.tsx b/src/components/tasks/TaskList.tsx
index 49b597b..20d5e03 100644
--- a/src/components/tasks/TaskList.tsx
+++ b/src/components/tasks/TaskList.tsx
@@ -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";
@@ -340,6 +340,7 @@ interface Props {
   onDemoToggleTask?: (id: string, completed: boolean) => void;
   onUpdateTaskTitle?: (id: string, title: string) => void;
   onUpdateListName?: (id: string, name: string) => void;
+  onDeleteTask?: (id: string) => void;
 }
 
 export function TaskList({
@@ -359,6 +360,7 @@ export function TaskList({
   onDemoToggleTask,
   onUpdateTaskTitle,
   onUpdateListName,
+  onDeleteTask,
 }: Props) {
   const { t } = useI18n();
   const [newTaskTitle, setNewTaskTitle] = useState("");
@@ -671,9 +673,9 @@ export function TaskList({
               icon: "🗑️",
               danger: true,
               onClick: async () => {
-                if (isDemo) {
-                  setTasks((prev) => prev.filter((t) => t.id !== contextMenu.task.id));
-                } else {
+                if (onDeleteTask) {
+                  onDeleteTask(contextMenu.task.id);
+                } else if (!isDemo) {
                   await fetch(`/api/tasks/${contextMenu.task.id}`, { method: "DELETE" });
                   onRefresh();
                 }
diff --git a/src/lib/i18n/index.tsx b/src/lib/i18n/index.tsx
index 92587d3..b6f2670 100644
--- a/src/lib/i18n/index.tsx
+++ b/src/lib/i18n/index.tsx
@@ -1,4 +1,4 @@
-"use client";
+"use client";
 import React, { createContext, useContext, useState, useEffect } from "react";
 
 export type Language = "en" | "ko" | "ja";
@@ -76,6 +76,7 @@ export const translations = {
     autoSaved: "Auto-saved",
     saving: "Saving…",
     created: "Created",
+    edited: "Edited",
 
     // Toolbars
     bold: "Bold",
@@ -158,6 +159,7 @@ export const translations = {
     autoSaved: "자동 저장됨",
     saving: "저장 중…",
     created: "생성일",
+    edited: "수정일",
 
     // Toolbars
     bold: "굵게",
@@ -240,6 +242,7 @@ export const translations = {
     autoSaved: "自動保存済み",
     saving: "保存中…",
     created: "作成日時",
+    edited: "更新日時",
 
     // Toolbars
     bold: "太字",