fixing translations

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")} ${
+  const voltageTitle = `${
-    t("common_unit_volts")
+    voltage?.toPrecision(3) ?? t("common_unknown_short")
-  }`;
+  } ${t("common_unit_volts")}`;
 
   return (
     <div

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() {

src/components/Dialog/DeviceNameDialog.tsx

@@ -38,8 +38,8 @@ export const DeviceNameDialog = ({
   const myNode = getNode(hardware.myNodeNum);
 
   const defaultValues = {
-    longName: myNode?.user?.longName ?? "Unknown",
+    longName: myNode?.user?.longName ?? t("common_unknown_long"),
-    shortName: myNode?.user?.shortName ?? "??",
+    shortName: myNode?.user?.shortName ?? t("common_unknown_short"),
   };
 
   const { getValues, setValue, reset, control, handleSubmit } = useForm<User>({

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

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?.longName ?? t("common_unknown_short")} (
-            {node.user?.shortName ?? t("common_unknown")})
+            {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"

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

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>
   );

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 vendor = usbVendorId ?? t("common_unknown_short");
-          const product = usbProductId ?? t("common_unknown");
+          const product = usbProductId ?? t("common_unknown_short");
           return (
             <Button
               key={`${vendor}-${product}-${index}`}

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 name = node.user?.longName ?? t("common_unknown_short");
-  const shortName = node.user?.shortName ?? t("common_unknown");
+  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

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>

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

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

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" && (

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]);

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>,
             ])}
           />