i18n

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} />
     </>
   );
 }