refactor: use API from new i18n package

libs/components/layout/src/header/FileSystem.tsx

@@ -3,8 +3,9 @@ import { useCallback, useMemo, useState } from 'react';
 import { CloseIcon } from '@toeverything/components/common';
 import { IconButton, MuiSnackbar, styled } from '@toeverything/components/ui';
 import { services } from '@toeverything/datasource/db-service';
+import { useTranslation } from '@toeverything/datasource/i18n';
 import { useLocalTrigger } from '@toeverything/datasource/state';
-import { useTranslation } from 'react-i18next';
+
 const cleanupWorkspace = (workspace: string) =>
     new Promise((resolve, reject) => {
         const req = indexedDB.deleteDatabase(workspace);

libs/components/layout/src/header/LayoutHeader.tsx

@@ -5,13 +5,12 @@ import {
     SideBarViewIcon,
 } from '@toeverything/components/icons';
 import { IconButton, styled } from '@toeverything/components/ui';
+import { useTranslation } from '@toeverything/datasource/i18n';
 import {
     useCurrentEditors,
     useLocalTrigger,
     useShowSettingsSidebar,
 } from '@toeverything/datasource/state';
-import { useCallback, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
 import { EditorBoardSwitcher } from './EditorBoardSwitcher';
 import { fsApiSupported } from './FileSystem';
 import { CurrentPageTitle } from './Title';

libs/components/layout/src/settings-sidebar/ContainerTabs/ContainerTabs.tsx

@@ -4,8 +4,8 @@ import {
     SettingsIcon,
 } from '@toeverything/components/icons';
 import { styled } from '@toeverything/components/ui';
+import { useTranslation } from '@toeverything/datasource/i18n';
 import { cloneElement, useCallback, useMemo, type ReactElement } from 'react';
-import { useTranslation } from 'react-i18next';
 import { Comments } from '../Comments';
 import { useActiveComment } from '../Comments/use-comments';
 import { LayoutSettings } from '../Layout';

libs/components/layout/src/settings-sidebar/Settings/SettingsList.tsx

@@ -6,8 +6,7 @@ import {
     styled,
     Switch,
 } from '@toeverything/components/ui';
-import { useTranslation } from 'react-i18next';
+import { LOCALES, useTranslation } from '@toeverything/datasource/i18n';
-import { options } from '../../i18n';
 import { useSettings } from './use-settings';
 
 export const SettingsList = () => {
@@ -52,7 +51,7 @@ export const SettingsList = () => {
                                     defaultValue={i18n.language}
                                     onChange={changeLanguage}
                                 >
-                                    {options.map(option => (
+                                    {LOCALES.map(option => (
                                         <Option
                                             key={option.value}
                                             value={option.value}

libs/components/layout/src/settings-sidebar/Settings/footer/LastModified.tsx

@@ -1,7 +1,7 @@
 import { styled, Typography } from '@toeverything/components/ui';
+import { useTranslation } from '@toeverything/datasource/i18n';
 import { useUserAndSpaces } from '@toeverything/datasource/state';
 import format from 'date-fns/format';
-import { useTranslation } from 'react-i18next';
 import { usePageLastUpdated, useWorkspaceAndPageId } from '../util';
 
 export const LastModified = () => {

libs/components/layout/src/settings-sidebar/Settings/footer/Logout.tsx

@@ -1,8 +1,8 @@
 import { MoveToIcon } from '@toeverything/components/icons';
 import { ListItem, styled, Typography } from '@toeverything/components/ui';
+import { useTranslation } from '@toeverything/datasource/i18n';
 import { LOGOUT_COOKIES, LOGOUT_LOCAL_STORAGE } from '@toeverything/utils';
 import { getAuth, signOut } from 'firebase/auth';
-import { useTranslation } from 'react-i18next';
 
 const logout = () => {
     LOGOUT_LOCAL_STORAGE.forEach(name => localStorage.removeItem(name));

libs/components/layout/src/settings-sidebar/Settings/use-settings.ts

@@ -1,6 +1,6 @@
 import { message } from '@toeverything/components/ui';
+import { useTranslation } from '@toeverything/datasource/i18n';
 import { copyToClipboard } from '@toeverything/utils';
-import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { useSettingFlags, type SettingFlags } from './use-setting-flags';