Add delete button

src/components/SignatureListItem.tsx

@@ -1,13 +1,26 @@
 import { Badge } from "@/components/ui/badge";
-import { Clock, AlertTriangle, Skull } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+    AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import { Clock, AlertTriangle, Skull, Trash2 } from "lucide-react";
 import { SigviewRecord as Signature } from "@/lib/pbtypes";
 import { getSignatureMeta } from "@/hooks/useSignatureCategories";
 
 interface SignatureListItemProps {
 	signature: Signature;
+	onDelete?: (signatureId: string) => Promise<void>;
 }
 
-export const SignatureListItem = ({ signature }: SignatureListItemProps) => {
+export const SignatureListItem = ({ signature, onDelete }: SignatureListItemProps) => {
 	const isOld = () => {
 		if (!signature.updated) return false;
 		const updatedTime = new Date(signature.updated);
@@ -46,6 +59,16 @@ export const SignatureListItem = ({ signature }: SignatureListItemProps) => {
 	const isGasSite = signature.type?.toLowerCase().includes('gas');
 	const oldEntry = isOld();
 
+	const handleDelete = async () => {
+		if (onDelete) {
+			try {
+				await onDelete(signature.id);
+			} catch (error) {
+				console.error('Failed to delete signature:', error);
+			}
+		}
+	};
+
 	return (
 		<div
 			className={`flex items-center justify-between p-4 border-b border-slate-700 hover:bg-slate-800/40 transition-colors ${
@@ -95,6 +118,42 @@ export const SignatureListItem = ({ signature }: SignatureListItemProps) => {
 					)}
 				</div>
 			</div>
+
+			{/* Delete Button */}
+			{onDelete && (
+				<AlertDialog>
+					<AlertDialogTrigger asChild>
+						<Button
+							variant="ghost"
+							size="icon"
+							className="h-8 w-8 text-slate-400 hover:text-red-400 hover:bg-red-900/20 transition-colors"
+						>
+							<Trash2 className="h-4 w-4" />
+						</Button>
+					</AlertDialogTrigger>
+					<AlertDialogContent className="bg-slate-800 border-slate-700">
+						<AlertDialogHeader>
+							<AlertDialogTitle className="text-white">Delete Signature</AlertDialogTitle>
+							<AlertDialogDescription className="text-slate-300">
+								Are you sure you want to delete signature <span className="font-mono text-white">{signature.identifier}</span>?
+								<br />
+								This action cannot be undone.
+							</AlertDialogDescription>
+						</AlertDialogHeader>
+						<AlertDialogFooter>
+							<AlertDialogCancel className="bg-slate-700 border-slate-600 text-slate-200 hover:bg-slate-600">
+								Cancel
+							</AlertDialogCancel>
+							<AlertDialogAction
+								onClick={handleDelete}
+								className="bg-red-600 hover:bg-red-700 text-white"
+							>
+								Delete
+							</AlertDialogAction>
+						</AlertDialogFooter>
+					</AlertDialogContent>
+				</AlertDialog>
+			)}
 		</div>
 	);
 };