feat(players): add optimistic update for listWithSkillData

When creating a new player, optimistically update both the player list
and the listWithSkillData query (used by /practice page). This makes
new players appear immediately without requiring a page reload.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

apps/web/src/hooks/useUserPlayers.ts

@@ -141,14 +141,16 @@ export function useCreatePlayer() {
   return useMutation({
     mutationFn: createPlayer,
     onMutate: async (newPlayer) => {
-      // Cancel outgoing refetches
-      await queryClient.cancelQueries({ queryKey: playerKeys.lists() })
+      // Cancel outgoing refetches for all player queries
+      await queryClient.cancelQueries({ queryKey: playerKeys.all })
 
-      // Snapshot previous value
+      // Snapshot previous values
       const previousPlayers = queryClient.getQueryData<Player[]>(playerKeys.list())
+      const previousPlayersWithSkillData = queryClient.getQueryData<StudentWithSkillData[]>(
+        playerKeys.listWithSkillData()
+      )
 
-      // Optimistically update to new value
-      if (previousPlayers) {
+      // Create optimistic player
       const optimisticPlayer: Player = {
         id: `temp-${Date.now()}`, // Temporary ID
         ...newPlayer,
@@ -160,19 +162,43 @@ export function useCreatePlayer() {
         notes: null,
         familyCode: null, // Will be generated by server
       }
+
+      // Optimistically update player list
+      if (previousPlayers) {
         queryClient.setQueryData<Player[]>(playerKeys.list(), [
           ...previousPlayers,
           optimisticPlayer,
         ])
       }
 
-      return { previousPlayers }
+      // Optimistically update players with skill data (used by practice page)
+      if (previousPlayersWithSkillData) {
+        const optimisticPlayerWithSkillData: StudentWithSkillData = {
+          ...optimisticPlayer,
+          practicingSkills: [],
+          lastPracticedAt: null,
+          skillCategory: null,
+          intervention: null,
+        }
+        queryClient.setQueryData<StudentWithSkillData[]>(playerKeys.listWithSkillData(), [
+          ...previousPlayersWithSkillData,
+          optimisticPlayerWithSkillData,
+        ])
+      }
+
+      return { previousPlayers, previousPlayersWithSkillData }
     },
     onError: (_err, _newPlayer, context) => {
       // Rollback on error
       if (context?.previousPlayers) {
         queryClient.setQueryData(playerKeys.list(), context.previousPlayers)
       }
+      if (context?.previousPlayersWithSkillData) {
+        queryClient.setQueryData(
+          playerKeys.listWithSkillData(),
+          context.previousPlayersWithSkillData
+        )
+      }
     },
     onSettled: () => {
       // Always refetch after error or success