feat: add Japanese support and update translation (#2388)

apps/web/src/components/affine/tmp-disable-affine-cloud-modal/index.tsx

@@ -1,4 +1,6 @@
 import { Empty, IconButton, Modal, ModalWrapper } from '@affine/component';
+import { Trans } from '@affine/i18n';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { CloseIcon } from '@blocksuite/icons';
 import type React from 'react';
 
@@ -20,6 +22,7 @@ interface TmpDisableAffineCloudModalProps {
 export const TmpDisableAffineCloudModal: React.FC<
   TmpDisableAffineCloudModalProps
 > = ({ open, onClose }) => {
+  const t = useAFFiNEI18N();
   return (
     <Modal
       data-testid="disable-affine-cloud-modal"
@@ -37,21 +40,25 @@ export const TmpDisableAffineCloudModal: React.FC<
           </IconButton>
         </Header>
         <Content>
-          <ContentTitle>AFFiNE Cloud is upgrading now.</ContentTitle>
+          <ContentTitle>
+            {t['com.affine.cloudTempDisable.title']()}
+          </ContentTitle>
           <StyleTips>
-            We are upgrading the AFFiNE Cloud service and it is temporarily
-            unavailable on the client side. If you wish to stay updated on the
-            progress and be notified on availability, you can join the &nbsp;
-            <a
-              href="https://community.affine.pro"
-              target="_blank"
-              style={{
-                color: 'var(--affine-link-color)',
-              }}
-            >
-              AFFiNE Community
-            </a>
-            .
+            <Trans i18nKey="com.affine.cloudTempDisable.description">
+              We are upgrading the AFFiNE Cloud service and it is temporarily
+              unavailable on the client side. If you wish to stay updated on the
+              progress and be notified on availability, you can join the
+              <a
+                href="https://community.affine.pro"
+                target="_blank"
+                style={{
+                  color: 'var(--affine-link-color)',
+                }}
+              >
+                AFFiNE Community
+              </a>
+              .
+            </Trans>
           </StyleTips>
           <StyleImage>
             <Empty
@@ -69,7 +76,7 @@ export const TmpDisableAffineCloudModal: React.FC<
                 onClose();
               }}
             >
-              Got it
+              {t['Got it']()}
             </StyleButton>
           </StyleButtonContainer>
         </Content>