update translations

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

@@ -1,4 +1,4 @@
-import { t } from "@lingui/core/macro"
+import { msg, t } from "@lingui/core/macro"
 import { Trans } from "@lingui/react/macro"
 import { useStore } from "@nanostores/react"
 import { getPagePath } from "@nanostores/router"
@@ -36,31 +36,28 @@ import { AppleIcon, DockerIcon, FreeBsdIcon, TuxIcon, WindowsIcon } from "./ui/i
 import { InputCopy } from "./ui/input-copy"
 
 export function AddSystemButton({ className }: { className?: string }) {
-    if (isReadOnlyUser()) {
-        return null
-    }
-    const [open, setOpen] = useState(false)
-    const opened = useRef(false)
-    if (open) {
-        opened.current = true
-    }
+	if (isReadOnlyUser()) {
+		return null
+	}
+	const [open, setOpen] = useState(false)
+	const opened = useRef(false)
+	if (open) {
+		opened.current = true
+	}
 
-    return (
-        <Dialog open={open} onOpenChange={setOpen}>
-            <DialogTrigger asChild>
-                <Button
-                    variant="outline"
-                    className={cn("flex gap-1 max-xs:h-[2.4rem]", className)}
-                >
-                    <PlusIcon className="h-4 w-4 -ms-1" />
-                    <Trans>
-                        Add <span className="hidden sm:inline">System</span>
-                    </Trans>
-                </Button>
-            </DialogTrigger>
-            {opened.current && <SystemDialog setOpen={setOpen} />}
-        </Dialog>
-    )
+	return (
+		<Dialog open={open} onOpenChange={setOpen}>
+			<DialogTrigger asChild>
+				<Button variant="outline" className={cn("flex gap-1 max-xs:h-[2.4rem]", className)}>
+					<PlusIcon className="h-4 w-4 -ms-1" />
+					<Trans>
+						Add <span className="hidden sm:inline">System</span>
+					</Trans>
+				</Button>
+			</DialogTrigger>
+			{opened.current && <SystemDialog setOpen={setOpen} />}
+		</Dialog>
+	)
 }
 
 /**
@@ -127,6 +124,8 @@ export const SystemDialog = ({ setOpen, system }: { setOpen: (open: boolean) =>
 		}
 	}
 
+	const systemTranslation = t`System`
+
 	return (
 		<DialogContent
 			className="w-[90%] sm:w-auto sm:ns-dialog max-w-full rounded-lg"
@@ -137,7 +136,11 @@ export const SystemDialog = ({ setOpen, system }: { setOpen: (open: boolean) =>
 			<Tabs defaultValue={tab} onValueChange={setTab}>
 				<DialogHeader>
 					<DialogTitle className="mb-1 pb-1 max-w-100 truncate pr-8">
-						{system ? `${t`Edit`} ${system?.name}` : <Trans>Add New System</Trans>}
+						{system ? (
+							<Trans>Edit {{ foo: systemTranslation }}</Trans>
+						) : (
+							<Trans>Add {{ foo: systemTranslation }}</Trans>
+						)}
 					</DialogTitle>
 					<TabsList className="grid w-full grid-cols-2">
 						<TabsTrigger value="docker">Docker</TabsTrigger>

internal/site/src/components/routes/settings/quiet-hours.tsx

@@ -24,7 +24,13 @@ import {
 	DialogTitle,
 	DialogTrigger,
 } from "@/components/ui/dialog"
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
@@ -36,13 +42,14 @@ import { $systems } from "@/lib/stores"
 import { formatShortDate } from "@/lib/utils"
 import type { QuietHoursRecord, SystemRecord } from "@/types"
 
+const quietHoursTranslation = t`Quiet Hours`
+
 export function QuietHours() {
 	const [data, setData] = useState<QuietHoursRecord[]>([])
 	const [dialogOpen, setDialogOpen] = useState(false)
 	const [editingRecord, setEditingRecord] = useState<QuietHoursRecord | null>(null)
 	const { toast } = useToast()
 	const systems = useStore($systems)
-
 	useEffect(() => {
 		let unsubscribe: (() => void) | undefined
 		const pbOptions = {
@@ -157,9 +164,7 @@ export function QuietHours() {
 		<>
 			<div className="grid grid-cols-1 sm:flex items-center justify-between gap-4 mb-3">
 				<div>
-					<h3 className="mb-1 text-lg font-medium">
-						<Trans>Quiet hours</Trans>
-					</h3>
+					<h3 className="mb-1 text-lg font-medium">{quietHoursTranslation}</h3>
 					<p className="text-sm text-muted-foreground leading-relaxed">
 						<Trans>
 							Schedule quiet hours where notifications will not be sent, such as during maintenance periods.
@@ -171,7 +176,7 @@ export function QuietHours() {
 						<Button variant="outline" className="h-10 shrink-0" onClick={() => setEditingRecord(null)}>
 							<PlusIcon className="size-4" />
 							<span className="ms-1">
-								<Trans>Add Quiet Hours</Trans>
+								<Trans>Add {{ foo: quietHoursTranslation }}</Trans>
 							</span>
 						</Button>
 					</DialogTrigger>
@@ -249,6 +254,7 @@ export function QuietHours() {
 													<PenSquareIcon className="me-2.5 size-4" />
 													<Trans>Edit</Trans>
 												</DropdownMenuItem>
+												<DropdownMenuSeparator />
 												<DropdownMenuItem onClick={() => handleDelete(record.id)}>
 													<Trash2Icon className="me-2.5 size-4" />
 													<Trans>Delete</Trans>
@@ -382,9 +388,15 @@ function QuietHoursDialog({
 	return (
 		<DialogContent>
 			<DialogHeader>
-				<DialogTitle>{editingRecord ? <Trans>Edit Quiet Hours</Trans> : <Trans>Add Quiet Hours</Trans>}</DialogTitle>
+				<DialogTitle>
+					{editingRecord ? (
+						<Trans>Edit {{ foo: quietHoursTranslation }}</Trans>
+					) : (
+						<Trans>Add {{ foo: quietHoursTranslation }}</Trans>
+					)}
+				</DialogTitle>
 				<DialogDescription>
-					<Trans>Configure quiet hours where notifications will not be sent.</Trans>
+					<Trans>Schedule quiet hours where notifications will not be sent.</Trans>
 				</DialogDescription>
 			</DialogHeader>
 			<form onSubmit={handleSubmit} className="space-y-4">
@@ -405,7 +417,7 @@ function QuietHoursDialog({
 							</Label>
 							<Select value={selectedSystem} onValueChange={setSelectedSystem}>
 								<SelectTrigger id="system">
-									<SelectValue placeholder={t`Select a system`} />
+									<SelectValue placeholder={t`Select ${{ foo: t`System`.toLocaleLowerCase() }}`} />
 								</SelectTrigger>
 								<SelectContent>
 									{systems.map((system) => (

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

@@ -329,41 +329,41 @@ export default function DisksTable({ systemId }: { systemId?: string }) {
 			? { fields: SMART_DEVICE_FIELDS, filter: pb.filter("system = {:system}", { system: systemId }) }
 			: { fields: SMART_DEVICE_FIELDS }
 
-		;(async () => {
-			try {
-				unsubscribe = await pb.collection("smart_devices").subscribe(
-					"*",
-					(event) => {
-						const record = event.record as SmartDeviceRecord
-						setSmartDevices((currentDevices) => {
-							const devices = currentDevices ?? []
-							const matchesSystemScope = !systemId || record.system === systemId
+			; (async () => {
+				try {
+					unsubscribe = await pb.collection("smart_devices").subscribe(
+						"*",
+						(event) => {
+							const record = event.record as SmartDeviceRecord
+							setSmartDevices((currentDevices) => {
+								const devices = currentDevices ?? []
+								const matchesSystemScope = !systemId || record.system === systemId
 
-							if (event.action === "delete") {
-								return devices.filter((device) => device.id !== record.id)
-							}
+								if (event.action === "delete") {
+									return devices.filter((device) => device.id !== record.id)
+								}
 
-							if (!matchesSystemScope) {
-								// Record moved out of scope; ensure it disappears locally.
-								return devices.filter((device) => device.id !== record.id)
-							}
+								if (!matchesSystemScope) {
+									// Record moved out of scope; ensure it disappears locally.
+									return devices.filter((device) => device.id !== record.id)
+								}
 
-							const existingIndex = devices.findIndex((device) => device.id === record.id)
-							if (existingIndex === -1) {
-								return [record, ...devices]
-							}
+								const existingIndex = devices.findIndex((device) => device.id === record.id)
+								if (existingIndex === -1) {
+									return [record, ...devices]
+								}
 
-							const next = [...devices]
-							next[existingIndex] = record
-							return next
-						})
-					},
-					pbOptions
-				)
-			} catch (error) {
-				console.error("Failed to subscribe to SMART device updates:", error)
-			}
-		})()
+								const next = [...devices]
+								next[existingIndex] = record
+								return next
+							})
+						},
+						pbOptions
+					)
+				} catch (error) {
+					console.error("Failed to subscribe to SMART device updates:", error)
+				}
+			})()
 
 		return () => {
 			unsubscribe?.()
@@ -680,7 +680,7 @@ function DiskSheet({
 								<span>{firmwareVersion}</span>
 							</TooltipTrigger>
 							<TooltipContent>
-								<Trans>Firmware Version</Trans>
+								<Trans>Firmware</Trans>
 							</TooltipContent>
 						</Tooltip>
 					</SheetDescription>