fix: added required i18n labels to UI

src/components/Form/DynamicForm.tsx

@@ -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

@@ -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.tsx

@@ -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();
 
   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("messages.sendMessage.placeholder")}
               autoComplete="off"
               value={localDraft}
               onChange={handleInputChange}

src/components/PageComponents/Messages/MessageItem.tsx

@@ -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/Generator.tsx

@@ -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 = [
+    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" },
-    ],
     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

@@ -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 = (
+const TIME_UNITS: Array<[Intl.RelativeTimeFormatUnit, number]> = [
-  unixTimestamp: number,
+  ["year", 31536000],
-  locale: Intl.LocalesArgument = "en",
+  ["month", 2592000],
-): string => {
+  ["day", 86400],
-  const timestamp = new Date(unixTimestamp);
+  ["hour", 3600],
-  const diff = (new Date().getTime() - timestamp.getTime()) / 1000;
+  ["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" });
 
-  if (years > 0) {
+const getRelativeTimeParts = (
-    return rtf.format(0 - years, "year");
+  date: Date | number,
-  }
+): { value: number; unit: Intl.RelativeTimeFormatUnit } => {
-  if (months > 0) {
+  const diffInSeconds = (new Date(date).getTime() - Date.now()) / 1000;
-    return rtf.format(0 - months, "month");
+
-  }
+  for (const [unit, secondsInUnit] of TIME_UNITS) {
-  if (days > 0) {
+    if (Math.abs(diffInSeconds) >= secondsInUnit) {
-    return rtf.format(0 - days, "day");
+      const value = Math.round(diffInSeconds / secondsInUnit);
-  }
+      return { value, unit };
-  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" };
+};
+
+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]);
 
-export const TimeAgo = ({ timestamp }: TimeAgoProps) => {
   return (
     <TooltipProvider>
       <Tooltip>
-        <TooltipTrigger>
+        <TooltipTrigger asChild>
-          <span>{getTimeAgo(timestamp)}</span>
+          <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.ts

@@ -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("ui");
   const { toast } = useToast();
 
   const updateFavoriteCB = useCallback(
@@ -19,9 +21,11 @@ export function useFavoriteNode() {
       updateFavorite(nodeNum, isFavorite);
 
       toast({
-        title: `${isFavorite ? "Added" : "Removed"} ${
+        title: t("toast.favoriteNode", {
-          node?.user?.longName ?? "node"
+          action: isFavorite ? t("button.added") : t("button.removed"),
-        } ${isFavorite ? "to" : "from"} favorites`,
+          nodeName: node?.user?.longName ?? t("node"),
+          location: isFavorite ? t("to") : t("from"),
+        }),
       });
     },
     [updateFavorite, getNode],

src/i18n/config.ts

@@ -41,9 +41,9 @@ i18next
     fallbackLng: {
       default: [FALLBACK_LANGUAGE_CODE],
       "en-GB": [FALLBACK_LANGUAGE_CODE],
-      "fi": ["fi-FI"],
+      "fi": ["fi-FI", FALLBACK_LANGUAGE_CODE],
-      "sv": ["sv-SE"],
+      "sv": ["sv-SE", FALLBACK_LANGUAGE_CODE],
-      "de": ["de-DE"],
+      "de": ["de-DE", FALLBACK_LANGUAGE_CODE],
     },
     fallbackNS: ["common", "ui", "dialog"],
     debug: import.meta.env.MODE === "development",

src/i18n/locales/en/common.json

@@ -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

@@ -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,8 +19,7 @@
     "replyLabel": "Reply"
   },
 
-  "item": {
+  "deliveryStatus": {
-    "status": {
     "delivered": {
       "label": "Message delivered",
       "displayText": "Message delivered"
@@ -33,9 +33,8 @@
       "displayText": "Unknown state"
     },
     "waiting": {
-        "ariaLabel": "Sending message",
+      "label": "Sending message",
       "displayText": "Waiting for delivery"
     }
   }
 }
-}

src/i18n/locales/en/nodes.json

@@ -47,5 +47,12 @@
     "lastHeardStatus": {
       "never": "Never"
     }
+  },
+  "actions": {
+    "added": "Added",
+    "removed": "Removed",
+    "ignoreNode": "Ignore Node",
+    "unignoreNode": "Unignore Node",
+    "requestPosition": "Request Position"
   }
 }

src/i18n/locales/en/ui.json

@@ -66,6 +66,15 @@
     "saveSuccess": {
       "title": "Saving Config",
       "description": "The configuration change {{case}} has been saved."
+    },
+    "favoriteNode": {
+      "title": "Node {{nodeName}} {{action}} {{direction} favorites.",
+      "action": {
+        "added": "added",
+        "removed": "removed",
+        "to": "to",
+        "from": "from"
+      }
     }
   },
   "notifications": {

src/pages/Messages.tsx

@@ -306,13 +306,16 @@ export const MessagesPage = () => {
 
   return (
     <PageLayout
-      label={`Messages: ${
+      label={`${
-        isBroadcast && currentChannel
+        t("page.title", {
+          chatName: isBroadcast && currentChannel
             ? getChannelName(currentChannel)
             : isDirect && otherNode
             ? (otherNode.user?.longName ?? t("unknown.longName"))
-          : t("emptyState.title")
+            : t("emptyState.title"),
-      }`}
+        })
+      } 
+      `}
       rightBar={rightSidebar}
       leftBar={leftSidebar}
       actions={isDirect && otherNode

src/pages/Nodes/index.tsx

@@ -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,