| 1 | import { MessagesSquareIcon } from "lucide-react"; |
| 2 | import { createPortal } from "react-dom"; |
| 3 | |
| 4 | import { useThreadContextDragGhost } from "./threadContextDrag"; |
| 5 | |
| 6 | /** Follows the pointer while a sidebar thread is dragged toward a composer. */ |
| 7 | export function ThreadContextDragGhost() { |
| 8 | const ghost = useThreadContextDragGhost(); |
| 9 | if (ghost === null) return null; |
| 10 | return createPortal( |
| 11 | <div |
| 12 | aria-hidden="true" |
| 13 | className="pointer-events-none fixed left-0 top-0 z-[100] flex max-w-72 items-center gap-2 rounded-lg border bg-popover px-3 py-2 text-sm shadow-lg" |
| 14 | style={{ transform: `translate(${ghost.x + 12}px, ${ghost.y + 12}px)` }} |
| 15 | > |
| 16 | <MessagesSquareIcon className="size-4 shrink-0 text-secondary-label" /> |
| 17 | <span className="truncate">{ghost.title}</span> |
| 18 | {ghost.count > 1 ? ( |
| 19 | <span className="shrink-0 rounded-full bg-muted px-1.5 text-xs text-secondary-label"> |
| 20 | +{ghost.count - 1} |
| 21 | </span> |
| 22 | ) : null} |
| 23 | </div>, |
| 24 | document.body, |
| 25 | ); |
| 26 | } |