From 02825ed109eb4eec69be4bc37d96a3a3e431f178 Mon Sep 17 00:00:00 2001
From: Henry Dollman <hank@henrygd.me>
Date: Thu, 7 Nov 2024 13:11:58 -0500
Subject: [PATCH] add Polish and Croatian languages

---
 beszel/site/lingui.config.ts               |  2 +-
 beszel/site/src/components/add-system.tsx  | 48 ++++++++++------------
 beszel/site/src/components/lang-toggle.tsx |  2 +-
 beszel/site/src/lib/languages.ts           | 10 +++++
 4 files changed, 33 insertions(+), 29 deletions(-)

diff --git a/beszel/site/lingui.config.ts b/beszel/site/lingui.config.ts
index 0cf8a74..2cbed8a 100644
--- a/beszel/site/lingui.config.ts
+++ b/beszel/site/lingui.config.ts
@@ -1,7 +1,7 @@
 import type { LinguiConfig } from "@lingui/conf"
 
 const config: LinguiConfig = {
-	locales: ["en", "ar", "de", "es", "fr", "it", "ja", "ko", "pt", "tr", "ru", "uk", "vi", "zh-CN", "zh-HK"],
+	locales: ["en", "ar", "de", "es", "fr", "hr", "it", "ja", "ko", "pl", "pt", "tr", "ru", "uk", "vi", "zh-CN", "zh-HK"],
 	sourceLocale: "en",
 	compileNamespace: "ts",
 	catalogs: [
diff --git a/beszel/site/src/components/add-system.tsx b/beszel/site/src/components/add-system.tsx
index 2ee6dfe..a356d5a 100644
--- a/beszel/site/src/components/add-system.tsx
+++ b/beszel/site/src/components/add-system.tsx
@@ -36,7 +36,7 @@ export function AddSystemButton({ className }: { className?: string }) {
     volumes:
       - /var/run/docker.sock:/var/run/docker.sock:ro
       # monitor other disks / partitions by mounting a folder in /extra-filesystems
-      # - /mnt/disk1/.beszel:/extra-filesystems/disk1:ro
+      # - /mnt/disk/.beszel:/extra-filesystems/sda1:ro
     environment:
       PORT: ${port}
       KEY: "${publicKey}"`)
@@ -107,33 +107,27 @@ export function AddSystemButton({ className }: { className?: string }) {
 						</DialogDescription>
 					</TabsContent>
 					<form onSubmit={handleSubmit as any}>
-						<div className="grid gap-3 mt-1 mb-4">
-							<div className="grid grid-cols-4 items-center gap-4">
-								<Label htmlFor="name" className="text-end">
-									<Trans>Name</Trans>
-								</Label>
-								<Input id="name" name="name" className="col-span-3" required />
-							</div>
-							<div className="grid grid-cols-4 items-center gap-4">
-								<Label htmlFor="host" className="text-end">
-									<Trans>Host / IP</Trans>
-								</Label>
-								<Input id="host" name="host" className="col-span-3" required />
-							</div>
-							<div className="grid grid-cols-4 items-center gap-4">
-								<Label htmlFor="port" className="text-end">
-									<Trans>Port</Trans>
-								</Label>
-								<Input ref={port} name="port" id="port" defaultValue="45876" className="col-span-3" required />
-							</div>
-							<div className="grid grid-cols-4 items-center gap-4 relative">
-								<Label htmlFor="pkey" className="text-end whitespace-pre">
-									<Trans comment="Use 'Key' if your language requires many more characters">Public Key</Trans>
-								</Label>
-								<Input readOnly id="pkey" value={publicKey} className="col-span-3" required></Input>
+						<div className="grid xs:grid-cols-[auto_1fr] gap-y-3 gap-x-4 items-center mt-1 mb-4">
+							<Label htmlFor="name" className="xs:text-end">
+								<Trans>Name</Trans>
+							</Label>
+							<Input id="name" name="name" className="" required />
+							<Label htmlFor="host" className="xs:text-end">
+								<Trans>Host / IP</Trans>
+							</Label>
+							<Input id="host" name="host" className="" required />
+							<Label htmlFor="port" className="xs:text-end">
+								<Trans>Port</Trans>
+							</Label>
+							<Input ref={port} name="port" id="port" defaultValue="45876" className="" required />
+							<Label htmlFor="pkey" className="xs:text-end whitespace-pre">
+								<Trans comment="Use 'Key' if your language requires many more characters">Public Key</Trans>
+							</Label>
+							<div className="relative">
+								<Input readOnly id="pkey" value={publicKey} className="" required></Input>
 								<div
 									className={
-										"h-6 w-24 bg-gradient-to-r rtl:bg-gradient-to-l from-transparent to-background to-65% absolute end-1 pointer-events-none"
+										"h-6 w-24 bg-gradient-to-r rtl:bg-gradient-to-l from-transparent to-background to-65% absolute top-2 end-1 pointer-events-none"
 									}
 								></div>
 								<TooltipProvider delayDuration={100}>
@@ -142,7 +136,7 @@ export function AddSystemButton({ className }: { className?: string }) {
 											<Button
 												type="button"
 												variant={"link"}
-												className="absolute end-0"
+												className="absolute end-0 top-0"
 												onClick={() => copyToClipboard(publicKey)}
 											>
 												<Copy className="h-4 w-4 " />
diff --git a/beszel/site/src/components/lang-toggle.tsx b/beszel/site/src/components/lang-toggle.tsx
index c361c4e..1f30ffa 100644
--- a/beszel/site/src/components/lang-toggle.tsx
+++ b/beszel/site/src/components/lang-toggle.tsx
@@ -22,7 +22,7 @@ export function LangToggle() {
 				{languages.map(({ lang, label, e }) => (
 					<DropdownMenuItem
 						key={lang}
-						className={cn("px-3 flex gap-2.5", lang === i18n.locale && "font-semibold")}
+						className={cn("px-2.5 flex gap-2.5", lang === i18n.locale && "font-semibold")}
 						onClick={() => dynamicActivate(lang)}
 					>
 						<span>{e}</span> {label}
diff --git a/beszel/site/src/lib/languages.ts b/beszel/site/src/lib/languages.ts
index a6109a1..0f75f1d 100644
--- a/beszel/site/src/lib/languages.ts
+++ b/beszel/site/src/lib/languages.ts
@@ -24,6 +24,11 @@ export default [
 		label: "Français",
 		e: "🇫🇷",
 	},
+	{
+		lang: "hr",
+		label: "Hrvatski",
+		e: "🇭🇷",
+	},
 	{
 		lang: "it",
 		label: "Italiano",
@@ -39,6 +44,11 @@ export default [
 		label: "한국어",
 		e: "🇰🇷",
 	},
+	{
+		lang: "pl",
+		label: "Polski",
+		e: "🇵🇱",
+	},
 	{
 		lang: "pt",
 		label: "Português",