refactor: change locale key (#3838)

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 }}>

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

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

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

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>

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>

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>

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']()}
         />

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>

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>

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}

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',
     },

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} />

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 />}>