✨(frontend) add GeneralTab

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.

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>

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>
+  )
+}