add game-default card indicator

amnet-native/app/ServerCardIn.tsx

@@ -1,15 +1,15 @@
 import {BSON} from "realm";
-import {useSafeAreaInsets} from "react-native-safe-area-context";
 import React, {useCallback, useEffect, useLayoutEffect, useMemo, useState} from "react";
 import {ActivityIndicator, Button, Paragraph, Title, useTheme} from "react-native-paper";
-import {Alert, RefreshControl, ScrollView, Share, StyleSheet, TouchableOpacity, View} from "react-native";
+import {Alert, RefreshControl, ScrollView, Share, StyleSheet, Text, TouchableOpacity, View} from "react-native";
 import {
     CircleCheck, CircleDot, CreditCard, Nfc, Plus, SmartphoneNfcIcon,
-    Share as ShareIcon, WifiOff, TvMinimalPlay
+    Share as ShareIcon, WifiOff, TvMinimalPlay, Star
 } from "lucide-react-native";
 
 import {EmptyStatePlaceholder} from "../components/EmptyStatePlaceholder";
 import {AMUIStatusAlert} from "../components/AMUIStatusAlert";
+import {AMUICardDetail} from "../components/AMUICard";
 import {AimeCard} from "../components/AimeCard";
 
 import RealmContext from "../models/RealmContext";
@@ -36,6 +36,7 @@ export default function ServerCardIn({route, navigation}) {
         query: q => q.sorted("lastUsed", true)
     });
 
+    const [defaultCard, setDefaultCard] = useState<AMCard>(null);
     const [selectedCard, setSelectedCard] = useState<AMCard>(null);
     const [cardInCompleted, setCardInCompleted] = useState<boolean>(null);
 
@@ -90,6 +91,10 @@ export default function ServerCardIn({route, navigation}) {
             return;
         }
 
+        if (defaultCard?.isValid() === false) {
+            setDefaultCard(null);
+        }
+
         // select a card if there's none selected
         let setCard = selectedCard?.isValid() !== true;
         if (setCard) {
@@ -108,6 +113,7 @@ export default function ServerCardIn({route, navigation}) {
                 if (setCard) {
                     // only reselect card if it was set by us previously
                     setSelectedCard(cards.find(x => x.lastUsedGameId === server.gameId) || cards[0]);
+                    setDefaultCard(selectedCard);
                 }
             } else {
                 setConnectionTestResult(false);
@@ -135,8 +141,12 @@ export default function ServerCardIn({route, navigation}) {
                 selectedCard.lastUsedGameId = server.gameId;
             });
 
+            // set default card if there's a game id provided by the server
+            if (server.gameId) {
+                setDefaultCard(selectedCard);
+            }
+
             setCardInCompleted(r);
-            setSelectedCard(selectedCard);
         }).catch(() => {
             setCardInCompleted(false);
         }).finally(() => {
@@ -174,7 +184,9 @@ export default function ServerCardIn({route, navigation}) {
                 {selectedCard ? <>
                         <AimeCard actionDisabled
                                   card={selectedCard}
-                                  actionIcon={<CircleCheck color="green" size={24}/>}/>
+                                  actionIcon={<CircleCheck color="green" size={24}/>}>
+                            {selectedCard === defaultCard && <DefaultCardDetail/>}
+                        </AimeCard>
                         <Button textColor="white"
                                 onPress={cardInCallback}
                                 disabled={disableCardIn}
@@ -212,7 +224,9 @@ export default function ServerCardIn({route, navigation}) {
                             <AimeCard card={card}
                                       key={card._id.toHexString()}
                                       actionIcon={<CircleDot color={theme.colors.tertiary} size={24}/>}
-                                      onPress={() => setSelectedCard(card)}/>))
+                                      onPress={() => setSelectedCard(card)}>
+                                {defaultCard === selectedCard && <DefaultCardDetail/>}
+                            </AimeCard>))
                         : <View style={styles.emptyPlaceholderView}>
                             <EmptyStatePlaceholder message="No additional cards"
                                                    icon={<SmartphoneNfcIcon color="gray"/>}/>
@@ -252,6 +266,20 @@ function StatusAlert(props: {
     return null;
 }
 
+function DefaultCardDetail() {
+    return (
+        <>
+            {/* spacer */}
+            <View></View>
+            <AMUICardDetail>
+                <Star size={18} color="goldenrod"/>
+                <Text style={{color: "goldenrod"}}>Previously used with this game</Text>
+            </AMUICardDetail>
+        </>
+
+    )
+}
+
 const styles = StyleSheet.create({
     section: {
         gap: 10

amnet-native/components/AimeCard.tsx

@@ -1,4 +1,4 @@
-import {useMemo} from "react";
+import {ReactNode, useMemo} from "react";
 import {Text} from "react-native";
 import {CreditCard, History} from "lucide-react-native";
 
@@ -8,6 +8,7 @@ import {AMUICard, AMUICardActionProps, AMUICardDetail} from "./AMUICard";
 
 export interface AimeCardProps extends AMUICardActionProps {
     card: AMCardData,
+    children?: ReactNode,
     showFullCardNumber?: boolean
 }
 
@@ -29,6 +30,7 @@ export function AimeCard(props: AimeCardProps) {
                     <TimeAgo style={{color: "gray"}} dateTo={props.card.lastUsed}/>
                 </AMUICardDetail>
             )}
+            {props.children}
         </AMUICard>
     );
 }