From f7541769dcf953a84ba91d1aa37529e4d1b73dab Mon Sep 17 00:00:00 2001
From: Dan Ditomaso <dan.ditomaso@gmail.com>
Date: Fri, 23 May 2025 13:34:41 -0400
Subject: [PATCH] fixing translations

---
 src/components/BatteryStatus.tsx                          | 6 +++---
 src/components/CommandPalette/index.tsx                   | 4 ++--
 src/components/Dialog/DeviceNameDialog.tsx                | 4 ++--
 src/components/Dialog/LocationResponseDialog.tsx          | 4 ++--
 .../Dialog/NodeDetailsDialog/NodeDetailsDialog.tsx        | 8 ++++----
 src/components/Dialog/TracerouteResponseDialog.tsx        | 4 ++--
 src/components/PageComponents/Connect/BLE.tsx             | 4 ++--
 src/components/PageComponents/Connect/Serial.tsx          | 4 ++--
 src/components/PageComponents/Map/NodeDetail.tsx          | 4 ++--
 src/components/Sidebar.tsx                                | 4 ++--
 src/components/UI/Avatar.tsx                              | 5 ++++-
 src/i18n/locales/en.json                                  | 3 ++-
 src/pages/Dashboard/index.tsx                             | 2 +-
 src/pages/Messages.tsx                                    | 6 +++---
 src/pages/Nodes.tsx                                       | 4 ++--
 15 files changed, 35 insertions(+), 31 deletions(-)

diff --git a/src/components/BatteryStatus.tsx b/src/components/BatteryStatus.tsx
index ad0270cb..cf2d2523 100644
--- a/src/components/BatteryStatus.tsx
+++ b/src/components/BatteryStatus.tsx
@@ -81,9 +81,9 @@ const BatteryStatus: React.FC<BatteryStatusProps> = ({ deviceMetrics }) => {
   const iconClassName = currentState.className;
   const statusText = currentState.text(batteryLevel);
 
-  const voltageTitle = `${voltage?.toPrecision(3) ?? t("common_unknown")} ${
-    t("common_unit_volts")
-  }`;
+  const voltageTitle = `${
+    voltage?.toPrecision(3) ?? t("common_unknown_short")
+  } ${t("common_unit_volts")}`;
 
   return (
     <div
diff --git a/src/components/CommandPalette/index.tsx b/src/components/CommandPalette/index.tsx
index cb35353f..d98da072 100644
--- a/src/components/CommandPalette/index.tsx
+++ b/src/components/CommandPalette/index.tsx
@@ -120,11 +120,11 @@ export const CommandPalette = () => {
           icon: ArrowLeftRightIcon,
           subItems: getDevices().map((device) => ({
             label: getNode(device.hardware.myNodeNum)?.user?.longName ??
-              t("common_unknown"), // Or a more specific key for node name
+              t("common_unknown_short"), // Or a more specific key for node name
             icon: (
               <Avatar
                 text={getNode(device.hardware.myNodeNum)?.user?.shortName ??
-                  t("common_unknown")} // Or a more specific key
+                  t("common_unknown_short")} // Or a more specific key
               />
             ),
             action() {
diff --git a/src/components/Dialog/DeviceNameDialog.tsx b/src/components/Dialog/DeviceNameDialog.tsx
index bd33bda1..bff4f98d 100644
--- a/src/components/Dialog/DeviceNameDialog.tsx
+++ b/src/components/Dialog/DeviceNameDialog.tsx
@@ -38,8 +38,8 @@ export const DeviceNameDialog = ({
   const myNode = getNode(hardware.myNodeNum);
 
   const defaultValues = {
-    longName: myNode?.user?.longName ?? "Unknown",
-    shortName: myNode?.user?.shortName ?? "??",
+    longName: myNode?.user?.longName ?? t("common_unknown_long"),
+    shortName: myNode?.user?.shortName ?? t("common_unknown_short"),
   };
 
   const { getValues, setValue, reset, control, handleSubmit } = useForm<User>({
diff --git a/src/components/Dialog/LocationResponseDialog.tsx b/src/components/Dialog/LocationResponseDialog.tsx
index 1e696acb..670f5d6f 100644
--- a/src/components/Dialog/LocationResponseDialog.tsx
+++ b/src/components/Dialog/LocationResponseDialog.tsx
@@ -27,11 +27,11 @@ export const LocationResponseDialog = ({
 
   const from = getNode(location?.from ?? 0);
   const longName = from?.user?.longName ??
-    (from ? `!${numberToHexUnpadded(from?.num)}` : t("common_unknown"));
+    (from ? `!${numberToHexUnpadded(from?.num)}` : t("common_unknown_short"));
   const shortName = from?.user?.shortName ??
     (from
       ? `${numberToHexUnpadded(from?.num).substring(0, 4)}`
-      : t("common_unknown"));
+      : t("common_unknown_short"));
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
diff --git a/src/components/Dialog/NodeDetailsDialog/NodeDetailsDialog.tsx b/src/components/Dialog/NodeDetailsDialog/NodeDetailsDialog.tsx
index 2466bab3..1504c04f 100644
--- a/src/components/Dialog/NodeDetailsDialog/NodeDetailsDialog.tsx
+++ b/src/components/Dialog/NodeDetailsDialog/NodeDetailsDialog.tsx
@@ -172,8 +172,8 @@ export const NodeDetailsDialog = ({
         <DialogHeader>
           <DialogTitle>
             {t("dialog_nodeDetails_titlePrefix")}
-            {node.user?.longName ?? t("common_unknown")} (
-            {node.user?.shortName ?? t("common_unknown")})
+            {node.user?.longName ?? t("common_unknown_short")} (
+            {node.user?.shortName ?? t("common_unknown_short")})
           </DialogTitle>
         </DialogHeader>
         <DialogFooter>
@@ -275,7 +275,7 @@ export const NodeDetailsDialog = ({
                   <p>
                     {t("dialog_nodeDetails_label_hardware")}
                     {(Protobuf.Mesh.HardwareModel[node.user?.hwModel ?? 0] ??
-                      t("common_unknown"))
+                      t("common_unknown_short"))
                       .replace(/_/g, " ")}
                   </p>
                 </div>
@@ -322,7 +322,7 @@ export const NodeDetailsDialog = ({
                       )}
                     </>
                   )
-                  : <p>{t("common_unknown")}</p>}
+                  : <p>{t("common_unknown_short")}</p>}
                 <Button
                   onClick={handleRequestPosition}
                   name="requestPosition"
diff --git a/src/components/Dialog/TracerouteResponseDialog.tsx b/src/components/Dialog/TracerouteResponseDialog.tsx
index 500453a0..c049b481 100644
--- a/src/components/Dialog/TracerouteResponseDialog.tsx
+++ b/src/components/Dialog/TracerouteResponseDialog.tsx
@@ -32,11 +32,11 @@ export const TracerouteResponseDialog = ({
   const snrBack = (traceroute?.data.snrBack ?? []).map((snr) => snr / 4);
   const from = getNode(traceroute?.from ?? 0);
   const longName = from?.user?.longName ??
-    (from ? `!${numberToHexUnpadded(from?.num)}` : t("common_unknown"));
+    (from ? `!${numberToHexUnpadded(from?.num)}` : t("common_unknown_short"));
   const shortName = from?.user?.shortName ??
     (from
       ? `${numberToHexUnpadded(from?.num).substring(0, 4)}`
-      : t("common_unknown"));
+      : t("common_unknown_short"));
   const to = getNode(traceroute?.to ?? 0);
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
diff --git a/src/components/PageComponents/Connect/BLE.tsx b/src/components/PageComponents/Connect/BLE.tsx
index 59b91322..51078ad5 100644
--- a/src/components/PageComponents/Connect/BLE.tsx
+++ b/src/components/PageComponents/Connect/BLE.tsx
@@ -62,7 +62,7 @@ export const BLE = (
         ))}
         {bleDevices.length === 0 && (
           <Mono className="m-auto select-none">
-            {t("bluetoothConnection.noDevicesPaired")}
+            {t("bluetoothConnection_noDevicesPaired")}
           </Mono>
         )}
       </div>
@@ -86,7 +86,7 @@ export const BLE = (
             });
         }}
       >
-        <span>New device</span>
+        <span>{t("bluetoothConnection_newDeviceButton")}</span>
       </Button>
     </fieldset>
   );
diff --git a/src/components/PageComponents/Connect/Serial.tsx b/src/components/PageComponents/Connect/Serial.tsx
index 1b258b6e..720bb377 100644
--- a/src/components/PageComponents/Connect/Serial.tsx
+++ b/src/components/PageComponents/Connect/Serial.tsx
@@ -56,8 +56,8 @@ export const Serial = (
       <div className="flex h-48 flex-col gap-2 overflow-y-auto">
         {serialPorts.map((port, index) => {
           const { usbProductId, usbVendorId } = port.getInfo();
-          const vendor = usbVendorId ?? t("common_unknown");
-          const product = usbProductId ?? t("common_unknown");
+          const vendor = usbVendorId ?? t("common_unknown_short");
+          const product = usbProductId ?? t("common_unknown_short");
           return (
             <Button
               key={`${vendor}-${product}-${index}`}
diff --git a/src/components/PageComponents/Map/NodeDetail.tsx b/src/components/PageComponents/Map/NodeDetail.tsx
index 837465e5..e49c87a8 100644
--- a/src/components/PageComponents/Map/NodeDetail.tsx
+++ b/src/components/PageComponents/Map/NodeDetail.tsx
@@ -38,8 +38,8 @@ export const NodeDetail = ({ node }: NodeDetailProps) => {
   const { setChatType, setActiveChat } = useMessageStore();
   const { t } = useTranslation();
   const { setActivePage } = useDevice();
-  const name = node.user?.longName ?? t("common_unknown");
-  const shortName = node.user?.shortName ?? t("common_unknown");
+  const name = node.user?.longName ?? t("common_unknown_short");
+  const shortName = node.user?.shortName ?? t("common_unknown_short");
   const hwModel = node.user?.hwModel ?? 0;
   const rawHardwareType = Protobuf.Mesh.HardwareModel[hwModel] as
     | keyof typeof Protobuf.Mesh.HardwareModel
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 26347562..d1f1b495 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -238,7 +238,7 @@ export const Sidebar = ({ children }: SidebarProps) => {
                   <Subtle>
                     {t("sidebar_deviceInfo.volts", {
                       voltage: myNode.deviceMetrics?.voltage?.toPrecision(3) ??
-                        t("common_unknown"),
+                        t("common_unknown_short"),
                     })}
                   </Subtle>
                 </div>
@@ -250,7 +250,7 @@ export const Sidebar = ({ children }: SidebarProps) => {
                   <Subtle>
                     {t("sidebar_deviceInfo.firmwareVersion", {
                       version: myMetadata?.firmwareVersion ??
-                        t("common_unknown"),
+                        t("common_unknown_short"),
                     })}
                   </Subtle>
                 </div>
diff --git a/src/components/UI/Avatar.tsx b/src/components/UI/Avatar.tsx
index 90a0f20e..678c2df3 100644
--- a/src/components/UI/Avatar.tsx
+++ b/src/components/UI/Avatar.tsx
@@ -7,6 +7,7 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@components/UI/Tooltip.tsx";
+import { useTranslation } from "react-i18next";
 
 type RGBColor = {
   r: number;
@@ -73,6 +74,8 @@ export const Avatar = ({
   showFavorite = false,
   className,
 }: AvatarProps) => {
+  const { t } = useTranslation();
+
   const sizes = {
     sm: "size-10 text-xs font-light",
     lg: "size-16 text-lg",
@@ -82,7 +85,7 @@ export const Avatar = ({
   const bgColor = getColorFromText(safeText);
   const isLight = ColorUtils.isLight(bgColor);
   const textColor = isLight ? "#000000" : "#FFFFFF";
-  const initials = safeText?.slice(0, 4) ?? "UNK";
+  const initials = safeText?.slice(0, 4) ?? t("common_unknown_short");
 
   return (
     <div
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 91c405d7..bc35fa30 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -13,7 +13,8 @@
   "common_button_save": "Save",
   "common_label_primary": "Primary",
   "common_loading": "Loading...",
-  "common_unknown": "UNK",
+  "common_unknown_short": "UNK",
+  "common_unknown_long": "Unknown",
   "common_unset": "UNSET",
 
   "common_unit_volts": "Volts",
diff --git a/src/pages/Dashboard/index.tsx b/src/pages/Dashboard/index.tsx
index bb7db989..5353fc75 100644
--- a/src/pages/Dashboard/index.tsx
+++ b/src/pages/Dashboard/index.tsx
@@ -55,7 +55,7 @@ export const Dashboard = () => {
                         <div className="flex items-center justify-between">
                           <p className="truncate text-sm font-medium text-accent">
                             {device.getNode(device.hardware.myNodeNum)?.user
-                              ?.longName ?? "UNK"}
+                              ?.longName ?? t("common_unknown_short")}
                           </p>
                           <div className="inline-flex w-24 justify-center gap-2 rounded-full bg-slate-100 py-1 text-xs font-semibold text-slate-900 transition-colors hover:bg-slate-700 hover:text-slate-50">
                             {device.connection?.connType === "ble" && (
diff --git a/src/pages/Messages.tsx b/src/pages/Messages.tsx
index 5ad16b8e..dd516366 100644
--- a/src/pages/Messages.tsx
+++ b/src/pages/Messages.tsx
@@ -237,7 +237,7 @@ export const MessagesPage = () => {
             <SidebarButton
               key={node.num}
               preventCollapse
-              label={node.user?.longName ?? t("common_unknown")}
+              label={node.user?.longName ?? t("common_unknown_short")}
               count={node.unreadCount > 0 ? node.unreadCount : undefined}
               active={activeChat === node.num &&
                 chatType === MessageType.Direct}
@@ -248,7 +248,7 @@ export const MessagesPage = () => {
               }}
             >
               <Avatar
-                text={node.user?.shortName ?? t("common_unknown")}
+                text={node.user?.shortName ?? t("common_unknown_short")}
                 className={cn(hasNodeError(node.num) && "text-red-500")}
                 showError={hasNodeError(node.num)}
                 showFavorite={node.isFavorite}
@@ -274,7 +274,7 @@ export const MessagesPage = () => {
   const pageTitleChatName = useMemo(() => {
     if (isBroadcast && currentChannel) return getChannelName(currentChannel);
     if (isDirect && otherNode) {
-      return otherNode.user?.longName ?? t("common_unknown");
+      return otherNode.user?.longName ?? t("common_unknown_short");
     }
     return t("messages_title_default");
   }, [isBroadcast, currentChannel, isDirect, otherNode, t]);
diff --git a/src/pages/Nodes.tsx b/src/pages/Nodes.tsx
index 9e2880f8..5e7b7588 100644
--- a/src/pages/Nodes.tsx
+++ b/src/pages/Nodes.tsx
@@ -169,7 +169,7 @@ const NodesPage = (): JSX.Element => {
             rows={filteredNodes.map((node) => [
               <div key={node.num}>
                 <Avatar
-                  text={node.user?.shortName ?? t("common_unknown")}
+                  text={node.user?.shortName ?? t("common_unknown_short")}
                   showFavorite={node.isFavorite}
                   showError={hasNodeError(node.num)}
                 />
@@ -227,7 +227,7 @@ const NodesPage = (): JSX.Element => {
                 {base16
                   .stringify(node.user?.macaddr ?? [])
                   .match(/.{1,2}/g)
-                  ?.join(":") ?? t("common_unknown")}
+                  ?.join(":") ?? t("common_unknown_short")}
               </Mono>,
             ])}
           />