Add delete button

src/components/SignatureCard.tsx

@@ -1,18 +1,42 @@
 import { Card, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+    AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
 import { SigviewRecord as Signature } from "@/lib/pbtypes";
 import { getSignatureMeta } from "@/hooks/useSignatureCategories";
+import { Trash2 } from "lucide-react";
 
 interface SignatureCardProps {
   signature: Signature;
+  onDelete?: (signatureId: string) => Promise<void>;
 }
 
-export const SignatureCard = ({ signature }: SignatureCardProps) => {
+export const SignatureCard = ({ signature, onDelete }: SignatureCardProps) => {
   const meta = getSignatureMeta(signature.type);
   const isGasSite = signature.type?.toLowerCase().includes('gas');
 
+  const handleDelete = async () => {
+    if (onDelete) {
+      try {
+        await onDelete(signature.id);
+      } catch (error) {
+        console.error('Failed to delete signature:', error);
+      }
+    }
+  };
+
   return (
-    <Card className={`${isGasSite ? 'bg-emerald-900/40 border-emerald-500 shadow-[0_0_15px_rgba(16,185,129,0.5)] hover:shadow-[0_0_20px_rgba(16,185,129,0.7)]' : 'bg-slate-800/40 border-slate-700'} hover:bg-slate-800/60 transition-all duration-200 hover:border-slate-600`}>
+    <Card className={`${isGasSite ? 'bg-emerald-900/40 border-emerald-500 shadow-[0_0_15px_rgba(16,185,129,0.5)] hover:shadow-[0_0_20px_rgba(16,185,129,0.7)]' : 'bg-slate-800/40 border-slate-700'} hover:bg-slate-800/60 transition-all duration-200 hover:border-slate-600 relative`}>
       <CardContent className="pt-6">
         <div className="space-y-3">
           {/* Type Badge - Most Important */}
@@ -45,6 +69,44 @@ export const SignatureCard = ({ signature }: SignatureCardProps) => {
             </div>
           </div>
         </div>
+
+        {/* Delete Button */}
+        {onDelete && (
+          <div className="absolute top-2 right-2">
+            <AlertDialog>
+              <AlertDialogTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-6 w-6 text-slate-400 hover:text-red-400 hover:bg-red-900/20 transition-colors"
+                >
+                  <Trash2 className="h-3 w-3" />
+                </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>
+        )}
       </CardContent>
     </Card>
   );

src/components/SignatureCategories.tsx

@@ -1,4 +1,3 @@
-
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
@@ -9,9 +8,10 @@ import { SignatureCategory } from "@/hooks/useSignatureCategories";
 interface SignatureCategoriesProps {
   categories: SignatureCategory[];
   onToggleCategory: (categoryId: string) => void;
+  onDelete?: (signatureId: string) => Promise<void>;
 }
 
-export const SignatureCategories = ({ categories, onToggleCategory }: SignatureCategoriesProps) => {
+export const SignatureCategories = ({ categories, onToggleCategory, onDelete }: SignatureCategoriesProps) => {
   if (categories.length === 0) {
     return (
       <Card className="bg-slate-800/30 border-slate-700">
@@ -51,7 +51,7 @@ export const SignatureCategories = ({ categories, onToggleCategory }: SignatureC
               <CardContent className="p-0">
                 <div className="divide-y divide-slate-700">
                   {category.signatures.map((signature) => (
-                    <SignatureListItem key={signature.id} signature={signature} />
+                    <SignatureListItem key={signature.id} signature={signature} onDelete={onDelete} />
                   ))}
                 </div>
               </CardContent>

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>
 	);
 };

src/components/SystemTracker.tsx

@@ -15,9 +15,10 @@ interface SystemTrackerProps {
   system: string;
   cleanMode: boolean;
   onCleanModeToggle: (enabled: boolean) => void;
+  onDelete?: (signatureId: string) => Promise<void>;
 }
 
-export const SystemTracker = ({ system, cleanMode, onCleanModeToggle }: SystemTrackerProps) => {
+export const SystemTracker = ({ system, cleanMode, onCleanModeToggle, onDelete }: SystemTrackerProps) => {
   const {
     data: signaturesData,
     refetch: refetchSignatures,
@@ -146,6 +147,7 @@ export const SystemTracker = ({ system, cleanMode, onCleanModeToggle }: SystemTr
         <SignatureCategories
           categories={categories}
           onToggleCategory={toggleCategoryVisibility}
+          onDelete={onDelete}
         />
       )}
     </div>

src/pages/SystemView.tsx

@@ -8,7 +8,7 @@ import { Header } from "@/components/Header";
 import { parseSignature, parseScannedPercentage } from "@/utils/signatureParser";
 import { getSystemId } from "@/utils/systemApi";
 import pb from "@/lib/pocketbase";
-import { SigviewRecord as Signature, SignatureRecord, SigviewRecord } from "@/lib/pbtypes";
+import { SigviewRecord as Signature, SignatureRecord } from "@/lib/pbtypes";
 
 export const SystemView = () => {
   const { system, region } = useParams();
@@ -70,8 +70,21 @@ export const SystemView = () => {
   const deleteSignature = async (signatureId: string): Promise<void> => {
     try {
       await pb.collection('signature').delete(signatureId);
+      
+      // Invalidate queries to refresh the data
+      queryClient.invalidateQueries({ queryKey: ['signatures', system] });
+      
+      toast({
+        title: "Signature Deleted",
+        description: "The signature has been successfully deleted.",
+      });
     } catch (error) {
       console.error('Failed to delete signature:', error);
+      toast({
+        title: "Delete Failed",
+        description: error instanceof Error ? error.message : "Failed to delete signature.",
+        variant: "destructive"
+      });
       throw error;
     }
   };
@@ -179,6 +192,7 @@ export const SystemView = () => {
                 system={system}
                 cleanMode={cleanMode}
                 onCleanModeToggle={setCleanMode}
+                onDelete={deleteSignature}
               />
             </div>