add startup alert to web

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

@@ -1,8 +1,8 @@
 import {useLiveQuery} from "dexie-react-hooks";
 import {useEffect, useMemo, useState} from "react";
 import {useNavigate, useParams} from "react-router-dom";
-import {performCardIn, fetchServerInfo, getGameName} from "amnet-shared";
-import {CircleDot, CircleCheckBig, Home, Nfc, Wallet, WifiOff} from "lucide-react";
+import {performCardIn, fetchServerInfo, getGameName, AMServerInfo} from "amnet-shared";
+import {CircleDot, CircleCheckBig, Home, Nfc, Wallet, WifiOff, TvMinimalPlay} from "lucide-react";
 
 import {Button} from "@/components/ui/button";
 import {useToast} from "@/components/ui/use-toast";
@@ -60,8 +60,6 @@ async function performCardInAction(card: AimeCard, server: AimeServer, setCardIn
     }
 }
 
-/* eslint-enable  @typescript-eslint/no-explicit-any */
-
 function CardList(props: { cards: ReadonlyArray<AimeCard> | null, cardSelected: (card: AimeCard) => void }) {
     const navigate = useNavigate();
 
@@ -82,6 +80,39 @@ function CardList(props: { cards: ReadonlyArray<AimeCard> | null, cardSelected:
     </>);
 }
 
+function AlertPanel(props: { server: AMServerInfo | null, connectionError: boolean, onReloadRequested: () => void}) {
+    if (!props.server) {
+        return <LoadingIndicator/>
+    }
+    
+    if (props.connectionError) {
+        return <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">{props.server.serverAddress}</code>.
+                Please check the game is running and <span className="underline cursor-pointer"
+                                                           onClick={props.onReloadRequested}>try again</span>.
+            </AlertDescription>
+        </Alert>
+    }
+    
+    if (props.server.timeSinceLastPoll === null) {
+        return <Alert variant="blank" className="text-violet-600 border-violet-600">
+            <TvMinimalPlay className="h-4 w-4"/>
+            <AlertTitle>Server Startup</AlertTitle>
+            <AlertDescription>
+                Scanning a card below may not have any effect until the service has fully started up. <span
+                className="underline cursor-pointer"
+                onClick={props.onReloadRequested}>reload this page</span> to perform another check.
+            </AlertDescription>
+        </Alert>
+    }
+    
+    return <IncognitoStorageWarning/>
+}
+
 function ServerCardInPage() {
     const {toast} = useToast();
     const {serverId} = useParams<{ serverId: string }>();
@@ -153,20 +184,7 @@ function ServerCardInPage() {
                     </Button>
                 </AMHeader>
 
-                {!server && (<LoadingIndicator/>)}
-                {(server && !connectionError) && <IncognitoStorageWarning/>}
-                {(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.serverAddress}</code>.
-                            Please check the game is running and <span className="underline cursor-pointer"
-                                                                       onClick={() => setServerReloadCounter(serverReloadCounter + 1)}>try again</span>.
-                        </AlertDescription>
-                    </Alert>
-                )}
+                <AlertPanel server={server} connectionError={connectionError} onReloadRequested={() => setServerReloadCounter(serverReloadCounter + 1)}/>
 
                 {server && (
                     <div className="flex flex-col gap-4 w-full flex-grow">