reverse card selection

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

@@ -92,10 +92,14 @@ function ServerCardInPage() {
     const [server, setServer] = useState<AimeServer | null>(null);
     const [connectionError, setConnectionError] = useState(false);
     const [cardInStatus, setCardInStatus] = useState(false);
-    const [selectedCard, setSelectedCard] = useState<AimeCard | undefined | null>(null);
+    const [selectedCard, setSelectedCard] = useState<AimeCard | null>(null);
 
     // select newest card
-    useEffect(() => setSelectedCard(cards?.sort(x => x.lastUsed)[0]), [cards]);
+    useEffect(() => {
+        const sortedCards = cards?.sort(x => x.lastUsed);
+        setSelectedCard(sortedCards ? sortedCards[sortedCards.length - 1] : null);
+    }, [cards]);
+    
     useEffect(() => {
         const loadServer = async () => {
             if (!serverId) {
@@ -192,7 +196,8 @@ function ServerCardInPage() {
                                 <AlertDialogHeader>
                                     <AlertDialogTitle>Confirm Deletion</AlertDialogTitle>
                                     <AlertDialogDescription>
-                                        You'll need to re-enter the server information if you want to use it in the future...
+                                        You'll need to re-enter the server information if you want to use it in the
+                                        future...
                                     </AlertDialogDescription>
                                 </AlertDialogHeader>
                                 <AlertDialogFooter>