i18n

src/features/activities/components/activities-table.tsx

@@ -1,4 +1,5 @@
 import { useState, useMemo, memo } from "react";
+import { Trans, Plural, useLingui } from "@lingui/react/macro";
 import {
   Text,
   TextInput,
@@ -35,13 +36,14 @@ interface ActivityListItemProps {
 }
 
 const ActivityListItem = memo(({ activity, onClick }: ActivityListItemProps) => {
+  const { t, i18n } = useLingui();
   const playerName = typeof activity.player === "object" && activity.player
     ? `${activity.player.first_name} ${activity.player.last_name}`
-    : "System";
+    : t`System`;
 
   const formatDate = (dateStr: string) => {
     const date = new Date(dateStr);
-    return date.toLocaleString();
+    return date.toLocaleString(i18n.locale);
   };
 
   return (
@@ -78,7 +80,7 @@ const ActivityListItem = memo(({ activity, onClick }: ActivityListItemProps) =>
               {playerName}
             </Text>
             <Text size="xs" c="dimmed">
-              {activity.duration}ms
+              <Trans>{activity.duration}ms</Trans>
             </Text>
             <Text size="xs" c="dimmed">
               {formatDate(activity.created)}
@@ -102,44 +104,45 @@ interface ActivityDetailsSheetProps {
 }
 
 const ActivityDetailsSheet = memo(({ activity, isOpen, onClose }: ActivityDetailsSheetProps) => {
+  const { t, i18n } = useLingui();
   if (!activity) return null;
 
   const playerName = typeof activity.player === "object" && activity.player
     ? `${activity.player.first_name} ${activity.player.last_name}`
-    : "System";
+    : t`System`;
 
   const formatDate = (dateStr: string) => {
     const date = new Date(dateStr);
-    return date.toLocaleString();
+    return date.toLocaleString(i18n.locale);
   };
 
   return (
-    <Sheet title="Activity Details" opened={isOpen} onChange={onClose}>
+    <Sheet title={t`Activity Details`} opened={isOpen} onChange={onClose}>
       <Stack gap="md" p="md">
         <Stack gap="xs">
           <Text size="xs" fw={700} c="dimmed">
-            Function Name
+            <Trans>Function Name</Trans>
           </Text>
           <Text size="sm">{activity.name}</Text>
         </Stack>
 
         <Stack gap="xs">
           <Text size="xs" fw={700} c="dimmed">
-            Status
+            <Trans>Status</Trans>
           </Text>
           <Group gap="xs">
             {activity.success ? (
               <>
                 <CheckIcon size={16} color="var(--mantine-color-green-6)" />
                 <Text size="sm" c="green">
-                  Success
+                  <Trans>Success</Trans>
                 </Text>
               </>
             ) : (
               <>
                 <XIcon size={16} color="var(--mantine-color-red-6)" />
                 <Text size="sm" c="red">
-                  Failed
+                  <Trans>Failed</Trans>
                 </Text>
               </>
             )}
@@ -148,21 +151,21 @@ const ActivityDetailsSheet = memo(({ activity, isOpen, onClose }: ActivityDetail
 
         <Stack gap="xs">
           <Text size="xs" fw={700} c="dimmed">
-            Player
+            <Trans>Player</Trans>
           </Text>
           <Text size="sm">{playerName}</Text>
         </Stack>
 
         <Stack gap="xs">
           <Text size="xs" fw={700} c="dimmed">
-            Duration
+            <Trans>Duration</Trans>
           </Text>
-          <Text size="sm">{activity.duration}ms</Text>
+          <Text size="sm"><Trans>{activity.duration}ms</Trans></Text>
         </Stack>
 
         <Stack gap="xs">
           <Text size="xs" fw={700} c="dimmed">
-            Created
+            <Trans>Created</Trans>
           </Text>
           <Text size="sm">{formatDate(activity.created)}</Text>
         </Stack>
@@ -170,7 +173,7 @@ const ActivityDetailsSheet = memo(({ activity, isOpen, onClose }: ActivityDetail
         {activity.user_agent && (
           <Stack gap="xs">
             <Text size="xs" fw={700} c="dimmed">
-              User Agent
+              <Trans>User Agent</Trans>
             </Text>
             <Text size="xs" style={{ wordBreak: "break-word" }}>
               {activity.user_agent}
@@ -181,7 +184,7 @@ const ActivityDetailsSheet = memo(({ activity, isOpen, onClose }: ActivityDetail
         {activity.error && (
           <Stack gap="xs">
             <Text size="xs" fw={700} c="dimmed">
-              Error Message
+              <Trans>Error Message</Trans>
             </Text>
             <Alert color="red" variant="light">
               <Text size="sm" style={{ wordBreak: "break-word" }}>
@@ -194,7 +197,7 @@ const ActivityDetailsSheet = memo(({ activity, isOpen, onClose }: ActivityDetail
         {activity.arguments && (
           <Stack gap="xs">
             <Text size="xs" fw={700} c="dimmed">
-              Arguments
+              <Trans>Arguments</Trans>
             </Text>
             <Code block style={{ fontSize: "11px" }}>
               {JSON.stringify(activity.arguments, null, 2)}
@@ -228,7 +231,7 @@ const ActivitiesResults = ({ searchParams, page, setPage, onActivityClick }: any
             <PulseIcon size={32} />
           </ThemeIcon>
           <Title order={3} c="dimmed">
-            No Activities Found
+            <Trans>No Activities Found</Trans>
           </Title>
         </Stack>
       )}
@@ -248,6 +251,7 @@ const ActivitiesResults = ({ searchParams, page, setPage, onActivityClick }: any
 };
 
 export const ActivitiesTable = () => {
+  const { t } = useLingui();
   const [page, setPage] = useState(1);
   const [search, setSearch] = useState("");
   const [successFilter, setSuccessFilter] = useState<string | null>(null);
@@ -302,7 +306,7 @@ export const ActivitiesTable = () => {
       <Stack gap="xs">
         <Stack gap="xs" px="md">
           <TextInput
-            placeholder="serverFn name"
+            placeholder={t`serverFn name`}
             value={search}
             onChange={(e) => {
               setSearch(e.currentTarget.value);
@@ -314,16 +318,16 @@ export const ActivitiesTable = () => {
 
           <Group>
             <Select
-              placeholder="Status"
+              placeholder={t`Status`}
               value={successFilter}
               onChange={(value) => {
                 setSuccessFilter(value);
                 setPage(1);
               }}
               data={[
-                { value: "all", label: "All" },
-                { value: "success", label: "Success" },
-                { value: "failure", label: "Failure" },
+                { value: "all", label: t`All` },
+                { value: "success", label: t`Success` },
+                { value: "failure", label: t`Failure` },
               ]}
               clearable
               size="sm"
@@ -334,11 +338,11 @@ export const ActivitiesTable = () => {
 
         <Group px="md" justify="space-between" align="center">
           <Text size="10px" lh={0} c="dimmed">
-            {result.totalItems} total activities
+            <Plural value={result.totalItems} one="# total activity" other="# total activities" />
           </Text>
           <Group gap="xs">
             <Text size="xs" c="dimmed">
-              Sort:
+              <Trans>Sort:</Trans>
             </Text>
             <UnstyledButton
               onClick={() => handleSort("created")}
@@ -349,7 +353,7 @@ export const ActivitiesTable = () => {
                 fw={sortBy.includes("created") ? 600 : 400}
                 c={sortBy.includes("created") ? "var(--mantine-color-text)" : "dimmed"}
               >
-                Date
+                <Trans>Date</Trans>
               </Text>
               {getSortIcon("created")}
             </UnstyledButton>
@@ -365,7 +369,7 @@ export const ActivitiesTable = () => {
                 fw={sortBy.includes("duration") ? 600 : 400}
                 c={sortBy.includes("duration") ? "var(--mantine-color-text)" : "dimmed"}
               >
-                Duration
+                <Trans>Duration</Trans>
               </Text>
               {getSortIcon("duration")}
             </UnstyledButton>