i18n

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

@@ -10,8 +10,11 @@ import { useState } from 'react'
 import { Textarea } from '@/components/ui/textarea'
 import { toast } from '@/components/ui/use-toast'
 import clsx from 'clsx'
+import { useTranslation } from 'react-i18next'
 
 export default function ConfigYaml() {
+	const { t } = useTranslation()
+
 	const [configContent, setConfigContent] = useState<string>('')
 	const [isLoading, setIsLoading] = useState(false)
 
@@ -40,30 +43,27 @@ export default function ConfigYaml() {
 	return (
 		<div>
 			<div>
-				<h3 className="text-xl font-medium mb-2">YAML Configuration</h3>
+				<h3 className="text-xl font-medium mb-2">{t('settings.yaml_config.title')}</h3>
 				<p className="text-sm text-muted-foreground leading-relaxed">
-					Export your current systems configuration.
+					{t('settings.yaml_config.subtitle')}
 				</p>
 			</div>
 			<Separator className="my-4" />
 			<div className="space-y-2">
 				<div className="mb-4">
 					<p className="text-sm text-muted-foreground leading-relaxed my-1">
-						Systems may be managed in a{' '}
-						<code className="bg-muted rounded-sm px-1 text-primary">config.yml</code> file inside
-						your data directory.
+						{t('settings.yaml_config.des_1')}{' '}
+						<code className="bg-muted rounded-sm px-1 text-primary">config.yml</code> {t('settings.yaml_config.des_2')}
 					</p>
 					<p className="text-sm text-muted-foreground leading-relaxed">
-						On each restart, systems in the database will be updated to match the systems defined in
-						the file.
+						{t('settings.yaml_config.des_3')}
 					</p>
 					<Alert className="my-4 border-destructive text-destructive w-auto table md:pr-6">
 						<AlertCircleIcon className="h-4 w-4 stroke-destructive" />
-						<AlertTitle>Caution - potential data loss</AlertTitle>
+						<AlertTitle>{t('settings.yaml_config.alert.title')}</AlertTitle>
 						<AlertDescription>
 							<p>
-								Existing systems not defined in <code>config.yml</code> will be deleted. Please make
-								regular backups.
+								{t('settings.yaml_config.alert.des_1')} <code>config.yml</code> {t('settings.yaml_config.alert.des_2')}
 							</p>
 						</AlertDescription>
 					</Alert>
@@ -86,7 +86,7 @@ export default function ConfigYaml() {
 				disabled={isLoading}
 			>
 				<ButtonIcon className={clsx('h-4 w-4 mr-0.5', isLoading && 'animate-spin')} />
-				Export configuration
+				{t('settings.export_configuration')}
 			</Button>
 		</div>
 	)

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

@@ -61,7 +61,7 @@ export default function SettingsLayout() {
 
 	if (isAdmin()) {
 		sidebarNavItems.push({
-			title: 'YAML Config',
+			title: t('settings.yaml_config.short_title'),
 			href: '/settings/config',
 			icon: FileSlidersIcon,
 		})

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

@@ -85,38 +85,42 @@ const SettingsNotificationsPage = ({ userSettings }: { userSettings: UserSetting
 			<div className="space-y-5">
 				<div className="space-y-2">
 					<div className="mb-4">
-						<h3 className="mb-1 text-lg font-medium">Email notifications</h3>
+						<h3 className="mb-1 text-lg font-medium">
+							{t('settings.notifications.email.title')}
+						</h3>
 						{isAdmin() && (
 							<p className="text-sm text-muted-foreground leading-relaxed">
-								Please{' '}
+								{t('settings.notifications.email.please')}{' '}
 								<a href="/_/#/settings/mail" className="link" target="_blank">
-									configure an SMTP server
+									{t('settings.notifications.email.configure_an_SMTP_server')}
 								</a>{' '}
-								to ensure alerts are delivered.{' '}
+								{t('settings.notifications.email.to_ensure_alerts_are_delivered')}{' '}
 							</p>
 						)}
 					</div>
 					<Label className="block" htmlFor="email">
-						To email(s)
+						{t('settings.notifications.email.to_email_s')}
 					</Label>
 					<InputTags
 						value={emails}
 						onChange={setEmails}
-						placeholder="Enter email address..."
+						placeholder={t('settings.notifications.email.enter_email_address')}
 						className="w-full"
 						type="email"
 						id="email"
 					/>
 					<p className="text-[0.8rem] text-muted-foreground">
-						Save address using enter key or comma. Leave blank to disable email notifications.
+						{t('settings.notifications.email.des')}
 					</p>
 				</div>
 				<Separator />
 				<div className="space-y-3">
 					<div>
-						<h3 className="mb-1 text-lg font-medium">Webhook / Push notifications</h3>
+						<h3 className="mb-1 text-lg font-medium">
+							{t('settings.notifications.webhook_push.title')}
+						</h3>
 						<p className="text-sm text-muted-foreground leading-relaxed">
-							Beszel uses{' '}
+							{t('settings.notifications.webhook_push.des_1')}{' '}
 							<a
 								href="https://containrrr.dev/shoutrrr/services/overview/"
 								target="_blank"
@@ -124,7 +128,7 @@ const SettingsNotificationsPage = ({ userSettings }: { userSettings: UserSetting
 							>
 								Shoutrrr
 							</a>{' '}
-							to integrate with popular notification services.
+							{t('settings.notifications.webhook_push.des_2')}
 						</p>
 					</div>
 					{webhooks.length > 0 && (
@@ -149,7 +153,7 @@ const SettingsNotificationsPage = ({ userSettings }: { userSettings: UserSetting
 						onClick={addWebhook}
 					>
 						<PlusIcon className="h-4 w-4 -ml-0.5" />
-						Add URL
+						{t('settings.notifications.webhook_push.add_url')}
 					</Button>
 				</div>
 				<Separator />