From 8c04f5b3f1fac0807039f1bf537aae9e9aec5d30 Mon Sep 17 00:00:00 2001
From: utin-francis-peter <utinfrancis.dev@gmail.com>
Date: Sun, 23 Jun 2024 23:19:14 +0100
Subject: [PATCH 1/4] chore: selected language isn't included in language
 options

---
 frontend/src/settings/General.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/frontend/src/settings/General.tsx b/frontend/src/settings/General.tsx
index eb5ac908f..2ceb77a21 100644
--- a/frontend/src/settings/General.tsx
+++ b/frontend/src/settings/General.tsx
@@ -107,7 +107,10 @@ const General: React.FC = () => {
           {t('settings.general.selectLanguage')}
         </p>
         <Dropdown
-          options={languageOptions}
+          options={languageOptions.filter(
+            (languageOption) =>
+              languageOption.value !== selectedLanguage?.value,
+          )}
           selectedValue={selectedLanguage ?? languageOptions[0]}
           onSelect={(selectedOption: { label: string; value: string }) => {
             setSelectedLanguage(selectedOption);

From 0c4ca9c94d57c2a65c834da047c69465cf6ebd29 Mon Sep 17 00:00:00 2001
From: utin-francis-peter <utinfrancis.dev@gmail.com>
Date: Sun, 23 Jun 2024 23:27:43 +0100
Subject: [PATCH 2/4] refactor: selected language gets stored in local  state,
 triggering an effect that updates lang value in local storage and change
 language

---
 frontend/src/settings/General.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/frontend/src/settings/General.tsx b/frontend/src/settings/General.tsx
index 2ceb77a21..bf917d91b 100644
--- a/frontend/src/settings/General.tsx
+++ b/frontend/src/settings/General.tsx
@@ -84,6 +84,11 @@ const General: React.FC = () => {
     fetchPrompts();
   }, []);
 
+  React.useEffect(() => {
+    localStorage.setItem('docsgpt-locale', selectedLanguage?.value as string);
+    changeLanguage(selectedLanguage?.value);
+  }, [selectedLanguage, changeLanguage]);
+
   return (
     <div className="mt-[59px]">
       <div className="mb-5">
@@ -114,8 +119,6 @@ const General: React.FC = () => {
           selectedValue={selectedLanguage ?? languageOptions[0]}
           onSelect={(selectedOption: { label: string; value: string }) => {
             setSelectedLanguage(selectedOption);
-            changeLanguage(selectedOption.value);
-            localStorage.setItem('docsgpt-locale', selectedOption.value);
           }}
           size="w-56"
           rounded="3xl"

From 68c71adc5a7d80e276b02122de3d4ef3290df3bb Mon Sep 17 00:00:00 2001
From: utin-francis-peter <utinfrancis.dev@gmail.com>
Date: Sun, 23 Jun 2024 23:29:59 +0100
Subject: [PATCH 3/4] chore: i18n "General" tab title

---
 frontend/src/settings/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/settings/index.tsx b/frontend/src/settings/index.tsx
index 9c0714c47..609b026f5 100644
--- a/frontend/src/settings/index.tsx
+++ b/frontend/src/settings/index.tsx
@@ -23,7 +23,7 @@ const Settings: React.FC = () => {
     t('settings.documents.label'),
     t('settings.apiKeys.label'),
   ];
-  const [activeTab, setActiveTab] = React.useState('General');
+  const [activeTab, setActiveTab] = React.useState(t('settings.general.label'));
   const [widgetScreenshot, setWidgetScreenshot] = React.useState<File | null>(
     null,
   );

From 651eb3374c9c763715eb6316ce2108bd5a053b9a Mon Sep 17 00:00:00 2001
From: utin-francis-peter <utinfrancis.dev@gmail.com>
Date: Sun, 23 Jun 2024 23:33:27 +0100
Subject: [PATCH 4/4] chore: on language change when active tab is general,
 active tab is persisted as general

---
 frontend/src/settings/index.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/frontend/src/settings/index.tsx b/frontend/src/settings/index.tsx
index 609b026f5..3969fce67 100644
--- a/frontend/src/settings/index.tsx
+++ b/frontend/src/settings/index.tsx
@@ -12,6 +12,7 @@ import { Doc } from '../preferences/preferenceApi';
 import ArrowLeft from '../assets/arrow-left.svg';
 import ArrowRight from '../assets/arrow-right.svg';
 import { useTranslation } from 'react-i18next';
+import i18n from '../locale/i18n';
 
 const apiHost = import.meta.env.VITE_API_HOST || 'https://docsapi.arc53.com';
 
@@ -48,6 +49,11 @@ const Settings: React.FC = () => {
       })
       .catch((error) => console.error(error));
   };
+
+  // persist active tab as the translated version of 'general' per language change
+  React.useEffect(() => {
+    setActiveTab(t('settings.general.label'));
+  }, [i18n.language]);
   return (
     <div className="wa p-4 pt-20 md:p-12">
       <p className="text-2xl font-bold text-eerie-black dark:text-bright-gray">