updates for lingui 5

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

@@ -1,3 +1,5 @@
+import { Trans } from "@lingui/react/macro";
+import { t } from "@lingui/core/macro";
 import { Button } from "@/components/ui/button"
 import {
 	Dialog,
@@ -16,7 +18,6 @@ import { Label } from "@/components/ui/label"
 import { $publicKey, pb } from "@/lib/stores"
 import { cn, copyToClipboard, isReadOnlyUser, useLocalStorage } from "@/lib/utils"
 import { i18n } from "@lingui/core"
-import { t, Trans } from "@lingui/macro"
 import { useStore } from "@nanostores/react"
 import { ChevronDownIcon, Copy, PlusIcon } from "lucide-react"
 import { memo, useRef, useState } from "react"

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

@@ -1,3 +1,5 @@
+import { t } from "@lingui/core/macro";
+import { Trans } from "@lingui/react/macro";
 import { memo, useMemo, useState } from "react"
 import { useStore } from "@nanostores/react"
 import { $alerts } from "@/lib/stores"
@@ -17,7 +19,6 @@ 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 { Trans, t } from "@lingui/macro"
 
 export default memo(function AlertsButton({ system }: { system: SystemRecord }) {
 	const alerts = useStore($alerts)

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

@@ -1,3 +1,5 @@
+import { t } from "@lingui/core/macro"
+import { Trans, Plural } from "@lingui/react/macro"
 import { $alerts, $systems, pb } from "@/lib/stores"
 import { alertInfo, cn } from "@/lib/utils"
 import { Switch } from "@/components/ui/switch"
@@ -5,7 +7,6 @@ import { AlertInfo, AlertRecord, SystemRecord } from "@/types"
 import { lazy, Suspense, useMemo, useState } from "react"
 import { toast } from "../ui/use-toast"
 import { BatchService } from "pocketbase"
-import { Trans, t, Plural } from "@lingui/macro"
 import { getSemaphore } from "@henrygd/semaphore"
 
 interface AlertData {

beszel/site/src/components/charts/area-chart.tsx

@@ -1,5 +1,6 @@
-import { Area, AreaChart, CartesianGrid, YAxis } from "recharts"
+import { t } from "@lingui/core/macro"
 
+import { Area, AreaChart, CartesianGrid, YAxis } from "recharts"
 import { ChartContainer, ChartTooltip, ChartTooltipContent, xAxis } from "@/components/ui/chart"
 import {
 	useYAxisWidth,
@@ -12,8 +13,7 @@ import {
 // import Spinner from '../spinner'
 import { ChartData } from "@/types"
 import { memo, useMemo } from "react"
-import { t } from "@lingui/macro"
-import { useLingui } from "@lingui/react"
+import { useLingui } from "@lingui/react/macro"
 
 /** [label, key, color, opacity] */
 type DataKeys = [string, string, number, number]

beszel/site/src/components/charts/disk-chart.tsx

@@ -1,5 +1,4 @@
 import { Area, AreaChart, CartesianGrid, YAxis } from "recharts"
-
 import { ChartContainer, ChartTooltip, ChartTooltipContent, xAxis } from "@/components/ui/chart"
 import {
 	useYAxisWidth,
@@ -12,8 +11,7 @@ import {
 } from "@/lib/utils"
 import { ChartData } from "@/types"
 import { memo } from "react"
-import { t } from "@lingui/macro"
-import { useLingui } from "@lingui/react"
+import { useLingui } from "@lingui/react/macro"
 
 export default memo(function DiskChart({
 	dataKey,
@@ -25,7 +23,7 @@ export default memo(function DiskChart({
 	chartData: ChartData
 }) {
 	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
-	const { _ } = useLingui()
+	const { t } = useLingui()
 
 	// round to nearest GB
 	if (diskSize >= 100) {
@@ -76,7 +74,7 @@ export default memo(function DiskChart({
 					/>
 					<Area
 						dataKey={dataKey}
-						name={_(t`Disk Usage`)}
+						name={t`Disk Usage`}
 						type="monotoneX"
 						fill="hsl(var(--chart-4))"
 						fillOpacity={0.4}

beszel/site/src/components/charts/mem-chart.tsx

@@ -1,15 +1,13 @@
 import { Area, AreaChart, CartesianGrid, YAxis } from "recharts"
-
 import { ChartContainer, ChartTooltip, ChartTooltipContent, xAxis } from "@/components/ui/chart"
 import { useYAxisWidth, cn, toFixedFloat, decimalString, formatShortDate, chartMargin } from "@/lib/utils"
 import { memo } from "react"
 import { ChartData } from "@/types"
-import { t } from "@lingui/macro"
-import { useLingui } from "@lingui/react"
+import { useLingui } from "@lingui/react/macro"
 
 export default memo(function MemChart({ chartData }: { chartData: ChartData }) {
 	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
-	const { _ } = useLingui()
+	const { t } = useLingui()
 
 	const totalMem = toFixedFloat(chartData.systemStats.at(-1)?.stats.m ?? 0, 1)
 
@@ -62,7 +60,7 @@ export default memo(function MemChart({ chartData }: { chartData: ChartData }) {
 						}
 					/>
 					<Area
-						name={_(t`Used`)}
+						name={t`Used`}
 						order={3}
 						dataKey="stats.mu"
 						type="monotoneX"
@@ -86,7 +84,7 @@ export default memo(function MemChart({ chartData }: { chartData: ChartData }) {
 						/>
 					)}
 					<Area
-						name={_(t`Cache / Buffers`)}
+						name={t`Cache / Buffers`}
 						order={1}
 						dataKey="stats.mb"
 						type="monotoneX"

beszel/site/src/components/charts/swap-chart.tsx

@@ -1,5 +1,6 @@
-import { Area, AreaChart, CartesianGrid, YAxis } from "recharts"
+import { t } from "@lingui/core/macro";
 
+import { Area, AreaChart, CartesianGrid, YAxis } from "recharts"
 import { ChartContainer, ChartTooltip, ChartTooltipContent, xAxis } from "@/components/ui/chart"
 import {
 	useYAxisWidth,
@@ -11,7 +12,6 @@ import {
 } from "@/lib/utils"
 import { ChartData } from "@/types"
 import { memo } from "react"
-import { t } from "@lingui/macro"
 
 export default memo(function SwapChart({ chartData }: { chartData: ChartData }) {
 	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()

beszel/site/src/components/copy-to-clipboard.tsx

@@ -1,8 +1,8 @@
+import { Trans } from "@lingui/react/macro";
 import { useEffect, useMemo, useRef } from "react"
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "./ui/dialog"
 import { Textarea } from "./ui/textarea"
 import { $copyContent } from "@/lib/stores"
-import { Trans } from "@lingui/macro"
 
 export default function CopyToClipboard({ content }: { content: string }) {
 	return (

beszel/site/src/components/lang-toggle.tsx

@@ -4,7 +4,7 @@ import { Button } from "@/components/ui/button"
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
 import languages from "@/lib/languages"
 import { cn } from "@/lib/utils"
-import { useLingui } from "@lingui/react"
+import { useLingui } from "@lingui/react/macro"
 import { dynamicActivate } from "@/lib/i18n"
 
 export function LangToggle() {

beszel/site/src/components/login/auth-form.tsx

@@ -1,3 +1,5 @@
+import { t } from "@lingui/core/macro";
+import { Trans } from "@lingui/react/macro";
 import { cn } from "@/lib/utils"
 import { buttonVariants } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
@@ -10,7 +12,6 @@ import { Dialog, DialogContent, DialogTrigger, DialogHeader, DialogTitle } from
 import { useCallback, useEffect, useState } from "react"
 import { AuthMethodsList, AuthProviderInfo, OAuth2AuthConfig } from "pocketbase"
 import { $router, Link, prependBasePath } from "../router"
-import { Trans, t } from "@lingui/macro"
 import { getPagePath } from "@nanostores/router"
 
 const honeypot = v.literal("")
@@ -164,8 +165,8 @@ export function UserAuthForm({
 	}, [])
 
 	return (
-		<div className={cn("grid gap-6", className)} {...props}>
-			{passwordEnabled && (
+        <div className={cn("grid gap-6", className)} {...props}>
+            {passwordEnabled && (
 				<>
 					<form onSubmit={handleSubmit} onChange={() => setErrors({})}>
 						<div className="grid gap-2.5">
@@ -241,21 +242,20 @@ export function UserAuthForm({
 					</form>
 					{(isFirstRun || oauthEnabled) && (
 						// only show 'continue with' during onboarding or if we have auth providers
-						<div className="relative">
-							<div className="absolute inset-0 flex items-center">
+						(<div className="relative">
+                            <div className="absolute inset-0 flex items-center">
 								<span className="w-full border-t" />
 							</div>
-							<div className="relative flex justify-center text-xs uppercase">
+                            <div className="relative flex justify-center text-xs uppercase">
 								<span className="bg-background px-2 text-muted-foreground">
 									<Trans>Or continue with</Trans>
 								</span>
 							</div>
-						</div>
+                        </div>)
 					)}
 				</>
 			)}
-
-			{oauthEnabled && (
+            {oauthEnabled && (
 				<div className="grid gap-2 -mt-1">
 					{authMethods.oauth2.providers.map((provider) => (
 						<button
@@ -285,17 +285,16 @@ export function UserAuthForm({
 					))}
 				</div>
 			)}
-
-			{!oauthEnabled && isFirstRun && (
+            {!oauthEnabled && isFirstRun && (
 				// only show GitHub button / dialog during onboarding
-				<Dialog>
-					<DialogTrigger asChild>
+				(<Dialog>
+                    <DialogTrigger asChild>
 						<button type="button" className={cn(buttonVariants({ variant: "outline" }))}>
 							<img className="me-2 h-4 w-4 dark:invert" src={prependBasePath("/_/images/oauth2/github.svg")} alt="" />
 							<span className="translate-y-[1px]">GitHub</span>
 						</button>
 					</DialogTrigger>
-					<DialogContent style={{ maxWidth: 440, width: "90%" }}>
+                    <DialogContent style={{ maxWidth: 440, width: "90%" }}>
 						<DialogHeader>
 							<DialogTitle>
 								<Trans>OAuth 2 / OIDC support</Trans>
@@ -319,10 +318,9 @@ export function UserAuthForm({
 							</p>
 						</div>
 					</DialogContent>
-				</Dialog>
+                </Dialog>)
 			)}
-
-			{passwordEnabled && !isFirstRun && (
+            {passwordEnabled && !isFirstRun && (
 				<Link
 					href={getPagePath($router, "forgot_password")}
 					className="text-sm mx-auto hover:text-brand underline underline-offset-4 opacity-70 hover:opacity-100 transition-opacity"
@@ -330,6 +328,6 @@ export function UserAuthForm({
 					<Trans>Forgot password?</Trans>
 				</Link>
 			)}
-		</div>
-	)
+        </div>
+    );
 }

beszel/site/src/components/login/forgot-pass-form.tsx

@@ -1,3 +1,5 @@
+import { Trans } from "@lingui/react/macro";
+import { t } from "@lingui/core/macro";
 import { LoaderCircle, MailIcon, SendHorizonalIcon } from "lucide-react"
 import { Input } from "../ui/input"
 import { Label } from "../ui/label"
@@ -8,7 +10,6 @@ import { cn } from "@/lib/utils"
 import { pb } from "@/lib/stores"
 import { Dialog, DialogHeader } from "../ui/dialog"
 import { DialogContent, DialogTrigger, DialogTitle } from "../ui/dialog"
-import { t, Trans } from "@lingui/macro"
 
 const showLoginFaliedToast = () => {
 	toast({

beszel/site/src/components/login/login.tsx

@@ -1,3 +1,4 @@
+import { t } from "@lingui/core/macro";
 import { UserAuthForm } from "@/components/login/auth-form"
 import { Logo } from "../logo"
 import { useEffect, useMemo, useState } from "react"
@@ -6,7 +7,6 @@ import { useStore } from "@nanostores/react"
 import ForgotPassword from "./forgot-pass-form"
 import { $router } from "../router"
 import { AuthMethodsList } from "pocketbase"
-import { t } from "@lingui/macro"
 import { useTheme } from "../theme-provider"
 
 export default function () {

beszel/site/src/components/mode-toggle.tsx

@@ -1,10 +1,11 @@
+import { Trans } from "@lingui/react/macro";
+import { t } from "@lingui/core/macro";
 import { LaptopIcon, MoonStarIcon, SunIcon } from "lucide-react"
 
 import { Button } from "@/components/ui/button"
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
 import { useTheme } from "@/components/theme-provider"
 import { cn } from "@/lib/utils"
-import { t, Trans } from "@lingui/macro"
 
 export function ModeToggle() {
 	const { theme, setTheme } = useTheme()

beszel/site/src/components/navbar.tsx

@@ -1,3 +1,4 @@
+import { Trans } from "@lingui/react/macro";
 import { useState, lazy, Suspense } from "react"
 import { Button, buttonVariants } from "@/components/ui/button"
 import {
@@ -26,7 +27,6 @@ import {
 	DropdownMenuItem,
 } from "@/components/ui/dropdown-menu"
 import { AddSystemButton } from "./add-system"
-import { Trans } from "@lingui/macro"
 import { getPagePath } from "@nanostores/router"
 
 const CommandPalette = lazy(() => import("./command-palette"))

beszel/site/src/components/routes/settings/config-yaml.tsx

@@ -1,3 +1,5 @@
+import { t } from "@lingui/core/macro";
+import { Trans } from "@lingui/react/macro";
 import { isAdmin } from "@/lib/utils"
 import { Separator } from "@/components/ui/separator"
 import { Button } from "@/components/ui/button"
@@ -10,7 +12,6 @@ import { useState } from "react"
 import { Textarea } from "@/components/ui/textarea"
 import { toast } from "@/components/ui/use-toast"
 import clsx from "clsx"
-import { Trans, t } from "@lingui/macro"
 
 export default function ConfigYaml() {
 	const [configContent, setConfigContent] = useState<string>("")

beszel/site/src/components/routes/settings/general.tsx

@@ -1,3 +1,4 @@
+import { Trans } from "@lingui/react/macro"
 import { Button } from "@/components/ui/button"
 import { Label } from "@/components/ui/label"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
@@ -7,10 +8,9 @@ import { LanguagesIcon, LoaderCircleIcon, SaveIcon } from "lucide-react"
 import { UserSettings } from "@/types"
 import { saveSettings } from "./layout"
 import { useState } from "react"
-import { Trans } from "@lingui/macro"
 import languages from "@/lib/languages"
 import { dynamicActivate } from "@/lib/i18n"
-import { useLingui } from "@lingui/react"
+import { useLingui } from "@lingui/react/macro"
 // import { setLang } from "@/lib/i18n"
 
 export default function SettingsProfilePage({ userSettings }: { userSettings: UserSettings }) {

beszel/site/src/components/routes/settings/layout.tsx

@@ -1,3 +1,5 @@
+import { t } from "@lingui/core/macro"
+import { Trans } from "@lingui/react/macro"
 import { useEffect } from "react"
 import { Separator } from "../../ui/separator"
 import { SidebarNav } from "./sidebar-nav.tsx"
@@ -12,8 +14,7 @@ import { UserSettings } from "@/types.js"
 import General from "./general.tsx"
 import Notifications from "./notifications.tsx"
 import ConfigYaml from "./config-yaml.tsx"
-import { Trans, t } from "@lingui/macro"
-import { useLingui } from "@lingui/react"
+import { useLingui } from "@lingui/react/macro"
 
 export async function saveSettings(newSettings: Partial<UserSettings>) {
 	try {
@@ -44,11 +45,11 @@ export async function saveSettings(newSettings: Partial<UserSettings>) {
 }
 
 export default function SettingsLayout() {
-	const { _ } = useLingui()
+	const { t } = useLingui()
 
 	const sidebarNavItems = [
 		{
-			title: _(t({ message: `General`, comment: "Context: General settings" })),
+			title: t({ message: `General`, comment: "Context: General settings" }),
 			href: getPagePath($router, "settings", { name: "general" }),
 			icon: SettingsIcon,
 		},

beszel/site/src/components/routes/settings/notifications.tsx

@@ -1,3 +1,5 @@
+import { t } from "@lingui/core/macro";
+import { Trans } from "@lingui/react/macro";
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
@@ -12,7 +14,6 @@ import { UserSettings } from "@/types"
 import { saveSettings } from "./layout"
 import * as v from "valibot"
 import { isAdmin } from "@/lib/utils"
-import { Trans, t } from "@lingui/macro"
 import { prependBasePath } from "@/components/router"
 
 interface ShoutrrrUrlCardProps {

beszel/site/src/components/routes/system.tsx

@@ -1,3 +1,5 @@
+import { t } from "@lingui/core/macro"
+import { Plural, Trans } from "@lingui/react/macro"
 import { $systems, pb, $chartTime, $containerFilter, $userSettings, $direction, $maxValues } from "@/lib/stores"
 import { ChartData, ChartTimes, ContainerStatsRecord, GPUData, SystemRecord, SystemStatsRecord } from "@/types"
 import React, { lazy, memo, useCallback, useEffect, useMemo, useRef, useState } from "react"
@@ -24,8 +26,7 @@ import { ChartAverage, ChartMax, Rows, TuxIcon } from "../ui/icons"
 import { useIntersectionObserver } from "@/lib/use-intersection-observer"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select"
 import { timeTicks } from "d3-time"
-import { Plural, Trans, t } from "@lingui/macro"
-import { useLingui } from "@lingui/react"
+import { useLingui } from "@lingui/react/macro"
 import { $router, navigate } from "../router"
 import { getPagePath } from "@nanostores/router"
 
@@ -106,7 +107,7 @@ function dockerOrPodman(str: string, system: SystemRecord) {
 
 export default function SystemDetail({ name }: { name: string }) {
 	const direction = useStore($direction)
-	const { _ } = useLingui()
+	const { t } = useLingui()
 	const systems = useStore($systems)
 	const chartTime = useStore($chartTime)
 	const maxValues = useStore($maxValues)
@@ -430,7 +431,7 @@ export default function SystemDetail({ name }: { name: string }) {
 					<ChartCard
 						empty={dataEmpty}
 						grid={grid}
-						title={_(t`CPU Usage`)}
+						title={t`CPU Usage`}
 						description={t`Average system-wide CPU utilization`}
 						cornerEl={maxValSelect}
 					>
@@ -631,7 +632,7 @@ export default function SystemDetail({ name }: { name: string }) {
 
 function ContainerFilterBar() {
 	const containerFilter = useStore($containerFilter)
-	const { _ } = useLingui()
+	const { t } = useLingui()
 
 	const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
 		$containerFilter.set(e.target.value)
@@ -639,7 +640,7 @@ function ContainerFilterBar() {
 
 	return (
 		<>
-			<Input placeholder={_(t`Filter...`)} className="ps-4 pe-8" value={containerFilter} onChange={handleChange} />
+			<Input placeholder={t`Filter...`} className="ps-4 pe-8" value={containerFilter} onChange={handleChange} />
 			{containerFilter && (
 				<Button
 					type="button"