fixes, improvmeents

src/features/core/components/providers.tsx

@@ -1,6 +1,9 @@
 import { AuthProvider } from "@/contexts/auth-context"
 import { SpotifyProvider } from "@/contexts/spotify-context"
 import MantineProvider from "@/lib/mantine/mantine-provider"
+import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
+import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
+import { TanStackDevtools } from '@tanstack/react-devtools'
 import { Toaster } from "sonner"
 
 const Providers = ({ children }: { children: React.ReactNode }) => {
@@ -8,6 +11,22 @@ const Providers = ({ children }: { children: React.ReactNode }) => {
     <AuthProvider>
       <SpotifyProvider>
         <MantineProvider>
+          <TanStackDevtools
+            eventBusConfig={{
+              debug: false,
+              connectToServerBus: true,
+            }}
+            plugins={[
+              {
+                name: 'TanStack Query',
+                render: <ReactQueryDevtoolsPanel />,
+              },
+              {
+                name: 'TanStack Router',
+                render: <TanStackRouterDevtoolsPanel />,
+              }
+            ]}
+          />
           <Toaster position='top-center' />
           {children}
         </MantineProvider>

src/features/core/components/pullable.tsx

@@ -32,7 +32,10 @@ const Pullable: React.FC<PullableProps> = ({ children, scrollPosition, onScrollP
     if (refresh.length > 0) {
       // TODO: Remove this after testing - or does the delay help ux?
       await new Promise(resolve => setTimeout(resolve, 1000));
-      await queryClient.refetchQueries({ queryKey: refresh, exact: true});
+      refresh.forEach(async (queryKey) => {
+        const keyArray = Array.isArray(queryKey) ? queryKey : [queryKey];
+        await queryClient.refetchQueries({ queryKey: keyArray, exact: true });
+      });
     }
     setIsRefreshing(false);
   }, [refresh]);

src/features/players/components/player-stats-table.tsx

@@ -1,4 +1,4 @@
-import { useState, useMemo, useCallback, memo } from "react";
+import { useState, useMemo, useCallback, memo, use } from "react";
 import {
   Text,
   TextInput,
@@ -68,13 +68,15 @@ const PlayerListItem = memo(({ stat, onPlayerClick, mmr }: PlayerListItemProps)
                   {stat.player_name}
                 </Text>
                 <Text size="xs" c="dimmed" ta="right">
-                  {stat.matches} matches
+                  {stat.matches}
+                  <Text span fw={800}>M</Text>
                 </Text>
                 <Text size="xs" c="dimmed" ta="right">
-                  {stat.tournaments} tournaments
+                  {stat.tournaments}
+                  <Text span fw={800}>T</Text>
                 </Text>
               </Group>
-              <Group gap="md" ta="center">
+              <Group gap={8} ta="center">
                 <Stack gap={0}>
                   <Text size="xs" c="dimmed" fw={700}>
                     MMR
@@ -109,7 +111,15 @@ const PlayerListItem = memo(({ stat, onPlayerClick, mmr }: PlayerListItemProps)
                 </Stack>
                 <Stack gap={0}>
                   <Text size="xs" c="dimmed" fw={700}>
-                    AVG
+                    AWM
+                  </Text>
+                  <Text size="xs" c="dimmed">
+                    {stat.margin_of_victory?.toFixed(1) || 0}
+                  </Text>
+                </Stack>
+                <Stack gap={0}>
+                  <Text size="xs" c="dimmed" fw={700}>
+                    AC
                   </Text>
                   <Text size="xs" c="dimmed">
                     {stat.avg_cups_per_match.toFixed(1)}
@@ -301,6 +311,42 @@ const PlayerStatsTable = () => {
               </Popover.Target>
               <Popover.Dropdown>
                 <Box maw={280}>
+                  <Text size="sm" fw={500} mb="xs">
+                    Stat Abbreviations:
+                  </Text>
+                  <Text size="xs" mb={2}>
+                    • <strong>M:</strong> Matches
+                  </Text>
+                  <Text size="xs" mb={2}>
+                    • <strong>T:</strong> Tournaments
+                  </Text>
+                  <Text size="xs" mb={2}>
+                    • <strong>MMR:</strong> Matchmaking Rating
+                  </Text>
+                  <Text size="xs" mb={2}>
+                    • <strong>W:</strong> Wins
+                  </Text>
+                  <Text size="xs" mb={2}>
+                    • <strong>L:</strong> Losses
+                  </Text>
+                  <Text size="xs" mb={2}>
+                    • <strong>W%:</strong> Win Percentage
+                  </Text>
+                  <Text size="xs" mb={2}>
+                    • <strong>AWM:</strong> Average Win Margin
+                  </Text>
+                  <Text size="xs" mb={2}>
+                    • <strong>AC:</strong> Average Cups Per Match
+                  </Text>
+                  <Text size="xs" mb={2}>
+                    • <strong>CF:</strong> Cups For
+                  </Text>
+                  <Text size="xs" mb={2}>
+                    • <strong>CA:</strong> Cups Against
+                  </Text>
+
+                  <Divider my="sm" />
+
                   <Text size="sm" fw={500} mb="xs">
                     MMR Calculation:
                   </Text>