i18n

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

@@ -16,6 +16,7 @@ import { useQueryClient } from "@tanstack/react-query";
 import { useSpotifyPlayback } from "@/lib/spotify/hooks";
 import { getGroupLabel } from "../utils/group-label";
 import styles from "./styles.module.css";
+import { Trans, useLingui } from "@lingui/react/macro";
 
 interface MatchCardProps {
   match: Match;
@@ -42,6 +43,7 @@ export const MatchCard: React.FC<MatchCardProps> = ({
   const queryClient = useQueryClient();
   const editSheet = useSheet();
   const { playTrack, pause } = useSpotifyPlayback();
+  const { t, i18n } = useLingui();
 
   const canTap = !!(onTap && match.home && match.away);
 
@@ -59,9 +61,9 @@ export const MatchCard: React.FC<MatchCardProps> = ({
         match.home_cups !== undefined &&
         match.away_cups !== undefined &&
         match.home_cups > match.away_cups,
-      groupLabel: !match.home && match.home_seed ? getGroupLabel(match.home_seed, groupConfig) : undefined,
+      groupLabel: !match.home && match.home_seed ? getGroupLabel(i18n, match.home_seed, groupConfig) : undefined,
     }),
-    [match, orders, groupConfig]
+    [match, orders, groupConfig, i18n]
   );
   const awaySlot = useMemo(
     () => ({
@@ -75,9 +77,9 @@ export const MatchCard: React.FC<MatchCardProps> = ({
         match.away_cups !== undefined &&
         match.home_cups !== undefined &&
         match.away_cups > match.home_cups,
-      groupLabel: !match.away && match.away_seed ? getGroupLabel(match.away_seed, groupConfig) : undefined,
+      groupLabel: !match.away && match.away_seed ? getGroupLabel(i18n, match.away_seed, groupConfig) : undefined,
     }),
-    [match, orders, groupConfig]
+    [match, orders, groupConfig, i18n]
   );
 
   const showToolbar = useMemo(
@@ -95,7 +97,7 @@ export const MatchCard: React.FC<MatchCardProps> = ({
 
   const start = useServerMutation({
     mutationFn: startMatch,
-    successMessage: "Match started!",
+    successMessage: t`Match started!`,
     onSuccess: () => {
       queryClient.invalidateQueries({
         queryKey: tournamentKeys.details(match.tournament.id),
@@ -112,12 +114,12 @@ export const MatchCard: React.FC<MatchCardProps> = ({
       editSheet.close();
       if (data?.downstreamReset) {
         toast.error(
-          "Downstream matches were reset because the correction changed who advances."
+          t`Downstream matches were reset because the correction changed who advances.`
         );
       }
       if (data?.groupEditAfterKnockout) {
         toast.error(
-          "Group result changed after the bracket was seeded — reseed the knockout stage if needed."
+          t`Group result changed after the bracket was seeded — reseed the knockout stage if needed.`
         );
       }
     },
@@ -186,7 +188,7 @@ export const MatchCard: React.FC<MatchCardProps> = ({
 
   const handleSpeakerClick = useCallback(async () => {
     if (!hasWalkoutData || !match.home?.name || !match.away?.name) {
-      await speak(`${match.home?.name || "Home"} vs. ${match.away?.name || "Away"}`);
+      await speak(t`${match.home?.name || t({ message: "Home", context: "match team" })} vs. ${match.away?.name || t({ message: "Away", context: "match team" })}`);
       return;
     }
 
@@ -196,14 +198,14 @@ export const MatchCard: React.FC<MatchCardProps> = ({
 
       await playTeamWalkout(homeTeam);
       await speak(homeTeam.name);
-      await speak("versus");
+      await speak(t`versus`);
       await playTeamWalkout(awayTeam);
       await speak(awayTeam.name);
-      await speak("have fun, good luck!");
+      await speak(t`have fun, good luck!`);
 
     } catch (error) {
       console.warn('Walkout sequence error:', error);
-      await speak(`${match.home.name} vs. ${match.away.name}`);
+      await speak(t`${match.home.name} vs. ${match.away.name}`);
     }
   }, [hasWalkoutData, match.home, match.away, speak, playTeamWalkout]);
 
@@ -221,10 +223,10 @@ export const MatchCard: React.FC<MatchCardProps> = ({
 
         await playTeamWalkout(homeTeam);
         await speak(homeTeam.name);
-        await speak("versus");
+        await speak(t`versus`);
         await playTeamWalkout(awayTeam);
         await speak(awayTeam.name);
-        await speak("have fun, good luck!");
+        await speak(t`have fun, good luck!`);
       } catch (error) {
         console.warn('Auto-walkout sequence error:', error);
       }
@@ -283,7 +285,7 @@ export const MatchCard: React.FC<MatchCardProps> = ({
               }
               aria-label={
                 canTap
-                  ? `Match ${match.order}: ${match.home!.name} vs ${match.away!.name}`
+                  ? t`Match ${match.order}: ${match.home!.name} vs ${match.away!.name}`
                   : undefined
               }
               style={{
@@ -315,7 +317,7 @@ export const MatchCard: React.FC<MatchCardProps> = ({
                   c="dimmed"
                   fw="bold"
                 >
-                  * If necessary
+                  <Trans>* If necessary</Trans>
                 </Text>
               )}
 
@@ -331,7 +333,7 @@ export const MatchCard: React.FC<MatchCardProps> = ({
                     e.stopPropagation();
                     handleSpeakerClick();
                   }}
-                  aria-label="Announce matchup"
+                  aria-label={t`Announce matchup`}
                 >
                   <SpeakerHighIcon size={12} />
                 </ActionIcon>
@@ -349,7 +351,7 @@ export const MatchCard: React.FC<MatchCardProps> = ({
                 h="100%"
                 radius="sm"
                 ml={-4}
-                aria-label="Start match"
+                aria-label={t`Start match`}
                 style={{
                   borderTopLeftRadius: 0,
                   borderBottomLeftRadius: 0,
@@ -371,7 +373,7 @@ export const MatchCard: React.FC<MatchCardProps> = ({
                 h="100%"
                 radius="sm"
                 ml={-4}
-                aria-label="Edit match score"
+                aria-label={t`Edit match score`}
                 style={{
                   borderTopLeftRadius: 0,
                   borderBottomLeftRadius: 0,
@@ -383,7 +385,7 @@ export const MatchCard: React.FC<MatchCardProps> = ({
           )}
         </Flex>
 
-        <Sheet title="Edit Match" {...editSheet.props}>
+        <Sheet title={t`Edit Match`} {...editSheet.props}>
           <MatchForm
             match={match}
             onSubmit={handleFormSubmit}