refactor: change locale key (#3838)

2026-02-13 21:05:19 +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} />