Open History to see the last commit
1import { MessagesSquareIcon } from "lucide-react";
2import { createPortal } from "react-dom";
3
4import { useThreadContextDragGhost } from "./threadContextDrag";
5
6export function ThreadContextDragGhost() {
7 const ghost = useThreadContextDragGhost();
8 if (ghost === null) return null;
9 return createPortal(
10 <div
11 aria-hidden="true"
12 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"
13 style={{ transform: `translate(${ghost.x + 12}px, ${ghost.y + 12}px)` }}
14 >
15 <MessagesSquareIcon className="size-4 shrink-0 text-secondary-label" />
16 <span className="truncate">{ghost.title}</span>
17 {ghost.count > 1 ? (
18 <span className="shrink-0 rounded-full bg-muted px-1.5 text-xs text-secondary-label">
19 +{ghost.count - 1}
20 </span>
21 ) : null}
22 </div>,
23 document.body,
24 );
25}