Feat/add missing translations

app/components/device-detail/device-detail-box.tsx

@@ -1,5 +1,6 @@
 import clsx from 'clsx'
 import { format, formatDistanceToNow } from 'date-fns'
+import { de, enUS } from 'date-fns/locale'
 import {
 	ChevronUp,
 	Minus,
@@ -94,7 +95,8 @@ export default function DeviceDetailBox() {
 	const navigate = useNavigate()
 	const matches = useMatches()
 	const { toast } = useToast()
-	const { t } = useTranslation('device-detail-box')
+	const { t, i18n } = useTranslation('device-detail-box')
+	const dateLocale = i18n.language.startsWith('de') ? de : enUS
 
 	const sensorIds = new Set()
 
@@ -267,7 +269,7 @@ export default function DeviceDetailBox() {
 													href={getArchiveLink(data.device)}
 													target="_blank"
 													rel="noopener noreferrer"
-													title="Open archive"
+													title={t('open_archive')}
 													className="w-full cursor-pointer"
 												>
 													{t('open_archive')}
@@ -281,7 +283,7 @@ export default function DeviceDetailBox() {
 													href={data.device.link || '#'}
 													target="_blank"
 													rel="noopener noreferrer"
-													title="Open external link"
+													title={t('open_external_link')}
 													className="w-full cursor-pointer"
 												>
 													{t('open_external_link')}
@@ -311,7 +313,7 @@ export default function DeviceDetailBox() {
 										{data.deviceImageUrl ? (
 											<img
 												className="w-full rounded-lg object-cover"
-												alt="device_image"
+												alt={t('device_image')}
 												src={data.deviceImageUrl}
 											/>
 										) : (
@@ -323,33 +325,45 @@ export default function DeviceDetailBox() {
 									<div className="space-y-2 sm:w-1/2">
 										<InfoItem
 											icon={LandPlot}
-											title="Exposure"
-											text={data.device.exposure || 'Unknown'}
+											title={t('exposure')}
+											text={
+												data.device.exposure
+													? t(`exposure_values.${data.device.exposure}`, {
+															defaultValue: data.device.exposure,
+														})
+													: t('unknown')
+											}
 										/>
 										<InfoItem
 											icon={Cpu}
-											title="Sensor Model"
-											text={data.device.sensorWikiModel || 'Unknown'}
+											title={t('sensor_model')}
+											text={data.device.sensorWikiModel || t('unknown')}
 										/>
 										<Separator className="my-2" />
 										<InfoItem
 											icon={Rss}
-											title="Last Updated"
-											text={format(new Date(data.device.updatedAt), 'PPP')}
+											title={t('last_updated')}
+											text={format(new Date(data.device.updatedAt), 'PPP', {
+												locale: dateLocale,
+											})}
 										/>
 										<Separator className="my-2" />
 										<InfoItem
 											icon={CalendarPlus}
-											title="Created At"
-											text={format(new Date(data.device.createdAt), 'PPP')}
+											title={t('created_at')}
+											text={format(new Date(data.device.createdAt), 'PPP', {
+												locale: dateLocale,
+											})}
 										/>
 										{data.device.expiresAt && (
 											<>
 												<Separator className="my-2" />
 												<InfoItem
 													icon={CalendarPlus}
-													title="Expires At"
-													text={format(new Date(data.device.expiresAt), 'PPP')}
+													title={t('expires_at')}
+													text={format(new Date(data.device.expiresAt), 'PPP', {
+														locale: dateLocale,
+													})}
 												/>
 											</>
 										)}
@@ -359,7 +373,7 @@ export default function DeviceDetailBox() {
 									<div className="pt-4">
 										<div className="space-y-2">
 											<div className="text-muted-foreground text-sm font-medium">
-												Tags
+												{t('tags')}
 											</div>
 											<div className="flex items-center space-x-2">
 												<Hash className="text-muted-foreground h-4 w-4 shrink-0" />
@@ -486,10 +500,10 @@ export default function DeviceDetailBox() {
 																			className="flex h-full flex-col"
 																			onClick={() =>
 																				toast({
-																					title:
-																						'Cant select more than 2 sensors',
-																					description:
-																						'Deselect one sensor to select another',
+																					title: t('sensor_limit_title'),
+																					description: t(
+																						'sensor_limit_description',
+																					),
 																					variant: 'destructive',
 																				})
 																			}
@@ -550,8 +564,17 @@ export default function DeviceDetailBox() {
 																						></div>
 																						<p className="text-muted-foreground text-xs">
 																							{sensor.lastMeasurement
-																								? `${formatDistanceToNow(new Date(sensor.lastMeasurement.createdAt), { addSuffix: true })}`
-																								: 'No recent data'}
+																								? formatDistanceToNow(
+																										new Date(
+																											sensor.lastMeasurement
+																												.createdAt,
+																										),
+																										{
+																											addSuffix: true,
+																											locale: dateLocale,
+																										},
+																									)
+																								: t('no_recent_data')}
 																						</p>
 																					</div>
 																				</CardFooter>
@@ -628,8 +651,17 @@ export default function DeviceDetailBox() {
 																						></div>
 																						<p className="text-muted-foreground text-xs">
 																							{sensor.lastMeasurement
-																								? `${formatDistanceToNow(new Date(sensor.lastMeasurement.createdAt), { addSuffix: true })}`
-																								: 'No recent data'}
+																								? formatDistanceToNow(
+																										new Date(
+																											sensor.lastMeasurement
+																												.createdAt,
+																										),
+																										{
+																											addSuffix: true,
+																											locale: dateLocale,
+																										},
+																									)
+																								: t('no_recent_data')}
 																						</p>
 																					</div>
 																				</CardFooter>

app/components/device-detail/entry-logs.tsx

@@ -1,6 +1,7 @@
 import { useMediaQuery } from '@mantine/hooks'
 import { Activity, Clock, ExternalLink } from 'lucide-react'
 import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { Button } from '../ui/button'
 import {
 	Dialog,
@@ -37,11 +38,12 @@ export default function EntryLogs({
 }) {
 	const [open, setOpen] = useState(false)
 	const isDesktop = useMediaQuery('(min-width: 768px)')
+	const { t, i18n } = useTranslation('device-detail-box')
 
 	if (isDesktop) {
 		return (
 			<div className="flex flex-col">
-				<p className="pb-4 font-bold">Logs</p>
+				<p className="pb-4 font-bold">{t('logs')}</p>
 				<div className="flex items-center">
 					<div className="flex w-full items-start space-x-4">
 						<div className="border-muted-foreground text-muted-foreground flex h-10 w-10 shrink-0 items-center justify-center rounded-full border-4">
@@ -53,7 +55,7 @@ export default function EntryLogs({
 							</p>
 							<div className="text-muted-foreground flex items-center text-xs">
 								<Clock className="mr-1 h-3 w-3" />
-								{new Date(entryLogs[0].createdAt).toLocaleString()}
+								{new Date(entryLogs[0].createdAt).toLocaleString(i18n.language)}
 							</div>
 						</div>
 					</div>
@@ -68,21 +70,18 @@ export default function EntryLogs({
 												<ExternalLink className="ml-2 h-5 w-5" />
 											</TooltipTrigger>
 											<TooltipContent className="z-auto overflow-visible">
-												<p>Show all logs.</p>
+												<p>{t('show_all_logs')}</p>
 											</TooltipContent>
 										</Tooltip>
 									</TooltipProvider>
 								</Button>
 							</DialogTrigger>
 							<DialogContent className="sm:max-w-2/3">
 								<DialogHeader>
-									<DialogTitle>Device Logs</DialogTitle>
-									<DialogDescription>
-										If this is your device, you can make changes in your device
-										settings.
-									</DialogDescription>
+									<DialogTitle>{t('device_logs')}</DialogTitle>
+									<DialogDescription>{t('logs_owner_hint')}</DialogDescription>
 								</DialogHeader>
-								<LogList entryLogs={entryLogs} />
+								<LogList entryLogs={entryLogs} locale={i18n.language} />
 							</DialogContent>
 						</Dialog>
 					</div>
@@ -93,7 +92,7 @@ export default function EntryLogs({
 
 	return (
 		<div className="flex flex-col">
-			<p className="pb-4 font-bold">Logs</p>
+			<p className="pb-4 font-bold">{t('logs')}</p>
 			<div className="flex items-center">
 				<div className="flex w-full items-start space-x-4">
 					<div className="bg-primary flex h-10 w-10 shrink-0 items-center justify-center rounded-full">
@@ -103,7 +102,7 @@ export default function EntryLogs({
 						<p className="mb-2 text-sm font-medium">{entryLogs[0].content}</p>
 						<div className="text-muted-foreground flex items-center text-xs">
 							<Clock className="mr-1 h-3 w-3" />
-							{new Date(entryLogs[0].createdAt).toLocaleString()}
+							{new Date(entryLogs[0].createdAt).toLocaleString(i18n.language)}
 						</div>
 					</div>
 				</div>
@@ -116,16 +115,13 @@ export default function EntryLogs({
 					</DrawerTrigger>
 					<DrawerContent>
 						<DrawerHeader className="text-left">
-							<DrawerTitle>Device Logs</DrawerTitle>
-							<DrawerDescription>
-								If this is your device, you can make changes in your device
-								settings.
-							</DrawerDescription>
+							<DrawerTitle>{t('device_logs')}</DrawerTitle>
+							<DrawerDescription>{t('logs_owner_hint')}</DrawerDescription>
 						</DrawerHeader>
-						<LogList entryLogs={entryLogs} />
+						<LogList entryLogs={entryLogs} locale={i18n.language} />
 						<DrawerFooter className="pt-2">
 							<DrawerClose asChild>
-								<Button variant="outline">Close</Button>
+								<Button variant="outline">{t('close')}</Button>
 							</DrawerClose>
 						</DrawerFooter>
 					</DrawerContent>
@@ -135,9 +131,15 @@ export default function EntryLogs({
 	)
 }
 
-function LogList({ entryLogs = [] }: { entryLogs: LogEntry[] }) {
+function LogList({
+	entryLogs = [],
+	locale,
+}: {
+	entryLogs: LogEntry[]
+	locale: string
+}) {
 	return (
-		<ScrollArea className="h-[300px] w-full rounded-md border p-4">
+		<ScrollArea className="h-75 w-full rounded-md border p-4">
 			<div className="space-y-4 pr-4">
 				{entryLogs.map((log, index) => (
 					<div key={log.id} className="relative flex items-start space-x-4">
@@ -149,7 +151,7 @@ function LogList({ entryLogs = [] }: { entryLogs: LogEntry[] }) {
 								<p className="mb-2 text-sm font-medium">{log.content}</p>
 								<div className="text-muted-foreground flex items-center text-xs">
 									<Clock className="mr-1 h-3 w-3" />
-									{new Date(log.createdAt).toLocaleString()}
+									{new Date(log.createdAt).toLocaleString(locale)}
 								</div>
 							</Card>
 						</div>

app/components/device-detail/share-link.tsx

@@ -1,10 +1,12 @@
 import { Copy, Link } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
 import { Button } from '../ui/button'
 import { Input } from '../ui/input'
 import { useToast } from '@/components/ui/use-toast'
 
 export default function ShareLink() {
 	const { toast } = useToast()
+	const { t } = useTranslation('device-detail-box')
 
 	return (
 		<div className="my-4">
@@ -84,14 +86,14 @@ export default function ShareLink() {
 					onClick={() => {
 						void navigator.clipboard.writeText(window.location.href)
 						toast({
-							title: 'Copied to clipboard',
-							description: 'Go ahead and share your link! 🎉',
+							title: t('copied_to_clipboard'),
+							description: t('share_link_hint'),
 						})
 					}}
 					className="bg-primary text-primary-foreground inline-flex h-9 transform items-center justify-center rounded-md px-2 py-2 text-sm font-medium shadow-sm transition-transform active:scale-75"
 				>
 					<Copy className="mr-2 h-5 w-5" />
-					Copy
+					{t('copy')}
 				</Button>
 			</div>
 		</div>

app/components/mydevices/dt/columns.tsx

@@ -107,6 +107,10 @@ export function getColumns(
 					</Button>
 				)
 			},
+			cell: ({ row }) => {
+				const exposure = row.original.exposure
+				return <div>{t(`exposure_values.${exposure}`)}</div>
+			},
 		},
 		/* {
     accessorKey: "model",
@@ -202,7 +206,6 @@ export function getColumns(
 									</DropdownMenuItem>
 								)}
 								<DropdownMenuItem
-									asChild
 									onClick={() => navigator.clipboard.writeText(device.id)}
 									className="cursor-pointer"
 								>

app/components/rjsf/arrayFieldTemplate.tsx

@@ -1,9 +1,11 @@
 import { type ArrayFieldTemplateProps } from '@rjsf/utils'
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 import { Button } from '~/components/ui/button'
 import { Card, CardContent } from '~/components/ui/card'
 
 export function ArrayFieldTemplate(props: ArrayFieldTemplateProps) {
+	const { t } = useTranslation('ui-components')
 	const { items, canAdd, onAddClick } = props
 
 	const renderedItems = React.Children.toArray(items)
@@ -18,7 +20,7 @@ export function ArrayFieldTemplate(props: ArrayFieldTemplateProps) {
 
 			{canAdd && (
 				<Button type="button" variant="outline" onClick={onAddClick}>
-					Add item
+					{t('array_field.add_item')}
 				</Button>
 			)}
 		</div>