add retry button to server connection error

aimenet-web/src/pages/card-in-screen.tsx

@@ -1,7 +1,7 @@
 import {useEffect, useState} from "react";
 import {useNavigate, useParams} from "react-router-dom";
 import {useLiveQuery} from "dexie-react-hooks";
-import {CircleDot, CircleCheckBig, Home, Nfc, Plus, ServerOff, Wallet} from "lucide-react";
+import {CircleDot, CircleCheckBig, Home, Nfc, Wallet, WifiOff} from "lucide-react";
 
 import {AimeCard, AimeServer, db} from "@/lib/database";
 import {getServerInfo, serverCardIn} from "@/lib/aime-net";
@@ -27,6 +27,7 @@ import {AimeCardEntry} from "@/components/aime-card";
 import {LoadingIndicator} from "@/components/loading-indicator";
 import {CardCreationDialog} from "@/components/card-creation-form";
 import {NoCardsNotification} from "@/components/no-cards-notification";
+import {IncognitoStorageWarning} from "@/components/incognito-warning.tsx";
 
 
 /* eslint-disable  @typescript-eslint/no-explicit-any */
@@ -37,12 +38,13 @@ async function performCardInAction(card: AimeCard, server: AimeServer, setCardIn
         await serverCardIn(server.address, card.id);
         await db.cards.update(card.id, {lastUsed: Date.now()});
 
-        setTimeout(() => setCardInStatus(false), 1000);
         toaster({
-            title: "Card In Success",
+            title: "Success",
             description: "Card in request has been sent successfully.",
             duration: 5000
         });
+
+        setTimeout(() => setCardInStatus(false), 1000);
     } catch {
         toaster({
             variant: "destructive",
@@ -63,12 +65,7 @@ function CardList(props: { cards: ReadonlyArray<AimeCard> | null, cardSelected:
     return (<>
         <h4 className="text-2xl font-bold">{props.cards?.length ? "Cards" : "Additional Cards"}</h4>
         <div className="flex gap-2">
-            <CardCreationDialog>
-                <Button className="bg-blue-500 flex-grow">
-                    <Plus className="mr-2 h-4 w-4"/> Add Card
-                </Button>
-            </CardCreationDialog>
-
+            <CardCreationDialog className="flex-grow"/>
             <Button onClick={() => navigate('/cards')} variant="outline" size="icon">
                 <Wallet className="h-4 w-4"/>
             </Button>
@@ -90,16 +87,17 @@ function ServerCardInPage() {
     const cards = useLiveQuery(() => db.cards.toArray());
 
     const [server, setServer] = useState<AimeServer | null>(null);
-    const [connectionError, setConnectionError] = useState(false);
     const [cardInStatus, setCardInStatus] = useState(false);
+    const [connectionError, setConnectionError] = useState(false);
     const [selectedCard, setSelectedCard] = useState<AimeCard | null>(null);
+    const [serverReloadCounter, setServerReloadCounter] = useState(0);
 
     // select newest card
     useEffect(() => {
         const sortedCards = cards?.sort(x => x.lastUsed);
         setSelectedCard(sortedCards ? sortedCards[sortedCards.length - 1] : null);
     }, [cards]);
-    
+
     useEffect(() => {
         const loadServer = async () => {
             if (!serverId) {
@@ -133,7 +131,7 @@ function ServerCardInPage() {
         };
 
         loadServer().catch(console.error);
-    }, [serverId]);
+    }, [serverId, serverReloadCounter]);
 
     return (
         <>
@@ -146,14 +144,17 @@ function ServerCardInPage() {
                 </AMHeader>
 
                 {!server && (<LoadingIndicator/>)}
-                {(server && connectionError) && (<Alert variant="destructive">
-                    <ServerOff className="h-4 w-4"/>
-                    <AlertTitle>Connection Issue</AlertTitle>
-                    <AlertDescription>
-                        There was an issue connecting to <code className="max-w-full text-wrap">{server.address}</code>.
-                        Please check the game is running and try again.
-                    </AlertDescription>
-                </Alert>)}
+                {(server && connectionError)
+                    ? <Alert variant="destructive">
+                        <WifiOff className="h-4 w-4"/>
+                        <AlertTitle>Connection Issue</AlertTitle>
+                        <AlertDescription>
+                            There was an issue connecting to <code
+                            className="max-w-full text-wrap">{server.address}</code>.
+                            Please check the game is running and <span className="underline cursor-pointer" onClick={() => setServerReloadCounter(serverReloadCounter + 1)}>try again</span>.
+                        </AlertDescription>
+                    </Alert>
+                    : <IncognitoStorageWarning/>}
 
                 {server && (
                     <div className="flex flex-col gap-4 w-full flex-grow">