@nightkatana/kronosys-app 1.0.0-beta.0

package/components/dashboard/TaskSubtasksBlock.tsx

@@ -0,0 +1,748 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import {
+  DndContext,
+  DragOverlay,
+  KeyboardSensor,
+  PointerSensor,
+  closestCenter,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+  type DragOverEvent,
+  type DragStartEvent,
+} from "@dnd-kit/core";
+import {
+  SortableContext,
+  arrayMove,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { ChevronDown, ChevronUp, GripVertical, Play, Pause, Trash2 } from "lucide-react";
+import { formatStopwatchMs } from "@/lib/taskParsing";
+import type { DashboardStrings } from "@/lib/dashboardCopy";
+import {
+  TASK_SUBTASK_NEW_INLINE_CLASS,
+  TASK_SUBTASK_ROW_INPUT_CLASS,
+} from "./taskFieldStyles";
+import { useSmoothStopwatchDisplayMs } from "./useSmoothStopwatchMs";
+
+type SubtaskDto = { id: string; title: string; done: boolean; durationMs?: number };
+
+function SubtaskStopwatchDuration({
+  durationMs,
+  isTracking,
+  className,
+}: Readonly<{
+  durationMs: number;
+  isTracking: boolean;
+  className: string;
+}>) {
+  const base = Math.max(0, Math.floor(durationMs));
+  const live = useSmoothStopwatchDisplayMs(base, isTracking);
+  const text = formatStopwatchMs(live);
+  return (
+    <span className={className} title={text}>
+      {text}
+    </span>
+  );
+}
+
+const SUBTASK_DURATION_CELL_CLASS =
+  "min-w-[6.25rem] shrink-0 text-right text-[0.65rem] font-medium leading-none tracking-tight text-zinc-400 dark:text-zinc-500";
+
+function SubtaskDurationCell({
+  durationMs,
+  isTracking,
+  enableSubtaskTimer,
+  subtaskDone,
+  subtasksReadOnly,
+  t,
+}: Readonly<{
+  durationMs?: number;
+  isTracking: boolean;
+  enableSubtaskTimer: boolean;
+  subtaskDone: boolean;
+  subtasksReadOnly: boolean;
+  t: DashboardStrings;
+}>) {
+  const subMs = Math.max(0, Math.floor(durationMs ?? 0));
+  if (subMs > 0 || isTracking) {
+    return (
+      <SubtaskStopwatchDuration
+        durationMs={subMs}
+        isTracking={isTracking}
+        className={`shrink-0 font-mono tabular-nums text-[0.7rem] tracking-tight ${isTracking ? "font-semibold text-emerald-700 dark:text-emerald-400" : "text-zinc-500"}`}
+      />
+    );
+  }
+  if (enableSubtaskTimer) {
+    return (
+      <span className={SUBTASK_DURATION_CELL_CLASS} title={t.subtaskDurationTooltipNotMeasured}>
+        {t.subtaskDurationNotMeasured}
+      </span>
+    );
+  }
+  if (subtasksReadOnly && subtaskDone) {
+    return (
+      <span className={SUBTASK_DURATION_CELL_CLASS} title={t.subtaskDurationTooltipNotShown}>
+        {t.subtaskDurationNotShown}
+      </span>
+    );
+  }
+  return (
+    <span className={SUBTASK_DURATION_CELL_CLASS} title={t.subtaskDurationTooltipNotRecorded}>
+      {t.subtaskDurationNotRecorded}
+    </span>
+  );
+}
+
+const SUBTASK_CHECKBOX_CLASS =
+  "h-4 w-4 shrink-0 cursor-pointer rounded border-zinc-400 bg-white text-violet-600 accent-violet-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-violet-500/70 dark:border-zinc-500 dark:bg-zinc-900 dark:text-violet-500 dark:accent-violet-500";
+
+const SUBTASK_DONE_TITLE_CLASS =
+  "text-zinc-400 line-through decoration-zinc-500/[0.35] decoration-[1.5px]";
+
+/** Survol : fond et contour violet bien visibles sur toute la ligne. */
+const SUBTASK_ROW_HOVER_CLASS =
+  "rounded-md px-1.5 -mx-1.5 py-0.5 -my-0.5 transition-colors duration-150 hover:bg-violet-100 hover:ring-1 hover:ring-violet-400/75 dark:hover:bg-violet-950/65 dark:hover:ring-violet-500/55";
+
+function SubtaskDragPreview({
+  st,
+  ord,
+  isTracking,
+  enableSubtaskTimer,
+  subtasksReadOnly,
+  showReorderGutter,
+  t,
+}: Readonly<{
+  st: SubtaskDto;
+  ord: number;
+  isTracking: boolean;
+  enableSubtaskTimer: boolean;
+  subtasksReadOnly: boolean;
+  /** Colonne haut / bas (même emplacement qu’en liste, en lecture seule ici). */
+  showReorderGutter: boolean;
+  t: DashboardStrings;
+}>) {
+  return (
+    <div className="pointer-events-none flex min-h-10 max-w-[min(100vw-2rem,36rem)] cursor-grabbing items-center gap-1.5 rounded-lg border-2 border-violet-600 bg-white px-2 py-1.5 shadow-xl ring-2 ring-violet-500/30 dark:border-violet-400 dark:bg-zinc-900 dark:ring-violet-400/25 sm:gap-2">
+      <GripVertical className="size-4 shrink-0 text-violet-600 dark:text-violet-400" aria-hidden />
+      {showReorderGutter ? (
+        <span
+          className="flex w-[1.125rem] shrink-0 flex-col items-center justify-center gap-0 opacity-40"
+          aria-hidden
+        >
+          <ChevronUp className="size-3.5" strokeWidth={2.5} />
+          <ChevronDown className="size-3.5" strokeWidth={2.5} />
+        </span>
+      ) : null}
+      <span className="w-6 shrink-0 text-right font-mono text-[0.7rem] font-semibold tabular-nums text-zinc-500 dark:text-zinc-400">
+        {ord}.
+      </span>
+      <input type="checkbox" readOnly checked={st.done} className={SUBTASK_CHECKBOX_CLASS} tabIndex={-1} />
+      <span
+        className={`min-w-0 flex-1 truncate text-left text-base font-medium leading-snug ${
+          st.done ? SUBTASK_DONE_TITLE_CLASS : "text-zinc-900 dark:text-zinc-100"
+        }`}
+      >
+        {st.title}
+      </span>
+      <SubtaskDurationCell
+        durationMs={st.durationMs}
+        isTracking={isTracking}
+        enableSubtaskTimer={enableSubtaskTimer}
+        subtaskDone={st.done}
+        subtasksReadOnly={subtasksReadOnly}
+        t={t}
+      />
+    </div>
+  );
+}
+
+type SortableRowProps = {
+  st: SubtaskDto;
+  index: number;
+  listLength: number;
+  showOrdinal: boolean;
+  activeDragId: string | null;
+  taskId: string;
+  enableSubtaskTimer: boolean;
+  activeSubtaskTimerId: string | undefined;
+  subtasksReadOnly: boolean;
+  t: DashboardStrings;
+  editingId: string | null;
+  editVal: string;
+  setEditingId: (id: string | null) => void;
+  setEditVal: (v: string) => void;
+  send: (body: Record<string, unknown>) => void;
+  dragLabel: string;
+  onReorderStep: (fromIndex: number, delta: -1 | 1) => void;
+};
+
+function SortableSubtaskRow({
+  st,
+  index,
+  showOrdinal,
+  activeDragId,
+  taskId,
+  enableSubtaskTimer,
+  activeSubtaskTimerId,
+  subtasksReadOnly,
+  t,
+  editingId,
+  editVal,
+  setEditingId,
+  setEditVal,
+  send,
+  dragLabel,
+  listLength,
+  onReorderStep,
+}: SortableRowProps) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: st.id,
+  });
+  const isTracking =
+    enableSubtaskTimer && String(activeSubtaskTimerId ?? "").trim() === String(st.id).trim();
+  const ord = index + 1;
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  };
+  const isDimmedSibling = Boolean(activeDragId && activeDragId !== st.id);
+
+  return (
+    <li
+      ref={setNodeRef}
+      style={style}
+      className={`relative z-[1] flex min-h-10 items-center gap-1.5 py-1.5 first:pt-0 sm:gap-2 ${SUBTASK_ROW_HOVER_CLASS} ${
+        isDimmedSibling ? "opacity-[0.22] saturate-[0.65]" : ""
+      } ${isDragging ? "z-10 opacity-0" : ""}`}
+    >
+      <button
+        type="button"
+        className="shrink-0 cursor-grab rounded p-0.5 text-zinc-500 touch-none hover:bg-violet-200/60 hover:text-violet-900 active:cursor-grabbing dark:text-zinc-400 dark:hover:bg-violet-900/50 dark:hover:text-violet-100"
+        title={dragLabel}
+        aria-label={dragLabel}
+        {...attributes}
+        {...listeners}
+      >
+        <GripVertical size={16} strokeWidth={2} aria-hidden />
+      </button>
+      {!subtasksReadOnly && listLength > 1 ? (
+        <span className="flex w-[1.125rem] shrink-0 flex-col items-center justify-center gap-0">
+          <button
+            type="button"
+            disabled={index === 0}
+            className="rounded p-0.5 text-zinc-600 hover:bg-violet-100 hover:text-violet-900 disabled:pointer-events-none disabled:opacity-25 dark:text-zinc-400 dark:hover:bg-violet-900/45 dark:hover:text-violet-100"
+            title={t.subtaskMoveUp}
+            aria-label={t.subtaskMoveUp}
+            onClick={() => onReorderStep(index, -1)}
+          >
+            <ChevronUp size={14} strokeWidth={2.5} aria-hidden />
+          </button>
+          <button
+            type="button"
+            disabled={index >= listLength - 1}
+            className="rounded p-0.5 text-zinc-600 hover:bg-violet-100 hover:text-violet-900 disabled:pointer-events-none disabled:opacity-25 dark:text-zinc-400 dark:hover:bg-violet-900/45 dark:hover:text-violet-100"
+            title={t.subtaskMoveDown}
+            aria-label={t.subtaskMoveDown}
+            onClick={() => onReorderStep(index, 1)}
+          >
+            <ChevronDown size={14} strokeWidth={2.5} aria-hidden />
+          </button>
+        </span>
+      ) : null}
+      <span
+        className="w-6 shrink-0 text-right font-mono text-[0.7rem] font-semibold tabular-nums text-zinc-500 dark:text-zinc-500"
+        aria-hidden={!showOrdinal}
+      >
+        {showOrdinal ? `${ord}.` : ""}
+      </span>
+      <input
+        type="checkbox"
+        className={
+          subtasksReadOnly
+            ? `${SUBTASK_CHECKBOX_CLASS} cursor-not-allowed opacity-50`
+            : SUBTASK_CHECKBOX_CLASS
+        }
+        checked={st.done}
+        disabled={subtasksReadOnly}
+        onChange={() => {
+          if (!subtasksReadOnly) {
+            void send({ type: "toggleSubtask", taskId, subtaskId: st.id });
+          }
+        }}
+        title={st.done ? t.subtaskMarkUndone : t.subtaskMarkDone}
+        aria-label={st.done ? t.subtaskMarkUndone : t.subtaskMarkDone}
+      />
+      {editingId === st.id && !subtasksReadOnly ? (
+        <input
+          autoFocus
+          className={`${TASK_SUBTASK_ROW_INPUT_CLASS} min-w-0 flex-1`}
+          value={editVal}
+          onChange={(e) => setEditVal(e.target.value)}
+          onBlur={() => {
+            if (editVal.trim() && editVal.trim() !== st.title) {
+              void send({
+                type: "updateSubtaskTitle",
+                taskId,
+                subtaskId: st.id,
+                title: editVal.trim(),
+              });
+            }
+            setEditingId(null);
+          }}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") {
+              (e.target as HTMLInputElement).blur();
+            }
+            if (e.key === "Escape") {
+              setEditingId(null);
+            }
+          }}
+          aria-label={t.subtasksHeading}
+        />
+      ) : subtasksReadOnly ? (
+        <span
+          className={`min-w-0 flex-1 truncate text-left text-base font-medium leading-snug ${
+            st.done ? SUBTASK_DONE_TITLE_CLASS : "text-zinc-900 dark:text-zinc-200"
+          }`}
+        >
+          {st.title}
+        </span>
+      ) : (
+        <button
+          type="button"
+          className={`min-w-0 flex-1 truncate text-left text-base font-medium leading-snug outline-none hover:text-violet-800 focus-visible:ring-2 focus-visible:ring-violet-500/50 rounded-sm dark:hover:text-zinc-100 ${
+            st.done ? SUBTASK_DONE_TITLE_CLASS : "text-zinc-900 dark:text-zinc-200"
+          }`}
+          onClick={() => {
+            setEditingId(st.id);
+            setEditVal(st.title);
+          }}
+        >
+          {st.title}
+        </button>
+      )}
+      <SubtaskDurationCell
+        durationMs={st.durationMs}
+        isTracking={isTracking}
+        enableSubtaskTimer={enableSubtaskTimer}
+        subtaskDone={st.done}
+        subtasksReadOnly={subtasksReadOnly}
+        t={t}
+      />
+      <div className="flex shrink-0 items-center gap-0.5">
+        {enableSubtaskTimer && !st.done && !subtasksReadOnly && (
+          <button
+            type="button"
+            className={`rounded p-1.5 ${isTracking ? "bg-emerald-200 text-emerald-900 dark:bg-emerald-600/30 dark:text-emerald-300" : "text-zinc-600 hover:bg-zinc-200/90 dark:text-zinc-400 dark:hover:bg-zinc-800"}`}
+            title={isTracking ? t.subtaskTimerStop : t.subtaskTimerStart}
+            aria-label={isTracking ? t.subtaskTimerStop : t.subtaskTimerStart}
+            onClick={() =>
+              void send({
+                type: "setActiveSubtaskTimer",
+                taskId,
+                subtaskId: isTracking ? null : st.id,
+              })
+            }
+          >
+            {isTracking ? <Pause size={14} /> : <Play size={14} />}
+          </button>
+        )}
+        {!subtasksReadOnly ? (
+          <button
+            type="button"
+            className="rounded p-1.5 text-zinc-600 hover:bg-red-100 hover:text-red-800 dark:text-zinc-500 dark:hover:bg-red-950/50 dark:hover:text-red-400"
+            title={t.subtaskDelete}
+            aria-label={t.subtaskDelete}
+            onClick={() => void send({ type: "deleteSubtask", taskId, subtaskId: st.id })}
+          >
+            <Trash2 size={14} />
+          </button>
+        ) : null}
+      </div>
+    </li>
+  );
+}
+
+/** Ligne statique (pas de DnD) : lecture seule ou une seule sous-tâche. */
+function StaticSubtaskRow({
+  st,
+  index,
+  taskId,
+  enableSubtaskTimer,
+  activeSubtaskTimerId,
+  subtasksReadOnly,
+  t,
+  editingId,
+  editVal,
+  setEditingId,
+  setEditVal,
+  send,
+}: Omit<
+  SortableRowProps,
+  "activeDragId" | "showOrdinal" | "dragLabel" | "listLength" | "onReorderStep"
+>) {
+  const isTracking =
+    enableSubtaskTimer && String(activeSubtaskTimerId ?? "").trim() === String(st.id).trim();
+  const ord = index + 1;
+  return (
+    <li
+      className={`relative flex min-h-10 items-center gap-1.5 py-1.5 first:pt-0 sm:gap-2 ${SUBTASK_ROW_HOVER_CLASS}`}
+    >
+      <span className="w-4 shrink-0 sm:w-[1.125rem]" aria-hidden />
+      <span
+        className="w-6 shrink-0 text-right font-mono text-[0.7rem] font-semibold tabular-nums text-zinc-500 dark:text-zinc-500"
+        aria-hidden
+      >
+        {ord}.
+      </span>
+      <input
+        type="checkbox"
+        className={
+          subtasksReadOnly
+            ? `${SUBTASK_CHECKBOX_CLASS} cursor-not-allowed opacity-50`
+            : SUBTASK_CHECKBOX_CLASS
+        }
+        checked={st.done}
+        disabled={subtasksReadOnly}
+        onChange={() => {
+          if (!subtasksReadOnly) {
+            void send({ type: "toggleSubtask", taskId, subtaskId: st.id });
+          }
+        }}
+        title={st.done ? t.subtaskMarkUndone : t.subtaskMarkDone}
+        aria-label={st.done ? t.subtaskMarkUndone : t.subtaskMarkDone}
+      />
+      {editingId === st.id && !subtasksReadOnly ? (
+        <input
+          autoFocus
+          className={`${TASK_SUBTASK_ROW_INPUT_CLASS} min-w-0 flex-1`}
+          value={editVal}
+          onChange={(e) => setEditVal(e.target.value)}
+          onBlur={() => {
+            if (editVal.trim() && editVal.trim() !== st.title) {
+              void send({
+                type: "updateSubtaskTitle",
+                taskId,
+                subtaskId: st.id,
+                title: editVal.trim(),
+              });
+            }
+            setEditingId(null);
+          }}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") {
+              (e.target as HTMLInputElement).blur();
+            }
+            if (e.key === "Escape") {
+              setEditingId(null);
+            }
+          }}
+          aria-label={t.subtasksHeading}
+        />
+      ) : subtasksReadOnly ? (
+        <span
+          className={`min-w-0 flex-1 truncate text-left text-base font-medium leading-snug ${
+            st.done ? SUBTASK_DONE_TITLE_CLASS : "text-zinc-900 dark:text-zinc-200"
+          }`}
+        >
+          {st.title}
+        </span>
+      ) : (
+        <button
+          type="button"
+          className={`min-w-0 flex-1 truncate text-left text-base font-medium leading-snug outline-none hover:text-violet-800 focus-visible:ring-2 focus-visible:ring-violet-500/50 rounded-sm dark:hover:text-zinc-100 ${
+            st.done ? SUBTASK_DONE_TITLE_CLASS : "text-zinc-900 dark:text-zinc-200"
+          }`}
+          onClick={() => {
+            setEditingId(st.id);
+            setEditVal(st.title);
+          }}
+        >
+          {st.title}
+        </button>
+      )}
+      <SubtaskDurationCell
+        durationMs={st.durationMs}
+        isTracking={isTracking}
+        enableSubtaskTimer={enableSubtaskTimer}
+        subtaskDone={st.done}
+        subtasksReadOnly={subtasksReadOnly}
+        t={t}
+      />
+      <div className="flex shrink-0 items-center gap-0.5">
+        {enableSubtaskTimer && !st.done && !subtasksReadOnly && (
+          <button
+            type="button"
+            className={`rounded p-1.5 ${isTracking ? "bg-emerald-200 text-emerald-900 dark:bg-emerald-600/30 dark:text-emerald-300" : "text-zinc-600 hover:bg-zinc-200/90 dark:text-zinc-400 dark:hover:bg-zinc-800"}`}
+            title={isTracking ? t.subtaskTimerStop : t.subtaskTimerStart}
+            aria-label={isTracking ? t.subtaskTimerStop : t.subtaskTimerStart}
+            onClick={() =>
+              void send({
+                type: "setActiveSubtaskTimer",
+                taskId,
+                subtaskId: isTracking ? null : st.id,
+              })
+            }
+          >
+            {isTracking ? <Pause size={14} /> : <Play size={14} />}
+          </button>
+        )}
+        {!subtasksReadOnly ? (
+          <button
+            type="button"
+            className="rounded p-1.5 text-zinc-600 hover:bg-red-100 hover:text-red-800 dark:text-zinc-500 dark:hover:bg-red-950/50 dark:hover:text-red-400"
+            title={t.subtaskDelete}
+            aria-label={t.subtaskDelete}
+            onClick={() => void send({ type: "deleteSubtask", taskId, subtaskId: st.id })}
+          >
+            <Trash2 size={14} />
+          </button>
+        ) : null}
+      </div>
+    </li>
+  );
+}
+
+export function TaskSubtasksBlock({
+  taskId,
+  sessionId,
+  subtasks,
+  enableSubtaskTimer = false,
+  activeSubtaskTimerId,
+  allowAddSubtasks = false,
+  subtasksReadOnly = false,
+  t,
+  post,
+}: {
+  taskId: string;
+  sessionId: string | null | undefined;
+  subtasks: SubtaskDto[] | undefined;
+  enableSubtaskTimer?: boolean;
+  activeSubtaskTimerId?: string;
+  /** Affiche la ligne « nouvelle sous-tâche » (ex. tâche active en session live, non terminée). */
+  allowAddSubtasks?: boolean;
+  /** Tâche parente terminée : pas de cocher, renommer, supprimer ni ajouter. */
+  subtasksReadOnly?: boolean;
+  t: DashboardStrings;
+  post: (body: Record<string, unknown>) => Promise<void>;
+}) {
+  const [draft, setDraft] = useState("");
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [editVal, setEditVal] = useState("");
+  const [activeDragId, setActiveDragId] = useState<string | null>(null);
+  const [activeSubtask, setActiveSubtask] = useState<SubtaskDto | null>(null);
+  const [activeOverlayOrd, setActiveOverlayOrd] = useState(1);
+  const list = subtasks ?? [];
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 6 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
+  );
+
+  useEffect(() => {
+    if (subtasksReadOnly) {
+      setEditingId(null);
+      setDraft("");
+    }
+  }, [subtasksReadOnly]);
+
+  const send = async (body: Record<string, unknown>) => {
+    await post({
+      ...body,
+      ...(sessionId ? { sessionId } : {}),
+    });
+  };
+
+  const hasSubtasks = list.length > 0;
+  const showAddRow = allowAddSubtasks && !subtasksReadOnly;
+  const canReorder = !subtasksReadOnly && list.length > 1;
+  if (!hasSubtasks && !showAddRow) {
+    return null;
+  }
+
+  const sortableIds = list.map((s) => s.id);
+
+  const handleDragStart = (event: DragStartEvent) => {
+    const id = String(event.active.id);
+    setActiveDragId(id);
+    const idx = list.findIndex((s) => s.id === id);
+    const st = list[idx];
+    if (st) {
+      setActiveSubtask(st);
+      setActiveOverlayOrd(idx + 1);
+    }
+  };
+
+  const handleDragOver = (event: DragOverEvent) => {
+    const { over } = event;
+    if (!over) {
+      return;
+    }
+    const idx = list.findIndex((s) => s.id === String(over.id));
+    if (idx >= 0) {
+      setActiveOverlayOrd(idx + 1);
+    }
+  };
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+    setActiveDragId(null);
+    setActiveSubtask(null);
+    if (!over || active.id === over.id) {
+      return;
+    }
+    const oldIndex = list.findIndex((s) => s.id === active.id);
+    const newIndex = list.findIndex((s) => s.id === over.id);
+    if (oldIndex < 0 || newIndex < 0) {
+      return;
+    }
+    const next = arrayMove(list, oldIndex, newIndex);
+    void send({
+      type: "reorderSubtasks",
+      taskId,
+      orderedSubtaskIds: next.map((s) => s.id),
+    });
+  };
+
+  const handleDragCancel = () => {
+    setActiveDragId(null);
+    setActiveSubtask(null);
+  };
+
+  const showOrdinal = !activeDragId;
+
+  const handleReorderStep = (fromIndex: number, delta: -1 | 1) => {
+    const toIndex = fromIndex + delta;
+    if (toIndex < 0 || toIndex >= list.length) {
+      return;
+    }
+    const next = arrayMove(list, fromIndex, toIndex);
+    void send({
+      type: "reorderSubtasks",
+      taskId,
+      orderedSubtaskIds: next.map((s) => s.id),
+    });
+  };
+
+  const listSection = canReorder ? (
+    <DndContext
+      sensors={sensors}
+      collisionDetection={closestCenter}
+      onDragStart={handleDragStart}
+      onDragOver={handleDragOver}
+      onDragEnd={handleDragEnd}
+      onDragCancel={handleDragCancel}
+    >
+      <div
+        className={`relative rounded-lg px-0.5 py-0.5 transition-[background-color,box-shadow] duration-200 ${
+          activeDragId
+            ? "bg-zinc-500/20 shadow-inner ring-1 ring-zinc-500/45 dark:bg-black/55 dark:ring-zinc-600/55"
+            : ""
+        }`}
+      >
+        <SortableContext items={sortableIds} strategy={verticalListSortingStrategy}>
+          <ul className="divide-y divide-zinc-200 dark:divide-zinc-800/90">
+            {list.map((st, index) => (
+              <SortableSubtaskRow
+                key={st.id}
+                st={st}
+                index={index}
+                showOrdinal={showOrdinal}
+                activeDragId={activeDragId}
+                taskId={taskId}
+                enableSubtaskTimer={enableSubtaskTimer}
+                activeSubtaskTimerId={activeSubtaskTimerId}
+                subtasksReadOnly={subtasksReadOnly}
+                t={t}
+                editingId={editingId}
+                editVal={editVal}
+                setEditingId={setEditingId}
+                setEditVal={setEditVal}
+                send={send}
+                dragLabel={t.subtaskDragReorderHandle}
+                listLength={list.length}
+                onReorderStep={handleReorderStep}
+              />
+            ))}
+          </ul>
+        </SortableContext>
+      </div>
+      <DragOverlay dropAnimation={{ duration: 220, easing: "cubic-bezier(0.22, 1, 0.36, 1)" }}>
+        {activeSubtask ? (
+          <SubtaskDragPreview
+            st={activeSubtask}
+            ord={activeOverlayOrd}
+            isTracking={
+              enableSubtaskTimer &&
+              String(activeSubtaskTimerId ?? "").trim() === String(activeSubtask.id).trim()
+            }
+            enableSubtaskTimer={enableSubtaskTimer}
+            subtasksReadOnly={subtasksReadOnly}
+            showReorderGutter
+            t={t}
+          />
+        ) : null}
+      </DragOverlay>
+    </DndContext>
+  ) : (
+    <ul className="divide-y divide-zinc-200 dark:divide-zinc-800/90">
+      {list.map((st, index) => (
+        <StaticSubtaskRow
+          key={st.id}
+          st={st}
+          index={index}
+          taskId={taskId}
+          enableSubtaskTimer={enableSubtaskTimer}
+          activeSubtaskTimerId={activeSubtaskTimerId}
+          subtasksReadOnly={subtasksReadOnly}
+          t={t}
+          editingId={editingId}
+          editVal={editVal}
+          setEditingId={setEditingId}
+          setEditVal={setEditVal}
+          send={send}
+        />
+      ))}
+    </ul>
+  );
+
+  return (
+    <div className="mt-4 border-l border-zinc-300 pl-3 ml-0.5 dark:border-zinc-700/55">
+      {hasSubtasks ? (
+        <div className="mb-1.5 text-[0.65rem] font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-500">
+          {t.subtasksHeading}
+        </div>
+      ) : null}
+      {hasSubtasks ? listSection : null}
+      {showAddRow ? (
+        <div
+          className={
+            hasSubtasks ? "mt-2 border-t border-zinc-200 pt-2 dark:border-zinc-800/80" : undefined
+          }
+        >
+          <input
+            className={TASK_SUBTASK_NEW_INLINE_CLASS}
+            placeholder={t.addSubtaskPlaceholder}
+            value={draft}
+            onChange={(e) => setDraft(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && draft.trim()) {
+                e.preventDefault();
+                void send({ type: "addSubtask", taskId, title: draft.trim() });
+                setDraft("");
+              }
+            }}
+            aria-label={t.addSubtaskPlaceholder}
+          />
+        </div>
+      ) : null}
+    </div>
+  );
+}