migrate to lingui

beszel/site/src/components/alerts/alert-button.tsx

@@ -17,7 +17,7 @@ import { Link } from "../router"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import { Checkbox } from "../ui/checkbox"
 import { SystemAlert, SystemAlertGlobal } from "./alerts-system"
-import { useTranslation } from "react-i18next"
+import { Trans, t } from "@lingui/macro"
 
 export default memo(function AlertsButton({ system }: { system: SystemRecord }) {
 	const alerts = useStore($alerts)
@@ -29,7 +29,7 @@ export default memo(function AlertsButton({ system }: { system: SystemRecord })
 	return (
 		<Dialog>
 			<DialogTrigger asChild>
-				<Button variant="ghost" size="icon" aria-label="Alerts" data-nolink onClick={() => setOpened(true)}>
+				<Button variant="ghost" size="icon" aria-label={t`Alerts`} data-nolink onClick={() => setOpened(true)}>
 					<BellIcon
 						className={cn("h-[1.2em] w-[1.2em] pointer-events-none", {
 							"fill-primary": active,
@@ -49,8 +49,6 @@ function TheContent({
 }: {
 	data: { system: SystemRecord; alerts: AlertRecord[]; systemAlerts: AlertRecord[] }
 }) {
-	const { t } = useTranslation()
-
 	const [overwriteExisting, setOverwriteExisting] = useState<boolean | "indeterminate">(false)
 	const systems = $systems.get()
 
@@ -66,13 +64,17 @@ function TheContent({
 	return (
 		<>
 			<DialogHeader>
-				<DialogTitle className="text-xl">{t("alerts.title")}</DialogTitle>
+				<DialogTitle className="text-xl">
+					<Trans>Alerts</Trans>
+				</DialogTitle>
 				<DialogDescription>
-					{t("alerts.subtitle_1")}{" "}
-					<Link href="/settings/notifications" className="link">
-						{t("alerts.notification_settings")}
-					</Link>{" "}
-					{t("alerts.subtitle_2")}
+					<Trans>
+						See{" "}
+						<Link href="/settings/notifications" className="link">
+							notification settings
+						</Link>{" "}
+						to configure how you receive alerts.
+					</Trans>
 				</DialogDescription>
 			</DialogHeader>
 			<Tabs defaultValue="system">
@@ -83,7 +85,7 @@ function TheContent({
 					</TabsTrigger>
 					<TabsTrigger value="global">
 						<GlobeIcon className="me-1.5 h-3.5 w-3.5" />
-						{t("all_systems")}
+						<Trans>All Systems</Trans>
 					</TabsTrigger>
 				</TabsList>
 				<TabsContent value="system">
@@ -104,7 +106,7 @@ function TheContent({
 							checked={overwriteExisting}
 							onCheckedChange={setOverwriteExisting}
 						/>
-						{t("alerts.overwrite_existing_alerts")}
+						<Trans>Overwrite existing alerts</Trans>
 					</label>
 					<div className="grid gap-3">
 						{data.map((d) => (

beszel/site/src/components/alerts/alerts-system.tsx

@@ -6,7 +6,7 @@ import { lazy, Suspense, useRef, useState } from "react"
 import { toast } from "../ui/use-toast"
 import { RecordOptions } from "pocketbase"
 import { newQueue, Queue } from "@henrygd/queue"
-import { useTranslation } from "react-i18next"
+import { Trans, t, Plural } from "@lingui/macro"
 
 interface AlertData {
 	checked?: boolean
@@ -24,8 +24,8 @@ let queue: Queue
 
 const failedUpdateToast = () =>
 	toast({
-		title: "Failed to update alert",
-		description: "Please check logs for more details.",
+		title: t`Failed to update alert`,
+		description: t`Please check logs for more details.`,
 		variant: "destructive",
 	})
 
@@ -156,8 +156,6 @@ export function SystemAlertGlobal({
 }
 
 function AlertContent({ data }: { data: AlertData }) {
-	const { t } = useTranslation()
-
 	const { key } = data
 
 	const hasSliders = !("single" in data.alert)
@@ -185,9 +183,9 @@ function AlertContent({ data }: { data: AlertData }) {
 			>
 				<div className="grid gap-1 select-none">
 					<p className="font-semibold flex gap-3 items-center">
-						<Icon className="h-4 w-4 opacity-85" /> {t(data.alert.name)}
+						<Icon className="h-4 w-4 opacity-85" /> {data.alert.name()}
 					</p>
-					{!showSliders && <span className="block text-sm text-muted-foreground">{t(data.alert.desc)}</span>}
+					{!showSliders && <span className="block text-sm text-muted-foreground">{data.alert.desc()}</span>}
 				</div>
 				<Switch
 					id={`s${key}`}
@@ -203,11 +201,13 @@ function AlertContent({ data }: { data: AlertData }) {
 					<Suspense fallback={<div className="h-10" />}>
 						<div>
 							<p id={`v${key}`} className="text-sm block h-8">
-								{t("alerts.average_exceeds")}{" "}
-								<strong className="text-foreground">
-									{value}
-									{data.alert.unit}
-								</strong>
+								<Trans>
+									Average exceeds{" "}
+									<strong className="text-foreground">
+										{value}
+										{data.alert.unit}
+									</strong>
+								</Trans>
 							</p>
 							<div className="flex gap-3">
 								<Slider
@@ -222,10 +222,10 @@ function AlertContent({ data }: { data: AlertData }) {
 						</div>
 						<div>
 							<p id={`t${key}`} className="text-sm block h-8">
-								{t("alerts.for")} <strong className="text-foreground">{min}</strong>{" "}
-								{t("minutes", {
-									count: min,
-								}).replace(String(min), "")}
+								<Trans>
+									For <strong className="text-foreground">{min}</strong>{" "}
+									<Plural value={min} one=" minute" other=" minutes" />
+								</Trans>
 							</p>
 							<div className="flex gap-3">
 								<Slider