To-do List

import { useEffect, useRef, useState } from "react";
import "./TodoList.css";

const LABELS = [
  "Scaffold the project structure",
  "Build the component registry",
  "Implement entitlement gating",
  "Wire up Stripe checkout",
  "Polish the landing page",
];

const START_DELAY = 700;
const STEP_MS = 2250; // how long each task stays "working"

const cls = (base: string, on?: boolean) => base + (on ? " on" : "");
const CheckIcon = ({ on }: { on?: boolean }) => (
  <svg className={cls("todo-icon", on)} viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
    <path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);
const ArrowIcon = ({ on }: { on?: boolean }) => (
  <svg className={cls("todo-icon strong", on)} viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
    <path d="m12.75 15 3-3m0 0-3-3m3 3h-7.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);
const DashedIcon = ({ on }: { on?: boolean }) => (
  <svg className={cls("todo-icon", on)} viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
    <circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" strokeWidth="1.8" strokeDasharray="1.8 3.6" strokeLinecap="round" />
  </svg>
);

// one character slot that rolls the old glyph up and the new one in on change
const RollDigit = ({ char }: { char: string }) => {
  const prev = useRef(char);
  const [roll, setRoll] = useState<{ from: string; to: string } | null>(null);
  const [up, setUp] = useState(false);
  useEffect(() => {
    if (char === prev.current) return;
    const from = prev.current;
    prev.current = char;
    setRoll({ from, to: char });
    setUp(false);
    const raf = requestAnimationFrame(() => requestAnimationFrame(() => setUp(true)));
    const done = setTimeout(() => setRoll(null), 380);
    return () => { cancelAnimationFrame(raf); clearTimeout(done); };
  }, [char]);
  if (!roll) return <span className="roll-digit">{char}</span>;
  return (
    <span className="roll-digit">
      <span className={cls("roll-inner", up)}>
        <span>{roll.from}</span>
        <span>{roll.to}</span>
      </span>
    </span>
  );
};
const RollingCount = ({ value }: { value: string }) => (
  <span className="roll-count" aria-label={value}>
    {value.split("").map((c, i) => <RollDigit key={i} char={c} />)}
  </span>
);
const FilledCheckIcon = () => (
  <svg className="todo-head-check" viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
    <path fillRule="evenodd" clipRule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z" fill="currentColor" />
  </svg>
);

export function TodoList() {
  const [collapsed, setCollapsed] = useState(false);
  // -1 = not started (plan shown), 0..n-1 = working on that task, n = all done
  const [current, setCurrent] = useState(-1);
  const n = LABELS.length;

  useEffect(() => {
    if (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) {
      setCurrent(n);
      return;
    }
    const timers = [setTimeout(() => setCurrent(0), START_DELAY)];
    for (let i = 0; i < n; i++) {
      timers.push(setTimeout(() => setCurrent(i + 1), START_DELAY + (i + 1) * STEP_MS));
    }
    return () => timers.forEach(clearTimeout);
  }, [n]);

  const started = current >= 0;
  const allDone = current >= n;
  const running = started && !allDone;
  const pct = Math.round((Math.min(Math.max(current, 0), n) / n) * 100);

  return (
    <div className="todo">
      <button
        type="button"
        className="todo-head"
        aria-expanded={!collapsed}
        aria-label="Toggle to-dos"
        onClick={() => setCollapsed((c) => !c)}
      >
        <span className="todo-head-icon">
          {allDone ? (
            <FilledCheckIcon />
          ) : running ? (
            <span className="todo-head-pie" style={{ ["--todo-pie" as string]: pct + "%" }} aria-hidden="true">
              <svg className="todo-head-pie-ring" viewBox="0 0 24 24">
                <circle cx="12" cy="12" r="10.5" fill="none" stroke="currentColor" strokeWidth="2.2" strokeDasharray="2.2 4.4" strokeLinecap="round" />
              </svg>
            </span>
          ) : (
            <svg className="todo-list-icon" viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
              <path d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0ZM3.75 12h.007v.008H3.75V12Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm-.375 5.25h.007v.008H3.75v-.008Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          )}
          <svg className="todo-chevron" viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
            <path d="m19.5 8.25-7.5 7.5-7.5-7.5" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </span>
        <span className="todo-title">To-dos</span>
        <span className="todo-count">
          <RollingCount value={Math.min(Math.max(current, 0), n) + "/" + n} />
        </span>
      </button>

      <div className={"todo-collapsible" + (collapsed ? " is-collapsed" : "")}>
        <div className="todo-inner">
          <ul className="todo-list">
            {LABELS.map((label, i) => {
              const done = started && i < current;
              const active = started && i === current && !allDone;
              return (
                <li
                  key={i}
                  className={"todo-item" + (done ? " done" : active ? " active" : "")}
                  style={{ ["--i" as string]: i }}
                >
                  <span className="todo-icon-wrap">
                    <DashedIcon on={!done && !active} />
                    <ArrowIcon on={active} />
                    <CheckIcon on={done} />
                  </span>
                  <span className="todo-label" data-label={label}>{label}</span>
                </li>
              );
            })}
          </ul>
        </div>
      </div>
    </div>
  );
}

/* TodoList.css */
.todo { font-family: "Inter", system-ui, sans-serif; font-size: 13px; color: #1a1a1a; }
.todo-head {
  display: flex; width: 100%; align-items: center; gap: 8px;
  padding: 0; border: 0; background: transparent; cursor: pointer;
  color: #1a1a1a; font-size: 13px; min-height: 22px;
}
.todo-head-icon { position: relative; width: 16px; height: 16px; flex: none; color: #a1a1a1; }
.todo-list-icon, .todo-chevron, .todo-head-check { position: absolute; inset: 0; margin: auto; transition: opacity 140ms ease; }
.todo-list-icon, .todo-chevron { width: 13px; height: 13px; }
/* the solid check reads smaller than an outlined glyph, so render it full-size */
.todo-head-check { width: 16px; height: 16px; color: #15a06a; }
.todo-chevron { opacity: 0; transition: opacity 140ms ease, transform 220ms ease; }
.todo-head[aria-expanded="false"] .todo-chevron { transform: rotate(-90deg); }
.todo-head:hover .todo-list-icon, .todo-head:hover .todo-head-pie, .todo-head:hover .todo-head-check { opacity: 0; }
.todo-head:hover .todo-chevron { opacity: 1; }
.todo-title { font-weight: 500; }
.todo-count { margin-left: auto; color: #a1a1a1; font-variant-numeric: tabular-nums; }
.roll-count { display: inline-flex; align-items: baseline; }
.roll-digit { display: inline-block; overflow: hidden; height: 1em; line-height: 1em; }
.roll-inner { display: flex; flex-direction: column; transition: transform 350ms cubic-bezier(0.4, 0, 0.2, 1); }
.roll-inner span { height: 1em; line-height: 1em; }
.roll-inner.on { transform: translateY(-1em); }
.roll-static { display: inline-block; height: 1em; line-height: 1em; }
.todo-collapsible {
  display: grid; grid-template-rows: 1fr; opacity: 1;
  transition: grid-template-rows 280ms ease, opacity 200ms ease;
}
.todo-collapsible.is-collapsed { grid-template-rows: 0fr; opacity: 0; pointer-events: none; }
.todo-inner { min-height: 0; overflow: hidden; }
.todo-list { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 10px 0 0; }
.todo-item {
  display: flex; align-items: flex-start; gap: 9px; line-height: 18px; color: #a1a1a1;
  animation: todo-item-in 360ms ease backwards;
  animation-delay: calc(var(--i, 0) * 50ms);
}
@keyframes todo-item-in {
  from { opacity: 0; transform: translateY(-7px); }
  to { opacity: 1; transform: translateY(0); }
}
.todo-icon-wrap { position: relative; width: 16px; height: 16px; flex: none; margin-top: 1px; }
.todo-icon {
  position: absolute; inset: 0; width: 16px; height: 16px; color: #a1a1a1;
  opacity: 0; transition: opacity 320ms ease;
}
.todo-icon.on { opacity: 1; }
.todo-icon.strong { color: #1a1a1a; }
.todo-label {
  position: relative; font-weight: 400; color: #a1a1a1;
  transition: color 360ms ease;
}
/* crossfade the gray label into the dark shimmering active state */
.todo-label::before {
  content: attr(data-label);
  position: absolute; inset: 0;
  background: linear-gradient(90deg, #1a1a1a 0%, #1a1a1a 30%, rgba(26, 26, 26, 0.45) 45%, rgba(26, 26, 26, 0.45) 55%, #1a1a1a 70%, #1a1a1a 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  opacity: 0; transition: opacity 360ms ease; pointer-events: none;
}
.todo-item.active .todo-label { color: transparent; }
.todo-item.active .todo-label::before {
  opacity: 1;
  animation: todo-shine 2.25s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
}
.todo-item.done .todo-label { color: #a1a1a1; text-decoration: line-through; }
@keyframes todo-shine {
  0%, 18% { background-position: 100% 0; }
  82%, 100% { background-position: 0% 0; }
}

/* running progress pie in the header — determinate fill = completed / total */
@property --todo-pie {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}
.todo-head-pie {
  position: absolute; inset: 0; margin: auto; width: 13px; height: 13px; border-radius: 50%;
  color: #1a1a1a;
  transition: opacity 140ms ease, --todo-pie 400ms ease;
}
/* dotted outline matching the pending item circles */
.todo-head-pie-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; color: #a1a1a1; }
.todo-head-pie::after {
  content: ""; position: absolute; inset: 2.6px; border-radius: 50%;
  background: conic-gradient(currentColor var(--todo-pie, 0%), transparent 0);
}
@media (prefers-reduced-motion: reduce) {
  .todo-item { animation: none; }
  .todo-icon, .todo-label, .todo-label::before { transition: none; }
  .todo-item.active .todo-label::before { animation: none; }
}
@media (prefers-color-scheme: dark) {
  .todo { color: #f5f5f5; }
  .todo-head { color: #f5f5f5; }
  .todo-head-check { color: #34d399; }
  .todo-head-pie { color: #f5f5f5; }
  .todo-icon.strong { color: #f5f5f5; }
  .todo-label::before { background: linear-gradient(90deg, #f5f5f5 0%, #f5f5f5 30%, rgba(245, 245, 245, 0.45) 45%, rgba(245, 245, 245, 0.45) 55%, #f5f5f5 70%, #f5f5f5 100%); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; }
}