Todo, kanban and notes

import { useState, type FormEvent } from "react";
import { newId, type Task } from "../types";

type Props = { tasks: Task[]; setTasks: (next: Task[] | ((prev: Task[]) => Task[])) => void };

export function TodoList({ tasks, setTasks }: Props) {
  const [title, setTitle] = useState("");
  const [showDone, setShowDone] = useState(true);

  function add(e: FormEvent) {
    e.preventDefault();
    const t = title.trim();
    if (!t) return;
    setTasks((prev) => [{ id: newId(), title: t, column: "todo", createdAt: Date.now() }, ...prev]);
    setTitle("");
  }
  const toggle = (id: string) => setTasks((prev) => prev.map((t) => (t.id === id ? { ...t, column: t.column === "done" ? "todo" : "done" } : t)));
  const remove = (id: string) => setTasks((prev) => prev.filter((t) => t.id !== id));
  const visible = tasks.filter((t) => showDone || t.column !== "done");
  const remaining = tasks.filter((t) => t.column !== "done").length;

  return (
    <div className="mx-auto max-w-xl">
      <form onSubmit={add} className="flex gap-2">
        <label className="sr-only" htmlFor="new-task">
          New task
        </label>
        <input id="new-task" value={title} onChange={(e) => setTitle(e.target.value)} placeholder="Add a task and press Enter" className="flex-1 rounded-md border border-slate-300 px-3 py-2 text-sm" />
        <button type="submit" className="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white">
          Add
        </button>
      </form>
      <div className="mt-4 flex items-center justify-between text-sm text-slate-500">
        <span>
          {remaining} remaining
        </span>
        <label className="flex items-center gap-2">
          <input type="checkbox" checked={showDone} onChange={(e) => setShowDone(e.target.checked)} /> Show completed
        </label>
      </div>
      <ul className="mt-3 divide-y divide-slate-200 rounded-xl border border-slate-200 bg-white">
        {visible.map((t) => (
          <li key={t.id} className="flex items-center gap-3 p-3">
            <input type="checkbox" checked={t.column === "done"} onChange={() => toggle(t.id)} aria-label={"Mark " + t.title + (t.column === "done" ? " as not done" : " as done")} />
            <span className={"flex-1 text-sm " + (t.column === "done" ? "text-slate-400 line-through" : "")}>{t.title}</span>
            <button type="button" onClick={() => remove(t.id)} className="text-xs text-slate-400 hover:text-red-600" aria-label={"Delete " + t.title}>
              Delete
            </button>
          </li>
        ))}
        {visible.length === 0 ? <li className="p-6 text-center text-sm text-slate-500">Nothing here yet.</li> : null}
      </ul>
    </div>
  );
}