* Translate strings

* Handle error

apps/client/public/locales/en-US/translation.json

@@ -351,5 +351,7 @@
   "Created at: {{time}}": "Created at: {{time}}",
   "Edited by {{name}} {{time}}": "Edited by {{name}} {{time}}",
   "Word count: {{wordCount}}": "Word count: {{wordCount}}",
-  "Character count: {{characterCount}}": "Character count: {{characterCount}}"
+  "Character count: {{characterCount}}": "Character count: {{characterCount}}",
+  "New update": "New update",
+  "{{latestVersion}} is available": "{{latestVersion}} is available"
 }

apps/client/src/components/settings/app-version.tsx

@@ -4,23 +4,31 @@ import classes from "@/components/settings/settings.module.css";
 import { Indicator, Text, Tooltip } from "@mantine/core";
 import React from "react";
 import semverGt from "semver/functions/gt";
+import { useTranslation } from "react-i18next";
 
 export default function AppVersion() {
+  const { t } = useTranslation();
   const { data: appVersion } = useAppVersion(!isCloud());
-
-  const hasUpdate =
+  let hasUpdate = false;
+  try {
+    hasUpdate =
       appVersion &&
       parseFloat(appVersion.latestVersion) > 0 &&
       semverGt(appVersion.latestVersion, appVersion.currentVersion);
+  } catch (err) {
+    console.error(err);
+  }
 
   return (
     <div className={classes.text}>
       <Tooltip
-        label={`v${appVersion?.latestVersion} is available`}
+        label={t("{{latestVersion}} is available", {
+          latestVersion: `v${appVersion?.latestVersion}`,
+        })}
         disabled={!hasUpdate}
       >
         <Indicator
-          label="New"
+          label={t("New update")}
           color="gray"
           inline
           size={16}
@@ -32,7 +40,7 @@ export default function AppVersion() {
             size="sm"
             c="dimmed"
             component="a"
-            mr={20}
+            mr={45}
             href="https://github.com/docmost/docmost/releases"
             target="_blank"
           >