fix(core): workspace embedding ui opt (#12532)

### TL;DR

fix: workspace embedding ui optimization

> CLOSE BS-3531
> CLOSE BS-3532
> CLOSE BS-3533
> CLOSE BS-3534
> CLOSE BS-3535
> CLOSE BS-3536
> CLOSE BS-3553

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

- **New Features**
  - Added a localized "Upload file" label for improved internationalization in embedding settings.

- **Style**
  - Improved layout and text overflow handling for attachments and ignored documents.
  - Enhanced visual alignment and consistency across embedding-related components.
  - Updated progress indicator color for better theme integration.

- **Bug Fixes**
  - Adjusted text truncation and spacing to prevent layout issues with long filenames and document titles.

- **Chores**
  - Updated translation completeness percentage for the "es-CL" locale.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

packages/frontend/core/src/modules/workspace-indexer-embedding/view/attachments.tsx

@@ -79,7 +79,8 @@ const PersistedItem: React.FC<{ attachment: PersistedAttachmentFile }> = ({
       className={attachmentTitle}
       data-testid="workspace-embedding-setting-attachment-persisted-item"
     >
-      <Icon style={{ marginRight: 4 }} /> {attachment.fileName}
+      <Icon style={{ marginRight: 4 }} />
+      <span className="attachment-title-text">{attachment.fileName}</span>
     </div>
   );
 };

packages/frontend/core/src/modules/workspace-indexer-embedding/view/embedding-progress.tsx

@@ -1,5 +1,6 @@
 import { Progress } from '@affine/component';
 import { useI18n } from '@affine/i18n';
+import { cssVarV2 } from '@toeverything/theme/v2';
 
 import { embeddingProgress, embeddingProgressTitle } from './styles-css';
 
@@ -51,7 +52,10 @@ const EmbeddingProgress: React.FC<EmbeddingProgressProps> = ({ status }) => {
         testId="embedding-progress"
         value={progress}
         readonly
-        style={{ visibility: loading ? 'hidden' : 'visible' }}
+        style={{
+          visibility: loading ? 'hidden' : 'visible',
+          color: cssVarV2('text/primary'),
+        }}
       />
     </div>
   );

packages/frontend/core/src/modules/workspace-indexer-embedding/view/embedding-settings.tsx

@@ -219,7 +219,9 @@ export const EmbeddingSettings: React.FC<EmbeddingSettingsProps> = () => {
               data-testid="workspace-embedding-setting-upload-button"
               variant="primary"
             >
-              {t['Upload']()}
+              {t[
+                'com.affine.settings.workspace.indexer-embedding.embedding.upload-file'
+              ]()}
             </Button>
           </Upload>
         </SettingRow>

packages/frontend/core/src/modules/workspace-indexer-embedding/view/ignored-docs.tsx

@@ -56,7 +56,9 @@ const DocItem: React.FC<DocItemProps> = ({ doc }) => {
     >
       <div className={docItemTitle}>
         <DocIcon className={docItemIcon} />
-        <span data-testid="ignore-doc-title">{docTitle}</span>
+        <span className="ignore-doc-title" data-testid="ignore-doc-title">
+          {docTitle}
+        </span>
       </div>
 
       <div className={docItemInfo}>

packages/frontend/core/src/modules/workspace-indexer-embedding/view/styles-css.ts

@@ -8,6 +8,7 @@ export const attachmentsWrapper = css({
   width: '100%',
   alignItems: 'center',
   padding: '8px',
+  marginTop: '-13px',
   gap: '4px',
   isolation: 'isolate',
   border: `1px solid ${cssVar('borderColor')}`,
@@ -37,6 +38,15 @@ export const attachmentTitle = css({
   display: 'flex',
   alignItems: 'center',
   gap: '4px',
+  width: '95%',
+
+  '.attachment-title-text': {
+    flex: 1,
+    minWidth: 0,
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+  },
 });
 
 export const attachmentError = css({
@@ -55,6 +65,7 @@ export const excludeDocsWrapper = css({
   width: '100%',
   alignItems: 'center',
   padding: '8px',
+  marginTop: '-13px',
   gap: '4px',
   isolation: 'isolate',
   border: `1px solid ${cssVar('borderColor')}`,
@@ -83,9 +94,20 @@ export const docItem = css({
 export const docItemTitle = css({
   fontSize: '14px',
   fontWeight: 500,
+  paddingRight: '12px',
   color: cssVar('textPrimaryColor'),
   display: 'flex',
   alignItems: 'center',
+  gap: '4px',
+  flex: 1,
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+
+  '.ignore-doc-title': {
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+  },
 });
 
 export const docItemIcon = css({
@@ -97,11 +119,13 @@ export const docItemIcon = css({
 
 export const docItemInfo = css({
   display: 'flex',
+  flex: '0 0 auto',
   fontSize: '12px',
   fontWeight: 400,
   color: cssVar('textSecondaryColor'),
   gap: '12px',
   alignItems: 'center',
+  justifyContent: 'flex-end',
 });
 
 export const embeddingProgress = css({
@@ -109,7 +133,7 @@ export const embeddingProgress = css({
   flexDirection: 'column',
   alignItems: 'center',
   width: '100%',
-  paddingBottom: '16px',
+  paddingBottom: '24px',
   fontSize: '14px',
   fontWeight: 400,
   color: cssVar('textSecondaryColor'),
@@ -121,4 +145,5 @@ export const embeddingProgressTitle = css({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'space-between',
+  fontSize: '12px',
 });

packages/frontend/i18n/src/i18n.gen.ts

@@ -6231,6 +6231,10 @@ export function useAFFiNEI18N(): {
       * `Select doc`
       */
     ["com.affine.settings.workspace.indexer-embedding.embedding.select-doc"](): string;
+    /**
+      * `Upload file`
+      */
+    ["com.affine.settings.workspace.indexer-embedding.embedding.upload-file"](): string;
     /**
       * `Workspace Embedding`
       */

packages/frontend/i18n/src/resources/en.json

@@ -1556,6 +1556,7 @@
   "com.affine.settings.workspace.indexer-embedding.embedding.title": "Embedding",
   "com.affine.settings.workspace.indexer-embedding.embedding.description": "Embedding allows AI to retrieve your content. If the indexer uses local settings, it may affect some of the results of the Embedding.",
   "com.affine.settings.workspace.indexer-embedding.embedding.select-doc": "Select doc",
+  "com.affine.settings.workspace.indexer-embedding.embedding.upload-file": "Upload file",
   "com.affine.settings.workspace.indexer-embedding.embedding.switch.title": "Workspace Embedding",
   "com.affine.settings.workspace.indexer-embedding.embedding.switch.description": "AI can call files embedded in the workspace.",
   "com.affine.settings.workspace.indexer-embedding.embedding.switch.error": "Failed to update workspace doc embedding enabled",