1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
|
import { useEffect, useRef } from "react";
// Generic right-click context menu for the sidebar tree. Each call site
// (directive folder, contract row, step row, task row, …) builds its own
// items array. Lifts the viewport-clamping + click-outside / Esc logic
// out of the deleted DirectiveContextMenu so we don't end up with one
// component per entity type.
export interface ContextMenuItem {
/** Display text. Empty for separators. */
label: string;
/** Click handler. Ignored when `separator` is true. */
onClick?: () => void;
/** Render in red — for destructive operations (delete, archive). */
danger?: boolean;
/** Render as a thin divider instead of a button. */
separator?: boolean;
/** Greyed out, non-clickable. Used for items whose preconditions
* aren't met (e.g. "Reopen" on an already-draft contract). */
disabled?: boolean;
}
interface SidebarContextMenuProps {
x: number;
y: number;
items: ContextMenuItem[];
onClose: () => void;
}
export function SidebarContextMenu({ x, y, items, onClose }: SidebarContextMenuProps) {
const menuRef = useRef<HTMLDivElement>(null);
// Close on click outside or Esc.
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]);
// Clamp into viewport if the menu would overflow off the right or
// bottom edge.
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 baseItemClass =
"w-full px-3 py-1.5 text-left text-xs font-mono flex items-center gap-2";
const enabledClass = "text-[#9bc3ff] hover:bg-[rgba(117,170,252,0.1)]";
const dangerClass = "text-red-400 hover:bg-[rgba(239,68,68,0.1)]";
const disabledClass = "text-[#3a4a6a] cursor-not-allowed";
const dividerClass = "border-t border-[rgba(117,170,252,0.2)] my-1";
return (
<div
ref={menuRef}
className="fixed z-50 min-w-[180px] bg-[#0a1628] border border-[rgba(117,170,252,0.3)] rounded shadow-lg py-1"
style={{ left: x, top: y }}
onContextMenu={(e) => e.preventDefault()}
>
{items.map((item, i) => {
if (item.separator) {
return <div key={`sep-${i}`} className={dividerClass} />;
}
const cls = item.disabled
? disabledClass
: item.danger
? dangerClass
: enabledClass;
return (
<button
key={`item-${i}-${item.label}`}
type="button"
disabled={item.disabled}
onClick={() => {
if (item.disabled) return;
item.onClick?.();
onClose();
}}
className={`${baseItemClass} ${cls}`}
>
{item.label}
</button>
);
})}
</div>
);
}
|
