From f23ec9063c7c75b99eaa5346ceda269abbbedfa9 Mon Sep 17 00:00:00 2001
From: zzj3720 <zuozijian1994@gmail.com>
Date: Mon, 30 Oct 2023 16:54:19 +0800
Subject: [PATCH] feat(collections): completion i18n

---
 .../page-list/view/create-collection.tsx      |  9 +--
 .../page-list/view/edit-collection.tsx        | 72 +++++++++++--------
 .../core/src/pages/workspace/collection.tsx   | 36 ++++++----
 packages/frontend/i18n/src/resources/en.json  | 25 +++++++
 4 files changed, 95 insertions(+), 47 deletions(-)

diff --git a/packages/frontend/component/src/components/page-list/view/create-collection.tsx b/packages/frontend/component/src/components/page-list/view/create-collection.tsx
index 2fc26e93b8..0f8243894a 100644
--- a/packages/frontend/component/src/components/page-list/view/create-collection.tsx
+++ b/packages/frontend/component/src/components/page-list/view/create-collection.tsx
@@ -90,19 +90,20 @@ export const CreateCollection = ({
   return (
     <div>
       <div className={styles.content}>
-        <div className={styles.label}>Name</div>
+        <div className={styles.label}>
+          {t['com.affine.editCollectionName.name']()}
+        </div>
         <Input
           autoFocus
           value={value}
           data-testid="input-collection-title"
-          placeholder="Collection Name"
+          placeholder={t['com.affine.editCollectionName.name.placeholder']()}
           onChange={useCallback((value: string) => onChange(value), [onChange])}
           onEnter={save}
         ></Input>
         {showTips ? (
           <div className={styles.createTips}>
-            Collection is a smart folder where you can manually add pages or
-            automatically add pages through rules.
+            {t['com.affine.editCollectionName.createTips']()}
           </div>
         ) : null}
       </div>
diff --git a/packages/frontend/component/src/components/page-list/view/edit-collection.tsx b/packages/frontend/component/src/components/page-list/view/edit-collection.tsx
index 9f34733e35..1ce7c4d3d2 100644
--- a/packages/frontend/component/src/components/page-list/view/edit-collection.tsx
+++ b/packages/frontend/component/src/components/page-list/view/edit-collection.tsx
@@ -229,6 +229,7 @@ const RulesMode = ({
     );
   }, [open, updateCollection, collection]);
   const [expandInclude, setExpandInclude] = useState(false);
+  const count = allowListPages.length + rulesPages.length;
   return (
     <>
       <div className={clsx(styles.rulesTitle, styles.ellipsis)}>
@@ -334,16 +335,20 @@ const RulesMode = ({
                             ) : (
                               <PageIcon style={{ width: 16, height: 16 }} />
                             )}
-                            Page
+                            {t[
+                              'com.affine.editCollection.rules.include.page'
+                            ]()}
+                          </div>
+                          <div className={styles.includeItemContentIs}>
+                            {t['com.affine.editCollection.rules.include.is']()}
                           </div>
-                          <div className={styles.includeItemContentIs}>is</div>
                           <div
                             className={clsx(
                               styles.includeItemTitle,
                               styles.ellipsis
                             )}
                           >
-                            {page?.title || 'Untitled'}
+                            {page?.title || t['Untitled']()}
                           </div>
                         </div>
                         <CloseIcon
@@ -368,7 +373,7 @@ const RulesMode = ({
                     <div
                       style={{ color: 'var(--affine-text-secondary-color)' }}
                     >
-                      Add include page
+                      {t['com.affine.editCollection.rules.include.add']()}
                     </div>
                   </div>
                 </div>
@@ -396,7 +401,7 @@ const RulesMode = ({
                     justifyContent: 'space-between',
                   }}
                 >
-                  <div>HELP INFO</div>
+                  <div>{t['com.affine.collection.helpInfo']()}</div>
                   <CloseIcon
                     color="var(--affine-icon-color)"
                     onClick={hideTips}
@@ -405,14 +410,9 @@ const RulesMode = ({
                   />
                 </div>
                 <div style={{ marginBottom: 10, fontWeight: 600 }}>
-                  What is &quot;Include&quot;？
-                </div>
-                <div>
-                  &quot;Include&quot; refers to manually adding pages rather
-                  than automatically adding them through rule matching. You can
-                  manually add pages through the &quot;Add pages&quot; option or
-                  by dragging and dropping (coming soon).
+                  {t['com.affine.editCollection.rules.include.tipsTitle']()}
                 </div>
+                <div>{t['com.affine.editCollection.rules.include.tips']()}</div>
               </div>
             ) : null}
           </div>
@@ -463,20 +463,29 @@ const RulesMode = ({
               setShowPreview(!showPreview);
             }}
           >
-            Preview
+            {t['com.affine.editCollection.rules.preview']()}
           </div>
           <div
             className={clsx(styles.button, styles.bottomButton)}
             onClick={reset}
           >
-            Reset
+            {t['com.affine.editCollection.rules.reset']()}
           </div>
           <div className={styles.previewCountTips}>
-            After searching, there are currently{' '}
-            <span className={styles.previewCountTipsHighlight}>
-              {allowListPages.length + rulesPages.length}
-            </span>{' '}
-            pages.
+            <Trans
+              i18nKey={
+                count === 0
+                  ? 'com.affine.editCollection.rules.countTips.zero'
+                  : count === 1
+                  ? 'com.affine.editCollection.rules.countTips.one'
+                  : 'com.affine.editCollection.rules.countTips.more'
+              }
+              values={{ count: count }}
+            >
+              After searching, there are currently
+              <span className={styles.previewCountTipsHighlight}>count</span>
+              pages.
+            </Trans>
           </div>
         </div>
         <div style={{ display: 'flex', alignItems: 'center' }}>{buttons}</div>
@@ -622,7 +631,7 @@ const PagesMode = ({
       <div className={styles.pagesBottom}>
         <div className={styles.pagesBottomLeft}>
           <div className={styles.selectedCountTips}>
-            Selected
+            {t['com.affine.selectPage.selected']()}
             <span
               style={{ marginLeft: 7 }}
               className={styles.previewCountTipsHighlight}
@@ -683,7 +692,7 @@ const SelectPage = ({
       <div className={styles.pagesTab}>
         <div className={styles.pagesTabContent}>
           <div style={{ fontSize: 12, lineHeight: '20px', fontWeight: 600 }}>
-            Add include page
+            {t['com.affine.selectPage.title']()}
           </div>
           {!showFilter && filters.length === 0 ? (
             <Menu
@@ -743,7 +752,7 @@ const SelectPage = ({
       <div className={styles.pagesBottom}>
         <div className={styles.pagesBottomLeft}>
           <div className={styles.selectedCountTips}>
-            Selected
+            {t['com.affine.selectPage.selected']()}
             <span
               style={{ marginLeft: 7 }}
               className={styles.previewCountTipsHighlight}
@@ -770,7 +779,7 @@ const SelectPage = ({
             type="primary"
             onClick={confirm}
           >
-            Confirm
+            {t['Confirm']()}
           </Button>
         </div>
       </div>
@@ -874,6 +883,7 @@ const useSearch = (list: PageMeta[]) => {
   };
 };
 const EmptyList = ({ search }: { search?: string }) => {
+  const t = useAFFiNEI18N();
   return (
     <div
       style={{
@@ -893,19 +903,21 @@ const EmptyList = ({ search }: { search?: string }) => {
           fontWeight: 600,
         }}
       >
-        Empty
+        {t['com.affine.selectPage.empty']()}
       </div>
       {search ? (
         <div
           className={styles.ellipsis}
           style={{ maxWidth: 300, fontSize: 15, lineHeight: '24px' }}
         >
-          No page titles contain{' '}
-          <span
-            style={{ fontWeight: 600, color: 'var(--affine-primary-color)' }}
-          >
-            {search}
-          </span>
+          <Trans i18nKey="com.affine.selectPage.empty.tips" values={{ search }}>
+            No page titles contain
+            <span
+              style={{ fontWeight: 600, color: 'var(--affine-primary-color)' }}
+            >
+              search
+            </span>
+          </Trans>
         </div>
       ) : null}
     </div>
diff --git a/packages/frontend/core/src/pages/workspace/collection.tsx b/packages/frontend/core/src/pages/workspace/collection.tsx
index b91e029f95..e148cf8a1e 100644
--- a/packages/frontend/core/src/pages/workspace/collection.tsx
+++ b/packages/frontend/core/src/pages/workspace/collection.tsx
@@ -6,6 +6,8 @@ import {
   useEditCollection,
 } from '@affine/component/page-list';
 import type { Collection } from '@affine/env/filter';
+import { Trans } from '@affine/i18n';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import {
   CloseIcon,
   FilterIcon,
@@ -104,6 +106,7 @@ const Placeholder = ({ collection }: { collection: Collection }) => {
     setShowTips(false);
     localStorage.setItem('hide-empty-collection-help-info', 'true');
   }, []);
+  const t = useAFFiNEI18N();
   return (
     <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
       <div
@@ -123,7 +126,7 @@ const Placeholder = ({ collection }: { collection: Collection }) => {
           }}
         >
           <ViewLayersIcon style={{ color: 'var(--affine-icon-color)' }} />
-          All Collections
+          {t['com.affine.collection.allCollections']()}
           <div>/</div>
         </div>
         <div
@@ -162,7 +165,7 @@ const Placeholder = ({ collection }: { collection: Collection }) => {
               color: 'var(--affine-text-primary-color)',
             }}
           >
-            Empty Collection
+            {t['com.affine.collection.emptyCollection']()}
           </div>
           <div
             style={{
@@ -172,8 +175,7 @@ const Placeholder = ({ collection }: { collection: Collection }) => {
               textAlign: 'center',
             }}
           >
-            Collection is a smart folder where you can manually add pages or
-            automatically add pages through rules.
+            {t['com.affine.collection.emptyCollectionDescription']()}
           </div>
           <div
             style={{
@@ -192,7 +194,9 @@ const Placeholder = ({ collection }: { collection: Collection }) => {
                   color: 'var(--affine-icon-color)',
                 }}
               />
-              <span style={{ padding: '0 4px' }}>Add Pages</span>
+              <span style={{ padding: '0 4px' }}>
+                {t['com.affine.collection.addPages']()}
+              </span>
             </div>
             <div onClick={openRuleEdit} className={styles.placeholderButton}>
               <FilterIcon
@@ -202,7 +206,9 @@ const Placeholder = ({ collection }: { collection: Collection }) => {
                   color: 'var(--affine-icon-color)',
                 }}
               />
-              <span style={{ padding: '0 4px' }}>Add Rules</span>
+              <span style={{ padding: '0 4px' }}>
+                {t['com.affine.collection.addRules']()}
+              </span>
             </div>
           </div>
         </div>
@@ -230,7 +236,7 @@ const Placeholder = ({ collection }: { collection: Collection }) => {
                 justifyContent: 'space-between',
               }}
             >
-              <div>HELP INFO</div>
+              <div>{t['com.affine.collection.helpInfo']()}</div>
               <CloseIcon
                 className={styles.button}
                 style={{ width: 16, height: 16 }}
@@ -247,14 +253,18 @@ const Placeholder = ({ collection }: { collection: Collection }) => {
               }}
             >
               <div>
-                <span style={{ fontWeight: 600 }}>Add pages:</span> You can
-                freely select pages and add them to the collection.
+                <Trans i18nKey="com.affine.collection.addPages.tips">
+                  <span style={{ fontWeight: 600 }}>Add pages:</span> You can
+                  freely select pages and add them to the collection.
+                </Trans>
               </div>
               <div>
-                <span style={{ fontWeight: 600 }}>Add rules:</span> Rules are
-                based on filtering. After adding rules, pages that meet the
-                requirements will be automatically added to the current
-                collection.
+                <Trans i18nKey="com.affine.collection.addRules.tips">
+                  <span style={{ fontWeight: 600 }}>Add rules:</span> Rules are
+                  based on filtering. After adding rules, pages that meet the
+                  requirements will be automatically added to the current
+                  collection.
+                </Trans>
               </div>
             </div>
           </div>
diff --git a/packages/frontend/i18n/src/resources/en.json b/packages/frontend/i18n/src/resources/en.json
index 7783794f99..954a070cf9 100644
--- a/packages/frontend/i18n/src/resources/en.json
+++ b/packages/frontend/i18n/src/resources/en.json
@@ -396,6 +396,31 @@
   "com.affine.page.group-header.select-all": "Select All",
   "com.affine.page.toolbar.selected_one": "<0>{{count}}</0> page selected",
   "com.affine.page.toolbar.selected_others": "<0>{{count}}</0> page(s) selected",
+  "com.affine.collection.allCollections": "All Collections",
+  "com.affine.collection.emptyCollection": "Empty Collection",
+  "com.affine.collection.emptyCollectionDescription": "Collection is a smart folder where you can manually add pages or automatically add pages through rules.",
+  "com.affine.collection.addPages": "Add Pages",
+  "com.affine.collection.addPages.tips": "<0>Add pages:</0> You can freely select pages and add them to the collection.",
+  "com.affine.collection.addRules": "Add Rules",
+  "com.affine.collection.addRules.tips": "<0>Add rules:</0> Rules are based on filtering. After adding rules, pages that meet the requirements will be automatically added to the current collection.",
+  "com.affine.collection.helpInfo": "HELP INFO",
+  "com.affine.editCollectionName.name": "Name",
+  "com.affine.editCollectionName.name.placeholder": "Collection Name",
+  "com.affine.editCollectionName.createTips": "Collection is a smart folder where you can manually add pages or automatically add pages through rules.",
+  "com.affine.editCollection.rules.include.page": "Page",
+  "com.affine.editCollection.rules.include.is": "is",
+  "com.affine.editCollection.rules.include.add": "Add include page",
+  "com.affine.editCollection.rules.include.tipsTitle": "What is \"Include\"？",
+  "com.affine.editCollection.rules.include.tips": "\"Include\" refers to manually adding pages rather than automatically adding them through rule matching. You can manually add pages through the \"Add pages\" option or by dragging and dropping (coming soon).",
+  "com.affine.editCollection.rules.preview": "Preview",
+  "com.affine.editCollection.rules.reset": "Reset",
+  "com.affine.editCollection.rules.countTips.zero": "Showing <1>{{count}}</1> pages.",
+  "com.affine.editCollection.rules.countTips.one": "Showing <1>{{count}}</1> page.",
+  "com.affine.editCollection.rules.countTips.more": "Showing <1>{{count}}</1> pages.",
+  "com.affine.selectPage.title": "Add include page",
+  "com.affine.selectPage.selected": "Selected",
+  "com.affine.selectPage.empty": "Empty",
+  "com.affine.selectPage.empty.tips": "No page titles contain <1>{{search}}</1>",
   "Confirm": "Confirm",
   "Connector": "Connector",
   "Continue with Google": "Continue with Google",