Plan

1"use client";
2 
3import * as React from "react";
4import { useMemo, useState, useEffect, useRef, memo } from "react";
5import { Loader2, Check, X, MoreHorizontal, ChevronRight } from "lucide-react";
6import type { PlanProps, PlanTodo, PlanTodoStatus } from "./schema";
7import {
8  cn,
9  Card,
10  CardHeader,
11  CardTitle,
12  CardDescription,
13  CardContent,
14  Accordion,
15  AccordionItem,
16  AccordionTrigger,
17  AccordionContent,
18  Collapsible,
19  CollapsibleTrigger,
20  CollapsibleContent,
21} from "./_adapter";
22import { calculatePlanProgress, shouldCelebrateProgress } from "./progress";
23 
24const INITIAL_VISIBLE_TODO_COUNT = 4;
25 
26const TodoIcon = memo(function TodoIcon({
27  status,
28}: {
29  status: PlanTodoStatus;
30}) {
31  if (status === "pending") {
32    return (
33      <span
34        className="border-border bg-card flex size-6 shrink-0 items-center justify-center rounded-full border motion-safe:transition-all motion-safe:duration-200"
35        aria-hidden="true"
36      />
37    );
38  }
39 
40  if (status === "in_progress") {
41    return (
42      <span
43        className="border-border bg-card flex size-6 shrink-0 items-center justify-center rounded-full border shadow-[0_0_0_4px_hsl(var(--primary)/0.1)] motion-safe:transition-all motion-safe:duration-300"
44        aria-hidden="true"
45      >
46        <Loader2 className="text-primary size-5 motion-safe:animate-spin" />
47      </span>
48    );
49  }
50 
51  if (status === "completed") {
52    return (
53      <span
54        className="border-primary bg-primary flex size-6 shrink-0 items-center justify-center rounded-full border shadow-sm motion-safe:animate-in motion-safe:fade-in motion-safe:zoom-in-75 motion-safe:duration-300 motion-safe:ease-out"
55        aria-hidden="true"
56      >
57        <Check
58          className="text-primary-foreground size-4 motion-safe:animate-in motion-safe:fade-in motion-safe:zoom-in-75 motion-safe:delay-75 motion-safe:duration-200 motion-safe:fill-mode-both"
59          strokeWidth={3}
60        />
61      </span>
62    );
63  }
64 
65  if (status === "cancelled") {
66    return (
67      <span
68        className="border-destructive bg-destructive flex size-6 shrink-0 items-center justify-center rounded-full border shadow-sm motion-safe:animate-in motion-safe:fade-in motion-safe:zoom-in-75 motion-safe:duration-300 motion-safe:ease-out dark:border-red-600 dark:bg-red-600"
69        aria-hidden="true"
70      >
71        <X
72// … truncated