From f7e7236f59584769a157eedc43ff89ebf14b194c Mon Sep 17 00:00:00 2001
From: ppc <albie@ppc.moe>
Date: Sat, 10 Aug 2024 15:15:17 +0100
Subject: [PATCH] add server removal option

---
 aimenet-web/src/pages/card-in-screen.tsx | 40 +++++++++++++++++++++++-
 1 file changed, 39 insertions(+), 1 deletion(-)

diff --git a/aimenet-web/src/pages/card-in-screen.tsx b/aimenet-web/src/pages/card-in-screen.tsx
index ac467c3..2b1f68d 100644
--- a/aimenet-web/src/pages/card-in-screen.tsx
+++ b/aimenet-web/src/pages/card-in-screen.tsx
@@ -9,6 +9,17 @@ import {getServerInfo, serverCardIn} from "@/lib/aime-net";
 import {Button} from "@/components/ui/button";
 import {useToast} from "@/components/ui/use-toast";
 import {Alert, AlertDescription, AlertTitle} from "@/components/ui/alert";
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+    AlertDialogTrigger
+} from "@/components/ui/alert-dialog.tsx";
 
 import {AMHeader} from "@/components/am-header.tsx";
 import {AMFooter} from "@/components/am-footer.tsx";
@@ -17,6 +28,7 @@ import {LoadingIndicator} from "@/components/loading-indicator";
 import {CardCreationDialog} from "@/components/card-creation-form";
 import {NoCardsNotification} from "@/components/no-cards-notification";
 
+
 /* eslint-disable  @typescript-eslint/no-explicit-any */
 async function performCardInAction(card: AimeCard, server: AimeServer, setCardInStatus: (status: boolean) => void, toaster: any) {
     setCardInStatus(true);
@@ -171,7 +183,33 @@ function ServerCardInPage() {
                                   }}/>
                     </div>
                 )}
-                <AMFooter/>
+
+                <AMFooter className="flex flex-col sm:flex-row justify-center sm:justify-between gap-2 flex-wrap">
+                    {server?.id && (
+                        <AlertDialog>
+                            <AlertDialogTrigger>
+                                <p className="text-sm text-red-700">Delete {server.name}</p>
+                            </AlertDialogTrigger>
+                            <AlertDialogContent>
+                                <AlertDialogHeader>
+                                    <AlertDialogTitle>Confirm Deletion</AlertDialogTitle>
+                                    <AlertDialogDescription>
+                                        You'll need to re-enter the server information if you want to use it in the future...
+                                    </AlertDialogDescription>
+                                </AlertDialogHeader>
+                                <AlertDialogFooter>
+                                    <AlertDialogCancel>Cancel</AlertDialogCancel>
+                                    <AlertDialogAction onClick={async () => {
+                                        await db.servers.delete(server.id);
+                                        navigate('/');
+                                    }}>
+                                        Continue
+                                    </AlertDialogAction>
+                                </AlertDialogFooter>
+                            </AlertDialogContent>
+                        </AlertDialog>
+                    )}
+                </AMFooter>
             </main>
         </>
     );