i18n

src/app/routes/_authed/admin/activities.tsx

@@ -4,6 +4,8 @@ import { ActivitiesTable, activityQueries } from "@/features/activities";
 import { PlayersActivityTable, playerQueries } from "@/features/players";
 import { Box, Divider, Group, Skeleton, Stack, Tabs } from "@mantine/core";
 import { Suspense, useState } from "react";
+import { Trans } from "@lingui/react/macro";
+import { msg } from "@lingui/core/macro";
 
 export const Route = createFileRoute("/_authed/admin/activities")({
   component: Stats,
@@ -16,7 +18,7 @@ export const Route = createFileRoute("/_authed/admin/activities")({
     withPadding: false,
     fullWidth: true,
     header: {
-      title: "Activities",
+      title: msg`Activities`,
       withBackButton: true,
     },
     refresh: [activityQueries.search().queryKey, playerQueries.activity().queryKey],
@@ -53,8 +55,8 @@ function Stats() {
   return (
     <Tabs value={activeTab} onChange={setActiveTab}>
       <Tabs.List mb='md'>
-        <Tabs.Tab value="server-functions">Server Functions</Tabs.Tab>
-        <Tabs.Tab value="player-activity">Player Activity</Tabs.Tab>
+        <Tabs.Tab value="server-functions"><Trans>Server Functions</Trans></Tabs.Tab>
+        <Tabs.Tab value="player-activity"><Trans>Player Activity</Trans></Tabs.Tab>
       </Tabs.List>
 
       <Tabs.Panel value="server-functions">

src/app/routes/_authed/admin/index.tsx

@@ -1,11 +1,12 @@
 import { createFileRoute } from "@tanstack/react-router";
 import { AdminPage } from "@/features/admin";
+import { msg } from "@lingui/core/macro";
 
 export const Route = createFileRoute("/_authed/admin/")({
   loader: () => ({
     header: {
       withBackButton: true,
-      title: "Admin",
+      title: msg`Admin`,
     },
     withPadding: false,
   }),

src/app/routes/_authed/admin/preview.tsx

@@ -2,13 +2,15 @@ import BracketPreview from "@/features/admin/components/preview";
 import { NumberInput } from "@mantine/core";
 import { createFileRoute } from "@tanstack/react-router";
 import { useState } from "react";
+import { useLingui } from "@lingui/react/macro";
+import { msg } from "@lingui/core/macro";
 
 export const Route = createFileRoute("/_authed/admin/preview")({
   component: RouteComponent,
   loader: () => ({
     header: {
       withBackButton: true,
-      title: "Bracket Preview",
+      title: msg`Bracket Preview`,
     },
     withPadding: false,
     fullWidth: true,
@@ -16,13 +18,14 @@ export const Route = createFileRoute("/_authed/admin/preview")({
 });
 
 function RouteComponent() {
+  const { t } = useLingui();
   const [n, setN] = useState(16);
   return (
     <>
       <NumberInput
         min={9}
         max={27}
-        label="Number of teams"
+        label={t`Number of teams`}
         value={n}
         onChange={(value) => setN(value as number)}
         w={150}

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,
   }),

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

@@ -4,6 +4,7 @@ import { prefetchServerQuery } from "@/lib/tanstack-query/utils/prefetch";
 import { Divider, Group, Skeleton, Stack } from "@mantine/core";
 import { createFileRoute } from "@tanstack/react-router";
 import { Suspense } from "react";
+import { msg } from "@lingui/core/macro";
 
 export const Route = createFileRoute("/_authed/admin/tournaments/")({
   beforeLoad: ({ context }) => {
@@ -13,7 +14,7 @@ export const Route = createFileRoute("/_authed/admin/tournaments/")({
   loader: () => ({
     header: {
       withBackButton: true,
-      title: "Manage Tournaments",
+      title: msg`Manage Tournaments`,
     },
     refresh: tournamentQueries.list().queryKey,
     withPadding: false,

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

@@ -14,6 +14,8 @@ import { Match } from "@/features/matches/types";
 import BracketView from "@/features/bracket/components/bracket-view";
 import { SpotifyControlsBar } from "@/features/spotify/components";
 import { useAuth } from "@/contexts/auth-context";
+import { Trans } from "@lingui/react/macro";
+import { msg } from "@lingui/core/macro";
 
 export const Route = createFileRoute("/_authed/admin/tournaments/run/$id")({
   beforeLoad: async ({ context, params }) => {
@@ -33,7 +35,8 @@ export const Route = createFileRoute("/_authed/admin/tournaments/run/$id")({
     showSpotifyPanel: true,
     header: {
       withBackButton: true,
-      title: `Run ${context.tournament.name}`,
+      title: msg`Run {name}`,
+      titleValues: { name: context.tournament.name },
     },
   }),
   component: RouteComponent,
@@ -160,7 +163,7 @@ function RouteComponent() {
             />
             <Divider />
             <div>
-              <Title order={3} ta="center" mb="md">Knockout Bracket</Title>
+              <Title order={3} ta="center" mb="md"><Trans>Knockout Bracket</Trans></Title>
               <BracketView bracket={bracket} showControls groupConfig={tournament.group_config} nextUpMatchId={nextUpMatchId} />
             </div>
           </Stack>