Prevented i18n package from escaping text (#704)

* fix: prevented i18n package from escaping text

* Update packages/web/vite.config.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* fix: stupid copilot

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

packages/web/index.html

@@ -8,16 +8,18 @@
 
     <link rel="manifest" href="site.webmanifest" />
     <link rel="mask-icon" href="logo_black.svg" color="#67ea94" />
-    <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
+    <link
+      rel="stylesheet"
+      href="https://rsms.me/inter/inter.css"
+      crossorigin="anonymous"
+    />
     <link
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/npm/@xz/fonts@1/serve/cascadia-code.min.css"
+      crossorigin="anonymous"
     />
     <meta name="theme-color" content="#67ea94" />
-    <meta
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
-      name="viewport"
-      content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0"
-    />
     <meta name="description" content="Meshtastic Web Client" />
     <title>Meshtastic Web</title>
   </head>

packages/web/public/i18n/locales/en/dialog.json

@@ -178,6 +178,6 @@
   "managedMode": {
     "confirmUnderstanding": "Yes, I know what I'm doing",
     "title": "Are you sure?",
-    "description": "Enabling Managed Mode blocks client applications (including the web client) from writing configurations to a radio. Once enabled, radio configurations can <bold>only</bold> be changed through Remote Admin messages. This setting is not required for remote node administration."
+    "description": "Enabling Managed Mode blocks client applications (including the web client) from writing configurations to a radio. Once enabled, radio configurations can only be changed through Remote Admin messages. This setting is not required for remote node administration."
   }
 }

packages/web/src/components/Dialog/LocationResponseDialog.tsx

@@ -47,6 +47,7 @@ export const LocationResponseDialog = ({
         <DialogHeader>
           <DialogTitle>
             {t("locationResponse.title", {
+              interpolation: { escapeValue: false },
               identifier: `${longName} (${shortName})`,
             })}
           </DialogTitle>

packages/web/src/components/Dialog/NodeDetailsDialog/NodeDetailsDialog.tsx

@@ -169,6 +169,7 @@ export const NodeDetailsDialog = ({
         <DialogHeader>
           <DialogTitle>
             {t("nodeDetails.title", {
+              interpolation: { escapeValue: false },
               identifier: `${node.user?.longName ?? t("unknown.shortName")} (${
                 node.user?.shortName ?? t("unknown.shortName")
               })`,

packages/web/src/components/Dialog/PKIBackupDialog.tsx

@@ -50,6 +50,7 @@ export const PkiBackupDialog = ({
           <head>
             <title>${
         t("pkiBackup.header", {
+          interpolation: { escapeValue: false },
           shortName: getMyNode()?.user?.shortName ?? t("unknown.shortName"),
           longName: getMyNode()?.user?.longName ?? t("unknown.longName"),
         })
@@ -63,6 +64,7 @@ export const PkiBackupDialog = ({
           <body>
             <h1>${
         t("pkiBackup.header", {
+          interpolation: { escapeValue: false },
           shortName: getMyNode()?.user?.shortName ?? t("unknown.shortName"),
           longName: getMyNode()?.user?.longName ?? t("unknown.longName"),
         })
@@ -103,6 +105,7 @@ export const PkiBackupDialog = ({
     const link = document.createElement("a");
     link.href = url;
     link.download = t("pkiBackup.fileName", {
+      interpolation: { escapeValue: false },
       shortName: getMyNode()?.user?.shortName ?? t("unknown.shortName"),
       longName: getMyNode()?.user?.longName ?? t("unknown.longName"),
     });

packages/web/src/components/Dialog/RefreshKeysDialog/RefreshKeysDialog.tsx

@@ -10,7 +10,7 @@ import { LockKeyholeOpenIcon } from "lucide-react";
 import { useRefreshKeysDialog } from "./useRefreshKeysDialog.ts";
 import { useDevice } from "@core/stores/deviceStore.ts";
 import { useTranslation } from "react-i18next";
-import { useMessageStore } from "../../../core/stores/messageStore/index.ts";
+import { useMessageStore } from "@core/stores/messageStore/index.ts";
 
 export interface RefreshKeysDialogProps {
   open: boolean;
@@ -35,6 +35,7 @@ export const RefreshKeysDialog = (
 
   const text = {
     title: t("refreshKeys.title", {
+      interpolation: { escapeValue: false },
       identifier: nodeWithError?.user?.longName ?? "",
     }),
     description: `${t("refreshKeys.description.unableToSendDmPrefix")}${

packages/web/src/core/dto/NodeNumToNodeInfoDTO.ts

@@ -8,14 +8,11 @@ class NodeInfoFactory {
     const last4 = userIdHex.slice(-4);
     const longName = `Meshtastic ${last4}`;
     const shortName = last4;
-    const hwModel = Protobuf.Mesh.HardwareModel.UNSET;
 
     return create(Protobuf.Mesh.UserSchema, {
       id: userId,
-      longName: longName,
+      longName: longName.toString(),
-      shortName: shortName,
+      shortName: shortName.toString(),
-      hwModel: hwModel,
-      isLicensed: false,
     });
   }
 

packages/web/src/pages/Messages.tsx

@@ -308,6 +308,7 @@ export const MessagesPage = () => {
     <PageLayout
       label={`${
         t("page.title", {
+          interpolation: { escapeValue: false },
           chatName: isBroadcast && currentChannel
             ? getChannelName(currentChannel)
             : isDirect && otherNode

packages/web/vite.config.ts

@@ -12,6 +12,9 @@ try {
   hash = "DEV";
 }
 
+const CONTENT_SECURITY_POLICY =
+  "script-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net; style-src 'self' 'unsafe-inline' data: https://rsms.me https://cdn.jsdelivr.net; img-src 'self' data:; font-src 'self' data: https://rsms.me https://cdn.jsdelivr.net; worker-src 'self' blob:; object-src 'none'; base-uri 'self';";
+
 export default defineConfig({
   plugins: [
     react(),
@@ -49,6 +52,7 @@ export default defineConfig({
   server: {
     port: 3000,
     headers: {
+      "content-security-policy": CONTENT_SECURITY_POLICY,
       "Cross-Origin-Opener-Policy": "same-origin",
       "Cross-Origin-Embedder-Policy": "require-corp",
     },