@bettoredge/calcutta 0.3.0 → 0.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bettoredge/calcutta",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Calcutta auction competition components for BettorEdge applications",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/components/CalcuttaAuction.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useRef, useCallback, useMemo } from 'react';
-import { StyleSheet, TouchableOpacity, ActivityIndicator, FlatList, ScrollView, Image, TextInput } from 'react-native';
+import { StyleSheet, TouchableOpacity, ActivityIndicator, FlatList, ScrollView, Image, TextInput, Platform } from 'react-native';
 import { View, Text, useTheme } from '@bettoredge/styles';
 import { Ionicons } from '@expo/vector-icons';
 import type { CalcuttaEscrowProps } from '@bettoredge/types';
@@ -380,8 +380,8 @@ const SweepstakesWaiting: React.FC<CalcuttaAuctionProps & { competition: any }>
         : '#10B981';
 
     return (
-        <View variant="transparent" style={styles.container}>
-            <ScrollView style={{ flex: 1 }} contentContainerStyle={{ gap: 16, paddingBottom: 40 }}>
+        <View variant="base" style={styles.container}>
+            <ScrollView style={{ flex: 1 }} contentContainerStyle={{ gap: 16, paddingBottom: Platform.OS === 'web' ? 300 : 40 }} keyboardShouldPersistTaps="handled">
                 {/* Hero with embedded title */}
                 <View style={{ position: 'relative' }}>
                     {competition.image?.url ? (
@@ -575,6 +575,11 @@ const SweepstakesWaiting: React.FC<CalcuttaAuctionProps & { competition: any }>
                             onChangeText={setSearchQuery}
                             autoCapitalize="none"
                             autoCorrect={false}
+                            onFocus={(e: any) => {
+                                if (Platform.OS === 'web' && e?.target?.scrollIntoView) {
+                                    setTimeout(() => e.target.scrollIntoView({ behavior: 'smooth', block: 'center' }), 300);
+                                }
+                            }}
                         />
                         {filteredItems.map((item) => {
                             const isMyItem = item.winning_player_id == player_id;

package/src/components/CalcuttaDetail.tsx

@@ -1,10 +1,11 @@
-import React, { useState, useMemo } from 'react';
-import { StyleSheet, TouchableOpacity, ActivityIndicator, ScrollView, Image, FlatList } from 'react-native';
+import React, { useState, useMemo, useCallback } from 'react';
+import { StyleSheet, TouchableOpacity, ActivityIndicator, ScrollView, Image, FlatList, TextInput, Platform } from 'react-native';
 import { View, Text, useTheme } from '@bettoredge/styles';
 import { Ionicons } from '@expo/vector-icons';
 import type { CalcuttaParticipantProps } from '@bettoredge/types';
 import { useCalcuttaCompetition } from '../hooks/useCalcuttaCompetition';
 import { useCalcuttaPlayers } from '../hooks/useCalcuttaPlayers';
+import { useCalcuttaItemImages } from '../hooks/useCalcuttaItemImages';
 import { formatCurrency, getStatusLabel, resolveItemImageUrl } from '../helpers/formatting';
 import { startSweepstakesCompetition } from '@bettoredge/api';
 
@@ -51,10 +52,26 @@ export const CalcuttaDetail: React.FC<CalcuttaDetailProps> = ({
 
     const participantIds = useMemo(() => participants.map(p => p.player_id), [participants]);
     const { players: enrichedPlayers } = useCalcuttaPlayers(participantIds);
+    const { images: itemImages } = useCalcuttaItemImages(items);
 
     const [joining, setJoining] = useState(false);
     const [leaving, setLeaving] = useState(false);
     const [startingComp, setStartingComp] = useState(false);
+    const [itemSearch, setItemSearch] = useState('');
+
+    const filteredItems = useMemo(() => {
+        if (competition?.auction_type !== 'sweepstakes' || !itemSearch.trim()) return items;
+        const q = itemSearch.toLowerCase().trim();
+        return items.filter(item => {
+            if (item.item_name.toLowerCase().includes(q)) return true;
+            if (item.winning_player_id) {
+                const owner = enrichedPlayers[item.winning_player_id];
+                const ownerName = (owner?.username || owner?.show_name || '').toLowerCase();
+                if (ownerName.includes(q)) return true;
+            }
+            return false;
+        });
+    }, [items, itemSearch, enrichedPlayers, competition?.auction_type]);
 
     if (loading && !competition) {
         return (
@@ -362,6 +379,63 @@ export const CalcuttaDetail: React.FC<CalcuttaDetailProps> = ({
 
             case 'items':
                 if (items.length === 0) return null;
+                if (isSweepstakes) {
+                    return (
+                        <View variant="transparent" style={{ paddingHorizontal: 16, paddingBottom: 8 }}>
+                            <TextInput
+                                style={{
+                                    height: 36,
+                                    borderRadius: 8,
+                                    borderWidth: 1,
+                                    borderColor: theme.colors.border.subtle,
+                                    backgroundColor: theme.colors.surface.input,
+                                    color: theme.colors.text.primary,
+                                    paddingHorizontal: 12,
+                                    fontSize: 14,
+                                    marginBottom: 8,
+                                }}
+                                placeholder="Search by team or owner..."
+                                placeholderTextColor={theme.colors.text.tertiary}
+                                value={itemSearch}
+                                onChangeText={setItemSearch}
+                                autoCapitalize="none"
+                                autoCorrect={false}
+                                onFocus={(e: any) => {
+                                    if (Platform.OS === 'web' && e?.target?.scrollIntoView) {
+                                        setTimeout(() => e.target.scrollIntoView({ behavior: 'smooth', block: 'center' }), 300);
+                                    }
+                                }}
+                            />
+                            {filteredItems.map(item => {
+                                const imgUrl = resolveItemImageUrl(item.item_image) || itemImages[item.item_id]?.url;
+                                const owner = item.winning_player_id ? enrichedPlayers[item.winning_player_id] : undefined;
+                                const ownerName = owner?.username || owner?.show_name;
+                                const isMe = item.winning_player_id == player_id;
+                                return (
+                                    <View key={item.calcutta_auction_item_id} variant="transparent" style={{ flexDirection: 'row', alignItems: 'center', paddingVertical: 8, borderBottomWidth: 1, borderColor: theme.colors.border.subtle }}>
+                                        {imgUrl ? (
+                                            <Image source={{ uri: imgUrl }} style={{ width: 28, height: 28, borderRadius: 6 }} resizeMode="cover" />
+                                        ) : (
+                                            <View variant="transparent" style={{ width: 28, height: 28, borderRadius: 6, backgroundColor: theme.colors.surface.elevated, alignItems: 'center', justifyContent: 'center' }}>
+                                                <Ionicons name="trophy-outline" size={14} color={theme.colors.text.tertiary} />
+                                            </View>
+                                        )}
+                                        <View variant="transparent" style={{ marginLeft: 8, flex: 1 }}>
+                                            <Text variant="body">{item.item_name}</Text>
+                                            {ownerName ? (
+                                                <Text variant="caption" color="tertiary">{isMe ? 'You' : ownerName}</Text>
+                                            ) : (
+                                                <Text variant="caption" color="tertiary">Available</Text>
+                                            )}
+                                        </View>
+                                        {item.seed != null && <Text variant="caption" color="tertiary">#{item.seed}</Text>}
+                                        {isMe && <Text variant="caption" bold style={{ color: theme.colors.primary.default, marginLeft: 8 }}>YOU</Text>}
+                                    </View>
+                                );
+                            })}
+                        </View>
+                    );
+                }
                 return (
                     <View variant="transparent" style={{ paddingHorizontal: 16 }}>
                         <ScrollView horizontal showsHorizontalScrollIndicator={false}>
@@ -433,20 +507,25 @@ export const CalcuttaDetail: React.FC<CalcuttaDetailProps> = ({
     };
 
     return (
-        <View variant="transparent" style={styles.container}>
-            {/* Header bar */}
-            <View variant="transparent" style={[styles.headerBar, { borderColor: theme.colors.border.subtle }]}>
-                <TouchableOpacity onPress={onClose} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
-                    <Ionicons name="arrow-back" size={24} color={theme.colors.text.primary} />
-                </TouchableOpacity>
-                <Text variant="body" bold style={{ flex: 1, marginLeft: 12 }} numberOfLines={1}>{competition.competition_name}</Text>
-            </View>
+        <View variant="base" style={styles.container}>
+            {/* Header bar — hidden for sweepstakes (title is in the hero) */}
+            {!isSweepstakes && (
+                <View variant="transparent" style={[styles.headerBar, { borderColor: theme.colors.border.subtle }]}>
+                    <TouchableOpacity onPress={onClose} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
+                        <Ionicons name="arrow-back" size={24} color={theme.colors.text.primary} />
+                    </TouchableOpacity>
+                    <Text variant="body" bold style={{ flex: 1, marginLeft: 12 }} numberOfLines={1}>{competition.competition_name}</Text>
+                </View>
+            )}
 
             <FlatList
                 data={sections}
                 keyExtractor={(item) => item.key}
                 renderItem={renderSection}
                 showsVerticalScrollIndicator={false}
+                style={{ backgroundColor: theme.colors.surface.base }}
+                contentContainerStyle={{ paddingBottom: Platform.OS === 'web' ? 300 : 40 }}
+                keyboardShouldPersistTaps="handled"
             />
         </View>
     );