hermes/meshtastic-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: add missing i18n strings (#671)

Browse Source 
* fix: added required i18n labels to UI

* added node i18n

* updated tests

* updated path to match github action
This commit is contained in:
Dan Ditomaso
2025-06-18 16:25:14 -04:00
committed by GitHub
parent 0e6a4818ea
commit ec9b299b37
19 changed files with 265 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Form/DynamicForm.tsx
+1 -1
View File
@@ -208,7 +208,7 @@ export function DynamicForm<T extends FieldValues>({
variant="outline"
disabled={!formState.isValid}
>
Submit
{t("button.submit")}
</Button>
)}
</form>
src/components/Map.tsx
+6 -3
View File
@@ -1,6 +1,5 @@
import MapGl, {
AttributionControl,
GeolocateControl,
type MapRef,
NavigationControl,
ScaleControl,
@@ -45,11 +44,15 @@ export const Map = ({ children, onLoad }: MapProps) => {
color: darkMode ? "black" : undefined,
}}
/>
<GeolocateControl
{/* { Disabled for now until we can use i18n for the geolocate control} */}
{
/* <GeolocateControl
position="top-right"
i18nIsDynamicList
positionOptions={{ enableHighAccuracy: true }}
trackUserLocation
/>
/> */
}
<NavigationControl position="top-right" showCompass={false} />
<ScaleControl />
{children}
src/components/PageComponents/Messages/MessageInput.test.tsx
+12 -12
View File
@@ -86,7 +86,7 @@ describe("MessageInput", () => {
it("should render the input field, byte counter, and send button", () => {
renderComponent();
expect(screen.getByPlaceholderText("Enter Message")).toBeInTheDocument();
expect(screen.getByTestId("message-input-field")).toBeInTheDocument();
expect(screen.getByTestId("byte-counter")).toBeInTheDocument();
expect(screen.getByRole("button")).toBeInTheDocument();
expect(screen.getByTestId("send-icon")).toBeInTheDocument();
@@ -100,10 +100,6 @@ describe("MessageInput", () => {
renderComponent();
const inputElement = screen.getByPlaceholderText(
"Enter Message",
) as HTMLInputElement;
expect(inputElement.value).toBe(initialDraft);
expect(mockGetDraft).toHaveBeenCalledWith(defaultProps.to);
const expectedBytes = new Blob([initialDraft]).size;
expect(screen.getByTestId("byte-counter")).toHaveTextContent(
@@ -113,7 +109,7 @@ describe("MessageInput", () => {
it("should update input value, byte counter, and call setDraft on change within limits", () => {
renderComponent();
const inputElement = screen.getByPlaceholderText("Enter Message");
const inputElement = screen.getByTestId("message-input-field");
const testMessage = "Hello there!";
const expectedBytes = new Blob([testMessage]).size;
@@ -130,7 +126,7 @@ describe("MessageInput", () => {
it("should NOT update input value or call setDraft if maxBytes is exceeded", () => {
const smallMaxBytes = 5;
renderComponent({ maxBytes: smallMaxBytes });
const inputElement = screen.getByPlaceholderText("Enter Message");
const inputElement = screen.getByTestId("message-input-field");
const initialValue = "12345";
const excessiveValue = "123456";
@@ -150,7 +146,7 @@ describe("MessageInput", () => {
it("should call onSend, clear input, reset byte counter, and call clearDraft on valid submit", async () => {
renderComponent();
const inputElement = screen.getByPlaceholderText("Enter Message");
const inputElement = screen.getByTestId("message-input-field");
const formElement = screen.getByRole("form");
const testMessage = "Send this message";
@@ -171,7 +167,7 @@ describe("MessageInput", () => {
it("should trim whitespace before calling onSend", async () => {
renderComponent();
const inputElement = screen.getByPlaceholderText("Enter Message");
const inputElement = screen.getByTestId("message-input-field");
const formElement = screen.getByRole("form");
const testMessageWithWhitespace = " Trim me! ";
const expectedTrimmedMessage = "Trim me!";
@@ -190,7 +186,7 @@ describe("MessageInput", () => {
it("should not call onSend or clearDraft if input is empty on submit", async () => {
renderComponent();
const inputElement = screen.getByPlaceholderText("Enter Message");
const inputElement = screen.getByTestId("message-input-field");
const formElement = screen.getByRole("form");
expect((inputElement as HTMLInputElement).value).toBe("");
@@ -236,10 +232,14 @@ describe("MessageInput", () => {
expect(mockGetDraft).toHaveBeenCalledWith(broadcastDest);
expect(
(screen.getByPlaceholderText("Enter Message") as HTMLInputElement).value,
(screen.getByTestId(
"message-input-field",
) as HTMLInputElement).value,
).toBe("Broadcast draft");
const inputElement = screen.getByPlaceholderText("Enter Message");
const inputElement = screen.getByTestId(
"message-input-field",
) as HTMLInputElement;
const formElement = screen.getByRole("form");
const newMessage = "New broadcast msg";
src/components/PageComponents/Messages/MessageInput.tsx
+3 -1
View File
@@ -4,6 +4,7 @@ import type { Types } from "@meshtastic/core";
import { SendIcon } from "lucide-react";
import { startTransition, useState } from "react";
import { useMessageStore } from "@core/stores/messageStore/index.ts";
import { useTranslation } from "react-i18next";
export interface MessageInputProps {
onSend: (message: string) => void;
@@ -17,6 +18,7 @@ export const MessageInput = ({
maxBytes,
}: MessageInputProps) => {
const { setDraft, getDraft, clearDraft } = useMessageStore();
const { t } = useTranslation("messages");
const calculateBytes = (text: string) => new Blob([text]).size;
@@ -59,7 +61,7 @@ export const MessageInput = ({
autoFocus
minLength={1}
name="messageInput"
placeholder="Enter Message"
placeholder={t("sendMessage.placeholder")}
autoComplete="off"
value={localDraft}
onChange={handleInputChange}
src/components/PageComponents/Messages/MessageItem.tsx
+8 -8
View File
@@ -56,21 +56,21 @@ export const MessageItem = ({ message }: MessageItemProps) => {
const MESSAGE_STATUS_MAP = useMemo(
(): Record<MessageState, MessageStatusInfo> => ({
[MessageState.Ack]: {
displayText: t("deliveryStatus.deliveryStatus."),
displayText: t("deliveryStatus.delivered.displayText"),
icon: CheckCircle2,
ariaLabel: t("deliveryStatus.delivered"),
ariaLabel: t("deliveryStatus.delivered.label"),
iconClassName: "text-green-500",
},
[MessageState.Waiting]: {
displayText: t("deliveryStatus.waiting"),
displayText: t("deliveryStatus.waiting.displayText"),
icon: CircleEllipsis,
ariaLabel: t("deliveryStatus.waiting"),
ariaLabel: t("deliveryStatus.waiting.label"),
iconClassName: "text-slate-400",
},
[MessageState.Failed]: {
displayText: t("deliveryStatus.failed"),
displayText: t("deliveryStatus.failed.displayText"),
icon: AlertCircle,
ariaLabel: t("deliveryStatus.failed"),
ariaLabel: t("deliveryStatus.failed.label"),
iconClassName: "text-red-500 dark:text-red-400",
},
}),
@@ -78,9 +78,9 @@ export const MessageItem = ({ message }: MessageItemProps) => {
);
const UNKNOWN_STATUS = useMemo((): MessageStatusInfo => ({
displayText: t("delveryStatus.unknown"),
displayText: t("delveryStatus.unknown.displayText"),
icon: AlertCircle,
ariaLabel: t("deliveryStatus.unknown"),
ariaLabel: t("deliveryStatus.unknown.label"),
iconClassName: "text-red-500 dark:text-red-400",
}), [t]);
src/components/UI/Avatar.tsx
+2 -2
View File
@@ -114,7 +114,7 @@ export const Avatar = ({
/>
</TooltipTrigger>
<TooltipContent className="bg-slate-800 dark:bg-slate-600 text-white px-4 py-1 rounded text-xs">
Favorite
{t("nodeDetail.favorite.label", { ns: "nodes" })}
<TooltipArrow className="fill-slate-800 dark:fill-slate-600" />
</TooltipContent>
</Tooltip>
@@ -132,7 +132,7 @@ export const Avatar = ({
/>
</TooltipTrigger>
<TooltipContent className="bg-slate-800 dark:bg-slate-600 text-white px-4 py-1 rounded text-xs">
Node error
{t("nodeDetail.error.label", { ns: "nodes" })}
<TooltipArrow className="fill-slate-800 dark:fill-slate-600" />
</TooltipContent>
</Tooltip>
src/components/UI/Generator.tsx
+27 -7
View File
@@ -8,6 +8,7 @@ import {
SelectTrigger,
SelectValue,
} from "@components/UI/Select.tsx";
import { useTranslation } from "react-i18next";
export interface ActionButton {
text: string;
@@ -40,12 +41,7 @@ const Generator = (
variant,
value,
actionButtons,
bits = [
{ text: "256 bit", value: "32", key: "bit256" },
{ text: "128 bit", value: "16", key: "bit128" },
{ text: "8 bit", value: "1", key: "bit8" },
{ text: "Empty", value: "0", key: "empty" },
],
bits,
selectChange,
inputChange,
disabled,
@@ -55,6 +51,30 @@ const Generator = (
}: GeneratorProps,
) => {
const inputRef = useRef<HTMLInputElement>(null);
const { t } = useTranslation();
const passwordRequiredBitSize = bits ? bits : [
{
text: t("security.256bit"),
value: "32",
key: "bit256",
},
{
text: t("security.128bit"),
value: "16",
key: "bit128",
},
{
text: t("security.8bit"),
value: "1",
key: "bit8",
},
{
text: t("security.empty"),
value: "0",
key: "bit0",
},
];
// Invokes onChange event on the input element when the value changes from the parent component
useEffect(() => {
@@ -91,7 +111,7 @@ const Generator = (
<SelectValue />
</SelectTrigger>
<SelectContent className="w-36">
{bits.map(({ text, value, key }) => (
{passwordRequiredBitSize.map(({ text, value, key }) => (
<SelectItem key={key} value={value} className="w-36">
{text}
</SelectItem>
src/components/generic/TimeAgo.tsx
+98 -32
View File
@@ -5,49 +5,115 @@ import {
TooltipProvider,
TooltipTrigger,
} from "@radix-ui/react-tooltip";
import { useEffect, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
export interface TimeAgoProps {
timestamp: number;
timestamp: number | Date;
locale?: string;
tooltipOptions?: Intl.DateTimeFormatOptions;
className?: string;
}
const getTimeAgo = (
unixTimestamp: number,
locale: Intl.LocalesArgument = "en",
): string => {
const timestamp = new Date(unixTimestamp);
const diff = (new Date().getTime() - timestamp.getTime()) / 1000;
const TIME_UNITS: Array<[Intl.RelativeTimeFormatUnit, number]> = [
["year", 31536000],
["month", 2592000],
["day", 86400],
["hour", 3600],
["minute", 60],
["second", 1],
];
const minutes = Math.floor(diff / 60);
const hours = Math.floor(minutes / 60);
const days = Math.floor(hours / 24);
const months = Math.floor(days / 30);
const years = Math.floor(months / 12);
const rtf = new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
const getRelativeTimeParts = (
date: Date | number,
): { value: number; unit: Intl.RelativeTimeFormatUnit } => {
const diffInSeconds = (new Date(date).getTime() - Date.now()) / 1000;
if (years > 0) {
return rtf.format(0 - years, "year");
for (const [unit, secondsInUnit] of TIME_UNITS) {
if (Math.abs(diffInSeconds) >= secondsInUnit) {
const value = Math.round(diffInSeconds / secondsInUnit);
return { value, unit };
}
}
if (months > 0) {
return rtf.format(0 - months, "month");
}
if (days > 0) {
return rtf.format(0 - days, "day");
}
if (hours > 0) {
return rtf.format(0 - hours, "hour");
}
if (minutes > 0) {
return rtf.format(0 - minutes, "minute");
}
return rtf.format(Math.floor(0 - diff), "second");
return { value: Math.round(diffInSeconds), unit: "second" };
};
export const TimeAgo = ({ timestamp }: TimeAgoProps) => {
const UPDATE_INTERVALS: Partial<Record<Intl.RelativeTimeFormatUnit, number>> = {
// For long-term units, an hourly update is more than sufficient.
year: 1000 * 60 * 60,
month: 1000 * 60 * 60,
// When the unit is 'day', check hourly to catch the change to the next day.
day: 1000 * 60 * 60,
// When the unit is 'hour', check every thiry seconds to catch the change to the next hour.
hour: 1000 * 30,
// When the unit is 'minute', a 15-second check is a good balance.
minute: 1000 * 15,
// For 'second', a 3-second check keeps it feeling "live" without being excessive.
second: 1000 * 3,
};
export const TimeAgo = ({
timestamp,
locale: localeProp,
tooltipOptions,
className,
}: TimeAgoProps) => {
const { i18n } = useTranslation();
const [timeAgo, setTimeAgo] = useState<string>("");
const locale = useMemo(
() =>
localeProp ||
i18n.language ||
(typeof navigator !== "undefined" ? navigator.language : "en-US"),
[localeProp, i18n.language],
);
const date = useMemo(() => new Date(timestamp), [timestamp]);
const fullDate = useMemo(() => {
const defaultOptions: Intl.DateTimeFormatOptions = {
dateStyle: "full",
timeStyle: "medium",
};
const formatter = new Intl.DateTimeFormat(locale, {
...defaultOptions,
...tooltipOptions,
});
return formatter.format(date);
}, [date, locale, tooltipOptions]);
useEffect(() => {
const rtf = new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
let timerId: number;
const update = () => {
const { value, unit } = getRelativeTimeParts(date);
setTimeAgo(rtf.format(value, unit));
const interval = UPDATE_INTERVALS[unit] || 60000;
timerId = globalThis.setTimeout(update, interval);
};
update();
return () => {
clearTimeout(timerId);
};
}, [date, locale]);
return (
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
<span>{getTimeAgo(timestamp)}</span>
<TooltipTrigger asChild>
<time dateTime={date.toISOString()} className={className}>
{timeAgo}
</time>
</TooltipTrigger>
<TooltipPortal>
<TooltipContent
@@ -56,7 +122,7 @@ export const TimeAgo = ({ timestamp }: TimeAgoProps) => {
align="center"
sideOffset={5}
>
{new Date(timestamp).toLocaleString()}
{fullDate}
</TooltipContent>
</TooltipPortal>
</Tooltip>
src/core/hooks/useFavoriteNode.test.ts
+3 -3
View File
@@ -43,7 +43,7 @@ describe("useFavoriteNode hook", () => {
expect(mockUpdateFavorite).toHaveBeenCalledWith(1234, true);
expect(mockGetNode).toHaveBeenCalledWith(1234);
expect(mockToast).toHaveBeenCalledWith({
title: "Added Test Node to favorites",
title: "Added Test Node to favorites.",
});
});
@@ -57,7 +57,7 @@ describe("useFavoriteNode hook", () => {
expect(mockUpdateFavorite).toHaveBeenCalledWith(1234, false);
expect(mockGetNode).toHaveBeenCalledWith(1234);
expect(mockToast).toHaveBeenCalledWith({
title: "Removed Test Node from favorites",
title: "Removed Test Node from favorites.",
});
});
@@ -74,7 +74,7 @@ describe("useFavoriteNode hook", () => {
});
expect(mockToast).toHaveBeenCalledWith({
title: "Added node to favorites",
title: "Added Node to favorites.",
});
});
src/core/hooks/useFavoriteNode.ts
+11 -3
View File
@@ -1,6 +1,7 @@
import { useCallback } from "react";
import { useDevice } from "@core/stores/deviceStore.ts";
import { useToast } from "@core/hooks/useToast.ts";
import { useTranslation } from "react-i18next";
interface FavoriteNodeOptions {
nodeNum: number;
@@ -9,6 +10,7 @@ interface FavoriteNodeOptions {
export function useFavoriteNode() {
const { updateFavorite, getNode } = useDevice();
const { t } = useTranslation();
const { toast } = useToast();
const updateFavoriteCB = useCallback(
@@ -19,9 +21,15 @@ export function useFavoriteNode() {
updateFavorite(nodeNum, isFavorite);
toast({
title: `${isFavorite ? "Added" : "Removed"} ${
node?.user?.longName ?? "node"
} ${isFavorite ? "to" : "from"} favorites`,
title: t("toast.favoriteNode.title", {
action: isFavorite
? t("toast.favoriteNode.action.added")
: t("toast.favoriteNode.action.removed"),
nodeName: node?.user?.longName ?? t("node"),
direction: isFavorite
? t("toast.favoriteNode.action.to")
: t("toast.favoriteNode.action.from"),
}),
});
},
[updateFavorite, getNode],
src/core/hooks/useIgnoreNode.ts
+12 -3
View File
@@ -1,6 +1,7 @@
import { useCallback } from "react";
import { useDevice } from "@core/stores/deviceStore.ts";
import { useToast } from "@core/hooks/useToast.ts";
import { useTranslation } from "react-i18next";
interface IgnoreNodeOptions {
nodeNum: number;
@@ -9,6 +10,8 @@ interface IgnoreNodeOptions {
export function useIgnoreNode() {
const { updateIgnored, getNode } = useDevice();
const { t } = useTranslation();
const { toast } = useToast();
const updateIgnoredCB = useCallback(
@@ -19,9 +22,15 @@ export function useIgnoreNode() {
updateIgnored(nodeNum, isIgnored);
toast({
title: `${isIgnored ? "Added" : "Removed"} ${
node?.user?.longName ?? "node"
} ${isIgnored ? "to" : "from"} ignore list`,
title: t("toast.ignoreNode.title", {
nodeName: node?.user?.longName ?? "node",
action: isIgnored
? t("toast.ignoreNode.action.added")
: t("toast.ignoreNode.action.removed"),
direction: isIgnored
? t("toast.ignoreNode.action.to")
: t("toast.ignoreNode.action.from"),
}),
});
},
[updateIgnored, getNode],
src/i18n/config.ts
+3 -3
View File
@@ -41,9 +41,9 @@ i18next
fallbackLng: {
default: [FALLBACK_LANGUAGE_CODE],
"en-GB": [FALLBACK_LANGUAGE_CODE],
"fi": ["fi-FI"],
"sv": ["sv-SE"],
"de": ["de-DE"],
"fi": ["fi-FI", FALLBACK_LANGUAGE_CODE],
"sv": ["sv-SE", FALLBACK_LANGUAGE_CODE],
"de": ["de-DE", FALLBACK_LANGUAGE_CODE],
},
fallbackNS: ["common", "ui", "dialog"],
debug: import.meta.env.MODE === "development",
src/i18n/locales/en/common.json
+9 -1
View File
@@ -24,7 +24,8 @@
"reset": "Reset",
"save": "Save",
"scanQr": "Scan QR Code",
"traceRoute": "Trace Route"
"traceRoute": "Trace Route",
"submit": "Submit"
},
"app": {
"title": "Meshtastic",
@@ -48,6 +49,7 @@
"raw": "raw",
"meter": { "one": "Meter", "plural": "Meters", "suffix": "m" },
"minute": { "one": "Minute", "plural": "Minutes" },
"hour": { "one": "Hour", "plural": "Hours" },
"millisecond": {
"one": "Millisecond",
"plural": "Milliseconds",
@@ -55,11 +57,16 @@
},
"second": { "one": "Second", "plural": "Seconds" },
"day": { "one": "Day", "plural": "Days" },
"month": { "one": "Month", "plural": "Months" },
"year": { "one": "Year", "plural": "Years" },
"snr": "SNR",
"volt": { "one": "Volt", "plural": "Volts", "suffix": "V" },
"record": { "one": "Records", "plural": "Records" }
},
"security": {
"0bit": "Empty",
"8bit": "8 bit",
"128bit": "128 bit",
"256bit": "256 bit"
},
"unknown": {
@@ -71,6 +78,7 @@
"nodeUnknownPrefix": "!",
"unset": "UNSET",
"fallbackName": "Meshtastic {{last4}}",
"node": "Node",
"formValidation": {
"unsavedChanges": "Unsaved changes",
"tooBig": {
src/i18n/locales/en/messages.json
+19 -20
View File
@@ -1,6 +1,7 @@
{
"page": {
"title": "Messages: {{chatName}}"
"title": "Messages: {{chatName}}",
"placeholder": "Enter Message"
},
"emptyState": {
"title": "Select a Chat",
@@ -10,7 +11,7 @@
"text": "Select a channel or node to start messaging."
},
"sendMessage": {
"placeholder": "Type your message here...",
"placeholder": "Enter your message here...",
"sendButton": "Send"
},
"actionsMenu": {
@@ -18,24 +19,22 @@
"replyLabel": "Reply"
},
"item": {
"status": {
"delivered": {
"label": "Message delivered",
"displayText": "Message delivered"
},
"failed": {
"label": "Message delivery failed",
"displayText": "Delivery failed"
},
"unknown": {
"label": "Message status unknown",
"displayText": "Unknown state"
},
"waiting": {
"ariaLabel": "Sending message",
"displayText": "Waiting for delivery"
}
"deliveryStatus": {
"delivered": {
"label": "Message delivered",
"displayText": "Message delivered"
},
"failed": {
"label": "Message delivery failed",
"displayText": "Delivery failed"
},
"unknown": {
"label": "Message status unknown",
"displayText": "Unknown state"
},
"waiting": {
"label": "Sending message",
"displayText": "Waiting for delivery"
}
}
}
src/i18n/locales/en/nodes.json
+14 -1
View File
@@ -10,11 +10,16 @@
"label": "Direct Message {{shortName}}"
},
"favorite": {
"label": "Favorite"
"label": "Favorite",
"tooltip": "Add or remove this node from your favorites"
},
"notFavorite": {
"label": "Not a Favorite"
},
"error": {
"label": "Error",
"text": "An error occurred while fetching node details. Please try again later."
},
"status": {
"heard": "Heard",
"mqtt": "MQTT"
@@ -47,5 +52,13 @@
"lastHeardStatus": {
"never": "Never"
}
},
"actions": {
"added": "Added",
"removed": "Removed",
"ignoreNode": "Ignore Node",
"unignoreNode": "Unignore Node",
"requestPosition": "Request Position"
}
}
src/i18n/locales/en/ui.json
+18
View File
@@ -66,6 +66,24 @@
"saveSuccess": {
"title": "Saving Config",
"description": "The configuration change {{case}} has been saved."
},
"favoriteNode": {
"title": "{{action}} {{nodeName}} {{direction}} favorites.",
"action": {
"added": "Added",
"removed": "Removed",
"to": "to",
"from": "from"
}
},
"ignoreNode": {
"title": "{{action}} {{nodeName}} {{direction}} ignore list",
"action": {
"added": "Added",
"removed": "Removed",
"to": "to",
"from": "from"
}
}
},
"notifications": {
src/pages/Messages.tsx
+10 -7
View File
@@ -306,13 +306,16 @@ export const MessagesPage = () => {
return (
<PageLayout
label={`Messages: ${
isBroadcast && currentChannel
? getChannelName(currentChannel)
: isDirect && otherNode
? (otherNode.user?.longName ?? t("unknown.longName"))
: t("emptyState.title")
}`}
label={`${
t("page.title", {
chatName: isBroadcast && currentChannel
? getChannelName(currentChannel)
: isDirect && otherNode
? (otherNode.user?.longName ?? t("unknown.longName"))
: t("emptyState.title"),
})
}
`}
rightBar={rightSidebar}
leftBar={leftSidebar}
actions={isDirect && otherNode
src/pages/Nodes/index.tsx
+8 -1
View File
@@ -31,6 +31,7 @@ import {
} from "@components/generic/Filter/useFilterNode.ts";
import { FilterControl } from "@components/generic/Filter/FilterControl.tsx";
import { useTranslation } from "react-i18next";
import useLang from "@core/hooks/useLang.ts";
export interface DeleteNoteDialogProps {
open: boolean;
@@ -39,6 +40,7 @@ export interface DeleteNoteDialogProps {
const NodesPage = (): JSX.Element => {
const { t } = useTranslation("nodes");
const { currentLanguage } = useLang();
const { getNodes, hardware, connection, hasNodeError, setDialogOpen } =
useDevice();
const { setNodeNumDetails } = useAppStore();
@@ -168,7 +170,12 @@ const NodesPage = (): JSX.Element => {
<Mono>
{node.lastHeard === 0
? <p>{t("nodesTable.lastHeardStatus.never")}</p>
: <TimeAgo timestamp={node.lastHeard * 1000} />}
: (
<TimeAgo
timestamp={node.lastHeard * 1000}
locale={currentLanguage?.code}
/>
)}
</Mono>
),
sortValue: node.lastHeard,