// ═══════════════════════════════════════════════════════════════════
// Plaaayground v2 — Add Task
// Inline "+ Add task" ghost button that expands into an input
// DD: 44px min touch target, Enter to add, Escape to cancel
// Empty text = cancel (never add blank tasks)
// ═══════════════════════════════════════════════════════════════════

import { useState, useRef, useCallback, useEffect } from "react";
import { AnimatePresence, motion } from "framer-motion";
import { Plus } from "lucide-react";
import { cn } from "@/lib/utils";
import { spring } from "@/lib/motion";

export interface AddTaskProps {
  onAdd: (text: string) => void;
  reducedMotion?: boolean;
}

export function AddTask({ onAdd, reducedMotion = false }: AddTaskProps) {
  const [active, setActive] = useState(false);
  const [text, setText] = useState("");
  const inputRef = useRef<HTMLInputElement>(null);

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

  const handleSubmit = useCallback(() => {
    const trimmed = text.trim();
    if (trimmed) {
      onAdd(trimmed);
      // Stay in active mode for rapid entry, clear input
      setText("");
      // Re-focus after state update
      requestAnimationFrame(() => {
        inputRef.current?.focus();
      });
    } else {
      // Empty = cancel
      setText("");
      setActive(false);
    }
  }, [text, onAdd]);

  const handleCancel = useCallback(() => {
    setText("");
    setActive(false);
  }, []);

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

  const handleBlur = useCallback(() => {
    const trimmed = text.trim();
    if (trimmed) {
      onAdd(trimmed);
    }
    setText("");
    setActive(false);
  }, [text, onAdd]);

  const motionTransition = reducedMotion ? { duration: 0.01 } : spring.snappy;

  return (
    <AnimatePresence mode="wait" initial={false}>
      {active ? (
        <motion.div
          key="input"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          transition={motionTransition}
          className="flex items-center gap-1.5 min-h-[44px]"
        >
          <Plus className="w-3.5 h-3.5 text-muted-foreground/40 shrink-0 ml-[13px]" />
          <input
            ref={inputRef}
            value={text}
            onChange={(e) => setText(e.target.value)}
            onBlur={handleBlur}
            onKeyDown={handleKeyDown}
            onClick={(e) => e.stopPropagation()}
            placeholder="Task description..."
            className={cn(
              "flex-1 text-[12px] bg-transparent text-foreground outline-none",
              "border-b border-border/50 py-0.5",
              "placeholder:text-muted-foreground/30",
              "min-w-0"
            )}
          />
        </motion.div>
      ) : (
        <motion.button
          key="button"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          transition={motionTransition}
          onClick={(e) => {
            e.stopPropagation();
            setActive(true);
          }}
          className={cn(
            "flex items-center gap-1.5 text-[12px] text-muted-foreground/40",
            "hover:text-muted-foreground transition-colors py-1",
            "min-h-[44px]"
          )}
        >
          <Plus className="w-3.5 h-3.5" />
          Add task
        </motion.button>
      )}
    </AnimatePresence>
  );
}

export default AddTask;
AddTask

Preview
