Task list and quick add

"use client";
import * as React from "react";
import { QuickAdd, TaskList, type TaskGroup } from "@/components/ui/notchset/blocks/task-list";
import { Avatar } from "@/components/ui/notchset/avatar";
import { CompanyMark } from "@/components/ui/notchset/company-mark";

/* the companies' own marks, 24×24 paths as the CRM seed draws them */
const GLYPH: Record<string, string> = {
  airtable: "M11.992 1.966c-.434 0-.87.086-1.28.257L1.779 5.917c-.503.208-.49.908.012 1.116l8.982 3.558a3.266 3.266 0 0 0 2.454 0l8.982-3.558c.503-.196.503-.908.012-1.116l-8.957-3.694a3.255 3.255 0 0 0-1.272-.257zM23.4 8.056a.589.589 0 0 0-.222.045l-10.012 3.877a.612.612 0 0 0-.38.564v8.896a.6.6 0 0 0 .821.552L23.62 18.1a.583.583 0 0 0 .38-.551V8.653a.6.6 0 0 0-.6-.596zM.676 8.095a.644.644 0 0 0-.48.19C.086 8.396 0 8.53 0 8.69v8.355c0 .442.515.737.908.54l6.27-3.006.307-.147 2.969-1.436c.466-.22.43-.908-.061-1.092L.883 8.138a.57.57 0 0 0-.207-.044z",
  posthog: "M9.854 14.5 5 9.647.854 5.5A.5.5 0 0 0 0 5.854V8.44a.5.5 0 0 0 .146.353L5 13.647l.147.146L9.854 18.5l.146.147v-.049c.065.03.134.049.207.049h2.586a.5.5 0 0 0 .353-.854L9.854 14.5zm0-5-4-4a.487.487 0 0 0-.409-.144.515.515 0 0 0-.356.21.493.493 0 0 0-.089.288V8.44a.5.5 0 0 0 .147.353l9 9a.5.5 0 0 0 .853-.354v-2.585a.5.5 0 0 0-.146-.354l-5-5zm1-4a.5.5 0 0 0-.854.354V8.44a.5.5 0 0 0 .147.353l4 4a.5.5 0 0 0 .853-.354V9.854a.5.5 0 0 0-.146-.354l-4-4zm12.647 11.515a3.863 3.863 0 0 1-2.232-1.1l-4.708-4.707a.5.5 0 0 0-.854.354v6.585a.5.5 0 0 0 .5.5H23.5a.5.5 0 0 0 .5-.5v-.6c0-.276-.225-.497-.499-.532zm-5.394.032a.8.8 0 1 1 0-1.6.8.8 0 0 1 0 1.6zM.854 15.5a.5.5 0 0 0-.854.354v2.293a.5.5 0 0 0 .5.5h2.293c.222 0 .39-.135.462-.309a.493.493 0 0 0-.109-.545L.854 15.501zM5 14.647.854 10.5a.5.5 0 0 0-.854.353v2.586a.5.5 0 0 0 .146.353L4.854 18.5l.146.147h2.793a.5.5 0 0 0 .353-.854L5 14.647z",
  stripe: "M13.976 9.15c-2.172-.806-3.356-1.426-3.356-2.409 0-.831.683-1.305 1.901-1.305 2.227 0 4.515.858 6.09 1.631l.89-5.494C18.252.975 15.697 0 12.165 0 9.667 0 7.589.654 6.104 1.872 4.56 3.147 3.757 4.992 3.757 7.218c0 4.039 2.467 5.76 6.476 7.219 2.585.92 3.445 1.574 3.445 2.583 0 .98-.84 1.545-2.354 1.545-1.875 0-4.965-.921-6.99-2.109l-.9 5.555C5.175 22.99 8.385 24 11.714 24c2.641 0 4.843-.624 6.328-1.813 1.664-1.305 2.525-3.236 2.525-5.732 0-4.128-2.524-5.851-6.594-7.305h.003z",
  webflow: "m24 4.515-7.658 14.97H9.149l3.205-6.204h-.144C9.566 16.713 5.621 18.973 0 19.485v-6.118s3.596-.213 5.71-2.435H0V4.515h6.417v5.278l.144-.001 2.622-5.277h4.854v5.244h.144l2.72-5.244H24Z",
};

type Task = { id: string; title: string; co: string; color: string; due: string; late?: boolean; group: "today" | "week" | "later" };
const GROUPS = [
  ["today", "Today and earlier"],
  ["week", "This week"],
  ["later", "Later"],
] as const;
/* the demo's today is Monday, Oct 19: one rule gives a new task both its group and its due words */
const TODAY = new Date(Date.UTC(2026, 9, 19));
const DAYS_LEFT_IN_WEEK = 6;
function dueOf(days: number): { due: string; group: Task["group"] } {
  const d = new Date(TODAY.getTime() + days * 864e5);
  const words = days === 0 ? "Today" : days === 1 ? "Tomorrow" : days <= DAYS_LEFT_IN_WEEK ? d.toLocaleDateString("en-US", { weekday: "short", timeZone: "UTC" }) : d.toLocaleDateString("en-US", { month: "short", day: "numeric", timeZone: "UTC" });
  return { due: words, group: days <= 0 ? "today" : days <= DAYS_LEFT_IN_WEEK ? "week" : "later" };
}

export default function TaskListDemo() {
  const [tasks, setTasks] = React.useState<Task[]>([
    { id: "k1", title: "Send the order form to Ana", co: "Airtable", color: "#18bfff", due: "2 days late · Oct 17", late: true, group: "today" },
    { id: "k2", title: "Prep for the discovery call", co: "PostHog", color: "#1d1f27", due: "Today", group: "today" },
    { id: "k3", title: "Chase the security review", co: "Stripe", color: "#635bff", due: "Thu", group: "week" },
    { id: "k4", title: "Quarterly business review deck", co: "Webflow", color: "#146ef5", due: "Nov 12", group: "later" },
  ]);
  const [folded, setFolded] = React.useState<string[]>(["later"]);
  const [done, setDone] = React.useState<Set<string>>(new Set());
  /* a new task's id is never one already used (not the list's length, which k4 already has) */
  const seq = React.useRef(0);
  const groups: TaskGroup[] = GROUPS.map(([key, label]) => ({
    key,
    label,
    folded: folded.includes(key),
    rows: tasks
      .filter((t) => t.group === key)
      .map((t) => ({
        id: t.id,
        title: t.title,
        context: (
          <span className="flex items-center gap-1.5">
            <CompanyMark name={t.co} color={t.color} glyph={GLYPH[t.co.toLowerCase()]} size={16} />
            {t.co}
          </span>
        ),
        due: t.due,
        late: t.late,
        owner: <Avatar name="Ana Ruiz" size={20} />,
        done: done.has(t.id),
      })),
  }));
  return (
    <div className="flex w-full flex-col gap-3">
      <QuickAdd
        onAdd={(title, due) => setTasks([...tasks, { id: `new-${++seq.current}`, title, co: "Airtable", color: "#18bfff", ...dueOf(due) }])}
        dues={[
          { label: "Today", value: 0 },
          { label: "Tomorrow", value: 1 },
          { label: "Next week", value: 7 },
        ]}
      />
      <TaskList groups={groups} onFold={(k) => setFolded(folded.includes(k) ? folded.filter((x) => x !== k) : [...folded, k])} onToggle={(id) => setDone((s) => (s.has(id) ? new Set([...s].filter((x) => x !== id)) : new Set([...s, id])))} onOpen={() => {}} />
    </div>
  );
}