feat: use existing translation on all pages

inertia/components/settings/modal.tsx

@@ -1,5 +1,7 @@
+import { useTranslation } from 'react-i18next';
 import { BsGear } from 'react-icons/bs';
 import Modal from '~/components/common/modal/modal';
+import LangSelector from '~/components/lang_selector';
 import ThemeSwitcher from '~/components/theme_switcher';
 import useToggle from '~/hooks/use_modal';
 
@@ -9,19 +11,16 @@ export default function ModalSettings({
   // TODO: fix this :()
   openItem: any;
 }) {
+  const { t } = useTranslation('common');
   const { isShowing, open, close } = useToggle();
   return (
     <>
       <OpenItem onClick={open}>
         <BsGear />
-        Settings
+        {t('settings')}
       </OpenItem>
-      <Modal title="Settings" opened={isShowing} close={close}>
-        Modal settings
-        <hr />
-        <select>
-          <option>EN</option>
-        </select>
+      <Modal title={t('settings')} opened={isShowing} close={close}>
+        <LangSelector />
         <hr />
         <ThemeSwitcher />
       </Modal>