feat(tags): confirm deletion before removing tags
This commit is contained in:
@@ -36,6 +36,7 @@ export default function Tags() {
|
||||
const [formName, setFormName] = useState("");
|
||||
const [formColor, setFormColor] = useState(DEFAULT_COLOR);
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
const [deleteModal, setDeleteModal] = useState<{ isOpen: boolean; tag: Tag | null }>({ isOpen: false, tag: null });
|
||||
|
||||
const orderingOptions = [
|
||||
{ value: "-updated_at", label: t.ordering?.updatedAtDesc || "Recently Updated" },
|
||||
@@ -191,7 +192,12 @@ export default function Tags() {
|
||||
</Button>
|
||||
)}
|
||||
{canDeleteTag && (
|
||||
<Button variant="ghost" size="icon" onClick={() => void handleDelete(tag)} title={t.actions?.delete || "Delete"}>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => setDeleteModal({ isOpen: true, tag })}
|
||||
title={t.actions?.delete || "Delete"}
|
||||
>
|
||||
<Trash2 className="w-4 h-4 text-red-500" />
|
||||
</Button>
|
||||
)}
|
||||
@@ -250,6 +256,37 @@ export default function Tags() {
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
{deleteModal.tag && (
|
||||
<Modal
|
||||
isOpen={deleteModal.isOpen}
|
||||
onClose={() => setDeleteModal({ isOpen: false, tag: null })}
|
||||
title={t.tags?.deleteTitle || "Delete Tag"}
|
||||
maxWidth="max-w-md"
|
||||
footer={
|
||||
<>
|
||||
<Button variant="secondary" onClick={() => setDeleteModal({ isOpen: false, tag: null })}>
|
||||
{t.actions?.cancel || "Cancel"}
|
||||
</Button>
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={() => {
|
||||
if (!deleteModal.tag) return;
|
||||
void handleDelete(deleteModal.tag);
|
||||
setDeleteModal({ isOpen: false, tag: null });
|
||||
}}
|
||||
>
|
||||
{t.actions?.delete || "Delete"}
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<p className="text-sm leading-relaxed text-slate-600 dark:text-slate-400">
|
||||
{(t.tags?.deleteConfirmMessage as ((name: string) => string) | undefined)?.(deleteModal.tag.name) ||
|
||||
`Are you sure you want to delete "${deleteModal.tag.name}"?`}
|
||||
</p>
|
||||
</Modal>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user