i18n

src/app/routes/_authed/admin.tsx

@@ -1,4 +1,6 @@
 import { Outlet, redirect, createFileRoute } from "@tanstack/react-router";
+import { msg } from "@lingui/core/macro";
+import type { HeaderConfig } from "@/features/core/types/header-config";
 
 export const Route = createFileRoute("/_authed/admin")({
   component: Outlet,
@@ -7,12 +9,12 @@ export const Route = createFileRoute("/_authed/admin")({
       throw redirect({ to: "/" });
     }
 
-    return {
-      header: {
-        ...context.header,
-        title: "Admin",
-        withBackButton: true,
-      },
+    const header: HeaderConfig = {
+      ...context.header,
+      title: msg`Admin`,
+      withBackButton: true,
     };
+
+    return { header };
   },
 });

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>

src/app/routes/_authed/badges.tsx

@@ -5,6 +5,7 @@ import PlayerStatsTableSkeleton from '@/features/players/components/player-stats
 import { prefetchServerQuery } from '@/lib/tanstack-query/utils/prefetch';
 import { createFileRoute } from '@tanstack/react-router';
 import { Suspense } from 'react';
+import { msg } from '@lingui/core/macro';
 
 export const Route = createFileRoute('/_authed/badges')({
   component: Badges,
@@ -16,7 +17,7 @@ export const Route = createFileRoute('/_authed/badges')({
     withPadding: false,
     fullWidth: true,
     header: {
-      title: 'All Badges',
+      title: msg`All Badges`,
       withBackButton: true,
     },
     refresh: [badgeQueries.allBadges().queryKey],

src/app/routes/_authed/settings.tsx

@@ -2,14 +2,17 @@ import { createFileRoute } from "@tanstack/react-router";
 import { Box, Title, Stack } from "@mantine/core";
 import { ColorSchemePicker } from "@/features/settings/components/color-scheme-picker";
 import AccentColorPicker from "@/features/settings/components/accent-color-picker";
+import LocalePicker from "@/features/settings/components/locale-picker";
 import { NotificationsSection } from "@/features/settings/components/notifications-section";
 import { SignOutIcon } from "@phosphor-icons/react";
 import ListLink from "@/components/list-link";
+import { Trans, useLingui } from "@lingui/react/macro";
+import { msg } from "@lingui/core/macro";
 
 export const Route = createFileRoute("/_authed/settings")({
   loader: () => ({
     header: {
-      title: "Settings",
+      title: msg`Settings`,
       withBackButton: true,
     },
     withPadding: false,
@@ -18,6 +21,7 @@ export const Route = createFileRoute("/_authed/settings")({
 });
 
 function RouteComponent() {
+  const { t } = useLingui();
   return (
     <>
       <Box
@@ -27,14 +31,15 @@ function RouteComponent() {
           borderBottom: "1px solid var(--mantine-color-default-border)",
         }}
       >
-        <Title order={3}>Appearance</Title>
+        <Title order={3}><Trans>Appearance</Trans></Title>
         <Stack>
           <AccentColorPicker />
           <ColorSchemePicker />
+          <LocalePicker />
         </Stack>
       </Box>
       <NotificationsSection />
-      <ListLink label="Sign Out" to="/logout" Icon={SignOutIcon} />
+      <ListLink label={t`Sign Out`} to="/logout" Icon={SignOutIcon} />
     </>
   );
 }

src/app/routes/_authed/stats.tsx

@@ -7,6 +7,8 @@ import { prefetchServerQuery } from "@/lib/tanstack-query/utils/prefetch";
 import LeagueHeadToHead from "@/features/players/components/league-head-to-head";
 import { Box, Loader, Tabs, Button, Group, Container, Stack } from "@mantine/core";
 import { useQueryClient } from "@tanstack/react-query";
+import { Trans } from "@lingui/react/macro";
+import { msg } from "@lingui/core/macro";
 
 export const Route = createFileRoute("/_authed/stats")({
   component: Stats,
@@ -18,7 +20,7 @@ export const Route = createFileRoute("/_authed/stats")({
     withPadding: false,
     fullWidth: true,
     header: {
-      title: "Player Stats"
+      title: msg`Player Stats`
     },
     refresh: [playerQueries.allStats().queryKey],
   }),
@@ -41,8 +43,8 @@ function Stats() {
   return (
     <Tabs defaultValue="stats">
       <Tabs.List grow>
-        <Tabs.Tab value="stats">Stats</Tabs.Tab>
-        <Tabs.Tab value="h2h">Head to Head</Tabs.Tab>
+        <Tabs.Tab value="stats"><Trans>Stats</Trans></Tabs.Tab>
+        <Tabs.Tab value="h2h"><Trans>Head to Head</Trans></Tabs.Tab>
       </Tabs.List>
 
       <Tabs.Panel value="stats">
@@ -54,21 +56,21 @@ function Stats() {
                 size="compact-xs"
                 onClick={() => setViewType('all')}
               >
-                All
+                <Trans>All</Trans>
               </Button>
               <Button
                 variant={viewType === 'mainline' ? 'filled' : 'light'}
                 size="compact-xs"
                 onClick={() => setViewType('mainline')}
               >
-                Mainline
+                <Trans>Mainline</Trans>
               </Button>
               <Button
                 variant={viewType === 'regional' ? 'filled' : 'light'}
                 size="compact-xs"
                 onClick={() => setViewType('regional')}
               >
-                Regional
+                <Trans>Regional</Trans>
               </Button>
             </Group>
             <Box style={{ opacity: isStale ? 0.6 : 1, transition: 'opacity 150ms' }}>

src/app/routes/_authed/tournaments/$id.predictions.tsx

@@ -3,6 +3,7 @@ import { tournamentQueries, useTournament } from "@/features/tournaments/queries
 import { ensureServerQueryData } from "@/lib/tanstack-query/utils/ensure";
 import { Container } from "@mantine/core";
 import { PredictionLeaderboard } from "@/features/predictions/components/prediction-leaderboard";
+import { msg } from "@lingui/core/macro";
 
 export const Route = createFileRoute("/_authed/tournaments/$id/predictions")({
   beforeLoad: async ({ context, params }) => {
@@ -19,7 +20,7 @@ export const Route = createFileRoute("/_authed/tournaments/$id/predictions")({
   loader: () => ({
     header: {
       withBackButton: true,
-      title: "Predictions",
+      title: msg`Predictions`,
     },
   }),
   component: RouteComponent,

src/app/routes/_authed/tournaments/$id.predictions_.$playerId.tsx

@@ -1,4 +1,6 @@
 import { createFileRoute, redirect } from "@tanstack/react-router";
+import { Trans } from "@lingui/react/macro";
+import { msg } from "@lingui/core/macro";
 import { useMemo } from "react";
 import { Box, Container, Group, Paper, Stack, Text } from "@mantine/core";
 import { tournamentQueries, useTournament } from "@/features/tournaments/queries";
@@ -41,7 +43,8 @@ export const Route = createFileRoute(
     withPadding: false,
     header: {
       withBackButton: true,
-      title: `${context.prediction.player.first_name}'s Bracket`,
+      title: msg`{name}'s Bracket`,
+      titleValues: { name: context.prediction.player.first_name },
     },
   }),
   component: RouteComponent,
@@ -100,7 +103,7 @@ function RouteComponent() {
               <Group gap="md" wrap="nowrap">
                 <Stack gap={0} ta="center">
                   <Text size="xs" c="dimmed" fw={700}>
-                    PTS
+                    <Trans>PTS</Trans>
                   </Text>
                   <Text size="sm" fw={700}>
                     {score.points}
@@ -108,7 +111,7 @@ function RouteComponent() {
                 </Stack>
                 <Stack gap={0} ta="center">
                   <Text size="xs" c="dimmed" fw={700}>
-                    PICKS
+                    <Trans>PICKS</Trans>
                   </Text>
                   <Text size="xs" c="dimmed">
                     {score.correct}/{score.total}

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

@@ -4,6 +4,7 @@ import { prefetchServerQuery } from '@/lib/tanstack-query/utils/prefetch'
 import { Suspense } from 'react'
 import TournamentCardList from '@/features/tournaments/components/tournament-card-list'
 import { Skeleton, Stack } from '@mantine/core'
+import { msg } from '@lingui/core/macro'
 
 export const Route = createFileRoute('/_authed/tournaments/')({
   beforeLoad: async ({ context }) => {
@@ -13,7 +14,7 @@ export const Route = createFileRoute('/_authed/tournaments/')({
   loader: () => ({
     header: {
       withBackButton: true,
-      title: 'Tournaments',
+      title: msg`Tournaments`,
     },
     refresh: tournamentQueries.list().queryKey
   }),