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>
2025-07-11 08:23:47 -04:00
parent f010365151
commit 5efa1d1795
9 changed files with 22 additions and 12 deletions
@@ -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
-      name="viewport"
-      content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0"
-    />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="Meshtastic Web Client" />
    <title>Meshtastic Web</title>
  </head>
@@ -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."
  }
 }
@@ -47,6 +47,7 @@ export const LocationResponseDialog = ({
        <DialogHeader>
          <DialogTitle>
            {t("locationResponse.title", {
+              interpolation: { escapeValue: false },
              identifier: `${longName} (${shortName})`,
            })}
          </DialogTitle>
@@ -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")
              })`,
@@ -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"),
    });
@@ -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")}${
@@ -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,
-      shortName: shortName,
-      hwModel: hwModel,
-      isLicensed: false,
+      longName: longName.toString(),
+      shortName: shortName.toString(),
    });
  }

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