f4fb69dbc7
Add jsinspect-plus (AST-based structural duplication detector) to pnpm check with threshold 50 / min 3 instances. Fix all findings: - Extract condition icon/color maps to shared condition-styles.ts - Extract useClickOutside hook (5 components) - Extract dispatchAction + resolveAndRename in use-encounter - Extract runEncounterAction in application layer (13 use cases) - Extract findCombatant helper in domain (9 functions) - Extract TraitSection in stat-block (4 trait rendering blocks) - Extract DialogHeader in dialog.tsx (4 dialogs) Net result: -263 lines across 40 files. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
72 lines
1.7 KiB
TypeScript
72 lines
1.7 KiB
TypeScript
import { X } from "lucide-react";
|
|
import { type ReactNode, useEffect, useRef } from "react";
|
|
import { cn } from "../../lib/utils.js";
|
|
import { Button } from "./button.js";
|
|
|
|
interface DialogProps {
|
|
open: boolean;
|
|
onClose: () => void;
|
|
className?: string;
|
|
children: ReactNode;
|
|
}
|
|
|
|
export function Dialog({ open, onClose, className, children }: DialogProps) {
|
|
const dialogRef = useRef<HTMLDialogElement>(null);
|
|
|
|
useEffect(() => {
|
|
const dialog = dialogRef.current;
|
|
if (!dialog) return;
|
|
if (open && !dialog.open) dialog.showModal();
|
|
else if (!open && dialog.open) dialog.close();
|
|
}, [open]);
|
|
|
|
useEffect(() => {
|
|
const dialog = dialogRef.current;
|
|
if (!dialog) return;
|
|
function handleCancel(e: Event) {
|
|
e.preventDefault();
|
|
onClose();
|
|
}
|
|
function handleBackdropClick(e: MouseEvent) {
|
|
if (e.target === dialog) onClose();
|
|
}
|
|
dialog.addEventListener("cancel", handleCancel);
|
|
dialog.addEventListener("mousedown", handleBackdropClick);
|
|
return () => {
|
|
dialog.removeEventListener("cancel", handleCancel);
|
|
dialog.removeEventListener("mousedown", handleBackdropClick);
|
|
};
|
|
}, [onClose]);
|
|
|
|
return (
|
|
<dialog
|
|
ref={dialogRef}
|
|
className={cn(
|
|
"m-auto rounded-lg border border-border bg-card text-foreground shadow-xl backdrop:bg-black/50",
|
|
className,
|
|
)}
|
|
>
|
|
<div className="p-6">{children}</div>
|
|
</dialog>
|
|
);
|
|
}
|
|
|
|
export function DialogHeader({
|
|
title,
|
|
onClose,
|
|
}: Readonly<{ title: string; onClose: () => void }>) {
|
|
return (
|
|
<div className="mb-4 flex items-center justify-between">
|
|
<h2 className="font-semibold text-foreground text-lg">{title}</h2>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon-sm"
|
|
onClick={onClose}
|
|
className="text-muted-foreground"
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|