Affichage de la liste des défis

client/app/(tabs)/_layout.tsx

@@ -25,7 +25,7 @@ export default function TabLayout() {
       <Tabs.Screen
         name="challenges"
         options={{
-          title: 'Défis',
+          title: 'Défi en cours',
           headerShown: false,
           tabBarIcon: ({ color }) => <FontAwesome6 name="coins" size={24} color={color} />,
         }}

client/app/(tabs)/challenges.tsx

@@ -7,15 +7,17 @@ import { useChallenges } from '@/hooks/useChallenges'
 import { useGame } from '@/hooks/useGame'
 import { FontAwesome6 } from '@expo/vector-icons'
 import { useQueryClient } from '@tanstack/react-query'
+import { useRouter } from 'expo-router'
 import { useEffect, useMemo, useState } from 'react'
 import { View } from 'react-native'
 import { ActivityIndicator, Appbar, Banner, FAB, MD3Colors, Snackbar, Surface, Text, TouchableRipple } from 'react-native-paper'
 
 function ChallengeScreenHeader() {
+  const router = useRouter()
   return <>
     <Appbar.Header>
-      <Appbar.Content title={"Défis"} />
-      <Appbar.Action icon='format-list-bulleted' />
+      <Appbar.Content title={"Défi en cours"} />
+      <Appbar.Action icon='format-list-bulleted' onPress={() => router.navigate('/challenges-list')} />
     </Appbar.Header>
     <PenaltyBanner />
   </>
@@ -85,7 +87,8 @@ function ChallengeScreenBody() {
       <ChallengeCard
           challenge={currentChallenge}
           onSuccess={() => { setLoading(true); endChallenge.mutate({ success: true }) }}
-          onFail={() => endChallenge.mutate({ success: false })} />}
+          onFail={() => endChallenge.mutate({ success: false })}
+          style={{ flex: 1, margin: 20 }} />}
     {!loading && !game.penaltyEnd && !currentChallenge && game.currentRunner && <>
       <Banner
           visible={!currentChallenge && game.currentRunner && !loading}