add game name display support

amnet-native/app/ServerCardIn.tsx

@@ -132,6 +132,7 @@ export default function ServerCardIn({route, navigation}) {
         return () => abortController.abort();
     }, [server, selectedCard]);
 
+    const gameName = useMemo(() => getGameName(server.gameId), [server.gameId]);
     const disableCardIn = useMemo(() => cardInCompleted !== null || !connectionTestResult, [cardInCompleted, connectionTestResult]);
 
     if (connectionTestResult === null) {
@@ -169,7 +170,7 @@ export default function ServerCardIn({route, navigation}) {
             )}
 
             <View style={styles.section}>
-                <Title style={{fontWeight: "bold"}}>Selected Card</Title>
+                <Title style={styles.sectionTitle}>{gameName ? `Play ${gameName}` : "Selected Card"}</Title>
                 {selectedCard ? <>
                         <AimeCard actionDisabled
                                   card={selectedCard}
@@ -207,7 +208,7 @@ export default function ServerCardIn({route, navigation}) {
                     </Button>
 
                     {unselectedCards.length
-                        ? unselectedCards.map(card => (
+                        ? unselectedCards.map((card: AMCard) => (
                             <AimeCard card={card}
                                       key={card._id.toHexString()}
                                       actionIcon={<CircleDot color={theme.colors.tertiary} size={24}/>}

amnet-native/app/ServerManager.tsx

@@ -1,19 +1,22 @@
 import {Button, Paragraph, useTheme} from "react-native-paper";
-import {Globe, History, Plus, ServerOff} from "lucide-react-native";
+import {FlatList, NativeSyntheticEvent, Share, View} from "react-native";
 import React, {useCallback, useLayoutEffect, useMemo, useState} from "react";
-import {FlatList, NativeSyntheticEvent, Share, Text, View} from "react-native";
+import {Globe, History, Joystick, Plus, ServerOff} from "lucide-react-native";
 import ContextMenu, {ContextMenuOnPressNativeEvent} from "react-native-context-menu-view";
 import {EmptyStatePlaceholder} from "../components/EmptyStatePlaceholder";
 import {AMUICard, AMUICardDetail} from "../components/AMUICard";
 import TimeAgo from "../components/TimeAgo";
 
 import RealmContext from "../models/RealmContext";
+import {getGameName} from "../../amnet-shared";
 import {AMServer} from "../models/AMServer";
 
 const {useRealm, useQuery} = RealmContext;
 
 function ServerCard(props: { server: AMServer, navigation: any }) {
     const realm = useRealm();
+    const gameName = useMemo(() => getGameName(props.server.gameId), [props.server.gameId]);
+    
     const pageCallback = useCallback(() => {
         props.navigation.navigate('server', {
             serverId: props.server._id.toHexString()
@@ -51,10 +54,16 @@ function ServerCard(props: { server: AMServer, navigation: any }) {
             <AMUICard title={props.server.serverName} onPress={pageCallback}>
                 <AMUICardDetail>
                     <Globe size={18} color="gray"/>
-                    <Text style={{color: "gray", fontFamily: "JetBrainsMono_400Regular"}}>
+                    <Paragraph style={{color: "gray", fontFamily: "JetBrainsMono_400Regular"}}>
                         {props.server.serverAddress}
-                    </Text>
+                    </Paragraph>
                 </AMUICardDetail>
+                {gameName && (
+                    <AMUICardDetail>
+                        <Joystick size={18} color="gray"/>
+                        <Paragraph style={{color: "gray"}}>{gameName}</Paragraph>
+                    </AMUICardDetail>
+                )}
                 <AMUICardDetail>
                     <History size={18} color="gray"/>
                     {props.server.lastUsed