i18n

src/app/routes/_authed/admin/tournaments/$id/assign-partners.tsx

@@ -9,6 +9,8 @@ import TeamAssignmentPreview from "@/features/tournaments/components/team-assign
 import { WarningCircleIcon, ShuffleIcon, CheckCircleIcon } from "@phosphor-icons/react";
 import { PlayerInfo } from "@/features/players/types";
 import { useQueryClient } from "@tanstack/react-query";
+import { Trans, Plural } from "@lingui/react/macro";
+import { msg } from "@lingui/core/macro";
 
 export const Route = createFileRoute("/_authed/admin/tournaments/$id/assign-partners")({
   beforeLoad: async ({ context, params }) => {
@@ -23,7 +25,8 @@ export const Route = createFileRoute("/_authed/admin/tournaments/$id/assign-part
   loader: ({ context }) => ({
     header: {
       withBackButton: true,
-      title: `Manage ${context.tournament.name}`,
+      title: msg`Manage {name}`,
+      titleValues: { name: context.tournament.name },
     },
   }),
   component: RouteComponent,
@@ -120,19 +123,19 @@ function RouteComponent() {
             {freeAgents.length}
           </Text>
           <Text size="sm" c="dimmed">
-            {freeAgents.length === 1 ? "player enrolled" : "players enrolled"}
+            <Plural value={freeAgents.length} one="player enrolled" other="players enrolled" />
           </Text>
         </Group>
 
         {!hasEnoughPlayers && (
           <Alert color="yellow" icon={<WarningCircleIcon size={16} />}>
-            Need at least 2 players to create teams
+            <Trans>Need at least 2 players to create teams</Trans>
           </Alert>
         )}
 
         {hasOddPlayers && (
           <Alert color="red" icon={<WarningCircleIcon size={16} />}>
-            Cannot create teams with an odd number of players. Please have one player unenroll.
+            <Trans>Cannot create teams with an odd number of players. Please have one player unenroll.</Trans>
           </Alert>
         )}
 
@@ -142,7 +145,7 @@ function RouteComponent() {
             onClick={handleGenerate}
             loading={generateMutation.isPending}
           >
-            Generate Random Pairings
+            <Trans>Generate Random Pairings</Trans>
           </Button>
         )}
       </Stack>
@@ -151,7 +154,7 @@ function RouteComponent() {
         <Stack gap="md">
           <Group justify="space-between" align="center">
             <Text size="lg" fw={600}>
-              Partner Assignments
+              <Trans>Partner Assignments</Trans>
             </Text>
             <Group gap="sm">
               <Button
@@ -161,7 +164,7 @@ function RouteComponent() {
                 loading={generateMutation.isPending}
                 size="sm"
               >
-                Re-roll
+                <Trans>Re-roll</Trans>
               </Button>
               <Button
                 leftSection={<CheckCircleIcon size={18} />}
@@ -169,7 +172,7 @@ function RouteComponent() {
                 loading={confirmMutation.isPending}
                 size="sm"
               >
-                Confirm & Create Teams
+                <Trans>Confirm & Create Teams</Trans>
               </Button>
             </Group>
           </Group>

src/app/routes/_authed/admin/tournaments/$id/index.tsx

@@ -3,6 +3,7 @@ import { tournamentQueries } from "@/features/tournaments/queries";
 import ManageTournament from "@/features/tournaments/components/manage-tournament";
 import { ensureServerQueryData } from "@/lib/tanstack-query/utils/ensure";
 import { Divider, Group, Skeleton, Stack } from "@mantine/core";
+import { msg } from "@lingui/core/macro";
 
 export const Route = createFileRoute("/_authed/admin/tournaments/$id/")({
   beforeLoad: async ({ context, params }) => {
@@ -19,7 +20,8 @@ export const Route = createFileRoute("/_authed/admin/tournaments/$id/")({
   loader: ({ context }) => ({
     header: {
       withBackButton: true,
-      title: `Manage ${context.tournament.name}`,
+      title: msg`Manage {name}`,
+      titleValues: { name: context.tournament.name },
     },
     withPadding: false,
   }),

src/app/routes/_authed/admin/tournaments/$id/teams.tsx

@@ -3,6 +3,7 @@ import { tournamentQueries } from "@/features/tournaments/queries";
 import ManageTeams from "@/features/teams/components/manage-teams";
 import { ensureServerQueryData } from "@/lib/tanstack-query/utils/ensure";
 import { Box, Divider, Group, Skeleton, Stack } from "@mantine/core";
+import { msg } from "@lingui/core/macro";
 
 export const Route = createFileRoute("/_authed/admin/tournaments/$id/teams")({
   beforeLoad: async ({ context, params }) => {
@@ -19,7 +20,8 @@ export const Route = createFileRoute("/_authed/admin/tournaments/$id/teams")({
   loader: ({ context }) => ({
     header: {
       withBackButton: true,
-      title: `${context.tournament.name} Teams`,
+      title: msg`{name} Teams`,
+      titleValues: { name: context.tournament.name },
     },
     withPadding: false,
   }),