nntrivi2001
f6973d24d6
Review feedback: string widening dropped the compile-time guard at the write/delete boundary right where the Codex panel (the next task) starts writing into this state. Threading <TType extends string = CcArtifactType> through EditorState/EditorModal and ConfirmDeleteState/ConfirmDeleteModal keeps CcConfig.tsx's write/delete calls checked against CcArtifactType by default while still letting a Codex-typed caller instantiate its own union later, removing the two `as CcArtifactType` casts.
95 lines
3.4 KiB
TypeScript
95 lines
3.4 KiB
TypeScript
/**
|
|
* @file ConfirmDeleteModal.tsx
|
|
* @description Confirmation modal for deleting a config artifact. Tool-
|
|
* agnostic — the caller supplies the async delete action; the modal only
|
|
* tracks the busy state and Escape-to-cancel behavior.
|
|
* @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
|
|
*/
|
|
|
|
import { useCallback, useEffect, useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { ShieldAlert, Trash2 } from "lucide-react";
|
|
import type { CcArtifactType } from "../../lib/api";
|
|
|
|
export type ConfirmDeleteState<TType extends string = CcArtifactType> = {
|
|
type: TType;
|
|
scope: "user" | "project" | "auto-memory";
|
|
name?: string;
|
|
path: string;
|
|
project?: string; // set for type === "auto-memory"
|
|
} | null;
|
|
|
|
interface ConfirmDeleteModalProps<TType extends string = CcArtifactType> {
|
|
state: NonNullable<ConfirmDeleteState<TType>>;
|
|
onCancel: () => void;
|
|
onConfirm: () => Promise<void>;
|
|
}
|
|
|
|
export function ConfirmDeleteModal<TType extends string = CcArtifactType>({
|
|
state,
|
|
onCancel,
|
|
onConfirm,
|
|
}: ConfirmDeleteModalProps<TType>) {
|
|
const { t } = useTranslation("ccConfig");
|
|
const [busy, setBusy] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const onKey = (e: KeyboardEvent) => {
|
|
if (e.key === "Escape") onCancel();
|
|
};
|
|
window.addEventListener("keydown", onKey);
|
|
return () => window.removeEventListener("keydown", onKey);
|
|
}, [onCancel]);
|
|
|
|
const handleConfirm = useCallback(async () => {
|
|
setBusy(true);
|
|
try {
|
|
await onConfirm();
|
|
} finally {
|
|
setBusy(false);
|
|
}
|
|
}, [onConfirm]);
|
|
|
|
return (
|
|
<div
|
|
className="fixed inset-0 bg-black/60 z-40 flex items-center justify-center p-4"
|
|
onClick={onCancel}
|
|
>
|
|
<div
|
|
className="relative w-full max-w-lg rounded-xl border border-status-danger/40 bg-surface-1"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<div className="border-b border-border px-4 py-2.5 flex items-center gap-2">
|
|
<ShieldAlert className="w-4 h-4 text-status-danger" />
|
|
<span className="text-sm font-medium text-fg-primary flex-1">
|
|
{t("edit.confirmDelete")}
|
|
</span>
|
|
</div>
|
|
<div className="p-4 space-y-3">
|
|
<p className="text-xs text-fg-secondary leading-relaxed">{t("edit.confirmDeleteBody")}</p>
|
|
<div className="rounded-md border border-border bg-surface-2 px-3 py-2 font-mono text-[11px] text-fg-secondary break-all">
|
|
{t("edit.confirmDeletePath", { path: state.path })}
|
|
</div>
|
|
</div>
|
|
<div className="border-t border-border px-4 py-3 flex items-center justify-end gap-2">
|
|
<button
|
|
onClick={onCancel}
|
|
disabled={busy}
|
|
className="text-[12px] font-medium px-3 py-1.5 rounded-md border border-border bg-surface-2 hover:bg-surface-3 text-fg-secondary disabled:opacity-60"
|
|
>
|
|
{t("edit.cancel")}
|
|
</button>
|
|
<button
|
|
onClick={handleConfirm}
|
|
disabled={busy}
|
|
className="text-[12px] font-medium px-3 py-1.5 rounded-md border border-status-danger/50 bg-status-danger/15 hover:bg-status-danger/25 text-status-danger inline-flex items-center gap-1.5 disabled:opacity-60"
|
|
>
|
|
<Trash2 className="w-3.5 h-3.5" />
|
|
{busy ? t("edit.deleting") : t("edit.confirmDeleteAction")}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|