diff --git a/beszel/site/lingui.config.ts b/beszel/site/lingui.config.ts index 4a7f202..7198e2e 100644 --- a/beszel/site/lingui.config.ts +++ b/beszel/site/lingui.config.ts @@ -1,6 +1,6 @@ -import type { LinguiConfig } from "@lingui/conf" +import { defineConfig } from "@lingui/cli" -const config: LinguiConfig = { +export default defineConfig({ locales: [ "en", "ar", @@ -39,6 +39,4 @@ const config: LinguiConfig = { include: ["src"], }, ], -} - -export default config +}) diff --git a/beszel/site/src/components/add-system.tsx b/beszel/site/src/components/add-system.tsx index 411280d..0e33b56 100644 --- a/beszel/site/src/components/add-system.tsx +++ b/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" diff --git a/beszel/site/src/components/alerts/alert-button.tsx b/beszel/site/src/components/alerts/alert-button.tsx index 93a5944..47c5e92 100644 --- a/beszel/site/src/components/alerts/alert-button.tsx +++ b/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) diff --git a/beszel/site/src/components/alerts/alerts-system.tsx b/beszel/site/src/components/alerts/alerts-system.tsx index be65796..a9189bb 100644 --- a/beszel/site/src/components/alerts/alerts-system.tsx +++ b/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 { diff --git a/beszel/site/src/components/charts/area-chart.tsx b/beszel/site/src/components/charts/area-chart.tsx index b7b13de..8bdeeca 100644 --- a/beszel/site/src/components/charts/area-chart.tsx +++ b/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] diff --git a/beszel/site/src/components/charts/disk-chart.tsx b/beszel/site/src/components/charts/disk-chart.tsx index 3617811..1db5f72 100644 --- a/beszel/site/src/components/charts/disk-chart.tsx +++ b/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({ /> )} - {passwordEnabled && ( +
+ {passwordEnabled && ( <>
setErrors({})}>
@@ -241,21 +242,20 @@ export function UserAuthForm({ {(isFirstRun || oauthEnabled) && ( // only show 'continue with' during onboarding or if we have auth providers -
-
+ (
+
-
+
Or continue with
-
+
) )} )} - - {oauthEnabled && ( + {oauthEnabled && (
{authMethods.oauth2.providers.map((provider) => ( - + OAuth 2 / OIDC support @@ -319,10 +318,9 @@ export function UserAuthForm({

- + ) )} - - {passwordEnabled && !isFirstRun && ( + {passwordEnabled && !isFirstRun && ( Forgot password? )} -
- ) +
+ ); } diff --git a/beszel/site/src/components/login/forgot-pass-form.tsx b/beszel/site/src/components/login/forgot-pass-form.tsx index 57b397b..a4ea52d 100644 --- a/beszel/site/src/components/login/forgot-pass-form.tsx +++ b/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({ diff --git a/beszel/site/src/components/login/login.tsx b/beszel/site/src/components/login/login.tsx index 296a925..d4c25fb 100644 --- a/beszel/site/src/components/login/login.tsx +++ b/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 () { diff --git a/beszel/site/src/components/mode-toggle.tsx b/beszel/site/src/components/mode-toggle.tsx index b39b55b..76f05d9 100644 --- a/beszel/site/src/components/mode-toggle.tsx +++ b/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() diff --git a/beszel/site/src/components/navbar.tsx b/beszel/site/src/components/navbar.tsx index 89ae1c5..747946a 100644 --- a/beszel/site/src/components/navbar.tsx +++ b/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")) diff --git a/beszel/site/src/components/routes/settings/config-yaml.tsx b/beszel/site/src/components/routes/settings/config-yaml.tsx index 8c31223..682c017 100644 --- a/beszel/site/src/components/routes/settings/config-yaml.tsx +++ b/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("") diff --git a/beszel/site/src/components/routes/settings/general.tsx b/beszel/site/src/components/routes/settings/general.tsx index ce81823..e498172 100644 --- a/beszel/site/src/components/routes/settings/general.tsx +++ b/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 }) { diff --git a/beszel/site/src/components/routes/settings/layout.tsx b/beszel/site/src/components/routes/settings/layout.tsx index a23ff19..9236500 100644 --- a/beszel/site/src/components/routes/settings/layout.tsx +++ b/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) { try { @@ -44,11 +45,11 @@ export async function saveSettings(newSettings: Partial) { } 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, }, diff --git a/beszel/site/src/components/routes/settings/notifications.tsx b/beszel/site/src/components/routes/settings/notifications.tsx index 183b3d1..6bc7ed2 100644 --- a/beszel/site/src/components/routes/settings/notifications.tsx +++ b/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 { diff --git a/beszel/site/src/components/routes/system.tsx b/beszel/site/src/components/routes/system.tsx index 27aa66f..6d4e534 100644 --- a/beszel/site/src/components/routes/system.tsx +++ b/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 }) { @@ -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) => { $containerFilter.set(e.target.value) @@ -639,7 +640,7 @@ function ContainerFilterBar() { return ( <> - + {containerFilter && (