refactor: change locale key (#3838)

packages/component/src/components/app-sidebar/app-updater-button/index.tsx

@@ -114,8 +114,8 @@ export function AppUpdaterButtonPure({
         <div className={clsx([styles.installLabelNormal])}>
           <span className={styles.ellipsisTextOverflow}>
             {!updateReady
-              ? t['com.affine.updater.downloading']()
-              : t['com.affine.updater.update-available']()}
+              ? t['com.affine.appUpdater.downloading']()
+              : t['com.affine.appUpdater.updateAvailable']()}
           </span>
           <span className={styles.versionLabel}>
             {updateAvailable?.version}
@@ -127,7 +127,7 @@ export function AppUpdaterButtonPure({
             <ResetIcon className={styles.icon} />
             <span className={styles.ellipsisTextOverflow}>
               {t[
-                appQuitting ? 'Loading' : 'com.affine.updater.restart-to-update'
+                appQuitting ? 'Loading' : 'com.affine.appUpdater.installUpdate'
               ]()}
             </span>
           </div>
@@ -136,7 +136,7 @@ export function AppUpdaterButtonPure({
             <div
               className={styles.progressInner}
               style={{ width: `${downloadProgress}%` }}
-            ></div>
+            />
           </div>
         )}
       </div>
@@ -148,7 +148,7 @@ export function AppUpdaterButtonPure({
       <>
         <div className={clsx([styles.installLabelNormal])}>
           <span className={styles.ellipsisTextOverflow}>
-            {t['com.affine.updater.update-available']()}
+            {t['com.affine.appUpdater.updateAvailable']()}
           </span>
           <span className={styles.versionLabel}>
             {updateAvailable?.version}
@@ -157,7 +157,7 @@ export function AppUpdaterButtonPure({
 
         <div className={clsx([styles.installLabelHover])}>
           <span className={styles.ellipsisTextOverflow}>
-            {t['com.affine.updater.open-download-page']()}
+            {t['com.affine.appUpdater.openDownloadPage']()}
           </span>
         </div>
       </>
@@ -170,7 +170,7 @@ export function AppUpdaterButtonPure({
         <div className={clsx([styles.whatsNewLabel])}>
           <NewIcon className={styles.icon} />
           <span className={styles.ellipsisTextOverflow}>
-            {t[`Discover what's new!`]()}
+            {t['com.affine.appUpdater.whatsNew']()}
           </span>
         </div>
         <div

packages/component/src/components/app-sidebar/sidebar-header/sidebar-switch.tsx

@@ -12,7 +12,9 @@ export const SidebarSwitch = ({ show }: { show: boolean }) => {
   const [open, setOpen] = useAtom(appSidebarOpenAtom);
   const t = useAFFiNEI18N();
   const ref = useRef(null);
-  const tooltipContent = open ? t['Collapse sidebar']() : t['Expand sidebar']();
+  const tooltipContent = open
+    ? t['com.affine.sidebarSwitch.collapse']()
+    : t['com.affine.sidebarSwitch.expand']();
   const collapseKeyboardShortcuts =
     environment.isBrowser && environment.isMacOs ? ' ⌘+/' : ' Ctrl+/';
 

packages/component/src/components/auth-components/back-button.tsx

@@ -18,7 +18,7 @@ export const BackButton: FC<ButtonProps> = props => {
       icon={<ArrowLeftSmallIcon />}
       {...props}
     >
-      {t['Back Home']()}
+      {t['com.affine.backButton']()}
     </Button>
   );
 };

packages/component/src/components/card/workspace-card/index.tsx

@@ -26,19 +26,28 @@ const WorkspaceType = ({ flavour }: WorkspaceTypeProps) => {
 
   if (flavour === WorkspaceFlavour.LOCAL) {
     return (
-      <p style={{ fontSize: '10px' }} title={t['Local Workspace']()}>
-        <span>{t['Local Workspace']()}</span>
+      <p
+        style={{ fontSize: '10px' }}
+        title={t['com.affine.workspaceType.local']()}
+      >
+        <span>{t['com.affine.workspaceType.local']()}</span>
       </p>
     );
   }
 
   return isOwner ? (
-    <p style={{ fontSize: '10px' }} title={t['Cloud Workspace']()}>
-      <span>{t['Cloud Workspace']()}</span>
+    <p
+      style={{ fontSize: '10px' }}
+      title={t['com.affine.workspaceType.cloud']()}
+    >
+      <span>{t['com.affine.workspaceType.cloud']()}</span>
     </p>
   ) : (
-    <p style={{ fontSize: '10px' }} title={t['Joined Workspace']()}>
-      <span>{t['Joined Workspace']()}</span>
+    <p
+      style={{ fontSize: '10px' }}
+      title={t['com.affine.workspaceType.joined']()}
+    >
+      <span>{t['com.affine.workspaceType.joined']()}</span>
     </p>
   );
 };
@@ -86,7 +95,7 @@ export const WorkspaceCard = ({
           </StyledSettingLink>
         </StyledWorkspaceTitleArea>
         {/* {meta.flavour === WorkspaceFlavour.LOCAL && (
-          <p title={t['Available Offline']()}>
+          <p title={t['com.affine.workspaceType.offline']()}>
             <LocalDataIcon />
             <WorkspaceType flavour={meta.flavour} />
           </p>

packages/component/src/components/member-components/invite-modal.tsx

@@ -135,7 +135,7 @@ export const InviteModal = ({
         </div>
         <div className={styles.inviteModalButtonContainer}>
           <Button style={{ marginRight: 20 }} onClick={handleCancel}>
-            {t['Cancel']()}
+            {t['com.affine.inviteModal.button.cancel']()}
           </Button>
           <Button type="primary" onClick={handleConfirm} loading={isMutating}>
             {t['Invite']()}

packages/component/src/components/page-list/filter/filter-list.tsx

@@ -67,7 +67,7 @@ export const FilterList = ({
             iconPosition="end"
             style={{ fontSize: 'var(--affine-font-xs)', padding: '0 8px' }}
           >
-            {t['Add Filter']()}
+            {t['com.affine.filterList.button.add']()}
           </Button>
         ) : (
           <IconButton size="small">

packages/component/src/components/page-list/operation-cell.tsx

@@ -61,7 +61,9 @@ export const OperationCell = ({
           </MenuIcon>
         }
       >
-        {favorite ? t['Remove from favorites']() : t['Add to Favorites']()}
+        {favorite
+          ? t['com.affine.favoritePageOperation.remove']()
+          : t['com.affine.favoritePageOperation.add']()}
       </MenuItem>
       {!isDesktop && (
         <MenuItem
@@ -72,7 +74,7 @@ export const OperationCell = ({
             </MenuIcon>
           }
         >
-          {t['Open in new tab']()}
+          {t['com.affine.openPageOperation.newTab']()}
         </MenuItem>
       )}
       <MoveToTrash
@@ -131,7 +133,7 @@ export const TrashOperationCell = ({
   const [open, setOpen] = useState(false);
   return (
     <FlexWrapper>
-      <Tooltip content={t['Restore it']()} side="top">
+      <Tooltip content={t['com.affine.trashOperation.restoreIt']()} side="top">
         <IconButton
           style={{ marginRight: '12px' }}
           onClick={() => {
@@ -141,7 +143,11 @@ export const TrashOperationCell = ({
           <ResetIcon />
         </IconButton>
       </Tooltip>
-      <Tooltip content={t['Delete permanently']()} side="top" align="end">
+      <Tooltip
+        content={t['com.affine.trashOperation.deletePermanently']()}
+        side="top"
+        align="end"
+      >
         <IconButton
           onClick={() => {
             setOpen(true);
@@ -151,9 +157,9 @@ export const TrashOperationCell = ({
         </IconButton>
       </Tooltip>
       <Confirm
-        title={`${t['Delete permanently']()}?`}
-        content={t['TrashButtonGroupDescription']()}
-        confirmText={t['Delete']()}
+        title={`${t['com.affine.trashOperation.deletePermanently']()}?`}
+        content={t['com.affine.trashOperation.deleteDescription']()}
+        confirmText={t['com.affine.trashOperation.delete']()}
         confirmType="error"
         open={open}
         onConfirm={() => {

packages/component/src/components/page-list/operation-menu-items/move-to-trash.tsx

@@ -8,6 +8,7 @@ import {
 
 import type { ConfirmProps } from '../../..';
 import { Confirm } from '../../..';
+
 export const MoveToTrash = (props: MenuItemProps) => {
   const t = useAFFiNEI18N();
 
@@ -21,7 +22,7 @@ export const MoveToTrash = (props: MenuItemProps) => {
       type="danger"
       {...props}
     >
-      {t['Move to Trash']()}
+      {t['com.affine.moveToTrash.title']()}
     </MenuItem>
   );
 };
@@ -36,8 +37,8 @@ const ConfirmModal = ({
 
   return (
     <Confirm
-      title={t['Delete page?']()}
-      content={t['will be moved to Trash']({
+      title={t['com.affine.moveToTrash.confirmModal.title']()}
+      content={t['com.affine.moveToTrash.confirmModal.description']({
         title: title || 'Untitled',
       })}
       confirmButtonTestId="confirm-delete-page"

packages/component/src/components/page-list/view/collection-bar.tsx

@@ -96,7 +96,7 @@ export const CollectionBar = (props: CollectionBarProps) => {
           style={{ border: 'none', position: 'static' }}
           onClick={() => setting.backToAll()}
         >
-          {t['Back to all']()}
+          {t['com.affine.collectionBar.backToAll']()}
         </Button>
       </td>
     </tr>

packages/component/src/components/page-list/view/create-collection.tsx

@@ -68,7 +68,7 @@ export const EditCollectionModel = ({
           <EditCollection
             propertiesMeta={propertiesMeta}
             title={title}
-            onConfirmText={t['Save']()}
+            onConfirmText={t['com.affine.editCollection.save']()}
             init={init}
             getPageInfo={getPageInfo}
             onCancel={onClose}
@@ -164,7 +164,7 @@ export const EditCollection = ({
       }}
     >
       <div className={styles.saveTitle}>
-        {title ?? t['Update Collection']()}
+        {title ?? t['com.affine.editCollection.updateCollection']()}
       </div>
       <ScrollableContainer
         className={styles.scrollContainer}
@@ -201,7 +201,9 @@ export const EditCollection = ({
             minHeight: '200px',
           }}
         >
-          <div className={styles.filterTitle}>{t['Filters']()}</div>
+          <div className={styles.filterTitle}>
+            {t['com.affine.editCollection.filters']()}
+          </div>
           <FilterList
             propertiesMeta={propertiesMeta}
             value={value.filterList}
@@ -228,7 +230,7 @@ export const EditCollection = ({
         <div style={{ marginTop: 20 }}>
           <Input
             data-testid="input-collection-title"
-            placeholder={t['Untitled Collection']()}
+            placeholder={t['com.affine.editCollection.untitledCollection']()}
             defaultValue={value.name}
             onChange={name => onChange({ ...value, name })}
           />
@@ -242,7 +244,7 @@ export const EditCollection = ({
         }}
       >
         <Button size="large" onClick={onCancel}>
-          {t['Cancel']()}
+          {t['com.affine.editCollection.button.cancel']()}
         </Button>
         <Button
           style={{
@@ -254,7 +256,7 @@ export const EditCollection = ({
           disabled={isNameEmpty}
           onClick={onSaveCollection}
         >
-          {onConfirmText ?? t['Create']()}
+          {onConfirmText ?? t['com.affine.editCollection.button.create']()}
         </Button>
       </div>
     </div>
@@ -297,10 +299,10 @@ export const SaveCollectionButton = ({
         size="large"
         style={{ padding: '7px 8px' }}
       >
-        {t['Save as New Collection']()}
+        {t['com.affine.editCollection.saveCollection']()}
       </Button>
       <EditCollectionModel
-        title={t['Save as New Collection']()}
+        title={t['com.affine.editCollection.saveCollection']()}
         propertiesMeta={propertiesMeta}
         init={init}
         onConfirm={onConfirm}

packages/component/src/components/share-menu/disable-public-link/index.tsx

@@ -21,17 +21,19 @@ export const PublicLinkDisableModal = ({
     <Modal open={open} onClose={onClose}>
       <ModalWrapper width={480}>
         <Header>
-          <Title>{t['Disable Public Link']()}</Title>
+          <Title>{t['com.affine.publicLinkDisableModal.title']()}</Title>
           <IconButton onClick={onClose}>
             <CloseIcon />
           </IconButton>
         </Header>
         <Content>
-          <StyleTips>{t['Disable Public Link Description']()}</StyleTips>
+          <StyleTips>
+            {t['com.affine.publicLinkDisableModal.description']()}
+          </StyleTips>
           <ButtonContainer>
             <div>
               <Button onClick={onClose} block>
-                {t['Cancel']()}
+                {t['com.affine.publicLinkDisableModal.button.cancel']()}
               </Button>
             </div>
             <div>
@@ -44,7 +46,7 @@ export const PublicLinkDisableModal = ({
                   onClose();
                 }}
               >
-                {t['Disable']()}
+                {t['com.affine.publicLinkDisableModal.button.disable']()}
               </Button>
             </div>
           </ButtonContainer>

packages/component/src/components/share-menu/share-page.tsx

@@ -160,14 +160,14 @@ export const AffineSharePage = (props: ShareMenuProps) => {
                 value={'page'}
                 spanStyle={styles.spanStyle}
               >
-                {t['Page']()}
+                {t['com.affine.pageMode.page']()}
               </RadioButton>
               <RadioButton
                 className={styles.radioButton}
                 value={'edgeless'}
                 spanStyle={styles.spanStyle}
               >
-                {t['Edgeless']()}
+                {t['com.affine.pageMode.edgeless']()}
               </RadioButton>
             </RadioButtonGroup>
           </div>

packages/component/src/ui/confirm/confirm.tsx

@@ -41,7 +41,9 @@ export const Confirm = ({
 }: ConfirmProps) => {
   const t = useAFFiNEI18N();
   const cancelText_ = useMemo<string>(() => {
-    return cancelText === 'Cancel' ? t['Cancel']() : cancelText;
+    return cancelText === 'Cancel'
+      ? t['com.affine.confirmModal.button.cancel']()
+      : cancelText;
   }, [cancelText, t]);
 
   const handleCancel = useCallback(() => {

packages/component/src/ui/modal/confirm-modal.tsx

@@ -60,7 +60,7 @@ export const ConfirmModal = ({
         <StyledModalContent>{content}</StyledModalContent>
         <StyledModalFooter>
           <Button onClick={onCancel} style={{ marginRight: 20 }}>
-            {t['Cancel']()}
+            {t['com.affine.confirmModal.button.cancel']()}
           </Button>
           <Button type={confirmType} onClick={onConfirm}>
             {confirmText || t['Confirm']()}