4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T6a4d,"use client"; import { AlertTriangleIcon, ArchiveIcon, CalendarIcon, CheckIcon, ChevronDownIcon, CopyIcon, LinkIcon, MessageSquareIcon, MoreHorizontalIcon, PaperclipIcon, Undo2Icon, UserPlusIcon, } from "lucide-react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { useEffect, useId, useMemo, useRef, useState } from "react"; import { Avatar, AvatarFallback } from "@/components/ui/avatar"; import { Button } from "@/components/ui/button"; import { Checkbox } from "@/components/ui/checkbox"; import { Menu, MenuCheckboxItem, MenuGroup, MenuGroupLabel, MenuItem, MenuPopup, MenuSeparator, MenuShortcut, MenuTrigger, } from "@/components/ui/menu"; import { Tooltip, TooltipPopup, TooltipTrigger } from "@/components/ui/tooltip"; import { cn } from "@/lib/utils"; export type TaskTone = "violet" | "sky" | "emerald" | "amber" | "rose" | "slate"; export type TaskPriority = "none" | "low" | "medium" | "high" | "urgent"; export interface TaskLabel { name: string; tone: TaskTone; } export interface TaskPerson { id: string; name: string; initials: string; tone?: TaskTone; } export interface TaskChecklistItem { id: string; text: string; done: boolean; } export interface Task { id: string; title: string; priority?: TaskPriority; labels?: TaskLabel[]; assignees?: string[]; checklist?: TaskChecklistItem[]; due?: Date | string | null; comments?: number; attachments?: number; } export type TaskCardAction = "copy-link" | "duplicate" | "archive" | "restore"; export interface TaskCardProps { task: Task; people?: TaskPerson[]; now?: Date; defaultExpanded?: boolean; onChange?: (task: Task) => void; onAction?: (action: TaskCardAction, task: Task) => void; className?: string; } const labelTones: Record = { violet: { chip: "bg-violet-500/10 text-violet-700 dark:bg-violet-500/16 dark:text-violet-300", dot: "bg-violet-500" }, sky: { chip: "bg-sky-500/10 text-sky-700 dark:bg-sky-500/16 dark:text-sky-300", dot: "bg-sky-500" }, emerald: { chip: "bg-emerald-500/10 text-emerald-700 dark:bg-emerald-500/16 dark:text-emerald-300", dot: "bg-emerald-500", }, amber: { chip: "bg-amber-500/12 text-amber-700 dark:bg-amber-500/16 dark:text-amber-300", dot: "bg-amber-500" }, rose: { chip: "bg-rose-500/10 text-rose-700 dark:bg-rose-500/16 dark:text-rose-300", dot: "bg-rose-500" }, slate: { chip: "bg-muted text-muted-foreground", dot: "bg-muted-foreground" }, }; const personTones: Record = { violet: "bg-violet-500 text-white", sky: "bg-sky-600 text-white", emerald: "bg-emerald-600 text-white", amber: "bg-amber-500 text-white", rose: "bg-rose-500 text-white", slate: "bg-muted-foreground text-background", }; const priorityLabel: Record = { none: "No priority", low: "Low priority", medium: "Medium priority", high: "High priority", urgent: "Urgent", }; const DAY = 86_400_000; const quick = "text-muted-foreground transition-[scale,background-color] duration-150 ease-out after:absolute after:inset-x-0 after:-inset-y-1 active:scale-[0.94]"; const startOfDay = (d: Date) => new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime(); const toDate = (d: Date | string | null | undefined) => (d == null ? null : d instanceof Date ? d : new Date(d)); const shortDate = (d: Date) => d.toLocaleDateString("en-US", { month: "short", day: "numeric" }); type DueState = { key: string; label: string; tone: string; Icon: typeof CalendarIcon; hint: string }; function dueState(due: Date | null, now: Date, complete: boolean): DueState | null { if (!due) return null; const diff = Math.round((startOfDay(due) - startOfDay(now)) / DAY); const date = shortDate(due); if (complete) { return { key: "done", label: date, tone: "bg-success/10 text-success-foreground dark:bg-success/16", Icon: CheckIcon, hint: `Checklist complete, due ${date}`, }; } if (diff <= -3) { return { key: "overdue", label: `${-diff}d late`, tone: "bg-destructive/10 text-destructive-foreground dark:bg-destructive/16", Icon: AlertTriangleIcon, hint: `Was due ${date}`, }; } if (diff < 0) { return { key: "late", label: `${-diff}d late`, tone: "bg-warning/12 text-warning-foreground dark:bg-warning/16", Icon: AlertTriangleIcon, hint: `Was due ${date}`, }; } if (diff === 0) { return { key: "today", label: "Today", tone: "bg-info/10 text-info-foreground dark:bg-info/16", Icon: CalendarIcon, hint: `Due today, ${date}` }; } if (diff === 1) { return { key: "soon", label: "Tomorrow", tone: "bg-muted text-foreground", Icon: CalendarIcon, hint: `Due ${date}` }; } return { key: "later", label: date, tone: "bg-muted text-muted-foreground", Icon: CalendarIcon, hint: `Due ${date}` }; } function PriorityGlyph({ level }: { level: TaskPriority }) { if (level === "urgent") { return ( ! ); } const filled = { none: 0, low: 1, medium: 2, high: 3 }[level]; return ( ); } function RollingCount({ value, reduce }: { value: number; reduce: boolean | null }) { return ( {value} ); } function ProgressRing({ value, complete, reduce }: { value: number; complete: boolean; reduce: boolean | null }) { const r = 6.5; return ( ); } export function TaskCard({ task, people = [], now: nowProp, defaultExpanded = false, onChange, onAction, className, }: TaskCardProps) { const reduce = useReducedMotion(); const listId = useId(); const [now] = useState(() => nowProp ?? new Date()); const [checklist, setChecklist] = useState(task.checklist ?? []); const [assignees, setAssignees] = useState(task.assignees ?? []); const [due, setDue] = useState(toDate(task.due)); const [expanded, setExpanded] = useState(defaultExpanded); const [openMenu, setOpenMenu] = useState(null); const [archived, setArchived] = useState(false); const [copied, setCopied] = useState(false); const copyTimer = useRef>(undefined); const archiveRef = useRef(null); const cardRef = useRef(null); useEffect(() => () => clearTimeout(copyTimer.current), []); const done = checklist.filter((i) => i.done).length; const total = checklist.length; const complete = total > 0 && done === total; const dueInfo = dueState(due, nowProp ?? now, complete); const peopleById = useMemo(() => new Map(people.map((p) => [p.id, p])), [people]); const assigned = assignees.map((id) => peopleById.get(id)).filter((p): p is TaskPerson => Boolean(p)); const current = (patch: Partial): Task => ({ ...task, checklist, assignees, due, ...patch }); const spring = reduce ? { duration: 0 } : { type: "spring" as const, stiffness: 420, damping: 34 }; const toggleItem = (id: string) => { const next = checklist.map((i) => (i.id === id ? { ...i, done: !i.done } : i)); setChecklist(next); onChange?.(current({ checklist: next })); }; const toggleAssignee = (id: string, on: boolean) => { const next = on ? [...assignees.filter((a) => a !== id), id] : assignees.filter((a) => a !== id); setAssignees(next); onChange?.(current({ assignees: next })); }; const setDueIn = (days: number | null) => { const next = days == null ? null : new Date(startOfDay(nowProp ?? now) + days * DAY); setDue(next); onChange?.(current({ due: next })); }; const action = (a: TaskCardAction) => { if (a === "copy-link") { navigator.clipboard?.writeText(`#${task.id}`).catch(() => {}); setCopied(true); clearTimeout(copyTimer.current); copyTimer.current = setTimeout(() => setCopied(false), 1600); } if (a === "archive") { setArchived(true); requestAnimationFrame(() => archiveRef.current?.focus()); } if (a === "restore") { setArchived(false); requestAnimationFrame(() => cardRef.current?.focus()); } onAction?.(a, current({})); }; const menuProps = (name: string) => ({ open: openMenu === name, onOpenChange: (open: boolean) => setOpenMenu((o) => (open ? name : o === name ? null : o)), }); const priority = task.priority ?? "none"; return ( {archived ? ( {task.id} archived ) : (

} > {priorityLabel[priority]} {copied ? ( <> Link copied ) : ( task.id )}

} > Assign to {people.map((p) => ( toggleAssignee(p.id, on)} > {p.initials} {p.name} ))} } > Due date {[ { label: "Today", days: 0 }, { label: "Tomorrow", days: 1 }, { label: "Next week", days: 7 }, ].map((o) => ( setDueIn(o.days)}> {o.label} {shortDate(new Date(startOfDay(nowProp ?? now) + o.days * DAY))} ))} setDueIn(null)}> Clear due date } > action("copy-link")}> Copy link action("duplicate")}> Duplicate action("archive")} variant="destructive"> Archive

{task.title}

{task.labels && task.labels.length > 0 && (

{l.name}

)} {total > 0 && (

{expanded && (

toggleItem(item.id)} /> {item.text}

)}

)} )} ); } 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L4e",null,{"namespace":"@devl","registryDependencies":["utils","https://coss.com/ui/r/avatar.json","https://coss.com/ui/r/button.json","https://coss.com/ui/r/checkbox.json","https://coss.com/ui/r/menu.json","https://coss.com/ui/r/tooltip.json"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/devl/task-card.tsx","content":"$50","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]