// ═══════════════════════════════════════════════════════════════════
// Plaaayground v2 — Task Item
// Individual task row: DDCheckbox + text + inline edit + delete
// DD: 44px min height, spring.snappy check, instant uncheck
// DD: Double-click to edit, hover to reveal delete
// ═══════════════════════════════════════════════════════════════════

import { useState, useRef, useCallback, useEffect, memo } from "react";
import { motion } from "framer-motion";
import { X, Wrench } from "lucide-react";
import { cn } from "@/lib/utils";
import { spring } from "@/lib/motion";
import { DDCheckbox } from "@/components/dd";
import type { Task } from "@/types/board";

export interface TaskItemProps {
  task: Task;
  onToggle: (taskId: string) => void;
  onUpdate: (taskId: string, text: string) => void;
  onDelete: (taskId: string) => void;
  reducedMotion?: boolean;
}

export const TaskItem = memo(function TaskItem({
  task,
  onToggle,
  onUpdate,
  onDelete,
  reducedMotion = false,
}: TaskItemProps) {
  const [editing, setEditing] = useState(false);
  const [editText, setEditText] = useState(task.text);
  const inputRef = useRef<HTMLInputElement>(null);

  // Sync local text when task.text changes externally
  useEffect(() => {
    if (!editing) {
      setEditText(task.text);
    }
  }, [task.text, editing]);

  // Focus input when entering edit mode
  useEffect(() => {
    if (editing && inputRef.current) {
      inputRef.current.focus();
      inputRef.current.select();
    }
  }, [editing]);

  const handleSave = useCallback(() => {
    const trimmed = editText.trim();
    if (trimmed && trimmed !== task.text) {
      onUpdate(task.id, trimmed);
    } else {
      // Revert if empty or unchanged
      setEditText(task.text);
    }
    setEditing(false);
  }, [editText, task.id, task.text, onUpdate]);

  const handleCancel = useCallback(() => {
    setEditText(task.text);
    setEditing(false);
  }, [task.text]);

  const handleKeyDown = useCallback(
    (e: React.KeyboardEvent) => {
      if (e.key === "Enter") {
        e.preventDefault();
        handleSave();
      }
      if (e.key === "Escape") {
        e.preventDefault();
        handleCancel();
      }
    },
    [handleSave, handleCancel]
  );

  return (
    <motion.div
      layout
      initial={{ opacity: 0, height: 0 }}
      animate={{ opacity: 1, height: "auto" }}
      exit={{ opacity: 0, height: 0, marginTop: 0 }}
      transition={reducedMotion ? { duration: 0.01 } : spring.default}
      className="group/task"
    >
      <div className="flex items-center gap-1.5 min-h-[44px]">
        {/* Circular DDCheckbox -- spring animation, 44px touch target */}
        <div
          className="shrink-0"
          onClick={(e) => e.stopPropagation()}
        >
          <DDCheckbox
            checked={task.completed}
            onChange={() => onToggle(task.id)}
            variant="circle"
            size={16}
            className="p-0 min-w-[44px] min-h-[44px]"
          />
        </div>

        {/* Task text -- double-click to edit inline */}
        {editing ? (
          <input
            ref={inputRef}
            value={editText}
            onChange={(e) => setEditText(e.target.value)}
            onBlur={handleSave}
            onKeyDown={handleKeyDown}
            onClick={(e) => e.stopPropagation()}
            className={cn(
              "flex-1 text-[12px] bg-transparent text-foreground outline-none",
              "border-b border-brand/50 py-0.5",
              "min-w-0"
            )}
          />
        ) : (
          <span
            onDoubleClick={(e) => {
              e.stopPropagation();
              e.preventDefault();
              setEditing(true);
            }}
            className={cn(
              "flex-1 text-[12px] leading-snug cursor-default py-0.5 select-none",
              "min-w-0 truncate",
              task.completed
                ? "text-muted-foreground/50 line-through"
                : "text-foreground/80"
            )}
          >
            {task.text}
          </span>
        )}

        {/* Tool recommendation badge */}
        {task.toolRecommendation && !editing && (
          <Wrench className="w-3 h-3 text-brand/50 shrink-0" />
        )}

        {/* Delete button -- visible on hover */}
        {!editing && (
          <button
            onClick={(e) => {
              e.stopPropagation();
              onDelete(task.id);
            }}
            className={cn(
              "opacity-0 group-hover/task:opacity-100",
              "transition-opacity duration-150",
              "p-1 -m-0.5 hover:bg-black/[0.06] shrink-0",
              "min-w-[28px] min-h-[28px] flex items-center justify-center"
            )}
            aria-label={`Delete task: ${task.text}`}
          >
            <X className="w-3 h-3 text-muted-foreground/60" />
          </button>
        )}
      </div>
    </motion.div>
  );
});

export default TaskItem;
TaskItem

Source Code
