Fix: Context menu delete integration with recursive tree, added Created and Edited timestamps in detail panel footer

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>
 

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>

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();
                 }