feat(core): update i18n resources (#6362)

close TOV-769

<img width="712" alt="image" src="https://github.com/toeverything/AFFiNE/assets/102217452/902a0771-e8df-46e2-8d7c-1f453a7099e6">

packages/frontend/core/src/components/affine/language-menu/index.tsx

@@ -1,8 +1,10 @@
 import { Menu, MenuItem, MenuTrigger } from '@affine/component/ui/menu';
+import { DoneIcon } from '@blocksuite/icons';
 import type { ReactElement } from 'react';
 import { memo } from 'react';
 
 import { useLanguageHelper } from '../../../hooks/affine/use-language-helper';
+import * as styles from './style.css';
 
 // Fixme: keyboard focus should be supported by Menu component
 const LanguageMenuContent = memo(function LanguageMenuContent() {
@@ -11,15 +13,21 @@ const LanguageMenuContent = memo(function LanguageMenuContent() {
   return (
     <>
       {languagesList.map(option => {
+        const selected = currentLanguage?.originalName === option.originalName;
         return (
           <MenuItem
             key={option.name}
-            selected={currentLanguage?.originalName === option.originalName}
             title={option.name}
             lang={option.tag}
             onSelect={() => onLanguageChange(option.tag)}
+            endFix={(option.Completeness * 100).toFixed(0) + '%'}
+            data-selected={selected}
+            className={styles.menuItem}
           >
-            {option.originalName}
+            <div className={styles.languageLabelWrapper}>
+              <div>{option.originalName}</div>
+              {selected && <DoneIcon fontSize={'16px'} />}
+            </div>
           </MenuItem>
         );
       })}
@@ -33,10 +41,7 @@ export const LanguageMenu = () => {
     <Menu
       items={(<LanguageMenuContent />) as ReactElement}
       contentOptions={{
-        style: {
-          background: 'var(--affine-white)',
-          width: '250px',
-        },
+        className: styles.menu,
         align: 'end',
       }}
     >

packages/frontend/core/src/components/affine/language-menu/style.css.ts

@@ -1,5 +1,24 @@
 import { cssVar } from '@toeverything/theme';
 import { style } from '@vanilla-extract/css';
-export const hoveredLanguageItem = style({
-  background: cssVar('hoverColor'),
+export const menu = style({
+  background: cssVar('white'),
+  width: '250px',
+  maxHeight: '30vh',
+  overflowY: 'auto',
+});
+
+export const menuItem = style({
+  color: cssVar('textPrimaryColor'),
+  selectors: {
+    '&[data-selected=true]': {
+      color: cssVar('primaryColor'),
+    },
+  },
+});
+
+export const languageLabelWrapper = style({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  marginRight: '8px',
 });

packages/frontend/core/src/components/page-list/tags/tag-list-item.css.ts

@@ -112,7 +112,7 @@ export const titleCellMain = style({
   fontWeight: 600,
   whiteSpace: 'nowrap',
   textOverflow: 'ellipsis',
-  alignSelf: 'stretch',
+  alignSelf: 'center',
   paddingRight: '4px',
 });
 export const titleCellPreview = style({
@@ -122,7 +122,7 @@ export const titleCellPreview = style({
   flexShrink: 0,
   whiteSpace: 'nowrap',
   textOverflow: 'ellipsis',
-  alignSelf: 'stretch',
+  alignSelf: 'center',
 });
 export const iconCell = style({
   display: 'flex',

packages/frontend/core/src/hooks/affine/use-language-helper.ts

@@ -14,6 +14,7 @@ export function useLanguageHelper() {
         tag: item.tag,
         originalName: item.originalName,
         name: item.name,
+        Completeness: item.completeRate,
       })),
     []
   );