i18n

src/features/settings/components/notifications-section.tsx

@@ -1,10 +1,12 @@
 import { Box, Title, Stack, Switch, Button, Text, Group } from "@mantine/core";
+import { Trans, useLingui } from "@lingui/react/macro";
 import { useWebPush } from "@/hooks/use-web-push";
 import toast from "@/lib/sonner";
 
 export function NotificationsSection() {
   const { supported, configured, permission, subscribed, busy, enable, disable, sendTest } =
     useWebPush();
+  const { t } = useLingui();
 
   if (!supported || !configured) {
     return (
@@ -13,11 +15,11 @@ export function NotificationsSection() {
         py="sm"
         style={{ borderBottom: "1px solid var(--mantine-color-default-border)" }}
       >
-        <Title order={3}>Notifications</Title>
+        <Title order={3}><Trans>Notifications</Trans></Title>
         <Text size="sm" c="dimmed" mt="xs">
           {supported
-            ? "Notifications aren't available right now."
-            : "This device doesn't support push notifications. On iOS, install the app to your Home Screen first."}
+            ? <Trans>Notifications aren't available right now.</Trans>
+            : <Trans>This device doesn't support push notifications. On iOS, install the app to your Home Screen first.</Trans>}
         </Text>
       </Box>
     );
@@ -27,25 +29,25 @@ export function NotificationsSection() {
     if (checked) {
       const ok = await enable();
       if (ok) {
-        toast.success("Notifications enabled on this device");
+        toast.success(t`Notifications enabled on this device`);
       } else if (permission === "denied") {
         toast.error(
-          "Notifications are blocked. Enable them in your browser settings."
+          t`Notifications are blocked. Enable them in your browser settings.`
         );
       } else {
-        toast.error("Couldn't enable notifications");
+        toast.error(t`Couldn't enable notifications`);
       }
     } else {
       const ok = await disable();
-      if (ok) toast.success("Notifications disabled on this device");
-      else toast.error("Couldn't disable notifications");
+      if (ok) toast.success(t`Notifications disabled on this device`);
+      else toast.error(t`Couldn't disable notifications`);
     }
   };
 
   const handleTest = async () => {
     const ok = await sendTest();
-    if (ok) toast.success("Test notification sent");
-    else toast.error("Couldn't send test notification");
+    if (ok) toast.success(t`Test notification sent`);
+    else toast.error(t`Couldn't send test notification`);
   };
 
   return (
@@ -54,13 +56,13 @@ export function NotificationsSection() {
       py="sm"
       style={{ borderBottom: "1px solid var(--mantine-color-default-border)" }}
     >
-      <Title order={3}>Notifications</Title>
+      <Title order={3}><Trans>Notifications</Trans></Title>
       <Stack mt="xs" gap="sm">
         <Switch
           checked={subscribed}
           onChange={(e) => handleToggle(e.currentTarget.checked)}
           disabled={busy}
-          label="Enable notifications on this device"
+          label={t`Enable notifications on this device`}
         />
         {subscribed && (
           <Group>
@@ -70,7 +72,7 @@ export function NotificationsSection() {
               onClick={handleTest}
               loading={busy}
             >
-              Send test notification
+              <Trans>Send test notification</Trans>
             </Button>
           </Group>
         )}