refactor(i18n): lazy load languages (#8456)

closes AF-1397

packages/frontend/core/src/commands/affine-i18n.tsx

@@ -0,0 +1,40 @@
+import type { I18n } from '@affine/core/modules/i18n';
+import type { useI18n } from '@affine/i18n';
+import { track } from '@affine/track';
+import { SettingsIcon } from '@blocksuite/icons/rc';
+
+import { registerAffineCommand } from './registry';
+
+export function registerAffineLanguageCommands({
+  i18n,
+  t,
+}: {
+  i18n: I18n;
+  t: ReturnType<typeof useI18n>;
+}) {
+  // Display Language
+  const disposables = i18n.languageList.map(language => {
+    return registerAffineCommand({
+      id: `affine:change-display-language-to-${language.name}`,
+      label: `${t['com.affine.cmdk.affine.display-language.to']()} ${
+        language.originalName
+      }`,
+      category: 'affine:settings',
+      icon: <SettingsIcon />,
+      preconditionStrategy: () =>
+        i18n.currentLanguage$.value.key !== language.key,
+      run() {
+        track.$.cmdk.settings.changeAppSetting({
+          key: 'language',
+          value: language.name,
+        });
+
+        i18n.changeLanguage(language.key);
+      },
+    });
+  });
+
+  return () => {
+    disposables.forEach(dispose => dispose());
+  };
+}

packages/frontend/core/src/commands/affine-settings.tsx

@@ -5,7 +5,6 @@ import { appSettingAtom } from '@toeverything/infra';
 import type { createStore } from 'jotai';
 import type { useTheme } from 'next-themes';
 
-import type { useLanguageHelper } from '../components/hooks/affine/use-language-helper';
 import type { EditorSettingService } from '../modules/editor-settting';
 import { registerAffineCommand } from './registry';
 
@@ -13,17 +12,14 @@ export function registerAffineSettingsCommands({
   t,
   store,
   theme,
-  languageHelper,
   editorSettingService,
 }: {
   t: ReturnType<typeof useI18n>;
   store: ReturnType<typeof createStore>;
   theme: ReturnType<typeof useTheme>;
-  languageHelper: ReturnType<typeof useLanguageHelper>;
   editorSettingService: EditorSettingService;
 }) {
   const unsubs: Array<() => void> = [];
-  const { onLanguageChange, languagesList, currentLanguage } = languageHelper;
   const updateSettings = editorSettingService.editorSetting.set.bind(
     editorSettingService.editorSetting
   );
@@ -148,29 +144,6 @@ export function registerAffineSettingsCommands({
     })
   );
 
-  // Display Language
-  languagesList.forEach(language => {
-    unsubs.push(
-      registerAffineCommand({
-        id: `affine:change-display-language-to-${language.name}`,
-        label: `${t['com.affine.cmdk.affine.display-language.to']()} ${
-          language.originalName
-        }`,
-        category: 'affine:settings',
-        icon: <SettingsIcon />,
-        preconditionStrategy: () => currentLanguage?.tag !== language.tag,
-        run() {
-          track.$.cmdk.settings.changeAppSetting({
-            key: 'language',
-            value: language.name,
-          });
-
-          onLanguageChange(language.tag);
-        },
-      })
-    );
-  });
-
   // Layout Style
   unsubs.push(
     registerAffineCommand({

packages/frontend/core/src/commands/index.ts

@@ -1,5 +1,6 @@
 export * from './affine-creation';
 export * from './affine-help';
+export * from './affine-i18n';
 export * from './affine-layout';
 export * from './affine-navigation';
 export * from './affine-settings';