adrianbonpin/deckyvault
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

refactor(manage): use shared ConfirmDialog in comments page

Browse Source
This commit is contained in:
adrianbonpin
2026-05-10 01:53:13 +08:00
parent 6b6429a9e5
commit 18299fbb8d
1 changed files with 24 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/(manage)/manage/comments/comments-client.tsx
+23 -64
View File
@@ -13,6 +13,7 @@ import {
ChevronRightIcon, ChevronRightIcon,
MessageSquareIcon, MessageSquareIcon,
} from "lucide-react" } from "lucide-react"
import { ConfirmDialog } from "@/components/ui/modal"
interface Comment { interface Comment {
id: string id: string
@@ -419,72 +420,30 @@ export function CommentsClient() {
)} )}
{/* Confirmation Dialogs */} {/* Confirmation Dialogs */}
{confirmAction && ( {confirmAction?.type === "remove" && (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"> <ConfirmDialog
<div className="bg-background border border-border rounded-xl p-6 max-w-sm w-full mx-4 space-y-4"> open={!!confirmAction}
{confirmAction.type === "remove" && ( onClose={() => setConfirmAction(null)}
<> onConfirm={() => handleRemove(confirmAction.comment)}
<h2 className="text-base font-semibold text-text"> title="Confirm Remove"
Confirm Remove message="Are you sure you want to remove this comment?"
</h2> confirmLabel="Remove"
<p className="text-sm text-text/70"> variant="destructive"
Are you sure you want to remove this comment? loading={actionLoading[confirmAction.comment.id]}
</p> />
<div className="flex items-center justify-end gap-2">
<button
onClick={() => setConfirmAction(null)}
className="px-3 py-1.5 rounded-md text-xs font-medium bg-text/5 text-text hover:bg-text/10 transition-colors cursor-pointer"
>
Cancel
</button>
<button
onClick={() => handleRemove(confirmAction.comment)}
disabled={actionLoading[confirmAction.comment.id]}
className="px-3 py-1.5 rounded-md text-xs font-medium bg-red-500/10 text-red-400 hover:bg-red-500/20 transition-colors cursor-pointer disabled:opacity-50 flex items-center gap-1.5"
>
{actionLoading[confirmAction.comment.id] ? (
<Loader2 className="h-3.5 w-3.5 animate-spin" />
) : (
<TrashIcon className="h-3.5 w-3.5" />
)}
Remove
</button>
</div>
</>
)} )}
{confirmAction.type === "restore" && ( {confirmAction?.type === "restore" && (
<> <ConfirmDialog
<h2 className="text-base font-semibold text-text"> open={!!confirmAction}
Confirm Restore onClose={() => setConfirmAction(null)}
</h2> onConfirm={() => handleRestore(confirmAction.comment)}
<p className="text-sm text-text/70"> title="Confirm Restore"
Are you sure you want to restore this comment? message="Are you sure you want to restore this comment?"
</p> confirmLabel="Restore"
<div className="flex items-center justify-end gap-2"> variant="default"
<button loading={actionLoading[confirmAction.comment.id]}
onClick={() => setConfirmAction(null)} />
className="px-3 py-1.5 rounded-md text-xs font-medium bg-text/5 text-text hover:bg-text/10 transition-colors cursor-pointer"
>
Cancel
</button>
<button
onClick={() => handleRestore(confirmAction.comment)}
disabled={actionLoading[confirmAction.comment.id]}
className="px-3 py-1.5 rounded-md text-xs font-medium bg-blue-500/10 text-blue-400 hover:bg-blue-500/20 transition-colors cursor-pointer disabled:opacity-50 flex items-center gap-1.5"
>
{actionLoading[confirmAction.comment.id] ? (
<Loader2 className="h-3.5 w-3.5 animate-spin" />
) : (
<RotateCcwIcon className="h-3.5 w-3.5" />
)}
Restore
</button>
</div>
</>
)}
</div>
</div>
)} )}
</div> </div>
) )