chore: update translation (#2916)

Co-authored-by: zuozijian3720 <zuozijian1994@gmail.com>

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

@@ -9,6 +9,7 @@ import type {
   Ref,
   VariableMap,
 } from '@affine/env/filter';
+import { createI18n, I18nextProvider } from '@affine/i18n';
 import { assertExists } from '@blocksuite/global/utils';
 import { render } from '@testing-library/react';
 import type { ReactElement } from 'react';
@@ -21,7 +22,6 @@ import { toLiteral } from '../filter/shared-types';
 import type { FilterMatcherDataType } from '../filter/vars';
 import { filterMatcher } from '../filter/vars';
 import { filterByFilterList } from '../use-all-page-setting';
-
 const ref = (name: keyof VariableMap): Ref => {
   return {
     type: 'ref',
@@ -117,13 +117,19 @@ describe('eval filter', () => {
 
 describe('render filter', () => {
   test('boolean condition value change', async () => {
+    const i18n = createI18n();
     const is = filterMatcher.match(tBoolean.create());
     assertExists(is);
     const Wrapper = () => {
       const [value, onChange] = useState(
         filter(is, ref('Is Favourited'), [true])
       );
-      return <Condition value={value} onChange={onChange} />;
+
+      return (
+        <I18nextProvider i18n={i18n}>
+          <Condition value={value} onChange={onChange} />
+        </I18nextProvider>
+      );
     };
     const result = render(<Wrapper />);
     const dom = await result.findByText('true');

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

@@ -3,6 +3,7 @@ import type { ReactNode } from 'react';
 import { useMemo } from 'react';
 
 import { Menu, MenuItem } from '../../../ui/menu';
+import { FilterTag } from './filter-tag-translation';
 import * as styles from './index.css';
 import { literalMatcher } from './literal-matcher';
 import type { TFunction, TType } from './logical/typesystem';
@@ -39,7 +40,9 @@ export const Condition = ({
               <div className={styles.filterTypeIconStyle}>
                 {variableDefineMap[ast.left.name].icon}
               </div>
-              <div>{ast.left.name}</div>
+              <div>
+                <FilterTag name={ast.left.name} />
+              </div>
             </div>
           </Menu>
           <Menu
@@ -47,7 +50,7 @@ export const Condition = ({
             content={<FunctionSelect value={value} onChange={onChange} />}
           >
             <div className={styles.switchStyle} data-testid="filter-name">
-              {ast.funcName}
+              <FilterTag name={ast.funcName} />
             </div>
           </Menu>
           {args}
@@ -84,7 +87,7 @@ const FunctionSelect = ({
           }}
           key={v.name}
         >
-          {v.name}
+          <FilterTag name={v.name} />
         </MenuItem>
       ))}
     </div>

packages/component/src/components/page-list/filter/filter-tag-translation.ts

@@ -0,0 +1,29 @@
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+
+type FilterTagProps = {
+  name: string;
+};
+
+export const FilterTag = ({ name }: FilterTagProps) => {
+  const t = useAFFiNEI18N();
+  switch (name) {
+    case 'Created':
+      return t['Created']();
+    case 'Updated':
+      return t['Updated']();
+    case 'Is Favourited':
+      return t['com.affine.filter.is-favourited']();
+    case 'after':
+      return t['com.affine.filter.after']();
+    case 'before':
+      return t['com.affine.filter.before']();
+    case 'is':
+      return t['com.affine.filter.is']();
+    case 'true':
+      return t['com.affine.filter.true']();
+    case 'false':
+      return t['com.affine.filter.false']();
+    default:
+      return name;
+  }
+};

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

@@ -3,6 +3,7 @@ import dayjs from 'dayjs';
 import type { ReactNode } from 'react';
 
 import { AFFiNEDatePicker } from '../../date-picker';
+import { FilterTag } from './filter-tag-translation';
 import { inputStyle } from './index.css';
 import { tBoolean, tDate } from './logical/custom-type';
 import { Matcher } from './logical/matcher';
@@ -28,7 +29,7 @@ literalMatcher.register(tBoolean.create(), {
         onChange({ type: 'literal', value: !value.value });
       }}
     >
-      {value.value?.toString()}
+      <FilterTag name={value.value?.toString()} />
     </div>
   ),
 });

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

@@ -1,8 +1,10 @@
 import type { Filter, LiteralValue, VariableMap } from '@affine/env/filter';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import dayjs from 'dayjs';
 import type { ReactNode } from 'react';
 
 import { MenuItem } from '../../../ui/menu';
+import { FilterTag } from './filter-tag-translation';
 import * as styles from './index.css';
 import { tBoolean, tDate } from './logical/custom-type';
 import { Matcher } from './logical/matcher';
@@ -48,16 +50,18 @@ export const CreateFilterMenu = ({
     />
   );
 };
-
 export const VariableSelect = ({
   onSelect,
 }: {
   selected: Filter[];
   onSelect: (value: Filter) => void;
 }) => {
+  const t = useAFFiNEI18N();
   return (
     <div data-testid="variable-select">
-      <div className={styles.variableSelectTitleStyle}>Filter</div>
+      <div className={styles.variableSelectTitleStyle}>
+        {t['com.affine.filter']()}
+      </div>
       <div className={styles.variableSelectDividerStyle}></div>
       {vars
         // .filter(v => !selected.find(filter => filter.left.name === v.name))
@@ -74,7 +78,7 @@ export const VariableSelect = ({
               data-testid="variable-select-item"
               className={styles.menuItemTextStyle}
             >
-              {v.name}
+              <FilterTag name={v.name} />
             </div>
           </MenuItem>
         ))}

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

@@ -1,3 +1,4 @@
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { FilteredIcon } from '@blocksuite/icons';
 import clsx from 'clsx';
 import { useAtom } from 'jotai';
@@ -14,6 +15,7 @@ export const ViewList = ({
   setting: ReturnType<typeof useAllPageSetting>;
 }) => {
   const [open] = useAtom(appSidebarOpenAtom);
+  const t = useAFFiNEI18N();
   return (
     <div style={{ marginLeft: 4, display: 'flex', alignItems: 'center' }}>
       {setting.savedViews.length > 0 && (
@@ -62,7 +64,7 @@ export const ViewList = ({
           size="small"
           hoverColor="var(--affine-icon-color)"
         >
-          Filter
+          {t['com.affine.filter']()}
         </Button>
       </Menu>
     </div>