fix: update titles in locale files and set document title on language change

2026-06-15 12:29:41 +03:30
parent 744ab78c14
commit 71b8077296
5 changed files with 11 additions and 4 deletions
--- a/index.html
+++ b/index.html
@@ -2,9 +2,9 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
-    <!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
+    <link rel="icon" href="/favicon.ico" sizes="any" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Harmony Accounts</title>
+    <title>حساب‌های هارمونی</title>
    <!-- this script add for preventing initial theme flashing -->
    <script>
      (function () {
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -1,4 +1,7 @@
 {
+  "app": {
+    "title": "Harmony Accounts"
+  },
  "labels": {
    "search": "search"
  },
--- a/public/locales/fa/common.json
+++ b/public/locales/fa/common.json
@@ -1,4 +1,7 @@
 {
+  "app": {
+    "title": "حساب‌های هارمونی"
+  },
  "labels": {
    "search": "جست و جو"
  },
--- a/src/components/LanguageManager.tsx
+++ b/src/components/LanguageManager.tsx
@@ -6,12 +6,13 @@ import { useTranslation } from 'react-i18next';
 * side effects to the document. It renders no visible UI.
 */
 export const LanguageManager = () => {
-  const { i18n } = useTranslation();
+  const { i18n, t } = useTranslation();

  useLayoutEffect(() => {
    const handleLanguageChange = (lng: string) => {
      document.documentElement.setAttribute('dir', i18n.dir(lng));
      document.documentElement.setAttribute('lang', lng);
+      document.title = t('app.title', { lng });
    };

    // Set initial values on component mount
@@ -24,7 +25,7 @@ export const LanguageManager = () => {
    return () => {
      i18n.off('languageChanged', handleLanguageChange);
    };
-  }, [i18n]);
+  }, [i18n, t]);

  return null;
 };