From 7c0a686cd96bc1486fff6e154b7eb5bc7d8f49d0 Mon Sep 17 00:00:00 2001
From: EYHN <cneyhn@gmail.com>
Date: Thu, 20 Jun 2024 02:19:41 +0000
Subject: [PATCH] refactor(i18n): new hook api (#7273)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# NEW HOOK API

`useI18n`: same as `useAFFiNEI18N`, with additional APIs

```ts
import { useI18n } from '@affine/i18n'

const i18n = useI18n()
i18n['hello world']() -> 你好世界
```

# NEW GLOBAL i18n Instance

`I18n`: use i18n capabilities outside of React

```ts
import { I18n } from '@affine/i18n'

I18n['hello world']() -> 你好世界
```

# NEW TYPES

`I18nKeys` -> all i18n keys

`I18nString` -> An i18n message (key&options)
transfer and store i18n text outside of React
```ts
const msg: I18nString = {
  key: 'helloworld',
  options: {
    arg1: '123'
  }
}

I18n.t(msg) -> 你好世界123
```

before:

```ts
registerCommand('open-page', {
  name: t('command.open-page')
  // ^- translation happens here,
})
```

after:

```ts
registerCommand('open-page', {
  name: { key: 'command.open-page' }
  // ^- store I18nString here, translate when the command render to UI
})
```
---
 .../affine-banner/local-demo-tips.tsx         |  4 +-
 .../affine-other-page-layout/layout.tsx       |  4 +-
 .../use-nav-config.ts                         |  4 +-
 .../auth-components/back-button.tsx           |  4 +-
 .../auth-components/change-email-page.tsx     |  4 +-
 .../auth-components/change-password-page.tsx  |  4 +-
 .../auth-components/confirm-change-email.tsx  |  4 +-
 .../auth-components/email-verified-email.tsx  |  4 +-
 .../auth-components/password-input/index.tsx  |  4 +-
 .../auth-components/set-password-page.tsx     |  4 +-
 .../auth-components/set-password.tsx          |  4 +-
 .../auth-components/sign-in-success-page.tsx  |  4 +-
 .../auth-components/sign-up-page.tsx          |  4 +-
 .../components/disable-public-link/index.tsx  |  4 +-
 .../member-components/accept-invite-page.tsx  |  4 +-
 .../member-components/invite-modal.tsx        |  4 +-
 .../member-components/member-limit-modal.tsx  |  4 +-
 .../not-found-page/not-found-page.tsx         |  6 +-
 .../components/notification-center/index.tsx  |  4 +-
 .../core/src/commands/affine-creation.tsx     |  4 +-
 .../core/src/commands/affine-help.tsx         |  4 +-
 .../core/src/commands/affine-layout.tsx       |  4 +-
 .../core/src/commands/affine-navigation.tsx   |  4 +-
 .../core/src/commands/affine-settings.tsx     |  4 +-
 .../core/src/commands/affine-updates.tsx      |  4 +-
 .../error-basic/error-detail.tsx              |  5 +-
 .../error-fallbacks/any-error-fallback.tsx    |  4 +-
 .../error-fallbacks/no-page-root-fallback.tsx |  4 +-
 .../page-not-found-fallback.tsx               |  4 +-
 .../recoverable-error-fallback.tsx            |  4 +-
 .../affine/ai-onboarding/edgeless.dialog.tsx  |  4 +-
 .../affine/ai-onboarding/general.dialog.tsx   |  7 +-
 .../affine/ai-onboarding/local.dialog.tsx     |  6 +-
 .../affine/auth/after-sign-in-send-email.tsx  |  5 +-
 .../affine/auth/after-sign-up-send-email.tsx  |  5 +-
 .../affine/auth/ai-login-required.tsx         |  4 +-
 .../src/components/affine/auth/send-email.tsx | 10 +--
 .../affine/auth/sign-in-with-password.tsx     |  4 +-
 .../src/components/affine/auth/sign-in.tsx    |  5 +-
 .../affine/auth/user-plan-button.tsx          |  4 +-
 .../affine/create-workspace-modal/index.tsx   |  6 +-
 .../affine/history-tips-modal/index.tsx       |  4 +-
 .../affine/issue-feedback-modal/index.tsx     |  4 +-
 .../page-history-modal/history-modal.tsx      | 11 ++-
 .../confirm-delete-property-modal.tsx         |  5 +-
 .../affine/page-properties/icons-selector.tsx |  4 +-
 .../affine/page-properties/menu-items.tsx     |  6 +-
 .../property-row-value-renderer.tsx           | 11 ++-
 .../affine/page-properties/table.tsx          | 19 +++--
 .../page-properties/tags-inline-editor.tsx    |  6 +-
 .../affine/payment-disable/index.tsx          |  4 +-
 .../quota-reached-modal/cloud-quota-modal.tsx |  4 +-
 .../quota-reached-modal/local-quota-modal.tsx |  4 +-
 .../affine/reference-link/index.tsx           |  6 +-
 .../account-setting/ai-usage-panel.tsx        |  4 +-
 .../setting-modal/account-setting/index.tsx   | 10 +--
 .../account-setting/storage-progress.tsx      |  4 +-
 .../general-setting/about/index.tsx           |  4 +-
 .../about/update-check-section.tsx            |  6 +-
 .../general-setting/appearance/index.tsx      |  8 +-
 .../general-setting/billing/index.tsx         | 23 +++---
 .../experimental-features/index.tsx           |  6 +-
 .../setting-modal/general-setting/index.tsx   |  4 +-
 .../plans/ai/actions/cancel.tsx               |  4 +-
 .../plans/ai/actions/login.tsx                |  4 +-
 .../plans/ai/actions/resume.tsx               |  4 +-
 .../plans/ai/actions/subscribe.tsx            |  4 +-
 .../general-setting/plans/ai/ai-plan.tsx      |  5 +-
 .../general-setting/plans/ai/benefits.tsx     |  6 +-
 .../general-setting/plans/cloud-plans.tsx     |  4 +-
 .../general-setting/plans/index.tsx           |  9 +--
 .../general-setting/plans/layout.tsx          |  6 +-
 .../general-setting/plans/modals.tsx          |  6 +-
 .../general-setting/plans/plan-card.tsx       | 17 ++--
 .../general-setting/shortcuts/index.tsx       |  4 +-
 .../setting-modal/setting-sidebar/index.tsx   | 10 +--
 .../delete-leave-workspace/delete/index.tsx   |  5 +-
 .../delete-leave-workspace/index.tsx          |  4 +-
 .../enable-cloud.tsx                          |  4 +-
 .../new-workspace-setting-detail/export.tsx   |  4 +-
 .../new-workspace-setting-detail/index.tsx    |  4 +-
 .../new-workspace-setting-detail/members.tsx  | 12 +--
 .../new-workspace-setting-detail/profile.tsx  |  4 +-
 .../workspace-setting/properties/index.tsx    | 13 ++-
 .../share-menu/share-export.tsx               |  4 +-
 .../share-menu/share-menu.tsx                 |  8 +-
 .../share-menu/share-page.tsx                 |  6 +-
 .../affine/sign-out-modal/index.tsx           |  4 +-
 .../affine/star-affine-modal/index.tsx        |  4 +-
 .../affine/subscription-landing/index.tsx     |  9 +--
 .../tmp-disable-affine-cloud-modal/index.tsx  |  5 +-
 .../app-sidebar/add-page-button/index.tsx     |  4 +-
 .../app-sidebar/app-updater-button/index.tsx  | 12 +--
 .../app-sidebar/quick-search-input/index.tsx  |  4 +-
 .../sidebar-header/sidebar-switch.tsx         |  4 +-
 .../block-suite-editor/journal-doc-title.tsx  |  4 +-
 .../block-suite-header/favorite/index.tsx     |  4 +-
 .../journal/today-button.tsx                  |  4 +-
 .../block-suite-header/menu/index.tsx         |  4 +-
 .../block-suite-mode-switch/index.tsx         |  6 +-
 .../authenticated-item.tsx                    |  4 +-
 .../cloud/share-header-right-item/present.tsx |  4 +-
 .../share-header-right-item/user-avatar.tsx   |  4 +-
 .../collections/collection-list-header.tsx    |  4 +-
 .../collections/collection-list-item.tsx      |  4 +-
 .../page-list/components/favorite-tag.tsx     |  4 +-
 .../page-list/components/new-page-button.tsx  |  4 +-
 .../components/page-display-menu.tsx          |  4 +-
 .../page-list/docs/page-list-header.tsx       | 10 +--
 .../page-list/docs/virtualized-page-list.tsx  |  5 +-
 .../page-list/filter/date-select.tsx          |  4 +-
 .../page-list/filter/filter-list.tsx          |  4 +-
 .../filter/filter-tag-translation.tsx         |  4 +-
 .../page-list/filter/multi-select.tsx         |  4 +-
 .../src/components/page-list/filter/vars.tsx  |  4 +-
 .../page-list/group-definitions.tsx           |  8 +-
 .../components/page-list/operation-cell.tsx   | 10 +--
 .../disable-public-sharing.tsx                |  4 +-
 .../page-list/operation-menu-items/export.tsx |  6 +-
 .../operation-menu-items/move-to-trash.tsx    |  6 +-
 .../src/components/page-list/page-group.tsx   |  8 +-
 .../src/components/page-list/page-header.tsx  |  4 +-
 .../components/page-list/tags/create-tag.tsx  |  4 +-
 .../page-list/tags/tag-list-header.tsx        |  4 +-
 .../page-list/tags/tag-list-item.tsx          |  4 +-
 .../page-list/view/collection-list.tsx        |  6 +-
 .../page-list/view/collection-operations.tsx  |  4 +-
 .../page-list/view/create-collection.tsx      |  6 +-
 .../view/edit-collection/edit-collection.tsx  |  6 +-
 .../view/edit-collection/pages-mode.tsx       |  4 +-
 .../view/edit-collection/rules-mode.tsx       |  7 +-
 .../view/edit-collection/select-page.tsx      |  7 +-
 .../view/save-as-collection-button.tsx        |  4 +-
 .../components/page-list/view/use-action.tsx  |  4 +-
 .../page-list/virtualized-trash-list.tsx      |  5 +-
 .../src/components/pure/file-upload/index.tsx |  4 +-
 .../src/components/pure/help-island/index.tsx |  4 +-
 .../pure/trash-page-footer/index.tsx          |  4 +-
 .../pure/workspace-mode-filter-tab/index.tsx  |  4 +-
 .../collections/collections-list.tsx          |  6 +-
 .../workspace-slider-bar/collections/doc.tsx  |  4 +-
 .../components/operation-item.tsx             |  4 +-
 .../components/operation-menu-button.tsx      |  4 +-
 .../components/postfix-item.tsx               |  4 +-
 .../components/reference-page.tsx             |  4 +-
 .../favorite/empty-item.tsx                   |  4 +-
 .../favorite/favorite-list.tsx                |  4 +-
 .../favorite/favourite-nav-item.tsx           |  4 +-
 .../add-workspace/index.tsx                   |  4 +-
 .../user-with-workspace-list/index.tsx        |  4 +-
 .../workspace-list/index.tsx                  |  6 +-
 .../workspace-card/index.tsx                  |  4 +-
 .../root-app-sidebar/import-page.tsx          |  4 +-
 .../src/components/root-app-sidebar/index.tsx |  4 +-
 .../root-app-sidebar/journal-button.tsx       |  4 +-
 .../components/root-app-sidebar/user-info.tsx |  4 +-
 .../frontend/core/src/components/top-tip.tsx  |  5 +-
 .../components/workspace-upgrade/upgrade.tsx  |  4 +-
 .../hooks/affine/use-all-page-list-config.tsx |  4 +-
 .../src/hooks/affine/use-enable-cloud.tsx     |  4 +-
 .../core/src/hooks/affine/use-export-page.ts  |  4 +-
 .../src/hooks/affine/use-global-dnd-helper.ts |  4 +-
 .../src/hooks/affine/use-is-shared-page.tsx   | 14 +---
 .../src/hooks/affine/use-language-helper.ts   |  4 +-
 ...se-register-blocksuite-editor-commands.tsx |  4 +-
 .../core/src/hooks/affine/use-share-url.ts    |  4 +-
 .../core/src/hooks/affine/use-shortcuts.ts    | 18 ++---
 .../hooks/affine/use-trash-modal-helper.ts    |  4 +-
 .../hooks/use-register-workspace-commands.ts  |  4 +-
 .../src/modules/cmdk/views/data-hooks.tsx     | 13 ++-
 .../core/src/modules/cmdk/views/main.tsx      | 22 ++---
 .../core/src/modules/cmdk/views/not-found.tsx |  4 +-
 .../multi-tabs/tabs/journal.tsx               | 10 +--
 .../navigation/view/navigation-buttons.tsx    |  4 +-
 .../peek-view/view/doc-peek-controls.tsx      |  4 +-
 .../src/modules/tag/view/delete-tag-modal.tsx |  5 +-
 .../workbench/view/split-view/panel.tsx       |  4 +-
 packages/frontend/core/src/pages/auth.tsx     |  4 +-
 packages/frontend/core/src/pages/expired.tsx  |  4 +-
 packages/frontend/core/src/pages/open-app.tsx |  5 +-
 .../src/pages/share/share-detail-page.tsx     |  4 +-
 .../core/src/pages/share/share-footer.tsx     |  4 +-
 .../pages/workspace/all-collection/index.tsx  |  4 +-
 .../src/pages/workspace/collection/index.tsx  |  5 +-
 .../src/pages/workspace/page-list-empty.tsx   |  9 +--
 .../core/src/pages/workspace/trash-page.tsx   |  4 +-
 packages/frontend/i18n/README.md              |  8 +-
 packages/frontend/i18n/package.json           |  4 +-
 packages/frontend/i18n/src/i18n.ts            | 80 +++++++++++++------
 packages/frontend/i18n/src/index.ts           | 17 +---
 .../i18n/src/utils/__tests__/time.spec.ts     |  6 +-
 tsconfig.json                                 |  1 -
 yarn.lock                                     |  1 +
 193 files changed, 553 insertions(+), 575 deletions(-)

diff --git a/packages/frontend/component/src/components/affine-banner/local-demo-tips.tsx b/packages/frontend/component/src/components/affine-banner/local-demo-tips.tsx
index 56a82848c4..b42be3727c 100644
--- a/packages/frontend/component/src/components/affine-banner/local-demo-tips.tsx
+++ b/packages/frontend/component/src/components/affine-banner/local-demo-tips.tsx
@@ -1,5 +1,5 @@
 import { Button, IconButton } from '@affine/component/ui/button';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { CloseIcon } from '@blocksuite/icons/rc';
 import { useCallback } from 'react';
 
@@ -18,7 +18,7 @@ export const LocalDemoTips = ({
   onLogin,
   onEnableCloud,
 }: LocalDemoTipsProps) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const buttonLabel = isLoggedIn
     ? t['Enable AFFiNE Cloud']()
     : t['Sign in and Enable']();
diff --git a/packages/frontend/component/src/components/affine-other-page-layout/layout.tsx b/packages/frontend/component/src/components/affine-other-page-layout/layout.tsx
index b42b099fa3..197a00c508 100644
--- a/packages/frontend/component/src/components/affine-other-page-layout/layout.tsx
+++ b/packages/frontend/component/src/components/affine-other-page-layout/layout.tsx
@@ -1,5 +1,5 @@
 import { Button } from '@affine/component/ui/button';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { Logo1Icon } from '@blocksuite/icons/rc';
 import { useCallback } from 'react';
 
@@ -12,7 +12,7 @@ export const AffineOtherPageLayout = ({
 }: {
   children: React.ReactNode;
 }) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   const openDownloadLink = useCallback(() => {
     open(runtimeConfig.downloadUrl, '_blank');
diff --git a/packages/frontend/component/src/components/affine-other-page-layout/use-nav-config.ts b/packages/frontend/component/src/components/affine-other-page-layout/use-nav-config.ts
index 379da19bf7..bafc81c3f0 100644
--- a/packages/frontend/component/src/components/affine-other-page-layout/use-nav-config.ts
+++ b/packages/frontend/component/src/components/affine-other-page-layout/use-nav-config.ts
@@ -1,8 +1,8 @@
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { useMemo } from 'react';
 
 export const useNavConfig = () => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   return useMemo(
     () => [
       {
diff --git a/packages/frontend/component/src/components/auth-components/back-button.tsx b/packages/frontend/component/src/components/auth-components/back-button.tsx
index 668e611c7c..eade042a77 100644
--- a/packages/frontend/component/src/components/auth-components/back-button.tsx
+++ b/packages/frontend/component/src/components/auth-components/back-button.tsx
@@ -1,4 +1,4 @@
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { ArrowLeftSmallIcon } from '@blocksuite/icons/rc';
 import type { FC } from 'react';
 
@@ -6,7 +6,7 @@ import type { ButtonProps } from '../../ui/button';
 import { Button } from '../../ui/button';
 
 export const BackButton: FC<ButtonProps> = props => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   return (
     <Button
       type="plain"
diff --git a/packages/frontend/component/src/components/auth-components/change-email-page.tsx b/packages/frontend/component/src/components/auth-components/change-email-page.tsx
index c3694dc130..d2dbaa75f1 100644
--- a/packages/frontend/component/src/components/auth-components/change-email-page.tsx
+++ b/packages/frontend/component/src/components/auth-components/change-email-page.tsx
@@ -1,4 +1,4 @@
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { useCallback, useState } from 'react';
 
 import { Button } from '../../ui/button';
@@ -13,7 +13,7 @@ export const ChangeEmailPage = ({
   onChangeEmail: (email: string) => Promise<boolean>;
   onOpenAffine: () => void;
 }) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const [hasSetUp, setHasSetUp] = useState(false);
   const [email, setEmail] = useState('');
   const [isValidEmail, setIsValidEmail] = useState(true);
diff --git a/packages/frontend/component/src/components/auth-components/change-password-page.tsx b/packages/frontend/component/src/components/auth-components/change-password-page.tsx
index ca2a9381f3..ca5582488e 100644
--- a/packages/frontend/component/src/components/auth-components/change-password-page.tsx
+++ b/packages/frontend/component/src/components/auth-components/change-password-page.tsx
@@ -1,5 +1,5 @@
 import type { PasswordLimitsFragment } from '@affine/graphql';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import type { FC } from 'react';
 import { useCallback, useState } from 'react';
 
@@ -20,7 +20,7 @@ export const ChangePasswordPage: FC<{
   onSetPassword: propsOnSetPassword,
   onOpenAffine,
 }) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const [hasSetUp, setHasSetUp] = useState(false);
 
   const onSetPassword = useCallback(
diff --git a/packages/frontend/component/src/components/auth-components/confirm-change-email.tsx b/packages/frontend/component/src/components/auth-components/confirm-change-email.tsx
index bd49495333..0d2fb8fcda 100644
--- a/packages/frontend/component/src/components/auth-components/confirm-change-email.tsx
+++ b/packages/frontend/component/src/components/auth-components/confirm-change-email.tsx
@@ -1,4 +1,4 @@
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import type { FC } from 'react';
 
 import { Button } from '../../ui/button';
@@ -7,7 +7,7 @@ import { AuthPageContainer } from './auth-page-container';
 export const ConfirmChangeEmail: FC<{
   onOpenAffine: () => void;
 }> = ({ onOpenAffine }) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   return (
     <AuthPageContainer
diff --git a/packages/frontend/component/src/components/auth-components/email-verified-email.tsx b/packages/frontend/component/src/components/auth-components/email-verified-email.tsx
index bd49495333..0d2fb8fcda 100644
--- a/packages/frontend/component/src/components/auth-components/email-verified-email.tsx
+++ b/packages/frontend/component/src/components/auth-components/email-verified-email.tsx
@@ -1,4 +1,4 @@
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import type { FC } from 'react';
 
 import { Button } from '../../ui/button';
@@ -7,7 +7,7 @@ import { AuthPageContainer } from './auth-page-container';
 export const ConfirmChangeEmail: FC<{
   onOpenAffine: () => void;
 }> = ({ onOpenAffine }) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   return (
     <AuthPageContainer
diff --git a/packages/frontend/component/src/components/auth-components/password-input/index.tsx b/packages/frontend/component/src/components/auth-components/password-input/index.tsx
index f16063dc83..d2aaaa5a05 100644
--- a/packages/frontend/component/src/components/auth-components/password-input/index.tsx
+++ b/packages/frontend/component/src/components/auth-components/password-input/index.tsx
@@ -1,5 +1,5 @@
 import { type PasswordLimitsFragment } from '@affine/graphql';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { type Options, passwordStrength } from 'check-password-strength';
 import { type FC, useEffect, useMemo } from 'react';
 import { useCallback, useState } from 'react';
@@ -43,7 +43,7 @@ export const PasswordInput: FC<
     onPrevent: () => void;
   }
 > = ({ passwordLimits, onPass, onPrevent, ...inputProps }) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   const [status, setStatus] = useState<Status | null>(null);
   const [confirmStatus, setConfirmStatus] = useState<
diff --git a/packages/frontend/component/src/components/auth-components/set-password-page.tsx b/packages/frontend/component/src/components/auth-components/set-password-page.tsx
index df14d7a182..8fb58c5e37 100644
--- a/packages/frontend/component/src/components/auth-components/set-password-page.tsx
+++ b/packages/frontend/component/src/components/auth-components/set-password-page.tsx
@@ -1,5 +1,5 @@
 import type { PasswordLimitsFragment } from '@affine/graphql';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import type { FC } from 'react';
 import { useCallback, useState } from 'react';
 
@@ -20,7 +20,7 @@ export const SetPasswordPage: FC<{
   onSetPassword: propsOnSetPassword,
   onOpenAffine,
 }) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const [hasSetUp, setHasSetUp] = useState(false);
 
   const onSetPassword = useCallback(
diff --git a/packages/frontend/component/src/components/auth-components/set-password.tsx b/packages/frontend/component/src/components/auth-components/set-password.tsx
index 9989d51878..5496436a10 100644
--- a/packages/frontend/component/src/components/auth-components/set-password.tsx
+++ b/packages/frontend/component/src/components/auth-components/set-password.tsx
@@ -1,5 +1,5 @@
 import type { PasswordLimitsFragment } from '@affine/graphql';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import type { FC } from 'react';
 import { useCallback, useRef, useState } from 'react';
 
@@ -13,7 +13,7 @@ export const SetPassword: FC<{
   onLater?: () => void;
   onSetPassword: (password: string) => void;
 }> = ({ passwordLimits, onLater, onSetPassword, showLater = false }) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   const [passwordPass, setPasswordPass] = useState(false);
   const passwordRef = useRef('');
diff --git a/packages/frontend/component/src/components/auth-components/sign-in-success-page.tsx b/packages/frontend/component/src/components/auth-components/sign-in-success-page.tsx
index 37b0083e8f..cac2f4bd03 100644
--- a/packages/frontend/component/src/components/auth-components/sign-in-success-page.tsx
+++ b/packages/frontend/component/src/components/auth-components/sign-in-success-page.tsx
@@ -1,4 +1,4 @@
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import type { FC } from 'react';
 
 import { Button } from '../../ui/button';
@@ -7,7 +7,7 @@ import { AuthPageContainer } from './auth-page-container';
 export const SignInSuccessPage: FC<{
   onOpenAffine: () => void;
 }> = ({ onOpenAffine }) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   return (
     <AuthPageContainer
       title={t['com.affine.auth.signed.success.title']()}
diff --git a/packages/frontend/component/src/components/auth-components/sign-up-page.tsx b/packages/frontend/component/src/components/auth-components/sign-up-page.tsx
index 24401e431c..b683ac6b32 100644
--- a/packages/frontend/component/src/components/auth-components/sign-up-page.tsx
+++ b/packages/frontend/component/src/components/auth-components/sign-up-page.tsx
@@ -1,5 +1,5 @@
 import type { PasswordLimitsFragment } from '@affine/graphql';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import type { FC } from 'react';
 import { useCallback, useState } from 'react';
 
@@ -21,7 +21,7 @@ export const SignUpPage: FC<{
   onOpenAffine,
   openButtonText,
 }) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const [hasSetUp, setHasSetUp] = useState(false);
 
   const onSetPassword = useCallback(
diff --git a/packages/frontend/component/src/components/disable-public-link/index.tsx b/packages/frontend/component/src/components/disable-public-link/index.tsx
index ec501c3ace..b0b25b1f59 100644
--- a/packages/frontend/component/src/components/disable-public-link/index.tsx
+++ b/packages/frontend/component/src/components/disable-public-link/index.tsx
@@ -1,10 +1,10 @@
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 
 import type { ConfirmModalProps } from '../../ui/modal';
 import { ConfirmModal } from '../../ui/modal';
 
 export const PublicLinkDisableModal = (props: ConfirmModalProps) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   return (
     <ConfirmModal
diff --git a/packages/frontend/component/src/components/member-components/accept-invite-page.tsx b/packages/frontend/component/src/components/member-components/accept-invite-page.tsx
index 251c40d802..1005ab44f1 100644
--- a/packages/frontend/component/src/components/member-components/accept-invite-page.tsx
+++ b/packages/frontend/component/src/components/member-components/accept-invite-page.tsx
@@ -1,6 +1,6 @@
 import { AuthPageContainer } from '@affine/component/auth-components';
 import type { GetInviteInfoQuery } from '@affine/graphql';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 
 import { Avatar } from '../../ui/avatar';
 import { Button } from '../../ui/button';
@@ -13,7 +13,7 @@ export const AcceptInvitePage = ({
   onOpenWorkspace: () => void;
   inviteInfo: GetInviteInfoQuery['getInviteInfo'];
 }) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   return (
     <AuthPageContainer
       title={t['Successfully joined!']()}
diff --git a/packages/frontend/component/src/components/member-components/invite-modal.tsx b/packages/frontend/component/src/components/member-components/invite-modal.tsx
index 270484a0d8..7dd291bfa7 100644
--- a/packages/frontend/component/src/components/member-components/invite-modal.tsx
+++ b/packages/frontend/component/src/components/member-components/invite-modal.tsx
@@ -1,5 +1,5 @@
 import { Permission } from '@affine/graphql';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { useCallback, useEffect, useState } from 'react';
 
 import { ConfirmModal } from '../../ui/modal';
@@ -19,7 +19,7 @@ export const InviteModal = ({
   onConfirm,
   isMutating,
 }: InviteModalProps) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const [inviteEmail, setInviteEmail] = useState('');
   const [permission] = useState(Permission.Write);
   const [isValidEmail, setIsValidEmail] = useState(true);
diff --git a/packages/frontend/component/src/components/member-components/member-limit-modal.tsx b/packages/frontend/component/src/components/member-components/member-limit-modal.tsx
index 66762639f5..b902352920 100644
--- a/packages/frontend/component/src/components/member-components/member-limit-modal.tsx
+++ b/packages/frontend/component/src/components/member-components/member-limit-modal.tsx
@@ -1,5 +1,5 @@
 import { ConfirmModal } from '@affine/component/ui/modal';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { useCallback } from 'react';
 
 export interface MemberLimitModalProps {
@@ -19,7 +19,7 @@ export const MemberLimitModal = ({
   setOpen,
   onConfirm,
 }: MemberLimitModalProps) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const handleConfirm = useCallback(() => {
     setOpen(false);
     if (isFreePlan) {
diff --git a/packages/frontend/component/src/components/not-found-page/not-found-page.tsx b/packages/frontend/component/src/components/not-found-page/not-found-page.tsx
index e9c832d9f2..7c30372b46 100644
--- a/packages/frontend/component/src/components/not-found-page/not-found-page.tsx
+++ b/packages/frontend/component/src/components/not-found-page/not-found-page.tsx
@@ -1,4 +1,4 @@
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { SignOutIcon } from '@blocksuite/icons/rc';
 
 import { Avatar } from '../../ui/avatar';
@@ -25,7 +25,7 @@ export const NoPermissionOrNotFound = ({
   onSignOut,
   signInComponent,
 }: NotFoundPageProps) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   return (
     <AffineOtherPageLayout>
@@ -69,7 +69,7 @@ export const NotFoundPage = ({
   onBack,
   onSignOut,
 }: NotFoundPageProps) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   return (
     <AffineOtherPageLayout>
diff --git a/packages/frontend/component/src/components/notification-center/index.tsx b/packages/frontend/component/src/components/notification-center/index.tsx
index 0cf0022398..6d2929ae50 100644
--- a/packages/frontend/component/src/components/notification-center/index.tsx
+++ b/packages/frontend/component/src/components/notification-center/index.tsx
@@ -2,7 +2,7 @@
 // License on the MIT
 // https://github.com/emilkowalski/sonner/blob/5cb703edc108a23fd74979235c2f3c4005edd2a7/src/index.tsx
 
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { CloseIcon, InformationFillDuotoneIcon } from '@blocksuite/icons/rc';
 import * as Toast from '@radix-ui/react-toast';
 import clsx from 'clsx';
@@ -72,7 +72,7 @@ const typeColorMap = {
 };
 
 function NotificationCard(props: NotificationCardProps): ReactNode {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const removeNotification = useSetAtom(removeNotificationAtom);
   const { notification, notifications, setHeights, heights, index } = props;
 
diff --git a/packages/frontend/core/src/commands/affine-creation.tsx b/packages/frontend/core/src/commands/affine-creation.tsx
index 0f63c055d5..b2f5697faf 100644
--- a/packages/frontend/core/src/commands/affine-creation.tsx
+++ b/packages/frontend/core/src/commands/affine-creation.tsx
@@ -1,4 +1,4 @@
-import type { useAFFiNEI18N } from '@affine/i18n/hooks';
+import type { useI18n } from '@affine/i18n';
 import { ImportIcon, PlusIcon } from '@blocksuite/icons/rc';
 import type { createStore } from 'jotai';
 
@@ -11,7 +11,7 @@ export function registerAffineCreationCommands({
   pageHelper,
   t,
 }: {
-  t: ReturnType<typeof useAFFiNEI18N>;
+  t: ReturnType<typeof useI18n>;
   store: ReturnType<typeof createStore>;
   pageHelper: ReturnType<typeof usePageHelper>;
 }) {
diff --git a/packages/frontend/core/src/commands/affine-help.tsx b/packages/frontend/core/src/commands/affine-help.tsx
index 6e34b36ead..dfb10a3c8e 100644
--- a/packages/frontend/core/src/commands/affine-help.tsx
+++ b/packages/frontend/core/src/commands/affine-help.tsx
@@ -1,4 +1,4 @@
-import type { useAFFiNEI18N } from '@affine/i18n/hooks';
+import type { useI18n } from '@affine/i18n';
 import { ContactWithUsIcon, NewIcon } from '@blocksuite/icons/rc';
 import type { createStore } from 'jotai';
 
@@ -10,7 +10,7 @@ export function registerAffineHelpCommands({
   t,
   store,
 }: {
-  t: ReturnType<typeof useAFFiNEI18N>;
+  t: ReturnType<typeof useI18n>;
   store: ReturnType<typeof createStore>;
 }) {
   const unsubs: Array<() => void> = [];
diff --git a/packages/frontend/core/src/commands/affine-layout.tsx b/packages/frontend/core/src/commands/affine-layout.tsx
index 618773696a..584927f263 100644
--- a/packages/frontend/core/src/commands/affine-layout.tsx
+++ b/packages/frontend/core/src/commands/affine-layout.tsx
@@ -1,4 +1,4 @@
-import type { useAFFiNEI18N } from '@affine/i18n/hooks';
+import type { useI18n } from '@affine/i18n';
 import { SidebarIcon } from '@blocksuite/icons/rc';
 import type { createStore } from 'jotai';
 
@@ -9,7 +9,7 @@ export function registerAffineLayoutCommands({
   t,
   store,
 }: {
-  t: ReturnType<typeof useAFFiNEI18N>;
+  t: ReturnType<typeof useI18n>;
   store: ReturnType<typeof createStore>;
 }) {
   const unsubs: Array<() => void> = [];
diff --git a/packages/frontend/core/src/commands/affine-navigation.tsx b/packages/frontend/core/src/commands/affine-navigation.tsx
index afbae8e84e..678ba342d4 100644
--- a/packages/frontend/core/src/commands/affine-navigation.tsx
+++ b/packages/frontend/core/src/commands/affine-navigation.tsx
@@ -1,5 +1,5 @@
 import { WorkspaceSubPath } from '@affine/core/shared';
-import type { useAFFiNEI18N } from '@affine/i18n/hooks';
+import type { useI18n } from '@affine/i18n';
 import { ArrowRightBigIcon } from '@blocksuite/icons/rc';
 import type { DocCollection } from '@blocksuite/store';
 import type { createStore } from 'jotai';
@@ -15,7 +15,7 @@ export function registerAffineNavigationCommands({
   docCollection,
   navigationHelper,
 }: {
-  t: ReturnType<typeof useAFFiNEI18N>;
+  t: ReturnType<typeof useI18n>;
   store: ReturnType<typeof createStore>;
   navigationHelper: ReturnType<typeof useNavigateHelper>;
   docCollection: DocCollection;
diff --git a/packages/frontend/core/src/commands/affine-settings.tsx b/packages/frontend/core/src/commands/affine-settings.tsx
index cf5a961ef7..78c0aee75f 100644
--- a/packages/frontend/core/src/commands/affine-settings.tsx
+++ b/packages/frontend/core/src/commands/affine-settings.tsx
@@ -1,4 +1,4 @@
-import type { useAFFiNEI18N } from '@affine/i18n/hooks';
+import type { useI18n } from '@affine/i18n';
 import { SettingsIcon } from '@blocksuite/icons/rc';
 import type { AffineEditorContainer } from '@blocksuite/presets';
 import { appSettingAtom } from '@toeverything/infra';
@@ -14,7 +14,7 @@ export function registerAffineSettingsCommands({
   theme,
   languageHelper,
 }: {
-  t: ReturnType<typeof useAFFiNEI18N>;
+  t: ReturnType<typeof useI18n>;
   store: ReturnType<typeof createStore>;
   theme: ReturnType<typeof useTheme>;
   languageHelper: ReturnType<typeof useLanguageHelper>;
diff --git a/packages/frontend/core/src/commands/affine-updates.tsx b/packages/frontend/core/src/commands/affine-updates.tsx
index 7dd78060c7..394ef32913 100644
--- a/packages/frontend/core/src/commands/affine-updates.tsx
+++ b/packages/frontend/core/src/commands/affine-updates.tsx
@@ -1,6 +1,6 @@
 import { updateReadyAtom } from '@affine/core/hooks/use-app-updater';
 import { apis } from '@affine/electron-api';
-import type { useAFFiNEI18N } from '@affine/i18n/hooks';
+import type { useI18n } from '@affine/i18n';
 import { ResetIcon } from '@blocksuite/icons/rc';
 import type { createStore } from 'jotai';
 
@@ -10,7 +10,7 @@ export function registerAffineUpdatesCommands({
   t,
   store,
 }: {
-  t: ReturnType<typeof useAFFiNEI18N>;
+  t: ReturnType<typeof useI18n>;
   store: ReturnType<typeof createStore>;
 }) {
   const unsubs: Array<() => void> = [];
diff --git a/packages/frontend/core/src/components/affine/affine-error-boundary/error-basic/error-detail.tsx b/packages/frontend/core/src/components/affine/affine-error-boundary/error-basic/error-detail.tsx
index abd512fe4d..c03972f092 100644
--- a/packages/frontend/core/src/components/affine/affine-error-boundary/error-basic/error-detail.tsx
+++ b/packages/frontend/core/src/components/affine/affine-error-boundary/error-basic/error-detail.tsx
@@ -1,7 +1,6 @@
 import { Button } from '@affine/component/ui/button';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
-import { Trans } from '@affine/i18n';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { Trans, useI18n } from '@affine/i18n';
 import { useTheme } from 'next-themes';
 import type { FC, PropsWithChildren, ReactNode } from 'react';
 import { useState } from 'react';
@@ -58,7 +57,7 @@ export const ErrorDetail: FC<ErrorDetailProps> = props => {
   } = props;
   const descriptions = Array.isArray(description) ? description : [description];
   const [isBtnLoading, setBtnLoading] = useState(false);
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const { resolvedTheme } = useTheme();
 
   const onBtnClick = useAsyncCallback(async () => {
diff --git a/packages/frontend/core/src/components/affine/affine-error-boundary/error-fallbacks/any-error-fallback.tsx b/packages/frontend/core/src/components/affine/affine-error-boundary/error-fallbacks/any-error-fallback.tsx
index 27106ec09e..4ae326f421 100644
--- a/packages/frontend/core/src/components/affine/affine-error-boundary/error-fallbacks/any-error-fallback.tsx
+++ b/packages/frontend/core/src/components/affine/affine-error-boundary/error-fallbacks/any-error-fallback.tsx
@@ -1,4 +1,4 @@
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import type { FC } from 'react';
 import { useCallback } from 'react';
 
@@ -10,7 +10,7 @@ import type { FallbackProps } from '../error-basic/fallback-creator';
  */
 export const AnyErrorFallback: FC<FallbackProps> = props => {
   const { error } = props;
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   const reloadPage = useCallback(() => {
     document.location.reload();
diff --git a/packages/frontend/core/src/components/affine/affine-error-boundary/error-fallbacks/no-page-root-fallback.tsx b/packages/frontend/core/src/components/affine/affine-error-boundary/error-fallbacks/no-page-root-fallback.tsx
index 33a37d4824..aa44b260e3 100644
--- a/packages/frontend/core/src/components/affine/affine-error-boundary/error-fallbacks/no-page-root-fallback.tsx
+++ b/packages/frontend/core/src/components/affine/affine-error-boundary/error-fallbacks/no-page-root-fallback.tsx
@@ -1,5 +1,5 @@
 import { NoPageRootError } from '@affine/core/components/blocksuite/block-suite-editor/no-page-error';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 
 import { ContactUS, ErrorDetail } from '../error-basic/error-detail';
 import { createErrorFallback } from '../error-basic/fallback-creator';
@@ -8,7 +8,7 @@ export const NoPageRootFallback = createErrorFallback(
   NoPageRootError,
   props => {
     const { resetError } = props;
-    const t = useAFFiNEI18N();
+    const t = useI18n();
 
     return (
       <ErrorDetail
diff --git a/packages/frontend/core/src/components/affine/affine-error-boundary/error-fallbacks/page-not-found-fallback.tsx b/packages/frontend/core/src/components/affine/affine-error-boundary/error-fallbacks/page-not-found-fallback.tsx
index 2c8ce3a70c..5e11dab99e 100644
--- a/packages/frontend/core/src/components/affine/affine-error-boundary/error-fallbacks/page-not-found-fallback.tsx
+++ b/packages/frontend/core/src/components/affine/affine-error-boundary/error-fallbacks/page-not-found-fallback.tsx
@@ -1,5 +1,5 @@
 import { PageNotFoundError } from '@affine/env/constant';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { useCallback } from 'react';
 
 import {
@@ -10,7 +10,7 @@ import { ErrorDetail, ErrorStatus } from '../error-basic/error-detail';
 import { createErrorFallback } from '../error-basic/fallback-creator';
 
 export const PageNotFoundDetail = createErrorFallback(PageNotFoundError, () => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const { jumpToIndex } = useNavigateHelper();
 
   const onBtnClick = useCallback(
diff --git a/packages/frontend/core/src/components/affine/affine-error-boundary/error-fallbacks/recoverable-error-fallback.tsx b/packages/frontend/core/src/components/affine/affine-error-boundary/error-fallbacks/recoverable-error-fallback.tsx
index 5c872f71d4..f88e101849 100644
--- a/packages/frontend/core/src/components/affine/affine-error-boundary/error-fallbacks/recoverable-error-fallback.tsx
+++ b/packages/frontend/core/src/components/affine/affine-error-boundary/error-fallbacks/recoverable-error-fallback.tsx
@@ -1,4 +1,4 @@
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { useCallback, useMemo, useState } from 'react';
 
 import { RecoverableError } from '../../../../unexpected-application-state/errors';
@@ -9,7 +9,7 @@ export const RecoverableErrorFallback = createErrorFallback(
   RecoverableError,
   props => {
     const { error, resetError } = props;
-    const t = useAFFiNEI18N();
+    const t = useI18n();
     const [count, rerender] = useState(0);
 
     const canRetry = error.canRetry();
diff --git a/packages/frontend/core/src/components/affine/ai-onboarding/edgeless.dialog.tsx b/packages/frontend/core/src/components/affine/ai-onboarding/edgeless.dialog.tsx
index cb55217523..a7da0b4040 100644
--- a/packages/frontend/core/src/components/affine/ai-onboarding/edgeless.dialog.tsx
+++ b/packages/frontend/core/src/components/affine/ai-onboarding/edgeless.dialog.tsx
@@ -2,7 +2,7 @@ import { Button, FlexWrapper, notify } from '@affine/component';
 import { openSettingModalAtom } from '@affine/core/atoms';
 import { SubscriptionService } from '@affine/core/modules/cloud';
 import { mixpanel } from '@affine/core/utils';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { AiIcon } from '@blocksuite/icons/rc';
 import {
   DocService,
@@ -52,7 +52,7 @@ export const AIOnboardingEdgeless = () => {
     SubscriptionService,
   });
 
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const notifyId = useLiveData(edgelessNotifyId$);
   const generalAIOnboardingOpened = useLiveData(showAIOnboardingGeneral$);
   const aiSubscription = useLiveData(subscriptionService.subscription.ai$);
diff --git a/packages/frontend/core/src/components/affine/ai-onboarding/general.dialog.tsx b/packages/frontend/core/src/components/affine/ai-onboarding/general.dialog.tsx
index c0ce72e86c..b1033b1a4f 100644
--- a/packages/frontend/core/src/components/affine/ai-onboarding/general.dialog.tsx
+++ b/packages/frontend/core/src/components/affine/ai-onboarding/general.dialog.tsx
@@ -3,8 +3,7 @@ import { openSettingModalAtom } from '@affine/core/atoms';
 import { useBlurRoot } from '@affine/core/hooks/use-blur-root';
 import { AuthService, SubscriptionService } from '@affine/core/modules/cloud';
 import { mixpanel } from '@affine/core/utils';
-import { Trans } from '@affine/i18n';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { Trans, useI18n } from '@affine/i18n';
 import { ArrowLeftSmallIcon } from '@blocksuite/icons/rc';
 import { useLiveData, useServices } from '@toeverything/infra';
 import { useAtom } from 'jotai';
@@ -18,7 +17,7 @@ import { Slider } from './slider';
 import { showAIOnboardingGeneral$ } from './state';
 
 type PlayListItem = { video: string; title: ReactNode; desc: ReactNode };
-type Translate = ReturnType<typeof useAFFiNEI18N>;
+type Translate = ReturnType<typeof useI18n>;
 
 const getPlayList = (t: Translate): Array<PlayListItem> => [
   {
@@ -92,7 +91,7 @@ export const AIOnboardingGeneral = () => {
   const prevVideoRef = useRef<HTMLVideoElement | null>(null);
   const loginStatus = useLiveData(authService.session.status$);
   const isLoggedIn = loginStatus === 'authenticated';
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const open = useLiveData(showAIOnboardingGeneral$);
   const aiSubscription = useLiveData(subscriptionService.subscription.ai$);
   const [index, setIndex] = useState(0);
diff --git a/packages/frontend/core/src/components/affine/ai-onboarding/local.dialog.tsx b/packages/frontend/core/src/components/affine/ai-onboarding/local.dialog.tsx
index 3a638bd021..4dc757a96c 100644
--- a/packages/frontend/core/src/components/affine/ai-onboarding/local.dialog.tsx
+++ b/packages/frontend/core/src/components/affine/ai-onboarding/local.dialog.tsx
@@ -4,7 +4,7 @@ import {
   useNavigateHelper,
 } from '@affine/core/hooks/use-navigate-helper';
 import { AuthService } from '@affine/core/modules/cloud';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { AiIcon } from '@blocksuite/icons/rc';
 import { useLiveData, useService } from '@toeverything/infra';
 import { cssVar } from '@toeverything/theme';
@@ -30,7 +30,7 @@ const LocalOnboardingAnimation = () => {
 };
 
 const FooterActions = ({ onDismiss }: { onDismiss: () => void }) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const authService = useService(AuthService);
   const loginStatus = useLiveData(authService.session.status$);
   const loggedIn = loginStatus === 'authenticated';
@@ -64,7 +64,7 @@ const FooterActions = ({ onDismiss }: { onDismiss: () => void }) => {
 };
 
 export const AIOnboardingLocal = () => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const authService = useService(AuthService);
   const notifyId = useLiveData(localNotifyId$);
   const timeoutRef = useRef<ReturnType<typeof setTimeout>>();
diff --git a/packages/frontend/core/src/components/affine/auth/after-sign-in-send-email.tsx b/packages/frontend/core/src/components/affine/auth/after-sign-in-send-email.tsx
index 17e89bcabd..ed3a76d213 100644
--- a/packages/frontend/core/src/components/affine/auth/after-sign-in-send-email.tsx
+++ b/packages/frontend/core/src/components/affine/auth/after-sign-in-send-email.tsx
@@ -8,8 +8,7 @@ import {
 import { Button } from '@affine/component/ui/button';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
 import { AuthService } from '@affine/core/modules/cloud';
-import { Trans } from '@affine/i18n';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { Trans, useI18n } from '@affine/i18n';
 import { useLiveData, useService } from '@toeverything/infra';
 import { useCallback, useEffect, useState } from 'react';
 
@@ -36,7 +35,7 @@ export const AfterSignInSendEmail = ({
 
   const [isSending, setIsSending] = useState(false);
 
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const authService = useService(AuthService);
   useEffect(() => {
     const timer = setInterval(() => {
diff --git a/packages/frontend/core/src/components/affine/auth/after-sign-up-send-email.tsx b/packages/frontend/core/src/components/affine/auth/after-sign-up-send-email.tsx
index a8cc366601..77a09e2620 100644
--- a/packages/frontend/core/src/components/affine/auth/after-sign-up-send-email.tsx
+++ b/packages/frontend/core/src/components/affine/auth/after-sign-up-send-email.tsx
@@ -7,8 +7,7 @@ import {
 } from '@affine/component/auth-components';
 import { Button } from '@affine/component/ui/button';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
-import { Trans } from '@affine/i18n';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { Trans, useI18n } from '@affine/i18n';
 import { useLiveData, useService } from '@toeverything/infra';
 import type { FC } from 'react';
 import { useCallback, useEffect, useState } from 'react';
@@ -36,7 +35,7 @@ export const AfterSignUpSendEmail: FC<AuthPanelProps> = ({
   }, []);
 
   const [isSending, setIsSending] = useState(false);
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const authService = useService(AuthService);
   const loginStatus = useLiveData(authService.session.status$);
   useEffect(() => {
diff --git a/packages/frontend/core/src/components/affine/auth/ai-login-required.tsx b/packages/frontend/core/src/components/affine/auth/ai-login-required.tsx
index 7d4dd77ac2..532587f4db 100644
--- a/packages/frontend/core/src/components/affine/auth/ai-login-required.tsx
+++ b/packages/frontend/core/src/components/affine/auth/ai-login-required.tsx
@@ -1,13 +1,13 @@
 import { useConfirmModal } from '@affine/component';
 import { authAtom } from '@affine/core/atoms';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { atom, useAtom, useSetAtom } from 'jotai';
 import { useCallback, useEffect } from 'react';
 
 export const showAILoginRequiredAtom = atom(false);
 
 export const AiLoginRequiredModal = () => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const [open, setOpen] = useAtom(showAILoginRequiredAtom);
   const setAuth = useSetAtom(authAtom);
   const { openConfirmModal, closeConfirmModal } = useConfirmModal();
diff --git a/packages/frontend/core/src/components/affine/auth/send-email.tsx b/packages/frontend/core/src/components/affine/auth/send-email.tsx
index 432efecf76..66a9ff3f9e 100644
--- a/packages/frontend/core/src/components/affine/auth/send-email.tsx
+++ b/packages/frontend/core/src/components/affine/auth/send-email.tsx
@@ -13,7 +13,7 @@ import {
   sendSetPasswordEmailMutation,
   sendVerifyEmailMutation,
 } from '@affine/graphql';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { useLiveData, useService } from '@toeverything/infra';
 import { useCallback, useState } from 'react';
 
@@ -22,7 +22,7 @@ import { ServerConfigService } from '../../../modules/cloud';
 import type { AuthPanelProps } from './index';
 
 const useEmailTitle = (emailType: AuthPanelProps['emailType']) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   switch (emailType) {
     case 'setPassword':
@@ -37,7 +37,7 @@ const useEmailTitle = (emailType: AuthPanelProps['emailType']) => {
 };
 
 const useNotificationHint = (emailType: AuthPanelProps['emailType']) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   switch (emailType) {
     case 'setPassword':
@@ -50,7 +50,7 @@ const useNotificationHint = (emailType: AuthPanelProps['emailType']) => {
   }
 };
 const useButtonContent = (emailType: AuthPanelProps['emailType']) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   switch (emailType) {
     case 'setPassword':
@@ -138,7 +138,7 @@ export const SendEmail = ({
   email,
   emailType,
 }: AuthPanelProps) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const serverConfig = useService(ServerConfigService).serverConfig;
 
   const passwordLimits = useLiveData(
diff --git a/packages/frontend/core/src/components/affine/auth/sign-in-with-password.tsx b/packages/frontend/core/src/components/affine/auth/sign-in-with-password.tsx
index 450ef2f51a..085fb26fbd 100644
--- a/packages/frontend/core/src/components/affine/auth/sign-in-with-password.tsx
+++ b/packages/frontend/core/src/components/affine/auth/sign-in-with-password.tsx
@@ -7,7 +7,7 @@ import {
 import { Button } from '@affine/component/ui/button';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
 import { AuthService } from '@affine/core/modules/cloud';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { useService } from '@toeverything/infra';
 import type { FC } from 'react';
 import { useCallback, useState } from 'react';
@@ -22,7 +22,7 @@ export const SignInWithPassword: FC<AuthPanelProps> = ({
   email,
   onSignedIn,
 }) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const authService = useService(AuthService);
 
   const [password, setPassword] = useState('');
diff --git a/packages/frontend/core/src/components/affine/auth/sign-in.tsx b/packages/frontend/core/src/components/affine/auth/sign-in.tsx
index 3db1304ac6..967a8d859e 100644
--- a/packages/frontend/core/src/components/affine/auth/sign-in.tsx
+++ b/packages/frontend/core/src/components/affine/auth/sign-in.tsx
@@ -2,8 +2,7 @@ import { notify } from '@affine/component';
 import { AuthInput, ModalHeader } from '@affine/component/auth-components';
 import { Button } from '@affine/component/ui/button';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
-import { Trans } from '@affine/i18n';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { Trans, useI18n } from '@affine/i18n';
 import { ArrowDownBigIcon } from '@blocksuite/icons/rc';
 import { useLiveData, useService } from '@toeverything/infra';
 import type { FC } from 'react';
@@ -28,7 +27,7 @@ export const SignIn: FC<AuthPanelProps> = ({
   email,
   onSignedIn,
 }) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const authService = useService(AuthService);
   const [searchParams] = useSearchParams();
   const [isMutating, setIsMutating] = useState(false);
diff --git a/packages/frontend/core/src/components/affine/auth/user-plan-button.tsx b/packages/frontend/core/src/components/affine/auth/user-plan-button.tsx
index 0cc8fbb6ef..dbd3862074 100644
--- a/packages/frontend/core/src/components/affine/auth/user-plan-button.tsx
+++ b/packages/frontend/core/src/components/affine/auth/user-plan-button.tsx
@@ -1,6 +1,6 @@
 import { Tooltip } from '@affine/component/ui/tooltip';
 import { mixpanel } from '@affine/core/utils';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { useLiveData, useServices } from '@toeverything/infra';
 import { useSetAtom } from 'jotai';
 import { useCallback, useEffect } from 'react';
@@ -49,7 +49,7 @@ export const UserPlanButton = () => {
     [setSettingModalAtom]
   );
 
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   if (!hasPayment) {
     // no payment feature
diff --git a/packages/frontend/core/src/components/affine/create-workspace-modal/index.tsx b/packages/frontend/core/src/components/affine/create-workspace-modal/index.tsx
index 91836be672..7da01a40d2 100644
--- a/packages/frontend/core/src/components/affine/create-workspace-modal/index.tsx
+++ b/packages/frontend/core/src/components/affine/create-workspace-modal/index.tsx
@@ -6,7 +6,7 @@ import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
 import { DebugLogger } from '@affine/debug';
 import { apis } from '@affine/electron-api';
 import { WorkspaceFlavour } from '@affine/env/workspace';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import {
   initEmptyPage,
   useLiveData,
@@ -55,7 +55,7 @@ const NameWorkspaceContent = ({
   onConfirmName,
   ...props
 }: NameWorkspaceContentProps) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const [workspaceName, setWorkspaceName] = useState('');
   const [enable, setEnable] = useState(shouldEnableCloud);
   const session = useService(AuthService).session;
@@ -182,7 +182,7 @@ export const CreateWorkspaceModal = ({
   onCreate,
 }: ModalProps) => {
   const [step, setStep] = useState<CreateWorkspaceStep>();
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const workspacesService = useService(WorkspacesService);
   const [loading, setLoading] = useState(false);
 
diff --git a/packages/frontend/core/src/components/affine/history-tips-modal/index.tsx b/packages/frontend/core/src/components/affine/history-tips-modal/index.tsx
index 3c64bf0e4a..93772218a6 100644
--- a/packages/frontend/core/src/components/affine/history-tips-modal/index.tsx
+++ b/packages/frontend/core/src/components/affine/history-tips-modal/index.tsx
@@ -4,7 +4,7 @@ import {
   openHistoryTipsModalAtom,
 } from '@affine/core/atoms';
 import { useEnableCloud } from '@affine/core/hooks/affine/use-enable-cloud';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { useService, WorkspaceService } from '@toeverything/infra';
 import { useAtom, useSetAtom } from 'jotai';
 import { useCallback } from 'react';
@@ -12,7 +12,7 @@ import { useCallback } from 'react';
 import TopSvg from './top-svg';
 
 export const HistoryTipsModal = () => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const currentWorkspace = useService(WorkspaceService).workspace;
   const [open, setOpen] = useAtom(openHistoryTipsModalAtom);
   const setTempDisableCloudOpen = useSetAtom(openDisableCloudAlertModalAtom);
diff --git a/packages/frontend/core/src/components/affine/issue-feedback-modal/index.tsx b/packages/frontend/core/src/components/affine/issue-feedback-modal/index.tsx
index fc5818dc6d..1438b80671 100644
--- a/packages/frontend/core/src/components/affine/issue-feedback-modal/index.tsx
+++ b/packages/frontend/core/src/components/affine/issue-feedback-modal/index.tsx
@@ -1,10 +1,10 @@
 import { OverlayModal } from '@affine/component';
 import { openIssueFeedbackModalAtom } from '@affine/core/atoms';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { useAtom } from 'jotai';
 
 export const IssueFeedbackModal = () => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const [open, setOpen] = useAtom(openIssueFeedbackModalAtom);
 
   return (
diff --git a/packages/frontend/core/src/components/affine/page-history-modal/history-modal.tsx b/packages/frontend/core/src/components/affine/page-history-modal/history-modal.tsx
index d4922a3c80..d4b0a28b1b 100644
--- a/packages/frontend/core/src/components/affine/page-history-modal/history-modal.tsx
+++ b/packages/frontend/core/src/components/affine/page-history-modal/history-modal.tsx
@@ -6,8 +6,7 @@ import { openSettingModalAtom } from '@affine/core/atoms';
 import { useDocCollectionPageTitle } from '@affine/core/hooks/use-block-suite-workspace-page-title';
 import { WorkspacePermissionService } from '@affine/core/modules/permissions';
 import { WorkspaceQuotaService } from '@affine/core/modules/quota';
-import { i18nTime, Trans } from '@affine/i18n';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { i18nTime, Trans, useI18n } from '@affine/i18n';
 import { CloseIcon, ToggleCollapseIcon } from '@blocksuite/icons/rc';
 import type { Doc as BlockSuiteDoc, DocCollection } from '@blocksuite/store';
 import * as Collapsible from '@radix-ui/react-collapsible';
@@ -234,7 +233,7 @@ const PlanPrompt = () => {
     });
   }, [setSettingModalAtom]);
 
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   const planTitle = useMemo(() => {
     return (
@@ -315,7 +314,7 @@ const PageHistoryList = ({
   onLoadMore: (() => void) | false;
   loadingMore: boolean;
 }) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const historyListByDay = useMemo(() => {
     return historyListGroupByDay(historyList);
   }, [historyList]);
@@ -410,7 +409,7 @@ const PageHistoryList = ({
 };
 
 const EmptyHistoryPrompt = () => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   return (
     <div
@@ -447,7 +446,7 @@ const PageHistoryManager = ({
 
   const snapshotPage = useSnapshotPage(docCollection, pageDocId, activeVersion);
 
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   const { onRestore, isMutating } = useRestorePage(docCollection, pageId);
 
diff --git a/packages/frontend/core/src/components/affine/page-properties/confirm-delete-property-modal.tsx b/packages/frontend/core/src/components/affine/page-properties/confirm-delete-property-modal.tsx
index 12375599ab..1508bb3782 100644
--- a/packages/frontend/core/src/components/affine/page-properties/confirm-delete-property-modal.tsx
+++ b/packages/frontend/core/src/components/affine/page-properties/confirm-delete-property-modal.tsx
@@ -1,8 +1,7 @@
 import { ConfirmModal } from '@affine/component';
 import { WorkspacePropertiesAdapter } from '@affine/core/modules/properties';
 import type { PageInfoCustomPropertyMeta } from '@affine/core/modules/properties/services/schema';
-import { Trans } from '@affine/i18n';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { Trans, useI18n } from '@affine/i18n';
 import { useService } from '@toeverything/infra';
 import { useMemo } from 'react';
 
@@ -19,7 +18,7 @@ export const ConfirmDeletePropertyModal = ({
   onConfirm: () => void;
   onCancel: () => void;
 }) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const adapter = useService(WorkspacePropertiesAdapter);
   const count = useMemo(() => {
     const manager = new PagePropertiesMetaManager(adapter);
diff --git a/packages/frontend/core/src/components/affine/page-properties/icons-selector.tsx b/packages/frontend/core/src/components/affine/page-properties/icons-selector.tsx
index 5f74324813..0db5e8d4a1 100644
--- a/packages/frontend/core/src/components/affine/page-properties/icons-selector.tsx
+++ b/packages/frontend/core/src/components/affine/page-properties/icons-selector.tsx
@@ -1,5 +1,5 @@
 import { Menu, Scrollable } from '@affine/component';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { chunk } from 'lodash-es';
 import { useEffect, useRef } from 'react';
 
@@ -32,7 +32,7 @@ export const IconsSelectorPanel = ({
     iconButton.scrollIntoView({ block: 'center' });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   return (
     <Scrollable.Root>
       <div role="heading" className={styles.menuHeader}>
diff --git a/packages/frontend/core/src/components/affine/page-properties/menu-items.tsx b/packages/frontend/core/src/components/affine/page-properties/menu-items.tsx
index 592e049307..4bbabab33d 100644
--- a/packages/frontend/core/src/components/affine/page-properties/menu-items.tsx
+++ b/packages/frontend/core/src/components/affine/page-properties/menu-items.tsx
@@ -7,7 +7,7 @@ import {
   Scrollable,
 } from '@affine/component';
 import type { PageInfoCustomPropertyMeta } from '@affine/core/modules/properties/services/schema';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import type { KeyboardEventHandler, MouseEventHandler } from 'react';
 import { cloneElement, isValidElement, useCallback } from 'react';
 
@@ -102,7 +102,7 @@ export const EditPropertyNameMenuItem = ({
     [onBlur]
   );
 
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   return (
     <div className={styles.propertyRowNamePopupRow}>
       <IconsSelectorButton
@@ -126,7 +126,7 @@ export const PropertyTypeMenuItem = ({
   property: PageInfoCustomPropertyMeta;
 }) => {
   const Icon = nameToIcon(getDefaultIconName(property.type), property.type);
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   return (
     <div className={styles.propertyRowTypeItem}>
       {t['com.affine.page-properties.create-property.menu.header']()}
diff --git a/packages/frontend/core/src/components/affine/page-properties/property-row-value-renderer.tsx b/packages/frontend/core/src/components/affine/page-properties/property-row-value-renderer.tsx
index 6949d3bebe..54d0ea3cf3 100644
--- a/packages/frontend/core/src/components/affine/page-properties/property-row-value-renderer.tsx
+++ b/packages/frontend/core/src/components/affine/page-properties/property-row-value-renderer.tsx
@@ -4,8 +4,7 @@ import type {
   PageInfoCustomPropertyMeta,
   PagePropertyType,
 } from '@affine/core/modules/properties/services/schema';
-import { i18nTime } from '@affine/i18n';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { i18nTime, useI18n } from '@affine/i18n';
 import { DocService, useService } from '@toeverything/infra';
 import { noop } from 'lodash-es';
 import type { ChangeEventHandler } from 'react';
@@ -40,7 +39,7 @@ export const DateValue = ({ property }: PropertyRowValueProps) => {
     [manager, property.id]
   );
 
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   return (
     <Menu items={<DatePicker value={property.value} onChange={handleChange} />}>
@@ -102,7 +101,7 @@ export const TextValue = ({ property }: PropertyRowValueProps) => {
     },
     []
   );
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   useEffect(() => {
     setValue(property.value);
   }, [property.value]);
@@ -148,7 +147,7 @@ export const NumberValue = ({ property }: PropertyRowValueProps) => {
     },
     []
   );
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   useEffect(() => {
     setValue(property.value);
   }, [property.value]);
@@ -169,7 +168,7 @@ export const NumberValue = ({ property }: PropertyRowValueProps) => {
 export const TagsValue = () => {
   const doc = useService(DocService).doc;
 
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   return (
     <TagsInlineEditor
diff --git a/packages/frontend/core/src/components/affine/page-properties/table.tsx b/packages/frontend/core/src/components/affine/page-properties/table.tsx
index c9be1e5091..3fa538423c 100644
--- a/packages/frontend/core/src/components/affine/page-properties/table.tsx
+++ b/packages/frontend/core/src/components/affine/page-properties/table.tsx
@@ -14,8 +14,7 @@ import type {
   PageInfoCustomPropertyMeta,
   PagePropertyType,
 } from '@affine/core/modules/properties/services/schema';
-import { i18nTime } from '@affine/i18n';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { i18nTime, useI18n } from '@affine/i18n';
 import { assertExists } from '@blocksuite/global/utils';
 import {
   ArrowDownSmallIcon,
@@ -254,7 +253,7 @@ const VisibilityModeSelector = ({
   property: PageInfoCustomProperty;
 }) => {
   const manager = useContext(managerContext);
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const meta = manager.getCustomPropertyMeta(property.id);
   const visibility = property.visibility || 'visible';
 
@@ -317,7 +316,7 @@ export const PagePropertiesSettingsPopup = ({
   children,
 }: PagePropertiesSettingsPopupProps) => {
   const manager = useContext(managerContext);
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   const menuItems = useMemo(() => {
     const options: MenuItemOption[] = [];
@@ -457,7 +456,7 @@ export const PagePropertyRowNameMenu = ({
     onFinishEditing,
     property.id,
   ]);
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const handleNameBlur = useCallback(
     (v: string) => {
       manager.updateCustomPropertyMeta(meta.id, {
@@ -596,7 +595,7 @@ export const PagePropertiesTableHeader = ({
 }: PagePropertiesTableHeaderProps) => {
   const manager = useContext(managerContext);
 
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const backlinks = useBlockSuitePageBacklinks(
     manager.workspace.docCollection,
     manager.pageId
@@ -788,7 +787,7 @@ const PagePropertyRow = ({ property }: PagePropertyRowProps) => {
 };
 
 const PageTagsRow = () => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   return (
     <div
       className={styles.tagsPropertyRow}
@@ -882,7 +881,7 @@ export const PagePropertiesCreatePropertyMenuItems = ({
   onCreated,
   metaManager,
 }: PagePropertiesCreatePropertyMenuItemsProps) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const onAddProperty = useCallback(
     (
       e: React.MouseEvent,
@@ -943,7 +942,7 @@ const PagePropertiesAddPropertyMenuItems = ({
 }: PagePropertiesAddPropertyMenuItemsProps) => {
   const manager = useContext(managerContext);
 
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const metaList = manager.metaManager.getOrderedPropertiesSchema();
   const nonRequiredMetaList = metaList.filter(meta => !meta.required);
   const isChecked = useCallback(
@@ -1004,7 +1003,7 @@ const PagePropertiesAddPropertyMenuItems = ({
 };
 
 export const PagePropertiesAddProperty = () => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const [adding, setAdding] = useState(true);
   const manager = useContext(managerContext);
   const toggleAdding: MouseEventHandler = useCallback(e => {
diff --git a/packages/frontend/core/src/components/affine/page-properties/tags-inline-editor.tsx b/packages/frontend/core/src/components/affine/page-properties/tags-inline-editor.tsx
index 2d6a627a4b..413236a0c3 100644
--- a/packages/frontend/core/src/components/affine/page-properties/tags-inline-editor.tsx
+++ b/packages/frontend/core/src/components/affine/page-properties/tags-inline-editor.tsx
@@ -3,7 +3,7 @@ import { IconButton, Input, Menu, Scrollable } from '@affine/component';
 import { useNavigateHelper } from '@affine/core/hooks/use-navigate-helper';
 import { WorkspaceLegacyProperties } from '@affine/core/modules/properties';
 import { DeleteTagConfirmModal, TagService } from '@affine/core/modules/tag';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { DeleteIcon, MoreHorizontalIcon, TagsIcon } from '@blocksuite/icons/rc';
 import { useLiveData, useService } from '@toeverything/infra';
 import clsx from 'clsx';
@@ -73,7 +73,7 @@ export const EditTagMenu = ({
   tagId: string;
   onTagDelete: (tagIds: string[]) => void;
 }>) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const legacyProperties = useService(WorkspaceLegacyProperties);
   const tagList = useService(TagService).tagList;
   const tag = useLiveData(tagList.tagByTagId$(tagId));
@@ -172,7 +172,7 @@ export const EditTagMenu = ({
 };
 
 export const TagsEditor = ({ pageId, readonly }: TagsEditorProps) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const tagList = useService(TagService).tagList;
   const tags = useLiveData(tagList.tags$);
   const tagIds = useLiveData(tagList.tagIdsByPageId$(pageId));
diff --git a/packages/frontend/core/src/components/affine/payment-disable/index.tsx b/packages/frontend/core/src/components/affine/payment-disable/index.tsx
index 869837c7d7..9ad13137e4 100644
--- a/packages/frontend/core/src/components/affine/payment-disable/index.tsx
+++ b/packages/frontend/core/src/components/affine/payment-disable/index.tsx
@@ -1,5 +1,5 @@
 import { ConfirmModal } from '@affine/component/ui/modal';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { useAtom } from 'jotai';
 import { useCallback } from 'react';
 
@@ -8,7 +8,7 @@ import * as styles from './style.css';
 
 export const PaymentDisableModal = () => {
   const [open, setOpen] = useAtom(openPaymentDisableAtom);
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   const onClickCancel = useCallback(() => {
     setOpen(false);
diff --git a/packages/frontend/core/src/components/affine/quota-reached-modal/cloud-quota-modal.tsx b/packages/frontend/core/src/components/affine/quota-reached-modal/cloud-quota-modal.tsx
index 44dba1216f..8531acbde3 100644
--- a/packages/frontend/core/src/components/affine/quota-reached-modal/cloud-quota-modal.tsx
+++ b/packages/frontend/core/src/components/affine/quota-reached-modal/cloud-quota-modal.tsx
@@ -4,14 +4,14 @@ import { UserQuotaService } from '@affine/core/modules/cloud';
 import { WorkspacePermissionService } from '@affine/core/modules/permissions';
 import { WorkspaceQuotaService } from '@affine/core/modules/quota';
 import { mixpanel } from '@affine/core/utils';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { useLiveData, useService, WorkspaceService } from '@toeverything/infra';
 import bytes from 'bytes';
 import { useAtom, useSetAtom } from 'jotai';
 import { useCallback, useEffect, useMemo } from 'react';
 
 export const CloudQuotaModal = () => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const currentWorkspace = useService(WorkspaceService).workspace;
   const [open, setOpen] = useAtom(openQuotaModalAtom);
   const workspaceQuotaService = useService(WorkspaceQuotaService);
diff --git a/packages/frontend/core/src/components/affine/quota-reached-modal/local-quota-modal.tsx b/packages/frontend/core/src/components/affine/quota-reached-modal/local-quota-modal.tsx
index 5dc6bdbfbd..cee4b9460e 100644
--- a/packages/frontend/core/src/components/affine/quota-reached-modal/local-quota-modal.tsx
+++ b/packages/frontend/core/src/components/affine/quota-reached-modal/local-quota-modal.tsx
@@ -1,12 +1,12 @@
 import { ConfirmModal } from '@affine/component/ui/modal';
 import { openQuotaModalAtom } from '@affine/core/atoms';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { useService, WorkspaceService } from '@toeverything/infra';
 import { useAtom } from 'jotai';
 import { useCallback, useEffect } from 'react';
 
 export const LocalQuotaModal = () => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const currentWorkspace = useService(WorkspaceService).workspace;
   const [open, setOpen] = useAtom(openQuotaModalAtom);
 
diff --git a/packages/frontend/core/src/components/affine/reference-link/index.tsx b/packages/frontend/core/src/components/affine/reference-link/index.tsx
index 21b7033df5..3efe9b0a65 100644
--- a/packages/frontend/core/src/components/affine/reference-link/index.tsx
+++ b/packages/frontend/core/src/components/affine/reference-link/index.tsx
@@ -5,7 +5,7 @@ import {
   useInsidePeekView,
 } from '@affine/core/modules/peek-view';
 import { WorkbenchLink } from '@affine/core/modules/workbench';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import {
   LinkedEdgelessIcon,
   LinkedPageIcon,
@@ -29,7 +29,7 @@ export interface PageReferenceRendererOptions {
   docCollection: DocCollection;
   pageMetaHelper: ReturnType<typeof useDocMetaHelper>;
   journalHelper: ReturnType<typeof useJournalHelper>;
-  t: ReturnType<typeof useAFFiNEI18N>;
+  t: ReturnType<typeof useI18n>;
 }
 // use a function to be rendered in the lit renderer
 export function pageReferenceRenderer({
@@ -77,7 +77,7 @@ export function AffinePageReference({
 }) {
   const pageMetaHelper = useDocMetaHelper(docCollection);
   const journalHelper = useJournalHelper(docCollection);
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   const docsService = useService(DocsService);
   const mode$ = LiveData.from(docsService.list.observeMode(pageId), null);
diff --git a/packages/frontend/core/src/components/affine/setting-modal/account-setting/ai-usage-panel.tsx b/packages/frontend/core/src/components/affine/setting-modal/account-setting/ai-usage-panel.tsx
index daa5c50ae7..74a2e4b46c 100644
--- a/packages/frontend/core/src/components/affine/setting-modal/account-setting/ai-usage-panel.tsx
+++ b/packages/frontend/core/src/components/affine/setting-modal/account-setting/ai-usage-panel.tsx
@@ -7,7 +7,7 @@ import {
   UserCopilotQuotaService,
 } from '@affine/core/modules/cloud';
 import { mixpanel } from '@affine/core/utils';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { useLiveData, useService } from '@toeverything/infra';
 import { cssVar } from '@toeverything/theme';
 import { useSetAtom } from 'jotai';
@@ -17,7 +17,7 @@ import { AIResume, AISubscribe } from '../general-setting/plans/ai/actions';
 import * as styles from './storage-progress.css';
 
 export const AIUsagePanel = () => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const setOpenSettingModal = useSetAtom(openSettingModalAtom);
   const serverConfigService = useService(ServerConfigService);
   const hasPaymentFeature = useLiveData(
diff --git a/packages/frontend/core/src/components/affine/setting-modal/account-setting/index.tsx b/packages/frontend/core/src/components/affine/setting-modal/account-setting/index.tsx
index c63eecfe1c..34b2364ac2 100644
--- a/packages/frontend/core/src/components/affine/setting-modal/account-setting/index.tsx
+++ b/packages/frontend/core/src/components/affine/setting-modal/account-setting/index.tsx
@@ -6,7 +6,7 @@ import {
 import { Avatar } from '@affine/component/ui/avatar';
 import { Button } from '@affine/component/ui/button';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { ArrowRightSmallIcon, CameraIcon } from '@blocksuite/icons/rc';
 import {
   useEnsureLiveData,
@@ -31,7 +31,7 @@ import { StorageProgress } from './storage-progress';
 import * as styles from './style.css';
 
 export const UserAvatar = () => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const session = useService(AuthService).session;
   const account = useEnsureLiveData(session.account$);
 
@@ -89,7 +89,7 @@ export const UserAvatar = () => {
 };
 
 export const AvatarAndName = () => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const session = useService(AuthService).session;
   const account = useEnsureLiveData(session.account$);
   const [input, setInput] = useState<string>(account.label);
@@ -158,7 +158,7 @@ export const AvatarAndName = () => {
 };
 
 const StoragePanel = () => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   const setSettingModalAtom = useSetAtom(openSettingModalAtom);
   const onUpgrade = useCallback(() => {
@@ -193,7 +193,7 @@ export const AccountSetting: FC = () => {
   const serverFeatures = useLiveData(
     serverConfigService.serverConfig.features$
   );
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const session = authService.session;
   useEffect(() => {
     session.revalidate();
diff --git a/packages/frontend/core/src/components/affine/setting-modal/account-setting/storage-progress.tsx b/packages/frontend/core/src/components/affine/setting-modal/account-setting/storage-progress.tsx
index dd25a17045..ea5be4b0f7 100644
--- a/packages/frontend/core/src/components/affine/setting-modal/account-setting/storage-progress.tsx
+++ b/packages/frontend/core/src/components/affine/setting-modal/account-setting/storage-progress.tsx
@@ -1,5 +1,5 @@
 import { Button, ErrorMessage, Skeleton, Tooltip } from '@affine/component';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { useLiveData, useService } from '@toeverything/infra';
 import { cssVar } from '@toeverything/theme';
 import { useEffect, useMemo } from 'react';
@@ -22,7 +22,7 @@ enum ButtonType {
 }
 
 export const StorageProgress = ({ onUpgrade }: StorageProgressProgress) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const quota = useService(UserQuotaService).quota;
 
   useEffect(() => {
diff --git a/packages/frontend/core/src/components/affine/setting-modal/general-setting/about/index.tsx b/packages/frontend/core/src/components/affine/setting-modal/general-setting/about/index.tsx
index 573a765d7d..096693370a 100644
--- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/about/index.tsx
+++ b/packages/frontend/core/src/components/affine/setting-modal/general-setting/about/index.tsx
@@ -5,7 +5,7 @@ import {
   SettingWrapper,
 } from '@affine/component/setting-components';
 import { useAppUpdater } from '@affine/core/hooks/use-app-updater';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { ArrowRightSmallIcon, OpenInNewIcon } from '@blocksuite/icons/rc';
 import { useCallback } from 'react';
 
@@ -17,7 +17,7 @@ import * as styles from './style.css';
 import { UpdateCheckSection } from './update-check-section';
 
 export const AboutAffine = () => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const { appSettings, updateSettings } = useAppSettingHelper();
   const { toggleAutoCheck, toggleAutoDownload } = useAppUpdater();
   const channel = runtimeConfig.appBuildType;
diff --git a/packages/frontend/core/src/components/affine/setting-modal/general-setting/about/update-check-section.tsx b/packages/frontend/core/src/components/affine/setting-modal/general-setting/about/update-check-section.tsx
index acb6520b04..7402f161ec 100644
--- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/about/update-check-section.tsx
+++ b/packages/frontend/core/src/components/affine/setting-modal/general-setting/about/update-check-section.tsx
@@ -3,7 +3,7 @@ import { SettingRow } from '@affine/component/setting-components';
 import { Button } from '@affine/component/ui/button';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
 import { useAppUpdater } from '@affine/core/hooks/use-app-updater';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import clsx from 'clsx';
 import { useCallback, useMemo, useState } from 'react';
 
@@ -17,7 +17,7 @@ enum CheckUpdateStatus {
 }
 
 const useUpdateStatusLabels = (checkUpdateStatus: CheckUpdateStatus) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const { updateAvailable, downloadProgress, updateReady, checkingForUpdates } =
     useAppUpdater();
 
@@ -91,7 +91,7 @@ const useUpdateStatusLabels = (checkUpdateStatus: CheckUpdateStatus) => {
 };
 
 export const UpdateCheckSection = () => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const {
     checkForUpdates,
     downloadUpdate,
diff --git a/packages/frontend/core/src/components/affine/setting-modal/general-setting/appearance/index.tsx b/packages/frontend/core/src/components/affine/setting-modal/general-setting/appearance/index.tsx
index d9490fa849..6344514948 100644
--- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/appearance/index.tsx
+++ b/packages/frontend/core/src/components/affine/setting-modal/general-setting/appearance/index.tsx
@@ -4,7 +4,7 @@ import {
   SettingRow,
   SettingWrapper,
 } from '@affine/component/setting-components';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import type { AppSetting } from '@toeverything/infra';
 import { fontStyleOptions, windowFrameStyleOptions } from '@toeverything/infra';
 import { useTheme } from 'next-themes';
@@ -16,7 +16,7 @@ import { DateFormatSetting } from './date-format-setting';
 import { settingWrapper } from './style.css';
 
 export const ThemeSettings = () => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const { setTheme, theme } = useTheme();
 
   return (
@@ -45,7 +45,7 @@ export const ThemeSettings = () => {
 };
 
 const FontFamilySettings = () => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const { appSettings, updateSettings } = useAppSettingHelper();
   return (
     <RadioButtonGroup
@@ -92,7 +92,7 @@ const FontFamilySettings = () => {
 };
 
 export const AppearanceSettings = () => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   const { appSettings, updateSettings } = useAppSettingHelper();
 
diff --git a/packages/frontend/core/src/components/affine/setting-modal/general-setting/billing/index.tsx b/packages/frontend/core/src/components/affine/setting-modal/general-setting/billing/index.tsx
index 8e23ac922c..25e338dcd6 100644
--- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/billing/index.tsx
+++ b/packages/frontend/core/src/components/affine/setting-modal/general-setting/billing/index.tsx
@@ -18,8 +18,7 @@ import {
   SubscriptionRecurring,
   SubscriptionStatus,
 } from '@affine/graphql';
-import { i18nTime, Trans } from '@affine/i18n';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { i18nTime, Trans, useI18n } from '@affine/i18n';
 import { ArrowRightSmallIcon } from '@blocksuite/icons/rc';
 import { useLiveData, useService } from '@toeverything/infra';
 import { useSetAtom } from 'jotai';
@@ -54,7 +53,7 @@ const getMessageKey = (
 };
 
 export const BillingSettings = () => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   return (
     <>
@@ -85,7 +84,7 @@ export const BillingSettings = () => {
 };
 
 const SubscriptionSettings = () => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const subscriptionService = useService(SubscriptionService);
   useEffect(() => {
     subscriptionService.subscription.revalidate();
@@ -248,7 +247,7 @@ const SubscriptionSettings = () => {
 };
 
 const AIPlanCard = ({ onClick }: { onClick: () => void }) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const subscriptionService = useService(SubscriptionService);
   useEffect(() => {
     subscriptionService.subscription.revalidate();
@@ -325,7 +324,7 @@ const PlanAction = ({
   plan: string;
   gotoPlansSetting: () => void;
 }) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   return (
     <Button
@@ -345,7 +344,7 @@ const PaymentMethodUpdater = () => {
   const { isMutating, trigger } = useMutation({
     mutation: createCustomerPortalMutation,
   });
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   const update = useAsyncCallback(async () => {
     await trigger(null, {
@@ -368,7 +367,7 @@ const PaymentMethodUpdater = () => {
 };
 
 const ResumeSubscription = () => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const [open, setOpen] = useState(false);
 
   return (
@@ -392,7 +391,7 @@ const CancelSubscription = ({ loading }: { loading?: boolean }) => {
 };
 
 const BillingHistory = () => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const { data: invoicesCountQueryResult } = useQuery({
     query: getInvoicesCountQuery,
   });
@@ -437,7 +436,7 @@ const InvoiceLine = ({
 }: {
   invoice: NonNullable<InvoicesQuery['currentUser']>['invoices'][0];
 }) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   const open = useCallback(() => {
     if (invoice.link) {
@@ -471,7 +470,7 @@ const InvoiceLine = ({
 };
 
 const SubscriptionSettingSkeleton = () => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   return (
     <SettingWrapper
       title={t['com.affine.payment.billing-setting.information']()}
@@ -485,7 +484,7 @@ const SubscriptionSettingSkeleton = () => {
 };
 
 const BillingHistorySkeleton = () => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   return (
     <SettingWrapper title={t['com.affine.payment.billing-setting.history']()}>
       <div className={styles.billingHistorySkeleton}>
diff --git a/packages/frontend/core/src/components/affine/setting-modal/general-setting/experimental-features/index.tsx b/packages/frontend/core/src/components/affine/setting-modal/general-setting/experimental-features/index.tsx
index e8002f17eb..0ba7cf638b 100644
--- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/experimental-features/index.tsx
+++ b/packages/frontend/core/src/components/affine/setting-modal/general-setting/experimental-features/index.tsx
@@ -2,7 +2,7 @@ import { Button, Checkbox, Loading, Switch } from '@affine/component';
 import { SettingHeader } from '@affine/component/setting-components';
 import { useAppSettingHelper } from '@affine/core/hooks/affine/use-app-setting-helper';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { useAtom } from 'jotai';
 import { atomWithStorage } from 'jotai/utils';
 import { Suspense, useCallback, useState } from 'react';
@@ -15,7 +15,7 @@ const ExperimentalFeaturesPrompt = ({
 }: {
   onConfirm: () => void;
 }) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const [checked, setChecked] = useState(false);
 
   const onChange: (
@@ -160,7 +160,7 @@ const BlocksuiteFeatureFlagSettings = () => {
 };
 
 const ExperimentalFeaturesMain = () => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   return (
     <>
diff --git a/packages/frontend/core/src/components/affine/setting-modal/general-setting/index.tsx b/packages/frontend/core/src/components/affine/setting-modal/general-setting/index.tsx
index 139288c4ac..9b08807a64 100644
--- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/index.tsx
+++ b/packages/frontend/core/src/components/affine/setting-modal/general-setting/index.tsx
@@ -1,5 +1,5 @@
 import { UserFeatureService } from '@affine/core/modules/cloud/services/user-feature';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import {
   AppearanceIcon,
   ExperimentIcon,
@@ -30,7 +30,7 @@ interface GeneralSettingListItem {
 export type GeneralSettingList = GeneralSettingListItem[];
 
 export const useGeneralSettingList = (): GeneralSettingList => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const { authService, serverConfigService, userFeatureService } = useServices({
     AuthService,
     ServerConfigService,
diff --git a/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/ai/actions/cancel.tsx b/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/ai/actions/cancel.tsx
index b9637a9859..e665dad692 100644
--- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/ai/actions/cancel.tsx
+++ b/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/ai/actions/cancel.tsx
@@ -2,14 +2,14 @@ import { Button, type ButtonProps, useConfirmModal } from '@affine/component';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
 import { SubscriptionService } from '@affine/core/modules/cloud';
 import { SubscriptionPlan } from '@affine/graphql';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { useService } from '@toeverything/infra';
 import { nanoid } from 'nanoid';
 import { useState } from 'react';
 
 export interface AICancelProps extends ButtonProps {}
 export const AICancel = ({ ...btnProps }: AICancelProps) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const [isMutating, setMutating] = useState(false);
   const [idempotencyKey, setIdempotencyKey] = useState(nanoid());
   const subscription = useService(SubscriptionService).subscription;
diff --git a/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/ai/actions/login.tsx b/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/ai/actions/login.tsx
index 0e754a0d09..edf69f1acf 100644
--- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/ai/actions/login.tsx
+++ b/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/ai/actions/login.tsx
@@ -1,11 +1,11 @@
 import { Button, type ButtonProps } from '@affine/component';
 import { authAtom } from '@affine/core/atoms';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { useSetAtom } from 'jotai';
 import { useCallback } from 'react';
 
 export const AILogin = (btnProps: ButtonProps) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const setOpen = useSetAtom(authAtom);
 
   const onClickSignIn = useCallback(() => {
diff --git a/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/ai/actions/resume.tsx b/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/ai/actions/resume.tsx
index 53e8123f9f..2c3ab7a037 100644
--- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/ai/actions/resume.tsx
+++ b/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/ai/actions/resume.tsx
@@ -7,7 +7,7 @@ import {
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
 import { SubscriptionService } from '@affine/core/modules/cloud';
 import { SubscriptionPlan } from '@affine/graphql';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { SingleSelectSelectSolidIcon } from '@blocksuite/icons/rc';
 import { useService } from '@toeverything/infra';
 import { cssVar } from '@toeverything/theme';
@@ -17,7 +17,7 @@ import { useState } from 'react';
 export interface AIResumeProps extends ButtonProps {}
 
 export const AIResume = ({ ...btnProps }: AIResumeProps) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const [idempotencyKey, setIdempotencyKey] = useState(nanoid());
   const subscription = useService(SubscriptionService).subscription;
 
diff --git a/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/ai/actions/subscribe.tsx b/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/ai/actions/subscribe.tsx
index 123ad8b17c..355470e899 100644
--- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/ai/actions/subscribe.tsx
+++ b/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/ai/actions/subscribe.tsx
@@ -3,7 +3,7 @@ import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
 import { SubscriptionService } from '@affine/core/modules/cloud';
 import { mixpanel, popupWindow } from '@affine/core/utils';
 import { SubscriptionPlan, SubscriptionRecurring } from '@affine/graphql';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { useLiveData, useService } from '@toeverything/infra';
 import { nanoid } from 'nanoid';
 import { useEffect, useState } from 'react';
@@ -21,7 +21,7 @@ export const AISubscribe = ({ ...btnProps }: AISubscribeProps) => {
     subscriptionService.prices.revalidate();
   }, [subscriptionService]);
 
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   useEffect(() => {
     if (isOpenedExternalWindow) {
diff --git a/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/ai/ai-plan.tsx b/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/ai/ai-plan.tsx
index cb62831fc8..35bc4e80ab 100644
--- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/ai/ai-plan.tsx
+++ b/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/ai/ai-plan.tsx
@@ -1,7 +1,6 @@
 import { Button } from '@affine/component';
 import { AuthService, SubscriptionService } from '@affine/core/modules/cloud';
-import { i18nTime } from '@affine/i18n';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { i18nTime, useI18n } from '@affine/i18n';
 import { useLiveData, useService } from '@toeverything/infra';
 import { useEffect } from 'react';
 
@@ -11,7 +10,7 @@ import * as styles from './ai-plan.css';
 import { AIBenefits } from './benefits';
 
 export const AIPlan = () => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   const authService = useService(AuthService);
   const subscriptionService = useService(SubscriptionService);
diff --git a/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/ai/benefits.tsx b/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/ai/benefits.tsx
index 6c7b471bed..23ea3a3948 100644
--- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/ai/benefits.tsx
+++ b/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/ai/benefits.tsx
@@ -1,4 +1,4 @@
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import {
   CheckBoxCheckLinearIcon,
   PenIcon,
@@ -8,7 +8,7 @@ import { useMemo } from 'react';
 
 import * as styles from './ai-plan.css';
 
-const benefitsGetter = (t: ReturnType<typeof useAFFiNEI18N>) => [
+const benefitsGetter = (t: ReturnType<typeof useI18n>) => [
   {
     name: t['com.affine.payment.ai.benefit.g1'](),
     icon: <TextIcon />,
@@ -39,7 +39,7 @@ const benefitsGetter = (t: ReturnType<typeof useAFFiNEI18N>) => [
 ];
 
 export const AIBenefits = () => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const benefits = useMemo(() => benefitsGetter(t), [t]);
   // TODO: responsive
   return (
diff --git a/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/cloud-plans.tsx b/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/cloud-plans.tsx
index c6f2bc9e1c..b07e7a9300 100644
--- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/cloud-plans.tsx
+++ b/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/cloud-plans.tsx
@@ -1,13 +1,13 @@
 // TODO: we don't handle i18n for now
 // it's better to manage all equity at server side
 import { SubscriptionPlan, SubscriptionRecurring } from '@affine/graphql';
-import type { useAFFiNEI18N } from '@affine/i18n/hooks';
+import type { useI18n } from '@affine/i18n';
 import { AfFiNeIcon } from '@blocksuite/icons/rc';
 import type { ReactNode } from 'react';
 
 import { planTitleTitleCaption } from './style.css';
 
-type T = ReturnType<typeof useAFFiNEI18N>;
+type T = ReturnType<typeof useI18n>;
 
 export type Benefits = Record<
   string,
diff --git a/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/index.tsx b/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/index.tsx
index b3a8643088..b0c6bbc56b 100644
--- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/index.tsx
+++ b/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/index.tsx
@@ -1,7 +1,6 @@
 import { Switch } from '@affine/component';
 import { SubscriptionPlan, SubscriptionRecurring } from '@affine/graphql';
-import { Trans } from '@affine/i18n';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { Trans, useI18n } from '@affine/i18n';
 import { useLiveData, useService } from '@toeverything/infra';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import type { FallbackProps } from 'react-error-boundary';
@@ -20,7 +19,7 @@ const getRecurringLabel = ({
   t,
 }: {
   recurring: SubscriptionRecurring;
-  t: ReturnType<typeof useAFFiNEI18N>;
+  t: ReturnType<typeof useI18n>;
 }) => {
   return recurring === SubscriptionRecurring.Monthly
     ? t['com.affine.payment.recurring-monthly']()
@@ -28,7 +27,7 @@ const getRecurringLabel = ({
 };
 
 const Settings = () => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   const loggedIn =
     useLiveData(useService(AuthService).session.status$) === 'authenticated';
@@ -214,7 +213,7 @@ export const AFFiNEPricingPlans = () => {
 };
 
 const PlansErrorBoundary = ({ resetErrorBoundary }: FallbackProps) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   const scroll = (
     <div className={styles.errorTip}>
diff --git a/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/layout.tsx b/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/layout.tsx
index cb0dd7c5c1..5d4999737f 100644
--- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/layout.tsx
+++ b/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/layout.tsx
@@ -1,7 +1,7 @@
 import { Button, Divider, IconButton } from '@affine/component';
 import { SettingHeader } from '@affine/component/setting-components';
 import { openSettingModalAtom } from '@affine/core/atoms';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import {
   ArrowDownBigIcon,
   ArrowRightBigIcon,
@@ -27,7 +27,7 @@ import { settingModalScrollContainerAtom } from '../../atoms';
 import * as styles from './layout.css';
 
 export const SeeAllLink = () => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   return (
     <a
@@ -82,7 +82,7 @@ export interface PlanLayoutProps {
 }
 
 export const PlanLayout = ({ cloud, ai, aiTip }: PlanLayoutProps) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const [{ scrollAnchor }, setOpenSettingModal] = useAtom(openSettingModalAtom);
   const aiPricingPlanRef = useRef<HTMLDivElement>(null);
   const aiScrollTipRef = useRef<HTMLDivElement>(null);
diff --git a/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/modals.tsx b/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/modals.tsx
index ea613c5d5b..fcaec053ea 100644
--- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/modals.tsx
+++ b/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/modals.tsx
@@ -1,7 +1,7 @@
 import { Button } from '@affine/component/ui/button';
 import type { ConfirmModalProps } from '@affine/component/ui/modal';
 import { ConfirmModal, Modal } from '@affine/component/ui/modal';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { DialogTrigger } from '@radix-ui/react-dialog';
 import type { ReactNode } from 'react';
 import { useEffect, useRef } from 'react';
@@ -26,7 +26,7 @@ export const ConfirmLoadingModal = ({
   loading?: boolean;
   content?: ReactNode;
 } & ConfirmModalProps) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const confirmed = useRef(false);
 
   const title = t[`com.affine.payment.modal.${type}.title`]();
@@ -79,7 +79,7 @@ export const DowngradeModal = ({
   onOpenChange?: (open: boolean) => void;
   onCancel?: () => void;
 }) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const canceled = useRef(false);
 
   useEffect(() => {
diff --git a/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/plan-card.tsx b/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/plan-card.tsx
index 66f77473e2..6fca8d5566 100644
--- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/plan-card.tsx
+++ b/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/plan-card.tsx
@@ -5,8 +5,7 @@ import { AuthService, SubscriptionService } from '@affine/core/modules/cloud';
 import { popupWindow } from '@affine/core/utils';
 import type { SubscriptionRecurring } from '@affine/graphql';
 import { SubscriptionPlan, SubscriptionStatus } from '@affine/graphql';
-import { Trans } from '@affine/i18n';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { Trans, useI18n } from '@affine/i18n';
 import { DoneIcon } from '@blocksuite/icons/rc';
 import { useLiveData, useService } from '@toeverything/infra';
 import { useAtom, useSetAtom } from 'jotai';
@@ -86,7 +85,7 @@ export const PlanCard = (props: PlanCardProps) => {
 };
 
 const ActionButton = ({ detail, recurring }: PlanCardProps) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const loggedIn =
     useLiveData(useService(AuthService).session.status$) === 'authenticated';
   const subscriptionService = useService(SubscriptionService);
@@ -157,7 +156,7 @@ const ActionButton = ({ detail, recurring }: PlanCardProps) => {
 };
 
 const CurrentPlan = () => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   return (
     <Button className={styles.planAction}>
       {t['com.affine.payment.current-plan']()}
@@ -166,7 +165,7 @@ const CurrentPlan = () => {
 };
 
 const Downgrade = ({ disabled }: { disabled?: boolean }) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const [open, setOpen] = useState(false);
 
   const tooltipContent = disabled
@@ -192,7 +191,7 @@ const Downgrade = ({ disabled }: { disabled?: boolean }) => {
 };
 
 const BookDemo = ({ plan }: { plan: SubscriptionPlan }) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const url = useMemo(() => {
     switch (plan) {
       case SubscriptionPlan.Team:
@@ -227,7 +226,7 @@ const BookDemo = ({ plan }: { plan: SubscriptionPlan }) => {
 const Upgrade = ({ recurring }: { recurring: SubscriptionRecurring }) => {
   const [isMutating, setMutating] = useState(false);
   const [isOpenedExternalWindow, setOpenedExternalWindow] = useState(false);
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   const subscriptionService = useService(SubscriptionService);
 
@@ -296,7 +295,7 @@ const ChangeRecurring = ({
   disabled?: boolean;
   due: string;
 }) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const [open, setOpen] = useState(false);
   const [isMutating, setIsMutating] = useState(false);
   // allow replay request on network error until component unmount or success
@@ -369,7 +368,7 @@ const SignUpAction = ({ children }: PropsWithChildren) => {
 };
 
 const ResumeButton = () => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const [open, setOpen] = useState(false);
   const [hovered, setHovered] = useState(false);
 
diff --git a/packages/frontend/core/src/components/affine/setting-modal/general-setting/shortcuts/index.tsx b/packages/frontend/core/src/components/affine/setting-modal/general-setting/shortcuts/index.tsx
index 7ac9bd2047..b276eb6cb9 100644
--- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/shortcuts/index.tsx
+++ b/packages/frontend/core/src/components/affine/setting-modal/general-setting/shortcuts/index.tsx
@@ -2,7 +2,7 @@ import {
   SettingHeader,
   SettingWrapper,
 } from '@affine/component/setting-components';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 
 import type { ShortcutsInfo } from '../../../../../hooks/affine/use-shortcuts';
 import {
@@ -41,7 +41,7 @@ const ShortcutsPanel = ({
 };
 
 export const Shortcuts = () => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   const markdownShortcutsInfo = useMarkdownShortcuts();
   const pageShortcutsInfo = usePageShortcuts();
diff --git a/packages/frontend/core/src/components/affine/setting-modal/setting-sidebar/index.tsx b/packages/frontend/core/src/components/affine/setting-modal/setting-sidebar/index.tsx
index b3e58f6334..2ec46178bf 100644
--- a/packages/frontend/core/src/components/affine/setting-modal/setting-sidebar/index.tsx
+++ b/packages/frontend/core/src/components/affine/setting-modal/setting-sidebar/index.tsx
@@ -9,7 +9,7 @@ import { useWorkspaceInfo } from '@affine/core/hooks/use-workspace-info';
 import { AuthService } from '@affine/core/modules/cloud';
 import { UserFeatureService } from '@affine/core/modules/cloud/services/user-feature';
 import { UNTITLED_WORKSPACE_NAME } from '@affine/env/constant';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { Logo1Icon } from '@blocksuite/icons/rc';
 import type { WorkspaceMetadata } from '@toeverything/infra';
 import {
@@ -73,7 +73,7 @@ export const UserInfo = ({ onAccountSettingClick, active }: UserInfoProps) => {
 };
 
 export const SignInButton = () => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const [, setAuthModal] = useAtom(authAtom);
 
   return (
@@ -111,7 +111,7 @@ export const SettingSidebar = ({
   ) => void;
   selectedWorkspaceId: string | null;
 }) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const loginStatus = useLiveData(useService(AuthService).session.status$);
   const generalList = useGeneralSettingList();
   const onAccountSettingClick = useCallback(() => {
@@ -259,7 +259,7 @@ const subTabConfigs = [
   },
 ] satisfies {
   key: WorkspaceSubTab;
-  title: keyof ReturnType<typeof useAFFiNEI18N>;
+  title: keyof ReturnType<typeof useI18n>;
 }[];
 
 const avatarImageProps = { style: { borderRadius: 2 } };
@@ -280,7 +280,7 @@ const WorkspaceListItem = ({
   const name = information?.name ?? UNTITLED_WORKSPACE_NAME;
   const currentWorkspace = workspaceService.workspace;
   const isCurrent = currentWorkspace.id === meta.id;
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   useEffect(() => {
     userFeatureService.userFeature.revalidate();
diff --git a/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/new-workspace-setting-detail/delete-leave-workspace/delete/index.tsx b/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/new-workspace-setting-detail/delete-leave-workspace/delete/index.tsx
index 0631ea4441..0766ef8e09 100644
--- a/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/new-workspace-setting-detail/delete-leave-workspace/delete/index.tsx
+++ b/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/new-workspace-setting-detail/delete-leave-workspace/delete/index.tsx
@@ -4,8 +4,7 @@ import { ConfirmModal } from '@affine/component/ui/modal';
 import { useWorkspaceInfo } from '@affine/core/hooks/use-workspace-info';
 import { UNTITLED_WORKSPACE_NAME } from '@affine/env/constant';
 import { WorkspaceFlavour } from '@affine/env/workspace';
-import { Trans } from '@affine/i18n';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { Trans, useI18n } from '@affine/i18n';
 import type { WorkspaceMetadata } from '@toeverything/infra';
 import { useCallback, useState } from 'react';
 
@@ -25,7 +24,7 @@ export const WorkspaceDeleteModal = ({
   const info = useWorkspaceInfo(workspaceMetadata);
   const workspaceName = info?.name ?? UNTITLED_WORKSPACE_NAME;
   const allowDelete = deleteStr === workspaceName;
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   const handleOnEnter = useCallback(() => {
     if (allowDelete) {
diff --git a/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/new-workspace-setting-detail/delete-leave-workspace/index.tsx b/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/new-workspace-setting-detail/delete-leave-workspace/index.tsx
index bb89060575..e491c8f2e8 100644
--- a/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/new-workspace-setting-detail/delete-leave-workspace/index.tsx
+++ b/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/new-workspace-setting-detail/delete-leave-workspace/index.tsx
@@ -3,7 +3,7 @@ import { SettingRow } from '@affine/component/setting-components';
 import { ConfirmModal } from '@affine/component/ui/modal';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
 import { WorkspacePermissionService } from '@affine/core/modules/permissions';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { ArrowRightSmallIcon } from '@blocksuite/icons/rc';
 import {
   GlobalContextService,
@@ -35,7 +35,7 @@ export const DeleteLeaveWorkspace = () => {
     WorkspacePermissionService,
     WorkspacesService,
   });
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const workspace = workspaceService.workspace;
   const { jumpToSubPath, jumpToIndex } = useNavigateHelper();
   // fixme: cloud regression
diff --git a/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/new-workspace-setting-detail/enable-cloud.tsx b/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/new-workspace-setting-detail/enable-cloud.tsx
index c2f5857c58..1cb923feb7 100644
--- a/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/new-workspace-setting-detail/enable-cloud.tsx
+++ b/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/new-workspace-setting-detail/enable-cloud.tsx
@@ -3,7 +3,7 @@ import { Button } from '@affine/component/ui/button';
 import { useEnableCloud } from '@affine/core/hooks/affine/use-enable-cloud';
 import { UNTITLED_WORKSPACE_NAME } from '@affine/env/constant';
 import { WorkspaceFlavour } from '@affine/env/workspace';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import {
   useLiveData,
   useService,
@@ -21,7 +21,7 @@ export interface PublishPanelProps {
 }
 
 export const EnableCloudPanel = () => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const confirmEnableCloud = useEnableCloud();
 
   const workspace = useService(WorkspaceService).workspace;
diff --git a/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/new-workspace-setting-detail/export.tsx b/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/new-workspace-setting-detail/export.tsx
index 9fd9e41ee5..c322752ea9 100644
--- a/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/new-workspace-setting-detail/export.tsx
+++ b/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/new-workspace-setting-detail/export.tsx
@@ -4,7 +4,7 @@ import { Button } from '@affine/component/ui/button';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
 import { useSystemOnline } from '@affine/core/hooks/use-system-online';
 import { apis } from '@affine/electron-api';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import type { Workspace, WorkspaceMetadata } from '@toeverything/infra';
 import { useState } from 'react';
 
@@ -18,7 +18,7 @@ export const ExportPanel = ({
   workspace,
 }: ExportPanelProps) => {
   const workspaceId = workspaceMetadata.id;
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const [saving, setSaving] = useState(false);
   const isOnline = useSystemOnline();
 
diff --git a/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/new-workspace-setting-detail/index.tsx b/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/new-workspace-setting-detail/index.tsx
index 85cf62553c..de4dcbaefe 100644
--- a/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/new-workspace-setting-detail/index.tsx
+++ b/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/new-workspace-setting-detail/index.tsx
@@ -6,7 +6,7 @@ import {
 import { useWorkspace } from '@affine/core/hooks/use-workspace';
 import { useWorkspaceInfo } from '@affine/core/hooks/use-workspace-info';
 import { UNTITLED_WORKSPACE_NAME } from '@affine/env/constant';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { ArrowRightSmallIcon } from '@blocksuite/icons/rc';
 import { FrameworkScope } from '@toeverything/infra';
 import { useCallback } from 'react';
@@ -22,7 +22,7 @@ import type { WorkspaceSettingDetailProps } from './types';
 export const WorkspaceSettingDetail = ({
   workspaceMetadata,
 }: WorkspaceSettingDetailProps) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   // useWorkspace hook is a vary heavy operation here, but we need syncing name and avatar changes here,
   // we don't have a better way to do this now
diff --git a/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/new-workspace-setting-detail/members.tsx b/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/new-workspace-setting-detail/members.tsx
index 2d7f7538ea..9024e8f131 100644
--- a/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/new-workspace-setting-detail/members.tsx
+++ b/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/new-workspace-setting-detail/members.tsx
@@ -26,7 +26,7 @@ import { WorkspaceQuotaService } from '@affine/core/modules/quota';
 import { mixpanel } from '@affine/core/utils';
 import { WorkspaceFlavour } from '@affine/env/workspace';
 import { Permission } from '@affine/graphql';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { MoreVerticalIcon } from '@blocksuite/icons/rc';
 import {
   useEnsureLiveData,
@@ -58,7 +58,7 @@ import * as style from './style.css';
 const COUNT_PER_PAGE = 8;
 type OnRevoke = (memberId: string) => void;
 const MembersPanelLocal = () => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   return (
     <Tooltip content={t['com.affine.settings.member-tooltip']()}>
       <div className={style.fakeWrapper}>
@@ -105,7 +105,7 @@ export const CloudWorkspaceMembersPanel = () => {
     ? checkMemberCountLimit(memberCount, workspaceQuota.memberLimit)
     : null;
 
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const { invite, isMutating } = useInviteMember(workspace.id);
   const revokeMemberPermission = useRevokeMemberPermission(workspace.id);
 
@@ -258,7 +258,7 @@ export const CloudWorkspaceMembersPanel = () => {
   );
 };
 export const MembersPanelFallback = () => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   return (
     <>
@@ -282,7 +282,7 @@ const MemberListFallback = ({ memberCount }: { memberCount: number }) => {
     }
     return 'auto';
   }, [memberCount]);
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   return (
     <div
@@ -338,7 +338,7 @@ const MemberItem = ({
   currentAccount: AuthAccountInfo;
   onRevoke: OnRevoke;
 }) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   const handleRevoke = useCallback(() => {
     onRevoke(member.id);
diff --git a/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/new-workspace-setting-detail/profile.tsx b/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/new-workspace-setting-detail/profile.tsx
index 6f3d7bb111..d4de4a74bd 100644
--- a/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/new-workspace-setting-detail/profile.tsx
+++ b/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/new-workspace-setting-detail/profile.tsx
@@ -6,7 +6,7 @@ import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
 import { WorkspacePermissionService } from '@affine/core/modules/permissions';
 import { validateAndReduceImage } from '@affine/core/utils/reduce-image';
 import { UNTITLED_WORKSPACE_NAME } from '@affine/env/constant';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { CameraIcon } from '@blocksuite/icons/rc';
 import { useLiveData, useService, WorkspaceService } from '@toeverything/infra';
 import type { KeyboardEvent, MouseEvent } from 'react';
@@ -17,7 +17,7 @@ import * as style from './style.css';
 const avatarImageProps = { style: { borderRadius: 8 } };
 
 export const ProfilePanel = () => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   const workspace = useService(WorkspaceService).workspace;
   const permissionService = useService(WorkspacePermissionService);
diff --git a/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/properties/index.tsx b/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/properties/index.tsx
index a2d01fcde4..8e2aa106e6 100644
--- a/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/properties/index.tsx
+++ b/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/properties/index.tsx
@@ -2,8 +2,7 @@ import { Button, IconButton, Menu } from '@affine/component';
 import { SettingHeader } from '@affine/component/setting-components';
 import { useWorkspaceInfo } from '@affine/core/hooks/use-workspace-info';
 import type { PageInfoCustomPropertyMeta } from '@affine/core/modules/properties/services/schema';
-import { Trans } from '@affine/i18n';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { Trans, useI18n } from '@affine/i18n';
 import {
   DeleteIcon,
   FilterIcon,
@@ -61,7 +60,7 @@ const EditPropertyButton = ({
 }: {
   property: PageInfoCustomPropertyMeta;
 }) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const manager = useContext(managerContext);
   const [localPropertyMeta, setLocalPropertyMeta] = useState(() => ({
     ...property,
@@ -202,7 +201,7 @@ const CustomPropertyRow = ({
 }) => {
   const Icon = nameToIcon(property.icon, property.type);
   const required = property.required;
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   return (
     <div
       className={styles.propertyRow}
@@ -272,7 +271,7 @@ const CustomPropertyRowsList = ({
   const manager = useContext(managerContext);
   const properties = manager.getOrderedPropertiesSchema();
   const statistics = manager.getPropertyStatistics();
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   if (filterMode !== 'all') {
     const filtered = properties.filter(property => {
@@ -313,7 +312,7 @@ const CustomPropertyRowsList = ({
 };
 
 const WorkspaceSettingPropertiesMain = () => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const manager = useContext(managerContext);
   const [filterMode, setFilterMode] = useState<PropertyFilterMode>('all');
   const properties = manager.getOrderedPropertiesSchema();
@@ -390,7 +389,7 @@ export const WorkspaceSettingProperties = ({
 }: {
   workspaceMetadata: WorkspaceMetadata;
 }) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const workspace = useWorkspace(workspaceMetadata);
   const workspaceInfo = useWorkspaceInfo(workspaceMetadata);
   const title = workspaceInfo?.name || 'untitled';
diff --git a/packages/frontend/core/src/components/affine/share-page-modal/share-menu/share-export.tsx b/packages/frontend/core/src/components/affine/share-page-modal/share-menu/share-export.tsx
index 47aa2c7eee..bbb8c62c7d 100644
--- a/packages/frontend/core/src/components/affine/share-page-modal/share-menu/share-export.tsx
+++ b/packages/frontend/core/src/components/affine/share-page-modal/share-menu/share-export.tsx
@@ -4,7 +4,7 @@ import { ExportMenuItems } from '@affine/core/components/page-list';
 import { useExportPage } from '@affine/core/hooks/affine/use-export-page';
 import { useSharingUrl } from '@affine/core/hooks/affine/use-share-url';
 import { WorkspaceFlavour } from '@affine/env/workspace';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { CopyIcon } from '@blocksuite/icons/rc';
 import { DocService, useLiveData, useService } from '@toeverything/infra';
 
@@ -15,7 +15,7 @@ export const ShareExport = ({
   workspaceMetadata: workspace,
   currentPage,
 }: ShareMenuProps) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const doc = useService(DocService).doc;
   const workspaceId = workspace.id;
   const pageId = currentPage.id;
diff --git a/packages/frontend/core/src/components/affine/share-page-modal/share-menu/share-menu.tsx b/packages/frontend/core/src/components/affine/share-page-modal/share-menu/share-menu.tsx
index d312e7095b..d87cac1f1b 100644
--- a/packages/frontend/core/src/components/affine/share-page-modal/share-menu/share-menu.tsx
+++ b/packages/frontend/core/src/components/affine/share-page-modal/share-menu/share-menu.tsx
@@ -4,7 +4,7 @@ import { Menu } from '@affine/component/ui/menu';
 import { useRegisterCopyLinkCommands } from '@affine/core/hooks/affine/use-register-copy-link-commands';
 import { useIsActiveView } from '@affine/core/modules/workbench';
 import { WorkspaceFlavour } from '@affine/env/workspace';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { WebIcon } from '@blocksuite/icons/rc';
 import type { Doc } from '@blocksuite/store';
 import type { WorkspaceMetadata } from '@toeverything/infra';
@@ -22,7 +22,7 @@ export interface ShareMenuProps {
 }
 
 const ShareMenuContent = (props: ShareMenuProps) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   return (
     <div className={styles.containerStyle}>
       <div className={styles.headerStyle}>
@@ -41,7 +41,7 @@ const ShareMenuContent = (props: ShareMenuProps) => {
 };
 
 const LocalShareMenu = (props: ShareMenuProps) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   return (
     <Menu
       items={<ShareMenuContent {...props} />}
@@ -65,7 +65,7 @@ const LocalShareMenu = (props: ShareMenuProps) => {
 };
 
 const CloudShareMenu = (props: ShareMenuProps) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   // only enable copy link commands when the view is active and the workspace is cloud
   const isActiveView = useIsActiveView();
diff --git a/packages/frontend/core/src/components/affine/share-page-modal/share-menu/share-page.tsx b/packages/frontend/core/src/components/affine/share-page-modal/share-menu/share-page.tsx
index f5ce6c5b99..daec1d676c 100644
--- a/packages/frontend/core/src/components/affine/share-page-modal/share-menu/share-page.tsx
+++ b/packages/frontend/core/src/components/affine/share-page-modal/share-menu/share-page.tsx
@@ -16,7 +16,7 @@ import { ShareService } from '@affine/core/modules/share-doc';
 import { mixpanel } from '@affine/core/utils';
 import { WorkspaceFlavour } from '@affine/env/workspace';
 import { PublicPageMode } from '@affine/graphql';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import {
   ArrowRightSmallIcon,
   SingleSelectSelectSolidIcon,
@@ -36,7 +36,7 @@ import * as styles from './index.css';
 import type { ShareMenuProps } from './share-menu';
 
 export const LocalSharePage = (props: ShareMenuProps) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   return (
     <div className={styles.localSharePage}>
@@ -95,7 +95,7 @@ export const AffineSharePage = (props: ShareMenuProps) => {
     urlType: 'share',
   });
 
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   const onClickCreateLink = useAsyncCallback(async () => {
     try {
diff --git a/packages/frontend/core/src/components/affine/sign-out-modal/index.tsx b/packages/frontend/core/src/components/affine/sign-out-modal/index.tsx
index 466695edfe..f2359202c5 100644
--- a/packages/frontend/core/src/components/affine/sign-out-modal/index.tsx
+++ b/packages/frontend/core/src/components/affine/sign-out-modal/index.tsx
@@ -1,6 +1,6 @@
 import type { ConfirmModalProps } from '@affine/component/ui/modal';
 import { ConfirmModal } from '@affine/component/ui/modal';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { useMemo } from 'react';
 
 type SignOutConfirmModalI18NKeys =
@@ -11,7 +11,7 @@ type SignOutConfirmModalI18NKeys =
 
 export const SignOutModal = ({ ...props }: ConfirmModalProps) => {
   const { title, description, cancelText, confirmButtonOptions = {} } = props;
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   const defaultTexts = useMemo(() => {
     const getDefaultText = (key: SignOutConfirmModalI18NKeys) => {
diff --git a/packages/frontend/core/src/components/affine/star-affine-modal/index.tsx b/packages/frontend/core/src/components/affine/star-affine-modal/index.tsx
index 0e5be404f4..f0185537eb 100644
--- a/packages/frontend/core/src/components/affine/star-affine-modal/index.tsx
+++ b/packages/frontend/core/src/components/affine/star-affine-modal/index.tsx
@@ -1,10 +1,10 @@
 import { OverlayModal } from '@affine/component';
 import { openStarAFFiNEModalAtom } from '@affine/core/atoms';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { useAtom } from 'jotai';
 
 export const StarAFFiNEModal = () => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const [open, setOpen] = useAtom(openStarAFFiNEModalAtom);
 
   return (
diff --git a/packages/frontend/core/src/components/affine/subscription-landing/index.tsx b/packages/frontend/core/src/components/affine/subscription-landing/index.tsx
index 026d66460a..30333c17e3 100644
--- a/packages/frontend/core/src/components/affine/subscription-landing/index.tsx
+++ b/packages/frontend/core/src/components/affine/subscription-landing/index.tsx
@@ -1,8 +1,7 @@
 import { AuthPageContainer } from '@affine/component/auth-components';
 import { Button } from '@affine/component/ui/button';
 import { useNavigateHelper } from '@affine/core/hooks/use-navigate-helper';
-import { Trans } from '@affine/i18n';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { Trans, useI18n } from '@affine/i18n';
 import { type ReactNode, useCallback } from 'react';
 import { useSearchParams } from 'react-router-dom';
 
@@ -15,7 +14,7 @@ const UpgradeSuccessLayout = ({
   title?: ReactNode;
   description?: ReactNode;
 }) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const [params] = useSearchParams();
 
   const { jumpToIndex, openInApp } = useNavigateHelper();
@@ -56,7 +55,7 @@ const UpgradeSuccessLayout = ({
 };
 
 export const CloudUpgradeSuccess = () => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   return (
     <UpgradeSuccessLayout
       title={t['com.affine.payment.upgrade-success-page.title']()}
@@ -66,7 +65,7 @@ export const CloudUpgradeSuccess = () => {
 };
 
 export const AIUpgradeSuccess = () => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   return (
     <UpgradeSuccessLayout
diff --git a/packages/frontend/core/src/components/affine/tmp-disable-affine-cloud-modal/index.tsx b/packages/frontend/core/src/components/affine/tmp-disable-affine-cloud-modal/index.tsx
index 661b3ea497..c7e2a7acd4 100644
--- a/packages/frontend/core/src/components/affine/tmp-disable-affine-cloud-modal/index.tsx
+++ b/packages/frontend/core/src/components/affine/tmp-disable-affine-cloud-modal/index.tsx
@@ -1,8 +1,7 @@
 import { Empty } from '@affine/component';
 import type { ModalProps } from '@affine/component/ui/modal';
 import { Modal } from '@affine/component/ui/modal';
-import { Trans } from '@affine/i18n';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { Trans, useI18n } from '@affine/i18n';
 import { useCallback } from 'react';
 
 import {
@@ -13,7 +12,7 @@ import {
 } from './style';
 
 export const TmpDisableAffineCloudModal = (props: ModalProps) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const onClose = useCallback(() => {
     props.onOpenChange?.(false);
   }, [props]);
diff --git a/packages/frontend/core/src/components/app-sidebar/add-page-button/index.tsx b/packages/frontend/core/src/components/app-sidebar/add-page-button/index.tsx
index 3d3be166bc..4c8ccda53c 100644
--- a/packages/frontend/core/src/components/app-sidebar/add-page-button/index.tsx
+++ b/packages/frontend/core/src/components/app-sidebar/add-page-button/index.tsx
@@ -1,4 +1,4 @@
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { PlusIcon } from '@blocksuite/icons/rc';
 import clsx from 'clsx';
 import type React from 'react';
@@ -17,7 +17,7 @@ export function AddPageButton({
   className,
   style,
 }: AddPageButtonProps) {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   return (
     <button
diff --git a/packages/frontend/core/src/components/app-sidebar/app-updater-button/index.tsx b/packages/frontend/core/src/components/app-sidebar/app-updater-button/index.tsx
index bd95eee793..8a1c709fdf 100644
--- a/packages/frontend/core/src/components/app-sidebar/app-updater-button/index.tsx
+++ b/packages/frontend/core/src/components/app-sidebar/app-updater-button/index.tsx
@@ -1,7 +1,7 @@
 import { Tooltip } from '@affine/component';
 import { popupWindow } from '@affine/core/utils';
 import { Unreachable } from '@affine/env/constant';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { CloseIcon, NewIcon, ResetIcon } from '@blocksuite/icons/rc';
 import clsx from 'clsx';
 import { useCallback, useMemo } from 'react';
@@ -40,7 +40,7 @@ interface ButtonContentProps {
 }
 
 function DownloadUpdate({ updateAvailable }: ButtonContentProps) {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   return (
     <div className={styles.installLabel}>
       <span className={styles.ellipsisTextOverflow}>
@@ -52,7 +52,7 @@ function DownloadUpdate({ updateAvailable }: ButtonContentProps) {
 }
 
 function UpdateReady({ updateAvailable, appQuitting }: ButtonContentProps) {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   return (
     <div className={styles.updateAvailableWrapper}>
       <div className={styles.installLabelNormal}>
@@ -76,7 +76,7 @@ function DownloadingUpdate({
   updateAvailable,
   downloadProgress,
 }: ButtonContentProps) {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   return (
     <div className={clsx([styles.updateAvailableWrapper])}>
       <div className={clsx([styles.installLabelNormal])}>
@@ -97,7 +97,7 @@ function DownloadingUpdate({
 }
 
 function OpenDownloadPage({ updateAvailable }: ButtonContentProps) {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   return (
     <>
       <div className={styles.installLabelNormal}>
@@ -117,7 +117,7 @@ function OpenDownloadPage({ updateAvailable }: ButtonContentProps) {
 }
 
 function WhatsNew({ onDismissChangelog }: ButtonContentProps) {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const onClickClose: React.MouseEventHandler = useCallback(
     e => {
       onDismissChangelog();
diff --git a/packages/frontend/core/src/components/app-sidebar/quick-search-input/index.tsx b/packages/frontend/core/src/components/app-sidebar/quick-search-input/index.tsx
index d97c08f0c2..9c0f2cc774 100644
--- a/packages/frontend/core/src/components/app-sidebar/quick-search-input/index.tsx
+++ b/packages/frontend/core/src/components/app-sidebar/quick-search-input/index.tsx
@@ -1,4 +1,4 @@
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { SearchIcon } from '@blocksuite/icons/rc';
 import clsx from 'clsx';
 import type { HTMLAttributes } from 'react';
@@ -12,7 +12,7 @@ interface QuickSearchInputProps extends HTMLAttributes<HTMLDivElement> {
 
 // Although it is called an input, it is actually a button.
 export function QuickSearchInput({ onClick, ...props }: QuickSearchInputProps) {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const isMac = environment.isBrowser && environment.isMacOs;
 
   return (
diff --git a/packages/frontend/core/src/components/app-sidebar/sidebar-header/sidebar-switch.tsx b/packages/frontend/core/src/components/app-sidebar/sidebar-header/sidebar-switch.tsx
index dd8b7ce548..26fe1046b7 100644
--- a/packages/frontend/core/src/components/app-sidebar/sidebar-header/sidebar-switch.tsx
+++ b/packages/frontend/core/src/components/app-sidebar/sidebar-header/sidebar-switch.tsx
@@ -1,5 +1,5 @@
 import { IconButton, Tooltip } from '@affine/component';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { SidebarIcon } from '@blocksuite/icons/rc';
 import clsx from 'clsx';
 import { useAtom } from 'jotai';
@@ -15,7 +15,7 @@ export const SidebarSwitch = ({
   className?: string;
 }) => {
   const [open, setOpen] = useAtom(appSidebarOpenAtom);
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const tooltipContent = open
     ? t['com.affine.sidebarSwitch.collapse']()
     : t['com.affine.sidebarSwitch.expand']();
diff --git a/packages/frontend/core/src/components/blocksuite/block-suite-editor/journal-doc-title.tsx b/packages/frontend/core/src/components/blocksuite/block-suite-editor/journal-doc-title.tsx
index c6e08bf60d..834ac58138 100644
--- a/packages/frontend/core/src/components/blocksuite/block-suite-editor/journal-doc-title.tsx
+++ b/packages/frontend/core/src/components/blocksuite/block-suite-editor/journal-doc-title.tsx
@@ -1,5 +1,5 @@
 import { useJournalInfoHelper } from '@affine/core/hooks/use-journal';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import type { Doc } from '@blocksuite/store';
 
 import * as styles from './styles.css';
@@ -7,7 +7,7 @@ import * as styles from './styles.css';
 export const BlocksuiteEditorJournalDocTitle = ({ page }: { page: Doc }) => {
   const { localizedJournalDate, isTodayJournal, journalDate } =
     useJournalInfoHelper(page.collection, page.id);
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   // TODO: i18n
   const day = journalDate?.format('dddd') ?? null;
diff --git a/packages/frontend/core/src/components/blocksuite/block-suite-header/favorite/index.tsx b/packages/frontend/core/src/components/blocksuite/block-suite-header/favorite/index.tsx
index 1b825dd844..6b46fd9910 100644
--- a/packages/frontend/core/src/components/blocksuite/block-suite-header/favorite/index.tsx
+++ b/packages/frontend/core/src/components/blocksuite/block-suite-header/favorite/index.tsx
@@ -1,7 +1,7 @@
 import { FavoriteTag } from '@affine/core/components/page-list';
 import { FavoriteItemsAdapter } from '@affine/core/modules/properties';
 import { toast } from '@affine/core/utils';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { assertExists } from '@blocksuite/global/utils';
 import { useLiveData, useService, WorkspaceService } from '@toeverything/infra';
 import { useCallback } from 'react';
@@ -11,7 +11,7 @@ export interface FavoriteButtonProps {
 }
 
 export const useFavorite = (pageId: string) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const workspace = useService(WorkspaceService).workspace;
   const docCollection = workspace.docCollection;
   const currentPage = docCollection.getDoc(pageId);
diff --git a/packages/frontend/core/src/components/blocksuite/block-suite-header/journal/today-button.tsx b/packages/frontend/core/src/components/blocksuite/block-suite-header/journal/today-button.tsx
index 4ac47c1a1c..6ea614161d 100644
--- a/packages/frontend/core/src/components/blocksuite/block-suite-header/journal/today-button.tsx
+++ b/packages/frontend/core/src/components/blocksuite/block-suite-header/journal/today-button.tsx
@@ -1,7 +1,7 @@
 import { Button } from '@affine/component';
 import { useJournalRouteHelper } from '@affine/core/hooks/use-journal';
 import type { DocCollection } from '@affine/core/shared';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { useCallback } from 'react';
 
 export interface JournalTodayButtonProps {
@@ -11,7 +11,7 @@ export interface JournalTodayButtonProps {
 export const JournalTodayButton = ({
   docCollection,
 }: JournalTodayButtonProps) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const journalHelper = useJournalRouteHelper(docCollection);
 
   const onToday = useCallback(() => {
diff --git a/packages/frontend/core/src/components/blocksuite/block-suite-header/menu/index.tsx b/packages/frontend/core/src/components/blocksuite/block-suite-header/menu/index.tsx
index b9980811ae..76a0c46fa9 100644
--- a/packages/frontend/core/src/components/blocksuite/block-suite-header/menu/index.tsx
+++ b/packages/frontend/core/src/components/blocksuite/block-suite-header/menu/index.tsx
@@ -14,7 +14,7 @@ import { useTrashModalHelper } from '@affine/core/hooks/affine/use-trash-modal-h
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
 import { mixpanel } from '@affine/core/utils';
 import { WorkspaceFlavour } from '@affine/env/workspace';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import {
   DuplicateIcon,
   EdgelessIcon,
@@ -49,7 +49,7 @@ export const PageHeaderMenuButton = ({
   pageId,
   isJournal,
 }: PageMenuProps) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   const workspace = useService(WorkspaceService).workspace;
   const docCollection = workspace.docCollection;
diff --git a/packages/frontend/core/src/components/blocksuite/block-suite-mode-switch/index.tsx b/packages/frontend/core/src/components/blocksuite/block-suite-mode-switch/index.tsx
index 4de542be7c..12d0536b92 100644
--- a/packages/frontend/core/src/components/blocksuite/block-suite-mode-switch/index.tsx
+++ b/packages/frontend/core/src/components/blocksuite/block-suite-mode-switch/index.tsx
@@ -1,6 +1,6 @@
 import { Tooltip } from '@affine/component/ui/tooltip';
 import { useBlockSuiteDocMeta } from '@affine/core/hooks/use-block-suite-page-meta';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import {
   type DocMode,
   DocService,
@@ -24,7 +24,7 @@ export type EditorModeSwitchProps = {
   publicMode?: DocMode;
 };
 const TooltipContent = () => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   return (
     <>
       {t['Switch']()}
@@ -41,7 +41,7 @@ export const EditorModeSwitch = ({
   isPublic,
   publicMode,
 }: EditorModeSwitchProps) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const pageMeta = useBlockSuiteDocMeta(docCollection).find(
     meta => meta.id === pageId
   );
diff --git a/packages/frontend/core/src/components/cloud/share-header-right-item/authenticated-item.tsx b/packages/frontend/core/src/components/cloud/share-header-right-item/authenticated-item.tsx
index c17b95eeec..64dc2d12e1 100644
--- a/packages/frontend/core/src/components/cloud/share-header-right-item/authenticated-item.tsx
+++ b/packages/frontend/core/src/components/cloud/share-header-right-item/authenticated-item.tsx
@@ -1,6 +1,6 @@
 import { Button } from '@affine/component/ui/button';
 import { useNavigateHelper } from '@affine/core/hooks/use-navigate-helper';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import {
   useLiveData,
   useService,
@@ -20,7 +20,7 @@ export const AuthenticatedItem = ({
   const workspacesService = useService(WorkspacesService);
   const workspaces = useLiveData(workspacesService.list.workspaces$);
   const isMember = workspaces?.some(workspace => workspace.id === workspaceId);
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const { jumpToPage } = useNavigateHelper();
 
   const handleEdit = useCallback(() => {
diff --git a/packages/frontend/core/src/components/cloud/share-header-right-item/present.tsx b/packages/frontend/core/src/components/cloud/share-header-right-item/present.tsx
index a43dd97e1d..4144257df9 100644
--- a/packages/frontend/core/src/components/cloud/share-header-right-item/present.tsx
+++ b/packages/frontend/core/src/components/cloud/share-header-right-item/present.tsx
@@ -1,6 +1,6 @@
 import { Button } from '@affine/component/ui/button';
 import { useActiveBlocksuiteEditor } from '@affine/core/hooks/use-block-suite-editor';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import type { EdgelessRootService } from '@blocksuite/blocks';
 import { PresentationIcon } from '@blocksuite/icons/rc';
 import { useCallback, useEffect, useState } from 'react';
@@ -8,7 +8,7 @@ import { useCallback, useEffect, useState } from 'react';
 import * as styles from './styles.css';
 
 export const PresentButton = () => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const [isPresent, setIsPresent] = useState(false);
   const [editor] = useActiveBlocksuiteEditor();
 
diff --git a/packages/frontend/core/src/components/cloud/share-header-right-item/user-avatar.tsx b/packages/frontend/core/src/components/cloud/share-header-right-item/user-avatar.tsx
index b128cb116b..30be16633d 100644
--- a/packages/frontend/core/src/components/cloud/share-header-right-item/user-avatar.tsx
+++ b/packages/frontend/core/src/components/cloud/share-header-right-item/user-avatar.tsx
@@ -6,7 +6,7 @@ import {
   MenuSeparator,
 } from '@affine/component/ui/menu';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { SignOutIcon } from '@blocksuite/icons/rc';
 import { useLiveData, useService } from '@toeverything/infra';
 import { useEffect, useMemo } from 'react';
@@ -54,7 +54,7 @@ const UserInfo = () => {
 export const PublishPageUserAvatar = () => {
   const authService = useService(AuthService);
   const user = useLiveData(authService.session.account$);
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   const handleSignOut = useAsyncCallback(async () => {
     await authService.signOut();
diff --git a/packages/frontend/core/src/components/page-list/collections/collection-list-header.tsx b/packages/frontend/core/src/components/page-list/collections/collection-list-header.tsx
index 2cafde00bb..ec0bdd5edf 100644
--- a/packages/frontend/core/src/components/page-list/collections/collection-list-header.tsx
+++ b/packages/frontend/core/src/components/page-list/collections/collection-list-header.tsx
@@ -1,5 +1,5 @@
 import { Button } from '@affine/component';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import type { ReactElement } from 'react';
 
 import * as styles from './collection-list-header.css';
@@ -11,7 +11,7 @@ export const CollectionListHeader = ({
   node: ReactElement | null;
   onCreate: () => void;
 }) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   return (
     <>
diff --git a/packages/frontend/core/src/components/page-list/collections/collection-list-item.tsx b/packages/frontend/core/src/components/page-list/collections/collection-list-item.tsx
index 81d2766ba8..164ae39008 100644
--- a/packages/frontend/core/src/components/page-list/collections/collection-list-item.tsx
+++ b/packages/frontend/core/src/components/page-list/collections/collection-list-item.tsx
@@ -1,7 +1,7 @@
 import { Checkbox } from '@affine/component';
 import { getDNDId } from '@affine/core/hooks/affine/use-global-dnd-helper';
 import { WorkbenchLink } from '@affine/core/modules/workbench';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { useDraggable } from '@dnd-kit/core';
 import type { PropsWithChildren } from 'react';
 import { useCallback, useMemo } from 'react';
@@ -19,7 +19,7 @@ const ListTitleCell = ({
   title,
   preview,
 }: Pick<PageListItemProps, 'title' | 'preview'>) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   return (
     <div data-testid="page-list-item-title" className={styles.titleCell}>
       <div
diff --git a/packages/frontend/core/src/components/page-list/components/favorite-tag.tsx b/packages/frontend/core/src/components/page-list/components/favorite-tag.tsx
index ca550700b6..b62706a4cd 100644
--- a/packages/frontend/core/src/components/page-list/components/favorite-tag.tsx
+++ b/packages/frontend/core/src/components/page-list/components/favorite-tag.tsx
@@ -1,6 +1,6 @@
 import type { IconButtonProps } from '@affine/component';
 import { IconButton, Tooltip } from '@affine/component';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { FavoritedIcon, FavoriteIcon } from '@blocksuite/icons/rc';
 import Lottie from 'lottie-react';
 import { forwardRef, useCallback, useState } from 'react';
@@ -14,7 +14,7 @@ export const FavoriteTag = forwardRef<
   } & Omit<IconButtonProps, 'children'>
 >(({ active, onClick, ...props }, ref) => {
   const [playAnimation, setPlayAnimation] = useState(false);
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const handleClick = useCallback(
     (e: React.MouseEvent<HTMLButtonElement>) => {
       e.stopPropagation();
diff --git a/packages/frontend/core/src/components/page-list/components/new-page-button.tsx b/packages/frontend/core/src/components/page-list/components/new-page-button.tsx
index c8c88adf2e..4c29f966f2 100644
--- a/packages/frontend/core/src/components/page-list/components/new-page-button.tsx
+++ b/packages/frontend/core/src/components/page-list/components/new-page-button.tsx
@@ -1,7 +1,7 @@
 import { DropdownButton, Menu } from '@affine/component';
 import { BlockCard } from '@affine/component/card/block-card';
 import { mixpanel } from '@affine/core/utils';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { EdgelessIcon, ImportIcon, PageIcon } from '@blocksuite/icons/rc';
 import type { PropsWithChildren } from 'react';
 import { useCallback, useState } from 'react';
@@ -20,7 +20,7 @@ export const CreateNewPagePopup = ({
   createNewEdgeless,
   importFile,
 }: NewPageButtonProps) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   return (
     <div
       style={{
diff --git a/packages/frontend/core/src/components/page-list/components/page-display-menu.tsx b/packages/frontend/core/src/components/page-list/components/page-display-menu.tsx
index d54255216c..de271740ad 100644
--- a/packages/frontend/core/src/components/page-list/components/page-display-menu.tsx
+++ b/packages/frontend/core/src/components/page-list/components/page-display-menu.tsx
@@ -5,7 +5,7 @@ import {
   MenuSeparator,
   MenuSub,
 } from '@affine/component';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { ArrowDownSmallIcon, DoneIcon } from '@blocksuite/icons/rc';
 import { useCallback, useMemo } from 'react';
 
@@ -19,7 +19,7 @@ type GroupOption = {
 };
 
 export const PageDisplayMenu = () => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const [workspaceProperties, setProperties] = useAllDocDisplayProperties();
   const handleSelect = useCallback(
     (value: PageGroupByType) => {
diff --git a/packages/frontend/core/src/components/page-list/docs/page-list-header.tsx b/packages/frontend/core/src/components/page-list/docs/page-list-header.tsx
index 668cbc65b8..1961798a93 100644
--- a/packages/frontend/core/src/components/page-list/docs/page-list-header.tsx
+++ b/packages/frontend/core/src/components/page-list/docs/page-list-header.tsx
@@ -11,7 +11,7 @@ import type { Tag } from '@affine/core/modules/tag';
 import { TagService } from '@affine/core/modules/tag';
 import { mixpanel } from '@affine/core/utils';
 import type { Collection } from '@affine/env/filter';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import {
   ArrowDownSmallIcon,
   SearchIcon,
@@ -37,7 +37,7 @@ import * as styles from './page-list-header.css';
 import { PageListNewPageButton } from './page-list-new-page-button';
 
 export const PageListHeader = () => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const workspace = useService(WorkspaceService).workspace;
   const { importFile, createEdgeless, createPage } = usePageHelper(
     workspace.docCollection
@@ -93,7 +93,7 @@ export const CollectionPageListHeader = ({
   collection: Collection;
   workspaceId: string;
 }) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const { jumpToCollections } = useNavigateHelper();
 
   const handleJumpToCollections = useCallback(() => {
@@ -186,7 +186,7 @@ export const TagPageListHeader = ({
   const tagColor = useLiveData(tag.color$);
   const tagTitle = useLiveData(tag.value$);
 
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const { jumpToTags, jumpToCollection } = useNavigateHelper();
   const collectionService = useService(CollectionService);
   const [openMenu, setOpenMenu] = useState(false);
@@ -269,7 +269,7 @@ interface SwitchTagProps {
 }
 
 export const SwitchTag = ({ onClick }: SwitchTagProps) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const [inputValue, setInputValue] = useState('');
   const tagList = useService(TagService).tagList;
   const filteredTags = useLiveData(
diff --git a/packages/frontend/core/src/components/page-list/docs/virtualized-page-list.tsx b/packages/frontend/core/src/components/page-list/docs/virtualized-page-list.tsx
index c02d3ed382..8330f2179c 100644
--- a/packages/frontend/core/src/components/page-list/docs/virtualized-page-list.tsx
+++ b/packages/frontend/core/src/components/page-list/docs/virtualized-page-list.tsx
@@ -4,8 +4,7 @@ import { useBlockSuiteDocMeta } from '@affine/core/hooks/use-block-suite-page-me
 import { CollectionService } from '@affine/core/modules/collection';
 import type { Tag } from '@affine/core/modules/tag';
 import type { Collection, Filter } from '@affine/env/filter';
-import { Trans } from '@affine/i18n';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { Trans, useI18n } from '@affine/i18n';
 import type { DocMeta } from '@blocksuite/store';
 import { useService, WorkspaceService } from '@toeverything/infra';
 import { useCallback, useMemo, useRef, useState } from 'react';
@@ -28,7 +27,7 @@ import {
 } from './page-list-header';
 
 const usePageOperationsRenderer = () => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const collectionService = useService(CollectionService);
   const removeFromAllowList = useCallback(
     (id: string) => {
diff --git a/packages/frontend/core/src/components/page-list/filter/date-select.tsx b/packages/frontend/core/src/components/page-list/filter/date-select.tsx
index 401c86530d..183103a8a7 100644
--- a/packages/frontend/core/src/components/page-list/filter/date-select.tsx
+++ b/packages/frontend/core/src/components/page-list/filter/date-select.tsx
@@ -1,6 +1,6 @@
 import type { PopoverProps } from '@affine/component';
 import { DatePicker, Popover } from '@affine/component';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import dayjs from 'dayjs';
 import { useCallback, useState } from 'react';
 
@@ -17,7 +17,7 @@ export const DateSelect = ({
   value: number;
   onChange: (value: number) => void;
 }) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const [open, setOpen] = useState(false);
 
   const onDateChange = useCallback(
diff --git a/packages/frontend/core/src/components/page-list/filter/filter-list.tsx b/packages/frontend/core/src/components/page-list/filter/filter-list.tsx
index ad24c98e65..3d0d17e1c2 100644
--- a/packages/frontend/core/src/components/page-list/filter/filter-list.tsx
+++ b/packages/frontend/core/src/components/page-list/filter/filter-list.tsx
@@ -1,6 +1,6 @@
 import { Button, IconButton, Menu } from '@affine/component';
 import type { Filter, PropertiesMeta } from '@affine/env/filter';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { CloseIcon, PlusIcon } from '@blocksuite/icons/rc';
 
 import { Condition } from './condition';
@@ -16,7 +16,7 @@ export const FilterList = ({
   onChange: (value: Filter[]) => void;
   propertiesMeta: PropertiesMeta;
 }) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   return (
     <div
       style={{
diff --git a/packages/frontend/core/src/components/page-list/filter/filter-tag-translation.tsx b/packages/frontend/core/src/components/page-list/filter/filter-tag-translation.tsx
index 53d3ede2f9..65e3789140 100644
--- a/packages/frontend/core/src/components/page-list/filter/filter-tag-translation.tsx
+++ b/packages/frontend/core/src/components/page-list/filter/filter-tag-translation.tsx
@@ -1,5 +1,5 @@
 import { Tooltip } from '@affine/component';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 
 import { ellipsisTextStyle } from './index.css';
 type FilterTagProps = {
@@ -7,7 +7,7 @@ type FilterTagProps = {
 };
 
 const useFilterTag = ({ name }: FilterTagProps) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   switch (name) {
     case 'Created':
       return t['Created']();
diff --git a/packages/frontend/core/src/components/page-list/filter/multi-select.tsx b/packages/frontend/core/src/components/page-list/filter/multi-select.tsx
index 45193791ae..053e9b8924 100644
--- a/packages/frontend/core/src/components/page-list/filter/multi-select.tsx
+++ b/packages/frontend/core/src/components/page-list/filter/multi-select.tsx
@@ -1,5 +1,5 @@
 import { Menu, MenuItem, Scrollable, Tooltip } from '@affine/component';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import clsx from 'clsx';
 import type { MouseEvent } from 'react';
 import { useMemo } from 'react';
@@ -18,7 +18,7 @@ export const MultiSelect = ({
     value: string;
   }[];
 }) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const optionMap = useMemo(
     () => Object.fromEntries(options.map(v => [v.value, v])),
     [options]
diff --git a/packages/frontend/core/src/components/page-list/filter/vars.tsx b/packages/frontend/core/src/components/page-list/filter/vars.tsx
index 71a941ca16..c1f10d018a 100644
--- a/packages/frontend/core/src/components/page-list/filter/vars.tsx
+++ b/packages/frontend/core/src/components/page-list/filter/vars.tsx
@@ -5,7 +5,7 @@ import type {
   PropertiesMeta,
   VariableMap,
 } from '@affine/env/filter';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import dayjs from 'dayjs';
 import type { ReactNode } from 'react';
 
@@ -81,7 +81,7 @@ export const VariableSelect = ({
   onSelect: (value: Filter) => void;
   propertiesMeta: PropertiesMeta;
 }) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   return (
     <div data-testid="variable-select">
       <div className={styles.variableSelectTitleStyle}>
diff --git a/packages/frontend/core/src/components/page-list/group-definitions.tsx b/packages/frontend/core/src/components/page-list/group-definitions.tsx
index 66f05451f0..5bd9d3b822 100644
--- a/packages/frontend/core/src/components/page-list/group-definitions.tsx
+++ b/packages/frontend/core/src/components/page-list/group-definitions.tsx
@@ -1,7 +1,7 @@
 import { FavoriteItemsAdapter } from '@affine/core/modules/properties';
 import type { Tag } from '@affine/core/modules/tag';
 import { TagService } from '@affine/core/modules/tag';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { FavoritedIcon, FavoriteIcon } from '@blocksuite/icons/rc';
 import type { DocMeta } from '@blocksuite/store';
 import { LiveData, useLiveData, useService } from '@toeverything/infra';
@@ -39,7 +39,7 @@ const GroupLabel = ({
 export const useDateGroupDefinitions = <T extends ListItem>(
   key: DateKey
 ): ItemGroupDefinition<T>[] => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   return useMemo(
     () => [
       {
@@ -139,7 +139,7 @@ export const useTagGroupDefinitions = (): ItemGroupDefinition<ListItem>[] => {
   );
   const tags = useLiveData(sortedTagsLiveData$);
 
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   const untagged = useMemo(
     () => ({
@@ -173,7 +173,7 @@ export const useTagGroupDefinitions = (): ItemGroupDefinition<ListItem>[] => {
 export const useFavoriteGroupDefinitions = <
   T extends ListItem,
 >(): ItemGroupDefinition<T>[] => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const favAdapter = useService(FavoriteItemsAdapter);
   const favourites = useLiveData(favAdapter.favorites$);
   return useMemo(
diff --git a/packages/frontend/core/src/components/page-list/operation-cell.tsx b/packages/frontend/core/src/components/page-list/operation-cell.tsx
index 81c1e813b4..7d8e09cbd0 100644
--- a/packages/frontend/core/src/components/page-list/operation-cell.tsx
+++ b/packages/frontend/core/src/components/page-list/operation-cell.tsx
@@ -14,7 +14,7 @@ import { FavoriteItemsAdapter } from '@affine/core/modules/properties';
 import { WorkbenchService } from '@affine/core/modules/workbench';
 import { mixpanel } from '@affine/core/utils';
 import type { Collection, DeleteCollectionInfo } from '@affine/env/filter';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import {
   DeleteIcon,
   DeletePermanentlyIcon,
@@ -57,7 +57,7 @@ export const PageOperationCell = ({
   page,
   onRemoveFromAllowList,
 }: PageOperationCellProps) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const currentWorkspace = useService(WorkspaceService).workspace;
   const { appSettings } = useAppSettingHelper();
   const { setTrashModal } = useTrashModalHelper(currentWorkspace.docCollection);
@@ -233,7 +233,7 @@ export const TrashOperationCell = ({
   onPermanentlyDeletePage,
   onRestorePage,
 }: TrashOperationCellProps) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const { openConfirmModal } = useConfirmModal();
 
   const onConfirmPermanentlyDelete = useCallback(() => {
@@ -292,7 +292,7 @@ export const CollectionOperationCell = ({
   service,
   info,
 }: CollectionOperationCellProps) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   const favAdapter = useService(FavoriteItemsAdapter);
   const { createPage } = usePageHelper(config.docCollection);
@@ -454,7 +454,7 @@ export const TagOperationCell = ({
   tag,
   onTagDelete,
 }: TagOperationCellProps) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const [open, setOpen] = useState(false);
 
   const handleDelete = useCallback(() => {
diff --git a/packages/frontend/core/src/components/page-list/operation-menu-items/disable-public-sharing.tsx b/packages/frontend/core/src/components/page-list/operation-menu-items/disable-public-sharing.tsx
index 99bd29f7df..dc1c1808e0 100644
--- a/packages/frontend/core/src/components/page-list/operation-menu-items/disable-public-sharing.tsx
+++ b/packages/frontend/core/src/components/page-list/operation-menu-items/disable-public-sharing.tsx
@@ -1,11 +1,11 @@
 import type { MenuItemProps } from '@affine/component';
 import { MenuIcon, MenuItem } from '@affine/component';
 import { PublicLinkDisableModal } from '@affine/component/disable-public-link';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { ShareIcon } from '@blocksuite/icons/rc';
 
 export const DisablePublicSharing = (props: MenuItemProps) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   return (
     <MenuItem
       type="danger"
diff --git a/packages/frontend/core/src/components/page-list/operation-menu-items/export.tsx b/packages/frontend/core/src/components/page-list/operation-menu-items/export.tsx
index 16bedc5aef..50db842c97 100644
--- a/packages/frontend/core/src/components/page-list/operation-menu-items/export.tsx
+++ b/packages/frontend/core/src/components/page-list/operation-menu-items/export.tsx
@@ -1,5 +1,5 @@
 import { MenuIcon, MenuItem, MenuSub } from '@affine/component';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import {
   ExportIcon,
   ExportToHtmlIcon,
@@ -51,7 +51,7 @@ export const ExportMenuItems = ({
   className = transitionStyle,
   pageMode = 'page',
 }: ExportProps) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const itemMap = useMemo(
     () => [
       {
@@ -107,7 +107,7 @@ export const ExportMenuItems = ({
 };
 
 export const Export = ({ exportHandler, className, pageMode }: ExportProps) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const items = (
     <ExportMenuItems
       exportHandler={exportHandler}
diff --git a/packages/frontend/core/src/components/page-list/operation-menu-items/move-to-trash.tsx b/packages/frontend/core/src/components/page-list/operation-menu-items/move-to-trash.tsx
index 39fd27d8e4..a449ba6afa 100644
--- a/packages/frontend/core/src/components/page-list/operation-menu-items/move-to-trash.tsx
+++ b/packages/frontend/core/src/components/page-list/operation-menu-items/move-to-trash.tsx
@@ -1,10 +1,10 @@
 import type { ConfirmModalProps, MenuItemProps } from '@affine/component';
 import { ConfirmModal, MenuIcon, MenuItem } from '@affine/component';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { DeleteIcon } from '@blocksuite/icons/rc';
 
 export const MoveToTrash = (props: MenuItemProps) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   return (
     <MenuItem
@@ -27,7 +27,7 @@ const MoveToTrashConfirm = ({
 }: {
   titles: string[];
 } & ConfirmModalProps) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const multiple = titles.length > 1;
   const title = multiple
     ? t['com.affine.moveToTrash.confirmModal.title.multiple']({
diff --git a/packages/frontend/core/src/components/page-list/page-group.tsx b/packages/frontend/core/src/components/page-list/page-group.tsx
index 1c77e033ce..d525d8ff33 100644
--- a/packages/frontend/core/src/components/page-list/page-group.tsx
+++ b/packages/frontend/core/src/components/page-list/page-group.tsx
@@ -1,6 +1,6 @@
 import { useJournalInfoHelper } from '@affine/core/hooks/use-journal';
 import type { Tag } from '@affine/env/filter';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { assertExists } from '@blocksuite/global/utils';
 import {
   EdgelessIcon,
@@ -82,7 +82,7 @@ export const ItemGroupHeader = <T extends ListItem>({
     selectionState.onSelectedIdsChange?.(newSelectedPageIds);
   }, [setSelectionActive, selectionState, allSelected, items]);
 
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   return label ? (
     <div
@@ -148,7 +148,7 @@ export const ItemGroup = <T extends ListItem>({
       ...items.map(item => item.id),
     ]);
   }, [items, selectionState]);
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   return (
     <Collapsible.Root
       data-testid="page-list-group"
@@ -284,7 +284,7 @@ function tagIdToTagOption(
 const PageTitle = ({ id }: { id: string }) => {
   const doc = useLiveData(useService(DocsService).list.doc$(id));
   const title = useLiveData(doc?.title$);
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   return title || t['Untitled']();
 };
 
diff --git a/packages/frontend/core/src/components/page-list/page-header.tsx b/packages/frontend/core/src/components/page-list/page-header.tsx
index 12438b7c0a..487d54553c 100644
--- a/packages/frontend/core/src/components/page-list/page-header.tsx
+++ b/packages/frontend/core/src/components/page-list/page-header.tsx
@@ -1,6 +1,6 @@
 import type { CheckboxProps } from '@affine/component';
 import { Checkbox } from '@affine/component';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { MultiSelectIcon } from '@blocksuite/icons/rc';
 import clsx from 'clsx';
 import { selectAtom } from 'jotai/utils';
@@ -72,7 +72,7 @@ const ListHeaderCheckbox = () => {
 };
 
 export const ListHeaderTitleCell = () => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   return (
     <div className={styles.headerTitleCell}>
       <ListHeaderCheckbox />
diff --git a/packages/frontend/core/src/components/page-list/tags/create-tag.tsx b/packages/frontend/core/src/components/page-list/tags/create-tag.tsx
index 2ef07f7c99..556626f789 100644
--- a/packages/frontend/core/src/components/page-list/tags/create-tag.tsx
+++ b/packages/frontend/core/src/components/page-list/tags/create-tag.tsx
@@ -1,6 +1,6 @@
 import { Button, Input, Menu, toast } from '@affine/component';
 import { TagService } from '@affine/core/modules/tag';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { useLiveData, useService } from '@toeverything/infra';
 import clsx from 'clsx';
 import { useCallback, useEffect, useMemo, useState } from 'react';
@@ -35,7 +35,7 @@ export const CreateOrEditTag = ({
   const tagList = useService(TagService).tagList;
   const tagOptions = useLiveData(tagList.tagMetas$);
   const tag = useLiveData(tagList.tagByTagId$(tagMeta?.id));
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const [menuOpen, setMenuOpen] = useState(false);
 
   const [tagName, setTagName] = useState(tagMeta?.title || '');
diff --git a/packages/frontend/core/src/components/page-list/tags/tag-list-header.tsx b/packages/frontend/core/src/components/page-list/tags/tag-list-header.tsx
index 02662c8b0a..51cbd816bc 100644
--- a/packages/frontend/core/src/components/page-list/tags/tag-list-header.tsx
+++ b/packages/frontend/core/src/components/page-list/tags/tag-list-header.tsx
@@ -1,10 +1,10 @@
 import { Button } from '@affine/component';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 
 import * as styles from './tag-list-header.css';
 
 export const TagListHeader = ({ onOpen }: { onOpen: () => void }) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   return (
     <div className={styles.tagListHeader}>
       <div className={styles.tagListHeaderTitle}>{t['Tags']()}</div>
diff --git a/packages/frontend/core/src/components/page-list/tags/tag-list-item.tsx b/packages/frontend/core/src/components/page-list/tags/tag-list-item.tsx
index 46763d9f7a..3bb6289c2a 100644
--- a/packages/frontend/core/src/components/page-list/tags/tag-list-item.tsx
+++ b/packages/frontend/core/src/components/page-list/tags/tag-list-item.tsx
@@ -1,7 +1,7 @@
 import { Checkbox } from '@affine/component';
 import { getDNDId } from '@affine/core/hooks/affine/use-global-dnd-helper';
 import { WorkbenchLink } from '@affine/core/modules/workbench';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { useDraggable } from '@dnd-kit/core';
 import type { PropsWithChildren } from 'react';
 import { useCallback, useMemo } from 'react';
@@ -15,7 +15,7 @@ const TagListTitleCell = ({
   title,
   pageCount,
 }: Pick<TagListItemProps, 'title' | 'pageCount'>) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   return (
     <div data-testid="tag-list-item-title" className={styles.titleCell}>
       <div
diff --git a/packages/frontend/core/src/components/page-list/view/collection-list.tsx b/packages/frontend/core/src/components/page-list/view/collection-list.tsx
index f9c34a0dc3..5e72001acf 100644
--- a/packages/frontend/core/src/components/page-list/view/collection-list.tsx
+++ b/packages/frontend/core/src/components/page-list/view/collection-list.tsx
@@ -1,6 +1,6 @@
 import { Button, FlexWrapper, Menu } from '@affine/component';
 import type { Collection, Filter, PropertiesMeta } from '@affine/env/filter';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { FilterIcon } from '@blocksuite/icons/rc';
 
 import { CreateFilterMenu } from '../filter/vars';
@@ -15,7 +15,7 @@ export const CollectionPageListOperationsMenu = ({
   collection: Collection;
   allPageListConfig: AllPageListConfig;
 }) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   return (
     <FlexWrapper alignItems="center">
       <CollectionOperations collection={collection} config={allPageListConfig}>
@@ -41,7 +41,7 @@ export const AllPageListOperationsMenu = ({
   filterList: Filter[];
   onChangeFilterList: (filterList: Filter[]) => void;
 }) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   return (
     <FlexWrapper alignItems="center">
diff --git a/packages/frontend/core/src/components/page-list/view/collection-operations.tsx b/packages/frontend/core/src/components/page-list/view/collection-operations.tsx
index 3af4496079..07ab1d7125 100644
--- a/packages/frontend/core/src/components/page-list/view/collection-operations.tsx
+++ b/packages/frontend/core/src/components/page-list/view/collection-operations.tsx
@@ -5,7 +5,7 @@ import { useDeleteCollectionInfo } from '@affine/core/hooks/affine/use-delete-co
 import { FavoriteItemsAdapter } from '@affine/core/modules/properties';
 import { WorkbenchService } from '@affine/core/modules/workbench';
 import type { Collection } from '@affine/env/filter';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import {
   DeleteIcon,
   EditIcon,
@@ -45,7 +45,7 @@ export const CollectionOperations = ({
   const workbench = useService(WorkbenchService).workbench;
   const { open: openEditCollectionModal, node: editModal } =
     useEditCollection(config);
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const { open: openEditCollectionNameModal, node: editNameModal } =
     useEditCollectionName({
       title: t['com.affine.editCollection.renameCollection'](),
diff --git a/packages/frontend/core/src/components/page-list/view/create-collection.tsx b/packages/frontend/core/src/components/page-list/view/create-collection.tsx
index 7f4e5ae554..1f8f92f3cf 100644
--- a/packages/frontend/core/src/components/page-list/view/create-collection.tsx
+++ b/packages/frontend/core/src/components/page-list/view/create-collection.tsx
@@ -1,5 +1,5 @@
 import { Button, Input, Modal } from '@affine/component';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import type { KeyboardEvent } from 'react';
 import { useCallback, useMemo, useState } from 'react';
 
@@ -23,7 +23,7 @@ export const CreateCollectionModal = ({
   onOpenChange,
   title,
 }: CreateCollectionModalProps) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const onConfirmTitle = useCallback(
     (title: string) => {
       onConfirm(title);
@@ -65,7 +65,7 @@ export const CreateCollection = ({
   onCancel,
   onConfirm,
 }: CreateCollectionProps) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const [value, onChange] = useState(init);
   const isNameEmpty = useMemo(() => value.trim().length === 0, [value]);
   const save = useCallback(() => {
diff --git a/packages/frontend/core/src/components/page-list/view/edit-collection/edit-collection.tsx b/packages/frontend/core/src/components/page-list/view/edit-collection/edit-collection.tsx
index e3577cd926..3597203225 100644
--- a/packages/frontend/core/src/components/page-list/view/edit-collection/edit-collection.tsx
+++ b/packages/frontend/core/src/components/page-list/view/edit-collection/edit-collection.tsx
@@ -5,7 +5,7 @@ import {
   RadioButtonGroup,
 } from '@affine/component';
 import type { Collection } from '@affine/env/filter';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import type { DocCollection, DocMeta } from '@blocksuite/store';
 import type { DialogContentProps } from '@radix-ui/react-dialog';
 import type { ReactNode } from 'react';
@@ -46,7 +46,7 @@ export const EditCollectionModal = ({
   mode,
   allPageListConfig,
 }: EditCollectionModalProps) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const onConfirmOnCollection = useCallback(
     (view: Collection) => {
       onConfirm(view);
@@ -100,7 +100,7 @@ export const EditCollection = ({
   mode: initMode,
   allPageListConfig,
 }: EditCollectionProps) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const [value, onChange] = useState<Collection>(init);
   const [mode, setMode] = useState<'page' | 'rule'>(
     initMode ?? (init.filterList.length === 0 ? 'page' : 'rule')
diff --git a/packages/frontend/core/src/components/page-list/view/edit-collection/pages-mode.tsx b/packages/frontend/core/src/components/page-list/view/edit-collection/pages-mode.tsx
index 7ebf4b7cf5..120887af3f 100644
--- a/packages/frontend/core/src/components/page-list/view/edit-collection/pages-mode.tsx
+++ b/packages/frontend/core/src/components/page-list/view/edit-collection/pages-mode.tsx
@@ -1,7 +1,7 @@
 import { Menu } from '@affine/component';
 import { FavoriteItemsAdapter } from '@affine/core/modules/properties';
 import type { Collection } from '@affine/env/filter';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { FilterIcon } from '@blocksuite/icons/rc';
 import type { DocMeta } from '@blocksuite/store';
 import { useLiveData, useService } from '@toeverything/infra';
@@ -35,7 +35,7 @@ export const PagesMode = ({
   switchMode: ReactNode;
   allPageListConfig: AllPageListConfig;
 }) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const favAdapter = useService(FavoriteItemsAdapter);
   const favorites = useLiveData(favAdapter.favorites$);
   const {
diff --git a/packages/frontend/core/src/components/page-list/view/edit-collection/rules-mode.tsx b/packages/frontend/core/src/components/page-list/view/edit-collection/rules-mode.tsx
index 15ee49bcda..cdf475bd16 100644
--- a/packages/frontend/core/src/components/page-list/view/edit-collection/rules-mode.tsx
+++ b/packages/frontend/core/src/components/page-list/view/edit-collection/rules-mode.tsx
@@ -1,8 +1,7 @@
 import { Tooltip } from '@affine/component';
 import { FavoriteItemsAdapter } from '@affine/core/modules/properties';
 import type { Collection } from '@affine/env/filter';
-import { Trans } from '@affine/i18n';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { Trans, useI18n } from '@affine/i18n';
 import {
   CloseIcon,
   EdgelessIcon,
@@ -40,7 +39,7 @@ export const RulesMode = ({
   switchMode: ReactNode;
   allPageListConfig: AllPageListConfig;
 }) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const [showPreview, setShowPreview] = useState(true);
   const allowListPages: DocMeta[] = [];
   const rulesPages: DocMeta[] = [];
@@ -355,7 +354,7 @@ const RulesEmpty = ({
   noRules: boolean;
   fullHeight: boolean;
 }) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   return (
     <div
       style={{
diff --git a/packages/frontend/core/src/components/page-list/view/edit-collection/select-page.tsx b/packages/frontend/core/src/components/page-list/view/edit-collection/select-page.tsx
index 262482e1e1..08c9feffea 100644
--- a/packages/frontend/core/src/components/page-list/view/edit-collection/select-page.tsx
+++ b/packages/frontend/core/src/components/page-list/view/edit-collection/select-page.tsx
@@ -1,7 +1,6 @@
 import { Button, Menu } from '@affine/component';
 import { FavoriteItemsAdapter } from '@affine/core/modules/properties';
-import { Trans } from '@affine/i18n';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { Trans, useI18n } from '@affine/i18n';
 import { FilterIcon } from '@blocksuite/icons/rc';
 import type { DocMeta } from '@blocksuite/store';
 import { useLiveData, useService } from '@toeverything/infra';
@@ -29,7 +28,7 @@ export const SelectPage = ({
   onConfirm: (pageIds: string[]) => void;
   onCancel: () => void;
 }) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const [value, onChange] = useState(init);
   const confirm = useCallback(() => {
     onConfirm(value);
@@ -169,7 +168,7 @@ export const SelectPage = ({
   );
 };
 export const EmptyList = ({ search }: { search?: string }) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   return (
     <div
       style={{
diff --git a/packages/frontend/core/src/components/page-list/view/save-as-collection-button.tsx b/packages/frontend/core/src/components/page-list/view/save-as-collection-button.tsx
index 962e14e077..9525df05e0 100644
--- a/packages/frontend/core/src/components/page-list/view/save-as-collection-button.tsx
+++ b/packages/frontend/core/src/components/page-list/view/save-as-collection-button.tsx
@@ -1,6 +1,6 @@
 import { Button } from '@affine/component';
 import type { Collection } from '@affine/env/filter';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { SaveIcon } from '@blocksuite/icons/rc';
 import { nanoid } from 'nanoid';
 import { useCallback } from 'react';
@@ -16,7 +16,7 @@ interface SaveAsCollectionButtonProps {
 export const SaveAsCollectionButton = ({
   onConfirm,
 }: SaveAsCollectionButtonProps) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const { open, node } = useEditCollectionName({
     title: t['com.affine.editCollection.saveCollection'](),
     showTips: true,
diff --git a/packages/frontend/core/src/components/page-list/view/use-action.tsx b/packages/frontend/core/src/components/page-list/view/use-action.tsx
index 1a028651f8..a18c172cd7 100644
--- a/packages/frontend/core/src/components/page-list/view/use-action.tsx
+++ b/packages/frontend/core/src/components/page-list/view/use-action.tsx
@@ -1,5 +1,5 @@
 import type { Collection } from '@affine/env/filter';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { DeleteIcon, FilterIcon } from '@blocksuite/icons/rc';
 import type { ReactNode } from 'react';
 import { useMemo } from 'react';
@@ -21,7 +21,7 @@ export const useActions = ({
   openEdit: (open: Collection) => void;
   onDelete: () => void;
 }) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   return useMemo<CollectionBarAction[]>(() => {
     return [
       {
diff --git a/packages/frontend/core/src/components/page-list/virtualized-trash-list.tsx b/packages/frontend/core/src/components/page-list/virtualized-trash-list.tsx
index e6e9538d73..f711f1ef25 100644
--- a/packages/frontend/core/src/components/page-list/virtualized-trash-list.tsx
+++ b/packages/frontend/core/src/components/page-list/virtualized-trash-list.tsx
@@ -1,8 +1,7 @@
 import { toast, useConfirmModal } from '@affine/component';
 import { useBlockSuiteMetaHelper } from '@affine/core/hooks/affine/use-block-suite-meta-helper';
 import { useBlockSuiteDocMeta } from '@affine/core/hooks/use-block-suite-page-meta';
-import { Trans } from '@affine/i18n';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { Trans, useI18n } from '@affine/i18n';
 import type { DocMeta } from '@blocksuite/store';
 import { useService, WorkspaceService } from '@toeverything/infra';
 import { useCallback, useMemo, useRef, useState } from 'react';
@@ -34,7 +33,7 @@ export const VirtualizedTrashList = () => {
   const [selectedPageIds, setSelectedPageIds] = useState<string[]>([]);
 
   const { openConfirmModal } = useConfirmModal();
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const pageHeaderColsDef = usePageHeaderColsDef();
 
   const filteredSelectedPageIds = useMemo(() => {
diff --git a/packages/frontend/core/src/components/pure/file-upload/index.tsx b/packages/frontend/core/src/components/pure/file-upload/index.tsx
index c0b25d8aa0..8f94899e9d 100644
--- a/packages/frontend/core/src/components/pure/file-upload/index.tsx
+++ b/packages/frontend/core/src/components/pure/file-upload/index.tsx
@@ -1,5 +1,5 @@
 import { Button } from '@affine/component/ui/button';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import type { ChangeEvent, PropsWithChildren } from 'react';
 import { useRef } from 'react';
 
@@ -17,7 +17,7 @@ export const Upload = ({
   disabled,
   ...props
 }: PropsWithChildren<UploadProps>) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const input_ref = useRef<HTMLInputElement>(null);
   const _chooseFile = () => {
     if (input_ref.current) {
diff --git a/packages/frontend/core/src/components/pure/help-island/index.tsx b/packages/frontend/core/src/components/pure/help-island/index.tsx
index c95c92c8f0..a0b5502e22 100644
--- a/packages/frontend/core/src/components/pure/help-island/index.tsx
+++ b/packages/frontend/core/src/components/pure/help-island/index.tsx
@@ -1,6 +1,6 @@
 import { Tooltip } from '@affine/component/ui/tooltip';
 import { popupWindow } from '@affine/core/utils';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { CloseIcon, NewIcon } from '@blocksuite/icons/rc';
 import {
   DocsService,
@@ -41,7 +41,7 @@ export const HelpIsland = () => {
   const mode = useLiveData(doc?.mode$);
   const setOpenSettingModalAtom = useSetAtom(openSettingModalAtom);
   const [spread, setShowSpread] = useState(false);
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const openSettingModal = useCallback(
     (tab: SettingProps['activeTab']) => {
       setShowSpread(false);
diff --git a/packages/frontend/core/src/components/pure/trash-page-footer/index.tsx b/packages/frontend/core/src/components/pure/trash-page-footer/index.tsx
index 2ef60a87b8..e2c9235b53 100644
--- a/packages/frontend/core/src/components/pure/trash-page-footer/index.tsx
+++ b/packages/frontend/core/src/components/pure/trash-page-footer/index.tsx
@@ -1,7 +1,7 @@
 import { Button } from '@affine/component/ui/button';
 import { ConfirmModal } from '@affine/component/ui/modal';
 import { Tooltip } from '@affine/component/ui/tooltip';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { DeleteIcon, ResetIcon } from '@blocksuite/icons/rc';
 import { DocService, useService, WorkspaceService } from '@toeverything/infra';
 import { useCallback, useState } from 'react';
@@ -17,7 +17,7 @@ export const TrashPageFooter = () => {
   const workspace = useService(WorkspaceService).workspace;
   const docCollection = workspace.docCollection;
   const doc = useService(DocService).doc;
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const { appSettings } = useAppSettingHelper();
   const { jumpToSubPath } = useNavigateHelper();
   const { restoreFromTrash } = useBlockSuiteMetaHelper(docCollection);
diff --git a/packages/frontend/core/src/components/pure/workspace-mode-filter-tab/index.tsx b/packages/frontend/core/src/components/pure/workspace-mode-filter-tab/index.tsx
index 7d0c3d1f89..40d4448ae8 100644
--- a/packages/frontend/core/src/components/pure/workspace-mode-filter-tab/index.tsx
+++ b/packages/frontend/core/src/components/pure/workspace-mode-filter-tab/index.tsx
@@ -3,7 +3,7 @@ import type { AllPageFilterOption } from '@affine/core/atoms';
 import { allPageFilterSelectAtom } from '@affine/core/atoms';
 import { useNavigateHelper } from '@affine/core/hooks/use-navigate-helper';
 import { WorkspaceSubPath } from '@affine/core/shared';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { useService, WorkspaceService } from '@toeverything/infra';
 import { useAtom } from 'jotai';
 import { useCallback, useEffect, useState } from 'react';
@@ -16,7 +16,7 @@ export const WorkspaceModeFilterTab = ({
   activeFilter: AllPageFilterOption;
 }) => {
   const workspace = useService(WorkspaceService).workspace;
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const [value, setValue] = useState(activeFilter);
   const [filterMode, setFilterMode] = useAtom(allPageFilterSelectAtom);
   const { jumpToCollections, jumpToTags, jumpToSubPath } = useNavigateHelper();
diff --git a/packages/frontend/core/src/components/pure/workspace-slider-bar/collections/collections-list.tsx b/packages/frontend/core/src/components/pure/workspace-slider-bar/collections/collections-list.tsx
index f1bbd5e8ad..61902f8764 100644
--- a/packages/frontend/core/src/components/pure/workspace-slider-bar/collections/collections-list.tsx
+++ b/packages/frontend/core/src/components/pure/workspace-slider-bar/collections/collections-list.tsx
@@ -20,7 +20,7 @@ import {
 import { CollectionService } from '@affine/core/modules/collection';
 import { FavoriteItemsAdapter } from '@affine/core/modules/properties';
 import type { Collection } from '@affine/env/filter';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import {
   MoreHorizontalIcon,
   PlusIcon,
@@ -67,7 +67,7 @@ export const CollectionSidebarNavItem = ({
   const favAdapter = useService(FavoriteItemsAdapter);
   const { createPage } = usePageHelper(docCollection);
   const { openConfirmModal } = useConfirmModal();
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   const favourites = useLiveData(favAdapter.favorites$);
 
@@ -255,7 +255,7 @@ export const CollectionsList = ({
   onCreate,
 }: CollectionsListProps) => {
   const collections = useLiveData(useService(CollectionService).collections$);
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   if (collections.length === 0) {
     return (
diff --git a/packages/frontend/core/src/components/pure/workspace-slider-bar/collections/doc.tsx b/packages/frontend/core/src/components/pure/workspace-slider-bar/collections/doc.tsx
index 9ee9b4ed9a..e96c7b785b 100644
--- a/packages/frontend/core/src/components/pure/workspace-slider-bar/collections/doc.tsx
+++ b/packages/frontend/core/src/components/pure/workspace-slider-bar/collections/doc.tsx
@@ -3,7 +3,7 @@ import {
   WorkbenchLink,
   WorkbenchService,
 } from '@affine/core/modules/workbench';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { EdgelessIcon, PageIcon } from '@blocksuite/icons/rc';
 import type { DocCollection, DocMeta } from '@blocksuite/store';
 import { useDraggable } from '@dnd-kit/core';
@@ -40,7 +40,7 @@ export const Doc = ({
   const workbench = useService(WorkbenchService).workbench;
   const location = useLiveData(workbench.location$);
 
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   const docId = doc.id;
   const active = location.pathname === '/' + docId;
diff --git a/packages/frontend/core/src/components/pure/workspace-slider-bar/components/operation-item.tsx b/packages/frontend/core/src/components/pure/workspace-slider-bar/components/operation-item.tsx
index 6ed3d98a19..ec4c22c7dd 100644
--- a/packages/frontend/core/src/components/pure/workspace-slider-bar/components/operation-item.tsx
+++ b/packages/frontend/core/src/components/pure/workspace-slider-bar/components/operation-item.tsx
@@ -1,7 +1,7 @@
 import type { MenuItemProps } from '@affine/component';
 import { MenuIcon, MenuItem, MenuSeparator } from '@affine/component';
 import { useAppSettingHelper } from '@affine/core/hooks/affine/use-app-setting-helper';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import {
   DeleteIcon,
   EditIcon,
@@ -38,7 +38,7 @@ export const OperationItems = ({
   onOpenInSplitView,
 }: OperationItemsProps) => {
   const { appSettings } = useAppSettingHelper();
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const actions = useMemo<
     Array<
       | {
diff --git a/packages/frontend/core/src/components/pure/workspace-slider-bar/components/operation-menu-button.tsx b/packages/frontend/core/src/components/pure/workspace-slider-bar/components/operation-menu-button.tsx
index ba5ce6d795..07cb3378dd 100644
--- a/packages/frontend/core/src/components/pure/workspace-slider-bar/components/operation-menu-button.tsx
+++ b/packages/frontend/core/src/components/pure/workspace-slider-bar/components/operation-menu-button.tsx
@@ -3,7 +3,7 @@ import { IconButton } from '@affine/component/ui/button';
 import { Menu } from '@affine/component/ui/menu';
 import { FavoriteItemsAdapter } from '@affine/core/modules/properties';
 import { WorkbenchService } from '@affine/core/modules/workbench';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { MoreHorizontalIcon } from '@blocksuite/icons/rc';
 import type { DocCollection } from '@blocksuite/store';
 import { useService } from '@toeverything/infra';
@@ -35,7 +35,7 @@ export const OperationMenuButton = ({ ...props }: OperationMenuButtonProps) => {
     inFavorites,
     isReferencePage,
   } = props;
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const { createLinkedPage } = usePageHelper(docCollection);
   const { setTrashModal } = useTrashModalHelper(docCollection);
 
diff --git a/packages/frontend/core/src/components/pure/workspace-slider-bar/components/postfix-item.tsx b/packages/frontend/core/src/components/pure/workspace-slider-bar/components/postfix-item.tsx
index 8d929af7ad..d435542b84 100644
--- a/packages/frontend/core/src/components/pure/workspace-slider-bar/components/postfix-item.tsx
+++ b/packages/frontend/core/src/components/pure/workspace-slider-bar/components/postfix-item.tsx
@@ -1,7 +1,7 @@
 import { toast } from '@affine/component';
 import { RenameModal } from '@affine/component/rename-modal';
 import { useDocMetaHelper } from '@affine/core/hooks/use-block-suite-page-meta';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import type { DocCollection } from '@blocksuite/store';
 import { useCallback, useState } from 'react';
 
@@ -21,7 +21,7 @@ type PostfixItemProps = {
 
 export const PostfixItem = ({ ...props }: PostfixItemProps) => {
   const { docCollection, pageId, pageTitle } = props;
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const [open, setOpen] = useState(false);
   const { setDocTitle } = useDocMetaHelper(docCollection);
 
diff --git a/packages/frontend/core/src/components/pure/workspace-slider-bar/components/reference-page.tsx b/packages/frontend/core/src/components/pure/workspace-slider-bar/components/reference-page.tsx
index c54de034b1..c0b93037a0 100644
--- a/packages/frontend/core/src/components/pure/workspace-slider-bar/components/reference-page.tsx
+++ b/packages/frontend/core/src/components/pure/workspace-slider-bar/components/reference-page.tsx
@@ -3,7 +3,7 @@ import {
   WorkbenchLink,
   WorkbenchService,
 } from '@affine/core/modules/workbench';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { EdgelessIcon, PageIcon } from '@blocksuite/icons/rc';
 import type { DocCollection, DocMeta } from '@blocksuite/store';
 import * as Collapsible from '@radix-ui/react-collapsible';
@@ -26,7 +26,7 @@ export const ReferencePage = ({
   metaMapping,
   parentIds,
 }: ReferencePageProps) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const workbench = useService(WorkbenchService).workbench;
   const location = useLiveData(workbench.location$);
   const active = location.pathname === '/' + pageId;
diff --git a/packages/frontend/core/src/components/pure/workspace-slider-bar/favorite/empty-item.tsx b/packages/frontend/core/src/components/pure/workspace-slider-bar/favorite/empty-item.tsx
index 925856d640..64b08488ac 100644
--- a/packages/frontend/core/src/components/pure/workspace-slider-bar/favorite/empty-item.tsx
+++ b/packages/frontend/core/src/components/pure/workspace-slider-bar/favorite/empty-item.tsx
@@ -1,9 +1,9 @@
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { FavoriteIcon } from '@blocksuite/icons/rc';
 
 import * as styles from './styles.css';
 export const EmptyItem = () => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   return (
     <div className={styles.emptyFavouritesContent}>
       <div className={styles.emptyFavouritesIconWrapper}>
diff --git a/packages/frontend/core/src/components/pure/workspace-slider-bar/favorite/favorite-list.tsx b/packages/frontend/core/src/components/pure/workspace-slider-bar/favorite/favorite-list.tsx
index 59d0e2af67..1e69ed469b 100644
--- a/packages/frontend/core/src/components/pure/workspace-slider-bar/favorite/favorite-list.tsx
+++ b/packages/frontend/core/src/components/pure/workspace-slider-bar/favorite/favorite-list.tsx
@@ -7,7 +7,7 @@ import { useBlockSuiteDocMeta } from '@affine/core/hooks/use-block-suite-page-me
 import { CollectionService } from '@affine/core/modules/collection';
 import { FavoriteItemsAdapter } from '@affine/core/modules/properties';
 import type { WorkspaceFavoriteItem } from '@affine/core/modules/properties/services/schema';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import type { DocMeta } from '@blocksuite/store';
 import { useDndContext, useDroppable } from '@dnd-kit/core';
 import {
@@ -97,7 +97,7 @@ const FavoriteListInner = ({ docCollection: workspace }: FavoriteListProps) => {
     [collections, docMetaMapping, workspace]
   );
 
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   return (
     <div
diff --git a/packages/frontend/core/src/components/pure/workspace-slider-bar/favorite/favourite-nav-item.tsx b/packages/frontend/core/src/components/pure/workspace-slider-bar/favorite/favourite-nav-item.tsx
index 254e827419..6368093c48 100644
--- a/packages/frontend/core/src/components/pure/workspace-slider-bar/favorite/favourite-nav-item.tsx
+++ b/packages/frontend/core/src/components/pure/workspace-slider-bar/favorite/favourite-nav-item.tsx
@@ -7,7 +7,7 @@ import {
   WorkbenchLink,
   WorkbenchService,
 } from '@affine/core/modules/workbench';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { EdgelessIcon, PageIcon } from '@blocksuite/icons/rc';
 import { type AnimateLayoutChanges, useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
@@ -35,7 +35,7 @@ export const FavouriteDocSidebarNavItem = ({
 }: ReferencePageProps & {
   sortable?: boolean;
 }) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const workbench = useService(WorkbenchService).workbench;
   const location = useLiveData(workbench.location$);
   const linkActive = location.pathname === '/' + pageId;
diff --git a/packages/frontend/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/add-workspace/index.tsx b/packages/frontend/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/add-workspace/index.tsx
index e0c077f76f..ebfcb5aad8 100644
--- a/packages/frontend/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/add-workspace/index.tsx
+++ b/packages/frontend/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/add-workspace/index.tsx
@@ -1,5 +1,5 @@
 import { MenuItem } from '@affine/component/ui/menu';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { ImportIcon, PlusIcon } from '@blocksuite/icons/rc';
 
 import * as styles from './index.css';
@@ -11,7 +11,7 @@ export const AddWorkspace = ({
   onAddWorkspace?: () => void;
   onNewWorkspace?: () => void;
 }) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   return (
     <div>
diff --git a/packages/frontend/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/index.tsx b/packages/frontend/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/index.tsx
index c77c1db150..78f1899ed9 100644
--- a/packages/frontend/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/index.tsx
+++ b/packages/frontend/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/index.tsx
@@ -2,7 +2,7 @@ import { Loading } from '@affine/component';
 import { Divider } from '@affine/component/ui/divider';
 import { MenuItem } from '@affine/component/ui/menu';
 import { AuthService } from '@affine/core/modules/cloud';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { Logo1Icon } from '@blocksuite/icons/rc';
 import {
   useLiveData,
@@ -28,7 +28,7 @@ export const SignInItem = () => {
 
   const setOpen = useSetAtom(authAtom);
 
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   const onClickSignIn = useCallback(() => {
     mixpanel.track('Button', {
diff --git a/packages/frontend/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/workspace-list/index.tsx b/packages/frontend/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/workspace-list/index.tsx
index 14e5a0fc61..6b59f24bbf 100644
--- a/packages/frontend/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/workspace-list/index.tsx
+++ b/packages/frontend/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/workspace-list/index.tsx
@@ -8,7 +8,7 @@ import {
 } from '@affine/core/hooks/use-workspace-info';
 import { AuthService } from '@affine/core/modules/cloud';
 import { WorkspaceFlavour } from '@affine/env/workspace';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { CloudWorkspaceIcon, LocalWorkspaceIcon } from '@blocksuite/icons/rc';
 import type { WorkspaceMetadata } from '@toeverything/infra';
 import {
@@ -53,7 +53,7 @@ const CloudWorkSpaceList = ({
   onClickWorkspaceSetting,
   currentWorkspaceId,
 }: WorkspaceModalProps) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   if (workspaces.length === 0) {
     return null;
   }
@@ -89,7 +89,7 @@ const LocalWorkspaces = ({
   openingId,
   currentWorkspaceId,
 }: WorkspaceModalProps) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   if (workspaces.length === 0) {
     return null;
   }
diff --git a/packages/frontend/core/src/components/pure/workspace-slider-bar/workspace-card/index.tsx b/packages/frontend/core/src/components/pure/workspace-slider-bar/workspace-card/index.tsx
index 7cc745e3d1..14c6f2ec6a 100644
--- a/packages/frontend/core/src/components/pure/workspace-slider-bar/workspace-card/index.tsx
+++ b/packages/frontend/core/src/components/pure/workspace-slider-bar/workspace-card/index.tsx
@@ -8,7 +8,7 @@ import { useWorkspaceInfo } from '@affine/core/hooks/use-workspace-info';
 import { WorkspacePermissionService } from '@affine/core/modules/permissions';
 import { UNTITLED_WORKSPACE_NAME } from '@affine/env/constant';
 import { WorkspaceFlavour } from '@affine/env/workspace';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import {
   CloudWorkspaceIcon,
   InformationFillDuotoneIcon,
@@ -78,7 +78,7 @@ const OfflineStatus = () => {
 };
 
 const useSyncEngineSyncProgress = () => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const isOnline = useSystemOnline();
   const { syncing, progress, retrying, errorMessage } = useDocEngineStatus();
   const [isOverCapacity, setIsOverCapacity] = useState(false);
diff --git a/packages/frontend/core/src/components/root-app-sidebar/import-page.tsx b/packages/frontend/core/src/components/root-app-sidebar/import-page.tsx
index 893c83fa53..2cde5a5ffc 100644
--- a/packages/frontend/core/src/components/root-app-sidebar/import-page.tsx
+++ b/packages/frontend/core/src/components/root-app-sidebar/import-page.tsx
@@ -1,6 +1,6 @@
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
 import { mixpanel } from '@affine/core/utils';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { ImportIcon } from '@blocksuite/icons/rc';
 
 import type { DocCollection } from '../../shared';
@@ -8,7 +8,7 @@ import { MenuItem } from '../app-sidebar';
 import { usePageHelper } from '../blocksuite/block-suite-page-list/utils';
 
 const ImportPage = ({ docCollection }: { docCollection: DocCollection }) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const { importFile } = usePageHelper(docCollection);
 
   const onImportFile = useAsyncCallback(async () => {
diff --git a/packages/frontend/core/src/components/root-app-sidebar/index.tsx b/packages/frontend/core/src/components/root-app-sidebar/index.tsx
index a11214f009..6d13b827e1 100644
--- a/packages/frontend/core/src/components/root-app-sidebar/index.tsx
+++ b/packages/frontend/core/src/components/root-app-sidebar/index.tsx
@@ -4,7 +4,7 @@ import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
 import { CollectionService } from '@affine/core/modules/collection';
 import { mixpanel } from '@affine/core/utils';
 import { apis, events } from '@affine/electron-api';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { FolderIcon, SettingsIcon } from '@blocksuite/icons/rc';
 import type { Doc } from '@blocksuite/store';
 import { useDroppable } from '@dnd-kit/core';
@@ -96,7 +96,7 @@ export const RootAppSidebar = memo(
     const currentWorkspaceId = currentWorkspace.id;
     const { appSettings } = useAppSettingHelper();
     const docCollection = currentWorkspace.docCollection;
-    const t = useAFFiNEI18N();
+    const t = useI18n();
     const currentPath = useLiveData(
       useService(WorkbenchService).workbench.location$.map(
         location => location.pathname
diff --git a/packages/frontend/core/src/components/root-app-sidebar/journal-button.tsx b/packages/frontend/core/src/components/root-app-sidebar/journal-button.tsx
index eeb01df82e..3fcd3c7f01 100644
--- a/packages/frontend/core/src/components/root-app-sidebar/journal-button.tsx
+++ b/packages/frontend/core/src/components/root-app-sidebar/journal-button.tsx
@@ -4,7 +4,7 @@ import {
 } from '@affine/core/hooks/use-journal';
 import { WorkbenchService } from '@affine/core/modules/workbench';
 import type { DocCollection } from '@affine/core/shared';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { TodayIcon, TomorrowIcon, YesterdayIcon } from '@blocksuite/icons/rc';
 import { useLiveData, useService } from '@toeverything/infra';
 
@@ -17,7 +17,7 @@ interface AppSidebarJournalButtonProps {
 export const AppSidebarJournalButton = ({
   docCollection,
 }: AppSidebarJournalButtonProps) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const workbench = useService(WorkbenchService).workbench;
   const location = useLiveData(workbench.location$);
   const { openToday } = useJournalRouteHelper(docCollection);
diff --git a/packages/frontend/core/src/components/root-app-sidebar/user-info.tsx b/packages/frontend/core/src/components/root-app-sidebar/user-info.tsx
index d6fd5efaa1..cb569416f3 100644
--- a/packages/frontend/core/src/components/root-app-sidebar/user-info.tsx
+++ b/packages/frontend/core/src/components/root-app-sidebar/user-info.tsx
@@ -15,7 +15,7 @@ import {
   openSignOutModalAtom,
 } from '@affine/core/atoms';
 import { mixpanel } from '@affine/core/utils';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { AccountIcon, SignOutIcon } from '@blocksuite/icons/rc';
 import { useLiveData, useService } from '@toeverything/infra';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
@@ -97,7 +97,7 @@ const AccountMenu = () => {
     setOpenSignOutModalAtom(true);
   }, [setOpenSignOutModalAtom]);
 
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   return (
     <>
diff --git a/packages/frontend/core/src/components/top-tip.tsx b/packages/frontend/core/src/components/top-tip.tsx
index 4f4f20fd79..d77be25c9b 100644
--- a/packages/frontend/core/src/components/top-tip.tsx
+++ b/packages/frontend/core/src/components/top-tip.tsx
@@ -1,7 +1,6 @@
 import { BrowserWarning, LocalDemoTips } from '@affine/component/affine-banner';
 import { WorkspaceFlavour } from '@affine/env/workspace';
-import { Trans } from '@affine/i18n';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { Trans, useI18n } from '@affine/i18n';
 import { useLiveData, useService, type Workspace } from '@toeverything/infra';
 import { useSetAtom } from 'jotai';
 import { useCallback, useState } from 'react';
@@ -30,7 +29,7 @@ const shouldShowWarning = (() => {
 })();
 
 const OSWarningMessage = () => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const notChrome = environment.isBrowser && !environment.isChrome;
   const notGoodVersion =
     environment.isBrowser &&
diff --git a/packages/frontend/core/src/components/workspace-upgrade/upgrade.tsx b/packages/frontend/core/src/components/workspace-upgrade/upgrade.tsx
index 2bac01997c..73dc15d13f 100644
--- a/packages/frontend/core/src/components/workspace-upgrade/upgrade.tsx
+++ b/packages/frontend/core/src/components/workspace-upgrade/upgrade.tsx
@@ -3,7 +3,7 @@ import { AffineShapeIcon } from '@affine/core/components/page-list'; // TODO: im
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
 import { useNavigateHelper } from '@affine/core/hooks/use-navigate-helper';
 import { WorkspaceSubPath } from '@affine/core/shared';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { useLiveData, useService, WorkspaceService } from '@toeverything/infra';
 import { useState } from 'react';
 
@@ -18,7 +18,7 @@ export const WorkspaceUpgrade = function WorkspaceUpgrade() {
   const [error, setError] = useState<string | null>(null);
   const currentWorkspace = useService(WorkspaceService).workspace;
   const upgrading = useLiveData(currentWorkspace.upgrade.upgrading$);
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const { openPage } = useNavigateHelper();
 
   const onButtonClick = useAsyncCallback(async () => {
diff --git a/packages/frontend/core/src/hooks/affine/use-all-page-list-config.tsx b/packages/frontend/core/src/hooks/affine/use-all-page-list-config.tsx
index 2dfb24a2e9..3b64bf6458 100644
--- a/packages/frontend/core/src/hooks/affine/use-all-page-list-config.tsx
+++ b/packages/frontend/core/src/hooks/affine/use-all-page-list-config.tsx
@@ -5,7 +5,7 @@ import { useBlockSuiteDocMeta } from '@affine/core/hooks/use-block-suite-page-me
 import { FavoriteItemsAdapter } from '@affine/core/modules/properties';
 import { ShareDocsService } from '@affine/core/modules/share-doc';
 import { PublicPageMode } from '@affine/graphql';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import type { DocMeta } from '@blocksuite/store';
 import { useLiveData, useService, WorkspaceService } from '@toeverything/infra';
 import { useCallback, useEffect, useMemo } from 'react';
@@ -30,7 +30,7 @@ export const useAllPageListConfig = () => {
     [pageMetas]
   );
   const favAdapter = useService(FavoriteItemsAdapter);
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const favoriteItems = useLiveData(favAdapter.favorites$);
 
   const isActive = useCallback(
diff --git a/packages/frontend/core/src/hooks/affine/use-enable-cloud.tsx b/packages/frontend/core/src/hooks/affine/use-enable-cloud.tsx
index 76b143a5ca..e2ada0e5fe 100644
--- a/packages/frontend/core/src/hooks/affine/use-enable-cloud.tsx
+++ b/packages/frontend/core/src/hooks/affine/use-enable-cloud.tsx
@@ -2,7 +2,7 @@ import { notify, useConfirmModal } from '@affine/component';
 import { authAtom } from '@affine/core/atoms';
 import { AuthService } from '@affine/core/modules/cloud';
 import { WorkspaceSubPath } from '@affine/core/shared';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import type { Workspace } from '@toeverything/infra';
 import {
   useLiveData,
@@ -28,7 +28,7 @@ interface ConfirmEnableCloudOptions {
 type ConfirmEnableArgs = [Workspace, ConfirmEnableCloudOptions | undefined];
 
 export const useEnableCloud = () => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const loginStatus = useLiveData(useService(AuthService).session.status$);
   const setAuthAtom = useSetAtom(authAtom);
   const { openConfirmModal, closeConfirmModal } = useConfirmModal();
diff --git a/packages/frontend/core/src/hooks/affine/use-export-page.ts b/packages/frontend/core/src/hooks/affine/use-export-page.ts
index 330f6bfab5..7ccf21634f 100644
--- a/packages/frontend/core/src/hooks/affine/use-export-page.ts
+++ b/packages/frontend/core/src/hooks/affine/use-export-page.ts
@@ -5,7 +5,7 @@ import {
 } from '@affine/component/global-loading';
 import { mixpanel } from '@affine/core/utils';
 import { apis } from '@affine/electron-api';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import type { PageRootService, RootBlockModel } from '@blocksuite/blocks';
 import { HtmlTransformer, MarkdownTransformer } from '@blocksuite/blocks';
 import type { Doc } from '@blocksuite/store';
@@ -59,7 +59,7 @@ async function exportHandler({ page, type }: ExportHandlerOptions) {
 export const useExportPage = (page: Doc) => {
   const pushGlobalLoadingEvent = useSetAtom(pushGlobalLoadingEventAtom);
   const resolveGlobalLoadingEvent = useSetAtom(resolveGlobalLoadingEventAtom);
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   const onClickHandler = useCallback(
     async (type: ExportType) => {
diff --git a/packages/frontend/core/src/hooks/affine/use-global-dnd-helper.ts b/packages/frontend/core/src/hooks/affine/use-global-dnd-helper.ts
index b30506362a..65c14329f3 100644
--- a/packages/frontend/core/src/hooks/affine/use-global-dnd-helper.ts
+++ b/packages/frontend/core/src/hooks/affine/use-global-dnd-helper.ts
@@ -2,7 +2,7 @@ import { toast } from '@affine/component';
 import { useDocMetaHelper } from '@affine/core/hooks/use-block-suite-page-meta';
 import { CollectionService } from '@affine/core/modules/collection';
 import { FavoriteItemsAdapter } from '@affine/core/modules/properties';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import type {
   Active,
   DragEndEvent,
@@ -152,7 +152,7 @@ export function resolveDragEndIntent(
 export type GlobalDragEndIntent = ReturnType<typeof resolveDragEndIntent>;
 
 export const useGlobalDNDHelper = () => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const currentWorkspace = useService(WorkspaceService).workspace;
   const favAdapter = useService(FavoriteItemsAdapter);
   const workspace = currentWorkspace.docCollection;
diff --git a/packages/frontend/core/src/hooks/affine/use-is-shared-page.tsx b/packages/frontend/core/src/hooks/affine/use-is-shared-page.tsx
index 104d8a8405..b1c0664531 100644
--- a/packages/frontend/core/src/hooks/affine/use-is-shared-page.tsx
+++ b/packages/frontend/core/src/hooks/affine/use-is-shared-page.tsx
@@ -6,7 +6,7 @@ import {
   publishPageMutation,
   revokePublicPageMutation,
 } from '@affine/graphql';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { type I18nKeys, useI18n } from '@affine/i18n';
 import { SingleSelectSelectSolidIcon } from '@blocksuite/icons/rc';
 import type { DocMode, Workspace } from '@toeverything/infra';
 import { cssVar } from '@toeverything/theme';
@@ -15,12 +15,6 @@ import { useCallback, useMemo } from 'react';
 import { useMutation } from '../use-mutation';
 import { useQuery } from '../use-query';
 
-type NoParametersKeys<T> = {
-  [K in keyof T]: T[K] extends () => any ? K : never;
-}[keyof T];
-
-type i18nKey = NoParametersKeys<ReturnType<typeof useAFFiNEI18N>>;
-
 type NotificationKey =
   | 'enableSuccessTitle'
   | 'enableSuccessMessage'
@@ -34,7 +28,7 @@ type NotificationKey =
   | 'disableErrorTitle'
   | 'disableErrorMessage';
 
-const notificationToI18nKey: Record<NotificationKey, i18nKey> = {
+const notificationToI18nKey = {
   enableSuccessTitle:
     'com.affine.share-menu.create-public-link.notification.success.title',
   enableSuccessMessage:
@@ -57,7 +51,7 @@ const notificationToI18nKey: Record<NotificationKey, i18nKey> = {
     'com.affine.share-menu.disable-publish-link.notification.fail.title',
   disableErrorMessage:
     'com.affine.share-menu.disable-publish-link.notification.fail.message',
-};
+} satisfies Record<NotificationKey, I18nKeys>;
 
 export function useIsSharedPage(
   workspaceId: string,
@@ -69,7 +63,7 @@ export function useIsSharedPage(
   currentShareMode: DocMode;
   enableShare: (mode: DocMode) => void;
 } {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const { data, mutate } = useQuery({
     query: getWorkspacePublicPagesQuery,
     variables: {
diff --git a/packages/frontend/core/src/hooks/affine/use-language-helper.ts b/packages/frontend/core/src/hooks/affine/use-language-helper.ts
index 4b51da1a6c..ca20b35f6a 100644
--- a/packages/frontend/core/src/hooks/affine/use-language-helper.ts
+++ b/packages/frontend/core/src/hooks/affine/use-language-helper.ts
@@ -1,9 +1,9 @@
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
-import { LOCALES, useI18N } from '@affine/i18n';
+import { LOCALES, useI18n } from '@affine/i18n';
 import { useEffect, useMemo } from 'react';
 
 export function useLanguageHelper() {
-  const i18n = useI18N();
+  const i18n = useI18n();
   const currentLanguage = useMemo(
     () => LOCALES.find(item => item.tag === i18n.language),
     [i18n.language]
diff --git a/packages/frontend/core/src/hooks/affine/use-register-blocksuite-editor-commands.tsx b/packages/frontend/core/src/hooks/affine/use-register-blocksuite-editor-commands.tsx
index b7fb6269c5..9c8e379155 100644
--- a/packages/frontend/core/src/hooks/affine/use-register-blocksuite-editor-commands.tsx
+++ b/packages/frontend/core/src/hooks/affine/use-register-blocksuite-editor-commands.tsx
@@ -7,7 +7,7 @@ import { useDocMetaHelper } from '@affine/core/hooks/use-block-suite-page-meta';
 import { FavoriteItemsAdapter } from '@affine/core/modules/properties';
 import { mixpanel } from '@affine/core/utils';
 import { WorkspaceFlavour } from '@affine/env/workspace';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { assertExists } from '@blocksuite/global/utils';
 import { EdgelessIcon, HistoryIcon, PageIcon } from '@blocksuite/icons/rc';
 import {
@@ -28,7 +28,7 @@ export function useRegisterBlocksuiteEditorCommands() {
   const doc = useService(DocService).doc;
   const docId = doc.id;
   const mode = useLiveData(doc.mode$);
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const workspace = useService(WorkspaceService).workspace;
   const docCollection = workspace.docCollection;
   const { getDocMeta } = useDocMetaHelper(docCollection);
diff --git a/packages/frontend/core/src/hooks/affine/use-share-url.ts b/packages/frontend/core/src/hooks/affine/use-share-url.ts
index 0cf6d33382..f0e8b2d1eb 100644
--- a/packages/frontend/core/src/hooks/affine/use-share-url.ts
+++ b/packages/frontend/core/src/hooks/affine/use-share-url.ts
@@ -2,7 +2,7 @@ import { notify } from '@affine/component';
 import { getAffineCloudBaseUrl } from '@affine/core/modules/cloud/services/fetch';
 import { WorkbenchService } from '@affine/core/modules/workbench';
 import { mixpanel } from '@affine/core/utils';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { useLiveData, useService } from '@toeverything/infra';
 import { useCallback, useMemo } from 'react';
 
@@ -47,7 +47,7 @@ export const useSharingUrl = ({
   pageId,
   urlType,
 }: UseSharingUrl) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const sharingUrl = useGenerateUrl({ workspaceId, pageId, urlType });
 
   const onClickCopyLink = useCallback(() => {
diff --git a/packages/frontend/core/src/hooks/affine/use-shortcuts.ts b/packages/frontend/core/src/hooks/affine/use-shortcuts.ts
index 0ed473d3b6..97937091f5 100644
--- a/packages/frontend/core/src/hooks/affine/use-shortcuts.ts
+++ b/packages/frontend/core/src/hooks/affine/use-shortcuts.ts
@@ -1,4 +1,4 @@
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { useCallback, useMemo } from 'react';
 
 type KeyboardShortcutsI18NKeys =
@@ -45,9 +45,9 @@ type KeyboardShortcutsI18NKeys =
   | 'divider'
   | 'copy-private-link';
 
-// TODO(550): remove this hook after 'useAFFiNEI18N' support scoped i18n
+// TODO(550): remove this hook after 'useI18n' support scoped i18n
 const useKeyboardShortcutsI18N = () => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   return useCallback(
     (key: KeyboardShortcutsI18NKeys) =>
       t[`com.affine.keyboardShortcuts.${key}`](),
@@ -55,9 +55,9 @@ const useKeyboardShortcutsI18N = () => {
   );
 };
 
-// TODO(550): remove this hook after 'useAFFiNEI18N' support scoped i18n
+// TODO(550): remove this hook after 'useI18n' support scoped i18n
 const useHeadingKeyboardShortcutsI18N = () => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   return useCallback(
     (number: string) => t['com.affine.keyboardShortcuts.heading']({ number }),
     [t]
@@ -280,7 +280,7 @@ export const useWinMarkdownShortcuts = (): ShortcutMap => {
 };
 
 export const useMarkdownShortcuts = (): ShortcutsInfo => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   const macMarkdownShortcuts = useMacMarkdownShortcuts();
   const winMarkdownShortcuts = useWinMarkdownShortcuts();
@@ -292,7 +292,7 @@ export const useMarkdownShortcuts = (): ShortcutsInfo => {
 };
 
 export const usePageShortcuts = (): ShortcutsInfo => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   const macPageShortcuts = useMacPageKeyboardShortcuts();
   const winPageShortcuts = useWinPageKeyboardShortcuts();
@@ -304,7 +304,7 @@ export const usePageShortcuts = (): ShortcutsInfo => {
 };
 
 export const useEdgelessShortcuts = (): ShortcutsInfo => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   const macEdgelessShortcuts = useMacEdgelessKeyboardShortcuts();
   const winEdgelessShortcuts = useWinEdgelessKeyboardShortcuts();
@@ -316,7 +316,7 @@ export const useEdgelessShortcuts = (): ShortcutsInfo => {
 };
 
 export const useGeneralShortcuts = (): ShortcutsInfo => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   const macGeneralShortcuts = useMacGeneralKeyboardShortcuts();
   const winGeneralShortcuts = useWinGeneralKeyboardShortcuts();
diff --git a/packages/frontend/core/src/hooks/affine/use-trash-modal-helper.ts b/packages/frontend/core/src/hooks/affine/use-trash-modal-helper.ts
index ebf530ae0f..f300294c26 100644
--- a/packages/frontend/core/src/hooks/affine/use-trash-modal-helper.ts
+++ b/packages/frontend/core/src/hooks/affine/use-trash-modal-helper.ts
@@ -1,5 +1,5 @@
 import { toast } from '@affine/component';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import type { DocCollection } from '@blocksuite/store';
 import { useAtom } from 'jotai';
 import { useCallback } from 'react';
@@ -8,7 +8,7 @@ import { trashModalAtom } from '../../atoms/trash-modal';
 import { useBlockSuiteMetaHelper } from './use-block-suite-meta-helper';
 
 export function useTrashModalHelper(docCollection: DocCollection) {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const [trashModal, setTrashModal] = useAtom(trashModalAtom);
   const { pageIds } = trashModal;
   const { removeToTrash } = useBlockSuiteMetaHelper(docCollection);
diff --git a/packages/frontend/core/src/hooks/use-register-workspace-commands.ts b/packages/frontend/core/src/hooks/use-register-workspace-commands.ts
index f6787534a5..87fa031e98 100644
--- a/packages/frontend/core/src/hooks/use-register-workspace-commands.ts
+++ b/packages/frontend/core/src/hooks/use-register-workspace-commands.ts
@@ -1,4 +1,4 @@
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import type { AffineEditorContainer } from '@blocksuite/presets';
 import { useService, WorkspaceService } from '@toeverything/infra';
 import { useStore } from 'jotai';
@@ -58,7 +58,7 @@ function registerCMDKCommand(
 
 export function useRegisterWorkspaceCommands() {
   const store = useStore();
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const theme = useTheme();
   const currentWorkspace = useService(WorkspaceService).workspace;
   const languageHelper = useLanguageHelper();
diff --git a/packages/frontend/core/src/modules/cmdk/views/data-hooks.tsx b/packages/frontend/core/src/modules/cmdk/views/data-hooks.tsx
index cee321666d..9dfbad076a 100644
--- a/packages/frontend/core/src/modules/cmdk/views/data-hooks.tsx
+++ b/packages/frontend/core/src/modules/cmdk/views/data-hooks.tsx
@@ -16,8 +16,7 @@ import { CollectionService } from '@affine/core/modules/collection';
 import { WorkspaceSubPath } from '@affine/core/shared';
 import { mixpanel } from '@affine/core/utils';
 import type { Collection } from '@affine/env/filter';
-import { Trans } from '@affine/i18n';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { Trans, useI18n } from '@affine/i18n';
 import {
   EdgelessIcon,
   LinkIcon,
@@ -81,7 +80,7 @@ const docToCommand = (
   run: () => void,
   getPageTitle: ReturnType<typeof useGetDocCollectionPageTitle>,
   isPageJournal: (pageId: string) => boolean,
-  t: ReturnType<typeof useAFFiNEI18N>,
+  t: ReturnType<typeof useI18n>,
   subTitle?: string
 ): CMDKCommand => {
   const docMode = doc.mode$.value;
@@ -122,7 +121,7 @@ function useSearchedDocCommands(
   const workspace = useService(WorkspaceService).workspace;
   const getPageTitle = useGetDocCollectionPageTitle(workspace.docCollection);
   const { isPageJournal } = useJournalHelper(workspace.docCollection);
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   const [searchTime, setSearchTime] = useState<number>(0);
 
@@ -202,7 +201,7 @@ export const usePageCommands = () => {
   const query = useLiveData(quickSearch.query$);
   const navigationHelper = useNavigateHelper();
   const journalHelper = useJournalHelper(workspace.docCollection);
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   const onSelectPage = useCallback(
     (opts: { docId: string; blockId?: string }) => {
@@ -398,7 +397,7 @@ export const collectionToCommand = (
   collection: Collection,
   navigationHelper: ReturnType<typeof useNavigateHelper>,
   selectCollection: (id: string) => void,
-  t: ReturnType<typeof useAFFiNEI18N>,
+  t: ReturnType<typeof useI18n>,
   workspace: Workspace
 ): CMDKCommand => {
   const label = collection.name || t['Untitled']();
@@ -422,7 +421,7 @@ export const useCollectionsCommands = () => {
   const quickSearch = useService(QuickSearchService).quickSearch;
   const query = useLiveData(quickSearch.query$);
   const navigationHelper = useNavigateHelper();
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const workspace = useService(WorkspaceService).workspace;
   const selectCollection = useCallback(
     (id: string) => {
diff --git a/packages/frontend/core/src/modules/cmdk/views/main.tsx b/packages/frontend/core/src/modules/cmdk/views/main.tsx
index 810ad90f8a..9596bd06b8 100644
--- a/packages/frontend/core/src/modules/cmdk/views/main.tsx
+++ b/packages/frontend/core/src/modules/cmdk/views/main.tsx
@@ -3,8 +3,8 @@ import type { CommandCategory } from '@affine/core/commands';
 import { useDocEngineStatus } from '@affine/core/hooks/affine/use-doc-engine-status';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
 import { QuickSearchService } from '@affine/core/modules/cmdk';
-import { i18nTime } from '@affine/i18n';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { type I18nKeys, i18nTime } from '@affine/i18n';
+import { useI18n } from '@affine/i18n';
 import type { DocMeta } from '@blocksuite/store';
 import { useLiveData, useService } from '@toeverything/infra';
 import clsx from 'clsx';
@@ -32,13 +32,7 @@ import { CMDKModal } from './modal';
 import { NotFoundGroup } from './not-found';
 import type { CMDKCommand } from './types';
 
-type NoParametersKeys<T> = {
-  [K in keyof T]: T[K] extends () => any ? K : never;
-}[keyof T];
-
-type i18nKey = NoParametersKeys<ReturnType<typeof useAFFiNEI18N>>;
-
-const categoryToI18nKey: Record<CommandCategory, i18nKey> = {
+const categoryToI18nKey = {
   'affine:recent': 'com.affine.cmdk.affine.category.affine.recent',
   'affine:navigation': 'com.affine.cmdk.affine.category.affine.navigation',
   'affine:creation': 'com.affine.cmdk.affine.category.affine.creation',
@@ -55,7 +49,7 @@ const categoryToI18nKey: Record<CommandCategory, i18nKey> = {
     'com.affine.cmdk.affine.category.editor.insert-object',
   'editor:page': 'com.affine.cmdk.affine.category.editor.page',
   'affine:results': 'com.affine.cmdk.affine.category.results',
-};
+} satisfies Record<CommandCategory, I18nKeys>;
 
 const QuickSearchGroup = ({
   category,
@@ -66,7 +60,7 @@ const QuickSearchGroup = ({
   commands: CMDKCommand[];
   onOpenChange?: (open: boolean) => void;
 }) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const i18nKey = categoryToI18nKey[category];
   const quickSearch = useService(QuickSearchService).quickSearch;
   const query = useLiveData(quickSearch.query$);
@@ -169,7 +163,7 @@ export const CMDKContainer = ({
   groups: ReturnType<typeof useCMDKCommandGroups>;
   onQueryChange: (query: string) => void;
 }>) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const [value, setValue] = useAtom(cmdkValueAtom);
   const [opening, setOpening] = useState(open);
   const { syncing, progress } = useDocEngineStatus();
@@ -254,7 +248,7 @@ const CMDKQuickSearchModalInner = ({
   const quickSearch = useService(QuickSearchService).quickSearch;
   const query = useLiveData(quickSearch.query$);
   const groups = useCMDKCommandGroups();
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   return (
     <CMDKContainer
       className={styles.root}
@@ -278,7 +272,7 @@ const CMDKQuickSearchCallbackModalInner = ({
   const quickSearch = useService(QuickSearchService).quickSearch;
   const query = useLiveData(quickSearch.query$);
   const groups = useSearchCallbackCommandGroups();
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   return (
     <CMDKContainer
       className={styles.root}
diff --git a/packages/frontend/core/src/modules/cmdk/views/not-found.tsx b/packages/frontend/core/src/modules/cmdk/views/not-found.tsx
index 487eed1a7a..c0dfbdcc1d 100644
--- a/packages/frontend/core/src/modules/cmdk/views/not-found.tsx
+++ b/packages/frontend/core/src/modules/cmdk/views/not-found.tsx
@@ -1,5 +1,5 @@
 import { QuickSearchService } from '@affine/core/modules/cmdk';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { SearchIcon } from '@blocksuite/icons/rc';
 import { useLiveData, useService } from '@toeverything/infra';
 import { useCommandState } from 'cmdk';
@@ -12,7 +12,7 @@ export const NotFoundGroup = () => {
   // hack: we know that the filtered count is 3 when there is no result (create page & edgeless & append to journal, for mode === 'cmdk')
   const renderNoResult = useCommandState(state => state.filtered.count === 3);
 
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   if (!renderNoResult) {
     return null;
diff --git a/packages/frontend/core/src/modules/multi-tab-sidebar/multi-tabs/tabs/journal.tsx b/packages/frontend/core/src/modules/multi-tab-sidebar/multi-tabs/tabs/journal.tsx
index 1db38c4f82..38e62e5501 100644
--- a/packages/frontend/core/src/modules/multi-tab-sidebar/multi-tabs/tabs/journal.tsx
+++ b/packages/frontend/core/src/modules/multi-tab-sidebar/multi-tabs/tabs/journal.tsx
@@ -8,7 +8,7 @@ import {
   useJournalRouteHelper,
 } from '@affine/core/hooks/use-journal';
 import { useNavigateHelper } from '@affine/core/hooks/use-navigate-helper';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import {
   EdgelessIcon,
   MoreHorizontalIcon,
@@ -86,7 +86,7 @@ interface JournalBlockProps {
 }
 
 const EditorJournalPanel = () => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const doc = useService(DocService).doc;
   const workspace = useService(WorkspaceService).workspace;
   const { journalDate, isJournal } = useJournalInfoHelper(
@@ -167,7 +167,7 @@ const sortPagesByDate = (
 };
 
 const DailyCountEmptyFallback = ({ name }: { name: NavItemName }) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   return (
     <div className={styles.dailyCountEmpty}>
@@ -180,7 +180,7 @@ const DailyCountEmptyFallback = ({ name }: { name: NavItemName }) => {
 const JournalDailyCountBlock = ({ date }: JournalBlockProps) => {
   const workspace = useService(WorkspaceService).workspace;
   const nodeRef = useRef<HTMLDivElement>(null);
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const [activeItem, setActiveItem] = useState<NavItemName>('createdToday');
   const docRecords = useLiveData(useService(DocsService).list.docs$);
 
@@ -345,7 +345,7 @@ const ConflictList = ({
   );
 };
 const JournalConflictBlock = ({ date }: JournalBlockProps) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const workspace = useService(WorkspaceService).workspace;
   const docRecordList = useService(DocsService).list;
   const journalHelper = useJournalHelper(workspace.docCollection);
diff --git a/packages/frontend/core/src/modules/navigation/view/navigation-buttons.tsx b/packages/frontend/core/src/modules/navigation/view/navigation-buttons.tsx
index aad143c9ce..1c79c2c962 100644
--- a/packages/frontend/core/src/modules/navigation/view/navigation-buttons.tsx
+++ b/packages/frontend/core/src/modules/navigation/view/navigation-buttons.tsx
@@ -1,5 +1,5 @@
 import { IconButton, Tooltip } from '@affine/component';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { ArrowLeftSmallIcon, ArrowRightSmallIcon } from '@blocksuite/icons/rc';
 import { useLiveData, useService } from '@toeverything/infra';
 import { useCallback, useEffect, useMemo } from 'react';
@@ -9,7 +9,7 @@ import { NavigatorService } from '../services/navigator';
 import * as styles from './navigation-buttons.css';
 
 export const NavigationButtons = () => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   const shortcuts = useGeneralShortcuts().shortcuts;
 
diff --git a/packages/frontend/core/src/modules/peek-view/view/doc-peek-controls.tsx b/packages/frontend/core/src/modules/peek-view/view/doc-peek-controls.tsx
index d4b72bb444..7901fd9b47 100644
--- a/packages/frontend/core/src/modules/peek-view/view/doc-peek-controls.tsx
+++ b/packages/frontend/core/src/modules/peek-view/view/doc-peek-controls.tsx
@@ -1,6 +1,6 @@
 import { IconButton, Tooltip } from '@affine/component';
 import { useNavigateHelper } from '@affine/core/hooks/use-navigate-helper';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import {
   CloseIcon,
   DualLinkIcon,
@@ -76,7 +76,7 @@ export const DocPeekViewControls = ({
   const peekView = useService(PeekViewService).peekView;
   const workbench = useService(WorkbenchService).workbench;
   const { jumpToPageBlock } = useNavigateHelper();
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const { doc, workspace } = useDoc(docId);
   const controls = useMemo(() => {
     return [
diff --git a/packages/frontend/core/src/modules/tag/view/delete-tag-modal.tsx b/packages/frontend/core/src/modules/tag/view/delete-tag-modal.tsx
index 230983c792..d855f1c0d7 100644
--- a/packages/frontend/core/src/modules/tag/view/delete-tag-modal.tsx
+++ b/packages/frontend/core/src/modules/tag/view/delete-tag-modal.tsx
@@ -1,6 +1,5 @@
 import { ConfirmModal, toast } from '@affine/component';
-import { Trans } from '@affine/i18n';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { Trans, useI18n } from '@affine/i18n';
 import { useLiveData, useService } from '@toeverything/infra';
 import { useCallback, useMemo } from 'react';
 
@@ -15,7 +14,7 @@ export const DeleteTagConfirmModal = ({
   onOpenChange: (open: boolean) => void;
   selectedTagIds: string[];
 }) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const tagService = useService(TagService);
   const tags = useLiveData(tagService.tagList.tags$);
   const selectedTags = useMemo(() => {
diff --git a/packages/frontend/core/src/modules/workbench/view/split-view/panel.tsx b/packages/frontend/core/src/modules/workbench/view/split-view/panel.tsx
index 0ada2064b7..7448073165 100644
--- a/packages/frontend/core/src/modules/workbench/view/split-view/panel.tsx
+++ b/packages/frontend/core/src/modules/workbench/view/split-view/panel.tsx
@@ -1,5 +1,5 @@
 import { MenuIcon, MenuItem } from '@affine/component';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import {
   ExpandCloseIcon,
   MoveToLeftDuotoneIcon,
@@ -115,7 +115,7 @@ export const SplitViewPanel = memo(function SplitViewPanel({
 });
 
 const SplitViewMenu = ({ view }: { view: View }) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const workbench = useService(WorkbenchService).workbench;
   const views = useLiveData(workbench.views$);
 
diff --git a/packages/frontend/core/src/pages/auth.tsx b/packages/frontend/core/src/pages/auth.tsx
index a15b007e81..296337faf1 100644
--- a/packages/frontend/core/src/pages/auth.tsx
+++ b/packages/frontend/core/src/pages/auth.tsx
@@ -15,7 +15,7 @@ import {
   sendVerifyChangeEmailMutation,
   verifyEmailMutation,
 } from '@affine/graphql';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { useLiveData, useService } from '@toeverything/infra';
 import type { ReactElement } from 'react';
 import { useCallback, useEffect } from 'react';
@@ -43,7 +43,7 @@ const authTypeSchema = z.enum([
 export const AuthPage = (): ReactElement | null => {
   const authService = useService(AuthService);
   const account = useLiveData(authService.session.account$);
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const serverConfig = useService(ServerConfigService).serverConfig;
   const passwordLimits = useLiveData(
     serverConfig.credentialsRequirement$.map(r => r?.password)
diff --git a/packages/frontend/core/src/pages/expired.tsx b/packages/frontend/core/src/pages/expired.tsx
index 6c6efbcd6d..2aa98427f9 100644
--- a/packages/frontend/core/src/pages/expired.tsx
+++ b/packages/frontend/core/src/pages/expired.tsx
@@ -1,12 +1,12 @@
 import { AuthPageContainer } from '@affine/component/auth-components';
 import { Button } from '@affine/component/ui/button';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { useCallback } from 'react';
 
 import { RouteLogic, useNavigateHelper } from '../hooks/use-navigate-helper';
 
 export const Component = () => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const { jumpToIndex } = useNavigateHelper();
   const onOpenAffine = useCallback(() => {
     jumpToIndex(RouteLogic.REPLACE);
diff --git a/packages/frontend/core/src/pages/open-app.tsx b/packages/frontend/core/src/pages/open-app.tsx
index 63ce9458f1..ff84e73a5f 100644
--- a/packages/frontend/core/src/pages/open-app.tsx
+++ b/packages/frontend/core/src/pages/open-app.tsx
@@ -1,8 +1,7 @@
 import { Button } from '@affine/component/ui/button';
 import type { GetCurrentUserQuery } from '@affine/graphql';
 import { fetcher, getCurrentUserQuery } from '@affine/graphql';
-import { Trans } from '@affine/i18n';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { Trans, useI18n } from '@affine/i18n';
 import { Logo1Icon } from '@blocksuite/icons/rc';
 import { useCallback, useMemo } from 'react';
 import type { LoaderFunction } from 'react-router-dom';
@@ -59,7 +58,7 @@ interface LoaderData {
 }
 
 const OpenAppImpl = ({ urlToOpen, channel }: OpenAppProps) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const openDownloadLink = useCallback(() => {
     const url = `https://affine.pro/download?channel=${channel}`;
     open(url, '_blank');
diff --git a/packages/frontend/core/src/pages/share/share-detail-page.tsx b/packages/frontend/core/src/pages/share/share-detail-page.tsx
index f3ae10a20e..33aa80eaf7 100644
--- a/packages/frontend/core/src/pages/share/share-detail-page.tsx
+++ b/packages/frontend/core/src/pages/share/share-detail-page.tsx
@@ -3,7 +3,7 @@ import { useActiveBlocksuiteEditor } from '@affine/core/hooks/use-block-suite-ed
 import { usePageDocumentTitle } from '@affine/core/hooks/use-global-state';
 import { AuthService } from '@affine/core/modules/cloud';
 import { WorkspaceFlavour } from '@affine/env/workspace';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { noop } from '@blocksuite/global/utils';
 import { Logo1Icon } from '@blocksuite/icons/rc';
 import type { AffineEditorContainer } from '@blocksuite/presets';
@@ -117,7 +117,7 @@ export const Component = () => {
   } = useLoaderData() as LoaderData;
   const workspacesService = useService(WorkspacesService);
 
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const [workspace, setWorkspace] = useState<Workspace | null>(null);
   const [page, setPage] = useState<Doc | null>(null);
   const [_, setActiveBlocksuiteEditor] = useActiveBlocksuiteEditor();
diff --git a/packages/frontend/core/src/pages/share/share-footer.tsx b/packages/frontend/core/src/pages/share/share-footer.tsx
index 625311c910..47cb3db49e 100644
--- a/packages/frontend/core/src/pages/share/share-footer.tsx
+++ b/packages/frontend/core/src/pages/share/share-footer.tsx
@@ -1,10 +1,10 @@
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { ArrowRightBigIcon } from '@blocksuite/icons/rc';
 
 import * as styles from './share-footer.css';
 
 export const ShareFooter = () => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   return (
     <div className={styles.footerContainer}>
       <div className={styles.footer}>
diff --git a/packages/frontend/core/src/pages/workspace/all-collection/index.tsx b/packages/frontend/core/src/pages/workspace/all-collection/index.tsx
index b1d35148bb..00b8ae9c35 100644
--- a/packages/frontend/core/src/pages/workspace/all-collection/index.tsx
+++ b/packages/frontend/core/src/pages/workspace/all-collection/index.tsx
@@ -7,7 +7,7 @@ import {
 } from '@affine/core/components/page-list';
 import { useAllPageListConfig } from '@affine/core/hooks/affine/use-all-page-list-config';
 import { useNavigateHelper } from '@affine/core/hooks/use-navigate-helper';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { useLiveData, useService, WorkspaceService } from '@toeverything/infra';
 import { nanoid } from 'nanoid';
 import { useCallback, useMemo, useState } from 'react';
@@ -19,7 +19,7 @@ import { AllCollectionHeader } from './header';
 import * as styles from './index.css';
 
 export const AllCollection = () => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const currentWorkspace = useService(WorkspaceService).workspace;
   const [hideHeaderCreateNew, setHideHeaderCreateNew] = useState(true);
 
diff --git a/packages/frontend/core/src/pages/workspace/collection/index.tsx b/packages/frontend/core/src/pages/workspace/collection/index.tsx
index 939fae9648..d408685915 100644
--- a/packages/frontend/core/src/pages/workspace/collection/index.tsx
+++ b/packages/frontend/core/src/pages/workspace/collection/index.tsx
@@ -8,8 +8,7 @@ import { useAllPageListConfig } from '@affine/core/hooks/affine/use-all-page-lis
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
 import { CollectionService } from '@affine/core/modules/collection';
 import type { Collection } from '@affine/env/filter';
-import { Trans } from '@affine/i18n';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { Trans, useI18n } from '@affine/i18n';
 import {
   CloseIcon,
   FilterIcon,
@@ -123,7 +122,7 @@ const Placeholder = ({ collection }: { collection: Collection }) => {
     setShowTips(false);
     localStorage.setItem('hide-empty-collection-help-info', 'true');
   }, []);
-  const t = useAFFiNEI18N();
+  const t = useI18n();
 
   const handleJumpToCollections = useCallback(() => {
     jumpToCollections(workspace.id);
diff --git a/packages/frontend/core/src/pages/workspace/page-list-empty.tsx b/packages/frontend/core/src/pages/workspace/page-list-empty.tsx
index 9b9ac4675b..4acdf97da8 100644
--- a/packages/frontend/core/src/pages/workspace/page-list-empty.tsx
+++ b/packages/frontend/core/src/pages/workspace/page-list-empty.tsx
@@ -1,6 +1,5 @@
 import { Empty } from '@affine/component';
-import { Trans } from '@affine/i18n';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { Trans, useI18n } from '@affine/i18n';
 import type { DocCollection } from '@blocksuite/store';
 import type { ReactNode } from 'react';
 import { useCallback } from 'react';
@@ -18,7 +17,7 @@ export const EmptyPageList = ({
   heading?: ReactNode;
 }) => {
   const { createPage } = usePageHelper(docCollection);
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const onCreatePage = useCallback(() => {
     createPage?.();
   }, [createPage]);
@@ -69,7 +68,7 @@ export const EmptyPageList = ({
 };
 
 export const EmptyCollectionList = ({ heading }: { heading: ReactNode }) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   return (
     <div className={styles.pageListEmptyStyle}>
       {heading && <div>{heading}</div>}
@@ -79,7 +78,7 @@ export const EmptyCollectionList = ({ heading }: { heading: ReactNode }) => {
 };
 
 export const EmptyTagList = ({ heading }: { heading: ReactNode }) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   return (
     <div className={styles.pageListEmptyStyle}>
       {heading && <div>{heading}</div>}
diff --git a/packages/frontend/core/src/pages/workspace/trash-page.tsx b/packages/frontend/core/src/pages/workspace/trash-page.tsx
index aa01862bbe..d1eb9bb3f2 100644
--- a/packages/frontend/core/src/pages/workspace/trash-page.tsx
+++ b/packages/frontend/core/src/pages/workspace/trash-page.tsx
@@ -4,7 +4,7 @@ import {
 } from '@affine/core/components/page-list';
 import { Header } from '@affine/core/components/pure/header';
 import { useBlockSuiteDocMeta } from '@affine/core/hooks/use-block-suite-page-meta';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { assertExists } from '@blocksuite/global/utils';
 import { DeleteIcon } from '@blocksuite/icons/rc';
 import { useService, WorkspaceService } from '@toeverything/infra';
@@ -14,7 +14,7 @@ import { EmptyPageList } from './page-list-empty';
 import * as styles from './trash-page.css';
 
 const TrashHeader = () => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   return (
     <Header
       left={
diff --git a/packages/frontend/i18n/README.md b/packages/frontend/i18n/README.md
index 5c8ad66f57..bf32ebd858 100644
--- a/packages/frontend/i18n/README.md
+++ b/packages/frontend/i18n/README.md
@@ -6,8 +6,7 @@
 - Replace literal text with translation keys
 
 ```tsx
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
-import { LOCALES, useI18N } from '@affine/i18n';
+import { useI18n, LOCALES } from '@affine/i18n';
 // src/resources/en.json
 // {
 //     'Text': 'some text',
@@ -15,15 +14,14 @@ import { LOCALES, useI18N } from '@affine/i18n';
 // };
 
 const App = () => {
-  const t = useAFFiNEI18N();
-  const i18n = useI18N();
+  const i18n = useI18n();
   const changeLanguage = (language: string) => {
     i18n.changeLanguage(language);
   };
 
   return (
     <div>
-      <div>{t['Workspace Settings']()}</div>
+      <div>{i18n['Workspace Settings']()}</div>
       <>
         {LOCALES.map(option => {
           return (
diff --git a/packages/frontend/i18n/package.json b/packages/frontend/i18n/package.json
index 83bb04d01d..a8a7978487 100644
--- a/packages/frontend/i18n/package.json
+++ b/packages/frontend/i18n/package.json
@@ -4,8 +4,7 @@
   "type": "module",
   "main": "src/index.ts",
   "exports": {
-    ".": "./src/index.ts",
-    "./hooks": "./src/i18n-generated"
+    ".": "./src/index.ts"
   },
   "scripts": {
     "build": "node build.mjs",
@@ -23,6 +22,7 @@
     "@magic-works/i18n-codegen": "^0.6.0",
     "dayjs": "^1.11.11",
     "i18next": "^23.11.1",
+    "react": "^18.2.0",
     "react-i18next": "^14.1.0",
     "undici": "^6.12.0"
   },
diff --git a/packages/frontend/i18n/src/i18n.ts b/packages/frontend/i18n/src/i18n.ts
index e4a024f5e0..453973d528 100644
--- a/packages/frontend/i18n/src/i18n.ts
+++ b/packages/frontend/i18n/src/i18n.ts
@@ -1,4 +1,5 @@
-import { getI18n } from 'react-i18next';
+import { useMemo } from 'react';
+import { getI18n, useTranslation } from 'react-i18next';
 
 import type { useAFFiNEI18N } from './i18n-generated';
 
@@ -22,33 +23,64 @@ export type I18nString =
     }[I18nKeys]
   | string;
 
-const I18nMethod = {
-  t(i18nStr: I18nString) {
-    const i18n = getI18n();
-    if (typeof i18nStr === 'object') {
-      return i18n.t(i18nStr.key, 'options' in i18nStr ? i18nStr.options : {});
-    }
-    return i18nStr;
-  },
-  get language() {
-    const i18n = getI18n();
-    return i18n.language;
-  },
+export const isI18nString = (value: any): value is I18nString => {
+  return (
+    typeof value === 'string' || (typeof value === 'object' && 'key' in value)
+  );
 };
 
-const I18nProxy = new Proxy(I18nMethod, {
-  get(self, key) {
-    const i18n = getI18n();
-    if (typeof key === 'string' && i18n.exists(key)) {
-      return i18n.t.bind(i18n, key as string);
-    } else {
-      return (self as any)[key as string] as any;
-    }
-  },
-});
+function createI18nWrapper(
+  getI18nFn: () => ReturnType<typeof getI18n>,
+  getI18nT: () => ReturnType<typeof getI18n>['t']
+) {
+  const I18nMethod = {
+    t(i18nStr: I18nString) {
+      const i18n = getI18nFn();
+      if (typeof i18nStr === 'object') {
+        return i18n.t(i18nStr.key, 'options' in i18nStr ? i18nStr.options : {});
+      }
+      return i18nStr;
+    },
+    get language() {
+      const i18n = getI18nFn();
+      return i18n.language;
+    },
+    changeLanguage(lng?: string | undefined) {
+      const i18n = getI18nFn();
+      return i18n.changeLanguage(lng);
+    },
+    get on() {
+      const i18n = getI18nFn();
+      return i18n.on.bind(i18n);
+    },
+  };
+
+  return new Proxy(I18nMethod, {
+    get(self, key) {
+      const i18n = getI18nFn();
+      if (typeof key === 'string' && i18n.exists(key)) {
+        return getI18nT().bind(null, key as string);
+      } else {
+        return (self as any)[key as string] as any;
+      }
+    },
+  }) as I18nFuncs & typeof I18nMethod;
+}
+
+export const useI18n = () => {
+  const { i18n, t } = useTranslation();
+  return useMemo(
+    () =>
+      createI18nWrapper(
+        () => i18n,
+        () => t
+      ),
+    [i18n, t]
+  );
+};
 
 /**
  * I18n['com.affine.xxx']({ arg1: 'hello' }) -> '中文 hello'
  */
-export const I18n = I18nProxy as I18nFuncs & typeof I18nMethod;
+export const I18n = createI18nWrapper(getI18n, () => getI18n().t);
 export type I18n = typeof I18n;
diff --git a/packages/frontend/i18n/src/index.ts b/packages/frontend/i18n/src/index.ts
index 3e611aa7e5..771dbbe0d5 100644
--- a/packages/frontend/i18n/src/index.ts
+++ b/packages/frontend/i18n/src/index.ts
@@ -1,18 +1,12 @@
 import type { i18n, Resource } from 'i18next';
 import i18next from 'i18next';
 import type { I18nextProviderProps } from 'react-i18next';
-import {
-  I18nextProvider,
-  initReactI18next,
-  Trans,
-  useTranslation as useRootTranslation,
-} from 'react-i18next';
+import { I18nextProvider, initReactI18next, Trans } from 'react-i18next';
 
 import { LOCALES } from './resources';
 import type en_US from './resources/en.json';
 
 export * from './i18n';
-export * from './i18n-generated';
 export * from './utils';
 
 declare module 'i18next' {
@@ -44,12 +38,6 @@ declare module 'react-i18next' {
 const STORAGE_KEY = 'i18n_lng';
 
 export { I18nextProvider, LOCALES, Trans };
-export function useI18N() {
-  const { i18n } = useRootTranslation();
-  return i18n;
-}
-
-export { getI18n } from 'react-i18next';
 
 const resources = LOCALES.reduce<Resource>((acc, { tag, res }) => {
   return Object.assign(acc, { [tag]: { translation: res } });
@@ -99,6 +87,7 @@ export const createI18n = (): I18nextProviderProps['i18n'] => {
   }
   return i18n;
 };
+
 export function setUpLanguage(i: i18n) {
   let language;
   const localStorageLanguage = localStorage.getItem(STORAGE_KEY);
@@ -109,5 +98,3 @@ export function setUpLanguage(i: i18n) {
   }
   return i.changeLanguage(language);
 }
-
-// const I18nProvider = I18nextProvider;
diff --git a/packages/frontend/i18n/src/utils/__tests__/time.spec.ts b/packages/frontend/i18n/src/utils/__tests__/time.spec.ts
index 192f1d9678..651d44625b 100644
--- a/packages/frontend/i18n/src/utils/__tests__/time.spec.ts
+++ b/packages/frontend/i18n/src/utils/__tests__/time.spec.ts
@@ -1,10 +1,10 @@
 import { describe, expect, test } from 'vitest';
 
-import { createI18n, getI18n } from '../../';
+import { createI18n, I18n } from '../../';
 import { i18nTime } from '../time';
 
 // Intl api is not available in github action, skip the test
-describe.skip('humanTime', () => {
+describe('humanTime', () => {
   test('absolute', async () => {
     createI18n();
     expect(i18nTime('2024-10-10 13:30:28')).toBe('Oct 10, 2024, 1:30:28 PM');
@@ -350,7 +350,7 @@ describe.skip('humanTime', () => {
 
   test('chinese', () => {
     createI18n();
-    getI18n().changeLanguage('zh-Hans');
+    I18n.changeLanguage('zh-Hans');
     expect(i18nTime('2024-10-10 13:30:28.005')).toBe('2024年10月10日 13:30:28');
     expect(
       i18nTime('2024-10-10 13:30:28.005', {
diff --git a/tsconfig.json b/tsconfig.json
index 1ce5978fdb..38a0eaf949 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -61,7 +61,6 @@
         "./packages/frontend/component/src/components/*"
       ],
       "@affine/i18n": ["./packages/frontend/i18n/src"],
-      "@affine/i18n/hooks": ["./packages/frontend/i18n/src/i18n-generated"],
       "@affine/debug": ["./packages/common/debug"],
       "@affine/env": ["./packages/common/env/src"],
       "@affine/env/*": ["./packages/common/env/src/*"],
diff --git a/yarn.lock b/yarn.lock
index e3d732d4c1..026ba0d03d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -614,6 +614,7 @@ __metadata:
     dayjs: "npm:^1.11.11"
     i18next: "npm:^23.11.1"
     prettier: "npm:^3.2.5"
+    react: "npm:^18.2.0"
     react-i18next: "npm:^14.1.0"
     ts-node: "npm:^10.9.2"
     typescript: "npm:^5.4.5"