Add translations

src/components/UptimeAlertSection.tsx

@@ -34,6 +34,7 @@ import { orgQueries } from "@app/lib/queries";
 import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
 import { usePaidStatus } from "@app/hooks/usePaidStatus";
 import { tierMatrix } from "@server/lib/billing/tierMatrix";
+import { useTranslations } from "next-intl";
 
 interface UptimeAlertSectionProps {
     orgId: string;
@@ -50,6 +51,7 @@ export default function UptimeAlertSection({
     resourceId,
     days = 90
 }: UptimeAlertSectionProps) {
+    const t = useTranslations();
     const api = createApiClient(useEnvContext());
     const queryClient = useQueryClient();
     const { isPaidUser } = usePaidStatus();
@@ -57,7 +59,7 @@ export default function UptimeAlertSection({
 
     const [open, setOpen] = useState(false);
     const [name, setName] = useState(
-        `${siteId ? "Site" : "Resource"} ${startingName} Alert`
+        `${siteId ? t("site") : t("resource")} ${startingName} ${t("alertLabel")}`
     );
     const [userTags, setUserTags] = useState<Tag[]>([]);
     const [roleTags, setRoleTags] = useState<Tag[]>([]);
@@ -112,9 +114,8 @@ export default function UptimeAlertSection({
         ) {
             toast({
                 variant: "destructive",
-                title: "No recipients",
-                description:
-                    "Please add at least one user, role, or email to notify."
+                title: t("uptimeAlertNoRecipients"),
+                description: t("uptimeAlertNoRecipientsDescription")
             });
             return;
         }
@@ -136,12 +137,12 @@ export default function UptimeAlertSection({
             });
 
             toast({
-                title: "Alert created",
-                description: "You will be notified when this changes status."
+                title: t("uptimeAlertCreated"),
+                description: t("uptimeAlertCreatedDescription")
             });
 
             setOpen(false);
-            setName("Uptime Alert");
+            setName(t("uptimeSectionTitle"));
             setUserTags([]);
             setRoleTags([]);
             setEmailTags([]);
@@ -156,8 +157,8 @@ export default function UptimeAlertSection({
         } catch (e) {
             toast({
                 variant: "destructive",
-                title: "Failed to create alert",
-                description: formatAxiosError(e, "An error occurred.")
+                title: t("uptimeAlertCreateFailed"),
+                description: formatAxiosError(e, t("errorOccurred"))
             });
         }
         setLoading(false);
@@ -174,19 +175,19 @@ export default function UptimeAlertSection({
     const alertButton = alertRulesLoading ? (
         <Button variant="outline" type="button" loading aria-busy="true">
             <BellPlus className="size-4 mr-2" />
-            Add Alert
+            {t("uptimeAddAlert")}
         </Button>
     ) : hasRules ? (
         <Button variant="outline" asChild>
             <Link href={rulesListHref}>
                 <BellRing className="size-4 mr-2" />
-                View Alerts
+                {t("uptimeViewAlerts")}
             </Link>
         </Button>
     ) : (
         <Button variant="outline" onClick={() => setOpen(true)}>
             <BellPlus className="size-4 mr-2" />
-            Add Alert
+            {t("uptimeAddAlert")}
         </Button>
     );
 
@@ -196,9 +197,11 @@ export default function UptimeAlertSection({
                 <SettingsSectionHeader>
                     <div className="flex justify-between items-start">
                         <div>
-                            <SettingsSectionTitle>Uptime</SettingsSectionTitle>
+                            <SettingsSectionTitle>
+                                {t("uptimeSectionTitle")}
+                            </SettingsSectionTitle>
                             <SettingsSectionDescription>
-                                Availability over the last {days} days
+                                {t("uptimeSectionDescription", { days })}
                             </SettingsSectionDescription>
                         </div>
                         {alertButton}
@@ -216,11 +219,13 @@ export default function UptimeAlertSection({
             <Credenza open={open} onOpenChange={setOpen}>
                 <CredenzaContent>
                     <CredenzaHeader>
-                        <CredenzaTitle>Create Email Alert</CredenzaTitle>
+                        <CredenzaTitle>
+                            {t("uptimeCreateEmailAlert")}
+                        </CredenzaTitle>
                         <CredenzaDescription>
-                            Get notified by email when this{" "}
-                            {siteId ? "site" : "resource"} goes offline or comes
-                            back online.
+                            {siteId
+                                ? t("uptimeAlertDescriptionSite")
+                                : t("uptimeAlertDescriptionResource")}
                         </CredenzaDescription>
                     </CredenzaHeader>
                     <CredenzaBody>
@@ -232,20 +237,22 @@ export default function UptimeAlertSection({
                             >
                                 <div className="space-y-4">
                                     <div className="space-y-2">
-                                        <Label htmlFor="alert-name">Name</Label>
+                                        <Label htmlFor="alert-name">
+                                            {t("name")}
+                                        </Label>
                                         <Input
                                             id="alert-name"
                                             value={name}
                                             onChange={(e) => setName(e.target.value)}
-                                            placeholder="Alert name"
+                                            placeholder={t("uptimeAlertNamePlaceholder")}
                                         />
                                     </div>
                                     <div className="space-y-2">
-                                        <Label>Notify Users</Label>
+                                        <Label>{t("alertingNotifyUsers")}</Label>
                                         <TagInput
                                             activeTagIndex={activeUserTagIndex}
                                             setActiveTagIndex={setActiveUserTagIndex}
-                                            placeholder="Select users..."
+                                            placeholder={t("alertingSelectUsers")}
                                             size="sm"
                                             tags={userTags}
                                             setTags={(newTags) => {
@@ -263,11 +270,11 @@ export default function UptimeAlertSection({
                                         />
                                     </div>
                                     <div className="space-y-2">
-                                        <Label>Notify Roles</Label>
+                                        <Label>{t("alertingNotifyRoles")}</Label>
                                         <TagInput
                                             activeTagIndex={activeRoleTagIndex}
                                             setActiveTagIndex={setActiveRoleTagIndex}
-                                            placeholder="Select roles..."
+                                            placeholder={t("alertingSelectRoles")}
                                             size="sm"
                                             tags={roleTags}
                                             setTags={(newTags) => {
@@ -285,11 +292,11 @@ export default function UptimeAlertSection({
                                         />
                                     </div>
                                     <div className="space-y-2">
-                                        <Label>Additional Emails</Label>
+                                        <Label>{t("uptimeAdditionalEmails")}</Label>
                                         <TagInput
                                             activeTagIndex={activeEmailTagIndex}
                                             setActiveTagIndex={setActiveEmailTagIndex}
-                                            placeholder="Enter email addresses..."
+                                            placeholder={t("alertingEmailPlaceholder")}
                                             size="sm"
                                             tags={emailTags}
                                             setTags={(newTags) => {
@@ -313,14 +320,14 @@ export default function UptimeAlertSection({
                     </CredenzaBody>
                     <CredenzaFooter>
                         <CredenzaClose asChild>
-                            <Button variant="outline">Cancel</Button>
+                            <Button variant="outline">{t("cancel")}</Button>
                         </CredenzaClose>
                         <Button
                             onClick={handleSubmit}
                             loading={loading}
                             disabled={loading || !isPaid}
                         >
-                            Create Alert
+                            {t("uptimeCreateAlert")}
                         </Button>
                     </CredenzaFooter>
                 </CredenzaContent>

src/components/UptimeBar.tsx

@@ -10,6 +10,7 @@ import {
 import { useEnvContext } from "@app/hooks/useEnvContext";
 import { createApiClient } from "@app/lib/api";
 import { cn } from "@app/lib/cn";
+import { useTranslations } from "next-intl";
 
 function formatDuration(seconds: number): string {
     if (seconds === 0) return "0s";
@@ -63,6 +64,7 @@ export default function UptimeBar({
     title,
     className
 }: UptimeBarProps) {
+    const t = useTranslations();
     const api = createApiClient(useEnvContext());
 
     const siteQuery = useQuery({
@@ -104,7 +106,7 @@ export default function UptimeBar({
                     <div
                         className="flex items-center gap-4 text-sm ml-auto"
                         aria-busy="true"
-                        aria-label="Loading uptime summary"
+                        aria-label={t("loading")}
                     >
                         <span className="h-4 w-[4.5rem] shrink-0 rounded-md bg-muted animate-pulse" />
                         <span className="h-4 w-[7rem] shrink-0 rounded-md bg-muted animate-pulse" />
@@ -122,8 +124,8 @@ export default function UptimeBar({
                     ))}
                 </div>
                 <div className="flex justify-between text-xs text-muted-foreground">
-                    <span>{days} days ago</span>
-                    <span>Today</span>
+                    <span>{t("uptimeDaysAgo", { count: days })}</span>
+                    <span>{t("uptimeToday")}</span>
                 </div>
             </div>
         );
@@ -145,7 +147,7 @@ export default function UptimeBar({
                                 <span className="font-semibold text-foreground">
                                     {data.overallUptimePercent.toFixed(2)}%
                                 </span>{" "}
-                                uptime
+                                {t("uptimeSuffix")}
                             </span>
                             {data.totalDowntimeSeconds > 0 && (
                                 <span className="text-muted-foreground">
@@ -154,14 +156,14 @@ export default function UptimeBar({
                                             data.totalDowntimeSeconds
                                         )}
                                     </span>{" "}
-                                    downtime
+                                    {t("uptimeDowntimeSuffix")}
                                 </span>
                             )}
                         </>
                     )}
                     {allNoData && (
                         <span className="text-muted-foreground text-xs">
-                            No data available
+                            {t("uptimeNoDataAvailable")}
                         </span>
                     )}
                 </div>
@@ -188,7 +190,7 @@ export default function UptimeBar({
                             </div>
                             {day.status !== "no_data" && (
                                 <div className="text-xs text-primary-foreground/80">
-                                    Uptime:{" "}
+                                    {t("uptimeTooltipUptimeLabel")}:{" "}
                                     <span className="font-medium text-primary-foreground">
                                         {day.uptimePercent.toFixed(1)}%
                                     </span>
@@ -196,7 +198,7 @@ export default function UptimeBar({
                             )}
                             {day.totalDowntimeSeconds > 0 && (
                                 <div className="text-xs text-primary-foreground/80">
-                                    Downtime:{" "}
+                                    {t("uptimeTooltipDowntimeLabel")}:{" "}
                                     <span className="font-medium text-primary-foreground">
                                         {formatDuration(
                                             day.totalDowntimeSeconds
@@ -214,7 +216,7 @@ export default function UptimeBar({
                                             {formatTime(w.start)}
                                             {w.end
                                                 ? ` – ${formatTime(w.end)}`
-                                                : " – ongoing"}{" "}
+                                                : ` – ${t("uptimeOngoing")}`}{" "}
                                             <span className="capitalize">
                                                 ({w.status})
                                             </span>
@@ -224,7 +226,7 @@ export default function UptimeBar({
                             )}
                             {day.status === "no_data" && (
                                 <div className="text-xs text-primary-foreground/60">
-                                    No monitoring data
+                                    {t("uptimeNoMonitoringData")}
                                 </div>
                             )}
                         </TooltipContent>
@@ -234,9 +236,9 @@ export default function UptimeBar({
 
             {/* Date labels */}
             <div className="flex justify-between text-xs text-muted-foreground">
-                <span>{days} days ago</span>
-                <span>Today</span>
+                <span>{t("uptimeDaysAgo", { count: days })}</span>
+                <span>{t("uptimeToday")}</span>
             </div>
         </div>
     );
-}
+}

src/components/UptimeMiniBar.tsx

@@ -10,6 +10,7 @@ import {
 import { useEnvContext } from "@app/hooks/useEnvContext";
 import { createApiClient } from "@app/lib/api";
 import { cn } from "@app/lib/cn";
+import { useTranslations } from "next-intl";
 
 function formatDuration(seconds: number): string {
     if (seconds === 0) return "0s";
@@ -51,6 +52,7 @@ export default function UptimeMiniBar({
     healthCheckId,
     days = 30
 }: UptimeMiniBarProps) {
+    const t = useTranslations();
     const api = createApiClient(useEnvContext());
 
     const siteQuery = useQuery({
@@ -105,7 +107,7 @@ export default function UptimeMiniBar({
                 <span
                     className="inline-flex min-w-[7ch] items-center justify-end text-xs text-muted-foreground whitespace-nowrap"
                     aria-busy="true"
-                    aria-label="Loading uptime"
+                    aria-label={t("loading")}
                 >
                     <span className="h-4 w-[5.5ch] max-w-full rounded bg-muted animate-pulse" />
                 </span>
@@ -136,12 +138,12 @@ export default function UptimeMiniBar({
                             </div>
                             <div className="text-xs text-primary-foreground/80">
                                 {day.status === "no_data"
-                                    ? "No data"
-                                    : `${day.uptimePercent.toFixed(1)}% uptime`}
+                                    ? t("uptimeNoData")
+                                    : `${day.uptimePercent.toFixed(1)}% ${t("uptimeSuffix")}`}
                             </div>
                             {day.totalDowntimeSeconds > 0 && (
                                 <div className="text-xs text-primary-foreground/70">
-                                    Down:{" "}
+                                    {t("uptimeMiniBarDown")}:{" "}
                                     {formatDuration(day.totalDowntimeSeconds)}
                                 </div>
                             )}
@@ -151,9 +153,9 @@ export default function UptimeMiniBar({
             </div>
             <span className="text-xs text-muted-foreground whitespace-nowrap">
                 {allNoData
-                    ? "No data"
+                    ? t("uptimeNoData")
                     : `${data.overallUptimePercent.toFixed(1)}%`}
             </span>
         </div>
     );
-}
+}

src/components/alert-rule-editor/AlertRuleFields.tsx

@@ -714,7 +714,7 @@ function WebhookActionFields({
                 name={`actions.${index}.url`}
                 render={({ field }) => (
                     <FormItem>
-                        <FormLabel>URL</FormLabel>
+                        <FormLabel>{t("webhookUrlLabel")}</FormLabel>
                         <FormControl>
                             <Input
                                 {...field}
@@ -961,7 +961,7 @@ function WebhookHeadersField({
                         render={({ field }) => (
                             <FormItem className="flex-1">
                                 <FormControl>
-                                    <Input {...field} placeholder="Key" />
+                                    <Input {...field} placeholder={t("webhookHeaderKeyPlaceholder")} />
                                 </FormControl>
                             </FormItem>
                         )}
@@ -972,7 +972,7 @@ function WebhookHeadersField({
                         render={({ field }) => (
                             <FormItem className="flex-1">
                                 <FormControl>
-                                    <Input {...field} placeholder="Value" />
+                                    <Input {...field} placeholder={t("webhookHeaderValuePlaceholder")} />
                                 </FormControl>
                             </FormItem>
                         )}