import { useEffect, useRef, useState } from "react";
import type { BodyElement } from "../../lib/api";
interface ElementContextMenuProps {
x: number;
y: number;
element: BodyElement;
elementIndex: number;
selectedText?: string;
onClose: () => void;
onFocus: (index: number) => void;
onDelete: (index: number) => void;
onDuplicate: (index: number) => void;
onConvert: (index: number, toType: string) => void;
onGenerate: (index: number, action: string) => void;
onCreateTask: (index: number, selectedText?: string) => void;
}
export function ElementContextMenu({
x,
y,
element,
elementIndex,
selectedText,
onClose,
onFocus,
onDelete,
onDuplicate,
onConvert,
onGenerate,
onCreateTask,
}: ElementContextMenuProps) {
const menuRef = useRef<HTMLDivElement>(null);
const [activeSubmenu, setActiveSubmenu] = useState<"generate" | "convert" | null>(null);
// Close on click outside
useEffect(() => {
const handleClickOutside = (e: MouseEvent) => {
if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
onClose();
}
};
const handleKeyDown = (e: KeyboardEvent) => {
if (e.key === "Escape") {
onClose();
}
};
document.addEventListener("mousedown", handleClickOutside);
document.addEventListener("keydown", handleKeyDown);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
document.removeEventListener("keydown", handleKeyDown);
};
}, [onClose]);
// Adjust position if menu would overflow viewport
useEffect(() => {
if (menuRef.current) {
const rect = menuRef.current.getBoundingClientRect();
const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;
if (rect.right > viewportWidth) {
menuRef.current.style.left = `${x - rect.width}px`;
}
if (rect.bottom > viewportHeight) {
menuRef.current.style.top = `${y - rect.height}px`;
}
}
}, [x, y]);
const getElementTypeLabel = () => {
switch (element.type) {
case "heading":
return `Heading ${element.level}`;
case "paragraph":
return "Paragraph";
case "code":
return element.language ? `Code (${element.language})` : "Code";
case "list":
return element.ordered ? "Ordered List" : "Bullet List";
case "chart":
return `Chart (${element.chartType})`;
case "image":
return "Image";
default:
return "Element";
}
};
const menuItemClass =
"w-full px-3 py-1.5 text-left text-xs font-mono text-[#9bc3ff] hover:bg-[rgba(117,170,252,0.1)] flex items-center gap-2";
const submenuTriggerClass =
"w-full px-3 py-1.5 text-left text-xs font-mono text-[#9bc3ff] hover:bg-[rgba(117,170,252,0.1)] flex items-center justify-between";
const dividerClass = "border-t border-[rgba(117,170,252,0.2)] my-1";
return (
<div
ref={menuRef}
className="fixed z-50 bg-[#0a0a0a] border border-[rgba(117,170,252,0.3)] shadow-lg min-w-[180px]"
style={{ left: x, top: y }}
>
{/* Header showing element type */}
<div className="px-3 py-1.5 text-[10px] font-mono text-[#555] uppercase border-b border-[rgba(117,170,252,0.2)]">
{getElementTypeLabel()} [{elementIndex}]
</div>
{/* Focus action */}
<button
className={menuItemClass}
onClick={() => {
onFocus(elementIndex);
onClose();
}}
>
<span className="text-[#75aafc]">></span>
Focus on this element
</button>
{/* Create task action */}
<button
className={menuItemClass}
onClick={() => {
onCreateTask(elementIndex, selectedText);
onClose();
}}
>
<span className="text-[#75aafc]">@</span>
{selectedText ? "Create task from selection" : "Create task from this"}
</button>
<div className={dividerClass} />
{/* Generate submenu */}
<div
className="relative"
onMouseEnter={() => setActiveSubmenu("generate")}
onMouseLeave={() => setActiveSubmenu(null)}
>
<button className={submenuTriggerClass}>
<span className="flex items-center gap-2">
<span className="text-[#75aafc]">+</span>
Generate from this
</span>
<span className="text-[#555]">›</span>
</button>
{activeSubmenu === "generate" && (
<div className="absolute left-full top-0 bg-[#0a0a0a] border border-[rgba(117,170,252,0.3)] shadow-lg min-w-[160px]">
<button
className={menuItemClass}
onClick={() => {
onGenerate(elementIndex, "elaborate");
onClose();
}}
>
Elaborate/Expand
</button>
<button
className={menuItemClass}
onClick={() => {
onGenerate(elementIndex, "summarize");
onClose();
}}
>
Summarize
</button>
<button
className={menuItemClass}
onClick={() => {
onGenerate(elementIndex, "extract_actions");
onClose();
}}
>
Extract action items
</button>
</div>
)}
</div>
{/* Convert submenu */}
<div
className="relative"
onMouseEnter={() => setActiveSubmenu("convert")}
onMouseLeave={() => setActiveSubmenu(null)}
>
<button className={submenuTriggerClass}>
<span className="flex items-center gap-2">
<span className="text-[#75aafc]">~</span>
Convert to...
</span>
<span className="text-[#555]">›</span>
</button>
{activeSubmenu === "convert" && (
<div className="absolute left-full top-0 bg-[#0a0a0a] border border-[rgba(117,170,252,0.3)] shadow-lg min-w-[140px]">
{element.type !== "paragraph" && (
<button
className={menuItemClass}
onClick={() => {
onConvert(elementIndex, "paragraph");
onClose();
}}
>
Paragraph
</button>
)}
{element.type !== "list" && (
<>
<button
className={menuItemClass}
onClick={() => {
onConvert(elementIndex, "list_unordered");
onClose();
}}
>
Bullet List
</button>
<button
className={menuItemClass}
onClick={() => {
onConvert(elementIndex, "list_ordered");
onClose();
}}
>
Numbered List
</button>
</>
)}
{element.type !== "code" && (
<button
className={menuItemClass}
onClick={() => {
onConvert(elementIndex, "code");
onClose();
}}
>
Code Block
</button>
)}
{element.type !== "heading" && (
<>
<div className={dividerClass} />
{[1, 2, 3, 4, 5, 6].map((level) => (
<button
key={level}
className={menuItemClass}
onClick={() => {
onConvert(elementIndex, `heading_${level}`);
onClose();
}}
>
Heading {level}
</button>
))}
</>
)}
</div>
)}
</div>
<div className={dividerClass} />
{/* Duplicate */}
<button
className={menuItemClass}
onClick={() => {
onDuplicate(elementIndex);
onClose();
}}
>
<span className="text-[#75aafc]">++</span>
Duplicate
</button>
{/* Delete */}
<button
className={`${menuItemClass} text-red-400 hover:bg-red-400/10`}
onClick={() => {
onDelete(elementIndex);
onClose();
}}
>
<span className="text-red-400">x</span>
Delete
</button>
</div>
);
}
