better bracket, player stats in pb

src/features/bracket/components/match-slot.tsx

@@ -1,5 +1,6 @@
 import { Flex, Text } from "@mantine/core";
 import React from "react";
+import { CrownIcon } from "@phosphor-icons/react";
 import { SeedBadge } from "./seed-badge";
 import { TeamInfo } from "@/features/teams/types";
 
@@ -9,6 +10,7 @@ interface MatchSlotProps {
   team?: TeamInfo;
   seed?: number;
   cups?: number;
+  isWinner?: boolean;
 }
 
 export const MatchSlot: React.FC<MatchSlotProps> = ({
@@ -16,25 +18,49 @@ export const MatchSlot: React.FC<MatchSlotProps> = ({
   from_loser,
   team,
   seed,
-  cups
+  cups,
+  isWinner
 }) => (
   <Flex align="stretch">
     {(seed && seed > 0) ? <SeedBadge seed={seed} /> : undefined}
-    <Flex p="4px 8px" w='100%'>
-      {team ? (
-        <Text size="xs">{team.name}</Text>
-      ) : from ? (
-        <Text c="dimmed" size="xs">
-          {from_loser ? "Loser" : "Winner"} of Match {from}
-        </Text>
-      ) : (
-        <Text c="dimmed" size="xs">
-          TBD
-        </Text>
-      )}
+    <Flex p="4px 8px" w='100%' align="center">
+      <Flex align="center" gap={4} flex={1}>
+        {team ? (
+          <>
+            <Text 
+              size={team.name.length > 12 ? (team.name.length > 18 ? '10px' : '11px') : 'xs'}
+              truncate
+              style={{ minWidth: 0, flex: 1 }}
+            >
+              {team.name}
+            </Text>
+            {isWinner && (
+              <CrownIcon
+                size={14} 
+                weight="fill"
+                style={{ 
+                  color: 'gold',
+                  marginLeft: '2px',
+                  marginTop: '-1px',
+                  filter: 'drop-shadow(0 1px 1px rgba(0,0,0,0.3))',
+                  flexShrink: 0
+                }} 
+              />
+            )}
+          </>
+        ) : from ? (
+          <Text c="dimmed" size="xs" truncate style={{ minWidth: 0, flex: 1 }}>
+            {from_loser ? "Loser" : "Winner"} of Match {from}
+          </Text>
+        ) : (
+          <Text c="dimmed" size="xs" truncate style={{ minWidth: 0, flex: 1 }}>
+            TBD
+          </Text>
+        )}
+      </Flex>
       {
         cups !== undefined ? (
-          <Text ta='center' w={15} fw="800" ml='auto' size="xs">{cups}</Text>
+          <Text ta='center' w={15} fw="800" ml={4} size="xs">{cups}</Text>
         ) : undefined
       }
     </Flex>