feat: try i18n for some texts

package.json

@@ -14,22 +14,23 @@
     "react": "^18.1.0",
     "react-calendar-heatmap": "^1.8.1",
     "react-dom": "^18.1.0",
+    "react-suspense-fetch": "^0.5.1",
     "react-tooltip": "^4.2.21",
-    "react-use": "^17.3.2"
+    "react-use": "^17.4.0"
   },
   "devDependencies": {
     "@semantic-release/changelog": "6.0.1",
     "@semantic-release/exec": "6.0.3",
     "@semantic-release/git": "10.0.1",
     "@semantic-release/npm": "9.0.1",
-    "@types/node": "17.0.31",
+    "@types/node": "17.0.40",
     "@types/react": "18.0.11",
     "@types/react-calendar-heatmap": "1.6.3",
     "@types/react-dom": "18.0.5",
     "@typescript-eslint/eslint-plugin": "5.27.0",
     "@typescript-eslint/parser": "5.27.0",
     "@vitejs/plugin-react": "^1.3.2",
-    "conventional-changelog-conventionalcommits": "4.6.3",
+    "conventional-changelog-conventionalcommits": "5.0.0",
     "eslint": "8.17.0",
     "eslint-plugin-react": "7.30.0",
     "react-error-boundary": "^3.1.4",

src/App.tsx

@@ -1,4 +1,5 @@
 import React, { useRef } from "react";
+import { setLocale } from "./translate";
 import { useAppVisible, useThemeMode } from "./utils";
 const Heatmap = React.lazy(() =>
   import("./Heatmap").then((d) => ({ default: d.Heatmap }))
@@ -10,6 +11,10 @@ function App() {
   const themeMode = useThemeMode();
   const [started, setStarted] = React.useState(visible);
   React.useEffect(() => {
+    logseq.App.getUserConfigs().then((config) => {
+      setLocale(config.preferredLanguage);
+    });
+
     if (visible) {
       setStarted(true);
     } else {
@@ -21,6 +26,7 @@ function App() {
       };
     }
   }, [visible]);
+
   if (started) {
     return (
       <React.Suspense fallback="loading...">