refactor: change locale key (#3838)

2026-02-14 21:27:20 +00:00 · 2023-09-06 15:20:44 +08:00
parent b3d902e33f
commit 925c18300f
49 changed files with 2622 additions and 2324 deletions
--- a/apps/core/src/components/affine/auth/no-access.tsx
+++ b/apps/core/src/components/affine/auth/no-access.tsx
@@ -22,7 +22,7 @@ export const NoAccess: FC<AuthPanelProps> = ({ setAuthState, onSignedIn }) => {
  return (
    <>
      <ModalHeader
-        title={t['AFFiNE Cloud']()}
+        title={t['com.affine.brand.affineCloud']()}
        subTitle={t['Early Access Stage']()}
      />
      <AuthContent style={{ height: 162 }}>
--- a/apps/core/src/components/affine/auth/send-email.tsx
+++ b/apps/core/src/components/affine/auth/send-email.tsx
@@ -147,7 +147,10 @@ export const SendEmail = ({

  return (
    <>
-      <ModalHeader title={t['AFFiNE Cloud']()} subTitle={title} />
+      <ModalHeader
+        title={t['com.affine.brand.affineCloud']()}
+        subTitle={title}
+      />
      <AuthContent>{t['com.affine.auth.reset.password.message']()}</AuthContent>

      <Wrapper
--- a/apps/core/src/components/affine/auth/sign-in-with-password.tsx
+++ b/apps/core/src/components/affine/auth/sign-in-with-password.tsx
@@ -55,7 +55,7 @@ export const SignInWithPassword: FC<AuthPanelProps> = ({
    <>
      <ModalHeader
        title={t['com.affine.auth.sign.in']()}
-        subTitle={t['AFFiNE Cloud']()}
+        subTitle={t['com.affine.brand.affineCloud']()}
      />

      <Wrapper
--- a/apps/core/src/components/affine/auth/sign-in.tsx
+++ b/apps/core/src/components/affine/auth/sign-in.tsx
@@ -78,7 +78,7 @@ export const SignIn: FC<AuthPanelProps> = ({
    <>
      <ModalHeader
        title={t['com.affine.auth.sign.in']()}
-        subTitle={t['AFFiNE Cloud']()}
+        subTitle={t['com.affine.brand.affineCloud']()}
      />

      <Button
--- a/apps/core/src/components/affine/create-workspace-modal/index.tsx
+++ b/apps/core/src/components/affine/create-workspace-modal/index.tsx
@@ -65,8 +65,10 @@ const NameWorkspaceContent = ({
  const t = useAFFiNEI18N();
  return (
    <div className={style.content}>
-      <div className={style.contentTitle}>{t['Name Your Workspace']()}</div>
-      <p>{t['Workspace description']()}</p>
+      <div className={style.contentTitle}>
+        {t['com.affine.nameWorkspace.title']()}
+      </div>
+      <p>{t['com.affine.nameWorkspace.description']()}</p>
      <Input
        ref={ref => {
          if (ref) {
@@ -75,14 +77,14 @@ const NameWorkspaceContent = ({
        }}
        data-testid="create-workspace-input"
        onKeyDown={handleKeyDown}
-        placeholder={t['Set a Workspace name']()}
+        placeholder={t['com.affine.nameWorkspace.placeholder']()}
        maxLength={64}
        minLength={0}
        onChange={setWorkspaceName}
      />
      <div className={style.buttonGroup}>
        <Button data-testid="create-workspace-close-button" onClick={onClose}>
-          {t.Cancel()}
+          {t['com.affine.nameWorkspace.button.cancel']()}
        </Button>
        <Button
          data-testid="create-workspace-create-button"
@@ -93,7 +95,7 @@ const NameWorkspaceContent = ({
          type="primary"
          onClick={handleCreateWorkspace}
        >
-          {t.Create()}
+          {t['com.affine.nameWorkspace.button.create']()}
        </Button>
      </div>
    </div>
@@ -150,8 +152,10 @@ const SetDBLocationContent = ({

  return (
    <div className={style.content}>
-      <div className={style.contentTitle}>{t['Set database location']()}</div>
-      <p>{t['Workspace database storage description']()}</p>
+      <div className={style.contentTitle}>
+        {t['com.affine.setDBLocation.title']()}
+      </div>
+      <p>{t['com.affine.setDBLocation.description']()}</p>
      <div className={style.buttonGroup}>
        <Button
          disabled={opening}
@@ -159,10 +163,10 @@ const SetDBLocationContent = ({
          type="primary"
          onClick={handleSelectDBFileLocation}
        >
-          {t['Customize']()}
+          {t['com.affine.setDBLocation.button.customize']()}
        </Button>
        <Tooltip
-          content={t['Default db location hint']({
+          content={t['com.affine.setDBLocation.tooltip.defaultLocation']({
            location: defaultDBLocation,
          })}
          portalOptions={{
@@ -179,7 +183,7 @@ const SetDBLocationContent = ({
            iconPosition="end"
            ref={ref}
          >
-            {t['Default Location']()}
+            {t['com.affine.setDBLocation.button.defaultLocation']()}
          </Button>
        </Tooltip>
      </div>
@@ -201,7 +205,9 @@ const SetSyncingModeContent = ({
  return (
    <div className={style.content}>
      <div className={style.contentTitle}>
-        {t[mode === 'new' ? 'Created Successfully' : 'Added Successfully']()}
+        {mode === 'new'
+          ? t['com.affine.setSyncingMode.title.created']()
+          : t['com.affine.setSyncingMode.title.added']()}
      </div>

      <div className={style.radioGroup}>
@@ -212,7 +218,7 @@ const SetSyncingModeContent = ({
            readOnly
            checked={!enableCloudSyncing}
          />
-          {t['Use on current device only']()}
+          {t['com.affine.setSyncingMode.deviceOnly']()}
        </label>
        <label onClick={() => setEnableCloudSyncing(true)}>
          <input
@@ -221,7 +227,7 @@ const SetSyncingModeContent = ({
            readOnly
            checked={enableCloudSyncing}
          />
-          {t['Sync across devices with AFFiNE Cloud']()}
+          {t['com.affine.setSyncingMode.cloud']()}
        </label>
      </div>

@@ -233,7 +239,7 @@ const SetSyncingModeContent = ({
            onConfirmMode(enableCloudSyncing);
          }}
        >
-          {t['Continue']()}
+          {t['com.affine.setSyncingMode.button.continue']()}
        </Button>
      </div>
    </div>
--- a/apps/core/src/components/affine/enable-affine-cloud-modal/index.tsx
+++ b/apps/core/src/components/affine/enable-affine-cloud-modal/index.tsx
@@ -32,7 +32,7 @@ export const EnableAffineCloudModal = ({
          <ButtonContainer>
            <div>
              <Button onClick={onClose} block>
-                {t['Cancel']()}
+                {t['com.affine.enableAffineCloudModal.button.cancel']()}
              </Button>
            </div>
            <div>
--- a/apps/core/src/components/affine/new-workspace-setting-detail/delete-leave-workspace/delete/index.tsx
+++ b/apps/core/src/components/affine/new-workspace-setting-detail/delete-leave-workspace/delete/index.tsx
@@ -40,10 +40,12 @@ export const WorkspaceDeleteModal = ({
    <Modal open={open} onClose={onClose}>
      <StyledModalWrapper>
        <ModalCloseButton onClick={onClose} />
-        <StyledModalHeader>{t['Delete Workspace']()}?</StyledModalHeader>
+        <StyledModalHeader>
+          {t['com.affine.workspaceDelete.title']()}?
+        </StyledModalHeader>
        {workspace.flavour === WorkspaceFlavour.LOCAL ? (
          <StyledTextContent>
-            <Trans i18nKey="Delete Workspace Description">
+            <Trans i18nKey="com.affine.workspaceDelete.description">
              Deleting (
              <StyledWorkspaceName>
                {{ workspace: workspaceName } as any}
@@ -54,7 +56,7 @@ export const WorkspaceDeleteModal = ({
          </StyledTextContent>
        ) : (
          <StyledTextContent>
-            <Trans i18nKey="Delete Workspace Description2">
+            <Trans i18nKey="com.affine.workspaceDelete.description2">
              Deleting (
              <StyledWorkspaceName>
                {{ workspace: workspaceName } as any}
@@ -73,14 +75,14 @@ export const WorkspaceDeleteModal = ({
            }}
            onChange={setDeleteStr}
            data-testid="delete-workspace-input"
-            placeholder={t['Placeholder of delete workspace']()}
+            placeholder={t['com.affine.workspaceDelete.placeholder']()}
            width={315}
            height={42}
          />
        </StyledInputContent>
        <StyledButtonContent>
          <Button onClick={onClose} size="large">
-            {t['Cancel']()}
+            {t['com.affine.workspaceDelete.button.cancel']()}
          </Button>
          <Button
            data-testid="delete-workspace-confirm-button"
@@ -90,7 +92,7 @@ export const WorkspaceDeleteModal = ({
            type="error"
            style={{ marginLeft: '24px' }}
          >
-            {t['Delete']()}
+            {t['com.affine.workspaceDelete.button.delete']()}
          </Button>
        </StyledButtonContent>
      </StyledModalWrapper>
--- a/apps/core/src/components/affine/new-workspace-setting-detail/delete-leave-workspace/index.tsx
+++ b/apps/core/src/components/affine/new-workspace-setting-detail/delete-leave-workspace/index.tsx
@@ -56,11 +56,11 @@ export const DeleteLeaveWorkspace = ({
        name={
          <span style={{ color: 'var(--affine-error-color)' }}>
            {isOwner
-              ? t['com.affine.settings.remove-workspace']()
-              : t['Leave Workspace']()}
+              ? t['com.affine.workspaceDelete.title']()
+              : t['com.affine.deleteLeaveWorkspace.leave']()}
          </span>
        }
-        desc={t['com.affine.settings.remove-workspace-description']()}
+        desc={t['com.affine.deleteLeaveWorkspace.description']()}
        style={{ cursor: 'pointer' }}
        onClick={onLeaveOrDelete}
        data-testid="delete-workspace-button"
@@ -82,8 +82,8 @@ export const DeleteLeaveWorkspace = ({
          onConfirm={onLeaveConfirm}
          onCancel={onCloseLeaveModal}
          onClose={onCloseLeaveModal}
-          title={`${t['Leave Workspace']()}?`}
-          content={t['Leave Workspace hint']()}
+          title={`${t['com.affine.deleteLeaveWorkspace.leave']()}?`}
+          content={t['com.affine.deleteLeaveWorkspace.leaveDescription']()}
          confirmType="warning"
          confirmText={t['Leave']()}
        />
--- a/apps/core/src/components/affine/new-workspace-setting-detail/index.tsx
+++ b/apps/core/src/components/affine/new-workspace-setting-detail/index.tsx
@@ -73,7 +73,7 @@ export const WorkspaceSettingDetail = (props: WorkspaceSettingDetailProps) => {
          <LabelsPanel workspace={workspace} {...props} />
        </SettingRow>
      </SettingWrapper>
-      <SettingWrapper title={t['AFFiNE Cloud']()}>
+      <SettingWrapper title={t['com.affine.brand.affineCloud']()}>
        <PublishPanel workspace={workspace} {...props} />
        <MembersPanel workspace={workspace} {...props} />
      </SettingWrapper>
--- a/apps/core/src/components/affine/setting-modal/general-setting/about/index.tsx
+++ b/apps/core/src/components/affine/setting-modal/general-setting/about/index.tsx
@@ -22,25 +22,28 @@ export const AboutAffine = () => {
  return (
    <>
      <SettingHeader
-        title={t['About AFFiNE']()}
-        subtitle={t['com.affine.settings.about.message']()}
+        title={t['com.affine.aboutAFFiNE.title']()}
+        subtitle={t['com.affine.aboutAFFiNE.subtitle']()}
        data-testid="about-title"
      />
-      <SettingWrapper title={t['Version']()}>
-        <SettingRow name={t['App Version']()} desc={runtimeConfig.appVersion} />
+      <SettingWrapper title={t['com.affine.aboutAFFiNE.version.title']()}>
        <SettingRow
-          name={t['Editor Version']()}
+          name={t['com.affine.aboutAFFiNE.version.app']()}
+          desc={runtimeConfig.appVersion}
+        />
+        <SettingRow
+          name={t['com.affine.aboutAFFiNE.version.editor.title']()}
          desc={runtimeConfig.editorVersion}
        />
        {runtimeConfig.enableNewSettingUnstableApi && environment.isDesktop ? (
          <>
            <SettingRow
-              name={t['Check for updates']()}
-              desc={t['New version is ready']()}
-            ></SettingRow>
+              name={t['com.affine.aboutAFFiNE.checkUpdate.title']()}
+              desc={t['com.affine.aboutAFFiNE.checkUpdate.description']()}
+            />
            <SettingRow
-              name={t['Check for updates automatically']()}
-              desc={t['com.affine.settings.about.update.check.message']()}
+              name={t['com.affine.aboutAFFiNE.autoCheckUpdate.title']()}
+              desc={t['com.affine.aboutAFFiNE.autoCheckUpdate.description']()}
            >
              <Switch
                checked={appSettings.autoCheckUpdate}
@@ -48,8 +51,10 @@ export const AboutAffine = () => {
              />
            </SettingRow>
            <SettingRow
-              name={t['Download updates automatically']()}
-              desc={t['com.affine.settings.about.update.download.message']()}
+              name={t['com.affine.aboutAFFiNE.autoDownloadUpdate.title']()}
+              desc={t[
+                'com.affine.aboutAFFiNE.autoDownloadUpdate.description'
+              ]()}
            >
              <Switch
                checked={appSettings.autoCheckUpdate}
@@ -57,8 +62,8 @@ export const AboutAffine = () => {
              />
            </SettingRow>
            <SettingRow
-              name={t[`Discover what's new`]()}
-              desc={t['Changelog description']()}
+              name={t['com.affine.aboutAFFiNE.changelog.title']()}
+              desc={t['com.affine.aboutAFFiNE.changelog.description']()}
              style={{ cursor: 'pointer' }}
              onClick={() => {
                window.open(runtimeConfig.changelogUrl, '_blank');
@@ -69,14 +74,14 @@ export const AboutAffine = () => {
          </>
        ) : null}
      </SettingWrapper>
-      <SettingWrapper title={t['Contact with us']()}>
+      <SettingWrapper title={t['com.affine.aboutAFFiNE.contact.title']()}>
        <a
          className={link}
          rel="noreferrer"
          href="https://affine.pro"
          target="_blank"
        >
-          {t['Official Website']()}
+          {t['com.affine.aboutAFFiNE.contact.website']()}
          <OpenInNewIcon className="icon" />
        </a>
        <a
@@ -85,11 +90,11 @@ export const AboutAffine = () => {
          href="https://community.affine.pro"
          target="_blank"
        >
-          {t['AFFiNE Community']()}
+          {t['com.affine.aboutAFFiNE.contact.community']()}
          <OpenInNewIcon className="icon" />
        </a>
      </SettingWrapper>
-      <SettingWrapper title={t['Communities']()}>
+      <SettingWrapper title={t['com.affine.aboutAFFiNE.community.title']()}>
        <div className={communityWrapper}>
          {relatedLinks.map(({ icon, title, link }) => {
            return (
@@ -107,14 +112,14 @@ export const AboutAffine = () => {
          })}
        </div>
      </SettingWrapper>
-      <SettingWrapper title={t['Info of legal']()}>
+      <SettingWrapper title={t['com.affine.aboutAFFiNE.legal.title']()}>
        <a
          className={link}
          rel="noreferrer"
          href="https://affine.pro/privacy"
          target="_blank"
        >
-          {t['Privacy']()}
+          {t['com.affine.aboutAFFiNE.legal.privacy']()}
          <OpenInNewIcon className="icon" />
        </a>
        <a
@@ -123,7 +128,7 @@ export const AboutAffine = () => {
          href="https://affine.pro/terms"
          target="_blank"
        >
-          {t['Terms of Use']()}
+          {t['com.affine.aboutAFFiNE.legal.tos']()}
          <OpenInNewIcon className="icon" />
        </a>
      </SettingWrapper>
--- a/apps/core/src/components/affine/setting-modal/general-setting/appearance/index.tsx
+++ b/apps/core/src/components/affine/setting-modal/general-setting/appearance/index.tsx
@@ -33,13 +33,13 @@ export const ThemeSettings = () => {
      )}
    >
      <RadioButton value="system" data-testid="system-theme-trigger">
-        {t['system']()}
+        {t['com.affine.themeSettings.system']()}
      </RadioButton>
      <RadioButton value="light" data-testid="light-theme-trigger">
-        {t['light']()}
+        {t['com.affine.themeSettings.light']()}
      </RadioButton>
      <RadioButton value="dark" data-testid="dark-theme-trigger">
-        {t['dark']()}
+        {t['com.affine.themeSettings.dark']()}
      </RadioButton>
    </RadioButtonGroup>
  );
@@ -91,26 +91,26 @@ export const AppearanceSettings = () => {
  return (
    <>
      <SettingHeader
-        title={t['Appearance Settings']()}
-        subtitle={t['Customize your  AFFiNE Appearance']()}
+        title={t['com.affine.appearanceSettings.title']()}
+        subtitle={t['com.affine.appearanceSettings.subtitle']()}
      />

-      <SettingWrapper title={t['Theme']()}>
+      <SettingWrapper title={t['com.affine.appearanceSettings.theme.title']()}>
        <SettingRow
-          name={t['Color Scheme']()}
-          desc={t['Choose your color scheme']()}
+          name={t['com.affine.appearanceSettings.color.title']()}
+          desc={t['com.affine.appearanceSettings.color.description']()}
        >
          <ThemeSettings />
        </SettingRow>
        <SettingRow
-          name={t['Font Style']()}
-          desc={t['Choose your font style']()}
+          name={t['com.affine.appearanceSettings.font.title']()}
+          desc={t['com.affine.appearanceSettings.font.description']()}
        >
          <FontFamilySettings />
        </SettingRow>
        <SettingRow
-          name={t['Display Language']()}
-          desc={t['com.affine.settings.appearance.language-description']()}
+          name={t['com.affine.appearanceSettings.language.title']()}
+          desc={t['com.affine.appearanceSettings.language.description']()}
        >
          <div className={settingWrapper}>
            <LanguageMenu />
@@ -118,10 +118,8 @@ export const AppearanceSettings = () => {
        </SettingRow>
        {environment.isDesktop ? (
          <SettingRow
-            name={t['Client Border Style']()}
-            desc={t[
-              'com.affine.settings.appearance.border-style-description'
-            ]()}
+            name={t['com.affine.appearanceSettings.clientBorder.title']()}
+            desc={t['com.affine.appearanceSettings.clientBorder.description']()}
            data-testid="client-border-style-trigger"
          >
            <Switch
@@ -132,8 +130,8 @@ export const AppearanceSettings = () => {
        ) : null}

        <SettingRow
-          name={t['Full width Layout']()}
-          desc={t['com.affine.settings.appearance.full-width-description']()}
+          name={t['com.affine.appearanceSettings.fullWidth.title']()}
+          desc={t['com.affine.appearanceSettings.fullWidth.description']()}
        >
          <Switch
            data-testid="full-width-layout-trigger"
@@ -143,10 +141,8 @@ export const AppearanceSettings = () => {
        </SettingRow>
        {runtimeConfig.enableNewSettingUnstableApi && environment.isDesktop ? (
          <SettingRow
-            name={t['Window frame style']()}
-            desc={t[
-              'com.affine.settings.appearance.window-frame-description'
-            ]()}
+            name={t['com.affine.appearanceSettings.windowFrame.title']()}
+            desc={t['com.affine.appearanceSettings.windowFrame.description']()}
          >
            <RadioButtonGroup
              className={settingWrapper}
@@ -159,7 +155,7 @@ export const AppearanceSettings = () => {
              {windowFrameStyleOptions.map(option => {
                return (
                  <RadioButton value={option} key={option}>
-                    {t[option]()}
+                    {t[`com.affine.appearanceSettings.windowFrame.${option}`]()}
                  </RadioButton>
                );
              })}
@@ -168,18 +164,18 @@ export const AppearanceSettings = () => {
        ) : null}
      </SettingWrapper>
      {runtimeConfig.enableNewSettingUnstableApi ? (
-        <SettingWrapper title={t['Date']()}>
+        <SettingWrapper title={t['com.affine.appearanceSettings.date.title']()}>
          <SettingRow
-            name={t['Date Format']()}
-            desc={t['com.affine.settings.appearance.date-format-description']()}
+            name={t['com.affine.appearanceSettings.dateFormat.title']()}
+            desc={t['com.affine.appearanceSettings.dateFormat.description']()}
          >
            <div className={settingWrapper}>
              <DateFormatSetting />
            </div>
          </SettingRow>
          <SettingRow
-            name={t['Start Week On Monday']()}
-            desc={t['com.affine.settings.appearance.start-week-description']()}
+            name={t['com.affine.appearanceSettings.startWeek.title']()}
+            desc={t['com.affine.appearanceSettings.startWeek.description']()}
          >
            <Switch
              checked={appSettings.startWeekOnMonday}
@@ -190,10 +186,14 @@ export const AppearanceSettings = () => {
      ) : null}

      {environment.isDesktop ? (
-        <SettingWrapper title={t['Sidebar']()}>
+        <SettingWrapper
+          title={t['com.affine.appearanceSettings.sidebar.title']()}
+        >
          <SettingRow
-            name={t['com.affine.settings.noise-style']()}
-            desc={t['com.affine.settings.noise-style-description']()}
+            name={t['com.affine.appearanceSettings.noisyBackground.title']()}
+            desc={t[
+              'com.affine.appearanceSettings.noisyBackground.description'
+            ]()}
          >
            <Switch
              checked={appSettings.enableNoisyBackground}
@@ -204,8 +204,10 @@ export const AppearanceSettings = () => {
          </SettingRow>
          {environment.isMacOs && (
            <SettingRow
-              name={t['com.affine.settings.translucent-style']()}
-              desc={t['com.affine.settings.translucent-style-description']()}
+              name={t['com.affine.appearanceSettings.translucentUI.title']()}
+              desc={t[
+                'com.affine.appearanceSettings.translucentUI.description'
+              ]()}
            >
              <Switch
                checked={appSettings.enableBlurBackground}
--- a/apps/core/src/components/affine/setting-modal/general-setting/index.tsx
+++ b/apps/core/src/components/affine/setting-modal/general-setting/index.tsx
@@ -39,7 +39,7 @@ export const useGeneralSettingList = (): GeneralSettingList => {
    },
    {
      key: 'shortcuts',
-      title: t['Keyboard Shortcuts'](),
+      title: t['com.affine.keyboardShortcuts.title'](),
      icon: KeyboardIcon,
      testId: 'shortcuts-panel-trigger',
    },
@@ -51,7 +51,7 @@ export const useGeneralSettingList = (): GeneralSettingList => {
    },
    {
      key: 'about',
-      title: t['About AFFiNE'](),
+      title: t['com.affine.aboutAFFiNE.title'](),
      icon: InformationIcon,
      testId: 'about-panel-trigger',
    },
--- a/apps/core/src/components/affine/setting-modal/general-setting/shortcuts/index.tsx
+++ b/apps/core/src/components/affine/setting-modal/general-setting/shortcuts/index.tsx
@@ -49,8 +49,8 @@ export const Shortcuts = () => {
  return (
    <>
      <SettingHeader
-        title={t['Keyboard Shortcuts']()}
-        subtitle={t['Check Keyboard Shortcuts quickly']()}
+        title={t['com.affine.keyboardShortcuts.title']()}
+        subtitle={t['com.affine.keyboardShortcuts.subtitle']()}
        data-testid="keyboard-shortcuts-title"
      />
      <ShortcutsPanel shortcutsInfo={generalShortcutsInfo} />
--- a/apps/core/src/components/affine/setting-modal/setting-sidebar/index.tsx
+++ b/apps/core/src/components/affine/setting-modal/setting-sidebar/index.tsx
@@ -120,8 +120,12 @@ export const SettingSidebar = ({
  const loginStatus = useCurrentLoginStatus();
  return (
    <div className={settingSlideBar} data-testid="settings-sidebar">
-      <div className={sidebarTitle}>{t['Settings']()}</div>
-      <div className={sidebarSubtitle}>{t['General']()}</div>
+      <div className={sidebarTitle}>
+        {t['com.affine.settingSidebar.title']()}
+      </div>
+      <div className={sidebarSubtitle}>
+        {t['com.affine.settingSidebar.settings.general']()}
+      </div>
      <div className={sidebarItemsWrapper}>
        {generalSettingList.map(({ title, icon, key, testId }) => {
          if (!runtimeConfig.enablePlugin && key === 'plugins') {
@@ -147,7 +151,7 @@ export const SettingSidebar = ({
      </div>

      <div className={sidebarSubtitle}>
-        {t['com.affine.settings.workspace']()}
+        {t['com.affine.settingSidebar.settings.workspace']()}
      </div>
      <div className={clsx(sidebarItemsWrapper, 'scroll')}>
        <Suspense fallback={<WorkspaceListSkeleton />}>
--- a/apps/core/src/components/blocksuite/block-suite-header-title/operation-menu.tsx
+++ b/apps/core/src/components/blocksuite/block-suite-header-title/operation-menu.tsx
@@ -60,7 +60,11 @@ export const PageMenu = ({ rename, pageId }: PageMenuProps) => {
  const { importFile } = usePageHelper(blockSuiteWorkspace);
  const handleFavorite = useCallback(() => {
    setPageMeta(pageId, { favorite: !favorite });
-    toast(favorite ? t['Removed from Favorites']() : t['Added to Favorites']());
+    toast(
+      favorite
+        ? t['com.affine.toastMessage.removedFavorites']()
+        : t['com.affine.toastMessage.addedFavorites']()
+    );
  }, [favorite, pageId, setPageMeta, t]);
  const handleSwitchMode = useCallback(() => {
    setSetting(setting => ({
@@ -68,13 +72,13 @@ export const PageMenu = ({ rename, pageId }: PageMenuProps) => {
    }));
    toast(
      mode === 'page'
-        ? t['com.affine.edgelessMode']()
-        : t['com.affine.pageMode']()
+        ? t['com.affine.toastMessage.edgelessMode']()
+        : t['com.affine.toastMessage.pageMode']()
    );
  }, [mode, setSetting, t]);
  const handleOnConfirm = useCallback(() => {
    removeToTrash(pageId);
-    toast(t['Moved to Trash']());
+    toast(t['com.affine.toastMessage.movedTrash']());
    setOpenConfirm(false);
  }, [pageId, removeToTrash, t]);
  const menuItemStyle = {
@@ -133,7 +137,9 @@ export const PageMenu = ({ rename, pageId }: PageMenuProps) => {
        style={menuItemStyle}
      >
        {t['Convert to ']()}
-        {mode === 'page' ? t['Edgeless']() : t['Page']()}
+        {mode === 'page'
+          ? t['com.affine.pageMode.edgeless']()
+          : t['com.affine.pageMode.page']()}
      </MenuItem>
      <MenuItem
        data-testid="editor-option-menu-favorite"
@@ -149,7 +155,9 @@ export const PageMenu = ({ rename, pageId }: PageMenuProps) => {
          </MenuIcon>
        }
      >
-        {favorite ? t['Remove from favorites']() : t['Add to Favorites']()}
+        {favorite
+          ? t['com.affine.favoritePageOperation.remove']()
+          : t['com.affine.favoritePageOperation.add']()}
      </MenuItem>
      {/* {TODO: add tag and duplicate function support} */}
      {/* <MenuItem
--- a/apps/core/src/components/blocksuite/block-suite-mode-switch/index.tsx
+++ b/apps/core/src/components/blocksuite/block-suite-mode-switch/index.tsx
@@ -56,10 +56,10 @@ export const EditorModeSwitch = ({
        e.preventDefault();
        setSetting(setting => {
          if (setting?.mode !== 'page') {
-            toast(t['com.affine.pageMode']());
+            toast(t['com.affine.toastMessage.pageMode']());
            return { ...setting, mode: 'page' };
          } else {
-            toast(t['com.affine.edgelessMode']());
+            toast(t['com.affine.toastMessage.edgelessMode']());
            return { ...setting, mode: 'edgeless' };
          }
        });
@@ -91,7 +91,7 @@ export const EditorModeSwitch = ({
          onClick={() => {
            setSetting(setting => {
              if (setting?.mode !== 'page') {
-                toast(t['com.affine.pageMode']());
+                toast(t['com.affine.toastMessage.pageMode']());
              }
              return { ...setting, mode: 'page' };
            });
@@ -105,7 +105,7 @@ export const EditorModeSwitch = ({
          onClick={() => {
            setSetting(setting => {
              if (setting?.mode !== 'edgeless') {
-                toast(t['com.affine.edgelessMode']());
+                toast(t['com.affine.toastMessage.edgelessMode']());
              }
              return { ...setting, mode: 'edgeless' };
            });
--- a/apps/core/src/components/blocksuite/block-suite-page-list/index.tsx
+++ b/apps/core/src/components/blocksuite/block-suite-page-list/index.tsx
@@ -204,11 +204,15 @@ export const BlockSuitePageList = ({
        },
        onRestorePage: () => {
          restoreFromTrash(pageMeta.id);
-          toast(t['restored']({ title: pageMeta.title || 'Untitled' }));
+          toast(
+            t['com.affine.toastMessage.restored']({
+              title: pageMeta.title || 'Untitled',
+            })
+          );
        },
        onPermanentlyDeletePage: () => {
          permanentlyDeletePage(pageMeta.id);
-          toast(t['Permanently deleted']());
+          toast(t['com.affine.toastMessage.permanentlyDeleted']());
        },
      };
    });
@@ -243,17 +247,23 @@ export const BlockSuitePageList = ({
      },
      removeToTrash: () => {
        removeToTrash(pageMeta.id);
-        toast(t['Successfully deleted']());
+        toast(t['com.affine.toastMessage.successfullyDeleted']());
      },
      onRestorePage: () => {
        restoreFromTrash(pageMeta.id);
-        toast(t['restored']({ title: pageMeta.title || 'Untitled' }));
+        toast(
+          t['com.affine.toastMessage.restored']({
+            title: pageMeta.title || 'Untitled',
+          })
+        );
      },
      bookmarkPage: () => {
        const status = pageMeta.favorite;
        toggleFavorite(pageMeta.id);
        toast(
-          status ? t['Removed from Favorites']() : t['Added to Favorites']()
+          status
+            ? t['com.affine.toastMessage.removedFavorites']()
+            : t['com.affine.toastMessage.addedFavorites']()
        );
      },
      onDisablePublicSharing: () => {
--- a/apps/core/src/components/pure/help-island/index.tsx
+++ b/apps/core/src/components/pure/help-island/index.tsx
@@ -24,6 +24,7 @@ const DEFAULT_SHOW_LIST: IslandItemNames[] = [
 ];
 const DESKTOP_SHOW_LIST: IslandItemNames[] = [...DEFAULT_SHOW_LIST, 'guide'];
 export type IslandItemNames = 'whatNew' | 'contact' | 'shortcuts' | 'guide';
+
 export const HelpIsland = ({
  showList = environment.isDesktop ? DESKTOP_SHOW_LIST : DEFAULT_SHOW_LIST,
 }: {
@@ -61,7 +62,10 @@ export const HelpIsland = ({
          style={{ height: spread ? `${showList.length * 40 + 4}px` : 0 }}
        >
          {showList.includes('whatNew') && (
-            <Tooltip content={t["Discover what's new!"]()} side="left">
+            <Tooltip
+              content={t['com.affine.appUpdater.whatsNew']()}
+              side="left"
+            >
              <StyledIconWrapper
                data-testid="right-bottom-change-log-icon"
                onClick={() => {
@@ -73,7 +77,10 @@ export const HelpIsland = ({
            </Tooltip>
          )}
          {showList.includes('contact') && (
-            <Tooltip content={t['Contact Us']()} side="left">
+            <Tooltip
+              content={t['com.affine.helpIsland.contactUs']()}
+              side="left"
+            >
              <StyledIconWrapper
                data-testid="right-bottom-contact-us-icon"
                onClick={openAbout}
@@ -83,7 +90,10 @@ export const HelpIsland = ({
            </Tooltip>
          )}
          {showList.includes('shortcuts') && (
-            <Tooltip content={t['Keyboard Shortcuts']()} side="left">
+            <Tooltip
+              content={t['com.affine.keyboardShortcuts.title']()}
+              side="left"
+            >
              <StyledIconWrapper
                data-testid="shortcuts-icon"
                onClick={() => {
@@ -113,7 +123,10 @@ export const HelpIsland = ({
          )}
        </StyledAnimateWrapper>

-        <Tooltip content={t['Help and Feedback']()} side="left">
+        <Tooltip
+          content={t['com.affine.helpIsland.helpAndFeedback']()}
+          side="left"
+        >
          <MuiFade in={!spread} data-testid="faq-icon">
            <StyledTriggerWrapper>
              <HelpIcon />
--- a/apps/core/src/components/pure/quick-search-modal/config.ts
+++ b/apps/core/src/components/pure/quick-search-modal/config.ts
@@ -34,7 +34,7 @@ export const useSwitchToConfig = (workspaceId: string): Config[] => {
  return useMemo(
    () => [
      {
-        title: t['All pages'](),
+        title: t['com.affine.workspaceSubPath.all'](),
        subPath: WorkspaceSubPath.ALL,
        icon: FolderIcon,
      },
@@ -50,7 +50,7 @@ export const useSwitchToConfig = (workspaceId: string): Config[] => {
        icon: SettingsIcon,
      },
      {
-        title: t['Trash'](),
+        title: t['com.affine.workspaceSubPath.trash'](),
        subPath: WorkspaceSubPath.TRASH,
        icon: DeleteTemporarilyIcon,
      },
--- a/apps/core/src/components/pure/trash-button-group/index.tsx
+++ b/apps/core/src/components/pure/trash-button-group/index.tsx
@@ -39,11 +39,15 @@ export const TrashButtonGroup = () => {
          type="primary"
          onClick={() => {
            restoreFromTrash(pageId);
-            toast(t['restored']({ title: pageMeta.title || 'Untitled' }));
+            toast(
+              t['com.affine.toastMessage.restored']({
+                title: pageMeta.title || 'Untitled',
+              })
+            );
          }}
          size="large"
        >
-          {t['Restore it']()}
+          {t['com.affine.trashOperation.restoreIt']()}
        </Button>
      </div>
      <div className={buttonContainer}>
@@ -54,19 +58,19 @@ export const TrashButtonGroup = () => {
          }}
          size="large"
        >
-          {t['Delete permanently']()}
+          {t['com.affine.trashOperation.deletePermanently']()}
        </Button>
      </div>
      <Confirm
-        title={t['TrashButtonGroupTitle']()}
-        content={t['TrashButtonGroupDescription']()}
-        confirmText={t['Delete']()}
+        title={t['com.affine.trashOperation.delete.title']()}
+        content={t['com.affine.trashOperation.delete.description']()}
+        confirmText={t['com.affine.trashOperation.delete']()}
        confirmType="error"
        open={open}
        onConfirm={useCallback(() => {
          jumpToSubPath(workspace.id, WorkspaceSubPath.ALL);
          blockSuiteWorkspace.removePage(pageId);
-          toast(t['Permanently deleted']());
+          toast(t['com.affine.toastMessage.permanentlyDeleted']());
        }, [blockSuiteWorkspace, jumpToSubPath, pageId, workspace.id, t])}
        onCancel={() => {
          setOpen(false);
--- a/apps/core/src/components/pure/workspace-mode-filter-tab/index.tsx
+++ b/apps/core/src/components/pure/workspace-mode-filter-tab/index.tsx
@@ -21,10 +21,12 @@ export const WorkspaceModeFilterTab = () => {
      onValueChange={handleValueChange}
    >
      <RadioButton value="all" style={{ textTransform: 'capitalize' }}>
-        {t['all']()}
+        {t['com.affine.pageMode.all']()}
+      </RadioButton>
+      <RadioButton value="page">{t['com.affine.pageMode.page']()}</RadioButton>
+      <RadioButton value="edgeless">
+        {t['com.affine.pageMode.edgeless']()}
      </RadioButton>
-      <RadioButton value="page">{t['Page']()}</RadioButton>
-      <RadioButton value="edgeless">{t['Edgeless']()}</RadioButton>
    </RadioButtonGroup>
  );
 };
--- a/apps/core/src/components/pure/workspace-slider-bar/collections/add-collection-button.tsx
+++ b/apps/core/src/components/pure/workspace-slider-bar/collections/add-collection-button.tsx
@@ -51,7 +51,7 @@ export const AddCollectionButton = ({
        onConfirm={setting.saveCollection}
        open={show}
        onClose={() => showUpdateCollection(false)}
-        title={t['Save as New Collection']()}
+        title={t['com.affine.editCollection.saveCollection']()}
        init={defaultCollection}
      />
    </>
--- a/apps/core/src/components/pure/workspace-slider-bar/collections/page.tsx
+++ b/apps/core/src/components/pure/workspace-slider-bar/collections/page.tsx
@@ -96,7 +96,7 @@ export const PageOperations = ({
            <DeleteIcon />
          </MenuIcon>
        ),
-        name: t['Delete'](),
+        name: t['com.affine.trashOperation.delete'](),
        click: () => {
          removeToTrash(page.id);
        },
--- a/apps/core/src/components/root-app-sidebar/index.tsx
+++ b/apps/core/src/components/root-app-sidebar/index.tsx
@@ -181,7 +181,9 @@ export const RootAppSidebar = ({
            path={paths.all(currentWorkspaceId)}
            onClick={backToAll}
          >
-            <span data-testid="all-pages">{t['All pages']()}</span>
+            <span data-testid="all-pages">
+              {t['com.affine.workspaceSubPath.all']()}
+            </span>
          </RouteMenuLinkItem>
          {runtimeConfig.enableNewSettingModal ? (
            <MenuItem
@@ -190,22 +192,22 @@ export const RootAppSidebar = ({
              onClick={onOpenSettingModal}
            >
              <span data-testid="settings-modal-trigger">
-                {t['Settings']()}
+                {t['com.affine.settingSidebar.title']()}
              </span>
            </MenuItem>
          ) : null}
        </SidebarContainer>

        <SidebarScrollableContainer>
-          <CategoryDivider label={t['Favorites']()}>
+          <CategoryDivider label={t['com.affine.rootAppSidebar.favorites']()}>
            <AddFavouriteButton workspace={blockSuiteWorkspace} />
          </CategoryDivider>
          <FavoriteList workspace={blockSuiteWorkspace} />
-          <CategoryDivider label={t['Collections']()}>
+          <CategoryDivider label={t['com.affine.rootAppSidebar.collections']()}>
            <AddCollectionButton workspace={blockSuiteWorkspace} />
          </CategoryDivider>
          <CollectionsList workspace={blockSuiteWorkspace} />
-          <CategoryDivider label={t['others']()} />
+          <CategoryDivider label={t['com.affine.rootAppSidebar.others']()} />
          {/* fixme: remove the following spacer */}
          <div style={{ height: '4px' }} />
          <RouteMenuLinkItem
@@ -215,7 +217,9 @@ export const RootAppSidebar = ({
            currentPath={currentPath}
            path={paths.trash(currentWorkspaceId)}
          >
-            <span data-testid="trash-page">{t['Trash']()}</span>
+            <span data-testid="trash-page">
+              {t['com.affine.workspaceSubPath.trash']()}
+            </span>
          </RouteMenuLinkItem>
          {blockSuiteWorkspace && (
            <ImportPage blocksuiteWorkspace={blockSuiteWorkspace} />
--- a/apps/core/src/hooks/affine/use-shortcuts.ts
+++ b/apps/core/src/hooks/affine/use-shortcuts.ts
@@ -1,5 +1,67 @@
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
-import { useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
+
+type KeyboardShortcutsI18NKeys =
+  | 'cancel'
+  | 'quickSearch'
+  | 'newPage'
+  | 'appendDailyNote'
+  | 'expandOrCollapseSidebar'
+  | 'goBack'
+  | 'goForward'
+  | 'selectAll'
+  | 'undo'
+  | 'redo'
+  | 'zoomIn'
+  | 'zoomOut'
+  | 'zoomTo100'
+  | 'zoomToFit'
+  | 'select'
+  | 'text'
+  | 'shape'
+  | 'image'
+  | 'straightConnector'
+  | 'elbowedConnector'
+  | 'curveConnector'
+  | 'pen'
+  | 'hand'
+  | 'note'
+  | 'group'
+  | 'unGroup'
+  | 'switch'
+  | 'bold'
+  | 'italic'
+  | 'underline'
+  | 'strikethrough'
+  | 'inlineCode'
+  | 'codeBlock'
+  | 'link'
+  | 'bodyText'
+  | 'increaseIndent'
+  | 'reduceIndent'
+  | 'groupDatabase'
+  | 'moveUp'
+  | 'moveDown'
+  | 'divider';
+
+// TODO(550): remove this hook after 'useAFFiNEI18N' support scoped i18n
+const useKeyboardShortcutsI18N = () => {
+  const t = useAFFiNEI18N();
+  return useCallback(
+    (key: KeyboardShortcutsI18NKeys) =>
+      t[`com.affine.keyboardShortcuts.${key}`](),
+    [t]
+  );
+};
+
+// TODO(550): remove this hook after 'useAFFiNEI18N' support scoped i18n
+const useHeadingKeyboardShortcutsI18N = () => {
+  const t = useAFFiNEI18N();
+  return useCallback(
+    (number: string) => t['com.affine.keyboardShortcuts.heading']({ number }),
+    [t]
+  );
+};

 interface ShortcutMap {
  [x: string]: string[];
@@ -10,205 +72,209 @@ export interface ShortcutsInfo {
 }

 export const useWinGeneralKeyboardShortcuts = (): ShortcutMap => {
-  const t = useAFFiNEI18N();
+  const t = useKeyboardShortcutsI18N();
  return useMemo(
    () => ({
-      [t['Cancel']()]: ['ESC'],
-      [t['Quick Search']()]: ['Ctrl', 'K'],
-      [t['New Page']()]: ['Ctrl', 'N'],
+      [t('cancel')]: ['ESC'],
+      [t('quickSearch')]: ['Ctrl', 'K'],
+      [t('newPage')]: ['Ctrl', 'N'],
      // not implement yet
-      // [t['Append to Daily Note']()]: 'Ctrl + Alt + A',
-      [t['Expand/Collapse Sidebar']()]: ['Ctrl', '/'],
+      // [t('appendDailyNote')]: 'Ctrl + Alt + A',
+      [t('expandOrCollapseSidebar')]: ['Ctrl', '/'],
      // not implement yet
-      // [t['Go Back']()]: 'Ctrl + [',
-      // [t['Go Forward']()]: 'Ctrl + ]',
+      // [t('goBack')]: 'Ctrl + [',
+      // [t('goForward')]: 'Ctrl + ]',
    }),
    [t]
  );
 };
 export const useMacGeneralKeyboardShortcuts = (): ShortcutMap => {
-  const t = useAFFiNEI18N();
+  const t = useKeyboardShortcutsI18N();
  return useMemo(
    () => ({
-      [t['Cancel']()]: ['ESC'],
-      [t['Quick Search']()]: ['⌘', 'K'],
-      [t['New Page']()]: ['⌘', 'N'],
+      [t('cancel')]: ['ESC'],
+      [t('quickSearch')]: ['⌘', 'K'],
+      [t('newPage')]: ['⌘', 'N'],
      // not implement yet
-      // [t['Append to Daily Note']()]: '⌘ + ⌥ + A',
-      [t['Expand/Collapse Sidebar']()]: ['⌘', '/'],
+      // [t('appendDailyNote')]: '⌘ + ⌥ + A',
+      [t('expandOrCollapseSidebar')]: ['⌘', '/'],
      // not implement yet
-      // [t['Go Back']()]: '⌘ + [',
-      // [t['Go Forward']()]: '⌘ + ]',
+      // [t('goBack')]: '⌘ + [',
+      // [t('goForward')]: '⌘ + ]',
    }),
    [t]
  );
 };

 export const useMacEdgelessKeyboardShortcuts = (): ShortcutMap => {
-  const t = useAFFiNEI18N();
+  const t = useKeyboardShortcutsI18N();
  return useMemo(
    () => ({
-      [t['Select All']()]: ['⌘', 'A'],
-      [t['Undo']()]: ['⌘', 'Z'],
-      [t['Redo']()]: ['⌘', '⇧', 'Z'],
-      [t['Zoom in']()]: ['⌘', '+'],
-      [t['Zoom out']()]: ['⌘', '-'],
-      [t['Zoom to 100%']()]: ['⌘', '0'],
-      [t['Zoom to fit']()]: ['⌘', '1'],
-      [t['Select']()]: ['V'],
-      [t['Text']()]: ['T'],
-      [t['Shape']()]: ['S'],
-      [t['Image']()]: ['I'],
-      [t['Straight Connector']()]: ['L'],
-      [t['Elbowed Connector']()]: ['X'],
+      [t('selectAll')]: ['⌘', 'A'],
+      [t('undo')]: ['⌘', 'Z'],
+      [t('redo')]: ['⌘', '⇧', 'Z'],
+      [t('zoomIn')]: ['⌘', '+'],
+      [t('zoomOut')]: ['⌘', '-'],
+      [t('zoomTo100')]: ['⌘', '0'],
+      [t('zoomToFit')]: ['⌘', '1'],
+      [t('select')]: ['V'],
+      [t('text')]: ['T'],
+      [t('shape')]: ['S'],
+      [t('image')]: ['I'],
+      [t('straightConnector')]: ['L'],
+      [t('elbowedConnector')]: ['X'],
      // not implement yet
-      // [t['Curve Connector']()]: 'C',
-      [t['Pen']()]: ['P'],
-      [t['Hand']()]: ['H'],
-      [t['Note']()]: ['N'],
+      // [t('curveConnector')]: 'C',
+      [t('pen')]: ['P'],
+      [t('hand')]: ['H'],
+      [t('note')]: ['N'],
      // not implement yet
-      // [t['Group']()]: '⌘ + G',
-      // [t['Ungroup']()]: '⌘ + ⇧ + G',
+      // [t('group')]: '⌘ + G',
+      // [t('unGroup')]: '⌘ + ⇧ + G',
    }),
    [t]
  );
 };
 export const useWinEdgelessKeyboardShortcuts = (): ShortcutMap => {
-  const t = useAFFiNEI18N();
+  const t = useKeyboardShortcutsI18N();
  return useMemo(
    () => ({
-      [t['Select All']()]: ['Ctrl', 'A'],
-      [t['Undo']()]: ['Ctrl', 'Z'],
-      [t['Redo']()]: ['Ctrl', 'Y/Ctrl', 'Shift', 'Z'],
-      [t['Zoom in']()]: ['Ctrl', '+'],
-      [t['Zoom out']()]: ['Ctrl', '-'],
-      [t['Zoom to 100%']()]: ['Ctrl', '0'],
-      [t['Zoom to fit']()]: ['Ctrl', '1'],
-      [t['Select']()]: ['V'],
-      [t['Text']()]: ['T'],
-      [t['Shape']()]: ['S'],
-      [t['Image']()]: ['I'],
-      [t['Straight Connector']()]: ['L'],
-      [t['Elbowed Connector']()]: ['X'],
+      [t('selectAll')]: ['Ctrl', 'A'],
+      [t('undo')]: ['Ctrl', 'Z'],
+      [t('redo')]: ['Ctrl', 'Y/Ctrl', 'Shift', 'Z'],
+      [t('zoomIn')]: ['Ctrl', '+'],
+      [t('zoomOut')]: ['Ctrl', '-'],
+      [t('zoomTo100')]: ['Ctrl', '0'],
+      [t('zoomToFit')]: ['Ctrl', '1'],
+      [t('select')]: ['V'],
+      [t('text')]: ['T'],
+      [t('shape')]: ['S'],
+      [t('image')]: ['I'],
+      [t('straightConnector')]: ['L'],
+      [t('elbowedConnector')]: ['X'],
      // not implement yet
-      // [t['Curve Connector']()]: 'C',
-      [t['Pen']()]: ['P'],
-      [t['Hand']()]: ['H'],
-      [t['Note']()]: ['N'],
-      [t['Switch']()]: ['Alt ', ''],
+      // [t('curveConnector')]: 'C',
+      [t('pen')]: ['P'],
+      [t('hand')]: ['H'],
+      [t('note')]: ['N'],
+      [t('switch')]: ['Alt ', ''],
      // not implement yet
-      // [t['Group']()]: 'Ctrl + G',
-      // [t['Ungroup']()]: 'Ctrl + Shift + G',
+      // [t('group')]: 'Ctrl + G',
+      // [t('unGroup')]: 'Ctrl + Shift + G',
    }),
    [t]
  );
 };
 export const useMacPageKeyboardShortcuts = (): ShortcutMap => {
-  const t = useAFFiNEI18N();
+  const t = useKeyboardShortcutsI18N();
+  const tH = useHeadingKeyboardShortcutsI18N();
  return useMemo(
    () => ({
-      [t['Undo']()]: ['⌘', 'Z'],
-      [t['Redo']()]: ['⌘', '⇧', 'Z'],
-      [t['Bold']()]: ['⌘', 'B'],
-      [t['Italic']()]: ['⌘', 'I'],
-      [t['Underline']()]: ['⌘', 'U'],
-      [t['Strikethrough']()]: ['⌘', '⇧', 'S'],
-      [t['Inline code']()]: ['⌘', 'E'],
-      [t['Code block']()]: ['⌘', '⌥', 'C'],
-      [t['Link']()]: ['⌘', 'K'],
-      [t['Quick search']()]: ['⌘', 'K'],
-      [t['Body text']()]: ['⌘', '⌥', '0'],
-      [t['Heading']({ number: '1' })]: ['⌘', '⌥', '1'],
-      [t['Heading']({ number: '2' })]: ['⌘', '⌥', '2'],
-      [t['Heading']({ number: '3' })]: ['⌘', '⌥', '3'],
-      [t['Heading']({ number: '4' })]: ['⌘', '⌥', '4'],
-      [t['Heading']({ number: '5' })]: ['⌘', '⌥', '5'],
-      [t['Heading']({ number: '6' })]: ['⌘', '⌥', '6'],
-      [t['Increase indent']()]: ['Tab'],
-      [t['Reduce indent']()]: ['⇧', 'Tab'],
-      [t['Group as Database']()]: ['⌘', 'G'],
-      [t['Switch']()]: ['⌥', 'S'],
+      [t('undo')]: ['⌘', 'Z'],
+      [t('redo')]: ['⌘', '⇧', 'Z'],
+      [t('bold')]: ['⌘', 'B'],
+      [t('italic')]: ['⌘', 'I'],
+      [t('underline')]: ['⌘', 'U'],
+      [t('strikethrough')]: ['⌘', '⇧', 'S'],
+      [t('inlineCode')]: ['⌘', 'E'],
+      [t('codeBlock')]: ['⌘', '⌥', 'C'],
+      [t('link')]: ['⌘', 'K'],
+      [t('quickSearch')]: ['⌘', 'K'],
+      [t('bodyText')]: ['⌘', '⌥', '0'],
+      [tH('1')]: ['⌘', '⌥', '1'],
+      [tH('2')]: ['⌘', '⌥', '2'],
+      [tH('3')]: ['⌘', '⌥', '3'],
+      [tH('4')]: ['⌘', '⌥', '4'],
+      [tH('5')]: ['⌘', '⌥', '5'],
+      [tH('6')]: ['⌘', '⌥', '6'],
+      [t('increaseIndent')]: ['Tab'],
+      [t('reduceIndent')]: ['⇧', 'Tab'],
+      [t('groupDatabase')]: ['⌘', 'G'],
+      [t('switch')]: ['⌥', 'S'],
      // not implement yet
-      // [t['Move Up']()]: '⌘ + ⌥ + ↑',
-      // [t['Move Down']()]: '⌘ + ⌥ + ↓',
+      // [t('moveUp')]: '⌘ + ⌥ + ↑',
+      // [t('moveDown')]: '⌘ + ⌥ + ↓',
    }),
-    [t]
+    [t, tH]
  );
 };

 export const useMacMarkdownShortcuts = (): ShortcutMap => {
-  const t = useAFFiNEI18N();
+  const t = useKeyboardShortcutsI18N();
+  const tH = useHeadingKeyboardShortcutsI18N();
  return useMemo(
    () => ({
-      [t['Bold']()]: ['**Text**'],
-      [t['Italic']()]: ['*Text*'],
-      [t['Underline']()]: ['~Text~'],
-      [t['Strikethrough']()]: ['~~Text~~'],
-      [t['Divider']()]: ['***'],
-      [t['Inline code']()]: ['`Text` '],
-      [t['Code block']()]: ['``` Space'],
-      [t['Heading']({ number: '1' })]: ['# Text'],
-      [t['Heading']({ number: '2' })]: ['## Text'],
-      [t['Heading']({ number: '3' })]: ['### Text'],
-      [t['Heading']({ number: '4' })]: ['#### Text'],
-      [t['Heading']({ number: '5' })]: ['##### Text'],
-      [t['Heading']({ number: '6' })]: ['###### Text'],
+      [t('bold')]: ['**Text**'],
+      [t('italic')]: ['*Text*'],
+      [t('underline')]: ['~Text~'],
+      [t('strikethrough')]: ['~~Text~~'],
+      [t('divider')]: ['***'],
+      [t('inlineCode')]: ['`Text` '],
+      [t('codeBlock')]: ['``` Space'],
+      [tH('1')]: ['# Text'],
+      [tH('2')]: ['## Text'],
+      [tH('3')]: ['### Text'],
+      [tH('4')]: ['#### Text'],
+      [tH('5')]: ['##### Text'],
+      [tH('6')]: ['###### Text'],
    }),
-    [t]
+    [t, tH]
  );
 };

 export const useWinPageKeyboardShortcuts = (): ShortcutMap => {
-  const t = useAFFiNEI18N();
+  const t = useKeyboardShortcutsI18N();
+  const tH = useHeadingKeyboardShortcutsI18N();
  return useMemo(
    () => ({
-      [t['Undo']()]: ['Ctrl', 'Z'],
-      [t['Redo']()]: ['Ctrl', 'Y'],
-      [t['Bold']()]: ['Ctrl', 'B'],
-      [t['Italic']()]: ['Ctrl', 'I'],
-      [t['Underline']()]: ['Ctrl', 'U'],
-      [t['Strikethrough']()]: ['Ctrl', 'Shift', 'S'],
-      [t['Inline code']()]: [' Ctrl', 'E'],
-      [t['Code block']()]: ['Ctrl', 'Alt', 'C'],
-      [t['Link']()]: ['Ctr', 'K'],
-      [t['Quick search']()]: ['Ctrl', 'K'],
-      [t['Body text']()]: ['Ctrl', 'Shift', '0'],
-      [t['Heading']({ number: '1' })]: ['Ctrl', 'Shift', '1'],
-      [t['Heading']({ number: '2' })]: ['Ctrl', 'Shift', '2'],
-      [t['Heading']({ number: '3' })]: ['Ctrl', 'Shift', '3'],
-      [t['Heading']({ number: '4' })]: ['Ctrl', 'Shift', '4'],
-      [t['Heading']({ number: '5' })]: ['Ctrl', 'Shift', '5'],
-      [t['Heading']({ number: '6' })]: ['Ctrl', 'Shift', '6'],
-      [t['Increase indent']()]: ['Tab'],
-      [t['Reduce indent']()]: ['Shift+Tab'],
-      [t['Group as Database']()]: ['Ctrl + G'],
+      [t('undo')]: ['Ctrl', 'Z'],
+      [t('redo')]: ['Ctrl', 'Y'],
+      [t('bold')]: ['Ctrl', 'B'],
+      [t('italic')]: ['Ctrl', 'I'],
+      [t('underline')]: ['Ctrl', 'U'],
+      [t('strikethrough')]: ['Ctrl', 'Shift', 'S'],
+      [t('inlineCode')]: [' Ctrl', 'E'],
+      [t('codeBlock')]: ['Ctrl', 'Alt', 'C'],
+      [t('link')]: ['Ctr', 'K'],
+      [t('quickSearch')]: ['Ctrl', 'K'],
+      [t('bodyText')]: ['Ctrl', 'Shift', '0'],
+      [tH('1')]: ['Ctrl', 'Shift', '1'],
+      [tH('2')]: ['Ctrl', 'Shift', '2'],
+      [tH('3')]: ['Ctrl', 'Shift', '3'],
+      [tH('4')]: ['Ctrl', 'Shift', '4'],
+      [tH('5')]: ['Ctrl', 'Shift', '5'],
+      [tH('6')]: ['Ctrl', 'Shift', '6'],
+      [t('increaseIndent')]: ['Tab'],
+      [t('reduceIndent')]: ['Shift+Tab'],
+      [t('groupDatabase')]: ['Ctrl + G'],
      ['Switch']: ['Alt + S'],
      // not implement yet
-      // [t['Move Up']()]: 'Ctrl + Alt + ↑',
-      // [t['Move Down']()]: 'Ctrl + Alt + ↓',
+      // [t('moveUp')]: 'Ctrl + Alt + ↑',
+      // [t('moveDown')]: 'Ctrl + Alt + ↓',
    }),
-    [t]
+    [t, tH]
  );
 };
 export const useWinMarkdownShortcuts = (): ShortcutMap => {
-  const t = useAFFiNEI18N();
+  const t = useKeyboardShortcutsI18N();
+  const tH = useHeadingKeyboardShortcutsI18N();
  return useMemo(
    () => ({
-      [t['Bold']()]: ['**Text** '],
-      [t['Italic']()]: ['*Text* '],
-      [t['Underline']()]: ['~Text~ '],
-      [t['Strikethrough']()]: ['~~Text~~ '],
-      [t['Divider']()]: ['***'],
-      [t['Inline code']()]: ['`Text` '],
-      [t['Code block']()]: ['``` Text'],
-      [t['Heading']({ number: '1' })]: ['# Text'],
-      [t['Heading']({ number: '2' })]: ['## Text'],
-      [t['Heading']({ number: '3' })]: ['### Text'],
-      [t['Heading']({ number: '4' })]: ['#### Text'],
-      [t['Heading']({ number: '5' })]: ['##### Text'],
-      [t['Heading']({ number: '6' })]: ['###### Text'],
+      [t('bold')]: ['**Text** '],
+      [t('italic')]: ['*Text* '],
+      [t('underline')]: ['~Text~ '],
+      [t('strikethrough')]: ['~~Text~~ '],
+      [t('divider')]: ['***'],
+      [t('inlineCode')]: ['`Text` '],
+      [t('codeBlock')]: ['``` Text'],
+      [tH('1')]: ['# Text'],
+      [tH('2')]: ['## Text'],
+      [tH('3')]: ['### Text'],
+      [tH('4')]: ['#### Text'],
+      [tH('5')]: ['##### Text'],
+      [tH('6')]: ['###### Text'],
    }),
-    [t]
+    [t, tH]
  );
 };

@@ -219,7 +285,7 @@ export const useMarkdownShortcuts = (): ShortcutsInfo => {
  const winMarkdownShortcuts = useWinMarkdownShortcuts();
  const isMac = environment.isBrowser && environment.isMacOs;
  return {
-    title: t['Markdown Syntax'](),
+    title: t['com.affine.shortcutsTitle.markdownSyntax'](),
    shortcuts: isMac ? macMarkdownShortcuts : winMarkdownShortcuts,
  };
 };
@@ -231,7 +297,7 @@ export const usePageShortcuts = (): ShortcutsInfo => {
  const winPageShortcuts = useWinPageKeyboardShortcuts();
  const isMac = environment.isBrowser && environment.isMacOs;
  return {
-    title: t['Page'](),
+    title: t['com.affine.shortcutsTitle.page'](),
    shortcuts: isMac ? macPageShortcuts : winPageShortcuts,
  };
 };
@@ -243,7 +309,7 @@ export const useEdgelessShortcuts = (): ShortcutsInfo => {
  const winEdgelessShortcuts = useWinEdgelessKeyboardShortcuts();
  const isMac = environment.isBrowser && environment.isMacOs;
  return {
-    title: t['Edgeless'](),
+    title: t['com.affine.shortcutsTitle.edgeless'](),
    shortcuts: isMac ? macEdgelessShortcuts : winEdgelessShortcuts,
  };
 };
@@ -254,9 +320,8 @@ export const useGeneralShortcuts = (): ShortcutsInfo => {
  const macGeneralShortcuts = useMacGeneralKeyboardShortcuts();
  const winGeneralShortcuts = useWinGeneralKeyboardShortcuts();
  const isMac = environment.isBrowser && environment.isMacOs;
-
  return {
-    title: t['General'](),
+    title: t['com.affine.shortcutsTitle.general'](),
    shortcuts: isMac ? macGeneralShortcuts : winGeneralShortcuts,
  };
 };
--- a/apps/core/src/layouts/workspace-layout.tsx
+++ b/apps/core/src/layouts/workspace-layout.tsx
@@ -216,7 +216,7 @@ export const WorkspaceLayoutInner = ({ children }: PropsWithChildren) => {
        // TODO-Doma
        // Co-locate `moveToTrash` with the toast for reuse, as they're always used together
        moveToTrash(pageId);
-        toast(t['Successfully deleted']());
+        toast(t['com.affine.toastMessage.successfullyDeleted']());
      }
      // Drag page into Collections
      processCollectionsDrag(e);
--- a/apps/core/src/pages/404.tsx
+++ b/apps/core/src/pages/404.tsx
@@ -24,14 +24,14 @@ export const StyledContainer = styled('div')(() => {
  };
 });

-export const NotfoundPage = () => {
+export const NotFoundPage = () => {
  const t = useAFFiNEI18N();
  const { jumpToSubPath, jumpToIndex } = useNavigateHelper();
  return (
    <StyledContainer data-testid="notFound">
      <img alt="404" src="/imgs/invite-error.svg" width={360} height={270} />

-      <p>{t['404 - Page Not Found']()}</p>
+      <p>{t['com.affine.notFoundPage.title']()}</p>
      <Button
        onClick={() => {
          const id = localStorage.getItem('last_workspace_id');
@@ -42,12 +42,12 @@ export const NotfoundPage = () => {
          }
        }}
      >
-        {t['Back Home']()}
+        {t['com.affine.backButton']()}
      </Button>
    </StyledContainer>
  );
 };

 export const Component = (): ReactElement => {
-  return <NotfoundPage></NotfoundPage>;
+  return <NotFoundPage />;
 };