@bettoredge/calcutta 0.4.1 → 0.4.2

package/package.json

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

package/src/components/CalcuttaActionCard.tsx

@@ -15,6 +15,7 @@ export interface CalcuttaActionCardProps {
     activeBidCount?: number;
     itemsWon?: number;
     isAdmin?: boolean;
+    participantCount?: number;
     onJoin?: () => void;
     onDepositEscrow?: () => void;
     onManage?: () => void;
@@ -30,8 +31,12 @@ interface CardConfig {
     ctaLabel?: string;
     ctaColor?: string;
     ctaAction?: () => void;
+    secondaryCtaLabel?: string;
+    secondaryCtaColor?: string;
+    secondaryCtaAction?: () => void;
     showCountdown?: 'start' | 'end';
     loading?: boolean;
+    secondaryLoading?: boolean;
 }
 
 export const CalcuttaActionCard: React.FC<CalcuttaActionCardProps> = ({
@@ -42,6 +47,7 @@ export const CalcuttaActionCard: React.FC<CalcuttaActionCardProps> = ({
     activeBidCount = 0,
     itemsWon = 0,
     isAdmin,
+    participantCount = 0,
     onJoin,
     onDepositEscrow,
     onManage,
@@ -56,8 +62,7 @@ export const CalcuttaActionCard: React.FC<CalcuttaActionCardProps> = ({
     const getConfig = (): CardConfig => {
         // Admin: can start auction
         if (isAdmin && lifecycleState === 'scheduled' && onStartAuction) {
-            const participantCount = competition.participants?.length ?? 0;
-            return {
+            const config: CardConfig = {
                 icon: 'play-circle-outline',
                 title: 'Ready to start?',
                 description: `${participantCount} player${participantCount !== 1 ? 's' : ''} have joined. Start the ${isSweepstakes ? 'competition' : 'auction'} when ready.`,
@@ -67,6 +72,14 @@ export const CalcuttaActionCard: React.FC<CalcuttaActionCardProps> = ({
                 ctaAction: onStartAuction,
                 showCountdown: 'start',
             };
+            // Admin hasn't joined yet — show join as secondary action
+            if (!hasJoined && onJoin) {
+                config.secondaryCtaLabel = isFree ? 'Join Free' : `Join — ${formatCurrency(entryFee, competition.market_type)}`;
+                config.secondaryCtaColor = '#10B981';
+                config.secondaryCtaAction = onJoin;
+                config.secondaryLoading = joining;
+            }
+            return config;
         }
 
         // Not joined — prompt to join
@@ -228,6 +241,22 @@ export const CalcuttaActionCard: React.FC<CalcuttaActionCardProps> = ({
                     </View>
                 )}
 
+                {/* Secondary CTA Button */}
+                {config.secondaryCtaLabel && config.secondaryCtaAction && (
+                    <TouchableOpacity
+                        style={[styles.ctaButton, { backgroundColor: config.secondaryCtaColor || '#10B981' }]}
+                        onPress={config.secondaryCtaAction}
+                        activeOpacity={0.7}
+                        disabled={config.secondaryLoading}
+                    >
+                        {config.secondaryLoading ? (
+                            <ActivityIndicator size="small" color="#FFFFFF" />
+                        ) : (
+                            <Text variant="body" bold style={{ color: '#FFFFFF' }}>{config.secondaryCtaLabel}</Text>
+                        )}
+                    </TouchableOpacity>
+                )}
+
                 {/* CTA Button */}
                 {config.ctaLabel && config.ctaAction && (
                     <TouchableOpacity

package/src/components/CalcuttaAuction.tsx

@@ -1078,13 +1078,6 @@ export const CalcuttaAuction: React.FC<CalcuttaAuctionProps> = (props) => {
         );
     }
 
-    // Post-auction: show results view for all types
-    const isPostAuction = ['auction_closed', 'inprogress', 'closed'].includes(competition.status);
-
-    if (competition.auction_type === 'sweepstakes' || isPostAuction) {
-        return <SweepstakesWaiting {...props} competition={competition} />;
-    }
-
     if (competition.auction_type === 'sealed_bid') {
         return <SealedBidAuction {...props} />;
     }

package/src/components/CalcuttaDetail.tsx

@@ -1,5 +1,5 @@
-import React, { useState, useMemo, useCallback, useEffect } from 'react';
-import { StyleSheet, TouchableOpacity, ActivityIndicator, ScrollView, Image, FlatList, TextInput, Platform } from 'react-native';
+import React, { useState, useMemo, useCallback, useEffect, useRef } from 'react';
+import { StyleSheet, TouchableOpacity, ActivityIndicator, ScrollView, Image, FlatList, TextInput, Platform, useWindowDimensions } from 'react-native';
 import { View, Text, useTheme } from '@bettoredge/styles';
 import { Ionicons } from '@expo/vector-icons';
 import type { CalcuttaParticipantProps } from '@bettoredge/types';
@@ -15,6 +15,7 @@ import { CalcuttaCountdown } from './CalcuttaCountdown';
 import { AuctionInfoChips } from './AuctionInfoChips';
 import { EscrowWidget } from './EscrowWidget';
 import { AuctionCountdownOverlay } from './AuctionCountdownOverlay';
+import { CalcuttaWalkthrough } from './CalcuttaWalkthrough';
 import { useCalcuttaSocket } from '../hooks/useCalcuttaSocket';
 
 export interface CalcuttaDetailProps {
@@ -31,6 +32,8 @@ export interface CalcuttaDetailProps {
     onManage?: () => void;
     player_balance?: number;
     onDepositFunds?: (amount: number) => void;
+    initialShowWalkthrough?: boolean;
+    onWalkthroughDismiss?: () => void;
 }
 
 const getStatusConfig = (status: string) => {
@@ -54,12 +57,28 @@ export const CalcuttaDetail: React.FC<CalcuttaDetailProps> = ({
     onManage,
     player_balance,
     onDepositFunds,
+    initialShowWalkthrough,
+    onWalkthroughDismiss,
     access_token,
     device_id,
     player_username,
     player_profile_pic,
 }) => {
     const { theme } = useTheme();
+    const { width: windowWidth } = useWindowDimensions();
+    const [containerWidth, setContainerWidth] = useState(0);
+    const measuredWidth = containerWidth || windowWidth;
+    const isDesktop = Platform.OS === 'web' && measuredWidth >= 700;
+
+    // Walkthrough state
+    const [showWalkthrough, setShowWalkthrough] = useState(false);
+    const walkthroughTriggered = useRef(false);
+    useEffect(() => {
+        if (initialShowWalkthrough && !walkthroughTriggered.current) {
+            walkthroughTriggered.current = true;
+            setShowWalkthrough(true);
+        }
+    }, [initialShowWalkthrough]);
 
     // Countdown overlay state
     const [showCountdown, setShowCountdown] = useState(false);
@@ -102,6 +121,7 @@ export const CalcuttaDetail: React.FC<CalcuttaDetailProps> = ({
     const [leaving, setLeaving] = useState(false);
     const [startingComp, setStartingComp] = useState(false);
     const [itemSearch, setItemSearch] = useState('');
+    const [mobileListTab, setMobileListTab] = useState<'items' | 'players'>('items');
 
     const filteredItems = useMemo(() => {
         if (competition?.auction_type !== 'sweepstakes' || !itemSearch.trim()) return items;
@@ -164,13 +184,124 @@ export const CalcuttaDetail: React.FC<CalcuttaDetailProps> = ({
         ...(showEscrow ? [{ key: 'escrow' }] : []),
         { key: 'stats' },
         { key: 'payouts' },
-        { key: 'items-header' },
-        { key: 'items' },
-        { key: 'participants-header' },
-        { key: 'participants' },
+        { key: 'items-players-tabbed' },
         ...(canLeave ? [{ key: 'leave' }] : []),
     ];
 
+    const renderItemsList = () => {
+        if (items.length === 0) {
+            return (
+                <View variant="transparent" style={{ padding: 20, alignItems: 'center' }}>
+                    <Ionicons name="list-outline" size={32} color={theme.colors.text.tertiary} />
+                    <Text variant="caption" color="tertiary" style={{ marginTop: 8 }}>No items added yet.</Text>
+                </View>
+            );
+        }
+
+        const displayItems = isSweepstakes ? filteredItems : items;
+        return (
+            <View variant="transparent" style={{ paddingHorizontal: 16, paddingBottom: 8 }}>
+                {isSweepstakes && (
+                    <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, lineHeight: 19, 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);
+                            }
+                        }}
+                    />
+                )}
+                {displayItems.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: 36, height: 36, borderRadius: 8 }} resizeMode="cover" />
+                            ) : (
+                                <View variant="transparent" style={{ width: 36, height: 36, borderRadius: 8, backgroundColor: theme.colors.surface.elevated, alignItems: 'center', justifyContent: 'center' }}>
+                                    <Ionicons name="trophy-outline" size={16} color={theme.colors.text.tertiary} />
+                                </View>
+                            )}
+                            <View variant="transparent" style={{ marginLeft: 10, flex: 1 }}>
+                                <Text variant="body">{item.item_name}</Text>
+                                {isSweepstakes && ownerName ? (
+                                    <Text variant="caption" color="tertiary">{isMe ? 'You' : ownerName}</Text>
+                                ) : isSweepstakes ? (
+                                    <Text variant="caption" color="tertiary">Available</Text>
+                                ) : null}
+                            </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>
+        );
+    };
+
+    const renderParticipantsList = () => {
+        if (participants.length === 0) {
+            return (
+                <View variant="transparent" style={{ padding: 20, alignItems: 'center' }}>
+                    <Ionicons name="people-outline" size={32} color={theme.colors.text.tertiary} />
+                    <Text variant="caption" color="tertiary" style={{ marginTop: 8 }}>No players yet. Share the code to invite friends!</Text>
+                </View>
+            );
+        }
+        return (
+            <View variant="transparent" style={{ paddingHorizontal: 16, paddingBottom: 8 }}>
+                {participants.map((p, i) => {
+                    const enriched = enrichedPlayers[p.player_id];
+                    const username = enriched?.username || enriched?.show_name || `Player ${p.player_id.slice(0, 6)}`;
+                    const profilePic = enriched?.profile_pic;
+                    const isOnline = onlinePlayerIds.has(p.player_id);
+                    return (
+                        <View key={p.calcutta_participant_id} variant="transparent" style={[styles.participantRow, i < participants.length - 1 && { borderBottomWidth: 1, borderColor: theme.colors.border.subtle }]}>
+                            <View variant="transparent" style={{ position: 'relative' }}>
+                                {profilePic ? (
+                                    <Image source={{ uri: profilePic }} style={[styles.avatarCircle, { overflow: 'hidden' }]} />
+                                ) : (
+                                    <View variant="transparent" style={[styles.avatarCircle, { backgroundColor: theme.colors.primary.subtle }]}>
+                                        <Text variant="caption" bold style={{ color: theme.colors.primary.default }}>
+                                            {username.charAt(0).toUpperCase()}
+                                        </Text>
+                                    </View>
+                                )}
+                                {isOnline && (
+                                    <View variant="transparent" style={{ position: 'absolute', bottom: 0, right: 0, width: 10, height: 10, borderRadius: 5, backgroundColor: '#10B981', borderWidth: 2, borderColor: theme.colors.surface.base }} />
+                                )}
+                            </View>
+                            <View variant="transparent" style={{ flex: 1 }}>
+                                <Text variant="body">{username}</Text>
+                                <Text variant="caption" color="tertiary">
+                                    {p.items_owned > 0 ? `${p.items_owned} items \u00B7 ${formatCurrency(p.total_spent, competition.market_type)} spent` : 'Joined'}
+                                </Text>
+                            </View>
+                            {p.player_id == player_id && (
+                                <View variant="transparent" style={[styles.youBadge, { backgroundColor: theme.colors.primary.subtle }]}>
+                                    <Text variant="caption" bold style={{ color: theme.colors.primary.default, fontSize: 10, lineHeight: 13 }}>YOU</Text>
+                                </View>
+                            )}
+                        </View>
+                    );
+                })}
+            </View>
+        );
+    };
+
     const renderSection = ({ item }: { item: { key: string } }) => {
         switch (item.key) {
             case 'hero':
@@ -194,6 +325,14 @@ export const CalcuttaDetail: React.FC<CalcuttaDetailProps> = ({
                                 {isSweepstakes ? 'Sweepstakes' : competition.auction_type === 'live' ? 'Live Auction' : 'Sealed Bid'}
                             </Text>
                             <View variant="transparent" style={{ flex: 1 }} />
+                            <TouchableOpacity
+                                onPress={() => setShowWalkthrough(true)}
+                                style={{ marginRight: 8, padding: 4 }}
+                                activeOpacity={0.7}
+                                hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+                            >
+                                <Ionicons name="help-circle-outline" size={20} color={theme.colors.text.tertiary} />
+                            </TouchableOpacity>
                             {isAdmin && onManage && (
                                 <TouchableOpacity
                                     onPress={onManage}
@@ -275,6 +414,7 @@ export const CalcuttaDetail: React.FC<CalcuttaDetailProps> = ({
                             hasJoined={hasJoined}
                             escrowBalance={Number(escrow?.escrow_balance ?? 0)}
                             isAdmin={isAdmin}
+                            participantCount={participants.length}
                             onJoin={onJoin ? async () => {
                                 setJoining(true);
                                 try { await onJoin(); await refresh(); fetchEscrow(); } catch {}
@@ -406,148 +546,43 @@ export const CalcuttaDetail: React.FC<CalcuttaDetailProps> = ({
                     </View>
                 );
 
-            case 'items-header':
-                if (items.length === 0) return null;
-                return (
-                    <View variant="transparent" style={[styles.section, { borderColor: theme.colors.border.subtle, paddingBottom: 0 }]}>
-                        <Text variant="body" bold style={styles.sectionTitle}>{isSweepstakes ? 'Teams' : 'Auction Items'} ({items.length})</Text>
-                    </View>
-                );
-
             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,
-                                    lineHeight: 19,
-                                    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}>
-                            {items.map(item => (
-                                <View key={item.calcutta_auction_item_id} variant="transparent" style={[styles.itemChip, { backgroundColor: theme.colors.surface.elevated, borderColor: theme.colors.border.subtle }]}>
-                                    <Text variant="caption" bold numberOfLines={1}>{item.item_name}</Text>
-                                    {item.seed != null && <Text variant="caption" color="tertiary" style={{ fontSize: 10, lineHeight: 13 }}>#{item.seed}</Text>}
-                                </View>
-                            ))}
-                        </ScrollView>
-                    </View>
-                );
-
-            case 'participants-header':
-                return (
-                    <View variant="transparent" style={[styles.section, { borderColor: theme.colors.border.subtle, paddingBottom: 0 }]}>
-                        <View variant="transparent" style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 10 }}>
-                            <Text variant="body" bold>Players ({participants.length})</Text>
-                            {onlinePlayers.length > 0 && (
-                                <View variant="transparent" style={{ flexDirection: 'row', alignItems: 'center', marginLeft: 10, backgroundColor: '#10B98115', paddingHorizontal: 8, paddingVertical: 3, borderRadius: 10 }}>
-                                    <View variant="transparent" style={{ width: 6, height: 6, borderRadius: 3, backgroundColor: '#10B981', marginRight: 4 }} />
-                                    <Text variant="caption" bold style={{ color: '#10B981' }}>{onlinePlayers.length} online</Text>
-                                </View>
-                            )}
-                        </View>
-                    </View>
-                );
+                return renderItemsList();
 
             case 'participants':
-                if (participants.length === 0) {
-                    return (
-                        <View variant="transparent" style={{ padding: 20, alignItems: 'center' }}>
-                            <Ionicons name="people-outline" size={32} color={theme.colors.text.tertiary} />
-                            <Text variant="caption" color="tertiary" style={{ marginTop: 8 }}>No players yet. Share the code to invite friends!</Text>
-                        </View>
-                    );
-                }
+                return renderParticipantsList();
+
+            case 'items-players-tabbed':
                 return (
-                    <View variant="transparent" style={{ paddingHorizontal: 16, paddingBottom: 40 }}>
-                        {participants.map((p, i) => {
-                            const enriched = enrichedPlayers[p.player_id];
-                            const username = enriched?.username || enriched?.show_name || `Player ${p.player_id.slice(0, 6)}`;
-                            const profilePic = enriched?.profile_pic;
-                            const isOnline = onlinePlayerIds.has(p.player_id);
-                            return (
-                                <View key={p.calcutta_participant_id} variant="transparent" style={[styles.participantRow, i < participants.length - 1 && { borderBottomWidth: 1, borderColor: theme.colors.border.subtle }]}>
-                                    <View variant="transparent" style={{ position: 'relative' }}>
-                                        {profilePic ? (
-                                            <Image source={{ uri: profilePic }} style={[styles.avatarCircle, { overflow: 'hidden' }]} />
-                                        ) : (
-                                            <View variant="transparent" style={[styles.avatarCircle, { backgroundColor: theme.colors.primary.subtle }]}>
-                                                <Text variant="caption" bold style={{ color: theme.colors.primary.default }}>
-                                                    {username.charAt(0).toUpperCase()}
-                                                </Text>
-                                            </View>
-                                        )}
-                                        {isOnline && (
-                                            <View variant="transparent" style={{ position: 'absolute', bottom: 0, right: 0, width: 10, height: 10, borderRadius: 5, backgroundColor: '#10B981', borderWidth: 2, borderColor: theme.colors.surface.base }} />
-                                        )}
-                                    </View>
-                                    <View variant="transparent" style={{ flex: 1 }}>
-                                        <Text variant="body">{username}</Text>
-                                        <Text variant="caption" color="tertiary">
-                                            {p.items_owned > 0 ? `${p.items_owned} items \u00B7 ${formatCurrency(p.total_spent, competition.market_type)} spent` : 'Joined'}
-                                        </Text>
+                    <View variant="transparent" style={[styles.section, { borderColor: theme.colors.border.subtle }]}>
+                        {/* Tab toggle */}
+                        <View variant="transparent" style={[styles.listTabBar, { borderColor: theme.colors.border.subtle }]}>
+                            <TouchableOpacity
+                                style={[styles.listTab, mobileListTab === 'items' && { borderBottomWidth: 2, borderBottomColor: theme.colors.primary.default }]}
+                                onPress={() => setMobileListTab('items')}
+                            >
+                                <Ionicons name="list-outline" size={16} color={mobileListTab === 'items' ? theme.colors.primary.default : theme.colors.text.tertiary} style={{ marginRight: 6 }} />
+                                <Text variant="body" bold style={{ color: mobileListTab === 'items' ? theme.colors.primary.default : theme.colors.text.tertiary }}>
+                                    {isSweepstakes ? 'Teams' : 'Items'} ({items.length})
+                                </Text>
+                            </TouchableOpacity>
+                            <TouchableOpacity
+                                style={[styles.listTab, mobileListTab === 'players' && { borderBottomWidth: 2, borderBottomColor: theme.colors.primary.default }]}
+                                onPress={() => setMobileListTab('players')}
+                            >
+                                <Ionicons name="people-outline" size={16} color={mobileListTab === 'players' ? theme.colors.primary.default : theme.colors.text.tertiary} style={{ marginRight: 6 }} />
+                                <Text variant="body" bold style={{ color: mobileListTab === 'players' ? theme.colors.primary.default : theme.colors.text.tertiary }}>
+                                    Players ({participants.length})
+                                </Text>
+                                {onlinePlayers.length > 0 && (
+                                    <View variant="transparent" style={{ flexDirection: 'row', alignItems: 'center', marginLeft: 8, backgroundColor: '#10B98115', paddingHorizontal: 6, paddingVertical: 2, borderRadius: 8 }}>
+                                        <View variant="transparent" style={{ width: 5, height: 5, borderRadius: 2.5, backgroundColor: '#10B981', marginRight: 3 }} />
+                                        <Text variant="caption" bold style={{ color: '#10B981', fontSize: 10, lineHeight: 13 }}>{onlinePlayers.length}</Text>
                                     </View>
-                                    {p.player_id == player_id && (
-                                        <View variant="transparent" style={[styles.youBadge, { backgroundColor: theme.colors.primary.subtle }]}>
-                                            <Text variant="caption" bold style={{ color: theme.colors.primary.default, fontSize: 10, lineHeight: 13 }}>YOU</Text>
-                                        </View>
-                                    )}
-                                </View>
-                            );
-                        })}
+                                )}
+                            </TouchableOpacity>
+                        </View>
+                        {mobileListTab === 'items' ? renderItemsList() : renderParticipantsList()}
                     </View>
                 );
 
@@ -556,32 +591,64 @@ export const CalcuttaDetail: React.FC<CalcuttaDetailProps> = ({
         }
     };
 
-    const socketColor = socketState === 'authenticated' ? '#10B981'
-        : socketState === 'connected' ? '#F59E0B'
-        : socketState === 'connecting' ? '#3B82F6'
-        : '#EF4444';
-
     return (
-        <View variant="base" style={styles.container}>
-            {/* Socket debug bar */}
-            <View variant="transparent" style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', paddingVertical: 6, backgroundColor: socketColor + '15', borderBottomWidth: 1, borderColor: socketColor + '30' }}>
-                <View variant="transparent" style={{ width: 8, height: 8, borderRadius: 4, backgroundColor: socketColor, marginRight: 6 }} />
-                <Text variant="caption" style={{ color: socketColor }}>
-                    Socket: {socketState} {onlinePlayers.length > 0 ? `· ${onlinePlayers.length} in room` : ''}
-                </Text>
-                {!access_token && <Text variant="caption" style={{ color: '#EF4444', marginLeft: 8 }}>No auth token</Text>}
-            </View>
+        <View variant="transparent" style={[styles.container, { backgroundColor: theme.colors.surface.base }]} onLayout={e => setContainerWidth(e.nativeEvent.layout.width)}>
+            {isDesktop ? (
+                <ScrollView style={{ flex: 1, backgroundColor: theme.colors.surface.base }} contentContainerStyle={{ padding: 12, paddingBottom: 40, backgroundColor: theme.colors.surface.base }} keyboardShouldPersistTaps="handled">
+                    {/* Row 1: Hero + Info/Action left, Items right */}
+                    <View variant="transparent" style={{ flexDirection: 'row', gap: 12 }}>
+                        <View variant="transparent" style={{ flex: 3 }}>
+                            {renderSection({ item: { key: 'hero' } })}
+                            {renderSection({ item: { key: 'info' } })}
+                            {renderSection({ item: { key: 'action-card' } })}
+                            {showEscrow && renderSection({ item: { key: 'escrow' } })}
+                        </View>
+                        <View variant="transparent" style={[styles.desktopPanel, { flex: 2, backgroundColor: theme.colors.surface.elevated, borderColor: theme.colors.border.subtle }]}>
+                            <Text variant="caption" bold color="tertiary" style={styles.desktopPanelTitle}>
+                                {isSweepstakes ? 'Teams' : 'Auction Items'} ({items.length})
+                            </Text>
+                            <ScrollView nestedScrollEnabled showsVerticalScrollIndicator={false}>
+                                {renderSection({ item: { key: 'items' } })}
+                            </ScrollView>
+                        </View>
+                    </View>
 
-            <FlatList
-                data={sections}
-                keyExtractor={(item) => item.key}
-                renderItem={renderSection}
-                extraData={`${escrowExpanded}-${onlinePlayers.length}`}
-                showsVerticalScrollIndicator={false}
-                style={{ backgroundColor: theme.colors.surface.base }}
-                contentContainerStyle={{ paddingBottom: Platform.OS === 'web' ? 300 : 40 }}
-                keyboardShouldPersistTaps="handled"
-            />
+                    {/* Row 2: Stats + Payouts + Participants */}
+                    <View variant="transparent" style={{ flexDirection: 'row', gap: 12, marginTop: 12 }}>
+                        <View variant="transparent" style={{ flex: 1 }}>
+                            {renderSection({ item: { key: 'stats' } })}
+                        </View>
+                    </View>
+
+                    <View variant="transparent" style={{ flexDirection: 'row', gap: 12, marginTop: 12 }}>
+                        <View variant="transparent" style={[styles.desktopPanel, { flex: 1, backgroundColor: theme.colors.surface.elevated, borderColor: theme.colors.border.subtle }]}>
+                            <Text variant="caption" bold color="tertiary" style={styles.desktopPanelTitle}>Payouts</Text>
+                            {renderSection({ item: { key: 'payouts' } })}
+                        </View>
+                        <View variant="transparent" style={[styles.desktopPanel, { flex: 1, backgroundColor: theme.colors.surface.elevated, borderColor: theme.colors.border.subtle }]}>
+                            <Text variant="caption" bold color="tertiary" style={styles.desktopPanelTitle}>
+                                Players ({participants.length})
+                            </Text>
+                            <ScrollView nestedScrollEnabled showsVerticalScrollIndicator={false} style={{ maxHeight: 300 }}>
+                                {renderSection({ item: { key: 'participants' } })}
+                            </ScrollView>
+                        </View>
+                    </View>
+
+                    {canLeave && renderSection({ item: { key: 'leave' } })}
+                </ScrollView>
+            ) : (
+                <FlatList
+                    data={sections}
+                    keyExtractor={(item) => item.key}
+                    renderItem={renderSection}
+                    extraData={`${escrowExpanded}-${onlinePlayers.length}`}
+                    showsVerticalScrollIndicator={false}
+                    style={{ backgroundColor: theme.colors.surface.base }}
+                    contentContainerStyle={{ paddingBottom: Platform.OS === 'web' ? 300 : 40 }}
+                    keyboardShouldPersistTaps="handled"
+                />
+            )}
 
             {/* Auction starting countdown overlay */}
             <AuctionCountdownOverlay
@@ -594,6 +661,15 @@ export const CalcuttaDetail: React.FC<CalcuttaDetailProps> = ({
                     refresh();
                 }}
             />
+
+            {/* Walkthrough */}
+            {competition && (
+                <CalcuttaWalkthrough
+                    visible={showWalkthrough}
+                    onClose={() => { setShowWalkthrough(false); onWalkthroughDismiss?.(); }}
+                    auction_type={competition.auction_type as any}
+                />
+            )}
         </View>
     );
 };
@@ -617,10 +693,13 @@ const styles = StyleSheet.create({
     section: { padding: 16, borderTopWidth: 1 },
     sectionTitle: { marginBottom: 10 },
     payoutRow: { flexDirection: 'row', alignItems: 'center', paddingVertical: 10 },
-    itemChip: { paddingHorizontal: 12, paddingVertical: 8, borderRadius: 8, borderWidth: 1, marginRight: 8, minWidth: 80, alignItems: 'center' },
     participantRow: { flexDirection: 'row', alignItems: 'center', paddingVertical: 10 },
     avatarCircle: { width: 36, height: 36, borderRadius: 18, alignItems: 'center', justifyContent: 'center', marginRight: 10 },
     youBadge: { paddingHorizontal: 8, paddingVertical: 3, borderRadius: 8 },
     assignedItemCard: { flexDirection: 'row', alignItems: 'center', padding: 12, borderRadius: 10, borderWidth: 1 },
     assignedItemImage: { width: 44, height: 44, borderRadius: 8 },
+    listTabBar: { flexDirection: 'row', borderBottomWidth: 1, marginBottom: 8 },
+    listTab: { flex: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', paddingVertical: 10 },
+    desktopPanel: { borderRadius: 12, borderWidth: 1, padding: 14 },
+    desktopPanelTitle: { textTransform: 'uppercase', letterSpacing: 1, fontSize: 10, lineHeight: 13, marginBottom: 8 },
 });