update translations

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

@@ -266,7 +266,13 @@ export const SystemDialog = ({ setOpen, system }: { setOpen: (open: boolean) =>
 							/>
 						</TabsContent>
 						{/* Save */}
-						<Button>{system ? <Trans>Save system</Trans> : <Trans>Add system</Trans>}</Button>
+						<Button>
+							{system ? (
+								<Trans>Save {{ foo: systemTranslation }}</Trans>
+							) : (
+								<Trans>Add {{ foo: systemTranslation }}</Trans>
+							)}
+						</Button>
 					</DialogFooter>
 				</form>
 			</Tabs>

internal/site/src/components/navbar.tsx

@@ -1,3 +1,4 @@
+import { t } from "@lingui/core/macro"
 import { Trans } from "@lingui/react/macro"
 import { getPagePath } from "@nanostores/router"
 import {
@@ -47,6 +48,8 @@ export default function Navbar() {
 
 	const AdminLinks = AdminDropdownGroup()
 
+	const systemTranslation = t`System`
+
 	return (
 		<div className="flex items-center h-14 md:h-16 bg-card px-4 pe-3 sm:px-6 border border-border/60 bt-0 rounded-md my-4">
 			<Suspense>
@@ -129,7 +132,7 @@ export default function Navbar() {
 								}}
 							>
 								<PlusIcon className="h-4 w-4 me-2.5" />
-								<Trans>Add System</Trans>
+								<Trans>Add {{ foo: systemTranslation }}</Trans>
 							</DropdownMenuItem>
 						</DropdownMenuGroup>
 						<DropdownMenuSeparator />
@@ -216,7 +219,7 @@ export default function Navbar() {
 				</DropdownMenu>
 				<Button variant="outline" className="flex gap-1 ms-2" onClick={() => setAddSystemDialogOpen(true)}>
 					<PlusIcon className="h-4 w-4 -ms-1" />
-					<Trans>Add System</Trans>
+					<Trans>Add {{ foo: systemTranslation }}</Trans>
 				</Button>
 			</div>
 		</div>

internal/site/src/components/routes/system/info-bar.tsx

@@ -205,7 +205,7 @@ export default function InfoBar({
 					<DropdownMenu>
 						<DropdownMenuTrigger asChild>
 							<Button
-								aria-label={t`View options`}
+								aria-label={t`Settings`}
 								variant="outline"
 								size="icon"
 								className="hidden xl:flex p-0 text-primary"
@@ -215,7 +215,7 @@ export default function InfoBar({
 						</DropdownMenuTrigger>
 						<DropdownMenuContent align="end" className="min-w-44">
 							<DropdownMenuLabel className="px-3.5">
-								<Trans>Display</Trans>
+								<Trans context="Layout display options">Display</Trans>
 							</DropdownMenuLabel>
 							<DropdownMenuSeparator />
 							<DropdownMenuRadioGroup
@@ -224,10 +224,10 @@ export default function InfoBar({
 								onValueChange={(v) => setDisplayMode(v as "default" | "tabs")}
 							>
 								<DropdownMenuRadioItem value="default" onSelect={(e) => e.preventDefault()}>
-									<Trans>Default</Trans>
+									<Trans context="Default system layout option">Default</Trans>
 								</DropdownMenuRadioItem>
 								<DropdownMenuRadioItem value="tabs" onSelect={(e) => e.preventDefault()}>
-									<Trans>Tabs</Trans>
+									<Trans context="Tabs system layout option">Tabs</Trans>
 								</DropdownMenuRadioItem>
 							</DropdownMenuRadioGroup>
 							<DropdownMenuSeparator />

internal/site/src/components/routes/system/smart-table.tsx

@@ -146,7 +146,9 @@ export const createColumns = (
 	{
 		accessorKey: "model",
 		sortingFn: (a, b) => a.original.model.localeCompare(b.original.model),
-		header: ({ column }) => <HeaderButton column={column} name={t`Model`} Icon={Box} />,
+		header: ({ column }) => (
+			<HeaderButton column={column} name={t({ message: "Model", comment: "Device model" })} Icon={Box} />
+		),
 		cell: ({ getValue }) => (
 			<div
 				className="max-w-48 truncate ms-1"