force graph, palette

web/components/routes/link/bottom-bar.tsx

@@ -56,6 +56,8 @@ export const LinkBottomBar: React.FC = () => {
 
 	const cancelBtnRef = useRef<HTMLButtonElement>(null)
 	const confirmBtnRef = useRef<HTMLButtonElement>(null)
+	const overlayRef = useRef<HTMLDivElement>(null)
+	const contentRef = useRef<HTMLDivElement>(null)
 
 	const deleteBtnRef = useRef<HTMLButtonElement>(null)
 	const editMoreBtnRef = useRef<HTMLButtonElement>(null)
@@ -66,6 +68,8 @@ export const LinkBottomBar: React.FC = () => {
 
 	useEffect(() => {
 		setGlobalLinkFormExceptionRefsAtom([
+			overlayRef,
+			contentRef,
 			deleteBtnRef,
 			editMoreBtnRef,
 			cancelBtnRef,
@@ -84,17 +88,19 @@ export const LinkBottomBar: React.FC = () => {
 			alertDialogTitle: {
 				className: "text-base"
 			},
-			customActions(onConfirm, onCancel) {
-				return (
-					<div className="flex items-center gap-2">
-						<Button variant="outline" onClick={onCancel} ref={cancelBtnRef}>
-							Cancel
-						</Button>
-						<Button variant="destructive" onClick={onConfirm} ref={confirmBtnRef}>
-							Delete
-						</Button>
-					</div>
-				)
+			alertDialogOverlay: {
+				ref: overlayRef
+			},
+			alertDialogContent: {
+				ref: contentRef
+			},
+			cancelButton: {
+				variant: "outline",
+				ref: cancelBtnRef
+			},
+			confirmButton: {
+				variant: "destructive",
+				ref: confirmBtnRef
 			}
 		})