From cac58f49d3c7d0ed5684fbd1fbfce11e554a3bf0 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Wed, 14 Aug 2024 19:09:16 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20add=20GeneralTab?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Introduced a General settings tab, currently allowing language configuration.
Although this commit introduces some duplication, the default settings dialog
will be refactored in future updates.

The General tab is designed to accommodate additional features over time.
---
 .../components/SettingsDialogExtended.tsx     |  5 ++--
 .../settings/components/tabs/GeneralTab.tsx   | 26 +++++++++++++++++++
 2 files changed, 28 insertions(+), 3 deletions(-)
 create mode 100644 src/frontend/src/features/settings/components/tabs/GeneralTab.tsx

diff --git a/src/frontend/src/features/settings/components/SettingsDialogExtended.tsx b/src/frontend/src/features/settings/components/SettingsDialogExtended.tsx
index 7953e836..0db29ea2 100644
--- a/src/frontend/src/features/settings/components/SettingsDialogExtended.tsx
+++ b/src/frontend/src/features/settings/components/SettingsDialogExtended.tsx
@@ -10,6 +10,7 @@ import {
   RiSpeakerLine,
 } from '@remixicon/react'
 import { AccountTab } from './tabs/AccountTab'
+import { GeneralTab } from '@/features/settings/components/tabs/GeneralTab.tsx'
 
 const tabsStyle = css({
   maxHeight: '40.625rem', // fixme size copied from meet settings modal
@@ -70,9 +71,7 @@ export const SettingsDialogExtended = (props: SettingsDialogExtended) => {
           <TabPanel flex id="2">
             There are your audio settings
           </TabPanel>
-          <TabPanel flex id="3">
-            There are your general setting
-          </TabPanel>
+          <GeneralTab id="3" />
         </div>
       </Tabs>
     </Dialog>
diff --git a/src/frontend/src/features/settings/components/tabs/GeneralTab.tsx b/src/frontend/src/features/settings/components/tabs/GeneralTab.tsx
new file mode 100644
index 00000000..170fc02c
--- /dev/null
+++ b/src/frontend/src/features/settings/components/tabs/GeneralTab.tsx
@@ -0,0 +1,26 @@
+import { Field, H } from '@/primitives'
+import { useTranslation } from 'react-i18next'
+import { useLanguageLabels } from '@/i18n/useLanguageLabels'
+import { TabPanel, TabPanelProps } from '@/primitives/Tabs'
+
+export type GeneralTabProps = Pick<TabPanelProps, 'id'>
+
+export const GeneralTab = ({ id }: GeneralTabProps) => {
+  const { t, i18n } = useTranslation('settings')
+  const { languagesList, currentLanguage } = useLanguageLabels()
+
+  return (
+    <TabPanel padding={'md'} flex id={id}>
+      <H lvl={2}>{t('language.heading')}</H>
+      <Field
+        type="select"
+        label={t('language.label')}
+        items={languagesList}
+        defaultSelectedKey={currentLanguage.key}
+        onSelectionChange={(lang) => {
+          i18n.changeLanguage(lang as string)
+        }}
+      />
+    </TabPanel>
+  )
+}